思维导图

package.json

@@ -68,6 +68,7 @@
     "less": "^4.2.0",
     "less-loader": "^7.3.0",
     "lodash": "^4.17.21",
+    "markmap-lib": "^0.18.8",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.7",
     "node-addon-api": "^8.1.0",
@@ -102,6 +103,7 @@
     "vue-cropper": "1.0.3",
     "vue-qr": "^4.0.9",
     "vue-router": "^4.4.0",
+    "vue3-mindmap": "^0.5.12",
     "vuedraggable": "^4.1.0",
     "whiteboard_lyc": "^0.1.3",
     "xgplayer": "^3.0.19",
@@ -139,4 +141,4 @@
     "vue-tsc": "^1.8.25",
     "windicss": "^3.5.6"
   }
-}
+}

src/main/file.js

@@ -452,6 +452,27 @@ export default async function ({ app, shell, BrowserWindow, ipcMain }) {
     })
   })
 
+  ipcMain.on('export-img64-file', function (event, {base64, name}) {
+    name = name || '思维导图'
+    const parts = base64.split(';base64,');
+    const contentType = parts[0].split(':')[1];
+    const extension = contentType.split('/')[1];
+    const data = Buffer.from(parts[1], 'base64');
+
+    dialog.showSaveDialog({
+      title: '保存图片',
+      defaultPath: path.join(app.getPath('downloads'), `${name}.${extension}`),
+      filters: [
+        { name: 'Image Files', extensions: [extension] }
+      ]
+    }).then(result => {
+      if (!result.canceled) {
+        fs.writeFileSync(result.filePath, data);
+        event.reply('export-img64-file-reply')
+      }
+    });
+  })
+
   /*导出文件*/
   function exportFile(list, callback) {
     let win = BrowserWindow.getFocusedWindow()

src/renderer/src/api/ai/index.js

@@ -1,12 +1,10 @@
 import request from '@/utils/request'
 
 // 创建对话
-export const createChart = ({ headers, data }) => {
+export const createChart = () => {
   return request({
     url: '/qf/createChart',
     method: 'post',
-    headers,
-    data,
   })
 }
 // 大模型对话

src/renderer/src/api/mode/index.js

@@ -29,6 +29,20 @@ export function completion(data) {
   })
 }
 
