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

@@ -5,11 +5,16 @@
       <i class="iconfont icon-xiangyou"></i>
     </div>
     <div class="book-list">
-      <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+      <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
+        <template #default="{ node }">
+          <span :title="node.label" class="tree-label">{{ node.label }}</span>
+        </template>
+      </el-tree>
     </div>
   </div>
   <!--弹窗 选择教材-->
-  <el-dialog v-model="dialogVisible" class="choose-dialog" append-to-body :show-close="false" width="550">
+  <el-dialog v-model="dialogVisible" class="choose-dialog" :show-close="false" width="550"
+    style="border-radius: 10px; padding: 10px 15px;">
     <template #header>
       <div class="choose-book-header flex">
         <span>切换教材</span>
@@ -141,6 +146,10 @@ const isHaveUnit = (id) => {
   })
 }
 
+const renderContent = (h, { node, data }) => {
+  console.log(node, data)
+}
+
 const handleNodeClick = (data) => {
   emit('nodeClick', data)
 }
@@ -158,6 +167,8 @@ onMounted(() => {
   background: #ffffff;
   border-radius: 10px;
   box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
+  display: flex;
+  flex-direction: column;
 
   .book-name {
     height: 45px;
@@ -172,6 +183,7 @@ onMounted(() => {
 
   .book-list {
     padding-left: 10px;
+    flex: 1;
   }
 }
 
@@ -182,6 +194,7 @@ onMounted(() => {
 .choose-book-header {
   justify-content: space-between;
   font-size: 15px;
+  font-weight: bold;
 
   .icon-guanbi {
     font-size: 20px;
@@ -199,6 +212,7 @@ onMounted(() => {
     .book-name {
       margin-left: 20px;
       color: #3b3b3b;
+      font-size: 13px;
     }
 
     &:hover {
@@ -224,6 +238,7 @@ onMounted(() => {
 :deep(.el-tree-node) {
   .el-tree-node__content {
     height: 40px;
+
     &:hover {
       background-color: #eaf3ff;
     }
@@ -231,4 +246,13 @@ onMounted(() => {
 
 }
 
+.tree-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.el-dialog__header) {
+  padding-bottom: 10px;
+}
 </style>

src/renderer/src/main.js

@@ -3,6 +3,7 @@ import './assets/main.css'
 import { createApp } from 'vue'
 
 import ElementPlus from 'element-plus'
+import zhLocale from 'element-plus/es/locale/lang/zh-cn'
 import './utils/messageConfig'
 import 'element-plus/dist/index.css'
 import './assets/iconfont/iconfont.css'
@@ -18,4 +19,4 @@ const app = createApp(App)
     
 app.use(router)
     .use(store)
-    .use(ElementPlus).mount('#app')
+    .use(ElementPlus, { locale: zhLocale }).mount('#app')

src/renderer/src/views/resource/container/resoure-list.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="resource-list">
+    <el-scrollbar height="400px">
+      <ul>
+        <li class="list-item">
+          <div class="item-left flex">
+            <div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
+            <div class="item-tags flex">
+              <el-tag type="info" class="mr-10">教案</el-tag>
+              <el-tag type="info" class="mr-10">PPT</el-tag>
+              <span class="gray-text mr-10">2024-07-13上传</span>
+              <span class="line mr-10"></span>
+              <span class="gray-text mr-10">下载3次</span>
+            </div>
+          </div>
+          <div class="item-btns">
+
+            <el-button size="small" plain round type="primary">
+              <i class="iconfont icon-jiahao"></i>
+              备课</el-button>
+          </div>
+        </li>
+      </ul>
+      <div class="pagination-box">
+        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
+          :page-sizes="[100, 200, 300, 400]" background size="small" layout="total, sizes, prev, pager, next, jumper"
+          :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+const pageSize = ref(100)
+
+const handleSizeChange = () => { }
+const handleCurrentChange = () => { }
+</script>
+
+<style lang="scss" scoped>
+.resource-list {
+  .list-item {
+    padding: 10px 20px;
+    border-bottom: solid #f1f1f1 1px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .item-left {
+      flex-direction: column;
+
+      .name {
+        font-size: 14px;
+        color: #3b3b3b;
+        margin-bottom: 10px
+      }
+
+      .line {
+        width: 1px;
+        height: 15px;
+        background-color: #d9dce2;
+      }
+
+      .item-tags {
+        align-items: center;
+      }
+
+      .mr-10 {
+        margin-right: 10px;
+      }
+
+      .gray-text {
+        color: #909399;
+        font-size: 13px;
+      }
+
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .icon-jiahao {
+      font-size: 12px;
+      margin-right: 3px;
+      font-weight: bold;
+    }
+  }
+
+  .pagination-box {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

src/renderer/src/views/resource/container/resoure-search.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="resoure-search">
+    <el-row justify="space-between">
+      <el-col :span="12" class="tab-btns flex">
+        <el-button text v-for="item in sourceStore.tabs" :key="item.id"
+          :type="sourceStore.curTab == item.id ? 'primary' : ''" @click="sourceStore.changeTab(item.id)">{{ item.text
+          }}</el-button>
+      </el-col>
+      <el-col :span="12" class="search-box flex">
+        <el-input v-model="sourceStore.searchKey" style="width: 240px" placeholder="请输入关键词" />
+      </el-col>
+    </el-row>
+    <el-row class="resoure-btns">
+      <el-col :span="24" class="query-row flex">
+        <div class="flex"> <el-select v-model="sourceStore.curFormat" placeholder="Select" size="small" style="width: 100px">
+            <el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+          <div class="line"></div>
+          <el-button size="small" v-for="item in sourceStore.typeList" :key="item.id"
+            :type="sourceStore.curType == item.id ? 'primary' : ''" round @click="sourceStore.changeType(item.id)">{{
+              item.text }}</el-button>
+        </div>
+        <div>
+          <el-button type="primary" round size="small">
+            <i class="iconfont icon-jiahao"></i>
+            新建资源</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import useResoureStore from '../store'
+
+const sourceStore = useResoureStore()
+</script>
+ziy
+<style lang="scss" scoped>
+.resoure-search {
+  padding: 20px;
+  border-bottom: solid #f1f1f1 1px;
+
+  .tab-btns {
+    .el-button {
+      font-size: 16px;
+    }
+  }
+
+  .search-box {
+    justify-content: flex-end;
+  }
+
+  .resoure-btns {
+    margin-top: 15px;
+    justify-content: center;
+    .query-row{
+      justify-content: space-between;
+    }
+    .line {
+      width: 1px;
+      height: 80%;
+      background-color: #d9dce2;
+      margin: 0 10px;
+    }
+    .icon-jiahao{
+      font-size: 12px;
+      margin-right: 3px;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

src/renderer/src/views/resource/index.vue

@@ -3,150 +3,17 @@
     <ChooseTextbook @nodeClick="nodeClick" />
 
     <div class="page-right">
-      <div class="right-header">
+      <ResoureSearch />   
-        <el-row justify="space-between">
+      <ResoureList />  
-          <el-col :span="12" class="tab-btns flex">
-            <el-button text v-for="item in tabs" :key="item.id" :type="activeVal == item.id ? 'primary' : ''"
-              @click="changeTab(item.id)">{{ item.text }}</el-button>
-          </el-col>
-          <el-col :span="12" class="search-box flex">
-            <el-input v-model="keyVal" style="width: 240px" placeholder="请输入关键词" />
-          </el-col>
-        </el-row>
-        <el-row class="resoure-btns">
-          <el-col :span="24" class="flex">
-            <el-select v-model="curResource" placeholder="Select" size="small" style="width: 100px">
-              <el-option v-for="item in resourceList" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <div class="line"></div>
-            <el-button size="small" v-for="item in types" :key="item.id" :type="curType == item.id ? 'primary' : ''"
-              round @click="changeType(item.id)">{{ item.text }}</el-button>
-          </el-col>
-        </el-row>
-      </div>
-      <el-scrollbar height="400px">
-        <ul class="resource-list">
-          <li class="list-item">
-            <div class="item-left flex">
-              <div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
-              <div class="item-tags flex">
-                <el-tag type="info" class="mr-10">教案</el-tag>
-                <el-tag type="info" class="mr-10">PPT</el-tag>
-                <span class="gray-text mr-10">2024-07-13上传</span>
-                <span class="line mr-10" </span>
-                  <span class="gray-text mr-10">下载3次</span>
-              </div>
-            </div>
-            <div class="item-btns">
-              
-              <el-button size="small" plain round type="primary">
-                <i class="iconfont icon-jiahao"></i>
-                备课</el-button>
-            </div>
-          </li>
-        </ul>
-        <div class="pagination-box">
-          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
-          :page-sizes="[100, 200, 300, 400]" background 
-          size="small"
-          layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange" />
-        </div>
-      </el-scrollbar>
-     
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, toRaw } from 'vue'
+import { toRaw } from 'vue'
 import ChooseTextbook from '@/components/choose-textbook/index.vue'
-
+import ResoureSearch from './container/resoure-search.vue';
-const keyVal = ref('')
+import ResoureList from './container/resoure-list.vue';
-const activeVal = ref(1)
-const tabs = [
-  {
-    type: '',
-    text: '平台资源',
-    id: 1
-  },
-  {
-    type: '',
-    text: '校本资源',
-    id: 2
-  }
-]
-
-
-const curType = ref(1)
-const types = [
-  {
-    type: '',
-    text: '全部',
-    id: 1
-  },
-  {
-    type: '',
-    text: '素材',
-    id: 2
-  },
-  {
-    type: '',
-    text: '微课',
-    id: 3
-  },
-  {
-    type: '',
-    text: '课件',
-    id: 4
-  },
-  {
-    type: '',
-    text: '试卷',
-    id: 5
-  },
-  {
-    type: '',
-    text: '教案',
-    id: 6
-  },
-  {
-    type: '',
-    text: '导教学',
-    id: 7
-  },
-]
-
-const curResource = ref(-1)
-const resourceList = [
-  {
-    label: '资源格式',
-    value: -1
-  },
-  {
-    label: 'word',
-    value: 1
-  },
-  {
-    label: 'ppt',
-    value: 2
-  }
-]
-
-const changeType = (id) => {
-  curType.value = id
-}
-
-const changeTab = (id) => {
-  activeVal.value = id
-}
-
-
-const currentPage = ref(1)
-const pageSize = ref(100)
-
-const handleSizeChange = ()=>{}
-const handleCurrentChange = ()=>{}
 
 // const { ipcRenderer } = window.electron
 // ipcRenderer.send('set-winsize',{x:1000,y: 700})
@@ -169,88 +36,6 @@ const nodeClick = (data) => {
     background: #ffffff;
     border-radius: 10px;
     box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
-
-    .right-header {
-      padding: 20px;
-      border-bottom: solid #f1f1f1 1px;
-
-      .tab-btns {
-        .el-button {
-          font-size: 16px;
-        }
-      }
-
-
-      .search-box {
-        justify-content: flex-end;
-      }
-
-      .resoure-btns {
-        margin-top: 15px;
-        justify-content: center;
-
-        .line {
-          width: 1px;
-          height: 80%;
-          background-color: #d9dce2;
-          margin: 0 10px;
-        }
-      }
-
-    }
-
-    .resource-list {
-      .list-item {
-        padding: 10px 20px;
-        border-bottom: solid #f1f1f1 1px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .item-left {
-          flex-direction: column;
-
-          .name {
-            font-size: 14px;
-            color: #3b3b3b;
-            margin-bottom: 10px
-          }
-
-          .line {
-            width: 1px;
-            height: 15px;
-            background-color: #d9dce2;
-          }
-
-          .item-tags {
-            align-items: center;
-          }
-
-          .mr-10 {
-            margin-right: 10px;
-          }
-
-          .gray-text {
-            color: #909399;
-            font-size: 13px;
-          }
-
-        }
-
-        &:last-child{
-          border-bottom: none;
-        }
-        .icon-jiahao{
-          font-size: 12px;
-          margin-right: 5px;
-        }
-      }
-    }
-    .pagination-box{
-      margin-top: 20px;
-      display: flex;
-      justify-content: center;
-    }
   }
 }
 </style>

src/renderer/src/views/resource/store.js

@@ -0,0 +1,74 @@
+import { defineStore } from 'pinia'
+
+const tabs = [
+  {
+    type: '',
+    text: '平台资源',
+    id: 1
+  },
+  {
+    type: '',
+    text: '校本资源',
+    id: 2
+  }
+]
+
+const typeList = [
+  {
+    type: '',
+    text: '全部',
+    id: 1
+  },
+  {
+    type: '',
+    text: '素材',
+    id: 2
+  },
+ 
+  {
+    type: '',
+    text: '课件',
+    id: 4
+  },
+  
+  {
+    type: '',
+    text: '教案',
+    id: 6
+  },
+  
+]
+// 资源格式
+const formatList = [
+  {
+    label: '资源格式',
+    value: -1
+  },
+  {
+    label: 'word',
+    value: 1
+  },
+  {
+    label: 'ppt',
+    value: 2
+  }
+]
+export default defineStore('resource', {
+  state: () => ({
+    tabs,
+    typeList,
+    formatList,
+    curTab: 1,
+    curType: 1,
+    curFormat: -1,
+    searchKey: ''
+  }),
+  actions: {
+    changeTab(val) {
+      this.curTab = val
+    },
+    changeType(val) {
+      this.curType = val
+    }
+  }
+})