electron.vite.config.mjs

@@ -21,8 +21,8 @@ export default defineConfig({
     server: {
       proxy: {
         '/dev-api': {
-          // target: 'http://27.128.240.72:7865',
+          target: 'http://27.128.240.72:7865',
-          target: 'http://192.168.2.52:7863',
+          // target: 'http://192.168.2.52:7863',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1720508953092') format('woff2'),
+  src: url('iconfont.woff2?t=1720613279441') format('woff2'),
-       url('iconfont.woff?t=1720508953092') format('woff'),
+       url('iconfont.woff?t=1720613279441') format('woff'),
-       url('iconfont.ttf?t=1720508953092') format('truetype');
+       url('iconfont.ttf?t=1720613279441') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-jiahao:before {
+  content: "\e602";
+}
+
+.icon-pdf:before {
+  content: "\e803";
+}
+
+.icon-ppt:before {
+  content: "\e806";
+}
+
+.icon-word:before {
+  content: "\e807";
+}
+
 .icon-guanbi:before {
   content: "\e60f";
 }

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

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8721197",
+      "name": "加号",
+      "font_class": "jiahao",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "11441567",
+      "name": "pdf",
+      "font_class": "pdf",
+      "unicode": "e803",
+      "unicode_decimal": 59395
+    },
+    {
+      "icon_id": "11447679",
+      "name": "ppt2",
+      "font_class": "ppt",
+      "unicode": "e806",
+      "unicode_decimal": 59398
+    },
+    {
+      "icon_id": "11447681",
+      "name": "word2",
+      "font_class": "word",
+      "unicode": "e807",
+      "unicode_decimal": 59399
+    },
     {
       "icon_id": "4736203",
       "name": "关闭",

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

@@ -5,7 +5,7 @@
       <i class="iconfont icon-xiangyou"></i>
     </div>
     <div class="book-list">
-      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
+      <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
     </div>
   </div>
   <!--弹窗 选择教材-->
@@ -33,25 +33,32 @@
 import { onMounted, ref } from 'vue';
 import useUserStore from '@/store/modules/user'
 import { listEvaluation } from '@/api/subject'
-import { handleTree } from '@/utils/ruoyi.js'
 
+// 定义要发送的emit事件
+const emit = defineEmits(['nodeClick'])
+// store
 const userStore = useUserStore()
 const { edustage, edusubject, userId } = userStore.user
 //
 const subjectList = ref([])
+const evaluationList = ref([])
 const dialogVisible = ref(false)
+// 当前教材下面单元内容数据
+const treeData = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+  class: 'textbook-tree'
+}
 //当前教材ID
 const curBookId = ref(-1)
 //当前教材名称
 const curBookName = ref('')
+// 上册
+const volumeOne = ref([])
+// 下册
+const volumeTwo = ref([])
 
-//获取教材
-const getSubject = async () => {
-  const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 })
-  subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject)
-  curBookName.value = subjectList.value[0].itemtitle
-  curBookId.value = subjectList.value[0].id
-}
 
 //获取教材下面的单元内容
 const getSubjectContent = async () => {
@@ -62,119 +69,91 @@ const getSubjectContent = async () => {
     pageSize: 500
   }
   const { rows } = await listEvaluation(params)
+  evaluationList.value = rows
+  //获取教材版本
+  await getSubject()
   //上册
-  const beforAry = []
+  volumeOne.value = rows.filter(item => item.level == 1 && item.semester == '上册')
   //下册
-  const nextAry = []
+  volumeTwo.value = rows.filter(item => item.level == 1 && item.semester == '下册')
-  rows.map(item => {
-    if (item.level == 1) {
-      if (item.semester == '上册') {
-        beforAry.push(item)
-      }
-      if (item.semester == '下册') {
-        nextAry.push(item)
-      }
-    }
-  })
-  
-  console.log(beforAry)
-  beforAry.forEach( item =>{
-    let obj = {}
-    if(item.rootid == curBookId){
-      obj.itemtitle = item.itemtitle
-      
-    }
-  })
 
-  console.log(nextAry)
+  getTreeData()
 }
 
 //选择教材
 const changeBook = ({ id, itemtitle }) => {
   curBookId.value = id
   curBookName.value = itemtitle
+  getTreeData()
   setTimeout(() => {
     dialogVisible.value = false
   }, 100);
+
 }
 
-// 图片地址
+const getTreeData = () => {
-const getImageUrl = (url) => {
+  //数据过滤
-  const path = new URL(`${url}`, import.meta.url)
+  let upData = transData(volumeOne.value)
-  return path.href
+  let downData = transData(volumeTwo.value)
+  treeData.value = upData.length ? upData : downData
+}
+
+
+const transData = (data) => {
+  let ary = []
+
+  data.forEach(item => {
+    let obj = {}
+
+    if (item.rootid == curBookId.value) {
+      obj.label = item.itemtitle
+      obj.id = item.id
+      let ary2 = []
+      evaluationList.value.forEach(el => {
+        let obj2 = {}
+        if (item.id == el.parentid) {
+          obj2 = {
+            label: el.itemtitle,
+            id: el.id
+          }
+          ary2.push(obj2)
+        }
+        obj.children = ary2
+      })
+      ary.push(obj)
+    }
+  })
+  return ary
+}
+
+//获取教材
+const getSubject = async () => {
+  const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 })
+  subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject && isHaveUnit(item.id))
+  curBookName.value = subjectList.value[0].itemtitle
+  curBookId.value = subjectList.value[0].id
+}
+
+
+const isHaveUnit = (id) => {
+  return evaluationList.value.some(item => {
+    return item.rootid == id
+  })
+}
+
+const handleNodeClick = (data) => {
+  emit('nodeClick', data)
 }
 
 onMounted(() => {
-  getSubject(),
+  getSubjectContent()
-    getSubjectContent()
 })
 
