基本完成了前端页面的结构，但内容还没有完成

src/App.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Layout from '@/layouts/index.vue'
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+<style lang="less" scoped>
+// 保持原有样式
+</style>

src/index.vue

@@ -1,147 +0,0 @@
-<script setup>
-import { Setting } from "@element-plus/icons-vue";
-const handleOpen = (key, keyPath) => {
-  console.log(key, keyPath);
-};
-const handleClose = (key, keyPath) => {
-  console.log(key, keyPath);
-};
-</script>
-<template>
-  <el-container class="app-layout">
-    <el-aside width="200px" class="app-side">
-      <div class="logo">
-        <span>ADMIN UI</span>
-      </div>
-      <el-menu default-active="/home" class="side-menu" @open="handleOpen" @close="handleClose" router>
-        <el-menu-item index="/home">
-          <el-icon>
-            <HomeFilled />
-          </el-icon>
-          <span>⾸⻚</span>
-        </el-menu-item>
-        <el-sub-menu index="/system">
-          <template #title>
-            <el-icon>
-              <setting />
-            </el-icon>
-            <span>系统管理</span>
-          </template>
-          <el-menu-item index="/system/user">
-            <el-icon>
-              <Menu />
-            </el-icon>
-            <span>⽤户管理</span>
-          </el-menu-item>
-          <el-menu-item index="/system/role">
-            <el-icon>
-              <Menu />
-            </el-icon>
-            <span>⻆⾊管理</span>
-          </el-menu-item>
-          <el-menu-item index="/system/permission">
-            <el-icon>
-              <Menu />
-            </el-icon>
-            <span>权限管理</span>
-          </el-menu-item>
-        </el-sub-menu>
-      </el-menu>
-    </el-aside>
-    <el-container class="app-cent-container">
-      <el-header class="app-header">Header</el-header>
-      <el-main class="app-content">
-        <div class="content-wrapper">
-          <router-view></router-view>
-        </div>
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-<style lang="less" scoped>
-.app-layout {
-  height: 100vh;
-  background-color: #f0f2f5;
-
-  .app-side {
-    background-color: #fff;
-    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
-    position: relative;
-    z-index: 10;
-
-    .logo {
-      height: 64px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 24px;
-      overflow: hidden;
-
-      span {
-        color: #0c0c0c;
-        font-size: 18px;
-        font-weight: 600;
-        white-space: nowrap;
-      }
-    }
-
-    .side-menu {
-      border-right: none;
-    }
-  }
-
-  .app-cent-container {
-    position: fixed;
-    top: 0;
-    left: 200px;
-    right: 0;
-    bottom: 0;
-    background-color: #f9f9f9;
-
-    .app-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      height: 64px;
-      background: #fff;
-      padding-left: 16px;
-      padding-right: 16px;
-      line-height: 64px;
-      align-items: center;
-      border-bottom: 1px solid #d8dce5;
-    }
-
-    .app-content {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 104px;
-      right: 20px;
-      bottom: 20px;
-      left: 20px;
-      background-color: #fff;
-    }
-  }
-
-  .app-footer {
-    text-align: center;
-    padding: 16px 24px;
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 14px;
-    background: #fff;
-
-    .footer-links {
-      margin-bottom: 8px;
-
-      a {
-        color: rgba(0, 0, 0, 0.45);
-        margin: 0 8px;
-
-        &:hover {
-          color: rgba(0, 0, 0, 0.65);
-        }
-      }
-    }
-  }
-}
-</style>

