edit 框架设计

package.json

@@ -36,6 +36,7 @@
     "@electron/remote": "^2.1.2",
     "@element-plus/icons-vue": "^2.3.1",
     "@icon-park/vue-next": "^1.4.2",
+    "@kangc/v-md-editor": "^2.3.18",
     "@tinymce/tinymce-vue": "5.1.1",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue-office/docx": "^1.6.2",

src/renderer/src/main.js

@@ -10,6 +10,15 @@ import './assets/iconfont/iconfont'
 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 '@kangc/v-md-editor/lib/theme/style/github.css';
+// highlightjs
+import hljs from 'highlight.js';
+
 import { store } from '@/store'
 import App from './App.vue'
 import router from './router'
@@ -39,6 +48,10 @@ app.config.globalProperties.$requestGetJYW = (url,config)=>{
 import Icon from '@/AixPPTist/src/plugins/icon'
 import Directive from '@/AixPPTist/src/plugins/directive'
 
+VMdPreview.use(githubTheme, {
+  Hljs: hljs,
+});
+
 app.use(router)
     .use(store)
     .use(ElementPlus, { locale: zhLocale })
@@ -46,6 +59,7 @@ app.use(router)
     .use(plugins)
     .use(Icon)
     .use(Directive)
+    .use(VMdPreview)
     .mount('#app')
 
 const isStadium = (user) => {

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

@@ -16,7 +16,10 @@
       </div>
     </div>
     <div class="center-con" v-loading="loading">
-      <template v-if="answer.title">
+      <!-- <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>
+      
+      <!-- <template v-if="answer.title">
         <div class="flex justify-between">
           <span style="font-size: 18px;color: #409eff;">封面页</span>
           <el-button type="primary" link @click="onEdit(item, -1)">编辑</el-button>
@@ -36,11 +39,11 @@
           </div>
           
         </div>
-      </template>
+      </template> -->
       <el-empty v-else description="请选择符合您需要的教学模式，生成教学大纲" />
     </div>
   </div>
-  <EditDialog v-model="isEdit" :item="editItem" :index="editIndex" />
+  <!-- <EditDialog v-model="isEdit" :item="editItem" :index="editIndex" /> -->
 </template>
 
 <script setup>
@@ -60,7 +63,6 @@ const curMode = ref(2)
 const isEdit = ref(false)
 
 const { user } = useUserStore()
-const aiShow = ref(false)
 
 const modeOptions = ref([
   {
@@ -81,12 +83,11 @@ emitter.on('selected', (data) => {
 // 回显大纲
 const curItem = reactive({})
 emitter.on('onShow', (data) => {
-  aiShow.value = false
-  Object.assign(answer, JSON.parse(data.outline))
 
+  let outline = JSON.parse(data.outline)
+  markeDownAnswer.value = outline.markdown
+  emitter.emit('onResult',outline.json)
   Object.assign(curItem, data)
-  curItem.outline = JSON.parse(curItem.outline)
-  emitter.emit('onResult',curItem)
 })
 
 
@@ -100,7 +101,8 @@ const params = reactive(
 
 // 研读
 const loading = ref(false)
-const answer = reactive({})
+// const answer = reactive({})
+const markeDownAnswer = ref('')
 
 const createAi = async () => {
   if (selectedData.value.length == 0) {
@@ -111,10 +113,10 @@ const createAi = async () => {
   let str = selectedData.value.map( item => item.name).join('、')
   let bookV = curNode.roottitle.split('-')[1] + '版'
   loading.value = true
-  aiShow.value = true
+
   try {
 
-    params.prompt = `针对${curNode.edustage}${curNode.edusubject}${bookV}${curNode.itemtitle}这一课，根据以下教学环节：${str}，进行课件教学PPT内容设计`
+    params.prompt = `针对${curNode.edustage}${curNode.edusubject}${bookV}${curNode.itemtitle}这一课，根据以下教学环节：${str}，进行课件教学PPT内容设计，按照幻灯片1、幻灯片2、...的格式`
     // params.template = item.prompt
 
     // 教学大模型
@@ -133,65 +135,72 @@ const createAi = async () => {
 
       data = res.data
     }
+    markeDownAnswer.value = data.answer
     const res = await createOutlineV2({ query: data.answer })
 
-    Object.assign(answer, res.outline)
+
-    curItem.outline = res.outline
+    curItem.outline = JSON.stringify({
+      json: res.outline,
+      markdown: data.answer
+    })
     emitter.emit('onResult', curItem)
-    onSaveTemp(JSON.stringify(res.outline))
+    onSaveTemp()
   } finally {
     loading.value = false
   }
 }
 
 // 编辑大纲
-const editItem = reactive({})
+// const editItem = reactive({})
-const editIndex = ref(0)
+// const editIndex = ref(0)
-const onEdit = (item, index)=>{
+// const onEdit = (item, index)=>{
 
-  let obj = null
+//   let obj = null
-  if(index == -1){
+//   if(index == -1){
-    obj = {
+//     obj = {
-      title: answer.title,
+//       title: answer.title,
-      subTitle: answer.subTitle
+//       subTitle: answer.subTitle
-    }
+//     }
-  }
+//   }
-  else{
+//   else{
-    obj = cloneDeep(item)
+//     obj = cloneDeep(item)
-  }
+//   }
-  editIndex.value = index
+//   editIndex.value = index
-  isEdit.value = true
+//   isEdit.value = true
-  Object.assign(editItem, obj)
+//   Object.assign(editItem, obj)
-}
+// }
 
-emitter.on('editItem', (item) =>{
+// emitter.on('editItem', (item) =>{
-  if(editIndex.value == -1){
+//   if(editIndex.value == -1){
-    answer.title = item.title
+//     answer.title = item.title
-    answer.subTitle = item.subTitle
+//     answer.subTitle = item.subTitle
-  }else{
+//   }else{
-    answer.chapters[editIndex.value] = item
+//     answer.chapters[editIndex.value] = item
-  }
+//   }
-  let data = cloneDeep(curItem)
+//   let data = cloneDeep(curItem)
  
-  data.outline = JSON.stringify(cloneDeep(answer))
+//   data.outline = JSON.stringify(cloneDeep(answer))
-  loading.value = true
+//   loading.value = true
 
-  editSyllabus(data).then( res =>{
+//   editSyllabus(data).then( res =>{
-    curItem.outline = answer
+//     curItem.outline = answer
-    emitter.emit('onResult', curItem)
+//     emitter.emit('onResult', curItem)
-    ElMessage.success('操作成功')
+//     ElMessage.success('操作成功')
-  }).finally( ()=>{
+//   }).finally( ()=>{
-    loading.value = false
+//     loading.value = false
-  })
+//   })
-})
+// })
 
 // 保存模板
-const onSaveTemp = async (answer) => {
+const onSaveTemp = async () => {
-  if (answer == '') return
   let modelIds = selectedData.value.map(item => item.id).join(',')
+  let outline = JSON.stringify({
+    markdown: markeDownAnswer.value, 
+    json:curItem.outline
+  })
   const data = {
     eduId: curNode.id,
-    outline: answer,
+    outline,
     outlineType: curMode.value == 1 ? 0 : 1,
     modelIds,
     sourceType: 1,
@@ -237,7 +246,6 @@ onUnmounted(() => {
   emitter.off('onShow')
   emitter.off('editItem')
   
-
 })
 
 const curNode = reactive({})

src/renderer/src/views/teachingDesign/index.vue

@@ -4,10 +4,10 @@
       <el-col :span="5">
         <Left />
       </el-col>
-      <el-col :span="14">
+      <el-col :span="15">
         <Center />
       </el-col>
-      <el-col :span="5">
+      <el-col :span="4">
         <Right />
       </el-col>
     </el-row>