Merge branch 'main' into lyc-dev

package.json

@@ -26,6 +26,14 @@
     "@electron/remote": "^2.1.2",
     "@element-plus/icons-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-plugin-clipboard": "^2.1.6",
+    "@antv/x6-plugin-dnd": "^2.1.1",
+    "@antv/x6-plugin-export": "^2.1.6",
+    "@antv/x6-plugin-keyboard": "^2.2.3",
+    "@antv/x6-plugin-selection": "^2.2.2",
+    "@antv/x6-plugin-snapline": "^2.1.7",
+    "@antv/x6-plugin-transform": "^2.1.8",
     "@vue-office/docx": "^1.6.2",
     "@vue-office/excel": "^1.7.11",
     "@vue-office/pdf": "^2.0.2",
@@ -39,7 +47,7 @@
     "electron-store": "8.0.0",
     "electron-updater": "^6.1.7",
     "element-china-area-data": "^6.1.0",
-    "element-plus": "^2.7.6",
+    "element-plus": "^2.8.0",
     "fabric": "^5.3.0",
     "im_electron_sdk": "^8.0.5904",
     "js-cookie": "^3.0.5",
@@ -55,7 +63,10 @@
     "vue-qr": "^4.0.9",
     "vue-router": "^4.4.0",
     "xgplayer": "^3.0.19",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "less": "^4.2.0",
+    "less-loader": "^7.3.0",
+    "whiteboard_lyc": "^0.0.8"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.2",

src/renderer/src/api/classTask/index.js

@@ -62,3 +62,108 @@ export function updateClassworkdata(data) {
     data: data
   })
 }
+
+// 修改classwork
+export function updateClasswork(data) {
+  return request({
+    url: '/education/classwork',
+    method: 'put',
+    data: data
+  })
+}
+
+
+
+// 查询evaluationclue列表
+export function listEvaluationclue(query) {
+  return request({
+      url: '/education/evaluationclue/list',
+      method: 'get',
+      params: query
+  })
+}
+
+// 查询evaluationclue详细
+export function getEvaluationclue(id) {
+  return request({
+      url: '/education/evaluationclue/' + id,
+      method: 'get'
+  })
+}
+
+// 新增evaluationclue
+export function addEvaluationclueReturnId(data) {
+  return request({
+      url: '/education/evaluationclue/addReturnId',
+      method: 'post',
+      data: data
+  })
+}
+
+// 新增evaluationclue
+export function addEvaluationclue(data) {
+  return request({
+      url: '/education/evaluationclue',
+      method: 'post',
+      data: data
+  })
+}
+
+// 修改evaluationclue
+export function updateEvaluationclue(data) {
+  return request({
+      url: '/education/evaluationclue',
+      method: 'put',
+      data: data
+  })
+}
+
+// 删除evaluationclue
+export function delEvaluationclue(id) {
+  return request({
+      url: '/education/evaluationclue/' + id,
+      method: 'delete'
+  })
+}
+
+// 新增evaluationclue，保存base64图片
+export function saveBase64File(data) {
+  return request({
+      url: '/education/evaluationclue/saveBase64File',
+      method: 'post',
+      data: data
+  })
+}
+
+// 新增evaluationclue，上传
+export function saveEvaluationClueUploadFile(data) {
+  return request({
+      url: '/education/evaluationclue/saveUploadFile',
+      method: 'post',
+      data: data
+  })
+}
+
+// 读取文件内容
+export function readFile(data) {
+  return fetch(import.meta.env.VITE_APP_RES_FILE_PATH + data.cluelink, {
+      method: "get",
+      headers: {
+          'Content-Type': 'text/plain', // 请求头设置为纯文本
+          'Accept': 'text/plain' // 接受头设置为纯文本
+      },
+  })
+      .then(response => response.text())
+      .then(text => {
+          return Promise.resolve(text);
+      })
+      .catch(error => {
+          console.error('读取文件出错:', error);
+          return Promise.reject();
+      });
+  /*return request({
+    url: '/education/evaluationclue/readFile',
+    method: 'post',
+    data: data
+  })*/
+}