-const data = [{
-  label: 'Level one 1',
-  children: [
-    {
-      label: 'Level two 1-1',
-      children: [
-        {
-          label: 'Level three 1-1-1',
-        },
-      ],
-    },
-  ],
-},
-{
-  label: 'Level one 2',
-  children: [
-    {
-      label: 'Level two 2-1',
-      children: [
-        {
-          label: 'Level three 2-1-1',
-        },
-      ],
-    },
-    {
-      label: 'Level two 2-2',
-      children: [
-        {
-          label: 'Level three 2-2-1',
-        },
-      ],
-    },
-  ],
-},
-{
-  label: 'Level one 3',
-  children: [
-    {
-      label: 'Level two 3-1',
-      children: [
-        {
-          label: 'Level three 3-1-1',
-        },
-      ],
-    },
-    {
-      label: 'Level two 3-2',
-      children: [
-        {
-          label: 'Level three 3-2-1',
-        },
-      ],
-    },
-  ],
-},]
-const handleNodeClick = () => { }
-const defaultProps = {
-  children: 'children',
-  label: 'label',
-}
-
 </script>
 
 <style lang="scss" scoped>
 .book-wrap {
-  width: 260px;
+  width: 300px;
   height: 100%;
   background: #ffffff;
   border-radius: 10px;
@@ -188,10 +167,11 @@ const defaultProps = {
     color: #3b3b3b;
     cursor: pointer;
     border-bottom: solid #f4f5f7 1px;
+    font-size: 15px;
   }
 
   .book-list {
-    padding: 0 20px;
+    padding-left: 10px;
   }
 }
 
@@ -240,4 +220,15 @@ const defaultProps = {
     height: 70px;
   }
 }
+
+:deep(.el-tree-node) {
+  .el-tree-node__content {
+    height: 40px;
+    &:hover {
+      background-color: #eaf3ff;
+    }
+  }
+
+}
+
 </style>

src/renderer/src/layout/components/Header.vue

