# Admin Framework Demo - 本地版本

本地开发版本，不依赖 CDN，所有依赖都从 node_modules 加载。

## 目录结构

```
demo/
├── public/              # 静态资源
│   └── index.html      # HTML 模板
├── src/                # 源代码
│   ├── components/     # 自定义组件
│   │   └── CustomPage.vue
│   ├── main.js         # 基础示例入口
│   └── main-advanced.js # 高级示例入口
├── package.json        # 依赖配置
├── webpack.config.js   # Webpack 配置
└── .babelrc           # Babel 配置
```

## 快速开始

### 1. 构建 Admin Framework

首先需要构建框架（在项目根目录执行）：

```bash
# 回到项目根目录
cd ..

# 生产构建
npm run build

# 或开发构建（有 sourcemap）
npm run build:dev
```

### 2. 安装 Demo 依赖

```bash
# 进入 demo 目录
cd demo

# 安装依赖
npm install
```

### 3. 启动开发服务器

```bash
# 启动基础示例
npm run dev

# 浏览器会自动打开 http://localhost:8080
```

### 4. 构建生产版本

```bash
# 构建
npm run build

# 生成的文件在 demo/dist 目录
```

## 切换示例

### 基础示例（默认）
使用 `src/main.js` 作为入口，展示基本功能。

### 高级示例
要切换到高级示例，修改 `webpack.config.js`：

```javascript
module.exports = {
  entry: './src/main-advanced.js', // 改为 main-advanced.js
  // ... 其他配置
}
```

然后重新运行 `npm run dev`。

## 依赖说明

### 生产依赖
- **vue**: ^2.6.14 - Vue 核心库
- **vue-router**: ^3.5.3 - 路由管理
- **vuex**: ^3.6.2 - 状态管理
- **view-design**: ^4.7.0 - UI 组件库
- **axios**: ^0.27.2 - HTTP 客户端

### 开发依赖
- **webpack**: ^5.0.0 - 模块打包工具
- **webpack-dev-server**: ^4.0.0 - 开发服务器
- **babel-loader**: ^8.2.0 - ES6+ 转译
- **vue-loader**: ^15.9.0 - Vue 单文件组件加载器
- **html-webpack-plugin**: ^5.5.0 - HTML 生成插件

## 开发指南

### 1. 添加自定义页面

在 `src/components` 创建新组件：

```vue
<!-- src/components/MyPage.vue -->
<template>
  <div>
    <h1>我的页面</h1>
  </div>
</template>

<script>
export default {
  name: 'MyPage'
}
</script>
```

### 2. 注册到路由

在 `src/main.js` 或 `src/main-advanced.js` 中：

```javascript
import MyPage from './components/MyPage.vue'

const customRoutes = [
  {
    path: '/my',
    component: AdminFramework.Main,
    children: [
      {
        path: 'page',
        component: MyPage,
        meta: { title: '我的页面' }
      }
    ]
  }
]

customRoutes.forEach(route => {
  AdminFramework.router.addRoute(route)
})
```

### 3. 添加 Vuex 模块

```javascript
const myModule = {
  namespaced: true,
  state: { data: null },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    fetchData({ commit }) {
      // 获取数据逻辑
    }
  }
}

AdminFramework.store.registerModule('myModule', myModule)
```

### 4. 使用框架提供的组件

```vue
<template>
  <div>
    <!-- 表格组件 -->
    <Tables
      :columns="columns"
      :data="tableData"
    />

    <!-- 上传组件 -->
    <UploadSingle
      v-model="fileUrl"
      :action="uploadUrl"
    />

    <!-- 富文本编辑器 -->
    <Editor v-model="content" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [],
      tableData: [],
      fileUrl: '',
      content: '',
      uploadUrl: this.$config.uploadUrl
    }
  }
}
</script>
```

## API 配置

修改 `src/main.js` 中的配置：

```javascript
const config = {
  title: '系统标题',
  apiUrl: 'http://your-api.com/api/',
  uploadUrl: 'http://your-api.com/api/upload'
}
```

## HTTP 请求示例

### 在组件中使用

```javascript
export default {
  methods: {
    async fetchData() {
      try {
        // GET 请求
        const res = await this.$http.get('/api/users')
        console.log(res.data)

        // POST 请求
        const res2 = await this.$http.post('/api/users', {
          name: '张三',
          age: 25
        })
        console.log(res2.data)
      } catch (error) {
        this.$Message.error('请求失败')
      }
    }
  }
}
```

## 工具函数使用

```javascript
export default {
  methods: {
    example() {
      // 日期格式化
      const formatted = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')

      // 深拷贝
      const copy = this.$tools.deepClone(obj)

      // 防抖
      const debounced = this.$tools.debounce(() => {
        console.log('执行')
      }, 500)

      // 节流
      const throttled = this.$tools.throttle(() => {
        console.log('执行')
      }, 1000)
    }
  }
}
```

## UI 工具使用

```javascript
export default {
  methods: {
    example() {
      // 成功提示
      this.$ window.framework.uiTool.success('操作成功')

      // 错误提示
      this.$ window.framework.uiTool.error('操作失败')

      // 警告提示
      this.$ window.framework.uiTool.warning('警告信息')

      // 确认对话框
      this.$ window.framework.uiTool.confirm('确定删除吗？').then(() => {
        // 确认后的操作
      }).catch(() => {
        // 取消后的操作
      })

      // Loading
      const loading = this.$ window.framework.uiTool.loading('加载中...')
      setTimeout(() => loading.close(), 2000)
    }
  }
}
```

## 常见问题

### 1. 模块找不到
确保先构建了 admin-framework：
```bash
cd .. && npm run build && cd demo
```

### 2. 端口被占用
修改 `webpack.config.js` 中的端口：
```javascript
devServer: {
  port: 8081, // 改为其他端口
  // ...
}
```

### 3. 热更新不生效
检查 `devServer.hot` 配置是否为 `true`。

### 4. 样式不生效
确保在入口文件中引入了 iView 样式：
```javascript
import 'view-design/dist/styles/iview.css'
```

## 生产部署

### 1. 构建
```bash
npm run build
```

### 2. 部署
将 `demo/dist` 目录下的文件部署到服务器。

### 3. 注意事项
- 确保后端 API 配置正确
- 配置 Nginx 或其他服务器的路由重写规则（支持 Vue Router 的 history 模式）

## 更多示例

- 基础示例: 运行 `npm run dev`（默认）
- 高级示例: 修改 webpack.config.js 的 entry 为 `./src/main-advanced.js`

## 相关链接

- [Admin Framework 完整文档](../_doc/完整使用文档.md)
- [Vue 官方文档](https://cn.vuejs.org/)
- [Vue Router 文档](https://router.vuejs.org/zh/)
- [Vuex 文档](https://vuex.vuejs.org/zh/)
- [iView 文档](https://www.iviewui.com/)