src/renderer/src/api/knowledge/knowledgePoint.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询KnowledgePoint列表
+export function listKnowledgePoint(query) {
+  return request({
+    url: '/point/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询KnowledgePoint详细
+export function getKnowledgePoint(id) {
+  return request({
+    url: '/point/' + id,
+    method: 'get'
+  })
+}
+
+// 新增KnowledgePoint
+export function addKnowledgePointBase(data) {
+  return request({
+    url: '/point/addBase',
+    method: 'post',
+    data: data
+  })
+}
+
+// 新增KnowledgePoint
+export function addKnowledgePoint(data) {
+  return request({
+    url: '/point/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改KnowledgePoint
+export function updateKnowledgePoint(data) {
+  return request({
+    url: '/point/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除KnowledgePoint
+export function delKnowledgePoint(id) {
+  return request({
+    url: '/point/' + id,
+    method: 'delete'
+  })
+}

src/renderer/src/components/FileUpload/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      ref="fileUpload"
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+    >
+      <!-- 上传按钮 -->
+      <el-button type="primary">选取文件</el-button>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ file.name }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, nextTick,computed, watch, getCurrentInstance } from 'vue'
+import { getToken } from "@/utils/auth";
+
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 5,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const number = ref(0);
+const uploadList = ref([]);
+const baseUrl = import.meta.env.VITE_APP_BASE_API; 
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址 
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+);
+
+watch(() => props.modelValue, val => {
+  if (val) {
+    let temp = 1;
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(',');
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      if (typeof item === "string") {
+        item = { name: item, url: item };
+      }
+      item.uid = item.uid || new Date().getTime() + temp++;
+      return item;
+    });
+  } else {
+    fileList.value = [];
+    return [];
+  }
+},{ deep: true, immediate: true });
+
+// 上传前校检格式和大小
+const handleBeforeUpload = (file) =>{
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  proxy.$modal.loading("正在上传文件，请稍候...");
+  number.value++;
+  return true;
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+
+// 上传失败
+function handleUploadError(err) {
+  proxy.$modal.msgError("上传文件失败");
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.fileName, url: res.url });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy.$modal.closeLoading();
+    proxy.$modal.msgError(res.msg);
+    proxy.$refs.fileUpload.handleRemove(file);
+    uploadedSuccessfully();
+  }
+}
+
+// 删除文件
+function handleDelete(index) {
+  fileList.value.splice(index, 1);
+  emit("update:modelValue", fileList.value);
+}
+
+// 上传结束处理
+function uploadedSuccessfully() {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue", fileList.value);
+    proxy.$modal.closeLoading();
+  }
+}
+
+// 获取文件名称
+function getFileName(name) {
+  if (name.lastIndexOf("/") > -1) {
+    return name.slice(name.lastIndexOf("/") + 1);
+  } else {
+    return "";
+  }
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = "";
+  separator = separator || ",";
+  for (let i in list) {
+    if (list[i].url) {
+      strs += list[i].url + separator;
+    }
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : '';
+}
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+  padding-left: 10px;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/renderer/src/components/Flowchart/FlowContentMenu.vue

@@ -0,0 +1,100 @@
+
+<template>
+  <el-card
+      class="flow-contextmenu"
+      ref="flowMenu"
+      v-show="visible"
+      :style="menuStyle"
+      body-style="padding: 12px 0 12px 12px"
+  >
+      <el-cascader-panel
+          :props="{ expandTrigger: 'hover' }"
+          :options="options"
+          :border="false"
+          v-model="select"
+          @change="handleMenuClick"
+      >
+          <template v-slot="{ node, data }">
+              <span class="flow-contextmenu__node">{{ data.label }}</span>
+          </template>
+      </el-cascader-panel>
+  </el-card>
+</template>
+
+<script>
+export default {
+  props: {
+      // 隐藏/显示
+      visible: {
+          type: Boolean,
+          default: false
+      },
+      // 位置
+      position: {
+          type: Object,
+          default: () => ({})
+      }
+  },
+  computed: {
+      menuStyle() {
+          return {
+              ...this.position
+          }
+      }
+  },
+  watch: {
+      visible: {
+          handler() {
+              this.select = []
+          }
+      }
+  },
+  data() {
+      return {
+          select: [],
+          options: [
+              {
+                  value: 'name',
+                  label: '随机name'
+              },
+              {
+                  value: 'color',
+                  label: '随机color'
+              },
+              {
+                  value: 'remove',
+                  label: '删除'
+              }
+          ]
+      }
+  },
+  methods: {
+      handleMenuClick(action) {
+          this.$emit('onMenuClick', action)
+          this.$emit('update:visible', false)
+      }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flow-contextmenu {
+  min-width: 150px;
+  position: fixed;
+  user-select: none;
+  z-index: 99;
+    :deep(.el-cascader-menu) {
+      min-width: auto;
+      .el-cascader-node {
+          z-index: 10;
+          margin-right: 10px;
+          padding-right: 12px;
+          padding-left: 14px;
+      }
+  }
+  .flow-contextmenu__node {
+      display: inline-block;
+      min-width: 60px;
+  }
+}
+</style>

src/renderer/src/components/Flowchart/FlowDrawer.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-drawer
+      :model-value="drawer"
+      :title="drawerTitle"
+      :modal="false"
+      :before-close="handleClose"
+      direction="rtl">
+      <el-form :model="form" size="large">
+          <el-form-item label="节点名称">
+          <el-input v-model="form.label" />
+          </el-form-item>
+          <el-form-item label="节点背景色">
+          <el-color-picker v-model="form.bgcolor" />
+          </el-form-item>
+          <el-form-item label="节点边框颜色">
+          <el-color-picker v-model="form.borderColor"/>
+          </el-form-item>
+          <el-form-item label="节点文字颜色">
+          <el-color-picker v-model="form.textColor"/>
+          </el-form-item>
+          <div class="save-row">
+              <el-space :size="30">
+                  <el-button type="primary" @click="updateNode" size="default">保存</el-button>
+                  <el-button @click="closeDrawer" size="default">关闭</el-button>
+              </el-space>
+          </div>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'flow-drawer',
+  props: {
+    drawerTitle: {
+      type: String,
+      default: '节点编辑'
+    },
+    drawer: {
+      type: Boolean,
+      default: false,
+    },
+    form: {
+      type: Object,
+      default: ()=>{
+        return {
+          label: '',
+          bgcolor: '',
+          borderColor: '',
+          textColor: ''
+        }
+      }
+    }
+  },
+
+  data() {
+    return {
+
+    };
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+    handleClose(done){
+      this.closeDrawer()
+      done();
+    },
+    closeDrawer(){
+      this.$emit('closeDrawer', false)
+    },
+    updateNode(){
+      this.$emit('updateNode', this.form)
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-form-item__label) {
+    font-weight: normal;
+  }
+  .save-row {
+    margin-top: 100px;
+    text-align: center;
+  }
+</style>

src/renderer/src/components/Flowchart/FlowLibrary.vue

@@ -0,0 +1,235 @@
+<template>
+    <div class="flow-library">
+        <div class="flow-library-title">节点库</div>
+        <div class="flow-library-list">
+            <div class="node-item" v-for="item in list" :key="item.name"  :data-shape="item.shape"
+                :data-name="item.name"
+                @mousedown.stop="handleonAddNode"
+                @touchstart.stop="handleonAddNode">
+                <div 
+                :class="item.class"
+                >
+                    <template v-if="item.class == 'parallelogram' || item.class == 'diamond'">
+                        <div :class="item.class + '-text'"> {{ item.name }} </div>
+                    </template>
+                    <template v-else>
+                        {{ item.name }}
+                    </template> 
+            </div>
+            </div>
+        </div>
+        <!-- <el-space wrap :size="30" class="ant-flow-save">
+            <el-button type="success" @click="handleSave('img')">下载为图片</el-button>
+            <el-button type="primary" @click="handleSave">保存</el-button>
+        </el-space> -->
+    </div>
+</template>
+<script>
+export default {
+    name: 'FlowLibrary',
+    data() {
+        return {
+            // 过滤数据
+            list: [
+                {
+                    name: '开始',
+                    shape: 'custom-rect',
+                    class: 'elliptic'
+                },
+                {
+                    name: '过程',
+                    shape: 'custom-rect',
+                    class: 'rectangle'
+                },
+                {
+                    name: '可选过程',
+                    shape: 'custom-rect',
+                    class: 'quadrilateral'
+                },
+                {
+                    name: '决策',
+                    shape: 'custom-polygon',
+                    class: 'diamond'
+                },
+                {
+                    name: '数据',
+                    shape: 'custom-polygon',
+                    class: 'parallelogram'
+                },
+                {
+                    name: '连接',
+                    shape: 'custom-circle',
+                    class: 'round'
+                },
+                
+            ],
+           
+        }
+    },
+    created() {
+       
+    },
+    methods: {
+        handleonAddNode(e) {
+            this.$emit('onAddNode', e)
+        },
+        // 保存
+        handleSave(str){
+            this.$emit('handleSave', str)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@mixin nodeColor {
+    background: #EFF4FF;
+    display: flex;
+    border: solid 1px #5F95FF;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #333;
+}
+.flow-library {
+    user-select: none;
+    width: 250px;
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    border-right: 1px solid #dcdfe6;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0 15px;
+    &-title {
+        line-height: 48px;
+        font-weight: bold;
+    }
+
+    &-group {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 8px 0 8px 16px;
+    }
+
+    &-item {
+        width: 72px;
+        float: left;
+        text-align: center;
+        margin-right: 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 8px;
+
+        &__img {
+            width: 64px;
+            height: 64px;
+            margin-top: 8px;
+            background-repeat: no-repeat;
+            background-size: contain;
+            cursor: pointer;
+            position: relative;
+
+            &--setting-shape {
+                background-size: 32px;
+                background-color: #5f95ff;
+                background-position: 50% 15%;
+
+                .flow-library-item__name {
+                    position: absolute;
+                    height: auto;
+                    width: 100%;
+                    font-size: 12px;
+                    cursor: pointer;
+                    text-align: center;
+                    bottom: 4px;
+                    opacity: 1;
+                }
+            }
+        }
+
+        &__name {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            cursor: pointer;
+            text-align: center;
+            opacity: 0;
+        }
+    }
+    &-list {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+
+.ant-flow-save {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    bottom: 30px;
+    display: flex;
+    justify-content: center;
+}
+.node-item{
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.elliptic{
+    width: 70px;
+    height: 35px;
+    border-radius: 20px;
+    @include nodeColor;
+   
+}
+.quadrilateral{
+    width: 60px;
+    height: 35px;
+    @include nodeColor;
+    border-radius: 8px;
+}
+.rectangle{
+    width: 80px;
+    height: 35px;
+    @include nodeColor;
+}
+.round{
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    @include nodeColor;
+}
+.parallelogram{
+    width: 55px;
+    height: 35px;
+    transform: skewX(-45deg);
+    @include nodeColor;
+    position: relative;
+    line-height: 35px;
+    .parallelogram-text{
+        transform: skewX(45deg);
+        white-space: nowrap;
+        text-align: center;
+    }
+}
+.diamond {
+    @include nodeColor;
+    width: 40px;
+	height: 40px;
+    transform: rotateZ(45deg)skew(-12deg, -12deg);
+    .diamond-text{
+        transform: rotate(-45deg)skew(0deg,0deg);
+    }
+  }
+
+</style>

src/renderer/src/components/Flowchart/config/index.js

@@ -0,0 +1,333 @@
+
+import { Shape } from '@antv/x6'
+/**
+ * @desc 初始化面板配置
+ * @param check 查看模式
+ */
+export const graphOptions = (check = false) => {
+    return {
+        container: document.getElementById('flow-container'),
+        // 定制节点和边的交互行为 ==> boolean 节点或边是否可交互
+        interacting: check
+            ? {
+                  nodeMovable: false,
+                  edgeMovable: false,
+                  magnetConnectable: false,
+                  vertexDeletable: false
+              }
+            : true,
+        // 对齐线
+        snapline: true,
+        // 显示网格 // 'dot' | 'fixedDot' | 'mesh'
+        grid: {
+            visible: true,
+            size: 20, // 网格大小
+            type: 'mesh',
+            args: {
+                color: '#e9e9e9',
+                thickness: 2 // 网格线宽度/网格点大小
+            }
+        },
+        // 平移
+        panning: true,
+        // 滚轮缩放 MouseWheel
+        mousewheel: {
+            enabled: true,
+            zoomAtMousePosition: true,
+            modifiers: ['ctrl', 'meta'],
+            maxScale: 3,
+            minScale: 0.3
+        },
+        // 连线规则
+        connecting: {
+            // 路由类型
+            router: {
+                // 连线类型在此修改
+                // 曼哈顿路由 'manhattan' 路由是正交路由 'orth' 的智能版本，该路由由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。
+                name: 'manhattan',
+                args: {
+                    padding: 1
+                }
+            },
+            // 圆角连接器，将起点、路由点、终点通过直线按顺序连接，并在线段连接处通过圆弧连接（倒圆角）。
+            connector: {
+                name: 'rounded',
+                args: {
+                    radius: 8
+                }
+            },
+            anchor: 'center',
+            connectionPoint: 'anchor',
+            // 是否允许连接到画布空白位置的点，默认为 true。
+            allowBlank: false,
+            // 距离节点或者连接桩 20px 时会触发自动吸附
+            snap: {
+                radius: 20
+            },
+            // 拽出新的边
+            createEdge() {
+                return new Shape.Edge({
+                    // markup: [
+                    //     {
+                    //         tagName: 'path',
+                    //         selector: 'stroke'
+                    //     }
+                    // ],
+                    // connector: { name: 'rounded' },
+                    // attrs: {
+                    //     stroke: {
+                    //         fill: 'none',
+                    //         connection: true,
+                    //         strokeWidth: 4,
+                    //         strokeLinecap: 'round',
+                    //         stroke: '#666'
+                    //     }
+                    // },
+                    attrs: {
+                        line: {
+                          stroke: '#A2B1C3',
+                          strokeWidth: 3,
+                          targetMarker: {
+                            name: 'block',
+                            width: 12,
+                            height: 8,
+                          },
+                        },
+                      },
+                    zIndex: 0
+                })
+            },
+            validateConnection({ targetMagnet }) {
+                return !!targetMagnet
+            }
+        },
+        // 连线高亮
+        highlighting: {
+            // 连线过程中，自动吸附到链接桩时被使用。
+            magnetAdsorbed: {
+                name: 'stroke',
+                args: {
+                    attrs: {
+                        width: 12,
+                        r: 6,
+                        magnet: true,
+                        stroke: '#008CFF',
+                        strokeWidth: 2,
+                        fill: '#0F67FF'
+                    }
+                }
+            }
+        },
+        rotating: false, // 不能旋转
+        keyboard: !check, // 按键操作
+        clipboard: true, // 剪切板
+        autoResize: true,
+        onToolItemCreated({ tool }) {
+            const options = tool.options
+            if (options && options.index % 2 === 1) {
+                tool.setAttrs({ fill: 'red' })
+            }
+        }
+    }
+}
+
+// 链接桩样式
+export const portStyle = {
+    // width: 12,
+    // r: 6, // 半径
+    // // 当 magnet 属性为 true 时，表示该元素可以被链接，即在连线过程中可以被当做连线的起点或终点，与链接桩类似。
+    // magnet: true,
+    // stroke: '#008CFF',
+    // strokeWidth: 2,
+    // fill: '#fff',
+    // zIndex: 1,
+    // style: {
+    //     visibility: 'hidden',
+    // },
+    r: 6,
+    magnet: true,
+    stroke: '#5F95FF',
+    strokeWidth: 2,
+    fill: '#fff',
+    style: {
+      visibility: 'hidden',
+    },
+}
+
+// 链接桩配置
+export const ports = {
+    // 设置链接桩分组
+    groups: {
+        top: {
+            // 定义连接柱的位置，如果不配置，将显示为默认样式
+            position: 'top',
+            // 定义连接柱的样式
+            attrs: {
+                circle: {
+                    ...portStyle
+                }
+            }
+        },
+        right: {
+            position: 'right',
+            attrs: {
+                circle: {
+                    ...portStyle
+                }
+            }
+        },
+        bottom: {
+            position: 'bottom',
+            attrs: {
+                circle: {
+                    ...portStyle
+                }
+            }
+        },
+        left: {
+            position: 'left',
+            attrs: {
+                circle: {
+                    ...portStyle
+                }
+            }
+        },
+        absolute: {
+            position: 'absolute',
+            attrs: {
+                circle: {
+                    r: 6,
+                    magnet: true,
+                    stroke: '#008CFF',
+                    strokeWidth: 2,
+                    fill: '#fff'
+                }
+            }
+        }
+    },
+    // 链接桩
+    items: [
+        {
+            group: 'top'
+        },
+        {
+            group: 'right'
+        },
+        {
+            group: 'bottom'
+        },
+        {
+            group: 'left'
+        }
+    ]
+}
+
+// 动态计算宽高比
+export const transformToPercent = (target, sum, font) => {
+    // https://x6.antv.vision/zh/docs/tutorial/intermediate/attrs
+    // 相对节点的大小
+    const percent = (target / sum).toFixed(2) * 100
+    return `${percent}${font ? 'px' : '%'}`
+}
+
+// 注册节点配置信息  注册以后就可以像使用内置节点那样使用该节点
+export const registerNodeOpeions = {
+    'custom-rect': {
+        inherit: 'rect',
+        width: 70,
+        height: 40,
+        attrs: {
+            body: {
+                strokeWidth: 1,
+                stroke: '#5F95FF',
+                fill: '#EFF4FF',
+            },
+            text: {
+                fontSize: 12,
+                fill: '#262626',
+            },
+        },
+        ports: { ...ports },
+    },
+    'custom-polygon' : {
+        inherit: 'polygon',
+        width: 70,
+        height: 40,
+        attrs: {
+            body: {
+                strokeWidth: 1,
+                stroke: '#5F95FF',
+                fill: '#EFF4FF',
+            },
+            text: {
+                fontSize: 12,
+                fill: '#262626',
+            },
+        },
+        ports: {
+            ...ports,
+            items: [
+                {
+                    group: 'top',
+                },
+                {
+                    group: 'bottom',
+                },
+            ],
+        },
+    },
+    'custom-circle' : {
+        inherit: 'circle',
+        width: 50,
+        height: 50,
+        attrs: {
+            body: {
+                strokeWidth: 1,
+                stroke: '#5F95FF',
+                fill: '#EFF4FF',
+            },
+            text: {
+                fontSize: 12,
+                fill: '#262626',
+            },
+        },
+        ports: { ...ports },
+    },
+}
+
+// 图形变换配置
+export const transFormOptions = {
+    // 调整尺寸
+    resizing: {
+        enabled: true,
+        minWidth: 1,
+        maxWidth: 200,
+        minHeight: 1,
+        maxHeight: 150,
+        restrict: false,
+        preserveAspectRatio: false,
+    },
+    // 调整角度---旋转
+    rotating: {
+        enabled: true, 
+    }
+}
+
+// 拖动添加节点样式配置
+export const addNodeAttrStyle = {
+    '可选过程': {
+        rx: 6,
+        ry: 6,
+    },
+    '开始': {
+        rx: 20,
+        ry: 26,
+    },
+    '决策': {
+        refPoints: '0,10 10,0 20,10 10,20',
+    },
+    '数据': {
+        refPoints: '10,0 40,0 30,20 0,20',
+    }
+
+}

src/renderer/src/components/Flowchart/index.vue

@@ -0,0 +1,391 @@
+<template>
+    <div v-loading="flowLoading" class="ant-flow" :style="{ height: 70 + 'vh' }">
+        <!-- 左侧节点库 -->
+        <flow-library @onAddNode="onAddNode" />
+        <!--画布-->
+        <div id="flow-container"></div>
+        <!--右侧抽屉-->
+        <FlowDrawer :drawer="drawer" :form="form" @closeDrawer="closeDrawer" @updateNode="updateNode" />
+    </div>
+</template>
+
+<script>
+import { Graph } from '@antv/x6'
+// 快捷键
+import { Keyboard } from '@antv/x6-plugin-keyboard'
+// 通过拖拽交互往画布中添加节点
+import { Dnd } from '@antv/x6-plugin-dnd'
+// 框选
+import { Selection } from '@antv/x6-plugin-selection'
+// 图形变换
+import { Transform } from '@antv/x6-plugin-transform'
+// 对齐线
+import { Snapline } from '@antv/x6-plugin-snapline'
+// 剪切板
+import { Clipboard } from '@antv/x6-plugin-clipboard'
+// 导出
+import { Export } from '@antv/x6-plugin-export'
+
+import FlowLibrary from '@/components/Flowchart/FlowLibrary.vue'
+import FlowContentMenu from '@/components/Flowchart/FlowContentMenu.vue'
+import FlowDrawer from '@/components/Flowchart/FlowDrawer.vue'
+import { graphOptions, ports, registerNodeOpeions, transFormOptions, addNodeAttrStyle } from '@/components/Flowchart/config'
+
+let graph = null
+let dnd = null
+let selector = null
+
+export default {
+    name: 'X6',
+    components: { FlowContentMenu, FlowLibrary, FlowDrawer },
+    title: 'Antv/X6流程图',
+    props: {
+        flowHeight: {
+            type: Number,
+            default: 800
+        },
+        dataSource: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            drawer: false,
+            form: {
+                label: '',
+                bgcolor: '',
+                borderColor: '',
+                textColor: ''
+            },
+            currentNode: null,
+            flowLoading: false
+        }
+    },
+    watch: {
+        dataSource(newVal){
+            this.flowLoading = true
+            this.updateConfigure(newVal)
+        }
+    },
+    mounted() {
+        this.flowLoading = true
+        this.$nextTick(()=>{
+            if(graph){
+                graph.clearCells()
+                
+            }
+            this.init()
+        })
+   
+    },
+    beforeDestroy() {
+        this.destoryFlow()
+    },
+    methods: {
+        /**
+         * 初始化画布
+         */
+        init() {
+            // 实例化
+            graph = new Graph(graphOptions(false))
+
+            // 使用插件
+            this.initPlugin()
+           
+            // 注册自定义节点
+            this.registerNode()
+            
+            // 读取配置
+            graph.fromJSON(this.dataSource)
+
+            // 居中展示
+            graph.centerContent()
+          
+            // 快捷键
+            this.initEvent()
+
+            // 实例化拖动添加节点
+            dnd = new Dnd({
+                target: graph,
+                scaled: false,
+            })
+            this.flowLoading = false
+        },
+        /**
+         * 注册自定义节点
+         */
+        registerNode() {
+            Graph.registerNode('custom-rect',registerNodeOpeions['custom-rect'], true)
+            Graph.registerNode('custom-polygon',registerNodeOpeions['custom-polygon'], true)
+            Graph.registerNode('custom-circle',registerNodeOpeions['custom-circle'], true)
+        },
+        /**
+         * 快捷键与事件
+         */
+        initEvent() {
+            // 点击...
+            graph.on('cell:click', e => {
+                this.showPorts(false)
+            })
+
+            // 双击动态添加链接桩
+            graph.on('node:dblclick', e => {
+                const { node } = e
+        
+                this.currentNode = node
+                this.form.label = node.attr('text/text')
+                this.form.bgcolor = node.attr('body/fill')
+                this.form.borderColor = node.attr('body/stroke')
+                this.form.textColor = node.attr('text/fill')
+                this.drawer = true
+            })
+
+            // Edge工具
+            graph.on('cell:mouseenter', ({ cell }) => {
+                if (cell.isEdge()) {
+                    //  https://x6.antv.vision/zh/docs/tutorial/intermediate/tools
+                    // 1、vertices 路径点工具，在路径点位置渲染一个小圆点，
+                    // 2、segments 线段工具。在边的每条线段的中心渲染一个工具条，可以拖动工具条调整线段两端的路径点的位置。
+                    cell.addTools([
+                        'vertices',
+                        'segments',
+                        {
+                            name: 'button-remove',
+                            args: {
+                                x: '30%',
+                                y: '50%'
+                            }
+                        }
+                    ])
+                }
+            })
+            graph.on('cell:mouseleave', ({ cell }) => {
+                if (cell.isEdge()) {
+                    cell.removeTool('vertices')
+                    cell.removeTool('segments')
+                    cell.removeTool('button-remove')
+                }
+            })
+
+            // 链接桩控制
+            graph.on('node:mouseenter', () => {
+                this.showPorts(true)
+            })
+            graph.on('node:mouseleave', () => {
+                this.showPorts(false)
+            })
+
+            // 点击画布空白区域
+            graph.on('blank:click', () => {
+                graph.cleanSelection && graph.cleanSelection()
+            })
+
+            /** 
+             * 基础操作S
+             */
+
+
+            graph.bindKey(['meta+c', 'ctrl+c'], () => {
+                const cells = graph.getSelectedCells()
+                if (cells.length) {
+                    graph.copy(cells)
+                }
+                return false
+            })
+
+            graph.bindKey(['meta+x', 'ctrl+x'], () => {
+                const cells = graph.getSelectedCells()
+                if (cells.length) {
+                    graph.cut(cells)
+                }
+                return false
+            })
+            graph.bindKey(['meta+v', 'ctrl+v'], () => {
+                if (!graph.isClipboardEmpty()) {
+                    const cells = graph.paste({ offset: 32 })
+                    graph.cleanSelection()
+                    graph.select(cells)
+                }
+                return false
+            })
+
+            //undo redo
+            graph.bindKey(['meta+z', 'ctrl+z'], () => {
+                if (graph.history.canUndo()) {
+                    graph.history.undo()
+                }
+                return false
+            })
+            graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+                if (graph.history.canRedo()) {
+                    graph.history.redo()
+                }
+                return false
+            })
+
+            // select all
+            graph.bindKey(['meta+shift+a', 'ctrl+shift+a'], () => {
+                const nodes = graph.getNodes()
+                if (nodes) {
+                    graph.select(nodes)
+                }
+            })
+
+            // delete
+            graph.bindKey(['backspace', 'delete'], () => {
+                // 删除选中的元素
+                const cells = graph.getSelectedCells()
+                if (cells.length) {
+                    graph.removeCells(cells)
+                }
+            })
+
+            // zoom
+            graph.bindKey(['ctrl+1', 'meta+1'], () => {
+                const zoom = graph.zoom()
+                if (zoom < 1.5) {
+                    graph.zoom(0.1)
+                }
+            })
+            graph.bindKey(['ctrl+2', 'meta+2'], () => {
+                const zoom = graph.zoom()
+                if (zoom > 0.5) {
+                    graph.zoom(-0.1)
+                }
+            })
+            /**
+             * 基础操作E
+             */
+        },
+        // 连接桩显示/隐藏
+        showPorts(show) {
+            const container = document.getElementById('flow-container')
+            const ports = container.querySelectorAll('.x6-port-body')
+            for (let i = 0, len = ports.length; i < len; i = i + 1) {
+                ports[i].style.visibility = show ? 'visible' : 'hidden'
+            }
+        },
+        /**
+         * 使用插件
+         */
+        initPlugin(){
+            graph.use(
+                new Keyboard({
+                    enabled: true,
+                    global: true,
+                }),
+            ).use(new Selection({
+                multiple: true,
+                showNodeSelectionBox: true,
+            })).use(new Snapline({
+                enabled: true,
+                clean: false,
+            })).use(new Transform(transFormOptions)).use(new Clipboard({
+                    enabled: true,
+            })).use(new Export())
+        },
+
+        /**
+         * 添加节点
+         */
+        onAddNode(e) {
+            const target = e && e.target.closest('.node-item')
+            if (target) {
+                const name = target.getAttribute('data-name')
+                const shape = target.getAttribute('data-shape')
+
+                let nodeOptions = {
+                    shape,
+                    label: name,
+                    ports: { ...ports },
+                }
+                if(addNodeAttrStyle[name]){
+                    nodeOptions.attrs = {
+                        body: addNodeAttrStyle[name]
+                    }
+                }      
+                const newNode = graph.createNode(nodeOptions)
+                dnd.start(newNode, e)
+            }
+        },
+        /**
+         * 保存
+         */
+        handleSave() {
+            const res = graph.toJSON()
+            return res
+        },
+
+        /**
+         * 关闭抽屉
+         */
+        closeDrawer(data) {
+            this.drawer = data
+        },
+        /**
+         * 更新节点-节点名称/背景色/边框/节点颜色
+         */
+        updateNode(form) {
+            this.currentNode.attr('text/text', form.label)
+            this.currentNode.attr('text/fill', form.textColor)
+            this.currentNode.attr(`body/fill`, form.bgcolor)
+            this.currentNode.attr(`body/stroke`, form.borderColor)
+            this.drawer = false
+        },
+        updateConfigure(data) {
+            graph.fromJSON(data)
+            graph.centerContent()
+            this.flowLoading = false
+        },
+        destoryFlow() {
+            // 画布的销毁以及回收
+            graph && graph.dispose()
+            graph = null
+            dnd = null
+            selector = null
+        },
+        /**
+         * 获取PNG
+         */
+        getBase64Png(){
+            return new Promise((resolve, reject)=>{
+                graph.toPNG((dataUri)=>{
+                    resolve(dataUri)
+                })
+            })
+        },
+    },
+
+}
+</script>
+
+<style scoped lang="scss">
+.ant-flow {
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+
+    #flow-container {
+        width: 100%;
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+    }
+
+}
+#stencil{
+    user-select: none;
+    width: 250px;
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    border-right: 1px solid #dcdfe6;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+</style>

src/renderer/src/components/whiteboard/components/ColorPicker.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="colorPickerContainer">
+    <div class="content">
+      <el-popover
+        :placement="placement"
+        :width="200"
+        trigger="click"
+        :disabled="colorList.length <= 0"
+      >
+        <template #reference>
+          <div class="colorPreview" :style="{ backgroundColor: color }"></div>
+        </template>
+        <div class="colorList">
+          <div
+            class="colorItem"
+            v-for="item in colorList"
+            :key="item"
+            :style="{ backgroundColor: item }"
+            @click="color = item"
+          >
+            <span v-if="!item">无</span>
+            <span v-if="item === 'transparent'">透明</span>
+          </div>
+        </div>
+      </el-popover>
+      
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import {
+  strokeColorList,
+  fillColorList,
+  backgroundColorList
+} from '../constants'
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: '颜色'
+  },
+  placement: {
+    type: String,
+    default: 'bottom'
+  },
+  showEmptySelect: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['change'])
+
+const color = ref(props.value)
+watch(
+  () => {
+    return props.value
+  },
+  val => {
+    color.value = val
+  }
+)
+const colorList = computed(() => {
+  let list = props.showEmptySelect ? [''] : []
+  switch (props.type) {
+    case 'stroke':
+      list.push(...strokeColorList)
+      break
+    case 'fill':
+      list.push(...fillColorList)
+      break
+    case 'background':
+      list.push(...backgroundColorList)
+      break
+    default:
+  }
+  return list
+})
+watch(color, () => {
+  emits('change', color.value)
+})
+</script>
+
+<style lang="less" scoped>
+.colorPickerContainer {
+  .content {
+    display: flex;
+    align-items: center;
+
+    .colorPreview {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #dee2e6;
+      border-radius: 5px;
+      flex-shrink: 0;
+      margin-right: 10px;
+      overflow: hidden;
+      cursor: pointer;
+    }
+  }
+}
+
+.colorList {
+  display: grid;
+  grid-template-columns: repeat(5, auto);
+  grid-gap: 5px;
+  .colorItem {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+</style>

src/renderer/src/components/whiteboard/components/Contextmenu.vue

@@ -0,0 +1,213 @@
+<template>
+  <div
+    class="contextmenuContainer"
+    v-if="isShow"
+    :style="{ left: left + 'px', top: top + 'px' }"
+  >
+    <template v-if="isHasActiveElements">
+      <div
+        class="item"
+        :class="{ disabled: !canMoveLevel }"
+        @click="exec('moveUp')"
+      >
+        上移一层
+      </div>
+      <div
+        class="item"
+        :class="{ disabled: !canMoveLevel }"
+        @click="exec('moveDown')"
+      >
+        下移一层
+      </div>
+      <div
+        class="item"
+        :class="{ disabled: !canMoveLevel }"
+        @click="exec('moveTop')"
+      >
+        置于顶层
+      </div>
+      <div
+        class="item"
+        :class="{ disabled: !canMoveLevel }"
+        @click="exec('moveBottom')"
+      >
+        置于底层
+      </div>
+      <div class="splitLine"></div>
+      <div class="item danger" @click="exec('del')">删除</div>
+      <div class="item" @click="exec('copy')">复制</div>
+      <div
+        class="item"
+        :class="{ disabled: groupStatus === 'disabled' }"
+        @click="exec(groupStatus)"
+      >
+        {{ groupBtnText }}
+      </div>
+    </template>
+    <template v-else>
+      <div class="item" @click="exec('selectAll')">全部选中</div>
+      <div class="item" @click="exec('backToCenter')">回到中心</div>
+      <div class="item" @click="exec('fit')">显示全部</div>
+      <div class="item" @click="exec('resetZoom')">重置缩放</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from 'vue'
+
+export default {
+  props :{
+    app: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      left: 0,
+      top: 0,
+      isHasActiveElements: false,
+      canMoveLevel: false,
+      groupStatus: 'disabled',
+    }
+  },
+  watch: {
+    groupStatus(newValue, oldValue) {
+      switch (newValue) {
+        case 'disabled':
+          this.groupBtnText = '编组'
+          break
+        case 'dogroup':
+          this.groupBtnText = '编组'
+          break
+        case 'ungroup':
+          this.groupBtnText = '取消编组'
+          break
+        default:
+          break
+      }
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init(){
+      this.app.on('contextmenu', this.show)
+      document.body.addEventListener('click', this.hide)
+    },
+    hide() {
+      this.isShow = false
+      this.left = 0
+      this.top = 0
+    },
+    exec(command) {
+      switch (command) {
+        case 'moveUp':
+          this.app.moveUpCurrentElement()
+          break
+        case 'moveDown':
+          this.app.moveDownCurrentElement()
+          break
+        case 'moveTop':
+          this.app.moveTopCurrentElement()
+          break
+        case 'moveBottom':
+          this.app.moveBottomCurrentElement()
+          break
+        case 'del':
+          this.app.deleteCurrentElements()
+          break
+        case 'copy':
+          this.app.copyPasteCurrentElements()
+          break
+        case 'selectAll':
+          this.app.selectAll()
+          break
+        case 'backToCenter':
+          this.app.scrollToCenter()
+          break
+        case 'fit':
+          this.app.fit()
+          break
+        case 'resetZoom':
+          this.app.setZoom(1)
+        case 'dogroup':
+          this.app.dogroup()
+          break
+        case 'ungroup':
+          this.app.ungroup()
+          break
+        default:
+          break
+      }
+    },
+    show(e, activeElements) {
+      this.isHasActiveElements = activeElements.length > 0
+      this.canMoveLevel = activeElements.length === 1
+      this.left = e.clientX + 10
+      this.top = e.clientY + 10
+      this.isShow = true
+      this.handleGroup(activeElements)
+    },
+    handleGroup(activeElements) {
+      let isGroup = true
+      activeElements.forEach(item => {
+        if (!item.hasGroup()) {
+          isGroup = false
+        }
+      })
+      if (isGroup) {
+        this.groupStatus = 'ungroup'
+      } else if (activeElements.length > 1) {
+        this.groupStatus = 'dogroup'
+      }
+    },
+  },
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.contextmenuContainer {
+  position: fixed;
+  width: 161px;
+  background: #fff;
+  box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
+  border-radius: 4px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #1a1a1a;
+
+  .splitLine {
+    height: 1px;
+    background-color: #f5f5f5;
+    margin: 5px 0;
+  }
+
+  .item {
+    height: 28px;
+    line-height: 28px;
+    padding-left: 16px;
+    cursor: pointer;
+    &.danger {
+      color: #f56c6c;
+    }
+    &:hover {
+      background: #f5f5f5;
+    }
+    &.disabled {
+      color: grey;
+      cursor: not-allowed;
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/renderer/src/components/whiteboard/constants.js

@@ -0,0 +1,120 @@
+// 描边颜色
+export const strokeColorList = [
+  '#000000',
+  '#343a40',
+  '#495057',
+  '#c92a2a',
+  '#a61e4d',
+  '#862e9c',
+  '#5f3dc4',
+  '#364fc7',
+  '#1864ab',
+  '#0b7285',
+  '#087f5b',
+  '#2b8a3e',
+  '#5c940d',
+  '#e67700',
+  '#d9480f'
+]
+
+// 填充颜色
+export const fillColorList = [
+  'transparent',
+  '#ced4da',
+  '#868e96',
+  '#fa5252',
+  '#e64980',
+  '#be4bdb',
+  '#7950f2',
+  '#4c6ef5',
+  '#228be6',
+  '#15aabf',
+  '#12b886',
+  '#40c057',
+  '#82c91e',
+  '#fab005',
+  '#fd7e14'
+]
+
+// 背景颜色
+export const backgroundColorList = [
+  '#ffffff',
+  '#f8f9fa',
+  '#f1f3f5',
+  '#fff5f5',
+  '#fff0f6',
+  '#f8f0fc',
+  '#f3f0ff',
+  '#edf2ff',
+  '#e7f5ff',
+  '#e3fafc',
+  '#e6fcf5',
+  '#ebfbee',
+  '#f4fce3',
+  '#fff9db',
+  '#fff4e6'
+]
+
+// 字体列表
+export const fontFamilyList = [
+  {
+    name: '微软雅黑',
+    value: '微软雅黑, Microsoft YaHei'
+  },
+  {
+    name: '宋体',
+    value: '宋体, SimSun, Songti SC'
+  },
+  {
+    name: '楷体',
+    value: '楷体, 楷体_GB2312, SimKai, STKaiti'
+  },
+  {
+    name: '黑体',
+    value: '黑体, SimHei, Heiti SC'
+  },
+  {
+    name: '隶书',
+    value: '隶书, SimLi'
+  },
+  {
+    name: 'Andale Mono',
+    value: 'andale mono'
+  },
+  {
+    name: 'Arial',
+    value: 'arial, helvetica, sans-serif'
+  },
+  {
+    name: 'arialBlack',
+    value: 'arial black, avant garde'
+  },
+  {
+    name: 'Comic Sans Ms',
+    value: 'comic sans ms'
+  },
+  {
+    name: 'Impact',
+    value: 'impact, chicago'
+  },
+  {
+    name: 'Times New Roman',
+    value: 'times new roman'
+  },
+  {
+    name: 'Sans-Serif',
+    value: 'sans-serif'
+  },
+  {
+    name: 'serif',
+    value: 'serif'
+  }
+]
+
+// 字号
+export const fontSizeList = [10, 12, 16, 18, 24, 32, 48].map(item => {
+  return {
+    name: item,
+    value: item
+  }
+})

src/renderer/src/components/whiteboard/libs/icons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="22"><defs><linearGradient id="a"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><radialGradient xlink:href="#a" cx="9.739" cy="9.716" fx="9.739" fy="9.716" r="3.709" gradientUnits="userSpaceOnUse"/></defs><g stroke="#000" fill="none"><g transform="translate(-129.5 -333.862) translate(0 .188)"><rect transform="matrix(.962 0 0 .971 4.943 11.548)" ry="2" rx="2" y="332.362" x="130" height="10.337" width="10.432" opacity=".5"/><g><path d="M132 339.175h6" opacity=".5"/><path d="M135 336.175v6" opacity=".5"/></g></g><g transform="translate(-129.5 -333.862)"><rect width="10.432" height="10.337" x="130" y="332.362" rx="2" ry="2" transform="matrix(.962 0 0 .971 4.943 22.736)" opacity=".5"/><path d="M132 350.362h6" opacity=".5"/></g></g></svg>

src/renderer/src/components/whiteboard/libs/jsonTree.css

@@ -0,0 +1,107 @@
+/*
+ * JSON Tree Viewer
+ * http://github.com/summerstyle/jsonTreeViewer
+ *
+ * Copyright 2017 Vera Lobacheva (http://iamvera.com)
+ * Released under the MIT license (LICENSE.txt)
+ */
+
+/* Background for the tree. May use for <body> element */
+.jsontree_bg {
+    background: #FFF;
+}
+
+/* Styles for the container of the tree (e.g. fonts, margins etc.) */
+.jsontree_tree {
+    margin-left: 30px;
+    font-family: 'PT Mono', monospace;
+    font-size: 14px;
+}
+
+/* Styles for a list of child nodes */
+.jsontree_child-nodes {
+    display: none;
+    margin-left: 35px; 
+    margin-bottom: 5px;
+    line-height: 2;
+}
+.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_child-nodes {
+    display: block;
+}
+
+/* Styles for labels */
+.jsontree_label-wrapper {
+    float: left;
+    margin-right: 8px;
+}
+.jsontree_label {
+    font-weight: normal;
+    vertical-align: top;
+    color: #000;
+    position: relative;
+    padding: 1px;
+    border-radius: 4px;
+    cursor: default;
+}
+.jsontree_node_marked > .jsontree_label-wrapper > .jsontree_label {
+    background: #fff2aa;
+}
+
+/* Styles for values */
+.jsontree_value-wrapper {
+    display: block;
+    overflow: hidden;
+}
+.jsontree_node_complex > .jsontree_value-wrapper {
+    overflow: inherit;
+}
+.jsontree_value { 
+    vertical-align: top;
+    display: inline;
+}
+.jsontree_value_null {
+    color: #777;
+    font-weight: bold;
+}
+.jsontree_value_string {
+    color: #025900;
+    font-weight: bold;
+}
+.jsontree_value_number {
+    color: #000E59;
+    font-weight: bold;
+}
+.jsontree_value_boolean {
+    color: #600100;
+    font-weight: bold;
+}
+
+/* Styles for active elements */
+.jsontree_expand-button {
+    position: absolute;
+    top: 3px;
+    left: -15px;
+    display: block;
+    width: 11px;
+    height: 11px;
+    background-image: url('icons.svg');
+}
+.jsontree_node_expanded > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button {
+    background-position: 0 -11px;
+}
+.jsontree_show-more {
+    cursor: pointer;
+}
+.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
+    display: none;
+}
+.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button,
+.jsontree_node_empty > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
+    display: none !important;
+}
+.jsontree_node_complex > .jsontree_label-wrapper > .jsontree_label {
+    cursor: pointer;
+}
+.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label {
+    cursor: default !important;
+}

src/renderer/src/components/whiteboard/libs/jsonTree.js

@@ -0,0 +1,822 @@
+/**
+ * JSON Tree library (a part of jsonTreeViewer)
+ * http://github.com/summerstyle/jsonTreeViewer
+ *
+ * Copyright 2017 Vera Lobacheva (http://iamvera.com)
+ * Released under the MIT license (LICENSE.txt)
+ */
+
+var jsonTree = (function() {
+
+    /* ---------- Utilities ---------- */
+    var utils = {
+
+        /*
+         * Returns js-"class" of value
+         *
+         * @param val {any type} - value
+         * @returns {string} - for example, "[object Function]"
+         */
+        getClass : function(val) {
+            return Object.prototype.toString.call(val);
+        },
+
+        /**
+         * Checks for a type of value (for valid JSON data types).
+         * In other cases - throws an exception
+         *
+         * @param val {any type} - the value for new node
+         * @returns {string} ("object" | "array" | "null" | "boolean" | "number" | "string")
+         */
+        getType : function(val) {
+            if (val === null) {
+                return 'null';
+            }
+
+            switch (typeof val) {
+                case 'number':
+                    return 'number';
+
+                case 'string':
+                    return 'string';
+
+                case 'boolean':
+                    return 'boolean';
+            }
+
+            switch(utils.getClass(val)) {
+                case '[object Array]':
+                    return 'array';
+
+                case '[object Object]':
+                    return 'object';
+            }
+
+            throw new Error('Bad type: ' + utils.getClass(val));
+        },
+
+        /**
+         * Applies for each item of list some function
+         * and checks for last element of the list
+         *
+         * @param obj {Object | Array} - a list or a dict with child nodes
+         * @param func {Function} - the function for each item
+         */
+        forEachNode : function(obj, func) {
+            var type = utils.getType(obj),
+                isLast;
+
+            switch (type) {
+                case 'array':
+                    isLast = obj.length - 1;
+
+                    obj.forEach(function(item, i) {
+                        func(i, item, i === isLast);
+                    });
+
+                    break;
+
+                case 'object':
+                    var keys = Object.keys(obj).sort();
+
+                    isLast = keys.length - 1;
+
+                    keys.forEach(function(item, i) {
+                        func(item, obj[item], i === isLast);
+                    });
+
+                    break;
+            }
+
+        },
+
+        /**
+         * Implements the kind of an inheritance by
+         * using parent prototype and
+         * creating intermediate constructor
+         *
+         * @param Child {Function} - a child constructor
+         * @param Parent {Function} - a parent constructor
+         */
+        inherits : (function() {
+            var F = function() {};
+
+            return function(Child, Parent) {
+                F.prototype = Parent.prototype;
+                Child.prototype = new F();
+                Child.prototype.constructor = Child;
+            };
+        })(),
+
+        /*
+         * Checks for a valid type of root node*
+         *
+         * @param {any type} jsonObj - a value for root node
+         * @returns {boolean} - true for an object or an array, false otherwise
+         */
+        isValidRoot : function(jsonObj) {
+            switch (utils.getType(jsonObj)) {
+                case 'object':
+                case 'array':
+                    return true;
+                default:
+                    return false;
+            }
+        },
+
+        /**
+         * Extends some object
+         */
+        extend : function(targetObj, sourceObj) {
+            for (var prop in sourceObj) {
+                if (sourceObj.hasOwnProperty(prop)) {
+                    targetObj[prop] = sourceObj[prop];
+                }
+            }
+        }
+    };
+
+
+    /* ---------- Node constructors ---------- */
+
+    /**
+     * The factory for creating nodes of defined type.
+     *
+     * ~~~ Node ~~~ is a structure element of an onject or an array
+     * with own label (a key of an object or an index of an array)
+     * and value of any json data type. The root object or array
+     * is a node without label.
+     * {...
+     * [+] "label": value,
+     * ...}
+     *
+     * Markup:
+     * <li class="jsontree_node [jsontree_node_expanded]">
+     *     <span class="jsontree_label-wrapper">
+     *         <span class="jsontree_label">
+     *             <span class="jsontree_expand-button" />
+     *             "label"
+     *         </span>
+     *         :
+     *     </span>
+     *     <(div|span) class="jsontree_value jsontree_value_(object|array|boolean|null|number|string)">
+     *         ...
+     *     </(div|span)>
+     * </li>
+     *
+     * @param label {string} - key name
+     * @param val {Object | Array | string | number | boolean | null} - a value of node
+     * @param isLast {boolean} - true if node is last in list of siblings
+     *
+     * @return {Node}
+     */
+    function Node(label, val, isLast) {
+        var nodeType = utils.getType(val);
+
+        if (nodeType in Node.CONSTRUCTORS) {
+            return new Node.CONSTRUCTORS[nodeType](label, val, isLast);
+        } else {
+            throw new Error('Bad type: ' + utils.getClass(val));
+        }
+    }
+
+    Node.CONSTRUCTORS = {
+        'boolean' : NodeBoolean,
+        'number'  : NodeNumber,
+        'string'  : NodeString,
+        'null'    : NodeNull,
+        'object'  : NodeObject,
+        'array'   : NodeArray
+    };
+
+
+    /*
+     * The constructor for simple types (string, number, boolean, null)
+     * {...
+     * [+] "label": value,
+     * ...}
+     * value = string || number || boolean || null
+     *
+     * Markup:
+     * <li class="jsontree_node">
+     *     <span class="jsontree_label-wrapper">
+     *         <span class="jsontree_label">"age"</span>
+     *         :
+     *     </span>
+     *     <span class="jsontree_value jsontree_value_(number|boolean|string|null)">25</span>
+     *     ,
+     * </li>
+     *
+     * @abstract
+     * @param label {string} - key name
+     * @param val {string | number | boolean | null} - a value of simple types
+     * @param isLast {boolean} - true if node is last in list of parent childNodes
+     */
+    function _NodeSimple(label, val, isLast) {
+        if (this.constructor === _NodeSimple) {
+            throw new Error('This is abstract class');
+        }
+
+        var self = this,
+            el = document.createElement('li'),
+            labelEl,
+            template = function(label, val) {
+                var str = '\
+                    <span class="jsontree_label-wrapper">\
+                        <span class="jsontree_label">"' +
+                            label +
+                        '"</span> : \
+                    </span>\
+                    <span class="jsontree_value-wrapper">\
+                        <span class="jsontree_value jsontree_value_' + self.type + '">' +
+                            val +
+                        '</span>' +
+                        (!isLast ? ',' : '') +
+                    '</span>';
+
+                return str;
+            };
+
+        self.label = label;
+        self.isComplex = false;
+
+        el.classList.add('jsontree_node');
+        el.innerHTML = template(label, val);
+
+        self.el = el;
+
+        labelEl = el.querySelector('.jsontree_label');
+
+        labelEl.addEventListener('click', function(e) {
+            if (e.altKey) {
+                self.toggleMarked();
+                return;
+            }
+
+            if (e.shiftKey) {
+                document.getSelection().removeAllRanges();
+                alert(self.getJSONPath());
+                return;
+            }
+        }, false);
+    }
+
+    _NodeSimple.prototype = {
+        constructor : _NodeSimple,
+
+        /**
+         * Mark node
+         */
+        mark : function() {
+            this.el.classList.add('jsontree_node_marked');
+        },
+
+        /**
+         * Unmark node
+         */
+        unmark : function() {
+            this.el.classList.remove('jsontree_node_marked');
+        },
+
+        /**
+         * Mark or unmark node
+         */
+        toggleMarked : function() {
+            this.el.classList.toggle('jsontree_node_marked');
+        },
+
+        /**
+         * Expands parent node of this node
+         *
+         * @param isRecursive {boolean} - if true, expands all parent nodes
+         *                                (from node to root)
+         */
+        expandParent : function(isRecursive) {
+            if (!this.parent) {
+                return;
+            }
+
+            this.parent.expand();
+            this.parent.expandParent(isRecursive);
+        },
+
+        /**
+         * Returns JSON-path of this
+         *
+         * @param isInDotNotation {boolean} - kind of notation for returned json-path
+         *                                    (by default, in bracket notation)
+         * @returns {string}
+         */
+        getJSONPath : function(isInDotNotation) {
+            if (this.isRoot) {
+                return "$";
+            }
+
+            var currentPath;
+
+            if (this.parent.type === 'array') {
+                currentPath = "[" + this.label + "]";
+            } else {
+                currentPath = isInDotNotation ? "." + this.label : "['" + this.label + "']";
+            }
+
+            return this.parent.getJSONPath(isInDotNotation) + currentPath;
+        }
+    };
+
+
+    /*
+     * The constructor for boolean values
+     * {...
+     * [+] "label": boolean,
+     * ...}
+     * boolean = true || false
+     *
+     * @constructor
+     * @param label {string} - key name
+     * @param val {boolean} - value of boolean type, true or false
+     * @param isLast {boolean} - true if node is last in list of parent childNodes
+     */
+    function NodeBoolean(label, val, isLast) {
+        this.type = "boolean";
+
+        _NodeSimple.call(this, label, val, isLast);
+    }
+    utils.inherits(NodeBoolean,_NodeSimple);
+
+
+    /*
+     * The constructor for number values
+     * {...
+     * [+] "label": number,
+     * ...}
+     * number = 123
+     *
+     * @constructor
+     * @param label {string} - key name
+     * @param val {number} - value of number type, for example 123
+     * @param isLast {boolean} - true if node is last in list of parent childNodes
+     */
+    function NodeNumber(label, val, isLast) {
+        this.type = "number";
+
+        _NodeSimple.call(this, label, val, isLast);
+    }
+    utils.inherits(NodeNumber,_NodeSimple);
+
+
+    /*
+     * The constructor for string values
+     * {...
+     * [+] "label": string,
+     * ...}
+     * string = "abc"
+     *
+     * @constructor
+     * @param label {string} - key name
+     * @param val {string} - value of string type, for example "abc"
+     * @param isLast {boolean} - true if node is last in list of parent childNodes
+     */
+    function NodeString(label, val, isLast) {
+        this.type = "string";
+
+        _NodeSimple.call(this, label, '"' + val + '"', isLast);
+    }
+    utils.inherits(NodeString,_NodeSimple);
+
+
+    /*
+     * The constructor for null values
+     * {...
+     * [+] "label": null,
+     * ...}
+     *
+     * @constructor
+     * @param label {string} - key name
+     * @param val {null} - value (only null)
+     * @param isLast {boolean} - true if node is last in list of parent childNodes
+     */
+    function NodeNull(label, val, isLast) {
+        this.type = "null";
+
+        _NodeSimple.call(this, label, val, isLast);
+    }
+    utils.inherits(NodeNull,_NodeSimple);
+
+
+    /*
+     * The constructor for complex types (object, array)
+     * {...
+     * [+] "label": value,
+     * ...}
+     * value = object || array
+     *
+     * Markup:
+     * <li class="jsontree_node jsontree_node_(object|array) [expanded]">
+     *     <span class="jsontree_label-wrapper">
+     *         <span class="jsontree_label">
+     *             <span class="jsontree_expand-button" />
+     *             "label"
+     *         </span>
+     *         :
+     *     </span>
+     *     <div class="jsontree_value">
+     *         <b>{</b>
+     *         <ul class="jsontree_child-nodes" />
+     *         <b>}</b>
+     *         ,
+     *     </div>
+     * </li>
+     *
+     * @abstract
+     * @param label {string} - key name
+     * @param val {Object | Array} - a value of complex types, object or array
+     * @param isLast {boolean} - true if node is last in list of parent childNodes
+     */
+    function _NodeComplex(label, val, isLast) {
+        if (this.constructor === _NodeComplex) {
+            throw new Error('This is abstract class');
+        }
+
+        var self = this,
+            el = document.createElement('li'),
+            template = function(label, sym) {
+                var comma = (!isLast) ? ',' : '',
+                    str = '\
+                        <div class="jsontree_value-wrapper">\
+                            <div class="jsontree_value jsontree_value_' + self.type + '">\
+                                <b>' + sym[0] + '</b>\
+                                <span class="jsontree_show-more">&hellip;</span>\
+                                <ul class="jsontree_child-nodes"></ul>\
+                                <b>' + sym[1] + '</b>' +
+                            '</div>' + comma +
+                        '</div>';
+
+                if (label !== null) {
+                    str = '\
+                        <span class="jsontree_label-wrapper">\
+                            <span class="jsontree_label">' +
+                                '<span class="jsontree_expand-button"></span>' +
+                                '"' + label +
+                            '"</span> : \
+                        </span>' + str;
+                }
+
+                return str;
+            },
+            childNodesUl,
+            labelEl,
+            moreContentEl,
+            childNodes = [];
+
+        self.label = label;
+        self.isComplex = true;
+
+        el.classList.add('jsontree_node');
+        el.classList.add('jsontree_node_complex');
+        el.innerHTML = template(label, self.sym);
+
+        childNodesUl = el.querySelector('.jsontree_child-nodes');
+
+        if (label !== null) {
+            labelEl = el.querySelector('.jsontree_label');
+            moreContentEl = el.querySelector('.jsontree_show-more');
+
+            labelEl.addEventListener('click', function(e) {
+                if (e.altKey) {
+                    self.toggleMarked();
+                    return;
+                }
+
+                if (e.shiftKey) {
+                    document.getSelection().removeAllRanges();
+                    alert(self.getJSONPath());
+                    return;
+                }
+
+                self.toggle(e.ctrlKey || e.metaKey);
+            }, false);
+
+            moreContentEl.addEventListener('click', function(e) {
+                self.toggle(e.ctrlKey || e.metaKey);
+            }, false);
+
+            self.isRoot = false;
+        } else {
+            self.isRoot = true;
+            self.parent = null;
+
+            el.classList.add('jsontree_node_expanded');
+        }
+
+        self.el = el;
+        self.childNodes = childNodes;
+        self.childNodesUl = childNodesUl;
+
+        utils.forEachNode(val, function(label, node, isLast) {
+            self.addChild(new Node(label, node, isLast));
+        });
+
+        self.isEmpty = !Boolean(childNodes.length);
+        if (self.isEmpty) {
+            el.classList.add('jsontree_node_empty');
+        }
+    }
+
+    utils.inherits(_NodeComplex, _NodeSimple);
+
+    utils.extend(_NodeComplex.prototype, {
+        constructor : _NodeComplex,
+
+        /*
+         * Add child node to list of child nodes
+         *
+         * @param child {Node} - child node
+         */
+        addChild : function(child) {
+            this.childNodes.push(child);
+            this.childNodesUl.appendChild(child.el);
+            child.parent = this;
+        },
+
+        /*
+         * Expands this list of node child nodes
+         *
+         * @param isRecursive {boolean} - if true, expands all child nodes
+         */
+        expand : function(isRecursive){
+            if (this.isEmpty) {
+                return;
+            }
+
+            if (!this.isRoot) {
+                this.el.classList.add('jsontree_node_expanded');
+            }
+
+            if (isRecursive) {
+                this.childNodes.forEach(function(item, i) {
+                    if (item.isComplex) {
+                        item.expand(isRecursive);
+                    }
+                });
+            }
+        },
+
+        /*
+         * Collapses this list of node child nodes
+         *
+         * @param isRecursive {boolean} - if true, collapses all child nodes
+         */
+        collapse : function(isRecursive) {
+            if (this.isEmpty) {
+                return;
+            }
+
+            if (!this.isRoot) {
+                this.el.classList.remove('jsontree_node_expanded');
+            }
+
+            if (isRecursive) {
+                this.childNodes.forEach(function(item, i) {
+                    if (item.isComplex) {
+                        item.collapse(isRecursive);
+                    }
+                });
+            }
+        },
+
+        /*
+         * Expands collapsed or collapses expanded node
+         *
+         * @param {boolean} isRecursive - Expand all child nodes if this node is expanded
+         *                                and collapse it otherwise
+         */
+        toggle : function(isRecursive) {
+            if (this.isEmpty) {
+                return;
+            }
+
+            this.el.classList.toggle('jsontree_node_expanded');
+
+            if (isRecursive) {
+                var isExpanded = this.el.classList.contains('jsontree_node_expanded');
+
+                this.childNodes.forEach(function(item, i) {
+                    if (item.isComplex) {
+                        item[isExpanded ? 'expand' : 'collapse'](isRecursive);
+                    }
+                });
+            }
+        },
+
+        /**
+         * Find child nodes that match some conditions and handle it
+         *
+         * @param {Function} matcher
+         * @param {Function} handler
+         * @param {boolean} isRecursive
+         */
+        findChildren : function(matcher, handler, isRecursive) {
+            if (this.isEmpty) {
+                return;
+            }
+
+            this.childNodes.forEach(function(item, i) {
+                if (matcher(item)) {
+                    handler(item);
+                }
+
+                if (item.isComplex && isRecursive) {
+                    item.findChildren(matcher, handler, isRecursive);
+                }
+            });
+        }
+    });
+
+
+    /*
+     * The constructor for object values
+     * {...
+     * [+] "label": object,
+     * ...}
+     * object = {"abc": "def"}
+     *
+     * @constructor
+     * @param label {string} - key name
+     * @param val {Object} - value of object type, {"abc": "def"}
+     * @param isLast {boolean} - true if node is last in list of siblings
+     */
+    function NodeObject(label, val, isLast) {
+        this.sym = ['{', '}'];
+        this.type = "object";
+
+        _NodeComplex.call(this, label, val, isLast);
+    }
+    utils.inherits(NodeObject,_NodeComplex);
+
+
+    /*
+     * The constructor for array values
+     * {...
+     * [+] "label": array,
+     * ...}
+     * array = [1,2,3]
+     *
+     * @constructor
+     * @param label {string} - key name
+     * @param val {Array} - value of array type, [1,2,3]
+     * @param isLast {boolean} - true if node is last in list of siblings
+     */
+    function NodeArray(label, val, isLast) {
+        this.sym = ['[', ']'];
+        this.type = "array";
+
+        _NodeComplex.call(this, label, val, isLast);
+    }
+    utils.inherits(NodeArray, _NodeComplex);
+
+
+    /* ---------- The tree constructor ---------- */
+
+    /*
+     * The constructor for json tree.
+     * It contains only one Node (Array or Object), without property name.
+     * CSS-styles of .tree define main tree styles like font-family,
+     * font-size and own margins.
+     *
+     * Markup:
+     * <ul class="jsontree_tree clearfix">
+     *     {Node}
+     * </ul>
+     *
+     * @constructor
+     * @param jsonObj {Object | Array} - data for tree
+     * @param domEl {DOMElement} - DOM-element, wrapper for tree
+     */
+    function Tree(jsonObj, domEl) {
+        this.wrapper = document.createElement('ul');
+        this.wrapper.className = 'jsontree_tree clearfix';
+
+        this.rootNode = null;
+
+        this.sourceJSONObj = jsonObj;
+
+        this.loadData(jsonObj);
+        this.appendTo(domEl);
+    }
+
+    Tree.prototype = {
+        constructor : Tree,
+
+        /**
+         * Fill new data in current json tree
+         *
+         * @param {Object | Array} jsonObj - json-data
+         */
+        loadData : function(jsonObj) {
+            if (!utils.isValidRoot(jsonObj)) {
+                alert('The root should be an object or an array');
+                return;
+            }
+
+            this.sourceJSONObj = jsonObj;
+
+            this.rootNode = new Node(null, jsonObj, 'last');
+            this.wrapper.innerHTML = '';
+            this.wrapper.appendChild(this.rootNode.el);
+        },
+
+        /**
+         * Appends tree to DOM-element (or move it to new place)
+         *
+         * @param {DOMElement} domEl
+         */
+        appendTo : function(domEl) {
+            domEl.appendChild(this.wrapper);
+        },
+
+        /**
+         * Expands all tree nodes (objects or arrays) recursively
+         *
+         * @param {Function} filterFunc - 'true' if this node should be expanded
+         */
+        expand : function(filterFunc) {
+            if (this.rootNode.isComplex) {
+                if (typeof filterFunc == 'function') {
+                    this.rootNode.childNodes.forEach(function(item, i) {
+                        if (item.isComplex && filterFunc(item)) {
+                            item.expand();
+                        }
+                    });
+                } else {
+                    this.rootNode.expand('recursive');
+                }
+            }
+        },
+
+        /**
+         * Collapses all tree nodes (objects or arrays) recursively
+         */
+        collapse : function() {
+            if (typeof this.rootNode.collapse === 'function') {
+                this.rootNode.collapse('recursive');
+            }
+        },
+
+        /**
+         * Returns the source json-string (pretty-printed)
+         *
+         * @param {boolean} isPrettyPrinted - 'true' for pretty-printed string
+         * @returns {string} - for exemple, '{"a":2,"b":3}'
+         */
+        toSourceJSON : function(isPrettyPrinted) {
+            if (!isPrettyPrinted) {
+                return JSON.stringify(this.sourceJSONObj);
+            }
+
+            var DELIMETER = "[%^$#$%^%]",
+                jsonStr = JSON.stringify(this.sourceJSONObj, null, DELIMETER);
+
+            jsonStr = jsonStr.split("\n").join("<br />");
+            jsonStr = jsonStr.split(DELIMETER).join("&nbsp;&nbsp;&nbsp;&nbsp;");
+
+            return jsonStr;
+        },
+
+        /**
+         * Find all nodes that match some conditions and handle it
+         */
+        findAndHandle : function(matcher, handler) {
+            this.rootNode.findChildren(matcher, handler, 'isRecursive');
+        },
+
+        /**
+         * Unmark all nodes
+         */
+        unmarkAll : function() {
+            this.rootNode.findChildren(function(node) {
+                return true;
+            }, function(node) {
+                node.unmark();
+            }, 'isRecursive');
+        }
+    };
+
+
+    /* ---------- Public methods ---------- */
+    return {
+        /**
+         * Creates new tree by data and appends it to the DOM-element
+         *
+         * @param jsonObj {Object | Array} - json-data
+         * @param domEl {DOMElement} - the wrapper element
+         * @returns {Tree}
+         */
+        create : function(jsonObj, domEl) {
+            return new Tree(jsonObj, domEl);
+        }
+    };
+})();
+export default {
+	jsonTree
+}

src/renderer/src/components/whiteboard/whiteboard.vue

@@ -0,0 +1,913 @@
+<template>
+  <div class="whiteboart-container" :style="{ height: height + 'px' }">
+    <div class="canvasBox" ref="box"></div>
+
+    <div class="footerLeft" @click.stop
+      :style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
+      <div class="left">
+        <!-- 前进回退 -->
+        <div class="blockBox" v-if="!readonly && width >= 1000">
+          <el-tooltip effect="light" content="回退" placement="top">
+            <el-button :icon="RefreshLeft" circle :disabled="!canUndo" @click="undo" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="前进" placement="top">
+            <el-button :icon="RefreshRight" circle :disabled="!canRedo" @click="redo" />
+          </el-tooltip>
+        </div>
+        <div class="blockBox">
+          <el-button @click="currentType = 'selection'"><el-image src="/src/assets/icons/pngjpg/mouse-pointer.png"
+              style="width: 14px; height: 14px; color: silver" /></el-button>
+        </div>
+        <template v-if="type == 'design'">
+          <el-radio-group v-model="currentType" @change="onCurrentTypeChange">
+            <el-tooltip effect="light" content="画笔" placement="top">
+              <el-radio-button label="画笔" value="freedraw">
+                <svg t="1719045569796" class="icon" viewBox="0 0 1031 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="11317" width="14" height="14">
+                  <path
+                    d="M1001.476376 77.351719c-26.164542-24.960575-25.568765-24.364798-57.095299-53.495813-30.930758-29.118603-98.129443-36.255515-139.759364 5.349581S127.223222 709.769044 127.223222 709.769044 8.303642 983.181056 1.737683 998.646435 8.303642 1028.956592 23.198068 1022.415456s301.525241-125.361418 301.525241-125.361418l676.802715-676.455178c51.745718-51.708482 26.164542-118.286566 0-143.247141zM79.635531 942.171737l76.13534-175.34463 102.883247 99.854714z m233.730779-106.991627l-120.123545-116.499234 466.853369-464.83021 116.573707 112.949397z m510.283032-512.35584l-119.54018-116.499235 52.937272-52.900036 119.540181 116.561295z m135.601336-132.535567l-45.19217 45.179759-123.71062-118.894755s26.760319-26.15213 46.383725-45.167347 57.691076-17.836075 77.314483 1.241203c19.623406 18.431852 20.81496 19.610994 42.200873 40.413542 25.568765 24.364798 21.410737 58.845394 2.966473 77.264834z m0 0"
+                    fill="#848282" p-id="11318"></path>
+                </svg>
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip effect="light" content="文字" placement="top">
+              <el-radio-button label="文字" value="text">
+                <svg t="1719046751133" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="16523" width="14" height="14">
+                  <path
+                    d="M429.056 919.552h166.4l-0.512-1.024c-32.768-40.96-50.688-92.16-50.688-144.384V228.352h154.112c44.032 0 87.04 14.848 121.856 42.496l11.776 9.216V154.112s-128 20.48-319.488 20.48-321.024-20.48-321.024-20.48v125.44l8.192-6.656c35.328-28.672 79.36-44.544 124.928-44.544h155.648v545.28c0 52.736-17.92 103.424-50.688 144.384l-0.512 1.536z"
+                    fill="#848282" p-id="16524"></path>
+                </svg>
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip effect="light" content="图片" placement="top">
+              <el-radio-button label="图片" value="image">
+                <svg t="1719045309869" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="6679" width="14" height="14">
+                  <path
+                    d="M867.90864 574.538232V257.779543a50.844091 50.844091 0 0 0-50.844092-50.844091h-610.129096a50.844091 50.844091 0 0 0-50.844092 50.844091v499.797418l430.141013-257.779543a152.532274 152.532274 0 0 1 157.108243 0z m0 118.466733l-177.445879-106.264151a50.844091 50.844091 0 0 0-50.844092 0L254.220457 817.064548h562.844091a50.844091 50.844091 0 0 0 50.844092-50.844091z m-660.973188-587.757696h610.129096a152.532274 152.532274 0 0 1 152.532274 152.532274v508.440914a152.532274 152.532274 0 0 1-152.532274 152.532274h-610.129096a152.532274 152.532274 0 0 1-152.532274-152.532274v-508.440914a152.532274 152.532274 0 0 1 152.532274-152.532274z m127.110228 355.90864a76.266137 76.266137 0 1 1 76.266137-76.266137 76.266137 76.266137 0 0 1-76.266137 76.266137z"
+                    fill="#848282" p-id="6680"></path>
+                </svg>
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </template>
+        <div class="blockBox">
+          <el-button @click="currentType = 'selection'" style="color:#848282" :icon="Camera" disabled></el-button>
+        </div>
+        <div class="blockBox" v-if="!readonly">
+          <el-dropdown @command="handleToolTypeChange" placement="top">
+            <el-button>{{ type == 'design' ? '形状' : '工具' }}</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="rectangle">矩形</el-dropdown-item>
+                <el-dropdown-item command="diamond">菱形</el-dropdown-item>
+                <el-dropdown-item command="triangle">三角形</el-dropdown-item>
+                <el-dropdown-item command="circle">圆形</el-dropdown-item>
+                <el-dropdown-item command="line">线段</el-dropdown-item>
+                <el-dropdown-item command="arrow">箭头</el-dropdown-item>
+                <template v-if="type != 'design'">
+                  <el-dropdown-item command="freedraw">画笔</el-dropdown-item>
+                  <el-dropdown-item command="text">文字</el-dropdown-item>
+                  <el-dropdown-item command="image">图片</el-dropdown-item>
+                </template>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <!-- AI -->
+        <div class="blockBox">
+          <el-dropdown @command="handleToolTypeChange" placement="top">
+            <el-button type="warning">AI</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="rectangle">教学大模型</el-dropdown-item>
+                <el-dropdown-item disabled command="diamond">单张图片创作</el-dropdown-item>
+                <el-dropdown-item disabled command="triandle">连环画创作</el-dropdown-item>
+                <el-dropdown-item disabled command="circle">视频创作</el-dropdown-item>
+                <el-dropdown-item disabled command="line">音乐创作</el-dropdown-item>
+                <el-dropdown-item disabled command="arrow">语音</el-dropdown-item>
+                <el-dropdown-item disabled command="freedraw">多语言翻译</el-dropdown-item>
+                <el-dropdown-item disabled command="text">数字人</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+
+        <!-- 只读、编辑模式切换 -->
+        <!-- <div class="blockBox">
+        <el-tooltip effect="light" :content="elReadonly ? '元素设置为可编辑' : '元素设置为只读'" placement="top">
+          <el-button :icon="elReadonly ? View : Edit" circle @click="elementModeChange" />
+        </el-tooltip>
+      </div> -->
+
+        <template v-if="!readonly">
+          <!-- 描边 -->
+          <div class="blockBox">
+            <el-tooltip effect="light" content="描边" placement="top">
+              <ColorPicker type="stroke" :value="activeElement?.style.strokeStyle"
+                @change="updateStyle('strokeStyle', $event)"></ColorPicker>
+            </el-tooltip>
+          </div>
+          <!-- 填充 -->
+          <div class="blockBox">
+            <el-tooltip effect="light" content="填充" placement="top">
+              <ColorPicker type="fill" :value="activeElement?.style.fillStyle"
+                @change="updateStyle('fillStyle', $event)">
+              </ColorPicker>
+            </el-tooltip>
+          </div>
+          <!-- 边框样式 -->
+          <div class="blockBox">
+            <el-dropdown @command="updateStyle('lineDash', $event)" placement="top">
+              <el-button><el-image src="/src/assets/icons/pngjpg/borderstyle.png"
+                  style="width: 14px; height: 14px"></el-image></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="0">实线</el-dropdown-item>
+                  <el-dropdown-item command="1">大虚线</el-dropdown-item>
+                  <el-dropdown-item command="2">小虚线</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          <!--透明度-->
+          <div class="blockBox" style="width: 120px"
+            v-if="type == 'design' ? true : ['image'].includes(activeElement?.type) || hasSelectedElements">
+            <el-tooltip effect="light" content="透明度" placement="top">
+              <el-input-number v-model="globalAlpha" :min="0" :max="1" :step="0.1"
+                @change="updateStyle('globalAlpha', $event)"></el-input-number>
+            </el-tooltip>
+          </div>
+
+          <!-- 边框粗细 -->
+          <div class="blockBox">
+            <el-dropdown @command="updateStyle('lineWidth', $event)" placement="top">
+              <el-button><el-image src="/src/assets/icons/pngjpg/borderwidth.png"
+                  style="width: 14px; height: 14px"></el-image></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="small">细</el-dropdown-item>
+                  <el-dropdown-item command="middle">正常</el-dropdown-item>
+                  <el-dropdown-item command="large">粗</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          <!-- 字体 -->
+          <div class="blockBox"
+            v-if="type == 'design' ? true : ['text'].includes(activeElement?.type) || hasSelectedElements">
+            <div class="styleBlockContent">
+              <el-select v-model="fontFamily" placeholder="字体" @change="updateStyle('fontFamily', $event)"
+                style="width: 110px">
+                <el-option v-for="item in fontFamilyList" :key="item.value" :label="item.name" :value="item.value"
+                  :style="{ fontFamily: item.value }"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <!-- 字号 -->
+          <div class="blockBox"
+            v-if="type == 'design' ? true : ['text'].includes(activeElement?.type) || hasSelectedElements">
+            <div class="styleBlockContent">
+              <el-select v-model="fontSize" placeholder="字号" @change="updateStyle('fontSize', $event)"
+                style="width: 80px">
+                <el-option v-for="item in fontSizeList" :key="item.value" :label="item.name" :value="item.value"
+                  :style="{ fontSize: item.value }"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </template>
+        <!-- 滚动 -->
+        <div v-if="width >= 1000" class="blockBox">
+          <template v-if="type == 'design'">
+            <el-tooltip effect="light" content="滚动至中心" placement="top">
+              <el-button icon="Operation" @click="scrollToCenter" />
+            </el-tooltip>
+          </template>
+          <template v-else>
+            <el-button @click="scrollToCenter">居中</el-button>
+          </template>
+        </div>
+
+        <!-- 缩放 -->
+        <!-- <div v-if="width>=1000" class="blockBox">
+        <el-tooltip effect="light" content="缩小" placement="top">
+          <el-button :icon="ZoomOut" circle @click="zoomOut" />
+        </el-tooltip>
+        <el-tooltip effect="light" content="放大" placement="top">
+          <el-button :icon="ZoomIn" circle @click="zoomIn" />
+        </el-tooltip>
+      </div> -->
+
+        <!-- 橡皮擦、显示网格、清空 -->
+        <div v-if="width >= 1000" class="blockBox">
+          <!-- 橡皮擦 -->
+          <el-tooltip effect="light" :content="currentType === 'eraser' ? '关闭橡皮擦' : '橡皮擦'" placement="top">
+            <el-button v-if="!readonly" :icon="Remove" circle :type="currentType === 'eraser' ? 'primary' : null"
+              @click="toggleEraser" />
+          </el-tooltip>
+          <!-- 清空 -->
+          <el-tooltip effect="light" content="清空" placement="top">
+            <el-button v-if="!readonly" :icon="Delete" circle @click="empty" />
+          </el-tooltip>
+          <!-- 网格 -->
+          <el-tooltip effect="light" :content="showGrid ? '隐藏网格' : '显示网格'" placement="top">
+            <el-button :icon="Grid" circle :type="showGrid ? 'primary' : null" @click="toggleGrid" />
+          </el-tooltip>
+        </div>
+        <!-- 保存提交 -->
+        <div class="blockBox" v-if="!readonly && isShowSave">
+          <el-tooltip effect="light" :content="type == 'design' ? '保存底板' : '保存'" placement="top">
+            <el-button type="success" style="margin-right: 10px" @click="onSave">{{ type == 'design' ? '保存底板' : '保存'
+              }}</el-button>
+          </el-tooltip>
+        </div>
+        <!-- 点赞、评价等 -->
+        <template v-if="allowComment == true">
+          <div class="blockBox" style="margin-left: 50px">
+            <el-tooltip effect="light" content="评价" placement="top">
+              <el-button :icon="ChromeFilled" type="success" style="margin-right: 10px" @click="onSave">写评价</el-button>
+            </el-tooltip>
+            <el-tooltip effect="light" content="放大" placement="top">
+              <el-button circle type="success" @click="zoomIn"><el-image src="/src/assets/icons/pngjpg/img-thumbup.png"
+                  style="height: 14px; width: 14px"></el-image></el-button>
+            </el-tooltip>
+          </div>
+
+        </template>
+      </div>
+      <!-- 课件设计才会有关闭按钮-->
+      <el-button v-if="type == 'design'" @click="closeBoard">关闭</el-button>
+    </div>
+    <!-- 导出图片弹窗 -->
+    <el-dialog v-model="exportImageDialogVisible" title="导出为图片" :width="800">
+      <div class="exportImageContainer">
+        <div class="imagePreviewBox">
+          <img :src="exportImageUrl" alt="" />
+        </div>
+        <div class="handleBox">
+          <el-checkbox v-model="exportOnlySelected" label="仅导出被选中" size="large" @change="reRenderExportImage"
+            style="margin-right: 10px" />
+          <el-checkbox v-model="exportRenderBackground" label="背景" size="large" @change="reRenderExportImage"
+            style="margin-right: 10px" />
+          <el-input v-model="exportFileName" style="width: 150px; margin-right: 10px"></el-input>
+          <el-input-number v-model="exportImagePaddingX" :min="10" :max="100" :step="5" controls-position="right"
+            @change="reRenderExportImage" style="margin-right: 10px" />
+          <el-input-number v-model="exportImagePaddingY" :min="10" :max="100" :step="5" controls-position="right"
+            @change="reRenderExportImage" style="margin-right: 10px" />
+          <el-button type="primary" @click="downloadExportImage">下载</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 导出json弹窗 -->
+    <el-dialog v-model="exportJsonDialogVisible" title="导出为json" :width="800">
+      <div class="exportJsonContainer">
+        <div class="jsonPreviewBox" ref="jsonPreviewBox"></div>
+        <div class="handleBox">
+          <el-input v-model="exportFileName" style="width: 150px; margin-right: 10px"></el-input>
+          <el-button type="primary" @click="downloadExportJson">下载</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 右键菜单 -->
+    <Contextmenu v-if="appInstance" :app="appInstance"></Contextmenu>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
+import TinyWhiteboard from 'whiteboard_lyc'
+import ColorPicker from './components/ColorPicker.vue'
+import {
+  Camera,
+  Delete,
+  CopyDocument,
+  ZoomIn,
+  ZoomOut,
+  Remove,
+  RefreshLeft,
+  RefreshRight,
+  Download,
+  Upload,
+  CaretTop,
+  CaretBottom,
+  Minus,
+  Grid,
+  View,
+  Edit,
+  QuestionFilled, ChromeFilled
+} from '@element-plus/icons-vue'
+import Contextmenu from './components/Contextmenu.vue'
+import { fontFamilyList, fontSizeList } from './constants'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  height: {
+    type: Number,
+    default: 700,
+  },
+  width: {
+    type: Number,
+    default: 1000,
+  },
+  data: {
+    type: [String, Object],
+    default: ''
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  allowComment: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: [String, undefined],
+    default: undefined
+  },
+  isShowSave: {
+    type: Boolean,
+    default: true
+  }
+})
+
+
+
+// 定义要发送的emit事件
+const emit = defineEmits(['handleSave', 'update:modelValue'])
+
+// 当前操作类型
+const currentType = ref('selection')
+
+// dom节点
+const box = ref(null)
+
+// 应用实例
+let app = null
+const appInstance = ref(null)
+// 当前激活的元素
+const activeElement = ref(null)
+// 当前多选的元素
+const selectedElements = ref([])
+const hasSelectedElements = computed(() => {
+  return selectedElements.value.length > 0
+})
+// 描边宽度
+const lineWidth = ref('small')
+// 字体
+const fontFamily = ref('微软雅黑, Microsoft YaHei')
+// 字号
+const fontSize = ref(18)
+// 边框样式
+const lineDash = ref(0)
+// 透明度
+const globalAlpha = ref(1)
+// 角度
+const rotate = ref(0)
+// 当前缩放
+const currentZoom = ref(100)
+// 缩放允许前进后退
+const canUndo = ref(false)
+const canRedo = ref(false)
+// 图片导出弹窗
+const exportImageDialogVisible = ref(false)
+const exportImageUrl = ref('')
+const exportOnlySelected = ref(false)
+const exportRenderBackground = ref(true)
+const exportFileName = ref('未命名')
+const exportImagePaddingX = ref(10)
+const exportImagePaddingY = ref(10)
+// json导出弹窗
+const exportJsonDialogVisible = ref(false)
+const exportJsonData = ref('')
+const tree = ref(null)
+const jsonPreviewBox = ref(null)
+// 背景颜色
+const backgroundColor = ref('')
+// 当前滚动距离
+const scroll = reactive({
+  x: 0,
+  y: 0
+})
+// 切换显示网格
+const showGrid = ref(false)
+// 模式切换
+// const readonly = ref(false)
+
+// 设置单个元素是否只读
+const elReadonly = ref(false)
+
+
+
+// 通知app更当前类型
+watch(currentType, () => {
+  elReadonly.value = false
+  app.updateCurrentType(currentType.value)
+})
+
+// 元素角度变化
+const onElementRotateChange = elementRotate => {
+  rotate.value = elementRotate
+}
+
+// 修改元素角度
+const onRotateChange = rotate => {
+  app.updateActiveElementRotate(rotate)
+}
+
+// 数字输入框聚焦事件
+const onInputNumberFocus = () => {
+  // 解绑快捷键按键事件，防止冲突
+  app.keyCommand.unBindEvent()
+}
+
+// 数字输入框失焦事件
+const onInputNumberBlur = () => {
+  // 重新绑定快捷键按键事件
+  app.keyCommand.bindEvent()
+}
+
+// 更新样式
+const updateStyle = (key, value) => {
+  app.setCurrentElementsStyle({
+    [key]: value
+  })
+}
+
+
+// 选择工具
+const handleToolTypeChange = (key) => {
+  currentType.value = key;
+  app.cancelActiveElement()
+}
+// 类型变化
+const onCurrentTypeChange = () => {
+  // 清除激活项
+  app.cancelActiveElement()
+}
+
+// 删除元素
+const deleteElement = () => {
+  app.deleteCurrentElements()
+}
+
+// 复制元素
+const copyElement = () => {
+  app.copyPasteCurrentElements()
+}
+
+// 放大
+const zoomIn = () => {
+  app.zoomIn()
+}
+
+// 缩小
+const zoomOut = () => {
+  app.zoomOut()
+}
+
+// 恢复初始缩放
+const resetZoom = () => {
+  app.setZoom(1)
+}
+
+// 橡皮擦
+const toggleEraser = () => {
+  currentType.value = currentType.value === 'eraser' ? 'selection' : 'eraser'
+}
+
+// 回退
+const undo = () => {
+  app.undo()
+}
+
+// 前进
+const redo = () => {
+  app.redo()
+}
+
+// 清空
+const empty = () => {
+  app.empty()
+}
+
+// 回到中心
+const backToCenter = () => {
+
+  app.scrollToCenter()
+}
+
+// 显示全部
+const showFit = () => {
+  let elementList = app.elements.elementList
+  let { maxx, maxy } = TinyWhiteboard.utils.getMultiElementRectInfo(elementList)
+  if (maxx >= app.width || maxy >= app.height) {
+    app.fit()
+  }
+  else {
+    backToCenter()
+  }
+}
+
+// 导入
+const importFromJson = () => {
+  let el = document.createElement('input')
+  el.type = 'file'
+  el.accept = 'application/json'
+  el.addEventListener('input', () => {
+    let reader = new FileReader()
+    reader.onload = () => {
+      el.value = null
+      if (reader.result) {
+        app.setData(JSON.parse(reader.result))
+      }
+    }
+    reader.readAsText(el.files[0])
+  })
+  el.click()
+}
+
+// 导出
+const handleExportCommand = type => {
+  if (type === 'png') {
+    exportImageUrl.value = app.exportImage({
+      renderBg: exportRenderBackground.value,
+      paddingX: exportImagePaddingX.value,
+      paddingY: exportImagePaddingY.value,
+      onlySelected: exportOnlySelected.value
+    })
+    exportImageDialogVisible.value = true
+  } else if (type === 'json') {
+    exportJsonData.value = app.exportJson()
+    exportJsonDialogVisible.value = true
+    nextTick(() => {
+      if (!tree.value) {
+        tree.value = jsonTree.create(exportJsonData.value, jsonPreviewBox.value)
+      } else {
+        tree.value.loadData(exportJsonData.value)
+      }
+    })
+  }
+}
+
+// 重新生成导出图片
+const reRenderExportImage = () => {
+  exportImageUrl.value = app.exportImage({
+    renderBg: exportRenderBackground.value,
+    paddingX: exportImagePaddingX.value,
+    paddingY: exportImagePaddingY.value,
+    onlySelected: exportOnlySelected.value
+  })
+}
+
+// 下载导出的图片
+const downloadExportImage = () => {
+  TinyWhiteboard.utils.downloadFile(
+    exportImageUrl.value,
+    exportFileName.value + '.png'
+  )
+}
+
+// 下载导出的json
+const downloadExportJson = () => {
+  let str = JSON.stringify(exportJsonData.value, null, 4)
+  let blob = new Blob([str])
+  TinyWhiteboard.utils.downloadFile(
+    URL.createObjectURL(blob),
+    exportFileName.value + '.json'
+  )
+}
+
+// 更新背景颜色
+const setBackgroundColor = value => {
+  app.setBackgroundColor(value)
+}
+
+// 滚动至中心
+const scrollToCenter = () => {
+  app.scrollToCenter()
+}
+
+// 切换显示网格
+const toggleGrid = () => {
+  if (showGrid.value) {
+    showGrid.value = false
+    app.hideGrid()
+  } else {
+    showGrid.value = true
+    app.showGrid()
+  }
+}
+
+const elementModeChange = () => {
+  elReadonly.value = !elReadonly.value
+  updateStyle('elReadonly', elReadonly.value)
+}
+
+// 模式切换
+const toggleMode = () => {
+  if (readonly.value) {
+    readonly.value = false
+    app.setEditMode()
+  } else {
+    readonly.value = true
+    app.setReadonlyMode()
+  }
+}
+
+// 关闭弹窗
+const closeBoard = () => {
+  emit('update:modelValue', false)
+}
+
+const onSave = async () => {
+
+  let dataJson = app.exportJson()
+  // 给每一个元素添加elReadonly 属性 学生端则不可操作这些元素
+  dataJson.elements.map(item => {
+    item.style.elReadonly = true
+  })
+  let base64 = await app.exportImage({
+    type: 'image/jpeg',
+    renderBg: exportRenderBackground.value,
+    paddingX: 0,
+    paddingY: 0,
+    onlySelected: exportOnlySelected.value,
+    backgroundColor: '#ffffff'
+  })
+  emit('handleSave', {
+    json: dataJson,
+    base64
+  })
+}
+
+const setCanvasData = (storeData) => {
+  storeData = JSON.parse(storeData)
+    ;[['backgroundColor', ''], ['strokeStyle', '#000000'], ['fontFamily', '微软雅黑, Microsoft YaHei'], ['dragStrokeStyle', '#666'], ['fillStyle', 'transparent'], ['fontSize', 18]].forEach((item) => {
+      if (storeData.state[item[0]] === undefined) {
+        storeData.state[item[0]] = item[1]
+      }
+    })
+  currentZoom.value = parseInt(storeData.state.scale * 100)
+  scroll.x = parseInt(storeData.state.scrollX)
+  scroll.y = parseInt(storeData.state.scrollY)
+  showGrid.value = storeData.state.showGrid
+  readonly.value = storeData.state.readonly
+  app.setData(storeData)
+}
+
+
+const getCanvasJson = () => {
+  let canvasJson = app.exportJson()
+  // 给每一个元素添加elReadonly 属性 学生端则不可操作这些元素
+  canvasJson.elements.forEach(item => {
+    item.style.elReadonly = true
+  })
+  return canvasJson
+}
+
+const getCanvasBase64 = async () =>{
+  let base64 = await app.exportImage({
+    type: 'image/jpeg',
+    renderBg: exportRenderBackground.value,
+    paddingX: 0,
+    paddingY: 0,
+    onlySelected: exportOnlySelected.value,
+    backgroundColor: '#ffffff'
+  })
+  return base64
+}
+
+watch(() => props.data, (newVal) => {
+  if (newVal) {
+    setCanvasData(newVal)
+  }
+  else {
+    empty()
+  }
+})
+
+// dom元素挂载完成
+onMounted(() => {
+  // 创建实例
+  app = new TinyWhiteboard({
+    container: box.value,
+    drawType: currentType.value,
+    state: {
+      // backgroundColor: '#121212',
+      // strokeStyle: '#fff',
+      // fontFamily: '楷体, 楷体_GB2312, SimKai, STKaiti',
+      // dragStrokeStyle: '#999'
+    }
+  })
+  let storeData = localStorage.getItem('TINY_WHITEBOARD_DATA')
+  if (props.data) {
+    setCanvasData(props.data)
+  }
+  // 监听app内部修改类型事件
+  app.on('currentTypeChange', type => {
+    currentType.value = type
+  })
+  // 监听元素激活事件
+  app.on('activeElementChange', element => {
+    if (activeElement.value) {
+      activeElement.value.off('elementRotateChange', onElementRotateChange)
+    }
+    activeElement.value = element
+    if (element) {
+      let { style, rotate: elementRotate } = element
+      lineWidth.value = style.lineWidth
+      fontFamily.value = style.fontFamily
+      fontSize.value = style.fontSize
+      lineDash.value = style.lineDash
+      globalAlpha.value = style.globalAlpha
+      rotate.value = elementRotate
+      element.on('elementRotateChange', onElementRotateChange)
+    }
+  })
+  // 元素多选变化
+  app.on('multiSelectChange', elements => {
+    selectedElements.value = elements
+  })
+  // 缩放变化
+  app.on('zoomChange', scale => {
+    currentZoom.value = parseInt(scale * 100)
+  })
+  // 监听前进后退事件
+  app.on('shuttle', (index, length) => {
+    canUndo.value = index > 0
+    canRedo.value = index < length - 1
+  })
+  // 监听数据变化
+  app.on('change', data => {
+    showGrid.value = data.state.showGrid
+    // localStorage.setItem('TINY_WHITEBOARD_DATA', JSON.stringify(data))
+  })
+  // 监听滚动变化
+  app.on('scrollChange', (x, y) => {
+    scroll.y = parseInt(y)
+    scroll.x = parseInt(x)
+  })
+  appInstance.value = app
+  // 窗口尺寸变化
+  let resizeTimer = null
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer)
+    resizeTimer = setTimeout(() => {
+      app.resize()
+    }, 300)
+  })
+})
+
+// 暴露方法
+defineExpose({
+  backToCenter,
+  resetZoom,
+  showFit,
+  getCanvasJson,
+  getCanvasBase64,
+  setCanvasData
+})
+</script>
+
+<style lang="less">
+ul,
+ol {
+  list-style: none;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  transform: translateX(-300px);
+}
+</style>
+<style lang="less" scoped>
+.whiteboart-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+
+  .canvasBox {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+  }
+
+  .sidebar {
+    position: absolute;
+    left: 20px;
+    top: 50px;
+    width: 250px;
+    background-color: #fff;
+
+    .elementStyle {
+      padding: 10px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+      border-radius: 4px;
+
+
+    }
+  }
+
+  .footerLeft {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    padding: 0 10px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+
+    .left {
+      display: flex;
+
+      .blockBox {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+
+        .zoom {
+          width: 40px;
+          margin: 0 10px;
+          user-select: none;
+          color: #606266;
+          cursor: pointer;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          background-color: #fff;
+          border-radius: 5px;
+          padding: 0 5px;
+          justify-content: center;
+        }
+      }
+    }
+
+  }
+
+}
+
+.exportImageContainer {
+  .imagePreviewBox {
+    height: 400px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==') 0;
+    padding: 10px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: scale-down;
+    }
+  }
+
+  .handleBox {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    justify-content: center;
+  }
+}
+
+.exportJsonContainer {
+  .jsonPreviewBox {
+    height: 400px;
+    overflow: auto;
+    background-color: #f5f5f5;
+    font-size: 14px;
+    color: #000;
+
+    /deep/ .jsontree_tree {
+      font-family: 'Trebuchet MS', Arial, sans-serif !important;
+    }
+  }
+
+  .handleBox {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    justify-content: center;
+  }
+}
+
+.helpDialogContent {
+  height: 500px;
+  overflow: auto;
+}
+</style>

src/renderer/src/main.js

@@ -15,6 +15,7 @@ import App from './App.vue'
 import router from './router'
 import log from 'electron-log/renderer' // 渲染进程日志-文件记录
 import customComponent from '@/components/common' // 自定义组件
+import plugins from './plugins' // plugins插件
 
 if(process.env.NODE_ENV != 'development') { // 非开发环境，将日志打印到日志文件
   Object.assign(console, log.functions) // 渲染进程日志-控制台替换
@@ -40,4 +41,5 @@ app.use(router)
     .use(store)
     .use(ElementPlus, { locale: zhLocale })
     .use(customComponent) // 自定义组件
+    .use(plugins)
     .mount('#app')

src/renderer/src/plugins/index.js

@@ -0,0 +1,18 @@
+// import tab from './tab'
+// import auth from './auth'
+// import cache from './cache'
+import modal from './modal'
+// import download from './download'
+
+export default function installPlugins(app){
+  // 页签操作
+  // app.config.globalProperties.$tab = tab
+  // // 认证对象
+  // app.config.globalProperties.$auth = auth
+  // // 缓存对象
+  // app.config.globalProperties.$cache = cache
+  // 模态框对象
+  app.config.globalProperties.$modal = modal
+  // 下载文件
+  // app.config.globalProperties.$download = download
+}

src/renderer/src/plugins/modal.js

@@ -0,0 +1,82 @@
+import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
+
+let loadingInstance;
+
+export default {
+  // 消息提示
+  msg(content) {
+    ElMessage.info(content)
+  },
+  // 错误消息
+  msgError(content) {
+    ElMessage.error(content)
+  },
+  // 成功消息
+  msgSuccess(content) {
+    ElMessage.success(content)
+  },
+  // 警告消息
+  msgWarning(content) {
+    ElMessage.warning(content)
+  },
+  // 弹出提示
+  alert(content) {
+    ElMessageBox.alert(content, "系统提示")
+  },
+  // 错误提示
+  alertError(content) {
+    ElMessageBox.alert(content, "系统提示", { type: 'error' })
+  },
+  // 成功提示
+  alertSuccess(content) {
+    ElMessageBox.alert(content, "系统提示", { type: 'success' })
+  },
+  // 警告提示
+  alertWarning(content) {
+    ElMessageBox.alert(content, "系统提示", { type: 'warning' })
+  },
+  // 通知提示
+  notify(content) {
+    ElNotification.info(content)
+  },
+  // 错误通知
+  notifyError(content) {
+    ElNotification.error(content);
+  },
+  // 成功通知
+  notifySuccess(content) {
+    ElNotification.success(content)
+  },
+  // 警告通知
+  notifyWarning(content) {
+    ElNotification.warning(content)
+  },
+  // 确认窗体
+  confirm(content) {
+    return ElMessageBox.confirm(content, "系统提示", {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+    })
+  },
+  // 提交内容
+  prompt(content) {
+    return ElMessageBox.prompt(content, "系统提示", {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+    })
+  },
+  // 打开遮罩层
+  loading(content) {
+    loadingInstance = ElLoading.service({
+      lock: true,
+      text: content,
+      background: "rgba(0, 0, 0, 0.7)",
+    })
+  },
+  // 关闭遮罩层
+  closeLoading() {
+    loadingInstance.close();
+  }
+}

src/renderer/src/router/index.js

@@ -82,9 +82,9 @@ export const constantRoutes = [
       },
       {
         path: '/classTaskAssign',
-        component: () => import('@/views/classTaskAssign/index.vue'),
+        component: () => import('@/views/classTask/classTaskAssign.vue'),
         name: 'classTaskAssign',
-        meta: {title: '作业设计'},
+        meta: {title: '作业布置'},
       },
       {
         path: '/classTask',

src/renderer/src/views/classTask/classTask.vue

@@ -142,8 +142,9 @@ const getClassWorkList = () => {
       edusubject: userStore.edusubject,//学科
       deaddate: tabActive.value === '进行中'? getTomorrow() : EndDate.value,// 进行中：明天，已结束：选择的日期
       status: '1', // 作业状态：1-已发布
-      orderby: 'concat(deaddate,uniquekey) DESC',
+      // orderby: 'concat(deaddate,uniquekey) DESC',
-      pageSize: 100
+      orderby: 'uniquekey DESC',
+      pageSize: 100,
     }).then((response) => {
       for (var i = 0; i < response.rows.length; i++) {
         // 初始化部分新增字段值
@@ -325,7 +326,7 @@ const escapeHtmlQuotes = (str) => {
   // 后端已replace双引号, 故前端不用在处理
   const regex1 = /\\+/g;  // 匹配多个反斜杠
   let result = str.replace(regex1, '\\');
-
+  result = str.replace(/(?<!\\)\n/g, '<br />');    //替换\n而不替换\\n 为 \\n
   return result;
 }
 const pollingST = ref(null) //轮询定时器标识
@@ -373,7 +374,8 @@ const getStudentVisible = async () => {
     edusubject: userStore.edusubject,//学科
     deaddate: tabActive.value === '进行中'? getTomorrow() : EndDate.value,// 进行中：明天，已结束：选择的日期
     status: '1', // 作业状态：1-已发布
-    orderby: 'concat(deaddate,uniquekey) DESC',
+    // orderby: 'concat(deaddate,uniquekey) DESC',
+    orderby: 'uniquekey DESC',
     pageSize: 100
   })
   const curWorkList = response.rows

src/renderer/src/views/classTask/classTaskAssign.vue

@@ -0,0 +1,527 @@
+<template>
+  <div class="page-classTaskAssign flex">
+    <el-menu
+      default-active="1"
+      class="el-menu-vertical-demo"
+      :collapse="isCollapse"
+    >
+      <!--左侧 教材 目录-->
+      <div v-if="!isCollapse" style="height: 100%;overflow: hidden;"> 
+        <ChooseTextbook @change-book="getData" @node-click="getData" />
+      </div>
+    </el-menu>
+
+    <div class="page-right" :style="{'margin-left': isCollapse ? '0' : '20px'}">
+      <!-- 标题 -->
+      <el-row style="align-items: center; margin-bottom: 0px; flex: 0 0 auto">
+        <el-col :span="12" style="padding-left: 20px; text-align: left;">
+          <div class="unit-top-left" @click="isCollapse = !isCollapse">
+            <i v-if="!isCollapse" class="iconfont icon-xiangzuo"></i>
+            <span>课程目录</span>
+            <i v-if="isCollapse" class="iconfont icon-xiangyou"></i>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="classtype-right">
+            <!-- <el-button type="primary" icon="Postcard" @click="handleNewClassWorkDialog" style="margin-left: 20px; margin-top: 10px">{{initDataProps.queryType!=='single'?'设计新作业':'设计新活动'}}</el-button>
+            <el-button v-if="initDataProps.queryType!=='single'" type="success" icon="Promotion" @click="handleTaskAssignToAllClass()" style="margin-left: 20px; margin-top: 10px">一键推送</el-button>
+            <el-button type="danger" icon="delete" @click="handleDelete" style="margin-left: 20px; margin-top: 10px">删除</el-button> -->
+            <el-button type="primary" @click="handleNewClassWorkDialog" style="margin-left: 20px; margin-top: 10px">设计新作业</el-button>
+            <el-button type="success" @click="handleTaskAssignToAllClass()" style="margin-left: 20px; margin-top: 10px">一键推送</el-button>
+            <el-button type="danger" @click="handleDelete" style="margin-left: 20px; margin-top: 10px">删除</el-button>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 作业类型:内容 -->
+      <div style="flex: 1;overflow: hidden;"> 
+        <el-table
+          ref="taskTable"
+          :data="taskList"
+          :tree-props="{checkStrictly: true}"
+          row-key="id"
+          style="width: 100%;height: 100%; border: 1px solid #dcdfe6;border-radius: 3px;flex:1"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column type="selection"  min-width="10%" align="center" :selectable="selectable"/>
+          <el-table-column :label="props.initDataProps.queryType!=='single'?'作业名称':'活动名称'" prop="uniquekey" min-width="18%" align="center">
+          </el-table-column>
+          <el-table-column :label="props.initDataProps.queryType!=='single'?'作业类型':'活动类型'" align="center" prop="worktype" min-width="20%" sortable>
+            <template #default="scope">
+              <el-tag :type="scope.row.workclass" size="large">{{ scope.row.worktype }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="props.initDataProps.queryType!=='single'" label="作业内容" align="center" min-width="20%">
+            <template #default="scope">
+              <div style="border: 1px solid #ccc; width: 100%; height: auto; display: flex; justify-content: space-between; padding-left: 10px">
+                <div style="display: flex; margin-top: 5px">
+                  <el-tag v-if="scope.row.entpcourseworklistarray.length>0" effect="dark" type="warning" size="small" style="margin-left: 5px" round>{{ scope.row.entpcourseworklistarray.length }}</el-tag>
+                </div>
+                <div>
+                  <div v-if="scope.row.status == '10'">
+                    <el-button v-hasPermi="['teaching:classwork:edit']"  text @click="newHandleWorkEdit2ClassWorkQuizAdd(scope.row, scope.$index)">编辑</el-button>
+                  </div>
+                  <div v-else>
+                    <el-button v-hasPermi="['teaching:classwork:edit']"  text @click="handleWorkEdit(scope.row, scope.$index)">查看详情</el-button>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="props.initDataProps.queryType!=='single'" label="作业说明" align="center" min-width="36%">
+            <template #default="scope">
+              <div style="border: 1px solid #ccc; width: 100%; height: auto; display: flex; justify-content: space-between; padding-left: 10px">
+                <div style="display: flex; margin-top: 5px">
+                  <div v-html="scope.row.title" style="max-width: 200px" class="singe-line"></div>
+                </div>
+                <div>
+                  <div v-if="scope.row.status == '10'">
+                    <el-button text  @click="handleWorkTitleEdit(scope.row, scope.$index)" v-hasPermi="['teaching:classwork:edit']">编辑</el-button>
+                  </div>
+                  <div v-else>
+                    <el-button text  @click="handleWorkTitleEdit(scope.row, scope.$index)" v-hasPermi="['teaching:classwork:edit']">查看详情</el-button>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="props.initDataProps.queryType!=='single'" label="创建时间" align="center" prop="timestamp" min-width="30%" sortable>
+            <template #default="scope">
+              <el-tag size="large">{{ scope.row.timestamp }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="props.initDataProps.queryType!=='single'" label="推送配置" align="left" min-width="16%">
+            <template #default="scope">
+              <div style="display: flex">
+                <el-button link icon="Setting" @click="scope.row.status == '10' ? openClassWorkConfigDialog(scope.row, -1,'item') : ''" :style="formatStyle(scope.row)" v-hasPermi="['teaching:classwork:edit']">{{scope.row.status == '10'? '推送' : '已推送'}}</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 作业内容编辑 -->
+      <el-dialog v-model="workEdit" title="作业内容详情" width="90%" append-to-body>
+        <div v-if="currentTag=='学习目标定位'" style="display: flex;">
+          <degreeevolution :attainmentList="attainmentList" :show-class="true" :courseQualityList="courseQualityList"/>
+        </div>
+        <!--  课标研读 目标设定 教材研读 框架梳理 学科定位 -->
+
+        <div v-if="currentTag=='习题训练'" :style="{'padding': '15px', 'overflow': 'auto'}">
+          <el-table :data="workConfObj.quizlist" style="width: 100%;">
+            <el-table-column type="index" width="60" />
+            <el-table-column label="题目内容" align="left" >
+              <template #default="scope">
+                <div>
+                  <div v-html="scope.row.titleFormat" style="overflow: hidden; text-overflow: ellipsis; font-weight:700"></div>
+                  <div v-html="scope.row.workdescFormat" style="overflow: hidden; text-overflow: ellipsis; margin-top: 6px;"></div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="分值" align="center" width="180">
+              <template #default="scope">
+                <el-input-number v-model="scope.row.score" :min="1" :max="100" :disabled="taskParams.viewkey=='作业反馈'||checkTaskAssigned(currentTask)"></el-input-number >
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="100">
+              <template #default="scope">
+                <el-button @click="handleWorkConfigQuizMinus(scope.$index)" :disabled="taskParams.viewkey=='作业反馈'||checkTaskAssigned(currentTask)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
+          <div style="display: flex">
+            <el-button v-if="currentTag=='习题训练'" style="margin-right: auto" type="primary"
+                @click="handleWorkEdit2ClassWorkQuizAdd" :disabled="taskParams.viewkey=='作业反馈'||checkTaskAssigned(currentTask)">添加作业</el-button>
+            <el-button type="primary" style="margin-left: auto" @click="submitStudy('submit')"
+                :disabled="taskParams.viewkey=='作业反馈'||checkTaskAssigned(currentTask)">确 定</el-button>
+          </div>
+
+        </div>
+      </el-dialog>
+
+      <!-- 作业说明编辑 -->
+      <el-dialog v-model="currentWorkEdit.workTitleEdit" title="作业说明编辑" width="70%" append-to-body>
+        <el-input v-model="currentTitle" type="textarea" rows="5" placeholder="请输入作业说明" :disabled="taskParams.viewkey=='作业反馈'||checkTaskAssigned(currentTask)"/>
+        <div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
+          <el-button type="primary" @click="submitWorkTitle('submit')"
+              :disabled="taskParams.viewkey=='作业反馈'||checkTaskAssigned(currentTask)">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRaw,watch, reactive } from 'vue'
+import ChooseTextbook from '@/components/choose-textbook/index.vue'
+import { homeworklist, listEntpcoursework, listClassworkeval } from '@/api/teaching/classwork'
+
+import { useGetHomework } from '@/hooks/useGetHomework'
+import { processList } from '@/hooks/useProcessList'
+
+import { getCurrentTime } from '@/utils/date'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore().user
+
+const props = defineProps({
+  initDataProps: {
+    type: Object,
+    default: function () {
+      return {}
+    }
+  }
+})
+// ---------------------------------------------------
+
+const isCollapse = ref(false)
+
+
+const courseObj = reactive({
+  // 课程相关参数: 教材id,单元id,章节id,课程名称
+  textbookId: '',
+  levelFirstId: '',
+  levelSecondId: '',
+  coursetitle:'',
+  node: null, // 选择的课程节点
+  //
+})
+
+const taskList = ref([]);
+const loading = ref(false);
+
+// 作业编辑
+const workEdit = ref(false);
+const currentWorkEdit = reactive({
+  workTitleEdit: false,
+  currentTask: {},
+  currentTitle: '',
+  currentIndex: 0,
+})// 当前作业编辑
+const currentTag = ref('');// 当前作业类型
+
+const workConfObj = reactive({
+  quizlist: [], // 习题list
+});
+
+
+// ---------------------------------------------------
+
+
+// 查询
+const getData = (data) => {
+  const { textBook, node } = data
+  let textbookId = textBook.curBookId
+  let levelSecondId = node.id
+  let levelFirstId
+  if (node.parentNode) {
+    levelFirstId = node.parentNode.id
+  } else {
+    levelFirstId = node.id
+    levelSecondId = ''
+  }
+
+  courseObj.textbookId = textbookId  // 版本
+  courseObj.levelFirstId = levelFirstId  // 单元
+  courseObj.levelSecondId = levelSecondId // 章节
+  courseObj.coursetitle = node.itemtitle  // (单元/章节) 名称
+  courseObj.node = node; // 保存当前节点
+
+  // 头部 教材分析打开外部链接需要当前章节ID
+  localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
+}
+
+/**
+ * 1.获取作业列表
+ */
+const getTaskList = async () => {
+  const { chapterId } = await useGetHomework(courseObj.node)
+    // this.entpcourseid = chapterId
+  // 新版查询方式
+  homeworklist({entpcourseid: chapterId, orderby: "concat(deaddate,uniquekey) DESC" , edituserid: userStore.userId, pageSize: 100}).then(res => {
+    let model = [];
+    let mission = [];
+
+    for (let item of res.rows){
+      item.taskconfig = [];
+
+      // 赋值默认值
+      if (item.timelength == null) {
+        item.timelength = 1;
+      }
+      if (item.weights == null) {
+        item.weights = 1;
+      }
+
+      // 处理任务类型的UI
+      if (item.worktype == '学习目标定位') {
+        item.workclass = 'success';
+        item.workcodesList = JSON.parse(item.workcodes);
+      } else if (item.worktype == '教材研读') {
+        item.workclass = 'primary';
+      } else if (item.worktype == '框架梳理') {
+        item.workclass = 'warning';
+      } else if (item.worktype == '学科定位') {
+        item.workclass = 'info';
+      } else if (item.worktype == '习题训练') {
+        item.workclass = 'danger';
+      } else {
+        item.workclass = 'primary';
+      }
+      // 如果是习题训练任务，则检查一共有多少道
+      if (item.entpcourseworklist != '') {
+        item.entpcourseworklistarray = JSON.parse('['+item.entpcourseworklist+']');
+      } else {
+        item.entpcourseworklistarray = [];
+      }
+
+      // 根据状态，过滤之前的旧任务
+      if (item.status == '10') {
+        // 任务状态为模板, 直接添加
+        model.push(item);
+        continue;
+      }
+      else if (item.status == '1') {
+        // 任务状态为已推送的任务, 则格式化推送学生数据
+        let ss = [];
+        if (item.classworkdatastudentids != null) {
+          ss = JSON.parse('['+ item.classworkdatastudentids+']');
+        }
+        const js = {
+          id: item.id,
+          classid: item.classid,
+          classcaption: item.classcaption,
+          parentid: 0,
+          worktype: '',
+          workkey: item.workkey,
+          worktag: '',
+          entpcourseid: 0,
+          evalid: 0,
+          edusubject: '',
+          edudegree: '',
+          workdate: '',
+          title: '',
+          workcodes: '',
+          studentlist: ss,
+          deaddate: item.deaddate,
+          timelength: item.timelength,
+          weights: item.weights,
+          feedtype: item.feedtype
+        }
+        item.taskconfig.push(js);
+        mission.push(item);
+      }
+    }
+
+    // 再根据父子关系重新排序
+    let list = [];
+    for (let item of model){
+      item.children = [];
+      for (let child of mission) {
+        if (item.id == child.parentid) {
+          item.children.push(child);
+        }
+      }
+      list.push(item);
+    }
+    console.log(list,'========================')
+    taskList.value = list;
+    loading.value = false;
+  })
+}
+
+
+// 【编辑/查看】作业说明
+const handleWorkTitleEdit = (row, index) => {
+  currentWorkEdit.workTitleEdit = true;
+  currentWorkEdit.currentTask = row;
+  currentWorkEdit.currentTitle = row.title;
+  currentWorkEdit.currentIndex = index;
+};
+
+
+// 编辑作业内容
+const handleWorkEdit = (row, index) =>{
+  workEdit.value = true
+  // this.currentTask = row;
+  // this.currentIndex = index;
+  currentTag.value = row.worktype;
+  this.attainmentList = row.workcodesList?.attlist;
+  this.courseQualityList = row.workcodesList?.qualist;
+  if (row.worktype == '框架梳理') {
+    this.$nextTick(()=>{
+      this.getFlowData()
+    })
+  }
+  // if (currentTag.value.worktype == '学科定位') {
+  //   // TODO 后续需要再迁
+  //   rootid:entpcoursework里的id  rootid: row.entpcourseworklistarray[0].id,
+  //   listEvaluationclue({ cluegroup: 'graph', edusubject: this.courseObj.edusubject, pageSize: 1000 }).then((res) => {
+  //     var glist = [];
+  //     for (var i = 0; i < res.rows.length; i++) {
+  //       glist.push(res.rows[i]);
+  //     }
+  //     this.isEditable = false;
+  //     this.preKnowList = glist;
+  //     this.$refs.jsMind.updateFromParent(this.preKnowList, this.courseObj.edusubject);
+  //     this.$refs.jsMind.initJsMindMap();
+  //   })
+  // }
+
+  // // 课标研读 目标设定 教材研读 框架梳理 学科定位
+  if (currentTag.value.worktype == '习题训练') {
+    var idlist = JSON.parse('['+row.entpcourseworklist+']');
+    var ids = [];
+    for (var i=0; i<idlist.length; i++) {
+      ids.push(idlist[i].id);
+    }
+
+    listEntpcoursework({ids: ids.join(","), pageSize: 50}).then(idres => {
+      for (var i=0; i<idlist.length; i++) {
+        for (var j=0; j<idres.rows.length; j++) {
+          if (idres.rows[j].id == idlist[i].id) {
+            idres.rows[j].classworkevalid = idlist[i].classworkevalid;
+          }
+        }
+      }
+      workConfObj.quizlist = idres.rows;
+
+      // 获取当前题目的分值
+      listClassworkeval({workid: row.id, workdataid: 0, pageSize: 50}).then(idres => {
+        idres.rows.forEach(item => {
+          const quizItem = workConfObj.quizlist.find(quiz => quiz.id === item.entpcourseworkid);
+          if (quizItem) {
+            quizItem.score = item.score;
+            quizItem.scoreOrigin = item.score;
+            quizItem.evalid = item.id;
+          }
+        });
+      });
+
+      // 格式化试题信息
+      processList(workConfObj.quizlist);
+    })
+  }
+
+  // 常规作业、课堂展示
+  if(currentTag.value.worktype == '常规作业' || row.worktype == '课堂展示'){
+    console.log(row,'常规作业-课堂展示');
+      // 老师布置的附件 workcodes ？？ 与批改哪里这个字段值不一样
+    if(row.workcodes != ''){
+      const teachWorkFileList = JSON.parse(row.workcodes);
+      teachWorkFileList&&teachWorkFileList.forEach(item => {
+        if(item.name.indexOf('jpg') > -1 || item.name.indexOf('jpeg') > -1 || item.name.indexOf('png') > -1){
+          this.teachImageList.push(item);
+        }else{
+          this.teachFileList.push(item);
+        }
+      })
+      this.teacherFeedContentList.push(teachWorkFileList);
+    }
+  }
+};
+
+
+/**
+ * 表格子项背景暗调
+ */
+const tableRowClassName=({row,rowIndex})=>{
+  if (row.status == '10') {
+    //父模版
+    return 'father-row'
+  } else {
+    // 子项
+    return 'son-row'
+  }
+};
+const selectable=(row, index)=>{
+  return row.status == '10';
+};
+
+ //格式化配置的样式
+ const formatStyle = (row) =>{
+  //没有taskconfig,就是灰色
+  //所有的taskconfig的id都不是0，绿色
+  //只要有一个taskconfig的id是0，就是红色
+  if (!row.taskconfig|| row.taskconfig.length === 0) {
+    return {};
+  }
+  for (var i=0; i<row.taskconfig.length; i++) {
+    if (row.taskconfig[i].id == 0) {
+      return {backgroundColor: '#fde2e2',color: '#f56c6c'};
+    }
+  }
+  return {backgroundColor: '#e1f3d8',color: '#67c23a'};
+};
+
+
+
+
+onMounted(() => {
+})
+
+watch(() => courseObj.node, (newVal) => {
+  console.log(courseObj,'课程选择')
+  // 习题资源
+  getTaskList();
+})
+
+</script>
+
+<style>
+  .el-table .hidden-row {
+    display: none !important;
+    /* color: #ccc !important; */
+  }
+  .el-table .father-row {
+    --el-table-tr-bg-color: #fff;
+  }
+  .el-table .son-row {
+    --el-table-tr-bg-color: #f0f0f08a;
+  }
+</style>
+
+<style lang="scss" scoped>
+.page-classTaskAssign {
+  padding-top: 10px;
+  height: 100%;
+  overflow: hidden;
+
+  .el-menu--collapse {
+    width: 0px;
+    min-height: 100%;
+  }
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 300px;
+    min-height: 100%;
+  }
+  .unit-top-left {
+    cursor: pointer;
+
+    .icon-xiangzuo {
+      margin-right: 5px;
+    }
+  }
+
+  .classtype-right{
+    padding: 5px;
+    margin-bottom: 0px !important;
+  }
+  .el-form-item--default{
+    margin-bottom: 0px !important;
+  }
+
+  .page-right {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-left: 20px;
+    height: 100%;
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
+  }
+}
+</style>

src/renderer/src/views/classTask/container/item-dialog-score.vue

@@ -1,7 +1,7 @@
 <template>
   <el-form ref="classWorkFormScoreRef" :model="classWorkFormScore">
     <!-- <div class="teacher_content" :style="{ height: dialogProps.maxheight + 'px' }"> -->
-    <div class="teacher_content" :style="{ height: '75vh' }">
+    <div class="teacher_content" :style="{ height: '72vh' }">
       <div style="font-size: 18px; width: 100%; padding: 5px 10px" class="sticky">
         {{ classWorkFormScore.name }} 答题详情
       </div>
@@ -88,8 +88,11 @@
                       <el-col :span="6" style="padding: 10px">
                         <!-- <span>学生答案：{{ stuItem.feedcontent }}</span> -->
                         <span>学生答案：
-                          <span v-if="stuItem.feedcontent !=''" style="background-color: red; color: white; padding: 0 5px; border-radius: 5px;">
+                          <span 
-                            {{ formatFeedContent(stuItem, quItem) }} 
+                            v-if="stuItem.feedcontent !=''" 
+                            style="background-color: red; color: white; padding: 0 5px; border-radius: 5px;"
+                            v-html="formatFeedContent(stuItem, quItem)"
+                          >
                           </span>
                         </span>
                       </el-col>
@@ -385,7 +388,7 @@
       v-model="fileReadopen"
       title="文件预览"
       width="80%"
-      :style="{ height: '75vh' }"
+      :style="{ height: '72vh' }"
       append-to-body
     >
       <div class="file-read-dialog">

src/renderer/src/views/classTask/container/item-dialog.vue

@@ -58,7 +58,7 @@
     <!-- 如果当前学习没有试题  :height="mainHeight"-->
     <div
       v-if="classWorkAnalysis.view == 'studentview'"
-      style="width: 100%; height:75vh; "
+      style="width: 100%; height:73vh; "
       class="clwk_dialog_view"
     >
       <div class="view_table">
@@ -443,6 +443,9 @@ const getStudentClassWorkDataDetail = (row) => {
           // <el-table-column label="参考答案" prop="rightanswer"
           //新增了 复合题、主观题（背景+小题目） 题目标题优化一下
           wevalres.rows[w].worktitle = wevalres.rows[w].worktitle.replace(/!@#\$%/g, '')
+
+          // 将feedcontent中的\r替换为<br />
+          wevalres.rows[w].feedcontent = wevalres.rows[w].feedcontent.replace(/(?<!\\)\n/g, '<br />');    //替换\n而不替换\\n 为 \\n
         }
       }
       classWorkAnalysis.activeStudentQuizlist = wevalres.rows
@@ -523,6 +526,7 @@ const escapeHtmlQuotes = (str) => {
   // 后端已replace双引号, 故前端不用在处理
   const regex1 = /\\+/g;  // 匹配多个反斜杠
   let result = str.replace(regex1, '\\');
+  result = str.replace(/(?<!\\)\n/g, '<br />');    //替换\n而不替换\\n 为 \\n
 
   return result;
 }
@@ -654,19 +658,19 @@ defineExpose({
   .clwk_dialog_view {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: flex-start;
-    // align-items: center;
     overflow: hidden;
   }
   .view_table {
-    flex: 1;
+    flex: 0 0 auto;
     height: 100%;
-    overflow-y: auto;
+    overflow: hidden;
   }
   .view_teachrting {
-    flex: 2;
+    flex: 1;
     height: 100%;
-    overflow-y: auto;
+    // overflow-y: auto;
+    overflow: hidden;
   }
 }
 

src/renderer/src/views/classTask/newClassTask.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="page-resource flex">
+  <div class="page-newcalsetask flex">
     <el-menu
       default-active="1"
       class="el-menu-vertical-demo"
       :collapse="isCollapse"
     >
       <!--左侧 教材 目录-->
-      <div v-if="!isCollapse"> 
+      <div v-if="!isCollapse" style="height: 100%;overflow: hidden;"> 
         <ChooseTextbook @change-book="getData" @node-click="getData" />
       </div>
     </el-menu>
 
     <div class="page-right" :style="{'margin-left': isCollapse ? '0' : '20px'}">
       <!-- 标题 -->
-      <el-row style="align-items: center; margin-bottom: 0px">
+      <el-row style="align-items: center; margin-bottom: 0px; flex: 0 0 auto">
         <el-col :span="12" style="padding-left: 20px; text-align: left;">
           <div class="unit-top-left" @click="isCollapse = !isCollapse">
             <i v-if="!isCollapse" class="iconfont icon-xiangzuo"></i>
-            <span>作业范围</span>
+            <span>课程目录</span>
             <i v-if="isCollapse" class="iconfont icon-xiangyou"></i>
           </div>
         </el-col>
@@ -30,33 +30,19 @@
         </el-col>
       </el-row>
       <!-- 作业类型:内容 -->
-      <task-type-view :bookobj="courseObj" />
+      <task-type-view :bookobj="courseObj" :uniquekey="classWorkForm.uniquekey" style="flex: 1; overflow: hidden;"/>
     </div>
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref, toRaw,watch, reactive } from 'vue'
-// import useResoureStore from './store'
 import ChooseTextbook from '@/components/choose-textbook/index.vue'
-import Third from '@/components/choose-textbook/third.vue'
-// import ResoureSearch from './container/resoure-search.vue'
-// import ResoureList from './container/resoure-list.vue'
-// import ThirdList from './container/third-list.vue'
 import TaskTypeView from '@/views/classTask/container/newTask/taskTypeView.vue'
-import uploadDialog from '@/components/upload-dialog/index.vue'
-// import { createWindow } from '@/utils/tool'
-import { useToolState } from '@/store/modules/tool'
 import { getCurrentTime } from '@/utils/date'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore().user
 
-// const sourceStore = useResoureStore()
-const isDialogOpen = ref(false)
-const toolStore = useToolState()
-const openDialog = () => {
-  isDialogOpen.value = true
-}
 // ---------------------------------------------------
 const classWorkForm =  reactive({
   // uniquekey:  userStore.edusubject+'-' + getCurrentTime('MMDD')+'-'+(this.taskList.length+1),
@@ -72,6 +58,7 @@ const courseObj = reactive({
   levelFirstId: '',
   levelSecondId: '',
   coursetitle:'',
+  node: null, // 选择的课程节点
   //
 })
 
@@ -95,6 +82,7 @@ const getData = (data) => {
   courseObj.levelFirstId = levelFirstId  // 单元
   courseObj.levelSecondId = levelSecondId // 章节
   courseObj.coursetitle = node.itemtitle  // (单元/章节) 名称
+  courseObj.node = node; // 保存当前节点
 
   // 头部 教材分析打开外部链接需要当前章节ID
   localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
@@ -116,9 +104,10 @@ const init = () => {
 </script>
 
 <style lang="scss" scoped>
-.page-resource {
+.page-newcalsetask {
   padding-top: 10px;
   height: 100%;
+  overflow: hidden;
 
   .el-menu--collapse {
     width: 0px;

src/renderer/src/views/classTaskAssign/index.vue

@@ -1,242 +0,0 @@
-<template>
-  <div v-loading="isLoading" class="page-resource flex">
-    <!--左侧 教材 目录-->
-    <ChooseTextbook @change-book="getData" @node-click="getData" />
-    <!--右侧 作业设计/布置 列表 -->
-    <div class="page-right">
-      <div class="prepare-body-header">
-        <el-button @click="handleOutLink('design')">作业设计</el-button>
-          <el-button @click="handleOutLink('assign')">作业布置</el-button>
-          <label style="font-size: 15px; margin-left: 20px">共{{ listClassWork.length }}个作业</label>&nbsp;
-          <el-select
-            v-model="queryParams.workType"
-            placeholder="作业类型"
-            size="small"
-            @change="queryClassWorkByParams"
-            style="width: 100px; margin-left: auto;"
-          >
-            <template v-for="(item, index) in listWorkType" :key="index">
-              <el-option :label="item.label" :value="item" />
-            </template>
-          </el-select>
-      </div>
-      <div class="prepare-work-wrap">
-        <FileListItem
-          v-for="(item, index) in desingDataList"
-          :key="index"
-          :item="item"
-          :index="index"
-          @on-set="openSet"
-          @on-delhomework="delhomework"
-        >
-        </FileListItem>
-      </div>
-    </div>
-    <SetHomework v-model="setAssingDialog" :entpcourseid="entpcourseid" :row="curClassWork" />
-  </div>
-</template>
-
-
-<script setup>
-import {ref, onMounted, reactive, watch, nextTick, getCurrentInstance, computed} from 'vue'
-import { ElMessage } from 'element-plus'
-import { homeworklist, delClasswork } from '@/api/teaching/classwork'
-import useResoureStore from '@/views/resource/store'
-import useUserStore from '@/store/modules/user'
-import useClassTaskStore from "@/store/modules/classTask";
-import outLink from '@/utils/linkConfig'
-
-import ChooseTextbook from '@/components/choose-textbook/index.vue'
-import FileListItem from '@/views/prepare/container/file-list-item.vue'
-import SetHomework from '@/components/set-homework/index.vue'
-
-
-const { ipcRenderer } = require('electron')
-const userStore = useUserStore().user
-const classTaskStore = useClassTaskStore()
-const {proxy} = getCurrentInstance();
-const sourceStore = useResoureStore();
-// 当前选中的章节或单元
-const curNode = ref({});   
-const isLoading = ref(false);
-const listClassWork = ref([]);
-const listWorkType = ref(['不限', '习题训练', '框架梳理', '课堂展示', '常规作业']);
-const isOpenHomework = ref(false);
-const curClassWork = ref({});
-const setAssingDialog = ref(false);
-const entpcourseid = ref(0);
-
-const queryParams = reactive({
-  workType: '不限',
-  total: 0,
-});
-
-
-
-/**
- * @desc: 更新作业任务
- * @return: {*}
- * @param {*} computed
- */
-const desingDataList = computed(() => {
-  return listClassWork.value; 
-})
-
-
-/**
- * @desc: 选中单元章节后的回调, 获取单元章节信息
- * @return: {*}
- * @param {*} data
- */
- const getData = async (data) => {
-  if (curNode.value.id == data.node.id) {
-    return;
-  }
-  // 1. 情况原作业集合并切换章节
-  curNode.value = data.node;
-  listClassWork.value = [];
-  isLoading.value = true;
-  console.log(curNode.value);
-  
-  // 2. 作业设计模板
-  await getClassWorkList();
-
-  isLoading.value = false;
-}
-
-/**
- * @desc: 根据作业类型查询作业模板
- * @return: {*}
- */
-const queryClassWorkByParams = async () => {
-  // 1.先清空原作业集合
-  listClassWork.value = [];
-  isLoading.value = true;
-
-  // 2.根据[作业类型]查询
-  const params = { 
-    worktype: queryParams.workType,     // 此处多了[作业类型]参数
-  }
-  if (queryParams.workType == '不限') {
-    delete params.worktype;
-  }
-  await getClassWorkList(params);
-  isLoading.value = false;
-}
-
- /**
-  * @desc: 获取作业设计模板
-  * @return: {*}
-  */
- const getClassWorkList = async(params) => {
-  // 班级作业数据，包含多个班级 homeworklist
-  let query = { 
-    evalid: curNode.value.id, 
-    edituserid: userStore.userId, 
-    edustage: userStore.edustage, 
-    edusubject: userStore.edusubject, 
-    status: '10', 
-    orderby: 'concat(worktype,uniquekey) DESC', 
-    pageSize: 100, 
-  }
-  // 将形参更新至query
-  if (params !== null && params !== undefined) {
-    query = {...query, ...params};
-  }
-  const res = await homeworklist(query);
-  if (res.rows && res.rows.length > 0) {
-    for (const item of res.rows) {
-      item.fileShowName = item.uniquekey;
-    }
-    listClassWork.value = res.rows;
-    //TODO： 这里没分页，貌似这个 total 不重要，后续看
-    queryParams.total = res.total
-  }
-}
-
-/**
- * @desc: 作业设计/布置
- * @return: {*}
- * @param {*} key design-设计 assign-布置. 当key为设计时, url需再增加openDialog字段以便自动打开[设计新作业]
- */
-const handleOutLink = (key) => {
-  isOpenHomework.value = true;
-  // key 对应的 linkConfig.js 外部链接配置
-  let configObj = outLink()['homeWork']
-  let fullPath = configObj.fullPath;
-
-  //打开作业url增加unitId 章节ID
-  let unitId = curNode.value.id;
-  fullPath += `&unitId=${unitId}`;
-  
-  // 作业设计时, 再增加参数openDialog以自动打开教师端的[设计新作业]
-  if (key == 'design') {
-    fullPath += `&openDialog=newClassTask`;
-  }
-  // 通知主进程
-  ipcRenderer.send('openWindow', {
-    key,
-    fullPath: fullPath,
-    cookieData: { ...configObj.data }
-  })
-}
-
-
-const openSet = (item) => {
-  // 打开布置作业窗口
-  curClassWork.value = item;
-  setAssingDialog.value = true;
-}
-
-const delhomework = (item) => {
-  isLoading.value = true
-  delClasswork(item.id)
-    .then(async(res) => {
-      ElMessage.success('删除成功');
-      isLoading.value = false;
-      await getClassWorkList();
-    })
-    .catch(() => {
-      isLoading.value = false;
-    })
-}
-
-
-
-
-</script>
-
-
-<style lang="scss" scoped>
-.page-resource {
-  padding-top: 10px;
-  height: 100%;
-
-  //右侧栏
-  .page-right {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    margin-left: 20px;
-    height: 100%;
-    background: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
-
-    .prepare-body-header {
-      padding: 10px;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
-
-    .prepare-work-wrap{
-      flex: 1;
-      overflow: auto;
-    }
-    
-  }
-}
-</style>

src/renderer/src/views/desktop/index.vue

@@ -106,6 +106,10 @@ const menuList = [{
         icon: 'icon-jiaoxuefansi',
         isOuter: true,
         path: '/teaching/classtaskassign?titleName=作业布置&openDialog=newClassTask',
+        // path: '/newClassTask'
+        //path: '/classTaskAssign'
+        //isOuter: true,
+        //path: '/teaching/classtaskassign?titleName=作业布置&&openDialog=newClassTask'
         id: '2-1'
       },
       {
@@ -114,6 +118,7 @@ const menuList = [{
         isOuter: true,
         path: '/teaching/classtaskassign?titleName=作业布置',
         id: '2-2'
+        // path: '/classTaskAssign'
       },
       {
         name: '作业批改',

src/renderer/src/views/teach/standardAnalysis/index.vue

@@ -4,14 +4,14 @@
     <div class="page-con-left">
       <div class="stand-head" ref="headref">
         <div class="stand-head-left">
-          <el-image class="imges" src="https://file.ysaix.com:7868//src/assets/images/高中语文必修上册.jpg" />
+          <el-image class="imges" :src="bookInfo ? bookInfo.avartar : ''" />
         </div>
         <div class="stand-head-right">
           <div class="stand-head-right-tit">{{booktitle}}</div>
           <i class="iconfont icon-yidongdaozu stand-head-right-icon" @click="dialogVisible = true"></i>
           <div class="stand-head-right-row">
             <div class="stand-head-right-row-time">更新2024.9.10</div>
-            <el-switch class="stand-head-right-row-switch" v-model="isOpenClass" inline-prompt active-text="公开" inactive-text="非公" />
+            <!-- <el-switch class="stand-head-right-row-switch" v-model="isOpenClass" inline-prompt active-text="公开" inactive-text="非公" /> -->
           </div>
         </div>
       </div>
@@ -68,8 +68,10 @@
         </div>
       </div>
     </div>
-    <el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550">
+    <el-dialog v-model="dialogVisible" title="切换教材" append-to-body  width="550">
-      <ChooseTextbook @change-book="getData" @node-click="getData" />
+      <div class="booklist">
+        <div :class="{'item': true,'active': booksel === idx}" v-for="item,idx in bookList" :key="idx" @click="bookChange(item)">{{item.edustage + item.edusubject}}</div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -82,7 +84,7 @@ import { listEvaluationclue } from '@/api/teaching/classwork'
 import { uploadServer, getJSONFile } from '@/utils/common'
 import { ElNotification } from 'element-plus'
 import ChooseTextbook from "@/components/choose-textbook/index.vue";
-
+import { listEvaluation } from '@/api/classManage/index'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 const sourceStore = useResoureStore()
@@ -101,6 +103,10 @@ const searchref = ref(null);
 const listHeight = ref(0);
 const dialogVisible = ref(false);
 const booktitle = ref('');
+const bookInfo = ref(null);
+const booksel = ref(0);
+const bookList = ref([])
+
 
 const searchOptions = [{
     value: '0',
@@ -109,7 +115,7 @@ const searchOptions = [{
     value: '1',
     label: '按内容量',
   }];
-const standList = ref([])
+const standList = ref([]);
 const showData = ref([]);
 
 //查询课标分析列表
@@ -234,16 +240,41 @@ const getData = (data) => {
   // 头部 教材分析打开外部链接需要当前章节ID
   localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
 }
-onMounted(() => {
+// 获取学科
-
+const getAllSubject = async () => {
+  const { rows } = await listEvaluation({ itemkey: "subject", pageSize: 500 })
+  const { edustage, edusubject } = userStore.user;
+  rows && rows.map(item => {
+    if(item.edustage === edustage && item.edusubject === edusubject){
+      bookInfo.value = {...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar}
+    }
+    if(item.fileurl !== ''){
+      bookList.value.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar})
+    }
+  })
+  booksel.value = bookList.value.findIndex(item => item.edustage === edustage && item.edusubject === edusubject)
+}
+const bookChange = async (item, idx) => {
+  booksel.value = idx
+  bookInfo.value = {...item}
+  booktitle.value = `${item.edustage + item.edusubject}课程标准`
+  pdfUrl.value = '';
+  const filepath = import.meta.env.VITE_APP_RES_FILE_PATH + item.fileurl.replace('.txt','.pdf')
+  await loadPdfAnimation(filepath)
+  dialogVisible.value = false
+}
+const loadPdfAnimation = (path) => {
+  const timer = setTimeout(() => {
+    pdfUrl.value = path
+    clearTimeout(timer);
+  },2000)
+}
+onMounted(async () => {
+  await getAllSubject();
   const { edustage, edusubject } = userStore.user;
   booktitle.value = `${edustage + edusubject}课程标准`
   const filePath = `${import.meta.env.VITE_APP_RES_FILE_PATH}${edustage}-${edusubject}-课标.pdf`
-  const timer = setTimeout(() => {
+  await loadPdfAnimation(filePath)  
-    pdfUrl.value = filePath
-    clearTimeout(timer);
-  },2000)
-  
   if(cardref.value && headref.value){
     const cardH = cardref.value.offsetHeight;
     const headh = headref.value.offsetHeight;
@@ -492,4 +523,23 @@ onMounted(() => {
     }
   }
 }
+.booklist{
+  width: 100%;
+  height: 500px;
+  padding-top: 1px;
+  overflow: auto;
+  .item{
+    width: 100%;
+    height: auto;
+    padding: 8px 16px;
+    background-color: #ffffff;
+    border-top: 1px solid #f1f1f1;
+    font-size: 14px;
+    color: #3b3b3b;
+  }
+  .active{
+    background-color: #409eff;
+    color: #ffffff;
+  }
+}
 </style>