@@ -4,43 +4,23 @@
       <h3 class="title" @click="changeTab">AIX智慧课堂</h3>
       <div class="change-tab">
         <ul class="flex">
-          <li class="flex" @click="changePage('/resource')">
+          <li v-for="item in menus" :key="item.path" class="flex"
-            <i class="iconfont icon-resource">&#xe601;</i>
+            :class="currentRoute == item.path ? 'active-li' : ''" @click="changePage(item.path)">
-            <span class="text">资源</span>
+            <i class="iconfont" :class="item.icon"></i>
-          </li>
+            <span class="text">{{ item.name }}</span>
-          <li class="flex" @click="changePage('/prepare')">
-            <i class="iconfont icon-prepare">&#xe6c2;</i>
-            <span class="text">备课</span>
-          </li>
-          <li class="flex" @click="changePage('/teach')">
-            <i class="iconfont icon-teach">&#xe672;</i>
-            <span class="text">授课</span>
           </li>
         </ul>
-        <!-- <el-radio-group v-model="radio1">
-        <el-radio-button label="资源" value="resource" />
-        <el-radio-button label="备课" value="prepare" />
-        <el-radio-button label="授课" value="teach" />
-      </el-radio-group> -->
       </div>
     </div>
 
     <div class="right-section flex">
       <div class="header-tool flex">
         <span title="最小化" @click="minimizeWindow"><i class="iconfont">&#xe650;</i></span>
-        <span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"
+        <span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"><i class="iconfont">{{ isMaxSize ? '&#xe600' :
-          ><i class="iconfont">{{ isMaxSize ? '&#xe600' : '&#xe695' }}</i></span
+          '&#xe695' }}</i></span>
-        >
         <span title="关闭" @click="closeWindow"><i class="iconfont">&#xe608;</i></span>
       </div>
       <div class="user flex">
-<!--        <el-icon color="#409EFF">
-          <UserFilled />
-        </el-icon>
-        <div class="user-info flex">
-          <span>{{ userInfo.nickName }}</span>
-          <span>{{ userInfo.postnames }}</span>
-        </div>-->
         <div class="avatar-container">
           <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
             <div class="avatar-wrapper">
@@ -63,18 +43,45 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
+
 const userStore = useUserStore()
 const userInfo = userStore.user
-console.log(userInfo)
 const { ipcRenderer } = window.electron || {}
-const radio1 = ref('resource')
-
 const isMaxSize = ref(false)
 const router = useRouter()
