From dacdd6fe74845a538f5e246d51af998617462c1a Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 22 Apr 2024 14:20:51 +0800
Subject: [PATCH] feat: support markmap svg export and download as png image

---
 web/src/assets/css/mark-map.styl | 14 +++++++++--
 web/src/views/ChatPlus.vue       |  7 +++++-
 web/src/views/Home.vue           |  7 +++---
 web/src/views/MarkMap.vue        | 40 ++++++++++++++++++++++++++++++--
 web/src/views/PowerLog.vue       | 10 +++++---
 5 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/web/src/assets/css/mark-map.styl b/web/src/assets/css/mark-map.styl
index b28ae05c..096c3f32 100644
--- a/web/src/assets/css/mark-map.styl
+++ b/web/src/assets/css/mark-map.styl
@@ -67,8 +67,18 @@
     .right-box {
       width 100%
 
-      h2 {
-        color #ffffff
+      .top-bar {
+        display flex
+        justify-content space-between
+        align-items center
+
+        h2 {
+          color #ffffff
+        }
+
+        .el-button {
+          margin-right 20px
+        }
       }
 
       .markdown {
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 58481265..41e6e170 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -378,7 +378,12 @@ const initData = () => {
         httpGet(`/api/role/list`).then((res) => {
           roles.value = res.data;
           console.log()
-          roleId.value = parseInt(router.currentRoute.value.params["role_id"]) ?? roles.value[0]['id'];
+          if (router.currentRoute.value.params.role_id) {
+            roleId.value = parseInt(router.currentRoute.value.params["role_id"])
+          } else {
+            roleId.value = roles.value[0]['id']
+          }
+
           newChat();
         }).catch((e) => {
           ElMessage.error('获取聊天角色失败: ' + e.messages)
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index e320098a..fe3ba9e0 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -135,9 +135,10 @@ onMounted(() => {
   }
 
   .content {
-    width: 100%;
-    height: 100vh;
-    box-sizing: border-box;
+    width: 100%
+    height: 100vh
+    box-sizing: border-box
+    background-color #282c34
   }
 
 }
diff --git a/web/src/views/MarkMap.vue b/web/src/views/MarkMap.vue
index 0bbeff37..3243d274 100644
--- a/web/src/views/MarkMap.vue
+++ b/web/src/views/MarkMap.vue
@@ -70,11 +70,20 @@
         </div>
 
         <div class="right-box">
-          <h2>思维导图</h2>
+          <div class="top-bar">
+            <h2>思维导图</h2>
+            <el-button @click="downloadImage" type="primary">
+              <el-icon>
+                <Download/>
+              </el-icon>
+              <span>下载图片</span>
+            </el-button>
+          </div>
+
           <div class="markdown" v-if="loading">
             <div v-html="html"></div>
           </div>
-          <div class="body" v-show="!loading">
+          <div class="body" id="markmap" v-show="!loading">
             <svg ref="svgRef" :style="{ height: rightBoxHeight + 'px' }"/>
           </div>
         </div><!-- end task list box -->
@@ -95,6 +104,7 @@ import {Transformer} from 'markmap-lib';
 import {checkSession} from "@/action/session";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import {Download} from "@element-plus/icons-vue";
 
 const leftBoxHeight = ref(window.innerHeight - 105)
 const rightBoxHeight = ref(window.innerHeight - 85)
@@ -287,6 +297,32 @@ const changeModel = () => {
   }
 }
 
+// download SVG to png file
+const downloadImage = () => {
+  const svgElement = document.getElementById("markmap");
+  // 将 SVG 渲染到图片对象
+  const serializer = new XMLSerializer()
+  const source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value)
+  const image = new Image()
+  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
+
+  // 将图片对象渲染
+  const canvas = document.createElement('canvas')
+  canvas.width = svgElement.offsetWidth
+  canvas.height = svgElement.offsetHeight
+  let context = canvas.getContext('2d')
+  context.clearRect(0, 0, canvas.width, canvas.height);
+
+  image.onload = function () {
+    context.drawImage(image, 0, 0)
+    const a = document.createElement('a')
+    a.download = "geek-ai-xmind.png"
+    a.href = canvas.toDataURL(`image/png`)
+    a.click()
+
+  }
+}
+
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/PowerLog.vue b/web/src/views/PowerLog.vue
index 56794fa6..0310fdf5 100644
--- a/web/src/views/PowerLog.vue
+++ b/web/src/views/PowerLog.vue
@@ -19,7 +19,12 @@
         </div>
 
         <el-row v-if="items.length > 0">
-          <el-table :data="items" :row-key="row => row.id" table-layout="auto" border>
+          <el-table :data="items" :row-key="row => row.id" table-layout="auto" border
+                    style="--el-table-border-color:#373C47;
+                --el-table-tr-bg-color:#2D323B;
+                --el-table-row-hover-bg-color:#373C47;
+                --el-table-header-bg-color:#474E5C;
+                --el-table-text-color:#d1d1d1">
             <el-table-column prop="username" label="用户"/>
             <el-table-column prop="model" label="模型"/>
             <el-table-column prop="type" label="类型">
@@ -119,8 +124,7 @@ const fetchData = () => {
 
 <style lang="stylus" scoped>
 .power-log {
-  background-color #ffffff
-
+  color #ffffff
   .inner {
     padding 0 20px 20px 20px