1

2025-10-09 18:00:37 +08:00
parent 4823e1d152
commit 366c18bcea
96 changed files with 16623 additions and 12 deletions
--- a/demo/README-LOCAL.md
+++ b/demo/README-LOCAL.md
@@ -0,0 +1,351 @@
+# 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.$uiTool.success('操作成功')
+
+      // 错误提示
+      this.$uiTool.error('操作失败')
+
+      // 警告提示
+      this.$uiTool.warning('警告信息')
+
+      // 确认对话框
+      this.$uiTool.confirm('确定删除吗？').then(() => {
+        // 确认后的操作
+      }).catch(() => {
+        // 取消后的操作
+      })
+
+      // Loading
+      const loading = this.$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/)
+