+// 大模型对话
+export function modelChat(data) {
+  return axios({
+    url: '/mind/chat',
+    method: 'post',
+    headers: {
+      Authorization: 'Bearer ragflow-IwMDI1MGU2YTU3NjExZWZiNWEzMDI0Mm',
+      'Content-Type': 'application/json',
+      Accept: '*/*'
+    },
+    data: data
+  })
+}
+
 // 添加提示词 （系统预设）
 export function addKeyWords(data) {
   return request({

src/renderer/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4723712 */
-  src: url('iconfont.woff2?t=1735483000546') format('woff2'),
-       url('iconfont.woff?t=1735483000546') format('woff'),
-       url('iconfont.ttf?t=1735483000546') format('truetype');
+  src: url('iconfont.woff2?t=1737434703828') format('woff2'),
+       url('iconfont.woff?t=1737434703828') format('woff'),
+       url('iconfont.ttf?t=1737434703828') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-siweidaotu:before {
+  content: "\e606";
+}
+
 .icon-chuangzuo:before {
   content: "\e6cc";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "11685410",
+      "name": "思维导图",
+      "font_class": "siweidaotu",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
     {
       "icon_id": "39170417",
       "name": "创作",

src/renderer/src/components/file-image/index.vue

@@ -42,7 +42,8 @@ const getFileTypeIcon = () => {
     airobot: 'icon-jiqirenfushi', // 数字人生成
     aiimg: 'icon-xiangmuicon_maobishufa', // 文生图片
     aidraw: 'icon-meishu-F', // 文生连环画
-    aiyinyue: 'icon-yinle' //文生音乐
+    aiyinyue: 'icon-yinle', //文生音乐
+    aiswdt: 'icon-siweidaotu' //思维导图
   }
   if (iconObj[name]) {
     return '#' + iconObj[name]

src/renderer/src/layout/index.vue

@@ -24,7 +24,7 @@
         </el-main>
       </el-container>
       <Uploader v-if="uploaderStore.uploadList && uploaderStore.uploadList.length > 0" />
-      <AiChart/>
+<!--      <AiChart/>-->
     </el-container>
   </div>
 </template>
@@ -114,8 +114,8 @@ const onBack = () =>{
       margin-top: -3px;
       margin-right: 3px;
     }
-    
+
   }
-  
+
 }
 </style>

src/renderer/src/main.js

@@ -11,10 +11,9 @@ import 'virtual:windi.css'
 import request from "@/utils/request";
 
 //v-md-editor
-import VMdPreview from '@kangc/v-md-editor/lib/preview';
-import '@kangc/v-md-editor/lib/style/preview.css';
-// 引入你所使用的主题 此处以 github 主题为例
-import githubTheme from '@kangc/v-md-editor/lib/theme/github';
+import VMdEditor from '@kangc/v-md-editor';
+import '@kangc/v-md-editor/lib/style/base-editor.css';
+import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
 import '@kangc/v-md-editor/lib/theme/style/github.css';
 // highlightjs
 import hljs from 'highlight.js';
@@ -51,7 +50,7 @@ app.config.globalProperties.$requestGetJYW = (url,config)=>{
 import Icon from '@/AixPPTist/src/plugins/icon'
 import Directive from '@/AixPPTist/src/plugins/directive'
 
-VMdPreview.use(githubTheme, {
+VMdEditor.use(githubTheme, {
   Hljs: hljs,
 });
 
@@ -93,7 +92,7 @@ app.use(router)
     .use(Icon)
     .use(Directive)
     .use(aiAudio)
-    .use(VMdPreview)
+    .use(VMdEditor)
     .mount('#app')
 
 const isStadium = (user) => {

src/renderer/src/router/index.js

@@ -108,6 +108,12 @@ export const constantRoutes = [
         name: 'aiVoice',
         meta: { title: '语音生成', showBread: true }
       },
+      {
+        path: 'mindmap',
+        component: () => import('@/views/mindMap/index.vue'),
+        name: 'mindmap',
+        meta: { title: 'AI思维导图' }
+      },
     ]
   },
 

src/renderer/src/utils/talkFile/index.js

@@ -87,6 +87,15 @@ export const exportFile = async (list) => {
   })
 }
 
+export const exportImg64File = async (base64, name) => {
+  return new Promise((resolve, reject) => {
+    ipcRenderer.send('export-img64-file', {base64,name})
+    ipcRenderer.once('export-img64-file-reply', (e) => {
+      resolve()
+    })
+  })
+}
+
 export const creatPPT = (name, uploadData) => {
   JSON.parse(JSON.stringify(uploadData))
   return new Promise((resolve, reject) => {

src/renderer/src/views/mindMap/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="page-mindmap flex flex-col h-full">
+    <div class="mindmap-header flex items-center justify-between pl-5">
+      <div class="flex w-1/2 items-center justify-between">
+        <div>
+          <b>AI思维导图</b> <span class="ml-5">《{{ curNode.itemtitle }}》</span>
+        </div>
+        <div>
+          <template v-if="isEdit">
+            <el-button class="mr-3" @click="isEdit = false">取消</el-button>
+            <el-button type="success" class="mr-3" @click="isEdit = false">保存</el-button>
+          </template>
+<!--          <el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
+<!--          <el-select v-model="curMode" class="mr-3 w-30">
+            <el-option
+              v-for="item in modeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>-->
+        </div>
+      </div>
+      <div>
+        导出清晰度：<el-input-number v-model="scale" :min="1" :max="10" />数字越大越清晰，但图片大小会越大
+        <el-button @click="outputImg" type="primary">导出图片</el-button>
+      </div>
+    </div>
+    <div class="mindmap-main flex flex-1" style="overflow: auto;">
+      <div class="w-1/3 h-full p-3 main-left flex flex-col" v-loading="loadingAnswer" style="overflow: auto;">
+        <div class="flex flex-1" style="overflow: auto;">
+          <v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
+        </div>
+        <div class="main-left-ipt">
+          <el-input
+            v-model="textVal"
+            style="max-width: 600px"
+            placeholder="请输入信息对内容进一步调整"
+            class="input-with-select"
+          >
+            <template #append>
+              <el-icon size="20" style="cursor: pointer;" @click="sendMessage"><Position /></el-icon>
+            </template>
+          </el-input>
+<!--          <el-input style="float: left;" v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" /><el-button>发送</el-button>-->
+        </div>
+      </div>
+      <div class="w-2/3 h-full main-right">
+        <mindmap v-if="rootData" :timetravel="true" :drag="true" :zoom="true" :edit="true"
+                 :center-btn="true" :fit-btn="true" :ctm="true" :add-node-btn="true"
+                 v-model="rootData"></mindmap>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from 'vue'
+import { Position } from "@element-plus/icons-vue"
+import { sessionStore } from '@/utils/store'
+import { modelList, completion, modelChat } from '@/api/mode/index.js'
+import { createChart, sendChart } from '@/api/ai/index'
+import { Transformer } from 'markmap-lib'
+import mindmap from 'vue3-mindmap'
+import html2canvas from 'html2canvas'
+import 'vue3-mindmap/dist/style.css'
+import {exportImg64File} from "@/utils/talkFile";
+import axios from 'axios'
+
+const transformer = new Transformer()
+
+// 当前节点
+const curNode = reactive({})
+
+const textVal = ref(``)
+
+const loadingAnswer = ref(false)
+
+const scale = ref(5)
+
+// const textVal = computed(() => {
+//   return `生成${curNode.itemtitle}的教学思维导图，按照markdown的格式编写，只返回markdown的部分`
+// })
+
+const curMode = ref(2)
+const modeOptions = ref([
+  {
+    label: '教学大模型',
+    value: 1
+  },
+  {
+    label: '知识库模型',
+    value: 2,
+  }
+])
+
+const isEdit = ref(false)
+
+// AI 对话
+const resMarkdown = ref(``)
+const params = reactive({
+  prompt: '',
+  dataset_id: '',
+  template: ''
+})
+const messages = ref([
+  {
+    role: 'user',
+    content: ''
+  }
+])
+const aiConversation = async () => {
+  console.log(prompt.value)
+  // return
+  // params.prompt = prompt.value.replace(/{模板名称}/g, '')
+  // 暂时用死数据
+  // let str =  '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
+  // messages.value[0].content = str
+  params.prompt = prompt.value
+  // 教学大模型
+  loadingAnswer.value = true
+  if (curMode.value == 1) {
+    const res = await sendChart({
+      content: params.prompt,
+      conversationId: conversation_id.value,
+      stream: false
+    })
+    resMarkdown.value = res.data.answer.replaceAll('```markdown','').replaceAll('```', '')
+  }
+  // 知识库模型
+  else {
+    let data =  {
+      "messages": [
+        {
+          "role": "user",
+          "content": params.prompt
+        }
+      ]
+    }
+    const res = await text2mindmap(data).finally(() => {
+      loadingAnswer.value = false
+    })
+    console.log(res)
+    resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
+  }
+}
+
+const sendMessage = async () => {
+  loadingAnswer.value = true
+  rootData.value = null
+  let data = {
+    "messages": [
+      {
+        "role":"assiatant",
+        "content": resMarkdown.value
+      },
+      {
+        "role": "user",
+        "content": `${textVal.value}，按照markdown的格式编写，只返回markdown的部分`
+      }
+    ]
+  }
+  let res = await text2mindmap(data).finally(() => {
+    loadingAnswer.value = false
+  })
+  resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
+}
+
+const text2mindmap =(data)=> {
+  return axios({
+    url: "https://ai.ysaix.com:7865/chat",
+    method: "post",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "*/*",
+    },
+    data:data
+  });
+}
+
+// 查询prompt 替换
+const prompt = ref('')
+const getPrompt = async () => {
+  const { rows } = await modelList({ model: 5 })
+  let str = rows.find((item) => item.name.indexOf('思维导图') != -1).prompt
+
+  str = str.replace('{学段}', curNode.edustage)
+  str = str.replace('{学科}', curNode.edusubject)
+  let bookV = curNode.roottitle + '版'
+  str = str.replace('{教材版本}', bookV)
+  str = str.replace('{课程名称}', `《${curNode.itemtitle}》`)
+  prompt.value = str
+}
+
+// 千帆创建对话
+const conversation_id = ref('')
+const getChartId = async () => {
+  const res = await createChart()
+  conversation_id.value = res.data.conversation_id
+    // ai 对话
+    aiConversation()
+}
+
+const rootData = ref(null)
+
+const degure = (item) => {
+  item.name = item.content.replace(/<[^>]*>/g, '');;
+  if (item.children && item.children.length) {
+    item.children.forEach(item2 => {
+      degure(item2)
+    })
+  }
+}
+
+const outputImg = () => {
+  let svg = window.document.getElementById('Mindmap_svg-wrapper_fgvb6')
+  // let das = svg.querySelectorAll('.Mindmap_root_fgvb6')[0]
+  html2canvas(svg,{
+    scale: scale.value
+  }).then((canvas) => {
+    const dataUrl = canvas.toDataURL()
+    exportImg64File(dataUrl, `${curNode.itemtitle}思维导图`)
+  })
+  // mm.value.fit()
+}
+// 初始化
+onMounted(() => {
+  let data = sessionStore.get('subject.curNode')
+  Object.assign(curNode, data)
+
+  // 获取提示词
+  getPrompt()
+  // 获取百度千帆会话ID
+  getChartId()
+
+})
+// 监听 initValue 的变化
+watch(() => resMarkdown.value, () => {
+  const { root } = transformer.transform(resMarkdown.value)
+  degure(root)
+  rootData.value = [root]
+  console.log(rootData.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.mindmap-header {
+  background: #fff;
+  height: 45px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+.main-left {
+  background: #fff;
+  border-radius: 5px;
+  .main-left-ipt {
+    height: 40px;
+  }
+}
+.main-right{
+  border: 1px solid #ccc;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/renderer/src/views/model/index.vue

@@ -161,6 +161,10 @@ const tools = reactive([{
   name: '文生图片',
   path: '/model/aiKolors',
   img: 'aiimg'
+},{
+  name: 'AI思维导图',
+  path: '/model/mindmap',
+  img: 'aiswdt'
 },{
   name: '文生连环画',
   path: '',

src/renderer/src/views/teachingDesign/container/center.vue

@@ -17,8 +17,8 @@
     </div>
     <div class="center-con" v-loading="loading">
       <!-- <v-md-editor v-if="markeDownAnswer" :model-value="markeDownAnswer" mode="preview"></v-md-editor> -->
-      <v-md-preview v-if="markeDownAnswer" :text="markeDownAnswer"></v-md-preview>
-      
+      <!-- <v-md-preview v-if="markeDownAnswer" :text="markeDownAnswer"></v-md-preview> -->
+      <v-md-editor v-if="markeDownAnswer" v-model="markeDownAnswer" mode="preview" />
       <el-empty v-else description="请选择符合您需要的教学模式，生成教学大纲" />
     </div>
   </div>