生成思维导图时候自动缓存上一次的结果

CHANGELOG.md

@@ -7,6 +7,7 @@
 - 功能优化：支持 GPT-4o 图片编辑功能。
 - 功能新增：对话页面支持 AI 输出语音播报（TTS）。
 - 功能优化：替换瀑布流组件，优化用户体验。
+- 功能优化：生成思维导图时候自动缓存上一次的结果
 
 ## v4.2.1
 

web/src/views/MarkMap.vue

@@ -19,11 +19,7 @@
 
               <div class="param-line">请选择生成思维导图的AI模型</div>
               <div class="param-line">
-                <el-select
+                <el-select v-model="modelID" placeholder="请选择模型" style="width: 100%">
-                  v-model="modelID"
-                  placeholder="请选择模型"
-                  style="width: 100%"
-                >
                   <el-option
                     v-for="item in models"
                     :key="item.id"
@@ -43,9 +39,7 @@
 
               <div class="text-info">
                 <el-text type="primary"
-                  >当前可用算力：<el-text type="warning">{{
+                  >当前可用算力：<el-text type="warning">{{ loginUser.power }}</el-text></el-text
-                    loginUser.power
-                  }}</el-text></el-text
                 >
               </div>
 
@@ -115,179 +109,186 @@
 </template>
 
 <script setup>
-import { nextTick, ref } from "vue";
+import { nextTick, onMounted, ref } from 'vue'
-import { Markmap } from "markmap-view";
+import { Markmap } from 'markmap-view'
-import { Transformer } from "markmap-lib";
+import { Transformer } from 'markmap-lib'
-import { checkSession, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from '@/store/cache'
-import { httpGet, httpPost } from "@/utils/http";
+import { httpGet, httpPost } from '@/utils/http'
-import { ElMessage } from "element-plus";
+import { ElMessage } from 'element-plus'
-import { Download } from "@element-plus/icons-vue";
+import { Download } from '@element-plus/icons-vue'
-import { Toolbar } from "markmap-toolbar";
+import { Toolbar } from 'markmap-toolbar'
-import { useSharedStore } from "@/store/sharedata";
+import { useSharedStore } from '@/store/sharedata'
 
-const leftBoxHeight = ref(window.innerHeight - 105);
+const leftBoxHeight = ref(window.innerHeight - 105)
 //const rightBoxHeight = ref(window.innerHeight - 115);
-const rightBoxHeight = ref(window.innerHeight);
+const rightBoxHeight = ref(window.innerHeight)
 
-const prompt = ref("");
+const prompt = ref('')
-const text = ref("");
+const text = ref('')
-const content = ref(text.value);
+const content = ref(text.value)
-const html = ref("");
+const html = ref('')
 
-const isLogin = ref(false);
+const isLogin = ref(false)
-const loginUser = ref({ power: 0 });
+const loginUser = ref({ power: 0 })
-const transformer = new Transformer();
+const transformer = new Transformer()
-const store = useSharedStore();
+const store = useSharedStore()
-const loading = ref(false);
+const loading = ref(false)
 
-const svgRef = ref(null);
+const svgRef = ref(null)
-const markMap = ref(null);
+const markMap = ref(null)
-const models = ref([]);
+const models = ref([])
-const modelID = ref(0);
+const modelID = ref(0)
+const cacheKey = ref('MarkMapCache')
 
-getSystemInfo()
+onMounted(async () => {
-  .then((res) => {
+  const cache = localStorage.getItem(cacheKey.value)
-    text.value = res.data["mark_map_text"];
+  if (cache) {
-    content.value = text.value;
+    text.value = cache
-    initData();
+  } else {
+    const res = await getSystemInfo().catch((e) => {
+      ElMessage.error('获取系统配置失败：' + e.message)
+    })
+    text.value = res.data['mark_map_text']
+    content.value = text.value
+  }
+
+  initData()
   nextTick(() => {
     try {
-        markMap.value = Markmap.create(svgRef.value);
+      markMap.value = Markmap.create(svgRef.value)
-        const { el } = Toolbar.create(markMap.value);
+      const { el } = Toolbar.create(markMap.value)
-        document.getElementById("toolbar").append(el);
+      document.getElementById('toolbar').append(el)
-        update();
+      update()
     } catch (e) {
-        console.error(e);
+      console.error(e)
     }
-    });
   })
-  .catch((e) => {
+})
-    ElMessage.error("获取系统配置失败：" + e.message);
-  });
 
 const initData = () => {
-  httpGet("/api/model/list")
+  httpGet('/api/model/list')
     .then((res) => {
       for (let v of res.data) {
-        models.value.push(v);
+        models.value.push(v)
       }
-      modelID.value = models.value[0].id;
+      modelID.value = models.value[0].id
     })
     .catch((e) => {
-      ElMessage.error("获取模型失败：" + e.message);
+      ElMessage.error('获取模型失败：' + e.message)
-    });
+    })
 
   checkSession()
     .then((user) => {
-      loginUser.value = user;
+      loginUser.value = user
-      isLogin.value = true;
+      isLogin.value = true
     })
