1

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,

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' } }, '欢迎使用管理系统') 
           }
         }

src/views/home/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="content-view">
+
+    <h1 class="home-title">
+      <span class="hy">欢迎登陆， </span>
+      {{sysFormModel.title}}
+    </h1>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'home',
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters({
+      sysFormModel: 'app/sysFormModel',
+    }),
+  },
+  mounted() {
+    //
+  },
+}
+</script>
+
+<style scoped lang="less">
+.content-view {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .hy {
+    font-size: 18px;
+  }
+  .home-title {
+    font-size: 30px;
+    color: #2d8cf0;
+  }
+}
+</style>

完整使用文档.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
+<!-- 已内置在框架中 -->
+<template>
+  <div class="content-view">
+    <h1 class="home-title">
+      <span class="hy">欢迎登陆， </span>
+      {{ sysFormModel.title }}
+    </h1>
+  </div>
+</template>
+```
+
+**特性**：
+- ✅ 自动从 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: **不需要！框架已内置所有样式。**