教材列表

main.js

@@ -15,6 +15,7 @@ const createWindow = () => {
       nodeIntegration: true, // 是否集成 Node.js
       enableRemoteModule: true, // 是否启用 remote 模块
       webSecurity: false, // 是否禁用同源策略
+      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
     },
   });
 

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@electron-forge/plugin-fuses": "^7.3.0",
-        "axios": "^1.6.7",
+        "axios": "^1.6.8",
         "core-js": "^3.36.0",
         "electron-squirrel-startup": "^1.0.0",
         "element-ui": "^2.15.14",
@@ -37,15 +37,15 @@
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/preload-webpack-plugin": "^2.0.0",
         "compression-webpack-plugin": "^6.1.2",
-        "electron": "^29.1.0",
-        "eslint": "^8.56.0",
+        "electron": "^29.1.4",
+        "eslint": "^8.57.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-vue": "^9.22.0",
+        "eslint-plugin-vue": "^9.23.0",
         "nodemon": "^3.1.0",
         "patch-package": "^8.0.0",
         "postcss-html": "^1.6.0",
         "prettier": "^3.2.5",
-        "sass": "^1.71.1",
+        "sass": "^1.72.0",
         "sass-loader": "^14.1.1",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
@@ -5866,11 +5866,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -8219,9 +8219,9 @@
       "dev": true
     },
     "node_modules/electron": {
-      "version": "29.1.0",
-      "resolved": "https://registry.npmmirror.com/electron/-/electron-29.1.0.tgz",
-      "integrity": "sha512-giJVIm0sWVp+8V1GXrKqKTb+h7no0P3ooYqEd34AD9wMJzGnAeL+usj+R0155/0pdvvP1mgydnA7lcaFA2M9lw==",
+      "version": "29.1.4",
+      "resolved": "https://registry.npmmirror.com/electron/-/electron-29.1.4.tgz",
+      "integrity": "sha512-IWXys0SqgmIfrqXusUGQC0gGG7CCqA5vfmNsUMj8dFkAnK3lisKyjSESStWlrsste/OX/AAC5wsVlf23reUNnw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -8927,9 +8927,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.22.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.22.0.tgz",
-      "integrity": "sha512-7wCXv5zuVnBtZE/74z4yZ0CM8AjH6bk4MQGm7hZjUC2DBppKU5ioeOk5LGSg/s9a1ZJnIsdPLJpXnu1Rc+cVHg==",
+      "version": "9.23.0",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.23.0.tgz",
+      "integrity": "sha512-Bqd/b7hGYGrlV+wP/g77tjyFmp81lh5TMw0be9093X02SyelxRRfCI6/IsGq/J7Um0YwB9s0Ry0wlFyjPdmtUw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -9939,9 +9939,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "engines": {
         "node": ">=4.0"
       },
@@ -16120,9 +16120,9 @@
       "devOptional": true
     },
     "node_modules/sass": {
-      "version": "1.71.1",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.71.1.tgz",
-      "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==",
+      "version": "1.72.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz",
+      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@electron-forge/plugin-fuses": "^7.3.0",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "core-js": "^3.36.0",
     "electron-squirrel-startup": "^1.0.0",
     "element-ui": "^2.15.14",
@@ -44,13 +44,13 @@
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "compression-webpack-plugin": "^6.1.2",
-    "electron": "^29.1.0",
-    "eslint": "^8.56.0",
+    "electron": "^29.1.4",
+    "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.22.0",
+    "eslint-plugin-vue": "^9.23.0",
     "prettier": "^3.2.5",
     "nodemon": "^3.1.0",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
     "patch-package": "^8.0.0",
     "postcss-html": "^1.6.0",

preload.js

@@ -0,0 +1,7 @@
+const { contextBridge } = require('electron');
+
+// 公开给渲染进程的 API
+contextBridge.exposeInMainWorld('version', {
+  node: process.versions.node,
+  chrome: process.versions.chrome,
+});

src/router/modules/index.js

@@ -1,3 +1,4 @@
 import { homePage, loginPage, NotFoundPage } from './basic';
+import { createTextbookPage } from './textbook';
 
-export const routes = [homePage, loginPage, NotFoundPage];
+export const routes = [homePage, loginPage, createTextbookPage, NotFoundPage];

src/router/modules/textbook.js

@@ -0,0 +1,13 @@
+import DEFAULT from '@/layouts/default';
+
+export const createTextbookPage = {
+  path: '/textbook',
+  component: DEFAULT,
+  redirect: '/textbook/create',
+  children: [
+    {
+      path: 'create',
+      component: () => import('@/views/textbook/create.vue'),
+    },
+  ],
+};

src/views/home/index.vue

@@ -1,10 +1,33 @@
 <template>
   <div class="home">
-    <div></div>
-    <div></div>
-    <div></div>
+    <div class="home-title">
+      <span>教材列表</span>
+      <el-button type="primary" @click="createTextbook">创建教材</el-button>
+    </div>
+    <div class="home-tabs">
+      <span
+        v-for="{ label, value } in tabList"
+        :key="value"
+        :class="['tab-item', value === tab ? 'active' : '']"
+        @click="tab = value"
+      >
+        {{ label }}
+      </span>
+    </div>
+    <div>
+      <span>搜索</span>
+      <el-input v-model="search" />
+    </div>
     <el-table :data="data" height="100%">
-      <el-table-column prop="name" label="教材名称" width="180" />
+      <el-table-column prop="number" label="序号" width="64" />
+      <el-table-column prop="name" label="教材名称" width="248" />
+      <el-table-column prop="tags" label="标签" width="124" />
+      <el-table-column prop="creator" label="创建者" width="160" />
+      <el-table-column prop="create_time" label="创建时间" width="120" />
+      <el-table-column prop="recently_edited" label="最近编辑" width="100" />
+      <el-table-column prop="recently_edited_time" label="最近编辑时间" width="120" />
+      <el-table-column prop="memo" label="简介" />
+      <el-table-column prop="operation" label="操作" width="245" fixed="right" />
     </el-table>
     <el-pagination
       background
@@ -27,12 +50,27 @@ export default {
   data() {
     return {
       data: undefined,
+      search: '',
       cur_page: 1,
       page_capacity: 10,
       total: 0,
+      tab: 'draft',
+      tabList: [
+        {
+          label: '已上架',
+          value: 'published',
+        },
+        {
+          label: '草稿',
+          value: 'draft',
+        },
+      ],
     };
   },
   methods: {
+    createTextbook() {
+      this.$router.push('/textbook/create');
+    },
     changePage(number) {
       this.cur_page = number;
     },
@@ -45,10 +83,41 @@ export default {
 
 <style lang="scss" scoped>
 .home {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
   min-height: calc(100% - 16px);
   padding: 24px;
   margin: 0 24px 16px;
   background-color: #fff;
   border-radius: 4px;
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+
+    &:first-child {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  &-tabs {
+    display: flex;
+    column-gap: 10px;
+
+    .tab-item {
+      padding: 5px 16px;
+      font-size: 14px;
+      cursor: pointer;
+      border-radius: 16px;
+
+      &.active {
+        font-weight: bold;
+        color: $main-color;
+        background-color: #f2f3f5;
+      }
+    }
+  }
 }
 </style>

src/views/textbook/create.vue

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'CreateTextbookPage',
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>