# 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`