src/layouts/index.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { Setting } from "@element-plus/icons-vue";
+const handleOpen = (key, keyPath) => {
+  console.log(key, keyPath);
+};
+const handleClose = (key, keyPath) => {
+  console.log(key, keyPath);
+};
+</script>
+<template>
+  <el-container class="app-layout">
+    <el-aside width="200px" class="app-side">
+      <div class="logo">
+        <span>ADMIN UI</span>
+      </div>
+      <el-menu default-active="/home" class="side-menu" @open="handleOpen" @close="handleClose" router>
+        <el-menu-item index="/home">
+          <el-icon>
+            <HomeFilled />
+          </el-icon>
+          <span>⾸⻚</span>
+        </el-menu-item>
+        <el-sub-menu index="/system">
+          <template #title>
+            <el-icon>
+              <setting />
+            </el-icon>
+            <span>系统管理</span>
+          </template>
+          <el-menu-item index="/system/user">
+            <el-icon>
+              <Menu />
+            </el-icon>
+            <span>⽤户管理</span>
+          </el-menu-item>
+          <el-menu-item index="/system/role">
+            <el-icon>
+              <Menu />
+            </el-icon>
+            <span>⻆⾊管理</span>
+          </el-menu-item>
+          <el-menu-item index="/system/permission">
+            <el-icon>
+              <Menu />
+            </el-icon>
+            <span>权限管理</span>
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-aside>
+    <el-container class="app-cent-container">
+      <el-header class="app-header">Header</el-header>
+      <el-main class="app-content">
+        <div class="content-wrapper">
+          <router-view></router-view>
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<style lang="less" scoped>
+.app-layout {
+  height: 100vh;
+  background-color: #f0f2f5;
+
+  .app-side {
+    background-color: #fff;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+    position: relative;
+    z-index: 10;
+
+    .logo {
+      height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 24px;
+      overflow: hidden;
+
+      span {
+        color: #0c0c0c;
+        font-size: 18px;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+    }
+
+    .side-menu {
+      border-right: none;
+    }
+  }
+
+  .app-cent-container {
+    position: fixed;
+    top: 0;
+    left: 200px;
+    right: 0;
+    bottom: 0;
+    background-color: #f9f9f9;
+
+    .app-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      height: 64px;
+      background: #fff;
+      padding-left: 16px;
+      padding-right: 16px;
+      line-height: 64px;
+      align-items: center;
+      border-bottom: 1px solid #d8dce5;
+    }
+
+    .app-content {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 104px;
+      right: 20px;
+      bottom: 20px;
+      left: 20px;
+      background-color: #fff;
+    }
+  }
+
+  .app-footer {
+    text-align: center;
+    padding: 16px 24px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+    background: #fff;
+
+    .footer-links {
+      margin-bottom: 8px;
+
+      a {
+        color: rgba(0, 0, 0, 0.45);
+        margin: 0 8px;
+
+        &:hover {
+          color: rgba(0, 0, 0, 0.65);
+        }
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
-import App from './Index.vue'
+import App from './App.vue'
 import router from './router'
 
 import ElementPlus from 'element-plus'

src/router/index.js

@@ -1,14 +1,46 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/home',
-      name: 'home',
-      component: HomeView
-    }
+      path: '/',
+      name: 'layout',
+      component: () => import('../layouts/index.vue'),
+      redirect: '/home',
+      children: [
+        {
+          path: '/home',
+          name: 'home',
+          component: () => import('../views/home/index.vue')
+        },
+        {
+          path: '/system',
+          name: 'system',
+          component: () => import('../views/system/index.vue'),
+          redirect: '/system/user',
+          children: [
+            {
+              path: 'user',
+              name: 'user',
+              component: () => import('../views/system/user/index.vue')
+            },
+            {
+              path: 'role',
+              name: 'srole',
+              component: () => import('../views/system/role/index.vue')
+            },
+            {
+              path: 'permission',
+              name: 'permission',
+              component: () => import('../views/system/permission/index.vue')
+            },
+          ]
+        },
+      ]
+    },
+    
+
   ]
 })
 

src/views/system/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="home">
+    <h1>欢迎使用管理系统</h1>
+    <p>这是您的首页内容区域</p>
+  </div>
+</template>
+
+<script setup>
+// 这里可以添加首页需要的业务逻辑
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+  font-size: 16px;
+}
+h1 {
+  color: #1890ff;
+}
+</style>

src/views/system/permission/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="home">
+    <h1>欢迎使用管理系统</h1>
+    <p>这是您的首页内容区域</p>
+  </div>
+</template>
+
+<script setup>
+// 这里可以添加首页需要的业务逻辑
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+  font-size: 16px;
+}
+h1 {
+  color: #1890ff;
+}
+</style>

src/views/system/role/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="home">
+    <h1>欢迎使用管理系统</h1>
+    <p>这是您的首页内容区域</p>
+  </div>
+</template>
+
+<script setup>
+// 这里可以添加首页需要的业务逻辑
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+  font-size: 16px;
+}
+h1 {
+  color: #1890ff;
+}
+</style>

src/views/system/user/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="home">
+    <h1>欢迎使用管理系统</h1>
+    <p>这是您的首页内容区域</p>
+  </div>
+</template>
+
+<script setup>
+// 这里可以添加首页需要的业务逻辑
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+  font-size: 16px;
+}
+h1 {
+  color: #1890ff;
+}
+</style>