edit 教学框架

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

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

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

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "39170417",
+      "name": "创作",
+      "font_class": "chuangzuo",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
     {
       "icon_id": "11819186",
       "name": "音乐",

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="container-center flex">
+    <div class="center-header flex">
+      <span>教学大纲</span>
+      <div>
+        <el-select v-model="curMode" class="mr-4 w-30">
+          <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-button type="primary" @click="createAi">
+          <i class="iconfont icon-chuangzuo"></i>生成教学大纲
+        </el-button>
+      </div>
+    </div>
+    <div class="center-con" v-loading="loading">
+      <TypingEffect v-if="answer" :text="answer" :delay="10" aiShow/>
+      <el-empty v-if="!answer" description="请选择符合您需要的教学模式，生成教学大纲" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { sessionStore } from '@/utils/store'
+import emitter from '@/utils/mitt'
+import * as commUtils from '@/utils/comm.js'
+import { createChart, sendChart } from '@/api/ai/index'
+import { completion, tempResult, tempSave, removeChildTemp, editTempResult, modelList } from '@/api/mode/index.js'
+import TypingEffect from '@/components/typing-effect/index.vue'
+
+const curMode = ref(2)
+const modeOptions = ref([
+  {
+    label: '教学大模型',
+    value: 1
+  },
+  {
+    label: '知识库模型',
+    value: 2
+  }
+])
+
+// 选中的环节
+const selectedData = ref([])
+emitter.on('selected', (data)=>{
+  selectedData.value = data
+})
+
+
+const params = reactive(
+  {
+    prompt: '',
+    dataset_id: '',
+    template: ''
+  }
+)
+
+// 研读
+const loading = ref(false)
+const answer = ref('')
+const createAi = async ()=>{
+  if(selectedData.value.length == 0){
+    ElMessage.warning('请先选择教学环节后再生成教学大纲')
+    return
+  }
+  let str = selectedData.value.map( item => item.name).join('、')
+  let bookV = curNode.roottitle.split('-')[1] + '版'
+  loading.value = true
+  try {
+
+    params.prompt = `针对${curNode.edustage}${curNode.edusubject}${bookV}${curNode.itemtitle}这一课，根据以下教学环节：${str}，进行课件教学PPT内容设计`
+    // params.template = item.prompt
+
+    // 教学大模型
+    let data = null
+    if (curMode.value == 1) {
+      const res = await sendChart({
+        content: params.prompt,
+        conversationId: conversation_id.value,
+        stream: false
+      })
+      data = res.data
+    }
+    // 知识库模型
+    else {
+      const res = await completion(params)
+      data = res.data
+    }
+    console.log(data)
+    emitter('onResult', data.answer)
+    answer.value = getResult(data.answer)
+
+    // onSaveTemp(item)
+  } finally {
+    loading.value = false
+  }
+
+}
+
+// 去掉字符串中的 ### **
+let getResult = (str) => {
+  let newStr = str.replace(/#+|(\*\*)/g, '');
+  return newStr
+}
+
+// 千帆创建对话
+const conversation_id = ref('')
+const getChartId = () => {
+  createChart({ app_id: '712ff0df-ed6b-470f-bf87-8cfbaf757be5' }).then(res => {
+    localStorage.setItem("conversation_id", res.data.conversation_id);
+    conversation_id.value = res.data.conversation_id;
+  })
+}
+
+onUnmounted(()=>{
+  emitter.off('selected')
+})
+
+const curNode = reactive({})
+onMounted(() => {
+  let data = sessionStore.get('subject.curNode')
+  Object.assign(curNode, data);
+  // 框架设计 用课标的dataset_id
+  let jsonKey = `课标-${data.edustage}-${data.edusubject}`
+  params.dataset_id = commUtils.dataSetJson[jsonKey]
+
+  // 获取百度千帆会话ID
+  conversation_id.value = localStorage.getItem('conversation_id')
+  if (!conversation_id.value) {
+    getChartId();
+  }
+
+})
+</script>
+
+<style lang="scss" scoped>
+.container-center{
+  height: 100%;
+  font-size: 15px;
+  flex-direction: column;
+  .center-header{
+    justify-content: space-between;
+    align-items: center;
+    .icon-jiahao{
+      font-size: 12px;
+    }
+  }
+  .center-con{
+    flex: 1;
+    margin-top: 5px;
+    background-color: #fff;
+    border-radius: 5px;
+    text-align: left;
+    overflow-y: auto;
+  }
+}
+
+</style>

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

@@ -1,29 +1,308 @@
 <template>
-  <div class="container-left">
+  <div class="container-left flex">
-    <div class="left-header flex" @mouseenter="isAdd = true" @mouseleave="isAdd = false">
+    <div class="left-header flex">
       <span>教学模式</span>
-      <el-button v-show="isAdd" type="primary" size="small" link><i class="iconfont icon-jiahao"></i>新增</el-button>
+      <el-button type="primary"  link @click="addVisible = true; addChild = false"><i class="iconfont icon-jiahao"
+          ></i>新增</el-button>
     </div>
-
+    <div class="left-list">
+      <div class="item" v-for="item in templateList" :key="item.id">
+        <div class="item-name flex" @mouseenter="item.isAdd = true" @mouseleave="item.isAdd = false"
+          @click="handleItem(item)">
+          <span>{{ item.name }}</span>
+          <i v-show="item.isAdd && !item.isSelect && !item.newMode" class="iconfont icon-jiahao"></i>
+          <i v-show="item.isSelect" class="iconfont icon-zuixiaohua"></i>
+          <!--新增的教学模式才会有添加、编辑-->
+          <template v-if="item.newMode">
+            <div>
+              <el-button type="primary" link @click="addModeChild">添加</el-button>
+              <el-button type="primary" link @click="editMode(item)">编辑</el-button>
+            </div>
+          </template>
+        </div>
+        <div class="item-child flex" :class="el.isSelect ? 'act-child' : ''" v-for="el in item.child" :key="el.id"
+          @mouseenter="el.isAdd = true" @mouseleave="el.isAdd = false" @click="handleItemChild(el)">
+          <span>{{ el.name }}</span>
+          <i v-show="el.isAdd && !el.isSelect" class="iconfont icon-jiahao"></i>
+          <i v-show="el.isSelect" class="iconfont icon-zuixiaohua"></i>
+        </div>
+      </div>
+    </div>
+    <!--弹窗-->
+    <el-dialog v-model="addVisible" append-to-body :show-close="false" width="550" :before-close="handleBeforeClose"
+      style="border-radius: 10px; padding: 10px 15px;">
+      <template #header>
+        <div class="mode-dialog-header flex">
+          <span>{{ addChild ? '教学环节' : '教学模式' }}</span>
+          <i class="iconfont icon-guanbi" @click="addVisible = false"></i>
+        </div>
+      </template>
+      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
+        class="demo-ruleForm">
+        <el-form-item :label="`教学${ addChild ? '环节' : '模式'}名称`" prop="name">
+          <el-input v-model="ruleForm.name" />
+        </el-form-item>
+        <el-form-item label="说明" v-if="addChild">
+          <el-input v-model="ruleForm.desc" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <div class="mt-10 form-btn">
+        <el-button @click="closeDialog">关闭</el-button>
+        <el-button type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
+      </div>
+    </el-dialog>
   </div>
+
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
-  const isAdd = ref(false)
+import { modelList } from '@/api/mode/index'
-  const onMouseenter = () =>{}
+import useUserStore from '@/store/modules/user'
-  const onMouseleave = () =>{}
+import { sessionStore } from '@/utils/store'
+import emitter from '@/utils/mitt';
+
+const { user } = useUserStore()
+
+// 获取主模板
+const loading = ref(false)
+let list = ref([])
+const getTemplate = async (id) => {
+  loading.value = true
+  const { rows } = await modelList({ createUser: user.userId, model: 4, type: 1, pageNum: 1, pageSize: 10000 })
+  loading.value = false
+  list.value = rows
+  if (list.value.length) {
+    getChildTemp(id)
+  }
+}
+
+// 获取子模板
+const templateList = ref([])
+const getChildTemp = async () => {
+  templateList.length = 0
+  loading.value = true
+
+  for (let item of list.value) {
+    try {
+      let { rows } = await modelList({ model: 4, type: 2, parentId: item.id })
+      templateList.value.push({
+        name: item.name,
+        id: item.id,
+        child: rows
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+}
+
+const handleItem = (item) => {
+  if(item.newMode) return
+  item.isSelect = !item.isSelect
+  item.child.forEach(el => {
+    el.isSelect = !el.isSelect
+  })
+
+  let data = collectSelectedItems(templateList.value)
+  emitter.emit('selected', data)
+}
+
+const handleItemChild = (el) =>{
+  el.isSelect = !el.isSelect
+  console.log(templateList.value)
+
+  let data = collectSelectedItems(templateList.value)
+  emitter.emit('selected', data)
+} 
+
+
+
+ // 定义一个函数来过滤 children 中 isSelect 为 true 的对象
+const collectSelectedItems = (data) => {
+  let result = [];
+
+  // 遍历每个父节点
+  data.forEach(parent => {
+    if (Array.isArray(parent.child)) {
+      // 使用 filter 方法筛选出 children 中 isSelect 为 true 的对象
+      const selectedChildren = parent.child.filter(child => child.isSelect === true);
+      
+      // 将筛选后的子节点添加到结果数组中
+      result = result.concat(selectedChildren.map(child => ({
+        ...child
+      })));
+    }
+  });
+
+  return result;
+}
+
+
+
+
+// 弹窗
+const addVisible = ref(false)
+
+const ruleFormRef = ref()
+const rules = reactive({
+  name: [
+  { required: true, message: '不能为空', trigger: 'blur' },
+  ]
+})
+const ruleForm = reactive({
+  name: '',
+  desc: ''
+})
+
+const onSubmit = async (formEl) =>{
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      templateList.value.push({
+        id: + new Date(),
+        name: ruleForm.name,
+        newMode: true
+      })
+      resetForm()
+      addVisible.value = false
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+
+
+const addChild = ref(false)
+const addModeChild = () =>{
+  addChild.value = true
+  addVisible.value = true
+}
+
+const editMode = (item)=>{
+  addChild.value = false
+  ruleForm.name = item.name
+  addVisible.value = true
+}
+
+const closeDialog = () =>{
+  handleBeforeClose(() => addVisible.value = false);
+}
+
+const handleBeforeClose = (done) =>{
+  resetForm()
+  done()
+}
+const resetForm = () => {
+  if (ruleFormRef.value) {
+    ruleFormRef.value.resetFields();
+  }
+};
+
+const curNode = reactive({})
+onMounted(() => {
+  let data = sessionStore.get('subject.curNode')
+  Object.assign(curNode, data);
+  getTemplate()
+})
+
+
 </script>
 
 <style lang="scss" scoped>
-  .container-left{
+.container-left {
-    font-size: 14px;
+  height: 100%;
-    .left-header{
+  font-size: 15px;
+  flex-direction: column;
+
+  .left-header {
+    height: 32px;
+    justify-content: space-between;
+    align-items: center;
+
+    .icon-jiahao {
+      font-size: 12px;
+    }
+  }
+
+  .left-list {
+    flex: 1;
+    margin-top: 5px;
+    background-color: #fff;
+    border-radius: 5px;
+    text-align: left;
+    padding: 0 10px;
+    line-height: 30px;
+    overflow-y: auto;
+
+    .item-name {
+      line-height: 40px;
+      font-size: 14px;
+      cursor: pointer;
+      justify-content: space-between;
+      padding-right: 10px;
+    }
+
+    .item-child {
+      text-indent: 3em;
       justify-content: space-between;
       cursor: pointer;
-      .icon-jiahao{
+      align-items: center;
-        font-size: 12px;
+      padding-right: 10px;
+      margin-bottom: 3px;
+      position: relative;
+
+      &::after {
+        content: "";
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: #666;
+        position: absolute;
+        left: 2em;
+        top: 50%;
+        transform: translate(0, -50%);
+      }
+
+    }
+
+    .iconfont {
+      font-weight: bold;
+      font-size: 18px;
+    }
+
+    .icon-jiahao {
+      color: #409eff;
+    }
+
+    .icon-zuixiaohua {
+      color: #f56c6c;
+    }
+
+    .act-child {
+      border-radius: 5px;
+      background: #eaf3ff;
+
+      &::after {
+        background-color: #409eff;
       }
     }
   }
+}
+
+.mode-dialog-header {
+  justify-content: space-between;
+  font-size: 15px;
+  font-weight: bold;
+
+  .icon-guanbi {
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+.form-btn{
+  text-align: right;
+  margin-bottom: 10px;
+}
 </style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="container-right flex">
+    <div class="right-header flex">
+      <span>课件预览</span>
+      <div>
+        <el-button type="danger" @click="onCreate">一键生成</el-button>
+        <el-button>编辑课件</el-button>
+      </div>
+    </div>
+    <div class="right-con">
+      <el-empty v-if="!result" description="请先生成教学大纲，再生成教学课件" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import emitter from '@/utils/mitt'
+
+const result = ref('')
+emitter.on('onResult', (data)=>{
+  result.value = data
+})
+
+const onCreate = () =>{
+  if(!result.value){
+    ElMessage.warning('请先进行研读')
+    return
+  }
+}
+
+onUnmounted(()=>{
+  emitter.off('onResult')
+})
+</script>
+<style lang="scss" scoped>
+.container-right{
+  height: 100%;
+  font-size: 15px;
+  flex-direction: column;
+  .right-header{
+    justify-content: space-between;
+    align-items: center;
+    .icon-jiahao{
+      font-size: 12px;
+    }
+  }
+  .right-con{
+    flex: 1;
+    margin-top: 5px;
+    background-color: #fff;
+    border-radius: 5px;
+    overflow-y: auto;
+  }
+}
+
+</style>

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

@@ -11,13 +11,13 @@
   <el-row :gutter="20">
     <el-col :span="5">
       <!-- <div style="background:#ccc">1</div> -->
-      <left/>
+      <Left/>
     </el-col>
     <el-col :span="13">
-      <div style="background:#ccc">1</div>
+      <Center/>
     </el-col>
     <el-col :span="6">
-      <div style="background:#ccc">1</div>
+      <Right/>
     </el-col>
   </el-row>
     
@@ -27,8 +27,9 @@
 <script setup>
 // import left from './container/left.vue';
 // import right from './container/right.vue';
-import left from './container/left2.vue'
+import Left from './container/left2.vue'
-
+import Center from './container/center.vue'
+import Right from './container/right2.vue'
 </script>
 
 <style lang="scss" scoped>