diff --git a/README.md b/README.md
new file mode 100644
index 0000000..2ab5b32
--- /dev/null
+++ b/README.md
@@ -0,0 +1,231 @@
+# Admin Framework
+
+一个基于 Vue2 的通用后台管理系统框架，包含完整的系统功能、登录、路由管理、布局等核心功能。
+
+## 📦 项目结构
+
+```
+admin-framework/
+├── src/ # 框架源码
+│ ├── api/ # API 接口
+│ ├── assets/ # 资源文件（样式、图片、字体）
+│ ├── components/ # 全局组件
+│ ├── config/ # 配置文件
+│ ├── router/ # 路由配置
+│ ├── store/ # Vuex 状态管理
+│ ├── utils/ # 工具函数
+│ ├── views/ # 页面组件
+│ │ ├── home/ # 主页
+│ │ ├── login/ # 登录页
+│ │ ├── system/ # 系统管理页面
+│ │ └── system_high/ # 高级系统页面
+│ └── index.js # 框架入口
+├── dist/ # 打包产物
+│ └── admin-framework.js # 框架打包文件（1.64 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
+```
+
+## ✨ 特性
+
+- ✅ **主页组件** - 欢迎页面，自动显示系统标题
+- ✅ **系统管理页面** - 用户、角色、菜单等管理
+- ✅ **登录和错误页面** - 完整的登录流程和错误处理
+- ✅ **动态路由管理** - 基于权限的路由控制
+- ✅ **Vuex 状态管理** - 用户、应用状态管理
+- ✅ **内置样式** - base.less、animate.css、iconfont
+- ✅ **工具库** - HTTP、日期、Token 等工具
+
+## 📚 文档
+
+- **完整使用文档**：[完整使用文档.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/demo-project/.gitignore b/demo-project/.gitignore
new file mode 100644
index 0000000..1ea8ee3
--- /dev/null
+++ b/demo-project/.gitignore
@@ -0,0 +1,25 @@
+# 依赖
+node_modules/
+package-lock.json
+yarn.lock
+
+# 构建产物
+dist/
+*.log
+
+# 编辑器
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# 系统文件
+.DS_Store
+Thumbs.db
+
+# 环境变量
+.env
+.env.local
+.env.*.local
+
diff --git a/demo-project/API直接导入重构说明.md b/demo-project/API直接导入重构说明.md
new file mode 100644
index 0000000..82b94aa
--- /dev/null
+++ b/demo-project/API直接导入重构说明.md
@@ -0,0 +1,372 @@
+# API 直接导入重构说明
+
+## 📋 重构内容
+
+### 重构目标
+
+将框架中的 API server 从**注入模式**改为**直接导入模式**，简化代码结构。
+
+### 修改前（注入模式）
+
+**问题**：
+- 需要在 `src/index.js` 中调用 `setUserServer` 和 `setParamSetupServer`
+- Store 模块需要导出 setter 函数
+- 代码结构复杂，不够直观
+
+**代码示例**：
+```javascript
+// src/store/user.js
+let userServerInstance = null
+
+export const setUserServer = (server) => {
+ userServerInstance = server
+}
+
+// 使用时
+if (!userServerInstance) {
+ throw new Error('userServer not initialized')
+}
+let res = await userServerInstance.login(userFrom)
+```
+
+```javascript
+// src/index.js
+import { setUserServer } from './store/user'
+import { setParamSetupServer } from './store/app'
+import * as systemApi from './api/system'
+import * as systemHighApi from './api/system_high'
+
+// 自动设置 API
+setUserServer(systemApi.userServer)
+setParamSetupServer(systemHighApi.paramSetupServer)
+```
+
+### 修改后（直接导入模式）
+
+**优点**：
+- ✅ 代码更简洁
+- ✅ 不需要额外的 setter 函数
+- ✅ 依赖关系更清晰
+- ✅ 符合 ES6 模块化规范
+
+**代码示例**：
+```javascript
+// src/store/user.js
+import userServer from '../api/system/userServer'
+
+// 直接使用
+let res = await userServer.login(userFrom)
+```
+
+```javascript
+// src/index.js
+// 不再需要 setUserServer 和 setParamSetupServer
+import * as systemApi from './api/system'
+import * as systemHighApi from './api/system_high'
+```
+
+## 📁 修改的文件
+
+### 1. `src/store/user.js`
+
+**修改前**：
+```javascript
+import { setToken, getToken } from '../utils/tools'
+import uiTool from '../utils/uiTool'
+import { defaultMenus, filterMenusByIds } from '../config/menuConfig'
+
+// 注意：这里的 userServer 需要在使用时注入
+let userServerInstance = null
+
+export const setUserServer = (server) => {
+ userServerInstance = server
+}
+
+// 使用时
+if (!userServerInstance) {
+ throw new Error('userServer not initialized')
+}
+let res = await userServerInstance.login(userFrom)
+```
+
+**修改后**：
+```javascript
+import { setToken, getToken } from '../utils/tools'
+import uiTool from '../utils/uiTool'
+import { defaultMenus, filterMenusByIds } from '../config/menuConfig'
+import userServer from '../api/system/userServer'
+
+// 直接使用
+let res = await userServer.login(userFrom)
+```
+
+**变更点**：
+- ✅ 移除了 `userServerInstance` 变量
+- ✅ 移除了 `setUserServer` 导出函数
+- ✅ 直接导入 `userServer`
+- ✅ 移除了 `if (!userServerInstance)` 检查
+- ✅ 将所有 `userServerInstance` 替换为 `userServer`
+
+### 2. `src/store/app.js`
+
+**修改前**：
+```javascript
+import { getBreadCrumbList, getHomeRoute } from '../utils/tools'
+
+// 注意：这里的 paramSetupServer 需要在使用时注入
+let paramSetupServerInstance = null
+
+export const setParamSetupServer = (server) => {
+ paramSetupServerInstance = server
+}
+
+// 使用时
+if (!paramSetupServerInstance) {
+ commit('setSysTitle', formModel)
+ return
+}
+let res1 = await paramSetupServerInstance.getOne('sys_title')
+```
+
+**修改后**：
+```javascript
+import { getBreadCrumbList, getHomeRoute } from '../utils/tools'
+import paramSetupServer from '../api/system_high/paramSetupServer'
+
+// 直接使用
+let res1 = await paramSetupServer.getOne('sys_title')
+```
+
+**变更点**：
+- ✅ 移除了 `paramSetupServerInstance` 变量
+- ✅ 移除了 `setParamSetupServer` 导出函数
+- ✅ 直接导入 `paramSetupServer`
+- ✅ 移除了 `if (!paramSetupServerInstance)` 检查
+- ✅ 将所有 `paramSetupServerInstance` 替换为 `paramSetupServer`
+
+### 3. `src/index.js`
+
+**修改前**：
+```javascript
+// ==================== Store 模块 ====================
+import storeModules, { userModule, appModule } from './store'
+import { setUserServer } from './store/user'
+import { setParamSetupServer } from './store/app'
+
+// ==================== 系统 API ====================
+import * as systemApi from './api/system'
+import * as systemHighApi from './api/system_high'
+
+// 自动设置 API
+setUserServer(systemApi.userServer)
+setParamSetupServer(systemHighApi.paramSetupServer)
+
+// AdminFramework 类中的方法
+class AdminFramework {
+ /**
+ * 设置用户服务实例
+ */
+ setUserServer(userServer) {
+ setUserServer(userServer)
+ }
+
+ /**
+ * 设置参数设置服务实例
+ */
+ setParamSetupServer(paramSetupServer) {
+ setParamSetupServer(paramSetupServer)
+ }
+}
+```
+
+**修改后**：
+```javascript
+// ==================== Store 模块 ====================
+import storeModules, { userModule, appModule } from './store'
+
+// ==================== 系统 API ====================
+import * as systemApi from './api/system'
+import * as systemHighApi from './api/system_high'
+
+// AdminFramework 类中移除了 setUserServer 和 setParamSetupServer 方法
+```
+
+**变更点**：
+- ✅ 移除了 `setUserServer` 和 `setParamSetupServer` 的导入
+- ✅ 移除了自动设置 API 的代码
+- ✅ 移除了 `AdminFramework` 类中的 `setUserServer` 和 `setParamSetupServer` 方法
+
+## 🎯 影响范围
+
+### 不受影响的功能
+
+- ✅ 登录功能
+- ✅ 权限菜单
+- ✅ 系统标题
+- ✅ 所有业务功能
+
+### 代码简化
+
+**减少的代码行数**：
+- `src/store/user.js`: -7 行
+- `src/store/app.js`: -7 行
+- `src/index.js`: -12 行
+- **总计**: -26 行
+
+**移除的概念**：
+- ❌ `userServerInstance` 变量
+- ❌ `paramSetupServerInstance` 变量
+- ❌ `setUserServer` 函数
+- ❌ `setParamSetupServer` 函数
+- ❌ API 注入机制
+
+## 📊 对比表
+
+| 特性 | 注入模式 | 直接导入模式 |
+|------|---------|------------|
+| 代码行数 | 多 | 少 |
+| 复杂度 | 高 | 低 |
+| 依赖关系 | 隐式 | 显式 |
+| 初始化检查 | 需要 | 不需要 |
+| 灵活性 | 高（可运行时替换） | 中（编译时确定） |
+| 可读性 | 中 | 高 |
+| 维护性 | 中 | 高 |
+
+## 💡 设计理念
+
+### 为什么选择直接导入？
+
+1. **简单性优先**
+ - 对于大多数项目，API server 是固定的
+ - 不需要运行时动态替换
+ - 直接导入更符合直觉
+
+2. **符合 ES6 规范**
+ - 使用标准的 `import` 语法
+ - 依赖关系在文件顶部清晰可见
+ - 便于静态分析和 tree-shaking
+
+3. **减少样板代码**
+ - 不需要额外的 setter 函数
+ - 不需要初始化检查
+ - 代码更简洁
+
+### 何时使用注入模式？
+
+如果你的项目需要以下特性，可以考虑使用注入模式：
+
+1. **运行时替换 API**
+ - 例如：测试环境使用 mock API
+ - 例如：多租户系统使用不同的 API
+
+2. **插件化架构**
+ - 框架作为独立包发布
+ - 使用者可以自定义 API 实现
+
+3. **依赖注入容器**
+ - 使用 IoC 容器管理依赖
+ - 需要复杂的依赖管理
+
+对于本项目，直接导入模式更合适。
+
+## 🧪 测试验证
+
+### 测试步骤
+
+1. **启动项目**
+ ```bash
+ cd demo-project
+ npm run dev
+ ```
+
+2. **测试登录**
+ - 访问 `http://localhost:8080`
+ - 输入用户名密码
+ - 点击登录
+
+3. **验证功能**
+ - ✅ 登录成功
+ - ✅ 菜单显示正常
+ - ✅ 系统标题显示正常
+ - ✅ 页面跳转正常
+
+### 预期结果
+
+所有功能正常工作，与重构前完全一致。
+
+## 📝 迁移指南
+
+如果你的项目使用了旧的注入模式，可以按以下步骤迁移：
+
+### 步骤 1：修改 Store 模块
+
+**user.js**:
+```javascript
+// 删除
+let userServerInstance = null
+export const setUserServer = (server) => {
+ userServerInstance = server
+}
+
+// 添加
+import userServer from '../api/system/userServer'
+
+// 替换所有 userServerInstance 为 userServer
+```
+
+**app.js**:
+```javascript
+// 删除
+let paramSetupServerInstance = null
+export const setParamSetupServer = (server) => {
+ paramSetupServerInstance = server
+}
+
+// 添加
+import paramSetupServer from '../api/system_high/paramSetupServer'
+
+// 替换所有 paramSetupServerInstance 为 paramSetupServer
+```
+
+### 步骤 2：修改 index.js
+
+```javascript
+// 删除这些导入
+import { setUserServer } from './store/user'
+import { setParamSetupServer } from './store/app'
+
+// 删除这些调用
+setUserServer(systemApi.userServer)
+setParamSetupServer(systemHighApi.paramSetupServer)
+
+// 删除 AdminFramework 类中的这些方法
+setUserServer(userServer) { ... }
+setParamSetupServer(paramSetupServer) { ... }
+```
+
+### 步骤 3：测试验证
+
+运行项目，确保所有功能正常。
+
+## ✅ 总结
+
+### 重构成果
+
+- ✅ 代码更简洁（减少 26 行）
+- ✅ 结构更清晰
+- ✅ 依赖关系更明确
+- ✅ 维护更容易
+- ✅ 功能完全正常
+
+### 后续建议
+
+1. **保持简单**：除非有特殊需求，否则使用直接导入
+2. **统一风格**：项目中的所有 API 都使用相同的导入方式
+3. **文档更新**：更新项目文档，说明 API 的使用方式
+
+---
+
+**重构完成！** 🎉
+
+现在框架代码更简洁、更易维护了。
+
diff --git a/demo-project/CHANGELOG.md b/demo-project/CHANGELOG.md
new file mode 100644
index 0000000..7a2fb7b
--- /dev/null
+++ b/demo-project/CHANGELOG.md
@@ -0,0 +1,131 @@
+# Demo Project 更新日志
+
+## [最新更新] - 2025-10-08
+
+### ✅ 添加 Source Map 支持
+
+**新增功能**：
+- ✅ 完整的 Source Map 支持
+- ✅ 开发模式使用 `eval-source-map`
+- ✅ 生产模式使用 `source-map`
+- ✅ CSS/Less 也启用了 source map
+- ✅ 创建了详细的调试指南
+
+**好处**：
+- 🐛 可以在浏览器中直接调试源码
+- 🔍 支持断点调试
+- 📍 精确定位到源码行和列
+- 🎯 可以调试框架源码和业务代码
+
+**文档**：
+- 新增 [调试指南.md](./调试指南.md)
+- 更新 [README.md](./README.md) 添加调试说明
+
+---
+
+## [2025-10-08] - 修改为使用框架源码
+
+**重要变更**：
+- ✅ 现在直接使用框架源码而不是打包文件
+- ✅ 更方便调试和开发
+- ✅ 更新了 webpack 和 babel 配置
+
+### 📦 需要重新安装依赖
+
+由于添加了新的依赖，请重新安装：
+
+```bash
+cd demo-project
+
+# 删除旧的依赖（可选）
+rm -rf node_modules
+rm package-lock.json
+
+# 重新安装
+npm install
+```
+
+### 🔄 主要更新内容
+
+#### 1. main.js
+```javascript
+// 之前：使用打包文件
+import AdminFramework from './libs/admin-framework.js'
+
+// 现在：使用源码
+import AdminFramework from '../../src/index.js'
+```
+
+#### 2. webpack.config.js
+添加了框架源码的路径别名：
+```javascript
+alias: {
+ '@': path.resolve(__dirname, 'src'),
+ '@component': path.resolve(__dirname, '../src/components'),
+ '@utils': path.resolve(__dirname, '../src/utils'),
+ '@api': path.resolve(__dirname, '../src/api'),
+ '@config': path.resolve(__dirname, '../src/config'),
+ '@assets': path.resolve(__dirname, '../src/assets')
+}
+```
+
+#### 3. babel.config.js
+添加了 JSX 支持：
+```javascript
+presets: [
+ '@babel/preset-env',
+ '@vue/babel-preset-jsx' // ← 新增
+]
+```
+
+#### 4. package.json
+新增依赖：
+- `@vue/babel-preset-jsx` - JSX 支持
+- `brace` - 代码编辑器
+- `vue2-ace-editor` - Ace 编辑器
+
+### 🚀 启动项目
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+```
+
+### ✅ 优势
+
+使用框架源码的好处：
+
+1. **实时调试**
+ - 可以直接修改框架源码查看效果
+ - 无需重新打包框架
+
+2. **开发便利**
+ - 可以在框架源码中添加 console.log
+ - 方便追踪问题
+
+3. **热更新**
+ - 修改框架代码后自动刷新
+ - 开发体验更好
+
+### ⚠️ 注意事项
+
+1. **API 地址已更新**
+ - 从 `http://localhost:3000/api/` 改为 `http://localhost:9098/api/`
+ - 在 `src/config/index.js` 中修改
+
+2. **首次启动**
+ - 需要运行 `npm install` 安装新依赖
+ - Windows 用户可以双击 `start.bat` 自动安装
+
+3. **如果遇到错误**
+ - 删除 `node_modules` 和 `package-lock.json`
+ - 重新运行 `npm install`
+
+---
+
+**更新时间**: 2025-10-08
+**作者**: light
+
diff --git a/demo-project/INSTALL.md b/demo-project/INSTALL.md
new file mode 100644
index 0000000..0ffe34a
--- /dev/null
+++ b/demo-project/INSTALL.md
@@ -0,0 +1,164 @@
+# Demo Project 安装指南
+
+## 📦 安装步骤
+
+### 步骤 1：复制框架文件
+
+框架文件已经在创建 demo 时自动复制到 `src/libs/admin-framework.js`。
+
+如果需要更新框架，执行：
+
+```bash
+# 在 admin-framework 目录重新构建
+cd ../
+npm run build
+
+# 复制最新的框架文件
+cp dist/admin-framework.js demo-project/src/libs/
+```
+
+### 步骤 2：安装依赖
+
+```bash
+cd demo-project
+npm install
+```
+
+安装过程中会下载以下依赖：
+- vue, vue-router, vuex
+- view-design (UI 组件库)
+- axios (HTTP 客户端)
+- webpack 相关工具
+
+### 步骤 3：启动项目
+
+#### 开发模式
+
+```bash
+npm run dev
+```
+
+启动后自动打开浏览器访问 `http://localhost:8080`
+
+#### 生产构建
+
+```bash
+npm run build
+```
+
+构建完成后，产物在 `dist` 目录。
+
+## 🎯 功能演示
+
+### 1. 登录页面
+
+访问：`http://localhost:8080/login`
+
+默认登录信息（示例）：
+- 用户名：admin
+- 密码：123456
+
+### 2. 主页
+
+登录后自动跳转到主页：`http://localhost:8080/home`
+
+显示系统欢迎信息和标题。
+
+### 3. 系统管理页面
+
+框架内置的系统页面：
+- `/system/user` - 用户管理
+- `/system/role` - 角色管理
+- `/system_high/menu` - 菜单管理
+
+### 4. 业务示例页面
+
+访问：`http://localhost:8080/business/product`
+
+查看产品列表示例（包含增删改查操作演示）。
+
+## 🔧 开发提示
+
+### 修改配置
+
+编辑 `src/config/index.js`：
+
+```javascript
+export default {
+ title: '你的系统名称', // 修改系统标题
+ apiUrl: 'http://your-api.com/api/', // 修改 API 地址
+ uploadUrl: 'http://your-api.com/api/upload'
+}
+```
+
+### 添加新页面
+
+1. 在 `src/views/business/` 创建新的 `.vue` 文件
+2. 在 `src/main.js` 中添加路由：
+
+```javascript
+import NewPage from './views/business/new_page.vue'
+
+const businessRoutes = [
+ {
+ path: '/business/newpage',
+ name: 'new_page',
+ component: NewPage
+ }
+]
+```
+
+### 调用 API
+
+```javascript
+// GET 请求
+const res = await this.$http.get('user/list', { page: 1 })
+
+// POST 请求
+const res = await this.$http.post('user/add', { name: '张三' })
+```
+
+### 使用 Store
+
+```javascript
+// 获取用户信息
+const userName = this.$store.getters['user/userName']
+
+// 获取系统配置
+const sysTitle = this.$store.getters['app/sysFormModel']
+```
+
+## ⚠️ 常见问题
+
+### Q1: 启动后页面空白？
+
+检查浏览器控制台错误，确保：
+1. 框架文件已正确复制到 `src/libs/`
+2. 依赖已完全安装 `npm install`
+
+### Q2: 接口请求失败？
+
+修改 `src/config/index.js` 中的 `apiUrl` 为正确的后端地址。
+
+### Q3: 样式显示异常？
+
+确保已引入 ViewUI 样式：
+```javascript
+import 'view-design/dist/styles/iview.css'
+```
+
+## 📚 更多帮助
+
+- 查看完整框架文档：`../完整使用文档.md`
+- 框架 API 文档：`../完整使用文档.md#api-文档`
+
+## 🎉 开始开发
+
+所有准备工作已完成，现在可以开始开发了！
+
+```bash
+npm run dev
+```
+
+祝开发愉快！🚀
+
diff --git a/demo-project/PROJECT_STRUCTURE.md b/demo-project/PROJECT_STRUCTURE.md
new file mode 100644
index 0000000..f1ff581
--- /dev/null
+++ b/demo-project/PROJECT_STRUCTURE.md
@@ -0,0 +1,160 @@
+# Demo Project 项目结构说明
+
+## 📁 完整目录树
+
+```
+demo-project/
+│
+├── 📄 package.json # 项目依赖配置
+├── 📄 webpack.config.js # Webpack 构建配置
+├── 📄 babel.config.js # Babel 编译配置
+├── 📄 .gitignore # Git 忽略文件
+│
+├── 📄 README.md # 项目说明文档
+├── 📄 INSTALL.md # 安装指南
+├── 📄 PROJECT_STRUCTURE.md # 本文件 - 项目结构说明
+│
+├── 🚀 start.bat # Windows 快速启动脚本
+├── 🚀 start.sh # Linux/Mac 快速启动脚本
+│
+├── 📂 public/ # 静态资源
+│ └── index.html # HTML 模板
+│
+└── 📂 src/ # 源代码目录
+ │
+ ├── 📄 main.js # 入口文件 ⭐
+ ├── 📄 App.vue # 根组件
+ │
+ ├── 📂 config/ # 配置文件
+ │ └── index.js # 项目配置（API 地址、系统标题等）
+ │
+ ├── 📂 libs/ # 第三方库
+ │ └── admin-framework.js # Admin Framework 框架文件
+ │
+ └── 📂 views/ # 页面组件
+ └── business/ # 业务页面
+ └── product_list.vue # 产品列表示例页面
+```
+
+## 📝 核心文件说明
+
+### 1. 入口文件 `src/main.js`
+```javascript
+// 项目启动入口
+// 1. 引入框架
+// 2. 配置 Vue 实例
+// 3. 挂载应用
+```
+
+**主要功能**：
+- ✅ 引入并初始化 AdminFramework
+- ✅ 配置 Router 和 Store
+- ✅ 添加自定义业务路由
+- ✅ 设置响应式适配
+
+### 2. 配置文件 `src/config/index.js`
+```javascript
+export default {
+ title: 'Demo 管理系统',
+ apiUrl: 'http://localhost:3000/api/',
+ uploadUrl: 'http://localhost:3000/api/upload',
+ tokenKey: 'demo_token'
+}
+```
+
+**说明**：
+- 系统标题、API 地址等配置
+- 可根据环境切换配置
+
+### 3. 框架文件 `src/libs/admin-framework.js`
+- 从 `admin-framework/dist/` 复制的打包文件
+- 包含所有框架功能（页面、组件、工具等）
+- 大小：约 1.64 MB
+
+### 4. 业务页面 `src/views/business/product_list.vue`
+- 完整的 CRUD 示例
+- 展示如何使用框架的组件和工具
+- 包含 Table、Modal、Message 等组件使用
+
+## 🔧 配置文件说明
+
+### webpack.config.js
+- 入口：`src/main.js`
+- 输出：`dist/bundle.[hash].js`
+- 开发服务器：`localhost:8080`
+- 支持 Vue、Less、图片等文件处理
+
+### package.json
+**主要依赖**：
+- `vue` - Vue 框架
+- `vue-router` - 路由管理
+- `vuex` - 状态管理
+- `view-design` - UI 组件库
+- `axios` - HTTP 客户端
+
+**开发依赖**：
+- `webpack` - 打包工具
+- `babel` - JS 编译
+- `vue-loader` - Vue 文件加载器
+
+## 📂 扩展目录说明
+
+随着项目发展，可以添加以下目录：
+
+```
+src/
+├── api/ # API 接口封装
+│ └── business/
+│ └── product.js
+│
+├── assets/ # 业务资源文件
+│ ├── images/ # 图片
+│ └── styles/ # 样式
+│
+├── components/ # 业务组件
+│ └── CustomTable.vue
+│
+├── router/ # 路由配置
+│ └── index.js
+│
+└── store/ # 业务状态管理
+ └── modules/
+ └── product.js
+```
+
+## 🚀 启动流程
+
+1. **执行** `start.bat` 或 `npm run dev`
+2. **Webpack** 读取 `webpack.config.js`
+3. **入口** 加载 `src/main.js`
+4. **初始化** AdminFramework
+5. **创建** Vue 实例
+6. **挂载** 到 `#app`
+7. **启动** 开发服务器
+8. **打开** 浏览器 `http://localhost:8080`
+
+## 📊 文件大小参考
+
+| 文件 | 大小 | 说明 |
+|------|------|------|
+| admin-framework.js | ~1.64 MB | 框架打包文件 |
+| main.js | ~2 KB | 入口文件 |
+| App.vue | ~0.5 KB | 根组件 |
+| product_list.vue | ~4 KB | 业务示例 |
+| bundle.js（开发） | ~3 MB | 包含所有依赖 |
+| bundle.js（生产） | ~500 KB | 压缩后 |
+
+## 🎯 下一步
+
+1. **修改配置**：编辑 `src/config/index.js`
+2. **添加页面**：在 `src/views/business/` 创建新页面
+3. **注册路由**：在 `src/main.js` 添加路由配置
+4. **开始开发**：基于框架快速开发业务功能
+
+---
+
+**查看更多**：
+- [README.md](./README.md) - 项目概述
+- [INSTALL.md](./INSTALL.md) - 安装指南
+- [../完整使用文档.md](../完整使用文档.md) - 框架完整文档
+
diff --git a/demo-project/README.md b/demo-project/README.md
new file mode 100644
index 0000000..fcd5c9e
--- /dev/null
+++ b/demo-project/README.md
@@ -0,0 +1,292 @@
+# Demo Project - Admin Framework 使用示例
+
+这是一个使用 **Admin Framework** 框架的完整示例项目。
+
+## 📁 项目结构
+
+```
+demo-project/
+├── public/
+│ └── index.html # HTML 模板
+├── src/
+│ ├── config/
+│ │ └── index.js # 配置文件
+│ ├── libs/
+│ │ └── admin-framework.js # 框架文件（从 dist 复制）
+│ ├── views/
+│ │ └── business/
+│ │ └── product_list.vue # 示例业务页面
+│ ├── App.vue # 根组件
+│ └── main.js # 入口文件
+├── babel.config.js
+├── package.json
+├── webpack.config.js
+└── README.md
+```
+
+## ⚠️ 重要说明
+
+**本项目已更新为直接使用框架源码**（不再使用打包文件），更方便调试！
+
+**✅ 已启用完整的 Source Map 支持**，可以在浏览器中直接调试源码！
+
+**首次运行或更新后，请先安装依赖**：
+```bash
+npm install
+```
+
+如果遇到问题，删除 `node_modules` 和 `package-lock.json` 后重新安装。
+
+---
+
+## 🚀 快速开始
+
+### 方式一：一键启动（推荐）
+
+#### Windows 用户
+双击运行 `start.bat`，会自动：
+1. 检查并安装依赖
+2. 启动开发服务器
+3. 自动打开浏览器
+
+#### Linux/Mac 用户
+```bash
+chmod +x start.sh
+./start.sh
+```
+
+### 方式二：手动启动
+
+```bash
+# 1. 安装依赖（首次运行必须）
+npm install
+
+# 2. 启动开发服务器
+npm run dev
+```
+
+### ~~ 方式三：复制框架文件（已废弃）~~
+
+### 1. 使用源码（当前方式）
+
+将框架打包文件复制到项目中：
+
+```bash
+# 在 admin-framework 目录执行构建
+cd admin-framework
+npm run build
+
+# 创建 libs 目录
+mkdir demo-project/src/libs
+
+# 复制打包文件
+cp dist/admin-framework.js demo-project/src/libs/
+```
+
+### 2. 安装依赖
+
+```bash
+cd demo-project
+npm install
+```
+
+### 3. 启动开发服务器
+
+```bash
+npm run dev
+```
+
+浏览器会自动打开 `http://localhost:8080`
+
+### 4. 构建生产版本
+
+```bash
+npm run build
+```
+
+生成的文件在 `dist` 目录中。
+
+## 📝 核心文件说明
+
+### main.js - 入口文件
+
+```javascript
+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')
+```
+
+### config/index.js - 配置文件
+
+```javascript
+export default {
+ title: 'Demo 管理系统',
+ apiUrl: 'http://localhost:3000/api/',
+ uploadUrl: 'http://localhost:3000/api/upload',
+ tokenKey: 'demo_token'
+}
+```
+
+### 业务页面示例
+
+`src/views/business/product_list.vue` 展示了如何：
+- 使用 ViewUI 组件（Table、Button、Modal 等）
+- 调用 API 接口（this.$http）
+- 使用框架提供的工具方法
+
+## 🎯 框架提供的功能
+
+### 1. 内置页面
+
+- ✅ **主页**（HomePage）- 欢迎页面
+- ✅ **系统页面**（SysUser、SysRole、SysMenu 等）
+- ✅ **登录页面**（LoginPage）
+- ✅ **错误页面**（401、404、500）
+
+### 2. 布局组件
+
+- ✅ **Main** - 主布局
+- ✅ **ParentView** - 父级视图
+
+### 3. 工具方法
+
+```javascript
+// HTTP 请求
+this.$http.get(url, params)
+this.$http.post(url, data)
+
+// 工具函数
+this.$tools.formatDate(date, format)
+this.$tools.setToken(token)
+this.$tools.getToken()
+
+// UI 工具
+this.$uiTool.delConfirm(callback)
+this.$uiTool.setRem()
+```
+
+### 4. Store 状态管理
+
+```javascript
+// 用户模块
+this.$store.dispatch('user/handleLogin', data)
+this.$store.dispatch('user/handleLogOut')
+this.$store.getters['user/userName']
+
+// 应用模块
+this.$store.dispatch('app/getSysTitle', { defaultTitle: '系统' })
+this.$store.getters['app/sysFormModel']
+```
+
+## 🐛 调试功能
+
+### Source Map 已启用
+
+项目已配置完整的 Source Map 支持：
+
+✅ **开发模式**：使用 `eval-source-map`
+- 高质量的源码映射
+- 可以在浏览器中看到原始源代码
+- 支持断点调试
+- 包含行和列信息
+
+✅ **生产模式**：使用 `source-map`
+- 生成独立的 .map 文件
+- 完整的源码信息
+
+### 如何调试
+
+1. **启动开发服务器**：
+ ```bash
+ npm run dev
+ ```
+
+2. **打开浏览器开发者工具**（F12）
+
+3. **在 Sources 标签页查看源码**：
+ ```
+ webpack://
+ ├── demo-project/src/ ← Demo 项目源码
+ └── src/ ← 框架源码（可直接调试）
+ ```
+
+4. **设置断点调试**：
+ - 点击行号设置断点
+ - 或在代码中添加 `debugger` 语句
+
+### 详细调试指南
+
+查看完整调试教程：**[调试指南.md](./调试指南.md)** 📚
+
+包含：
+- Source Map 配置说明
+- 浏览器调试技巧
+- 框架源码调试方法
+- Vue DevTools 使用
+- Console 调试技巧
+
+## 🔧 自定义开发
+
+### 添加业务路由
+
+在 `main.js` 中添加自定义路由：
+
+```javascript
+const businessRoutes = [
+ {
+ path: '/business/product',
+ name: 'product_list',
+ component: ProductList
+ }
+]
+
+// 添加到主路由
+const mainRoute = AdminFramework.router.options.routes.find(r => r.path === '/')
+mainRoute.children.push(...businessRoutes)
+```
+
+### 使用系统页面
+
+```javascript
+import { SysUser, SysRole } from './libs/admin-framework.js'
+
+// 或者直接使用
+const SysUser = AdminFramework.SysUser
+```
+
+## 📚 更多文档
+
+查看完整文档：`admin-framework/完整使用文档.md`
+
+## 💡 提示
+
+1. **框架文件**：确保将最新的 `admin-framework.js` 复制到 `src/libs/` 目录
+2. **ViewUI 样式**：已在 main.js 中引入 `view-design/dist/styles/iview.css`
+3. **API 配置**：修改 `config/index.js` 中的 `apiUrl` 为你的后端地址
+4. **登录功能**：访问 `/login` 可以看到登录页面
+
+## 🎉 开始开发
+
+现在你可以：
+1. 访问 `http://localhost:8080/login` 查看登录页面
+2. 访问 `http://localhost:8080/home` 查看主页
+3. 访问 `http://localhost:8080/business/product` 查看业务页面示例
+4. 开始开发你的业务页面！
+
+祝开发愉快！ 🚀
+
diff --git a/demo-project/README_FIRST.txt b/demo-project/README_FIRST.txt
new file mode 100644
index 0000000..b0b0813
--- /dev/null
+++ b/demo-project/README_FIRST.txt
@@ -0,0 +1,64 @@
+=====================================================
+ ⭐ 首次运行必读 ⭐
+=====================================================
+
+Demo 项目已更新为使用框架源码（更方便调试）！
+
+【第一步：安装依赖】
+
+Windows 用户（推荐）:
+ 双击运行 install.bat
+
+或者手动运行:
+ npm install
+
+【第二步：启动项目】
+
+Windows 用户:
+ 双击运行 start.bat
+
+或者手动运行:
+ npm run dev
+
+【验证安装成功】
+
+运行以下命令检查依赖:
+ npm list --depth=0
+
+应该看到（无 UNMET DEPENDENCY 错误）:
+ ✅ @vue/babel-preset-jsx
+ ✅ brace
+ ✅ vue2-ace-editor
+ ✅ 其他依赖...
+
+【访问地址】
+
+http://localhost:8080
+
+可用页面:
+ /login - 登录页面
+ /home - 主页
+ /business/product - 产品列表示例
+
+【遇到错误？】
+
+1. 依赖缺失:
+ npm install @vue/babel-preset-jsx brace vue2-ace-editor
+
+2. 端口占用:
+ 修改 webpack.config.js 中的 port: 8081
+
+3. 删除重装:
+ rm -rf node_modules package-lock.json
+ npm install
+
+【详细文档】
+
+- 启动前必读.md - 完整启动指南
+- CHANGELOG.md - 更新日志
+- README.md - 项目说明
+
+=====================================================
+ 准备好了？运行 install.bat 开始吧！
+=====================================================
+
diff --git a/demo-project/Source_Map_说明.md b/demo-project/Source_Map_说明.md
new file mode 100644
index 0000000..49ef8d2
--- /dev/null
+++ b/demo-project/Source_Map_说明.md
@@ -0,0 +1,222 @@
+# Source Map 配置说明
+
+## ✅ 已完成配置
+
+Demo 项目现在已经配置了完整的 Source Map 支持！
+
+### 📝 配置内容
+
+#### 1. Webpack 配置（`webpack.config.js`）
+
+```javascript
+module.exports = (env, argv) => {
+ const isDevelopment = argv.mode === 'development'
+
+ return {
+ // Source Map 配置
+ devtool: isDevelopment ? 'eval-source-map' : 'source-map',
+
+ // CSS/Less Source Map
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'vue-style-loader',
+ {
+ loader: 'css-loader',
+ options: { sourceMap: isDevelopment }
+ }
+ ]
+ },
+ {
+ test: /\.less$/,
+ use: [
+ 'vue-style-loader',
+ {
+ loader: 'css-loader',
+ options: { sourceMap: isDevelopment }
+ },
+ {
+ loader: 'less-loader',
+ options: { sourceMap: isDevelopment }
+ }
+ ]
+ }
+ ]
+ }
+ }
+}
+```
+
+#### 2. DevServer 配置
+
+```javascript
+devServer: {
+ port: 8080,
+ hot: true,
+ open: true,
+ historyApiFallback: true,
+ // 错误覆盖层
+ client: {
+ overlay: {
+ errors: true, // 显示错误
+ warnings: false // 不显示警告
+ }
+ }
+}
+```
+
+### 🎯 Source Map 类型
+
+#### 开发模式：`eval-source-map`
+
+**优点**：
+- ✅ 高质量的源码映射
+- ✅ 包含行和列信息
+- ✅ 重新构建速度快
+- ✅ 适合开发调试
+
+**缺点**：
+- ❌ 生成的文件较大
+- ❌ 不适合生产环境
+
+#### 生产模式：`source-map`
+
+**优点**：
+- ✅ 最高质量的源码映射
+- ✅ 生成独立的 .map 文件
+- ✅ 不影响主文件加载
+
+**缺点**：
+- ❌ 构建速度慢
+- ❌ 文件体积大
+
+### 🔍 调试效果
+
+启动开发服务器后，在浏览器开发者工具中可以看到：
+
+```
+webpack://
+├── demo-project/
+│ └── src/
+│ ├── main.js ← 可以看到原始源码
+│ ├── App.vue
+│ ├── config/
+│ │ └── index.js
+│ └── views/
+│ └── business/
+│ └── product_list.vue
+│
+└── src/ ← 框架源码
+ ├── index.js
+ ├── components/
+ │ ├── main/
+ │ └── ...
+ ├── views/
+ │ ├── login/
+ │ ├── home/
+ │ └── ...
+ ├── store/
+ │ ├── user.js
+ │ └── app.js
+ └── utils/
+ ├── http.js
+ ├── tools.js
+ └── uiTool.js
+```
+
+### 💡 使用方法
+
+#### 1. 设置断点
+
+在浏览器开发者工具的 Sources 面板：
+1. 找到要调试的源文件
+2. 点击行号设置断点
+3. 刷新页面触发断点
+
+#### 2. 使用 debugger
+
+在代码中直接添加：
+```javascript
+export default {
+ mounted() {
+ debugger // ← 程序会在这里暂停
+ console.log('组件已挂载')
+ }
+}
+```
+
+#### 3. Console 调试
+
+```javascript
+// 在 Console 中执行
+$vm.$store.state // 查看 Vuex 状态
+$vm.$route // 查看路由信息
+$vm.$root // 查看根实例
+```
+
+### 📊 对比
+
+| 功能 | 有 Source Map | 无 Source Map |
+|------|--------------|---------------|
+| 看到的代码 | 原始源码 | 编译后的代码 |
+| 断点位置 | 精确到源码行列 | 只能在编译后代码设置 |
+| 变量名 | 原始变量名 | 可能被压缩 |
+| 调试体验 | ⭐⭐⭐⭐⭐ | ⭐⭐ |
+
+### ⚠️ 注意事项
+
+#### 1. 文件大小
+
+开发模式的 bundle 会包含 source map 信息，体积较大：
+- 开发环境：约 3-5 MB（包含 source map）
+- 生产环境：约 500 KB（压缩后，.map 文件独立）
+
+#### 2. 性能影响
+
+- **开发环境**：首次构建较慢，热更新很快
+- **生产环境**：构建时间增加，但运行时无影响
+
+#### 3. 安全性
+
+生产环境的 .map 文件：
+- 不要部署到公开的服务器
+- 或配置服务器禁止访问 .map 文件
+- 或使用错误追踪服务（如 Sentry）管理 source map
+
+### 🚀 快速开始
+
+1. **启动开发服务器**：
+ ```bash
+ npm run dev
+ ```
+
+2. **打开浏览器**：
+ 访问 `http://localhost:8080`
+
+3. **打开开发者工具**：
+ 按 `F12`
+
+4. **查看源码**：
+ 在 Sources 标签页中可以看到完整的源码结构
+
+5. **设置断点调试**：
+ 点击行号或在代码中添加 `debugger`
+
+### 📚 相关文档
+
+- **[调试指南.md](./调试指南.md)** - 完整的调试教程
+- **[README.md](./README.md)** - 项目说明
+- **[CHANGELOG.md](./CHANGELOG.md)** - 更新日志
+
+### 🔗 参考资源
+
+- [Webpack DevTool 文档](https://webpack.js.org/configuration/devtool/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Vue DevTools](https://devtools.vuejs.org/)
+
+---
+
+**现在你可以愉快地调试代码了！** 🎉
+
diff --git a/demo-project/authorityMenus接口失败解决方案.md b/demo-project/authorityMenus接口失败解决方案.md
new file mode 100644
index 0000000..d805b4e
--- /dev/null
+++ b/demo-project/authorityMenus接口失败解决方案.md
@@ -0,0 +1,314 @@
+# authorityMenus 接口失败解决方案
+
+## 🔧 问题描述
+
+登录成功后，调用 `/sys_user/authorityMenus` 接口失败，导致无法获取完整的菜单数据。
+
+## ✅ 解决方案
+
+### 方案：使用默认菜单配置
+
+当 `authorityMenus` 接口失败时，系统会自动使用默认的菜单配置，并根据登录接口返回的菜单 ID 数组进行过滤。
+
+## 📁 新增文件
+
+### `src/config/menuConfig.js`
+
+这个文件包含了默认的菜单配置，包括：
+
+1. **系统管理**
+ - 用户管理 (`/system/user`)
+ - 角色管理 (`/system/role`)
+ - 系统日志 (`/system/log`)
+ - 参数设置 (`/system/param`)
+
+2. **高级管理**
+ - 菜单管理 (`/system_high/menu`)
+ - 控制管理 (`/system_high/control`)
+ - 系统标题 (`/system_high/title`)
+
+3. **首页** (`/home`)
+
+## 🔄 工作流程
+
+### 1. 登录流程
+
+```
+用户登录
+ ↓
+调用 /sys_user/login 接口
+ ↓
+返回: { token, user, authorityMenus: "[1,142,121,...]" }
+ ↓
+保存 token 和用户信息
+ ↓
+解析 authorityMenus (字符串 → 数组)
+ ↓
+调用 /sys_user/authorityMenus 接口
+ ↓
+接口失败 ❌
+ ↓
+使用默认菜单配置 + 根据 ID 过滤
+ ↓
+生成路由
+ ↓
+登录成功 ✅
+```
+
+### 2. 菜单过滤逻辑
+
+```javascript
+// 登录返回的菜单 IDs
+authorityMenus: "[1,142,121,143,144,145,124,147,120,123,125,...]"
+
+// 解析为数组
+menuIds: [1, 142, 121, 143, 144, 145, 124, 147, 120, 123, 125, ...]
+
+// 从默认菜单配置中过滤出这些 ID 对应的菜单
+filteredMenus = filterMenusByIds(menuIds, defaultMenus)
+
+// 生成路由
+routes = uiTool.getRoutes(Main, ParentView, Page404)
+```
+
+## 📝 代码修改
+
+### 1. `src/store/user.js`
+
+**导入默认菜单配置：**
+```javascript
+import { defaultMenus, filterMenusByIds } from '../config/menuConfig'
+```
+
+**修改 `setAuthorityMenus` 方法：**
+```javascript
+async setAuthorityMenus({ state, commit }, { Main, ParentView, Page404, authorityMenus, menuIds }) {
+ let menus = authorityMenus
+
+ if (!menus && userServerInstance) {
+ try {
+ // 尝试调用接口
+ let res = await userServerInstance.authorityMenus()
+ if (res && res.code === 0 && res.data) {
+ menus = res.data
+ }
+ } catch (error) {
+ console.error('获取权限菜单失败:', error)
+ console.warn('将使用默认菜单配置')
+
+ // 接口失败，使用默认菜单配置
+ if (menuIds && menuIds.length > 0) {
+ // 根据 ID 过滤菜单
+ menus = filterMenusByIds(menuIds, defaultMenus)
+ } else {
+ // 使用所有默认菜单
+ menus = defaultMenus
+ }
+ }
+ }
+
+ // ... 后续处理
+}
+```
+
+**修改 `handleLogin` 方法：**
+```javascript
+async handleLogin({ state, commit, dispatch }, { userFrom, Main, ParentView, Page404 }) {
+ let res = await userServerInstance.login(userFrom)
+
+ let token = res.data.token
+ let user = res.data.user
+ let authorityMenusIds = res.data.authorityMenus
+
+ commit('setUserName', user.name.trim())
+ commit('setToken', token)
+
+ // 解析菜单 IDs
+ let menuIds = []
+ if (authorityMenusIds) {
+ if (typeof authorityMenusIds === 'string') {
+ menuIds = JSON.parse(authorityMenusIds)
+ } else if (Array.isArray(authorityMenusIds)) {
+ menuIds = authorityMenusIds
+ }
+ }
+
+ // 传递 menuIds，以便在接口失败时使用
+ await dispatch('setAuthorityMenus', {
+ Main,
+ ParentView,
+ Page404,
+ menuIds
+ })
+}
+```
+
+## 🎯 测试步骤
+
+### 1. 启动项目
+```bash
+cd demo-project
+npm run dev
+```
+
+### 2. 登录测试
+- 用户名：`zc`
+- 密码：对应的密码
+
+### 3. 查看控制台日志
+
+**成功的日志：**
+```
+登录接口返回: { code: 0, data: { token, user, authorityMenus } }
+登录返回的菜单 IDs: "[1,142,121,...]"
+获取权限菜单失败: [错误信息]
+将使用默认菜单配置
+根据菜单 IDs 过滤后的菜单: [...]
+最终处理的权限菜单: [...]
+生成的主菜单: { path: '/', children: [...] }
+```
+
+### 4. 验证结果
+
+登录成功后，应该能看到：
+- ✅ 页面刷新
+- ✅ 进入系统首页
+- ✅ 左侧显示菜单（根据权限过滤）
+- ✅ 顶部显示用户名
+
+## 📊 菜单 ID 映射
+
+根据登录返回的菜单 IDs：
+```
+[1,142,121,143,144,145,124,147,120,123,125,132,133,126,136,137,138,139,151,152,153,154,149,150,156,157,158,122,159,5,11,12,13,67,68,15]
+```
+
+默认菜单配置中包含的 IDs：
+- `1` - 首页
+- `5` - 系统管理
+- `11` - 用户管理
+- `12` - 角色管理
+- `13` - 系统日志
+- `15` - 参数设置
+- `120` - 高级管理
+- `122` - 菜单管理
+- `123` - 控制管理
+- `124` - 系统标题
+
+过滤后会显示这些菜单。
+
+## ⚠️ 注意事项
+
+### 1. 默认菜单配置的限制
+
+默认菜单配置只包含了常用的系统管理菜单。如果你的系统有其他业务菜单，需要：
+
+**选项 A：扩展默认菜单配置**
+
+编辑 `src/config/menuConfig.js`，添加更多菜单：
+```javascript
+export const defaultMenus = [
+ // ... 现有菜单
+ {
+ id: 200,
+ name: '业务管理',
+ path: '/business',
+ component: '',
+ parent_id: 0,
+ type: '菜单',
+ is_show_menu: 1,
+ icon: 'md-briefcase',
+ children: [
+ {
+ id: 201,
+ name: '订单管理',
+ path: '/business/order',
+ component: 'business/order',
+ parent_id: 200,
+ type: '页面',
+ is_show_menu: 1
+ }
+ ]
+ }
+]
+```
+
+**选项 B：修复后端接口**
+
+这是推荐的长期方案。修复 `/sys_user/authorityMenus` 接口，使其返回完整的菜单对象数组。
+
+### 2. 菜单组件路径
+
+默认菜单配置中的 `component` 字段指向 `src/views/` 目录下的组件。
+
+例如：
+- `component: 'system/sys_user'` → `src/views/system/sys_user.vue`
+- `component: 'home/index'` → `src/views/home/index.vue`
+
+确保这些组件文件存在。
+
+### 3. 菜单权限
+
+即使使用默认菜单配置，也会根据登录返回的菜单 IDs 进行过滤。
+
+用户只能看到他有权限的菜单。
+
+## 🔧 后续优化建议
+
+### 短期方案（当前实现）
+✅ 使用默认菜单配置 + ID 过滤
+- 优点：快速解决问题，用户可以登录
+- 缺点：需要手动维护默认菜单配置
+
+### 长期方案（推荐）
+🎯 修复后端 `authorityMenus` 接口
+- 优点：动态获取菜单，灵活性高
+- 缺点：需要修改后端代码
+
+**建议后端接口返回格式：**
+```json
+{
+ "code": 0,
+ "message": "请求成功",
+ "data": [
+ {
+ "id": 1,
+ "name": "首页",
+ "path": "/home",
+ "component": "home/index",
+ "parent_id": 0,
+ "type": "页面",
+ "is_show_menu": 1,
+ "icon": "md-home",
+ "sort": 1
+ },
+ {
+ "id": 5,
+ "name": "系统管理",
+ "path": "/system",
+ "component": "",
+ "parent_id": 0,
+ "type": "菜单",
+ "is_show_menu": 1,
+ "icon": "md-settings",
+ "sort": 2,
+ "children": [...]
+ }
+ ]
+}
+```
+
+## 🎉 总结
+
+现在即使 `authorityMenus` 接口失败，系统也能：
+1. ✅ 正常登录
+2. ✅ 显示菜单（根据权限过滤）
+3. ✅ 访问有权限的页面
+4. ✅ 提供良好的用户体验
+
+如果需要添加更多菜单，请编辑 `src/config/menuConfig.js` 文件。
+
+---
+
+**当前状态**：登录功能已修复，可以正常使用！🎉
+
diff --git a/demo-project/babel.config.js b/demo-project/babel.config.js
new file mode 100644
index 0000000..30b8d8c
--- /dev/null
+++ b/demo-project/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: {
+ browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
+ }
+ }
+ ],
+ '@vue/babel-preset-jsx'
+ ]
+}
+
diff --git a/demo-project/install.bat b/demo-project/install.bat
new file mode 100644
index 0000000..21d6165
--- /dev/null
+++ b/demo-project/install.bat
@@ -0,0 +1,39 @@
+@echo off
+echo ====================================
+echo 安装 Demo 项目依赖
+echo ====================================
+echo.
+
+echo [1/3] 清理旧依赖...
+if exist "node_modules\" (
+ echo 删除 node_modules 目录...
+ rmdir /s /q node_modules
+)
+if exist "package-lock.json" (
+ echo 删除 package-lock.json...
+ del /f /q package-lock.json
+)
+echo.
+
+echo [2/3] 安装所有依赖...
+echo 这可能需要几分钟时间，请耐心等待...
+echo.
+call npm install
+echo.
+
+echo [3/3] 验证关键依赖...
+echo.
+call npm list @vue/babel-preset-jsx brace vue2-ace-editor --depth=0
+echo.
+
+echo ====================================
+echo 安装完成！
+echo ====================================
+echo.
+echo 现在可以运行以下命令启动项目:
+echo 1. 双击 start.bat
+echo 2. 或运行: npm run dev
+echo.
+
+pause
+
diff --git a/demo-project/package.json b/demo-project/package.json
new file mode 100644
index 0000000..9b5cb0b
--- /dev/null
+++ b/demo-project/package.json
@@ -0,0 +1,49 @@
+{
+ "name": "demo-project",
+ "version": "1.0.0",
+ "description": "Admin Framework 使用示例项目",
+ "main": "src/main.js",
+ "scripts": {
+ "dev": "webpack-dev-server --mode development --open",
+ "build": "webpack --mode production"
+ },
+ "keywords": [
+ "admin",
+ "vue",
+ "demo"
+ ],
+ "author": "light",
+ "license": "MIT",
+ "dependencies": {
+ "axios": "^0.21.4",
+ "brace": "^0.11.1",
+ "core-js": "^3.45.1",
+ "dayjs": "^1.10.0",
+ "js-cookie": "^2.2.1",
+ "view-design": "^4.7.0",
+ "vue": "^2.6.14",
+ "vue-router": "^3.5.3",
+ "vue2-ace-editor": "^0.0.15",
+ "vuex": "^3.6.2",
+ "vuex-persistedstate": "^4.1.0"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.12.0",
+ "@babel/preset-env": "^7.12.0",
+ "@vue/babel-preset-jsx": "^1.4.0",
+ "babel-loader": "^8.2.0",
+ "css-loader": "^5.0.0",
+ "file-loader": "^6.2.0",
+ "html-webpack-plugin": "^5.5.0",
+ "less": "^4.0.0",
+ "less-loader": "^7.0.0",
+ "style-loader": "^2.0.0",
+ "url-loader": "^4.1.0",
+ "vue-loader": "^15.9.0",
+ "vue-style-loader": "^4.1.0",
+ "vue-template-compiler": "^2.6.14",
+ "webpack": "^5.0.0",
+ "webpack-cli": "^4.0.0",
+ "webpack-dev-server": "^4.0.0"
+ }
+}
diff --git a/demo-project/public/index.html b/demo-project/public/index.html
new file mode 100644
index 0000000..388a2bf
--- /dev/null
+++ b/demo-project/public/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Demo 管理系统
+
+
+
+
+
+
+
diff --git a/demo-project/src/App.vue b/demo-project/src/App.vue
new file mode 100644
index 0000000..1006329
--- /dev/null
+++ b/demo-project/src/App.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/demo-project/src/config/index.js b/demo-project/src/config/index.js
new file mode 100644
index 0000000..c8d73ea
--- /dev/null
+++ b/demo-project/src/config/index.js
@@ -0,0 +1,23 @@
+/**
+ * 项目配置文件
+ */
+export default {
+ // 系统标题
+ title: 'Demo 管理系统',
+
+ // API 基础路径
+ apiUrl: 'http://localhost:9098/admin_api/',
+
+ // 文件上传路径
+ uploadUrl: 'http://localhost:9098/admin_api/upload',
+
+ // Token 存储的 key
+ tokenKey: 'demo_token',
+
+ // 其他配置
+ timeout: 30000,
+
+ // 是否显示页面加载进度条
+ showProgressBar: true
+}
+
diff --git a/demo-project/src/main.js b/demo-project/src/main.js
new file mode 100644
index 0000000..b3b6e45
--- /dev/null
+++ b/demo-project/src/main.js
@@ -0,0 +1,76 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+import ViewUI from 'view-design'
+import createPersistedState from 'vuex-persistedstate'
+import 'view-design/dist/styles/iview.css'
+
+// 引入框架（直接使用源码，方便调试）
+import AdminFramework from '../../src/index.js'
+
+// 引入配置
+import config from './config'
+
+// 引入根组件
+import App from './App.vue'
+
+// 引入业务页面（可选）
+import ProductList from './views/business/product_list.vue'
+
+// 🎉 使用框架 - 自动完成所有初始化
+Vue.use(AdminFramework, {
+ config,
+ ViewUI,
+ VueRouter,
+ Vuex,
+ createPersistedState
+})
+
+// 添加自定义业务路由（可选）
+const businessRoutes = [
+ {
+ path: '/business/product',
+ name: 'product_list',
+ meta: { title: '产品列表' },
+ component: ProductList
+ }
+]
+
+// 将业务路由添加到主路由中
+const mainRoute = AdminFramework.router.options.routes.find(r => r.path === '/')
+if (mainRoute && mainRoute.children) {
+ mainRoute.children.push(...businessRoutes)
+}
+
+// 创建 Vue 实例
+window.rootVue = new Vue({
+ el: '#app',
+ router: AdminFramework.router,
+ store: AdminFramework.store,
+ render: h => h(App),
+ mounted() {
+ // 设置响应式适配
+ AdminFramework.uiTool.setRem()
+
+ // 设置权限菜单（从后端获取）
+ this.$store.dispatch('user/setAuthorityMenus', {
+ Main: AdminFramework.Main,
+ ParentView: AdminFramework.ParentView,
+ Page404: AdminFramework.Page404
+ })
+
+ // 获取系统标题
+ this.$store.dispatch('app/getSysTitle', {
+ defaultTitle: 'Demo 管理系统',
+ defaultLogo: ''
+ })
+ }
+})
+
+// 响应式适配
+window.addEventListener('load', AdminFramework.uiTool.setRem)
+window.addEventListener('resize', AdminFramework.uiTool.setRem)
+
+console.log('✅ Demo 项目启动成功！')
+console.log('框架版本:', AdminFramework.version)
+
diff --git a/demo-project/src/views/business/product_list.vue b/demo-project/src/views/business/product_list.vue
new file mode 100644
index 0000000..9674bc0
--- /dev/null
+++ b/demo-project/src/views/business/product_list.vue
@@ -0,0 +1,193 @@
+
+
+
产品列表
+
+
+
+
+
+
+
+
+
+