From 43eb9715fae3be531c219c84404c52cb1615bafd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Wed, 8 Oct 2025 17:15:31 +0800 Subject: [PATCH] 1 --- src/index.js | 12 ++++--- src/utils/uiTool.js | 4 +-- src/views/home/index.vue | 44 +++++++++++++++++++++++ 完整使用文档.md | 77 +++++++++++++++++++++++----------------- 4 files changed, 99 insertions(+), 38 deletions(-) create mode 100644 src/views/home/index.vue diff --git a/src/index.js b/src/index.js index fe34697..14e7388 100644 --- a/src/index.js +++ b/src/index.js @@ -32,6 +32,9 @@ import { setParamSetupServer } from './store/app' import routerConfig, { createBaseRoutes, setupRouterGuards } from './router' // ==================== 系统页面 ==================== +// 主页 +import HomePage from './views/home/index.vue' + // system 页面 import SysLog from './views/system/sys_log.vue' import SysParamSetup from './views/system/sys_param_setup.vue' @@ -95,6 +98,7 @@ class AdminFramework { this.Page500 = Page500 // 导出系统页面 + this.HomePage = HomePage this.SysLog = SysLog this.SysParamSetup = SysParamSetup this.SysRole = SysRole @@ -159,8 +163,7 @@ class AdminFramework { // 如果提供了 VueRouter，自动创建 Router if (VueRouter && !this.router) { // 获取主路由配置（包含 home） - const mainRoute = this.getRoutes({ Main, ParentView, Page404 }) - + const mainRoute = this.getRoutes({ Main, ParentView, Page404, HomePage }) this.router = this.createRouter(VueRouter, { Main, @@ -278,14 +281,14 @@ class AdminFramework { * @returns {Object} 主路由配置 */ getRoutes(components = {}) { - const { Main, ParentView, Page404 } = components + const { Main, ParentView, Page404, HomePage } = components if (!Main || !ParentView || !Page404) { console.error('Missing required layout components') return null } - return uiTool.getRoutes(Main, ParentView, Page404) + return uiTool.getRoutes(Main, ParentView, Page404, HomePage) } /** @@ -323,6 +326,7 @@ export { setupRouterGuards, // 系统页面 + HomePage, SysLog, SysParamSetup, SysRole, diff --git a/src/utils/uiTool.js b/src/utils/uiTool.js index 3a06574..63e9b6f 100644 --- a/src/utils/uiTool.js +++ b/src/utils/uiTool.js @@ -168,7 +168,7 @@ export default class uiTool { return [] } - static getRoutes(Main, ParentView, Page404) { + static getRoutes(Main, ParentView, Page404, HomePage) { let mainRoute = { path: '/', name: '主视图', @@ -181,7 +181,7 @@ export default class uiTool { path: '/home', name: 'home', meta: { title: '首页', notCache: true }, - component: { + component: HomePage || { render: h => h('div', { style: { padding: '20px' } }, '欢迎使用管理系统') } } diff --git a/src/views/home/index.vue b/src/views/home/index.vue new file mode 100644 index 0000000..8a15ef0 --- /dev/null +++ b/src/views/home/index.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/完整使用文档.md b/完整使用文档.md index 0bf7939..72fe0aa 100644 --- a/完整使用文档.md +++ b/完整使用文档.md @@ -18,6 +18,7 @@ ## ✨ 特性 +✅ **主页组件**（欢迎页面，自动显示系统标题） ✅ **系统管理页面**（sys 开头的所有页面和功能） ✅ **系统 API**（system 和 system_high 所有 API） ✅ **全局组件**（Tables、Editor、Upload 等） @@ -88,6 +89,7 @@ import AdminFramework from 'admin-framework' **无需从原项目复制**： ✅ **已包含**： +- **主页组件**（HomePage - 欢迎页面，显示系统标题） - 所有系统页面（system、system_high） - 所有系统 API（system、system_high） - 所有全局组件（Tables、Editor、Upload 等） @@ -534,15 +536,20 @@ this.$store.getters['app/sysFormModel'] 框架已内置所有系统管理页面，可直接从框架导入使用： +#### 主页 +```javascript +import { + HomePage // 主页欢迎页面（显示系统标题） +} from 'admin-framework' +``` + #### system 目录页面 ```javascript import { SysLog, // 系统日志管理 SysParamSetup, // 参数设置 SysRole, // 角色管理 - SysUser, // 用户管理 - WchCities, // 城市管理 - WchProfessions // 职业管理 + SysUser // 用户管理 } from 'admin-framework' ``` @@ -557,9 +564,14 @@ import { #### 在路由中使用 ```javascript -import { SysUser, SysRole, SysMenu } from 'admin-framework' +import { HomePage, SysUser, SysRole, SysMenu } from 'admin-framework' const routes = [ + { + path: '/home', + name: 'home', + component: HomePage // 框架自动注册，也可手动使用 + }, { path: '/system/user', name: 'sys_user', @@ -892,48 +904,49 @@ export default { } ``` -### Q11: 如何自定义 home 首页路由？ +### Q11: 主页 HomePage 组件说明 -A: **框架支持自定义 home 路由，在初始化时传入 `homeRoute` 参数即可。** +A: **框架已内置主页组件，自动显示系统标题欢迎信息。** -**默认行为**： -框架会自动创建一个默认的 home 路由，确保登录后能正常跳转： +**默认主页组件**： +```vue + + +``` + +**特性**： +- ✅ 自动从 Vuex Store 获取系统标题（`app/sysFormModel`） +- ✅ 优雅的欢迎页面样式 +- ✅ home 路由已在创建 Router 时注册，确保登录后能正常跳转 + +**如何使用**： +框架会自动创建 home 路由并使用内置的 HomePage 组件： ```javascript { path: '/home', name: 'home', meta: { title: '首页', notCache: true }, - component: { render: h => h('div', '欢迎使用管理系统') } + component: AdminFramework.HomePage // 框架内置的主页组件 } ``` -**自定义 home 路由**： +**自定义主页**： +如果后端返回的权限菜单中包含 home 路由配置，会优先使用权限菜单的配置。 + +**直接使用 HomePage 组件**： ```javascript -import Vue from 'vue' +// 在其他地方也可以直接引用 import AdminFramework from './libs/admin-framework.js' -import HomePage from './views/home.vue' // 你的自定义首页 - -Vue.use(AdminFramework, { - config, - ViewUI, - VueRouter, - Vuex, - createPersistedState, - // ✅ 自定义 home 路由 - homeRoute: { - path: '/home', - name: 'home', - meta: { title: '工作台', notCache: true }, - component: HomePage // 使用你的自定义组件 - } -}) +const HomePage = AdminFramework.HomePage ``` -**说明**： -- ✅ home 路由会在创建 Router 时立即注册，确保登录后能正常跳转 -- ✅ 如果提供了 `homeRoute`，会替换默认的 home 路由 -- ✅ 如果后端返回的权限菜单中有 home 路由，会使用权限菜单的配置 - ### Q12: 需要单独引入样式文件吗？ A: **不需要！框架已内置所有样式。**