-    .catch(() => {});
+    .catch(() => {})
-};
+}
 
 const update = () => {
   try {
-    const { root } = transformer.transform(processContent(text.value));
+    const { root } = transformer.transform(processContent(text.value))
-    markMap.value.setData(root);
+    markMap.value.setData(root)
-    markMap.value.fit();
+    markMap.value.fit()
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
-};
+}
 
 const processContent = (text) => {
   if (!text) {
-    return text;
+    return text
   }
 
-  const arr = [];
+  const arr = []
-  const lines = text.split("\n");
+  const lines = text.split('\n')
   for (let line of lines) {
-    if (line.indexOf("```") !== -1) {
+    if (line.indexOf('```') !== -1) {
-      continue;
+      continue
     }
-    line = line.replace(/([*_~`>])|(\d+\.)\s/g, "");
+    line = line.replace(/([*_~`>])|(\d+\.)\s/g, '')
-    arr.push(line);
+    arr.push(line)
   }
-  return arr.join("\n");
+  return arr.join('\n')
-};
+}
 
 window.onresize = () => {
-  leftBoxHeight.value = window.innerHeight - 145;
+  leftBoxHeight.value = window.innerHeight - 145
-  rightBoxHeight.value = window.innerHeight - 85;
+  rightBoxHeight.value = window.innerHeight - 85
-};
+}
 
 const generate = () => {
-  text.value = content.value;
+  text.value = content.value
-  update();
+  update()
-};
+}
 
 // 使用 AI 智能生成
 const generateAI = () => {
-  html.value = "";
+  html.value = ''
-  text.value = "";
+  text.value = ''
-  if (prompt.value === "") {
+  if (prompt.value === '') {
-    return ElMessage.error("请输入你的需求");
+    return ElMessage.error('请输入你的需求')
   }
   if (!isLogin.value) {
-    store.setShowLoginDialog(true);
+    store.setShowLoginDialog(true)
-    return;
+    return
   }
-  loading.value = true;
+  loading.value = true
-  httpPost("/api/markMap/gen", {
+  httpPost('/api/markMap/gen', {
     prompt: prompt.value,
-    model_id: modelID.value
+    model_id: modelID.value,
   })
     .then((res) => {
-      text.value = res.data;
+      text.value = res.data
-      content.value = processContent(text.value);
+      content.value = processContent(text.value)
-      const model = getModelById(modelID.value);
+      const model = getModelById(modelID.value)
-      loginUser.value.power -= model.power;
+      loginUser.value.power -= model.power
-      nextTick(() => update());
+      nextTick(() => update())
-      loading.value = false;
+      loading.value = false
+      // 缓存结果
+      localStorage.setItem(cacheKey.value, text.value)
     })
     .catch((e) => {
-      ElMessage.error("生成思维导图失败：" + e.message);
+      ElMessage.error('生成思维导图失败：' + e.message)
-      loading.value = false;
+      loading.value = false
-    });
+    })
-};
+}
 
 const getModelById = (modelId) => {
   for (let m of models.value) {
     if (m.id === modelId) {
-      return m;
+      return m
     }
   }
-};
+}
 
 // download SVG to png file
 const downloadImage = () => {
-  const svgElement = document.getElementById("markmap");
+  const svgElement = document.getElementById('markmap')
   // 将 SVG 渲染到图片对象
-  const serializer = new XMLSerializer();
+  const serializer = new XMLSerializer()
   const source =
-    '<?xml version="1.0" standalone="no"?>\r\n' +
+    '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value)
-    serializer.serializeToString(svgRef.value);
+  const image = new Image()
-  const image = new Image();
+  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
-  image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
 
   // 将图片对象渲染
-  const canvas = document.createElement("canvas");
+  const canvas = document.createElement('canvas')
-  canvas.width = svgElement.offsetWidth;
+  canvas.width = svgElement.offsetWidth
-  canvas.height = svgElement.offsetHeight;
+  canvas.height = svgElement.offsetHeight
-  let context = canvas.getContext("2d");
+  let context = canvas.getContext('2d')
-  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.clearRect(0, 0, canvas.width, canvas.height)
-  context.fillStyle = "white";
+  context.fillStyle = 'white'
-  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.fillRect(0, 0, canvas.width, canvas.height)
 
   image.onload = function () {
-    context.drawImage(image, 0, 0);
+    context.drawImage(image, 0, 0)
-    const a = document.createElement("a");
+    const a = document.createElement('a')
-    a.download = "geek-ai-xmind.png";
+    a.download = 'geek-ai-xmind.png'
-    a.href = canvas.toDataURL(`image/png`);
+    a.href = canvas.toDataURL(`image/png`)
-    a.click();
+    a.click()
-  };
+  }
-};
+}
 </script>
 
 <style lang="stylus">