+const currentRoute = ref('')
+
+
+const menus = ref([
+  {
+    icon: 'icon-jiaoxueziyuan icon-resource',
+    name: '资源',
+    path: '/resource'
+  },
+  {
+    icon: 'icon-beike icon-prepare',
+    name: '备课',
+    path: '/prepare'
+  },
+  {
+    icon: 'icon-jiangke1 icon-teach',
+    name: '授课',
+    path: '/teach'
+  }
+])
+
+// 监听当前路由
+watch(
+  () => router.currentRoute.value,
+  (newValue) => {
+    currentRoute.value = newValue.path
+  },
+  { immediate: true }
+)
 
 // 最小化
 const minimizeWindow = () => {
@@ -138,6 +145,7 @@ function setLayout() {
   display: flex;
   align-items: center;
   width: 50%;
+
   .change-tab {
     -webkit-app-region: no-drag;
     margin-left: 20px;
@@ -149,30 +157,43 @@ function setLayout() {
         flex-direction: column;
         border-radius: 8px;
         margin: 0 5px;
+
         .text {
           font-size: 13px;
         }
+
         .iconfont {
           font-size: 22px;
         }
+
         .icon-resource {
           color: #f99b53;
         }
+
         .icon-prepare {
           color: #b088e8;
         }
+
         .icon-teach {
           color: #367dea;
         }
+
         &:hover {
           background: #d3e3fb;
         }
       }
+
+      .active-li {
+        background: #d3e3fb;
+        color: #409EFF;
+      }
     }
   }
+
   ul {
     -webkit-app-region: no-drag;
   }
+
   .title {
     color: #4b73df;
     font-size: 18px;
@@ -186,20 +207,25 @@ function setLayout() {
   justify-content: space-between;
   padding-bottom: 5px;
   flex-direction: column;
+
   .header-tool {
     padding-top: 5px;
     -webkit-app-region: no-drag;
+
     span {
       border-radius: 3px;
       cursor: pointer;
+
       &:hover {
         background-color: #c4c4c4;
       }
+
       .iconfont {
         margin: 0 10px;
       }
     }
   }
+
   .user {
     .user-info {
       padding-right: 5px;
@@ -209,6 +235,7 @@ function setLayout() {
     }
   }
 }
+
 .avatar-container {
   -webkit-app-region: no-drag;
 
@@ -221,6 +248,7 @@ function setLayout() {
       border-radius: 10px;
       margin-top: 8px;
     }
+
     .user-avatar:hover {
       cursor: pointer;
     }

src/renderer/src/views/login/index.vue

@@ -89,7 +89,7 @@ const submitForm = async (formEl) => {
       }
     }
   })
-}
+} 
 
 const getCookie = () => {
   const username = Cookies.get('username')
@@ -145,13 +145,6 @@ const closeWindow = () => {
       padding: 34px 42px;
       position: relative;
     }
-    .login-qr {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 66px;
-      height: 66px;
-    }
     .welcome {
       padding-top: 35px;
       p {
@@ -162,18 +155,6 @@ const closeWindow = () => {
         font-weight: 700;
         font-size: 26px;
       }
-      .sub-welcome {
-        padding: 10px;
-        font-size: 18px;
-        font-weight: 700;
-        text-align: center;
-        color: #ffffff;
-        line-height: 25px;
-        letter-spacing: 0.26px;
-        opacity: 0.96;
-        background: #1748fd;
-        border-radius: 22px 22px 2px 22px;
-      }
     }
     .welcome-img {
       margin-top: 20px;
@@ -210,40 +191,6 @@ const closeWindow = () => {
       cursor: pointer;
     }
   }
-
-  .more {
-    margin-top: 30px;
-    .title-box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      > p {
-        margin-bottom: 0;
-      }
-    }
-    .line {
-      width: 114px;
-      height: 1px;
-      background: #e6e6e6;
-    }
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      color: #a1aebe;
-      margin: 0 19px;
-    }
-    .login-type {
-      padding: 0 5px;
-      margin-top: 25px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      > img {
-        width: 30px;
-        height: 30px;
-      }
-    }
-  }
 }
 .header-tool {
   position: absolute;

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

@@ -1,25 +1,256 @@
 <template>
-  <div class="page-resource">
+  <div class="page-resource flex">
-    <ChooseTextbook/>
+    <ChooseTextbook @nodeClick="nodeClick" />
+
+    <div class="page-right">
+      <div class="right-header">
+        <el-row justify="space-between">
+          <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 useUserStore from '@/store/modules/user'
+import { ref, toRaw } from 'vue'
-import ChooseTextbook from '@/components/choose-textbook/index.vue' 
+import ChooseTextbook from '@/components/choose-textbook/index.vue'
 
-const userStore = useUserStore()
+const keyVal = ref('')
+const activeVal = ref(1)
+const tabs = [
+  {
+    type: '',
+    text: '平台资源',
+    id: 1
+  },
+  {
+    type: '',
+    text: '校本资源',
+    id: 2
+  }
+]
 
-  // const { ipcRenderer } = window.electron
-  // ipcRenderer.send('set-winsize',{x:1000,y: 700})
 
-  const userInfo = userStore.user
+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})
+
+const nodeClick = (data) => {
+  // console.log(toRaw(data))
+}
 
 </script>
 
 <style lang="scss" scoped>
-.page-resource{
+.page-resource {
   padding-top: 20px;
   height: 100%;
+
+  .page-right {
+    flex: 1;
+    margin-left: 20px;
+    height: 100%;
+    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>