feat(projects): 添加系统管理的页面

.vscode/settings.json

@@ -43,7 +43,6 @@
 	"terminal.integrated.fontSize": 14,
 	"terminal.integrated.fontWeight": 500,
 	"terminal.integrated.tabs.enabled": true,
-	"unocss.root": "src",
 	"workbench.iconTheme": "material-icon-theme",
 	"workbench.colorTheme": "One Dark Pro",
 	"[html]": {

README.md

@@ -77,14 +77,13 @@ Soybean Admin 是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中
 - [x] 图表示例：ECharts、AntV G2
 - [x] 多页签：支持query、hash等参数，同一页面支持多个Tab
 - [x] 缓存主题配置
-- [ ] 添加锁屏组件、全局Iframe组件(去掉锁屏组件)
+- [ ] 表单、表格示例(ing...)
-- [ ] 性能优化(优化递归函数)
+- [ ] 全局Iframe组件
-- [ ] 表单、表格示例
 - [ ] 示例页面完善
 - [ ] 精简版(新分支thin)
 - [ ] 文档完善
-- [ ] i18n国际化
 - [ ] element-plus版本
+- [ ] i18n国际化
 - [ ] 其他UI版本
 - [ ] soybean-admin cli工具(选择不同UI)
 - [ ] soybean-admin 后台服务java版: [soybean-admin-java](https://github.com/honghuangdc/soybean-admin-java)

mock/model/route.ts

@@ -146,16 +146,6 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
                 icon: 'simple-icons:apacheecharts'
               }
             },
-            {
-              name: 'plugin_charts_d3',
-              path: '/plugin/charts/d3',
-              component: 'self',
-              meta: {
-                title: 'D3',
-                requiresAuth: true,
-                icon: 'simple-icons:d3dotjs'
-              }
-            },
             {
               name: 'plugin_charts_antv',
               path: '/plugin/charts/antv',
@@ -445,6 +435,58 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         order: 8
       }
     },
+    {
+      name: 'management',
+      path: '/management',
+      component: 'basic',
+      children: [
+        {
+          name: 'management_auth',
+          path: '/management/auth',
+          component: 'self',
+          meta: {
+            title: '权限管理',
+            requiresAuth: true,
+            icon: 'ic:baseline-security'
+          }
+        },
+        {
+          name: 'management_role',
+          path: '/management/role',
+          component: 'self',
+          meta: {
+            title: '角色管理',
+            requiresAuth: true,
+            icon: 'carbon:user-role'
+          }
+        },
+        {
+          name: 'management_user',
+          path: '/management/user',
+          component: 'self',
+          meta: {
+            title: '用户管理',
+            requiresAuth: true,
+            icon: 'ic:round-manage-accounts'
+          }
+        },
+        {
+          name: 'management_route',
+          path: '/management/route',
+          component: 'self',
+          meta: {
+            title: '路由管理',
+            requiresAuth: true,
+            icon: 'material-symbols:route'
+          }
+        }
+      ],
+      meta: {
+        title: '系统管理',
+        icon: 'carbon:cloud-service-management',
+        order: 9
+      }
+    },
     {
       name: 'about',
       path: '/about',
@@ -454,7 +496,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         requiresAuth: true,
         singleLayout: 'basic',
         icon: 'fluent:book-information-24-regular',
-        order: 9
+        order: 10
       }
     }
   ],
@@ -605,16 +647,6 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
                 icon: 'simple-icons:apacheecharts'
               }
             },
-            {
-              name: 'plugin_charts_d3',
-              path: '/plugin/charts/d3',
-              component: 'self',
-              meta: {
-                title: 'D3',
-                requiresAuth: true,
-                icon: 'simple-icons:d3dotjs'
-              }
-            },
             {
               name: 'plugin_charts_antv',
               path: '/plugin/charts/antv',
@@ -894,6 +926,58 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         order: 8
       }
     },
