页面骨架修改

admin/src/assets/scss/style.css

@@ -1,90 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

admin/src/layout/index.vue

@@ -5,14 +5,16 @@
     </el-aside>
     <el-container class="main-container" :class="{ hidderContainer: store.collapse }">
       <el-header><Header /></el-header>
-      <el-main>Main</el-main>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script setup>
 import Menu from './menu/Menu.vue'
-import Header from './header/Header.vue'
+import Header from './header/index.vue'
 import { useStore } from '../store'
 
 const store = useStore()
@@ -28,7 +30,7 @@ const store = useStore()
   top: 0;
   right: 0;
   z-index: 9;
-  transition: all 0.45s;
+  transition: all 0.43s;
   &.hidderContainer {
     // 当store中的collapse为true时，重新计算main-container的宽度
     width: calc(100% - 65px);

admin/src/layout/menu/Menu.vue

@@ -1,44 +1,51 @@
 <template>
   <el-menu
-    active-text-color="#409EFF"
+    active-text-color="#25A77D"
     background-color="#304156"
-    default-active="1"
+    :default-active="$router.currentRoute.value.path"
     text-color="#fff"
     unique-opened="true"
     :collapse="store.collapse"
+    router="true"
   >
     <!-- 首页栏 -->
-    <el-sub-menu index="1">
-      <template #title>
-        <el-icon><HomeFilled /></el-icon>
-        <span>首页</span>
-      </template>
-      <el-menu-item index="1-1">首页展示</el-menu-item>
-    </el-sub-menu>
+    <el-menu-item index="/">
+      <el-icon><HomeFilled /></el-icon>
+      <span>首页</span>
+    </el-menu-item>
     <!-- 文章管理  -->
     <el-sub-menu index="2">
       <template #title>
         <el-icon><Document /></el-icon>
         <span>文章管理</span>
       </template>
-      <el-menu-item index="2-1">发布文章</el-menu-item>
-      <el-menu-item index="2-2">文章列表</el-menu-item>
-      <el-menu-item index="2-3">标签管理</el-menu-item>
-      <el-menu-item index="2-4">分类管理</el-menu-item>
+      <el-menu-item index="/article">发布文章</el-menu-item>
+      <el-menu-item index="/article-list">文章列表</el-menu-item>
+      <el-menu-item index="/tags">标签管理</el-menu-item>
+      <el-menu-item index="/categories">分类管理</el-menu-item>
     </el-sub-menu>
-    <!-- 用户管理  -->
+    <!-- 系统管理 -->
     <el-sub-menu index="3">
+      <template #title>
+        <el-icon><Setting /></el-icon>
+        <span>系统管理</span>
+      </template>
+      <el-menu-item index="/page">页面图片</el-menu-item>
+      <el-menu-item index="/about">关于我</el-menu-item>
+    </el-sub-menu>
+    <!-- 用户管理  -->
+    <el-sub-menu index="4">
       <template #title>
         <el-icon><UserFilled /></el-icon>
         <span>用户管理</span>
       </template>
-      <el-menu-item index="3-1">用户列表</el-menu-item>
+      <el-menu-item index="/users">用户列表</el-menu-item>
     </el-sub-menu>
   </el-menu>
 </template>
 
 <script setup>
-import { HomeFilled, Document, UserFilled } from '@element-plus/icons-vue'
+import { HomeFilled, Document, UserFilled, Setting } from '@element-plus/icons-vue'
 import { useStore } from '../../store'
 
 const store = useStore()

admin/src/router/index.js

@@ -4,7 +4,42 @@ const routes = [
   {
     path: '/',
     name: '/',
-    component: () => import('../layout/index.vue')
+    redirect: '/home',
+    component: () => import('../layout/index.vue'),
+    children: [
+      {
+        path: '/home',
+        component: () => import('@/views/home/Home.vue')
+      },
+      {
+        path: '/article',
+        component: () => import('@/views/article/Article.vue')
+      },
+      {
+        path: '/article-list',
+        component: () => import('@/views/article/ArticleList.vue')
+      },
+      {
+        path: '/tags',
+        component: () => import('@/views/tag/Tag.vue')
+      },
+      {
+        path: '/categories',
+        component: () => import('@/views/category/Category.vue')
+      },
+      {
+        path: '/page',
+        component: () => import('@/views/page/Page.vue')
+      },
+      {
+        path: '/about',
+        component: () => import('@/views/about/About.vue')
+      },
+      {
+        path: '/users',
+        component: () => import('@/views/user/User.vue')
+      }
+    ]
   },
   {
     path: '/login',

admin/src/views/about/About.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

admin/src/views/article/Article.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

admin/src/views/article/ArticleList.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

admin/src/views/home/Home.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>首页</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

admin/src/views/page/Page.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

admin/src/views/user/User.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>