From 57af105c9028eda23082c9ec8737c477d9862290 Mon Sep 17 00:00:00 2001
From: lyc <ly_cheng2023@163.com>
Date: Mon, 20 Jan 2025 09:49:02 +0800
Subject: [PATCH] edit

---
 src/renderer/src/api/ai/index.js              |   4 +-
 src/renderer/src/api/mode/index.js            |  14 ++
 src/renderer/src/main.js                      |  11 +-
 src/renderer/src/views/mindMap/index.vue      | 164 +++++++++++++++---
 src/renderer/src/views/model/index.vue        |   1 +
 .../views/teachingDesign/container/center.vue |   4 +-
 6 files changed, 164 insertions(+), 34 deletions(-)

diff --git a/src/renderer/src/api/ai/index.js b/src/renderer/src/api/ai/index.js
index 5e491d3..13e0ff5 100644
--- a/src/renderer/src/api/ai/index.js
+++ b/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,
   })
 }
 // 大模型对话
diff --git a/src/renderer/src/api/mode/index.js b/src/renderer/src/api/mode/index.js
index 40c4ce5..a0e7b9d 100644
--- a/src/renderer/src/api/mode/index.js
+++ b/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({
diff --git a/src/renderer/src/main.js b/src/renderer/src/main.js
index 16f16ec..49da22f 100644
--- a/src/renderer/src/main.js
+++ b/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,
 });
 
@@ -63,7 +62,7 @@ app.use(router)
     .use(Icon)
     .use(Directive)
     .use(aiAudio)
-    .use(VMdPreview)
+    .use(VMdEditor)
     .mount('#app')
 
 const isStadium = (user) => {
diff --git a/src/renderer/src/views/mindMap/index.vue b/src/renderer/src/views/mindMap/index.vue
index 97f4bbd..d792f0e 100644
--- a/src/renderer/src/views/mindMap/index.vue
+++ b/src/renderer/src/views/mindMap/index.vue
@@ -1,17 +1,35 @@
 <template>
   <div class="page-mindmap flex flex-col h-full">
-    <div class="mindmap-header flex items-center justify-between px-5">
-      <div>
-        <b>AI思维导图</b>
-        <span class="ml-5">《{{ curNode.itemtitle }}》</span>
+    <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>
       <el-button type="primary">导出图片</el-button>
     </div>
     <div class="mindmap-main flex flex-1">
       <div class="w-1/2 h-full p-3 main-left flex flex-col">
-        <div class="flex flex-1"></div>
+        <div class="flex flex-1">
+          <v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
+        </div>
         <div class="main-left-ipt">
-          <el-input v-model="input" size="large" placeholder="请输入信息对内容进一步调整" />
+          <el-input v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" />
         </div>
       </div>
       <div class="w-1/2 h-full main-right"></div>
@@ -20,32 +38,132 @@
 </template>
 
 <script setup>
-import { reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted } from 'vue'
 import { sessionStore } from '@/utils/store'
+import { modelList, completion, modelChat } from '@/api/mode/index.js'
+import { createChart, sendChart } from '@/api/ai/index'
 
 
+const textVal = ref('')
+
+const curMode = ref(1)
+const modeOptions = ref([
+  {
+    label: '教学大模型',
+    value: 1
+  },
+  {
+    label: '知识库模型',
+    value: 2,
+  }
+])
+
+const isEdit = ref(false)
+
+// AI 对话
+const resMarkdown = ref(`**设置情境**：
+
+同学们，今天我们将要穿越时空，回到古代，感受一段浪漫的爱情故事。想象一下，你是一位古代的文人墨客，正在参加一场盛大的宴会。宴会上，一位美丽的女子引起了你的注意，她不仅外貌出众，更有着独特的韵味和气质。你决定上前与她相识，但如何才能让她对你产生好感并留下深刻印象呢？这就需要我们运用智慧和才华，通过一首动人的情诗来表达你的心意。
+
+**引导学习**：
+
+1. **了解背景**：首先，我们需要了解古代的爱情文化和诗歌创作背景。通过查阅资料，我们可以知道在古代，文人墨客常常通过诗歌来表达爱意和思念之情。同时，也可以了解到一些著名的爱情故事和诗人，如《静女》的作者杜牧。
+
+2. **赏析诗歌**：接下来，我们将一起赏析《静女》这首诗歌。通过朗读和讨论，我们可以感受到诗人对女子的深深爱意和对美好生活的向往。同时，也可以学习到诗歌中运用的修辞手法和表达技巧，如比喻、象征和夸张等。
+
+3. **创作实践**：在了解了背景和赏析了诗歌之后，我们将进行创作实践。你可以根据自己的经历和感受，写一首表达爱意的诗歌或者一段动人的情话。在创作过程中，你可以尝试运用所学到的表达技巧和修辞手法，使自己的作品更加生动和感人。
+
+4. **分享与交流**：最后，我们将进行作品分享和交流环节。你可以将自己的作品读给同学们听，并听取他们的意见和建议。通过交流和学习，你可以不断提高自己的诗歌创作能力和表达能力。
+
+通过这样的情境设置和学习引导，我们可以更加深入地了解古代的爱情文化和诗歌创作技巧，同时也可以提高自己的表达能力和审美能力。希望大家能够积极参与并享受这次穿越时空的文学之旅！`)
+const params = reactive({
+  prompt: '',
+  dataset_id: '',
+  template: ''
+})
+const messages = ref([
+  {
+    role: 'user',
+    content: ''
+  }
+])
+const aiConversation = async () => {
+  // params.prompt = prompt.value.replace(/{模板名称}/g, '')
+  // 暂时用死数据
+  let str =  '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
+  messages.value[0].content = str
+  params.prompt = str
+  // 教学大模型
+
+  if (curMode.value == 1) {
+    const res = await sendChart({
+      content: params.prompt,
+      conversationId: conversation_id.value,
+      stream: false
+    })
+    resMarkdown.value = res.data.answer
+  }
+  // 知识库模型
+  else {
+    const res = await modelChat({messages: messages.value})
+
+    resMarkdown.value = res.data.answer
+  }
+}
+
+// 查询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 curNode = reactive({})
+
+// 初始化
 onMounted(() => {
   let data = sessionStore.get('subject.curNode')
   Object.assign(curNode, data)
-})
 
+
+  // 获取百度千帆会话ID
+  // getChartId()
+  // 获取提示词
+  getPrompt()
+
+})
 </script>
 
 <style lang="scss" scoped>
-
-  .mindmap-header{
-    background: #fff;
-    height: 45px;
-    border-radius: 5px;
-    margin-bottom: 20px;
+.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-left{
-    background: #fff;
-    border-radius: 5px;
-    .main-left-ipt{
-      height: 40px;
-    }
-  }
-  
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/renderer/src/views/model/index.vue b/src/renderer/src/views/model/index.vue
index 41de465..eadeb32 100644
--- a/src/renderer/src/views/model/index.vue
+++ b/src/renderer/src/views/model/index.vue
@@ -68,6 +68,7 @@
               </div>
               <div class="content-body-right-item-text">{{item.name}}</div>
             </div>
+            <el-button type="primary" @click="router.push('/model/mindmap')">AI思维导图</el-button>
           </div>
         </div>
       </div>
diff --git a/src/renderer/src/views/teachingDesign/container/center.vue b/src/renderer/src/views/teachingDesign/container/center.vue
index f3efd8b..c9f8166 100644
--- a/src/renderer/src/views/teachingDesign/container/center.vue
+++ b/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>