+    {
+      name: 'management',
+      path: '/management',
+      component: 'basic',
+      children: [
+        {
+          name: 'management_auth',
+          path: '/management/auth',
+          component: 'self',
+          meta: {
+            title: '权限管理',
+            requiresAuth: true,
+            icon: 'ic:baseline-security'
+          }
+        },
+        {
+          name: 'management_role',
+          path: '/management/role',
+          component: 'self',
+          meta: {
+            title: '角色管理',
+            requiresAuth: true,
+            icon: 'carbon:user-role'
+          }
+        },
+        {
+          name: 'management_user',
+          path: '/management/user',
+          component: 'self',
+          meta: {
+            title: '用户管理',
+            requiresAuth: true,
+            icon: 'ic:round-manage-accounts'
+          }
+        },
+        {
+          name: 'management_route',
+          path: '/management/route',
+          component: 'self',
+          meta: {
+            title: '路由管理',
+            requiresAuth: true,
+            icon: 'material-symbols:route'
+          }
+        }
+      ],
+      meta: {
+        title: '系统管理',
+        icon: 'carbon:cloud-service-management',
+        order: 9
+      }
+    },
     {
       name: 'about',
       path: '/about',
@@ -903,7 +987,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         requiresAuth: true,
         singleLayout: 'basic',
         icon: 'fluent:book-information-24-regular',
-        order: 9
+        order: 10
       }
     }
   ],

src/router/modules/index.ts

@@ -1,5 +1,5 @@
 import { handleModuleRoutes } from '@/utils';
 
-const modules = import.meta.globEager('./**/*.ts') as AuthRoute.RouteModule;
+const modules = import.meta.glob('./**/*.ts', { eager: true }) as AuthRoute.RouteModule;
 
 export const routes = handleModuleRoutes(modules);

src/router/modules/management.ts

@@ -0,0 +1,54 @@
+const management: AuthRoute.Route = {
+  name: 'management',
+  path: '/management',
+  component: 'basic',
+  children: [
+    {
+      name: 'management_auth',
+      path: '/management/auth',
+      component: 'self',
+      meta: {
+        title: '权限管理',
+        requiresAuth: true,
+        icon: 'ic:baseline-security'
+      }
+    },
+    {
+      name: 'management_role',
+      path: '/management/role',
+      component: 'self',
+      meta: {
+        title: '角色管理',
+        requiresAuth: true,
+        icon: 'carbon:user-role'
+      }
+    },
+    {
+      name: 'management_user',
+      path: '/management/user',
+      component: 'self',
+      meta: {
+        title: '用户管理',
+        requiresAuth: true,
+        icon: 'ic:round-manage-accounts'
+      }
+    },
+    {
+      name: 'management_route',
+      path: '/management/route',
+      component: 'self',
+      meta: {
+        title: '路由管理',
+        requiresAuth: true,
+        icon: 'material-symbols:route'
+      }
+    }
+  ],
+  meta: {
+    title: '系统管理',
+    icon: 'carbon:cloud-service-management',
+    order: 9
+  }
+};
+
+export default management;

src/router/modules/plugin.ts

@@ -18,16 +18,6 @@ const plugin: AuthRoute.Route = {
             icon: 'simple-icons:apacheecharts'
           }
         },
-        {
-          name: 'plugin_charts_d3',
-          path: '/plugin/charts/d3',
-          component: 'self',
-          meta: {
-            title: 'D3',
-            requiresAuth: true,
-            icon: 'simple-icons:d3dotjs'
-          }
-        },
         {
           name: 'plugin_charts_antv',
           path: '/plugin/charts/antv',

src/typings/route.d.ts

@@ -38,9 +38,7 @@ declare namespace AuthRoute {
     | 'plugin_swiper'
     | 'plugin_charts'
     | 'plugin_charts_echarts'
-    | 'plugin_charts_d3'
     | 'plugin_charts_antv'
-    | 'plugin_charts_chartjs'
     | 'auth-demo'
     | 'auth-demo_permission'
     | 'auth-demo_super'
@@ -57,6 +55,11 @@ declare namespace AuthRoute {
     | 'multi-menu_first_second'
     | 'multi-menu_first_second-new'
     | 'multi-menu_first_second-new_third'
+    | 'management'
+    | 'management_user'
+    | 'management_role'
+    | 'management_auth'
+    | 'management_route'
     | 'about';
 
   /** 路由的path */

src/views/management/auth/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
+  <div>权限管理</div>
-    <h3>d3</h3>
-  </div>
 </template>
 
 <script setup lang="ts"></script>

src/views/management/role/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>角色管理</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/management/route/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>路由管理</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/management/user/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>用户管理</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>