diff --git a/README.md b/README.md index 421455f..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,264 +0,0 @@ -# Admin Framework - -一个基于 Vue2 的通用后台管理系统框架，包含完整的系统功能、登录、路由管理、布局等核心功能。 - -## ✨ 新版本亮点 - -**使用超级简单！只需 20 行代码即可启动完整的后台管理系统！** - -```javascript -// 引入框架（内置所有依赖） -import AdminFramework from './admin-framework.js' -import componentMap from './router/component-map.js' - -// 一行搞定！ -const app = AdminFramework.createApp({ - title: '我的管理系统', - apiUrl: 'http://localhost:9098/admin_api/', // uploadUrl 会自动设置 - componentMap: componentMap -}) - -app.$mount('#app') -``` - -**对比旧版本：** -- 代码量减少 **75%+**（从 80+ 行到 20 行） -- **无需手动引入** Vue、VueRouter、Vuex、ViewUI -- **无需手动配置** 路由、状态管理 -- **自动处理** 菜单恢复、标题设置 - -👉 查看详细说明：[简化使用说明.md](./简化使用说明.md) - -## 📦 项目结构 - -``` -admin-framework/ -├── src/ # 框架源码 -│ ├── api/ # API 接口 -│ ├── assets/ # 资源文件（样式、图片、字体） -│ ├── components/ # 全局组件 -│ ├── config/ # 配置文件 -│ ├── router/ # 路由配置 -│ ├── store/ # Vuex 状态管理 -│ ├── utils/ # 工具函数 -│ ├── views/ # 页面组件 -│ │ ├── home/ # 主页 -│ │ ├── login/ # 登录页 -│ │ ├── system/ # 系统管理页面 -│ │ └── system/ # 高级系统页面 -│ └── index.js # 框架入口 -├── dist/ # 打包产物 -│ └── admin-framework.js # 框架打包文件（3.6 MB，内置所有依赖） -├── demo-project/ # 完整示例项目 ⭐ -│ ├── src/ -│ │ ├── config/ # 配置 -│ │ ├── libs/ # 框架文件 -│ │ ├── views/ # 业务页面 -│ │ ├── App.vue -│ │ └── main.js -│ ├── README.md # Demo 使用说明 -│ └── INSTALL.md # 安装指南 -├── webpack.config.js # 构建配置 -├── package.json -└── 完整使用文档.md # 详细文档 - -``` - -## 🚀 快速开始 - -### 方式一：运行 Demo 项目（推荐）⭐ - -**Demo 项目现已更新为使用框架源码**，更方便调试和开发！ - -#### 🎯 一键启动 - -**Windows 用户**： -```bash -cd demo-project -双击运行 start.bat -``` - -**Linux/Mac 用户**： -```bash -cd demo-project -chmod +x start.sh -./start.sh -``` - -#### 📝 手动启动 - -```bash -# 1. 进入 demo 项目 -cd demo-project - -# 2. 安装依赖（首次必须） -npm install - -# 3. 启动开发服务器 -npm run dev -``` - -浏览器会自动打开 `http://localhost:8080` - -#### 📚 Demo 项目文档 - -- [快速启动.md](./demo-project/快速启动.md) - 快速启动指南 ⭐ -- [README.md](./demo-project/README.md) - 项目说明 -- [CHANGELOG.md](./demo-project/CHANGELOG.md) - 更新日志（重要） -- [INSTALL.md](./demo-project/INSTALL.md) - 安装指南 -- [PROJECT_STRUCTURE.md](./demo-project/PROJECT_STRUCTURE.md) - 项目结构说明 - -#### ⚠️ 重要提示 - -- Demo 项目现在**直接使用框架源码**（`../../src/index.js`） -- **首次运行必须执行** `npm install` 安装新依赖 -- 如遇到错误，删除 `node_modules` 和 `package-lock.json` 后重新安装 - -### 方式二：构建框架 - -```bash -# 1. 安装依赖 -npm install - -# 2. 构建框架 -npm run build - -# 3. 产物在 dist/admin-framework.js -``` - -## ✨ 特性 - -### 核心功能 -- ✅ **极简使用** - 只需 20 行代码启动完整系统 -- ✅ **内置依赖** - Vue、VueRouter、Vuex、ViewUI 全部内置 -- ✅ **自动配置** - 自动初始化路由、状态管理、菜单恢复 -- ✅ **主页组件** - 欢迎页面，自动显示系统标题 -- ✅ **系统管理页面** - 用户、角色、菜单等管理 -- ✅ **登录和错误页面** - 完整的登录流程和错误处理 -- ✅ **动态路由管理** - 基于权限的路由控制 -- ✅ **Vuex 状态管理** - 用户、应用状态管理 -- ✅ **内置样式** - base.less、animate.css、iconfont -- ✅ **工具库** - HTTP、日期、Token 等工具 - -## 📚 文档 - -- **⚡ 快速开始**：[快速开始.md](./快速开始.md) - **5 分钟上手指南** -- **🔥 简化使用说明**：[简化使用说明.md](./简化使用说明.md) - **详细对比和说明** -- **完整使用文档**：[完整使用文档.md](./完整使用文档.md) -- **Demo 项目说明**：[demo-project/README.md](./demo-project/README.md) -- **安装指南**：[demo-project/INSTALL.md](./demo-project/INSTALL.md) - -## 🎯 Demo 项目预览 - -Demo 项目包含： - -1. **登录页面**（`/login`） - - 完整的登录表单 - - 自动跳转功能 - -2. **主页**（`/home`） - - 欢迎页面 - - 显示系统标题 - -3. **业务示例**（`/business/product`） - - 产品列表（Table） - - CRUD 操作示例 - - Modal、Message 使用 - -4. **系统页面**（框架内置） - - 用户管理 - - 角色管理 - - 菜单管理 - -## 🔧 使用方式 - -### 1. 在新项目中使用 - -```javascript -import Vue from 'vue' -import VueRouter from 'vue-router' -import Vuex from 'vuex' -import ViewUI from 'view-design' -import createPersistedState from 'vuex-persistedstate' -import AdminFramework from './libs/admin-framework.js' -import config from './config' - -// 使用框架 - 自动完成所有初始化 -Vue.use(AdminFramework, { - config, - ViewUI, - VueRouter, - Vuex, - createPersistedState -}) - -// 创建 Vue 实例 -new Vue({ - router: AdminFramework.router, - store: AdminFramework.store, - render: h => h(App) -}).$mount('#app') -``` - -### 2. 按需使用组件 - -```javascript -import { HomePage, SysUser, SysRole } from './libs/admin-framework.js' - -// 在路由中使用 -const routes = [ - { path: '/home', component: HomePage }, - { path: '/system/user', component: SysUser } -] -``` - -## 📝 版本信息 - -**当前版本**: 1.0.0 - -**更新日志**: -- v1.0.0 - 初始版本 - - ✅ 完整的系统管理功能 - - ✅ 主页组件 - - ✅ 登录和权限管理 - - ✅ 动态路由 - - ✅ 内置样式 - - ✅ Demo 示例项目 - -## 💻 技术栈 - -- Vue 2.6+ -- Vue Router 3.x -- Vuex 3.x -- View Design (iView) 4.x -- Axios -- Less -- Webpack 5 - -## 🛠️ 开发 - -```bash -# 安装依赖 -npm install - -# 开发模式 -npm run dev - -# 构建生产版本 -npm run build -``` - -## 📄 许可证 - -MIT License - -## 👨‍💻 作者 - -light - ---- - -**祝开发愉快！** 🎉 - -如有问题，请查看[完整使用文档.md](./完整使用文档.md)或查看 Demo 项目示例。 - diff --git a/使用说明.md b/_doc/使用说明.md similarity index 100% rename from 使用说明.md rename to _doc/使用说明.md diff --git a/快速开始.md b/_doc/快速开始.md similarity index 100% rename from 快速开始.md rename to _doc/快速开始.md diff --git a/src/index.js b/src/index.js index b857d47..f123d29 100644 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,7 @@ import components ,{ registerGlobalComponents, registerComponents} from './compo import pages from './views/index' -const { LoginPage, Page401, Page404, Page500, setupComponentMap } = pages +const { LoginPage, Page401, Page404, Page500, setupComponentMap, HomePage } = pages // 导入页面组件 @@ -182,6 +182,7 @@ class AdminFramework { Main: framework.Main, ParentView: framework.ParentView, Page404: framework.Page404, + HomePage: framework.HomePage, authorityMenus: authorityMenus }) console.log('Menu restored') diff --git a/src/store/user.js b/src/store/user.js index ad480df..2bbdd42 100644 --- a/src/store/user.js +++ b/src/store/user.js @@ -44,7 +44,7 @@ export default { menuList: state => state.menuList }, actions: { - async setAuthorityMenus({ state, commit }, { Main, ParentView, Page404, authorityMenus, menuIds }) { + async setAuthorityMenus({ state, commit }, { Main, ParentView, Page404, HomePage, authorityMenus, menuIds }) { // 如果传入了 authorityMenus，直接使用；否则从接口获取 let menus = authorityMenus @@ -95,9 +95,9 @@ export default { commit('setAuthorityMenus', JSON.stringify(menus)) // 生成路由菜单（传递 HomePage 组件） - // 从框架实例中获取 HomePage - const HomePage = (window.framework && window.framework.HomePage) || null - let mainMenu = uiTool.getRoutes(Main, ParentView, Page404, HomePage) + // 优先使用传入的 HomePage，如果没有则从框架实例中获取 + const homePageComponent = HomePage || (window.framework && window.framework.HomePage) || null + let mainMenu = uiTool.getRoutes(Main, ParentView, Page404, homePageComponent) console.log('生成的主菜单:', mainMenu) if (mainMenu && mainMenu.children) { @@ -182,10 +182,13 @@ export default { // 调用 authorityMenus 接口获取完整菜单数据 // 如果接口失败，会使用默认菜单配置和 menuIds 进行过滤 + // 从框架实例获取 HomePage + const HomePage = (window.framework && window.framework.HomePage) || null await dispatch('setAuthorityMenus', { Main, ParentView, Page404, + HomePage, menuIds }) diff --git a/src/views/index.js b/src/views/index.js index 1d11c03..8321092 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -24,8 +24,14 @@ import Page500 from './error-page/500.vue' // 设置组件映射的方法 export function setupComponentMap(customMap = {}, uiTool) { + + + if (!customMap["home/index"]) { + customMap["home/index"] = HomePage + } + + const componentMap = { - 'home/index': HomePage, 'system/sys_log': SysLog, 'system/sys_param_setup': SysParamSetup, 'system/sys_role': SysRole, @@ -48,7 +54,6 @@ export function setupComponentMap(customMap = {}, uiTool) { } export default { - HomePage, SysLog, SysLogOperate, SysParamSetup, diff --git a/src/views/system/sys_menu.vue b/src/views/system/sys_menu.vue index 6a058e3..16ed73a 100644 --- a/src/views/system/sys_menu.vue +++ b/src/views/system/sys_menu.vue @@ -251,7 +251,16 @@ export default { let menuTree = uiTool.transformTree(menuRows) this.gridOption.menuData = this.mapTree(menuTree) - this.$store.dispatch('setAuthorityMenus') + // 菜单更新后重新加载权限菜单 + const framework = this.$framework || window.framework + if (framework) { + this.$store.dispatch('user/setAuthorityMenus', { + Main: framework.components.Main, + ParentView: framework.components.ParentView, + Page404: framework.pages.Page404, + HomePage: framework.HomePage + }) + } }, async initCol() {