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

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1723099371232') format('woff2'),
+  src: url('iconfont.woff2?t=1723186593107') format('woff2'),
-       url('iconfont.woff?t=1723099371232') format('woff'),
+       url('iconfont.woff?t=1723186593107') format('woff'),
-       url('iconfont.ttf?t=1723099371232') format('truetype'),
+       url('iconfont.ttf?t=1723186593107') format('truetype'),
-       url('iconfont.svg?t=1723099371232#iconfont') format('svg');
+       url('iconfont.svg?t=1723186593107#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiangzuo:before {
+  content: "\e64d";
+}
+
 .icon-kechengziyuan1:before {
   content: "\e647";
 }

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

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "6176588",
+      "name": "向左",
+      "font_class": "xiangzuo",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
     {
       "icon_id": "3053509",
       "name": "课程资源",
@@ -630,7 +637,7 @@
     },
     {
       "icon_id": "22779610",
-      "name": "数译_教学管理",
+      "name": "教学管理",
       "font_class": "shuyi_jiaoxueguanli",
       "unicode": "e678",
       "unicode_decimal": 59000

src/renderer/src/assets/iconfont/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="xiangzuo" unicode="&#58957;" d="M774.89 725L399.08 380.75l375.81-344.21a39.28 39.28 0 0 0 13.11-29c0-36.51-48.19-54.79-76.38-29L335.8 322.8c-34.94 32-34.94 83.9 0 115.9l375.82 344.22c28.19 25.81 76.38 7.53 76.38-29A39.3 39.3 0 0 0 774.89 725z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="kechengziyuan1" unicode="&#58951;" d="M530.299631 315.712191a54.537462 54.537462 0 0 0-34.299976 12.187492L19.862486 563.299519l-3.749997 3.749997a55.187462 55.187462 0 0 0 0 77.949946l3.749997 3.749998L495.687155 883.836796A54.537462 54.537462 0 0 0 530.299631 895.999288a54.562462 54.562462 0 0 0 34.299976-12.162492l476.137169-235.424836 3.749997-3.749998a55.199962 55.199962 0 0 0 0-77.949945l-3.749997-3.749998-476.137169-235.399836a54.562462 54.562462 0 0 0-34.299976-11.849992z m-455.874683 289.999798l455.874683-225.449843 455.874683 225.437343-455.874683 225.749843z m0 0M530.299631 94.012346a54.574962 54.574962 0 0 0-34.299976 12.162491L24.537483 339.149675a31.174978 31.174978 0 1 0 27.749981 55.812461l474.899669-234.849836 3.112498-1.874999 3.124998 1.874999 474.887169 235.112336a31.174978 31.174978 0 0 0 27.749981-55.812461L564.599607 105.862337a54.562462 54.562462 0 0 0-34.299976-11.849991z m0 0M530.299631-128a54.862462 54.862462 0 0 0-34.299976 12.149992L24.537483 116.46233a31.174978 31.174978 0 1 0 27.749981 55.812461l474.899669-233.862337 3.112498-1.874999 3.124998 1.874999 474.887169 235.112336a31.724978 31.724978 0 1 0 27.749981-57.06246L564.599607-115.850008a55.199962 55.199962 0 0 0-34.299976-12.149992z m0 0"  horiz-adv-x="1060" />
       
       <glyph glyph-name="tubiaozhizuomobanyihuifu-" unicode="&#59037;" d="M695.48 353.85m-15 0a15 15 0 1 1 30 0 15 15 0 1 1-30 0ZM586.39 17.63A28.63 28.63 0 0 0 557.76-11H122.39V424.37A28.63 28.63 0 0 0 151 453h156.39v79H152A108.63 108.63 0 0 1 43.39 423.37V-91h514.37a108.63 108.63 0 0 1 108.63 108.63V174h-80zM359.39 749v-523h523a100 100 0 0 1 100 100V849h-523a100 100 0 0 1-100-100z m523-443h-443V749a20 20 0 0 0 20 20h443v-443a20 20 0 0 0-20-20zM751.9 339h102a15.5 15.5 0 0 1 15.5 15.5V581.9a5.25 5.25 0 0 1-1.54 3.75c-13 12.72-28.46 3.75-28.46-8.84v-202.64a5.17 5.17 0 0 0-5.17-5.17H746.8a5.25 5.25 0 0 1-3.75-1.54c-12.71-12.95-3.74-28.46 8.85-28.46z"  horiz-adv-x="1024" />

src/renderer/src/views/prepare/index.vue

@@ -26,13 +26,7 @@
           <el-popover placement="top-start" :width="250" trigger="hover">
             <template #default>
               <div>
-                <el-button
+                <el-button v-if="lastAsyncAllTime" type="success" size="small" :icon="Check" circle />
-                  v-if="lastAsyncAllTime"
-                  type="success"
-                  size="small"
-                  :icon="Check"
-                  circle
-                />
                 {{ lastAsyncAllTime ? toTimeText(lastAsyncAllTime) + '同步成功' : '' }}
               </div>
             </template>
@@ -50,60 +44,24 @@
           <el-button @click="handleOutLink('feedback')">作业反馈</el-button>
           <el-button @click="handleOutLink('homeWork')">布置作业</el-button>
           <el-button @click="isDialogOpen = true">上传资料</el-button>
-          <el-button type="primary" style="margin-left: 10px" @click="createFile"
+          <el-button type="primary" style="margin-left: 10px" @click="createFile">新建课件</el-button>
-            >新建课件</el-button
-          >
         </div>
       </div>
-      <el-checkbox-group
+      <el-checkbox-group v-model="checkFileList" class="prepare-body-main"
-        v-model="checkFileList"
+        :style="{ 'margin-bottom': checkFileList.length > 0 ? '40px' : '0' }">
-        class="prepare-body-main"
+        <file-list-item v-for="(item, index) in currentFileList" :key="index" :item="item" :index="index"
-        :style="{ 'margin-bottom': checkFileList.length > 0 ? '40px' : '0' }"
+          @on-move="onMoveSingleFile" @on-delete="deleteTalk" @on-set="openSet" @on-delhomework="delhomework">
-      >
+          <el-checkbox label="" :value="item" v-if="!item.uniquekey" />
-        <file-list-item
-          v-for="(item, index) in currentFileList"
-          :key="index"
-          :item="item"
-          :index="index"
-          @on-move="onMoveSingleFile"
-          @on-delete="deleteTalk"
-          @on-set="openSet"
-          @on-delhomework="delhomework"
-        >
-          <el-checkbox v-if="!item.uniquekey" label="" :value="item" />
-        </file-list-item>
-        <file-list-item
-          v-for="(item, index) in currentWorkList"
-          :key="'work_' + index"
-          :item="item"
-          :index="index"
-          @on-move="onMoveSingleFile"
-          @on-delete="deleteTalk"
-          @on-set="openSet"
-          @on-delhomework="delhomework"
-        >
-          <el-checkbox v-if="!item.uniquekey" label="" :value="item" />
         </file-list-item>
       </el-checkbox-group>
-      <file-oper-batch
+      <file-oper-batch v-show="checkFileList.length > 0"
-        v-show="checkFileList.length > 0"
         :indeterminate="checkFileList.length > 0 && checkFileList.length < currentFileList.length"
-        :choose="checkFileList"
+        :choose="checkFileList" :check-all="isCheckAll" @click-delete="clickDelete" @click-move="clickMove"
-        :check-all="isCheckAll"
+        @cancel="checkFileList = []" @click-choose="clickChoose"></file-oper-batch>
-        @click-delete="clickDelete"
-        @click-move="clickMove"
-        @cancel="checkFileList = []"
-        @click-choose="clickChoose"
-      ></file-oper-batch>
     </div>
     <MoveFile v-model="isMoveDialogOpen" @on-submit="chooseMoveCata" />
     <uploadDialog v-model="isDialogOpen" @submit-file="submitFile" />
-    <SetHomework
+    <SetHomework v-model="setDialog" :entpcourseid="entpcourseid" :row="row" @on-close="closeHomework" />
-      v-model="setDialog"
-      :entpcourseid="entpcourseid"
-      :row="row"
-      @on-close="closeHomework"
-    />
   </div>
   <reserv ref="reservDialog" @add-success="initReserv" :current-node="currentNode" :book-id="uploadData.textbookId"></reserv>
 </template>
@@ -160,7 +118,6 @@ export default {
       fileList: [],
       currentNode: {},
       currentFileList: [],
-      currentWorkList: [],
       curBookPath: '',
       curClassReserv: {},
       downloadNum: 0,
@@ -236,7 +193,7 @@ export default {
       let fileName = this.curBookPath
       if (!fileName) return
       fileName = fileName.replace('.txt', '.pdf')
-      return new Promise((resolve, reject) => {
+      return new Promise((resolve, reject)=>{
         const userDataPath = Remote.app.getPath('userData')
         const appRootFilePath = userDataPath + '\\selfFile\\'
         let filePath = appRootFilePath + fileName
@@ -252,7 +209,7 @@ export default {
             ipcRenderer.on('download-file-default-prog' + fileName, this.progDownFile)
             ipcRenderer.once('download-file-default' + fileName, (e, isSuccess) => {
               if (isSuccess === true) {
-                resolve(fileName)
+                resolve(appRootFilePath + fileName)
               } else {
                 ElMessage({
                   type: 'info',
@@ -261,7 +218,7 @@ export default {
               }
             })
           } else {
-            resolve(fileName)
+            resolve(appRootFilePath + fileName)
           }
         })
       })
@@ -400,9 +357,9 @@ export default {
       this.uploadData.textbookId = data.textBook.curBookId
       this.initHomeWork()
       await this.asyncAllFile()
+
     },
     async initHomeWork() {
-      this.currentWorkList = []
       if (this.timerId) {
         clearInterval(this.timerId)
       }
@@ -411,7 +368,8 @@ export default {
         let { rows } = await this.getChapterId()
         if (rows.length > 0) {
           this.entpcourseid = rows[0].id
-        } else {
+        }
+        else{
            await this.createEntpcourse()
            let { rows } = await this.getChapterId()
            this.entpcourseid = rows[0].id
@@ -423,27 +381,28 @@ export default {
     },
     // 创建新的entpcourse
     createEntpcourse() {
-      var cform = {}
+      // 参照 web AIx 传入参数
-      cform.entpid = this.userStore.deptId
+      var cform = {};
-      cform.level = 1
+      cform.entpid = this.userStore.deptId;
-      cform.parentid = 0
+      cform.level = 1;
-      cform.dictid = 0
+      cform.parentid = 0;
-      cform.evalid = this.currentNode.id
+      cform.dictid = 0;
-      cform.evalparentid = 0
+      cform.evalid = this.currentNode.id;
-      cform.edusubject = this.currentNode.edusubject
+      cform.evalparentid = 0;
-      cform.edudegree = this.currentNode.edudegree
+      cform.edusubject = this.currentNode.edusubject;
-      cform.edustage = this.currentNode.edustage
+      cform.edudegree = this.currentNode.edudegree;
-      cform.coursetype = '课标学科'
+      cform.edustage = this.currentNode.edustage;
-      cform.coursetitle = this.currentNode.itemtitle
+      cform.coursetype = '课标学科';
-      cform.coursedesc = ''
+      cform.coursetitle = this.currentNode.itemtitle;
-      cform.status = ''
+      cform.coursedesc = '';
-      cform.dflag = 0
+      cform.status = '';
-      cform.edituserid = this.userStore.userId
+      cform.dflag = 0;
-      cform.createblankfile = 'yes'
+      cform.edituserid = this.userStore.userId;
+      cform.createblankfile = 'yes';
       return addEntpcourse(cform)
     },
-    openReserv() {
+    openReserv(){
-      this.$refs['reservDialog'].openDialog()
+      // this.$refs['reservDialog'].openDialog()
     },
     // 打开外部链接
     handleOutLink(key) {
@@ -535,9 +494,9 @@ export default {
           }
         }
         // 去重
-        let ary = uniqBy([...list], 'id')
+        let ary = uniqBy([...this.currentFileList, ...list], 'id')
         // 深度克隆
-        this.currentWorkList = cloneDeep(ary)
+        this.currentFileList = cloneDeep(ary)
       })
     },
     getWeekday1(date) {
@@ -553,14 +512,12 @@ export default {
     // 删除作业
     delhomework(item) {
       this.isLoading = true
-      delClasswork(item.id)
+      delClasswork(item.id).then(async res => {
-        .then(async (res) => {
         ElMessage.success('操作成功')
         this.isLoading = false
         await this.asyncAllFile()
         this.getHomeWorkList()
-        })
+      }).catch(() => {
-        .catch(() => {
         this.isLoading = false
       })
     },
@@ -581,7 +538,7 @@ export default {
       const toolStore = useToolState()
       if (toolStore.isToolWin) return this.$message.error('您当前已开始上课，请勿重复操作')
       startClass(this.curClassReserv.id)
-      createWindow('tool-sphere', { url: '/tool/sphere?entpcourseid=' + this.entpcourseid + "&reservId=" + this.curClassReserv.id })
+      createWindow('tool-sphere', { url: '/tool/sphere?entpcourseid=' + this.entpcourseid +'&label=' + this.currentNode.label+ "&reservId=" + this.curClassReserv.id })
     }
   }
 }

src/renderer/src/views/tool/components/homework.vue

@@ -1,12 +1,32 @@
 <template>
-  <div class="homework-content">
+  <div class="page-homework">
-    <div class="homework-top">
+
-      <h3 class="title">沁园春-长沙</h3>
+    <transition name="slide" @before-enter="beforeEnter" @enter="enter" @leave="leave">
-      <div class="grade">{{ usertore.edusubject}}</div>
+      <div v-if="showLeft" class="homework homework-content">
+        <div class="homework-top flex">
+          <div>
+            <h3 class="title">{{ lesson }}</h3>
+            <div class="grade">{{ usertore.edusubject }}</div>
+          </div>
+          <!-- <i class="iconfont icon-xiangyou"></i> -->
         </div>
         <div class="homework-list" v-loading="loading">
           <el-scrollbar height="360px">
             <ul>
+              <!--资源-->
+              <li class="item flex" v-for="item in resourceList" :key="item.id">
+                <div class="item-left flex">
+                  <FileImage :size="50" :file-name="item.fileShowName" />
+                  <div class="item-info flex">
+                    <span class="item-name">{{ item.fileShowName }}</span>
+                    <div class="item-student">
+                      <span class="item-option">{{ item.fileFlag }}</span>
+                      <span>{{ item.fileSuffix }}</span>
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <!--作业-->
               <li class="item flex" v-for="item in dataList" :key="item.id">
                 <div class="item-left flex">
                   <svg class="icon homework-icon" aria-hidden="true">
@@ -25,43 +45,82 @@
             </ul>
           </el-scrollbar>
         </div>
-    <SetHomework v-model="setDialog" :title="'推送作业'" :entpcourseid="entpcourseid" :row="curRow" @on-close="closeHomework" />
+        <SetHomework v-model="setDialog" :title="'推送作业'" :entpcourseid="entpcourseid" :row="curRow"
+          @on-close="closeHomework" />
+      </div>
+      <div class="homework" @click="showLeft = !showLeft" v-else>
+        <div class="unit-top flex">
+          <div class="unit-top-left">
+            <i class="iconfont icon-xiangzuo"></i>
+            <span>返回</span>
+          </div>
+          <span class="unit-top-center">选择目录</span>
+        </div>
+        <div>
+          <!-- <Lesson/> -->
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, toRaw } from 'vue';
 import { useRoute } from 'vue-router';
 import useUserStore from '@/store/modules/user'
 import { homeworklist } from '@/api/teaching/classwork'
+import { getSmarttalkPage, getPrepareById } from '@/api/file'
 import SetHomework from '@/views/prepare/container/set-homework.vue'
+import FileImage from '@/components/file-image/index.vue'
 import { ipcMsgSend } from '@/utils/tool'
+import { useToolState } from '@/store/modules/tool'
+import { asyncLocalFile } from '@/utils/talkFile'
+import Lesson from './lesson.vue';
 
+const { ipcRenderer } = window.electron || {}
 const route = useRoute();
 const usertore = useUserStore().user
+const toolStore = useToolState()
 const entpcourseid = ref('')
+const lesson = ref('')
 const loading = ref(false)
+const showLeft = ref(true)
 //作业数据
 const dataList = ref([])
 const setDialog = ref(false)
+// 资源数据
+const resourceList = ref([])
 
 //
 const curRow = ref('')
 
 
-const sendHomework = (row)=>{
+const sendHomework = (row) => {
   curRow.value = row
-  setTimeout(()=>{
+  setTimeout(() => {
     ipcMsgSend('tool-sphere:set:ignore', false)
-  },200)
+  }, 200)
   setDialog.value = true
 }
 //
-const closeHomework = ()=>{
+const closeHomework = () => {
   ipcMsgSend('tool-sphere:set:ignore', true)
   setDialog.value = false
 }
 
+// 获取资源数据
+const getResource = () => {
+  let data = toRaw(toolStore.curSubjectNode)
+  data.orderByColumn = 'uploadTime'
+  data.isAsc = 'desc'
+  data.pageSize = 500
+  getSmarttalkPage(data).then(res => {
+    resourceList.value = res.rows
+  })
+
+}
+
+// 获取作业数据
 const getHomework = () => {
   loading.value = true
   try {
@@ -70,7 +129,6 @@ const getHomework = () => {
       edituserid: usertore.userId,
       pageSize: 100
     }).then(res => {
-      console.log(res.rows)
       //以下代码 参照AIx web端 作业布置
       let list = []
       for (var i = 0; i < res.rows.length; i++) {
@@ -131,21 +189,58 @@ const getHomework = () => {
     loading.value = false
   }
 }
+function beforeEnter(el) {
+  el.style.transform = 'translateX(100%)';
+}
 
+function enter(el, done) {
+  el.offsetHeight; // trigger reflow
+  el.style.transition = 'transform 0.5s ease';
+  el.style.transform = 'translateX(0)';
+  done();
+}
+
+function leave(el, done) {
+  el.style.transition = 'transform 0.5s ease';
+  el.style.transform = 'translateX(-100%)';
+  done();
+}
 
 onMounted(() => {
   entpcourseid.value = route.query.entpcourseid
+  lesson.value = route.query.label
   getHomework()
+  setTimeout(() => {
+    getResource()
+  }, 5000)
 })
 </script>
 
 <style lang="scss" scoped>
+.page-homework {
+  position: relative;
+  height: 435px;
+}
+
+.homework {
+  width: 100%;
+  position: absolute;
+
+}
+
 .homework-content {
   padding: 0 15px;
   color: #fff;
 
   .homework-top {
     margin-bottom: 20px;
+    align-items: center;
+    justify-content: space-between;
+
+    .icon-xiangyou {
+      font-size: 26px;
+      cursor: pointer;
+    }
 
     .title {
       font-size: 20px;
@@ -191,8 +286,37 @@ onMounted(() => {
         }
       }
     }
-
-
   }
 }
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.5s ease;
+}
+
+.slide-enter,
+.slide-leave-to
+
+/* .slide-leave-active in <2.1.8 */
+  {
+  transform: translateX(100%);
+}
+
+.unit-top {
+  color: #fff;
+  padding: 10px 0;
+  justify-content: space-between;
+  align-items: center;
+  .unit-top-left {
+    cursor: pointer;
+
+    .icon-xiangzuo {
+      margin-right: 5px;
+    }
+  }
+  .unit-top-center{
+    margin: 0 auto;
+  }
+
+}
 </style>

src/renderer/src/views/tool/components/lesson.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <el-tree ref="refTree" :data="treeData" :props="defaultProps" node-key="id"
+      :default-expanded-keys="defaultExpandedKeys" :current-node-key="currentNodeId" highlight-current
+      @node-click="handleNodeClick">
+      <template #default="{ node }">
+        <span :title="node.label" class="tree-label">{{ node.label }}</span>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, markRaw, toRaw } from 'vue'
+import { useToolState } from '@/store/modules/tool'
+
+
+const toolStore = useToolState()
+const treeData = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+  class: 'textbook-tree'
+}
+// 当前选中的节点ID
+const currentNodeId = ref(0)
+// 当前选中的节点名称
+const currentNodeName = ref('')
+// 默认展开的节点
+const defaultExpandedKeys = ref([])
+// tree
+const refTree = ref(null)
+// 教材ID
+const curBookId = ref('')
+// 
+const evaluationList = ref([])
+
+const getTreeData = () => {
+  evaluationList.value = JSON.parse(localStorage.getItem('evaluationList'))
+
+    //上册
+  let volumeOne = evaluationList.value.filter(item => item.level == 1 && item.semester == '上册')
+  //下册
+  let volumeTwo = evaluationList.value.filter(item => item.level == 1 && item.semester == '下册')
+  //数据过滤
+  console.log(volumeOne,1)
+  console.log(volumeTwo,2)
+  let upData = transData(volumeOne)
+  let downData = transData(volumeTwo)
+  console.log(upData)
+  console.log(downData)
+  if(upData.length && downData.length){
+    treeData.value = [...upData,...downData]
+  }
+  else if(upData.length || downData.length){
+    treeData.value = upData.length ? upData : downData
+  }
+  else{
+    treeData.value = []
+    return
+  }
+  nextTick(() => {
+    let defaultKey
+    if(toolStore.curSubjectNode.levelSecondId){
+      defaultKey = toolStore.curSubjectNode.levelSecondId
+    }
+    else{
+      defaultKey = toolStore.curSubjectNode.levelFirstId
+    }
+    defaultExpandedKeys.value = defaultKey
+    // currentNode.data = getLastLevelData(treeData.value)[0]
+    // currentNodeId.value = getLastLevelData(treeData.value)[0].id
+    // currentNodeName.value = getLastLevelData(treeData.value)[0].label
+ 
+  })
+
+}
+
+const handleNodeClick = ()=>{}
+
+const transData = (data) => {
+  let ary = []
+  data.forEach(item => {
+    let obj = {}
+    console.log(item.rootid, '==========>',curBookId.value)
+    if (item.rootid == curBookId.value) {
+      obj.label = item.itemtitle
+      obj.id = item.id
+      obj.itemtitle = item.itemtitle
+      obj.edudegree = item.edudegree
+      obj.edustage = item.edustage
+      obj.edusubject = item.edusubject
+      let ary2 = []
+      evaluationList.value.forEach(el => {
+        let obj2 = {}
+        if (item.id == el.parentid) {
+          obj2 = {
+            label: el.itemtitle,
+            id: el.id,
+            itemtitle : el.itemtitle,
+            edudegree : el.edudegree,
+            edustage : el.edustage,
+            edusubject : el.edusubject,
+          }
+          ary2.push(obj2)
+        }
+        obj.children = ary2
+      })
+      ary.push(obj)
+    }
+  })
+  return ary
+}
+
+
+onMounted(()=>{
+  // console.log(toolStore.curSubjectNode,111)
+
+  // let data = toRaw(toolStore.curSubjectNode)
+  // console.log(data,222)
+
+
+  // curBookId.value = toolStore.curSubjectNode.textbookId
+  // getTreeData()
+  
+})
+</script>
+
+<style lang="scss" scoped></style>

src/renderer/src/views/tool/components/upvote.vue

@@ -0,0 +1,87 @@
+<template>
+  <button v-if="props.test" @click="trigger">测试</button>
+  <div ref="warpRef" class="c-warp">
+    <template v-for="i in sum">
+      <slot><el-icon><Star /></el-icon></slot>
+    </template>
+  </div>
+</template>
+<script setup>
+// 功能说明：动画-点赞
+import { nextTick, ref } from 'vue'
+import {Star} from '@element-plus/icons-vue'
+const warpRef = ref(null)
+const props = defineProps({ test: Boolean })
+const sum = ref(0)
+// === 方法 ===
+const trigger = () => {
+  sum.value++
+  nextTick(() => {
+    const el = warpRef.value.lastElementChild // 获取最后一个新加的元素
+    animInit(el)
+  })
+}
+// 初始化动画
+const animInit = (el) => {
+  const { height, width } = el.getBoundingClientRect()
+  const sumH = warpRef.value.clientHeight
+  const sumW = warpRef.value.clientWidth
+  const maxH = sumH - height  // 最大高度
+  const maxw = sumW - width   // 最大宽度
+  let bottom = 0              // 底部距离
+  let opacity = 0             // 透明度
+  let scale = 0               // 缩放
+  let transform = ''          // 旋转 缩放 偏移等操作
+  let right = getRandom(5, maxw, false, true)   // 随机-右距离
+  let isPlus = getRandomBool()?'':'-'           // 随机-方向
+  let rotate = getRandom(0, 60, false, true)    // 随机-旋转
+  let scaleMax = getRandom(0, 1, true, true)+1  // 随机-缩放倍数
+  setStatic(el,'position','absolute')           // 设置-定位
+  setStatic(el, 'right', right, 'px')           // 设置-右距离
+  const amFn = () => { //  opacity: 0.5;
+    // 到顶了- 移除元素
+    if (bottom > maxH) {el.remove();return}
+    // 透明度: 进入-慢慢出现
+    if (bottom < 101 && opacity < 1) opacity = toNumber(opacity + 0.01)
+    else if (bottom > maxH - 100 && opacity > 0) opacity = toNumber(opacity - 0.01)
+    // 缩放：进入-慢慢放大
+    if (bottom < (scaleMax/0.1) && scale < scaleMax) scale = toNumber(scale + 0.1)
+    // 缩放：退出-慢慢缩小
+    else if (bottom > maxH - (scaleMax/0.1) && scale > 0) scale = toNumber(scale - 0.1)
+    bottom++
+    // console.log('zdg: ', scale)
+    // 设置样式
+    transform = `rotate(${isPlus}${rotate}deg) scale(${scale})`
+    setStatic(el, 'bottom', bottom, 'px')
+    setStatic(el, 'opacity', opacity)
+    setStatic(el, 'transform', transform)
+    requestAnimationFrame(amFn)
+  }
+  amFn() // 初次执行
+}
+// 设置-静态样式
+const setStatic = (el, type, val, end) => el.style[type] = val + (end || '')
+// 随机数 isFloat：是否小数 isMax：是否包含最大值
+const getRandom = (min, max, isFloat, isMax, pos=2) => {
+  const maxVal = isMax ? max - min + 1 : max - min
+  const getVal = () => Math.random() * maxVal + min
+  return isFloat ? toNumber(getVal(), pos) : toNumber(getVal(), 0)
+}
+// 随机布尔值
+const getRandomBool = () => Math.random() > 0.5
+// 转换数字-(小数精度丢失)
+const toNumber = (v, pos = 2) => Number(v.toFixed(pos))
+// 暴露方法
+defineExpose({ trigger })
+</script>
+
+<style lang="scss" scoped>
+.c-warp {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 30%;
+  height: 50%;
+  pointer-events: none;
+}
+</style>

src/renderer/src/views/tool/sphere.vue

@@ -2,8 +2,13 @@
   <div class="warp-all">
     <!-- 画板 -->
     <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
+
     <!-- 侧边工具栏 -->
     <side-vue v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue>
+
+    <!-- 点赞组件 -->
+    <upvote-vue></upvote-vue>
+
     <!-- 底部工具栏  :style="dataPos.style"-->
     <div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
       <div v-drag="{handle:'.tool-bottom-all', dragtime}"
@@ -38,6 +43,14 @@ import vDrag from './directive/drag' // 自定义指令-拖拽
 import vIgnore from './directive/ignore' // 自定义指令-穿透
 import { endClass } from '@/api/classManage'
 import { useToolState } from '@/store/modules/tool'
+
+import logo from '@root/resources/icon.png'     // logo
+import boardVue from './components/board.vue'   // 画板-子组件
+import sideVue from './components/side.vue'     // 画板-子组件
+import upvoteVue from './components/upvote.vue' // 点赞-子组件
+import vDrag from './directive/drag'            // 自定义指令-拖拽
+import vIgnore from './directive/ignore'        // 自定义指令-穿透
+import { useToolState } from '@/store/modules/tool' // 数据状态-缓存
 import { ipcMsgSend, ipcHandle, ipcMain, ipcMsgInvoke } from '@/utils/tool' // 相关工具
 const route = useRoute();
 const tabActive = ref('select')   // 工具栏当前选中项