备课-增加头部布局

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

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1721179711733') format('woff2'),
+  src: url('iconfont.woff2?t=1721698955462') format('woff2'),
-       url('iconfont.woff?t=1721179711733') format('woff'),
+       url('iconfont.woff?t=1721698955462') format('woff'),
-       url('iconfont.ttf?t=1721179711733') format('truetype'),
+       url('iconfont.ttf?t=1721698955462') format('truetype'),
-       url('iconfont.svg?t=1721179711733#iconfont') format('svg');
+       url('iconfont.svg?t=1721698955462#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-lingdang:before {
+  content: "\e613";
+}
+
 .icon-yidongdaozu:before {
   content: "\e67d";
 }

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

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "17990800",
+      "name": "铃铛",
+      "font_class": "lingdang",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
     {
       "icon_id": "1207918",
       "name": "移动到组",

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

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="lingdang" unicode="&#58899;" d="M257.7 243.70000000000005h510.6c17.9 0 32.5 14.5 32.5 32.5V480.9c0 143.2-104.6 261.9-241.5 284 2.1 5.5 3.3 11.6 3.3 17.8 0 27.4-22.2 49.6-49.6 49.6s-49.6-22.2-49.6-49.6c0-6.3 1.2-12.3 3.3-17.8-136.9-22.1-241.5-140.9-241.5-284v-204.7c0-17.9 14.6-32.5 32.5-32.5zM513-63.60000000000002c44.4 0 80.3 36 80.3 80.3H432.7c0-44.4 35.9-80.3 80.3-80.3zM911.7 115L895 148.29999999999995c-14.8 29.7-47.7 52.1-74.5 52.1h-615c-26.8 0-59.7-22.4-74.5-52.1L114.3 115c-17.5-35.1-6.6-65.9 25.9-65.9h745.6c32.5 0 43.5 30.8 25.9 65.9z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="yidongdaozu" unicode="&#59005;" d="M904.448 270.272 119.616 270.272c-23.68 0-44.736-14.656-52.48-36.48C65.024 227.968 64 221.952 64 216c0-16.32 7.616-32.192 21.184-42.688l293.248-225.728c24.128-18.56 59.008-14.464 78.016 9.088 18.944 23.552 14.848 57.664-9.28 76.224L288 156.544l616 0c30.72 0 56 29.44 56 59.456C960 246.016 935.168 270.272 904.448 270.272zM119.552 497.728l784.832 0c23.68 0 44.736 14.656 52.48 36.48C958.976 540.032 960 546.048 960 552c0 16.32-7.616 32.192-21.184 42.688l-293.248 225.728c-24.128 18.56-59.008 14.464-78.016-9.088C548.608 787.776 552.64 753.6 576.832 735.04L736 611.456 120 611.456C89.28 611.456 64 582.016 64 552 64 521.984 88.832 497.728 119.552 497.728z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="shanchu" unicode="&#59474;" d="M736.653061-33.959184H287.346939c-45.97551 0-83.591837 37.616327-83.591837 83.591837V540.734694h616.489796v-491.102041c0-45.97551-37.616327-83.591837-83.591837-83.591837zM245.55102 498.938776v-449.306123c0-22.987755 18.808163-41.795918 41.795919-41.795918h449.306122c22.987755 0 41.795918 18.808163 41.795919 41.795918V498.938776H245.55102zM407.510204 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM616.489796 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM846.367347 498.938776H177.632653c-45.97551 0-83.591837 37.616327-83.591837 83.591836v31.346939c0 45.97551 37.616327 83.591837 83.591837 83.591837h668.734694c45.97551 0 83.591837-37.616327 83.591837-83.591837v-31.346939c0-45.97551-37.616327-83.591837-83.591837-83.591836zM177.632653 655.673469c-22.987755 0-41.795918-18.808163-41.795918-41.795918v-31.346939c0-22.987755 18.808163-41.795918 41.795918-41.795918h668.734694c22.987755 0 41.795918 18.808163 41.795918 41.795918v31.346939c0 22.987755-18.808163 41.795918-41.795918 41.795918H177.632653zM650.44898 655.673469h-276.89796c-28.734694 0-52.244898 23.510204-52.244898 52.244898v41.795919c0 28.734694 23.510204 52.244898 52.244898 52.244898h276.89796c28.734694 0 52.244898-23.510204 52.244898-52.244898v-41.795919c0-28.734694-23.510204-52.244898-52.244898-52.244898z m-276.89796 104.489796c-5.746939 0-10.44898-4.702041-10.448979-10.448979v-41.795919c0-5.746939 4.702041-10.44898 10.448979-10.448979h276.89796c5.746939 0 10.44898 4.702041 10.448979 10.448979v41.795919c0 5.746939-4.702041 10.44898-10.448979 10.448979h-276.89796z"  horiz-adv-x="1024" />

src/renderer/src/components/choose-textbook/index.vue

@@ -64,6 +64,8 @@ const defaultProps = {
 const curBookId = ref(-1)
 //当前教材名称
 const curBookName = ref('')
+//当前教材封面图
+const curBookImg = ref('')
 // 上册
 const volumeOne = ref([])
 // 下册
@@ -110,9 +112,10 @@ const getSubjectContent = async () => {
 }
 
 //选择教材
-const changeBook = ({ id, itemtitle }) => {
+const changeBook = ({ id, itemtitle, avartar }) => {
   curBookId.value = id
   curBookName.value = itemtitle
+  curBookImg.value = BaseUrl + avartar
   getTreeData()
   setTimeout(() => {
     dialogVisible.value = false
@@ -144,7 +147,8 @@ const emitChangeBook = () => {
   const data = {
     textBook: {
       curBookId: curBookId.value,
-      curBookName: curBookName.value
+      curBookName: curBookName.value,
+      curBookImg: curBookImg.value
     },
     node: curNode
   }
@@ -236,6 +240,7 @@ const getSubject = async () => {
   // 默认第一个
   curBookName.value = subjectList.value[0].itemtitle
   curBookId.value = subjectList.value[0].id
+  curBookImg.value = BaseUrl + subjectList.value[0].avartar
 }
 
 
@@ -264,7 +269,8 @@ const handleNodeClick = (data, node) => {
   let curData = {
     textBook: {
       curBookId: curBookId.value,
-      curBookName: curBookName.value
+      curBookName: curBookName.value,
+      curBookImg: curBookImg.value
     },
     node: toRaw(currentNode)
   }

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

@@ -2,19 +2,27 @@
   <div v-loading="isLoading" class="page-resource flex">
     <ChooseTextbook @change-book="nodeClick" @node-click="nodeClick" />
     <div class="page-right">
+      <div class="header-top flex">
+        <div class="textbook-img">
+          <el-image style="width: 80px; height: 110px" :src="curBookImg" />
+        </div>
+        <div class="top-item">
+          <el-button class="btn">教材研读</el-button>
+          <el-button class="btn">电子课本</el-button>
+          <el-button class="btn">高考研读</el-button>
+          <el-button class="btn">教学大模型</el-button>
+        </div>
+        <el-button type="primary" class="to-class-btn">
+          <i class="iconfont icon-lingdang"></i>上课</el-button>
+      </div>
       <div class="prepare-body-header">
+
         <div>
           <label style="font-size: 15px">共{{ currentFileList.length }}个文件</label>&nbsp;
           <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>
@@ -29,38 +37,22 @@
           </el-popover>
         </div>
         <div style="display: flex">
+          <el-button>布置作业</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">
-      >
-        <file-list-item
-          v-for="(item, index) in currentFileList"
-          :key="index"
-          :item="item"
-          :index="index"
-          @on-move="onMoveSingleFile"
-          @on-delete="deleteTalk"
-        >
           <el-checkbox 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" />
@@ -104,7 +96,9 @@ export default {
         levelSecondId: null,
         fileSource: '个人',
         fileRoot: '备课'
-      }
+      },
+      // 当前教材封面图
+      curBookImg: ''
     }
   },
   computed: {
@@ -256,6 +250,8 @@ export default {
     },
     nodeClick(data) {
       if (this.currentNode.id === data.node.id) return
+      this.curBookImg = data.textBook.curBookImg
+      console.log(data.textBook)
       this.checkFileList = []
       let cata = parseCataByNode(data.node)
       this.currentNode = data.node
@@ -321,6 +317,7 @@ export default {
   height: 100%;
 
   .page-right {
+    overflow: hidden;
     position: relative;
     min-width: 0;
     flex: 1;
@@ -332,6 +329,55 @@ export default {
     display: flex;
     flex-direction: column;
 
+    .header-top {
+      height: 150px;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(#97c4ed, #7aa8e5);
+      padding-right: 20px;
+      .textbook-img{
+        height: 120px;
+        background-color: #ffffff;
+        padding: 5px;
+        border-radius: 6px;
+        overflow: hidden;
+        margin-right: 20px;
+      }
+      .top-item{
+        width: 230px;
+       
+        flex-wrap: wrap;
+        .btn{
+          width: 102px;
+          background: none;
+          color: #ffffff;
+          border-width: 2px;
+          border-color: #ffffff;
+          &:hover{
+            background: rgba(255, 255, 255, 0.3)
+          }
+          &:first-child{
+            margin-left: 12px;
+            margin-bottom: 15px;
+          }
+          &:nth-child(2){
+            margin-bottom: 15px;
+          }
+        }
+      }
+      .to-class-btn{
+        width: 130px;
+        height: 80px;
+        margin-left: 25px;
+        font-size: 18px;
+        .icon-lingdang{
+          margin-right: 5px;
+          color: #ffffff;
+          font-size: 20px;
+        }
+      }
+    }
+
     .prepare-body-header {
       height: 60px;
       width: 100%;
@@ -340,6 +386,7 @@ export default {
       flex-wrap: wrap;
       justify-content: space-between;
       padding: 0 20px;
+
     }
 
     .prepare-body-main {