1

demo/README.md

@@ -0,0 +1,251 @@
+# Admin Framework Demo
+
+本目录包含 Admin Framework 的使用示例，提供两种使用方式：
+
+## 📁 文件说明
+
+### 🌐 CDN 版本（快速体验）
+- **index.html** - 基础示例（CDN）
+- **advanced.html** - 高级示例（CDN）
+
+适合快速体验，所有依赖从 CDN 加载，无需安装。
+
+### 💻 本地开发版本（推荐开发使用）
+- **src/** - 源代码目录
+  - **main.js** - 基础示例入口
+  - **main-advanced.js** - 高级示例入口
+  - **components/** - 自定义组件
+- **package.json** - 依赖配置
+- **webpack.config.js** - 构建配置
+
+所有依赖本地安装，支持热更新，适合开发调试。
+
+---
+
+## 🚀 使用方式
+
+### 方式一：CDN 版本（快速体验）
+
+#### index.html - 基础示例
+最简单的使用示例，展示如何：
+- 引入必要的依赖
+- 初始化框架
+- 创建基本应用
+
+#### advanced.html - 高级示例
+完整的使用示例，展示如何：
+- 添加自定义页面组件
+- 注册自定义 Vuex 模块
+- 添加自定义路由
+- 配置路由守卫
+- 配置 Axios 拦截器
+- 使用组件映射
+
+### 方式二：本地开发版本（推荐）
+
+查看详细文档：[README-LOCAL.md](./README-LOCAL.md)
+
+快速开始：
+```bash
+# 1. 构建框架（在项目根目录）
+cd ..
+npm run build
+
+# 2. 安装 demo 依赖
+cd demo
+npm install
+
+# 3. 启动开发服务器
+npm run dev
+```
+
+## 使用步骤
+
+### 1. 构建框架
+首先需要构建 admin-framework：
+
+```bash
+# 生产构建（压缩，无 sourcemap）
+npm run build
+
+# 开发构建（不压缩，有 sourcemap）
+npm run build:dev
+```
+
+### 2. 启动示例
+
+有以下几种方式启动示例：
+
+#### 方式一：使用 Live Server（推荐）
+1. 安装 VS Code 的 Live Server 插件
+2. 右键 `index.html` 或 `advanced.html`
+3. 选择 "Open with Live Server"
+
+#### 方式二：使用 HTTP 服务器
+```bash
+# 安装 http-server
+npm install -g http-server
+
+# 在项目根目录运行
+http-server
+
+# 访问
+# http://localhost:8080/demo/index.html
+# http://localhost:8080/demo/advanced.html
+```
+
+#### 方式三：直接打开
+- 双击 HTML 文件在浏览器中打开
+- 注意：某些功能可能因跨域限制无法使用
+
+## 配置说明
+
+### 基本配置
+```javascript
+const config = {
+  title: '系统标题',
+  apiUrl: 'http://your-api.com/api/',  // API 基础地址
+  uploadUrl: 'http://your-api.com/api/upload'  // 上传接口地址
+}
+```
+
+### 初始化框架
+```javascript
+framework.install(Vue, {
+  config: config,           // 配置对象
+  ViewUI: iview,           // iView 实例
+  VueRouter: VueRouter,    // Vue Router
+  Vuex: Vuex,              // Vuex
+  createPersistedState: null,  // Vuex 持久化插件（可选）
+  componentMap: {}         // 自定义组件映射
+})
+```
+
+## 内置功能
+
+### 1. 系统页面
+- **登录页面**: `/login`
+- **首页**: `/home`
+- **错误页面**: `/401`, `/404`, `/500`
+
+### 2. 系统管理
+- **用户管理**: 系统用户的增删改查
+- **角色管理**: 角色权限管理
+- **菜单管理**: 动态菜单配置
+- **日志管理**: 系统操作日志
+
+### 3. 高级功能
+- **动态表单**: 基于配置生成表单
+- **动态表格**: 可配置的数据表格
+- **文件上传**: 单文件/多文件上传
+- **富文本编辑器**: WangEditor
+- **代码编辑器**: Ace Editor
+
+## API 使用
+
+### HTTP 请求
+```javascript
+// GET 请求
+framework.http.get('/api/users').then(res => {
+  console.log(res.data)
+})
+
+// POST 请求
+framework.http.post('/api/users', {
+  name: '张三',
+  age: 25
+}).then(res => {
+  console.log(res.data)
+})
+
+// 在组件中使用
+this.$http.get('/api/users').then(res => {
+  console.log(res.data)
+})
+```
+
+### 工具函数
+```javascript
+// 使用框架提供的工具函数
+const tools = framework.tools
+
+// 日期格式化
+tools.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
+
+// 深拷贝
+tools.deepClone(obj)
+
+// 防抖
+tools.debounce(fn, 500)
+
+// 节流
+tools.throttle(fn, 500)
+```
+
+### UI 工具
+```javascript
+// 使用 UI 工具
+const uiTool = framework.uiTool
+
+// 成功提示
+uiTool.success('操作成功')
+
+// 错误提示
+uiTool.error('操作失败')
+
+// 确认对话框
+uiTool.confirm('确定删除吗？').then(() => {
+  // 确认后的操作
+})
+```
+
+## 常见问题
+
+### 1. 依赖库版本
+确保使用以下版本的依赖库：
+- Vue: 2.6.x
+- Vue Router: 3.x
+- Vuex: 3.x
+- iView (view-design): 4.x
+- Axios: 0.21.x+
+
+### 2. 路径问题
+如果无法加载 admin-framework.js，检查路径是否正确：
+```html
+<!-- 确保路径指向正确的文件 -->
+<script src="../dist/admin-framework.js"></script>
+```
+
+### 3. API 地址
+记得修改配置中的 API 地址为实际的后端地址：
+```javascript
+const config = {
+  apiUrl: 'http://your-real-api.com/api/',
+  uploadUrl: 'http://your-real-api.com/api/upload'
+}
+```
+
+### 4. 跨域问题
+如果遇到跨域问题，需要配置后端 CORS 或使用代理。
+
+## 开发建议
+
+1. **开发时使用 build:dev**
+   - 生成 sourcemap，方便调试
+   - 代码不压缩，易读
+
+2. **生产时使用 build**
+   - 代码压缩，体积小
+   - 无 sourcemap，安全
+
+3. **使用浏览器调试工具**
+   ```javascript
+   // 所有实例都挂载到 window 上，方便调试
+   window.app        // Vue 实例
+   window.framework  // 框架实例
+   ```
+
+## 更多信息
+
+查看完整文档：`../_doc/完整使用文档.md`
+