This commit is contained in:
张成
2025-11-20 11:27:32 +08:00
7 changed files with 26 additions and 272 deletions

264
README.md
View File

@@ -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 项目示例。

View File

@@ -29,7 +29,7 @@ import components ,{ registerGlobalComponents, registerComponents} from './compo
import pages from './views/index' 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, Main: framework.Main,
ParentView: framework.ParentView, ParentView: framework.ParentView,
Page404: framework.Page404, Page404: framework.Page404,
HomePage: framework.HomePage,
authorityMenus: authorityMenus authorityMenus: authorityMenus
}) })
console.log('Menu restored') console.log('Menu restored')

View File

@@ -44,7 +44,7 @@ export default {
menuList: state => state.menuList menuList: state => state.menuList
}, },
actions: { actions: {
async setAuthorityMenus({ state, commit }, { Main, ParentView, Page404, authorityMenus, menuIds }) { async setAuthorityMenus({ state, commit }, { Main, ParentView, Page404, HomePage, authorityMenus, menuIds }) {
// 如果传入了 authorityMenus直接使用否则从接口获取 // 如果传入了 authorityMenus直接使用否则从接口获取
let menus = authorityMenus let menus = authorityMenus
@@ -95,9 +95,9 @@ export default {
commit('setAuthorityMenus', JSON.stringify(menus)) commit('setAuthorityMenus', JSON.stringify(menus))
// 生成路由菜单(传递 HomePage 组件) // 生成路由菜单(传递 HomePage 组件)
// 从框架实例中获取 HomePage // 优先使用传入的 HomePage,如果没有则从框架实例中获取
const HomePage = (window.framework && window.framework.HomePage) || null const homePageComponent = HomePage || (window.framework && window.framework.HomePage) || null
let mainMenu = uiTool.getRoutes(Main, ParentView, Page404, HomePage) let mainMenu = uiTool.getRoutes(Main, ParentView, Page404, homePageComponent)
console.log('生成的主菜单:', mainMenu) console.log('生成的主菜单:', mainMenu)
if (mainMenu && mainMenu.children) { if (mainMenu && mainMenu.children) {
@@ -182,10 +182,13 @@ export default {
// 调用 authorityMenus 接口获取完整菜单数据 // 调用 authorityMenus 接口获取完整菜单数据
// 如果接口失败,会使用默认菜单配置和 menuIds 进行过滤 // 如果接口失败,会使用默认菜单配置和 menuIds 进行过滤
// 从框架实例获取 HomePage
const HomePage = (window.framework && window.framework.HomePage) || null
await dispatch('setAuthorityMenus', { await dispatch('setAuthorityMenus', {
Main, Main,
ParentView, ParentView,
Page404, Page404,
HomePage,
menuIds menuIds
}) })

View File

@@ -24,8 +24,14 @@ import Page500 from './error-page/500.vue'
// 设置组件映射的方法 // 设置组件映射的方法
export function setupComponentMap(customMap = {}, uiTool) { export function setupComponentMap(customMap = {}, uiTool) {
if (!customMap["home/index"]) {
customMap["home/index"] = HomePage
}
const componentMap = { const componentMap = {
'home/index': HomePage,
'system/sys_log': SysLog, 'system/sys_log': SysLog,
'system/sys_param_setup': SysParamSetup, 'system/sys_param_setup': SysParamSetup,
'system/sys_role': SysRole, 'system/sys_role': SysRole,
@@ -48,7 +54,6 @@ export function setupComponentMap(customMap = {}, uiTool) {
} }
export default { export default {
HomePage,
SysLog, SysLog,
SysLogOperate, SysLogOperate,
SysParamSetup, SysParamSetup,

View File

@@ -251,7 +251,16 @@ export default {
let menuTree = uiTool.transformTree(menuRows) let menuTree = uiTool.transformTree(menuRows)
this.gridOption.menuData = this.mapTree(menuTree) 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() { async initCol() {