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

@@ -176,6 +176,7 @@ onMounted(() => {
     color: #3b3b3b;
     cursor: pointer;
     border-bottom: solid #f4f5f7 1px;
+    font-size: 15px;
   }
 
   .book-list {

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

@@ -1,23 +1,124 @@
 <template>
   <div class="page-resource flex">
+    <ChooseTextbook @nodeClick="nodeClick" />
 
-    <ChooseTextbook />
     <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>
     </div>
   </div>
 </template>
 
 <script setup>
-import useUserStore from '@/store/modules/user'
+import { ref, toRaw } from '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 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 { ipcRenderer } = window.electron
 // ipcRenderer.send('set-winsize',{x:1000,y: 700})
 
-const userInfo = userStore.user
+const nodeClick = (data) => {
+  // console.log(toRaw(data))
+}
 
 </script>
 
@@ -33,6 +134,35 @@ const userInfo = userStore.user
     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;
+        }
+      }
+
+    }
   }
 }
 </style>