页面重新排版

src/icons/svg/manage.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752644454454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5313" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M384 0H85.333333C38.4 0 0 38.4 0 85.333333v298.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h298.666667c46.933333 0 85.333333-38.4 85.333333-85.333333V85.333333c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 384H85.333333V85.333333h298.666667v298.666667z m0 42.666667v-42.666667 42.666667zM938.666667 0H640c-46.933333 0-85.333333 38.4-85.333333 85.333333v298.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h298.666667c46.933333 0 85.333333-38.4 85.333333-85.333333V85.333333c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 384H640V85.333333h298.666667v298.666667zM384 554.666667H85.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v298.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h298.666667c46.933333 0 85.333333-38.4 85.333333-85.333333V640c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 384H85.333333V640h298.666667v298.666667z m0 42.666666v-42.666666 42.666666zM938.666667 554.666667H640c-46.933333 0-85.333333 38.4-85.333333 85.333333v298.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h298.666667c46.933333 0 85.333333-38.4 85.333333-85.333333V640c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 384H640V640h298.666667v298.666667z" p-id="5314" fill="#ffffff"></path></svg>

src/layouts/default/header/index.vue

@@ -47,17 +47,20 @@ export default {
     // 用户类型与菜单映射
     const projectListMap = {
       USER: [
-        { key: '', name: '个人工作台' },
-        { key: 'project_manage', name: '项目管理' },
-        { key: 'create_project', name: '创建项目' },
+        { key: 'home', name: '主页' },
+        { key: 'personal_workbench/project', name: '教材管理' },
+        { key: 'personal_workbench/edit_task', name: '教材制作' },
+        { key: 'personal_workbench/check_task', name: '教材审核' },
         { key: 'personal_center', name: '个人中心' },
       ],
       ORG_MANAGER: [
+        { key: 'home', name: '主页' },
         { key: 'project_manage/org/project', name: '项目管理' },
         { key: 'user_manage_org', name: '用户管理' },
         { key: 'personal_center', name: '个人中心' },
       ],
       ADMIN: [
+        { key: 'home', name: '主页' },
         { key: 'org_manage', name: '机构管理' },
         { key: 'user_manage', name: '用户管理' },
         { key: 'system_config', name: '系统配置' },
@@ -73,7 +76,7 @@ export default {
     };
   },
   created() {
-    let path = this.$route.path.split('/')[1] === 'personal_workbench' ? '' : this.$route.path.replace(/^\//, '');
+    let path = this.$route.path.replace(/^\//, '');
     this.activePro = path;
     this.LoginNavIndex = this.projectList.findIndex((item) => item.key === path);
   },

src/layouts/home/footer/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="home-footer">
+    <div class="email"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomeFooter',
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home-footer {
+  height: 48px;
+  padding: 8px;
+  background-color: #fff;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 10%);
+}
+</style>

src/layouts/home/header/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <header class="header">
+    <div class="logo" @click="$router.push('/home')">
+      <el-image class="logo-image" :src="require('../../../assets/gcls_logo.png')" />
+    </div>
+
+    <div v-if="!token" class="selectLoginOrRegistration">
+      <span>登录</span>
+    </div>
+    <!-- 用户头像和用户名 -->
+    <el-dropdown v-else trigger="click" class="user">
+      <span class="el-dropdown-link">
+        <img
+          class="avatar"
+          :src="token.image_url ? token.image_url : require('@/assets/header/avatar-default.png')"
+          alt="head portrait"
+        />
+        <span class="real_name">{{ token.user_real_name }}</span>
+      </span>
+      <el-dropdown-menu slot="dropdown" class="user-menu">
+        <el-dropdown-item @click.native="$router.push('/personal_center')">
+          <img :src="require('@/assets/header/personal-center.png')" /><span>个人中心</span>
+        </el-dropdown-item>
+        <el-dropdown-item @click.native="logout">
+          <img :src="require('@/assets/header/exit.png')" /><span>退出登录</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </header>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth';
+
+export default {
+  name: 'HomeHeader',
+  data() {
+    const token = getToken();
+    return {
+      token: this.$store.state.user || token,
+    };
+  },
+  created() {},
+  methods: {
+    logout() {
+      this.$store.dispatch('user/signOut');
+      this.$router.push('/login');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  display: flex;
+  column-gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  height: $header-h;
+  padding: 0 24px;
+  overflow: hidden;
+  background-color: #fff;
+  border-bottom: 1px solid #ebebeb;
+
+  .logo {
+    flex: 1;
+    height: 48px;
+    margin-right: 36px;
+    cursor: pointer;
+
+    &-image {
+      height: 100%;
+    }
+  }
+
+  .user {
+    cursor: pointer;
+
+    .el-dropdown-link {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+
+      .real_name {
+        display: inline-block;
+        padding-left: 10px;
+        font-size: 16px;
+        color: #000;
+        vertical-align: super;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.user-menu {
+  min-width: 156px;
+
+  .el-dropdown-menu__item {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #000;
+
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+    }
+  }
+}
+</style>

src/layouts/home/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="app">
+    <LayoutHeader />
+    <div class="app-container" :style="{ height: `calc(100vh - 112px)` }">
+      <router-view />
+    </div>
+    <LayoutFooter />
+  </div>
+</template>
+
+<script>
+import LayoutHeader from './header/index.vue';
+import LayoutFooter from './footer/index.vue';
+
+export default {
+  name: 'LayoutDefault',
+  components: {
+    LayoutHeader,
+    LayoutFooter,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+
+  &-container {
+    overflow: auto;
+  }
+}
+</style>

src/router/guard/index.js

@@ -6,17 +6,6 @@ NProgress.configure({ showSpinner: false });
 
 const whiteList = ['/login', '/image_change', '/register']; // 重定向白名单
 
-// 用户类型对应的跳转路径
-export const userTypeToJump = {
-  USER: '/',
-  ORG_MANAGER: '/project_manage/org/project',
-  ADMIN: '/org_manage',
-};
-
-export function getUserTypeToJump(type) {
-  return userTypeToJump[type] || '/';
-}
-
 export function setupRouterGuard(router) {
   // 全局前置守卫
   router.beforeEach(async (to, from, next) => {
@@ -24,11 +13,9 @@ export function setupRouterGuard(router) {
 
     const token = getToken();
 
-    const userType = token?.user_type ?? '';
-
     if (token) {
       if (to.path === '/login') {
-        next({ path: getUserTypeToJump(userType) });
+        next({ path: '/home' });
         NProgress.done();
         return;
       }

src/router/modules/basic.js

@@ -1,4 +1,5 @@
 import DEFAULT from '@/layouts/default';
+import HOME from '@/layouts/home';
 
 export const loginPage = {
   path: '/login',
@@ -6,6 +7,19 @@ export const loginPage = {
   component: () => import('@/views/login'),
 };
 
+export const homePage = {
+  path: '/home',
+  component: HOME,
+  redirect: '/home/index',
+  children: [
+    {
+      path: 'index',
+      name: 'Home',
+      component: () => import('@/views/home/index.vue'),
+    },
+  ],
+};
+
 export const ImageChangePage = {
   path: '/image_change',
   name: 'ImageChange',
@@ -84,7 +98,6 @@ export const SystemConfigPage = {
       name: 'MailConfig',
       component: () => import('@/views/system_config'),
     },
-
   ],
 };
 

src/router/modules/index.js

@@ -1,5 +1,6 @@
 import {
   loginPage,
+  homePage,
   NotFoundPage,
   ImageChangePage,
   RegisterPage,
@@ -13,6 +14,7 @@ import CoursewareRouters from './courseware';
 
 export const routes = [
   loginPage,
+  homePage,
   ...ProjectRouters,
   ...CoursewareRouters,
   ImageChangePage,

src/router/modules/project.js

@@ -1,4 +1,5 @@
 import DEFAULT from '@/layouts/default';
+import HOME from '@/layouts/home';
 
 // 个人工作台
 const personalWorkPage = {
@@ -177,8 +178,8 @@ const projectPage = {
 const createProjectPage = {
   path: '/create_project',
   name: 'CreateProject',
-  component: DEFAULT,
-  redirect: '/create_project/start',
+  component: HOME,
+  redirect: '/create_project/create',
   meta: {
     title: '创建项目',
     icon: 'practice',

src/views/book/courseware/preview/components/3d_model/3DModelPreview.vue

@@ -62,9 +62,11 @@ export default {
   },
   methods: {
     iconName() {
+      if (this.data.model_list.length === 0) return 'fullscreen-btn';
       return this.loaded ? (this.isFullScreen ? 'exit-fullscreen' : 'fullscreen-btn') : 'loading';
     },
     icon() {
+      if (this.data.model_list.length === 0) return '';
       return this.loaded ? (this.isFullScreen ? 'exit-fullscreen' : 'fullscreen') : 'loading';
     },
     initThree() {
@@ -321,6 +323,7 @@ export default {
 
   .three {
     position: relative;
+    min-height: 104px;
     overflow: hidden;
 
     .loading {

src/views/create_project/createProject.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="create-project">
+    <div class="create-project-header">
+      <h2>创建项目</h2>
+    </div>
     <el-form
       ref="projectForm"
       :inline="true"
@@ -93,7 +96,7 @@
         </el-input>
       </el-form-item>
       <el-form-item class="submit-button">
-        <el-button @click="$router.push('/create_project/start')">取消</el-button>
+        <el-button @click="$router.push('/home')">取消</el-button>
         <el-button type="primary" @click="createProject">确定</el-button>
       </el-form-item>
     </el-form>
@@ -209,6 +212,10 @@ export default {
   min-height: calc(100% - 10px);
   margin: 5px auto;
 
+  &-header {
+    margin-left: 40px;
+  }
+
   .project-form {
     .el-input,
     .el-select {

src/views/home/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="home">
+    <div class="home-top">
+      <el-button class="create" size="medium" @click="jump('/create_project')">
+        教材创建 <i class="el-icon-plus"> </i>
+      </el-button>
+    </div>
+    <div class="home-content">
+      <div
+        v-for="{ color, title, path, icon } in itemList"
+        :key="title"
+        class="item"
+        :style="{ backgroundColor: color }"
+        @click="jump(path)"
+      >
+        <span class="title">{{ title }}</span>
+        <span class="icon" :style="{ backgroundColor: color }">
+          <SvgIcon :icon-class="icon" size="36" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomePage',
+  data() {
+    return {
+      itemList: [
+        {
+          color: '#667EE5',
+          title: '教材管理',
+          path: '/personal_workbench/project',
+          icon: 'manage',
+        },
+        {
+          color: '#F5B131',
+          title: '教材制作',
+          path: '/personal_workbench/edit_task',
+          icon: 'make',
+        },
+        {
+          color: '#E25E5C',
+          title: '教材审核',
+          path: '/personal_workbench/check_task',
+          icon: 'audit',
+        },
+      ],
+    };
+  },
+  methods: {
+    jump(path) {
+      this.$router.push({ path });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px;
+  background-color: #f1f1f1;
+
+  &-top {
+    display: flex;
+    justify-content: flex-end;
+    margin: 40px 20px 8%;
+
+    .create {
+      color: #f5f5f5;
+      background-color: #46bc84;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    justify-content: space-evenly;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: 15%;
+      min-width: 300px;
+      aspect-ratio: 3 / 4;
+      padding: 4% 0 2%;
+      cursor: pointer;
+      border-radius: 8px;
+
+      .title {
+        font-size: 36px;
+        font-weight: bold;
+        color: #fff;
+        text-align: center;
+      }
+
+      .icon {
+        width: 64px;
+        height: 64px;
+        overflow: hidden;
+        line-height: 84px;
+        text-align: center;
+        filter: brightness(1.15) saturate(1.1);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

src/views/login/index.vue

@@ -53,7 +53,6 @@
 import md5 from 'md5';
 import { GetLogo } from '@/api/app';
 import { setConfig, getLocalStore, setLocalStore } from '@/utils/auth';
-import { getUserTypeToJump } from '@/router/guard';
 import { updateBaseURL } from '@/utils/http';
 
 import UserAgreement from './userAgreement.vue';
@@ -113,7 +112,7 @@ export default {
         this.$store
           .dispatch('user/login', _form)
           .then((user_type) => {
-            this.$router.push({ path: getUserTypeToJump(user_type) });
+            this.$router.push({ path: '/home' });
           })
           .catch(() => {});
       });

src/views/personal_workbench/check_task/audit/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="audit">
-    <MenuPage cur-key="check_task" />
+    <MenuPage only-key="/personal_workbench/check_task" />
 
     <CommonPreview :id="id" ref="preview" :project-id="project_id" :is-audit="true">
       <template #operator="{ courseware }">

src/views/personal_workbench/check_task/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="check-task">
-    <MenuPage cur-key="check_task" />
+    <MenuPage only-key="/personal_workbench/check_task" />
 
     <div class="check-main">
       <div class="textbook-container">

src/views/personal_workbench/common/menu.vue

@@ -19,21 +19,32 @@ export default {
   props: {
     curKey: {
       type: String,
-      default: 'edit_task',
+      default: '/personal_workbench/project',
+    },
+    onlyKey: {
+      type: String,
+      default: '',
     },
   },
   data() {
+    let subMenuList = [
+      { key: '/personal_workbench/project', name: '我的项目' },
+      { key: '/project_manage/project', name: '项目管理' },
+      { key: '/project_manage/book', name: '已上架教材' },
+    ];
+
+    const onlyMenuList = [
+      { key: '/personal_workbench/edit_task', name: '我的编辑任务' },
+      { key: '/personal_workbench/check_task', name: '我的审校任务' },
+    ];
+
+    if (this.onlyKey) {
+      subMenuList = [onlyMenuList.find((item) => item.key === this.onlyKey)];
+    }
     return {
-      activeKey: this.curKey,
+      activeKey: this.onlyKey ? this.onlyKey : this.curKey,
       // 子菜单列表
-      subMenuList: [
-        { key: 'edit_task', name: '我的编辑任务' },
-        {
-          key: 'check_task',
-          name: '我的审校任务',
-        },
-        { key: 'project', name: '我的项目' },
-      ],
+      subMenuList,
     };
   },
   methods: {
@@ -44,7 +55,7 @@ export default {
     changeSubMenu(key) {
       if (key === this.activeKey) return;
       this.activeKey = key;
-      this.$router.push({ path: `/personal_workbench/${key}` });
+      this.$router.push({ path: key });
     },
   },
 };

src/views/personal_workbench/edit_task/edit/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="edit-task">
-    <MenuPage cur-key="edit_task" />
+    <MenuPage only-key="/personal_workbench/edit_task" />
 
     <div class="edit-task__header">
       <div class="menu-container">

src/views/personal_workbench/edit_task/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="edit-task">
-    <MenuPage />
+    <MenuPage only-key="/personal_workbench/edit_task" />
 
     <div class="edit-main">
       <div class="textbook-container">

src/views/personal_workbench/edit_task/preview/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="task-preview">
-    <MenuPage cur-key="edit_task" />
+    <MenuPage only-key="/personal_workbench/edit_task" />
 
     <CommonPreview :id="id" ref="preview" :project-id="project_id">
       <template #operator="{ courseware }">

src/views/personal_workbench/project/ProductionEditorialManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="production-editorial">
-    <MenuPage cur-key="project" />
+    <MenuPage cur-key="/personal_workbench/project" />
 
     <div class="production-editorial__header">
       <span class="name">{{ project_info.name }}</span>

src/views/personal_workbench/project/ProductionResourceManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="production-resource">
-    <MenuPage cur-key="project" />
+    <MenuPage cur-key="/personal_workbench/project" />
 
     <div class="production-resource-main">
       <div class="textbook-container">
@@ -123,7 +123,7 @@
             </el-popover>
           </div>
         </div>
-        <PaginationPage ref="pagination" :pageSize="20" :total="total" @getList="queryList" />
+        <PaginationPage ref="pagination" :page-size="20" :total="total" @getList="queryList" />
       </div>
     </div>
     <!-- 上传 -->

src/views/personal_workbench/project/ProjectInfoManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="project-info">
-    <MenuPage cur-key="project" />
+    <MenuPage cur-key="/personal_workbench/project" />
 
     <div class="project-info__header">
       <div class="menu-container">

src/views/personal_workbench/project/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="project">
-    <MenuPage cur-key="project" />
+    <MenuPage cur-key="/personal_workbench/project" />
 
     <div class="project-list">
       <el-table :data="list">

src/views/project_manage/book/BookPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="book-preview">
-    <ProjectMenu cur-key="book" />
+    <MenuPage cur-key="/project_manage/book" />
 
     <CommonPreview ref="preview" :project-id="project_id" :is-show-audit="false" :is-book="true">
       <template #operator="{ courseware }">
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import ProjectMenu from '@/views/project_manage/common/ProjectMenu.vue';
+import MenuPage from '@/views/personal_workbench/common/menu.vue';
 import CommonPreview from '@/components/CommonPreview.vue';
 
 import { isTrue } from '@/utils/common';
@@ -21,7 +21,7 @@ import { isTrue } from '@/utils/common';
 export default {
   name: 'BookPreview',
   components: {
-    ProjectMenu,
+    MenuPage,
     CommonPreview,
   },
   data() {

src/views/project_manage/book/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="book">
-    <ProjectMenu cur-key="book" />
+    <MenuPage cur-key="/project_manage/book" />
 
     <div class="book-list">
       <el-table :data="list">
@@ -39,7 +39,7 @@
 
 <script>
 import PaginationPage from '@/components/PaginationPage.vue';
-import ProjectMenu from '../common/ProjectMenu.vue';
+import MenuPage from '@/views/personal_workbench/common/menu.vue';
 
 import { PageQueryMyProjectYSJBookList_Leader } from '@/api/list';
 import { isTrue } from '@/utils/common';
@@ -48,7 +48,7 @@ export default {
   name: 'BookPage',
   components: {
     PaginationPage,
-    ProjectMenu,
+    MenuPage,
   },
   data() {
     return {

src/views/project_manage/project/ProjectMindMap.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="project-mind-map">
-    <ProjectMenu cur-key="project" />
+    <MenuPage cur-key="/project_manage/project" />
+
     <div class="project-mind-map__header">
       <span class="name">{{ project_info.name }}</span>
       <div class="courseware">
@@ -23,7 +24,7 @@
 </template>
 
 <script>
-import ProjectMenu from '@/views/project_manage/common/ProjectMenu.vue';
+import MenuPage from '@/views/personal_workbench/common/menu.vue';
 import MindMap from '@/components/MindMap.vue';
 import { GetProjectBaseInfo } from '@/api/project';
 import { MangerGetBookMindMap, MangerGenerateMindMapByBookContent, MangerSaveBookMindMap } from '@/api/book';
@@ -31,7 +32,7 @@ import { MangerGetBookMindMap, MangerGenerateMindMapByBookContent, MangerSaveBoo
 export default {
   name: 'ProjectMindMap',
   components: {
-    ProjectMenu,
+    MenuPage,
     MindMap,
   },
   data() {

src/views/project_manage/project/ProjectPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="audit">
-    <ProjectMenu cur-key="project" />
+    <MenuPage cur-key="/project_manage/project" />
 
     <CommonPreview ref="preview" :project-id="project_id">
       <template #operator="{ courseware }">
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import ProjectMenu from '@/views/project_manage/common/ProjectMenu.vue';
+import MenuPage from '@/views/personal_workbench/common/menu.vue';
 import CommonPreview from '@/components/CommonPreview.vue';
 import RequestBook from './components/RequestBook.vue';
 
@@ -29,7 +29,7 @@ import { RequestShangjiaBook, RequestRollbackProject } from '@/api/project';
 export default {
   name: 'AuditTaskPage',
   components: {
-    ProjectMenu,
+    MenuPage,
     CommonPreview,
     RequestBook,
   },

src/views/project_manage/project/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="project-manage">
-    <ProjectMenu cur-key="project" />
+    <MenuPage cur-key="/project_manage/project" />
 
     <div class="project-manage-list">
       <el-table :data="list">
@@ -40,7 +40,7 @@
 
 <script>
 import PaginationPage from '@/components/PaginationPage.vue';
-import ProjectMenu from '../common/ProjectMenu.vue';
+import MenuPage from '@/views/personal_workbench/common/menu.vue';
 
 import { PageQueryMyProjectList_Leader } from '@/api/list';
 import { isTrue } from '@/utils/common';
@@ -49,7 +49,7 @@ export default {
   name: 'ProjectManage',
   components: {
     PaginationPage,
-    ProjectMenu,
+    MenuPage,
   },
   data() {
     return {