From 81aa1d49fd70069ac82b1d1dd594f31f95188a54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Fri, 10 Oct 2025 00:37:30 +0800 Subject: [PATCH] 1 --- demo/README-LOCAL.md | 351 ---------------------- demo/index.html | 77 ----- demo/src/api/ball/game_comments_server.js | 15 +- demo/src/views/users/recommend_blocks.vue | 26 +- src/components/tables/editModal.vue | 18 +- src/components/upload/Single.vue | 10 +- 6 files changed, 58 insertions(+), 439 deletions(-) delete mode 100644 demo/README-LOCAL.md delete mode 100644 demo/index.html diff --git a/demo/README-LOCAL.md b/demo/README-LOCAL.md deleted file mode 100644 index 5aee428..0000000 --- a/demo/README-LOCAL.md +++ /dev/null @@ -1,351 +0,0 @@ -# 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 - - - - -``` - -### 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 - - - -``` - -## 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/) - diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index ac39afb..0000000 --- a/demo/index.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - Admin Framework Demo - - - - - - - -
- - - - - - - - - - - - - - - diff --git a/demo/src/api/ball/game_comments_server.js b/demo/src/api/ball/game_comments_server.js index 82330ce..ab23b80 100644 --- a/demo/src/api/ball/game_comments_server.js +++ b/demo/src/api/ball/game_comments_server.js @@ -1,6 +1,5 @@ - -export default { +const gameCommentsServer = { // 获取球局评论列表 getGameCommentsList: (params) => { return window.framework.http.post('/game_comments/page', params) @@ -50,4 +49,14 @@ export default { getCommentReplies: (params) => { return window.framework.http.get('/game_comments/replies', params) } -} \ No newline at end of file +} + +// 添加简写方法名别名，保持向后兼容 +gameCommentsServer.page = gameCommentsServer.getGameCommentsList +gameCommentsServer.all = gameCommentsServer.getAllGameComments +gameCommentsServer.add = gameCommentsServer.addGameComment +gameCommentsServer.edit = gameCommentsServer.updateGameComment +gameCommentsServer.del = gameCommentsServer.deleteGameComment +gameCommentsServer.exportCsv = gameCommentsServer.exportGameComments + +export default gameCommentsServer \ No newline at end of file diff --git a/demo/src/views/users/recommend_blocks.vue b/demo/src/views/users/recommend_blocks.vue index 427c5de..5e78c8c 100644 --- a/demo/src/views/users/recommend_blocks.vue +++ b/demo/src/views/users/recommend_blocks.vue @@ -43,7 +43,6 @@ export default { { key: 'blocked_user_id', value: '被屏蔽用户ID' }, { key: 'nickname', value: '用户昵称' } ], - seachTypePlaceholder: '请选择搜索类型', gridOption: { param: { seachOption: { @@ -93,9 +92,28 @@ export default { } ], editColumns: [ - { title: '用户ID', key: 'user_id', type: 'number', required: true }, - { title: '被屏蔽用户ID', key: 'blocked_user_id', type: 'number', required: true }, - { title: '屏蔽时间', key: 'block_time', type: 'datetime' } + { + title: '用户ID', + key: 'user_id', + data_type: 'number', + com: 'InputNumber', + required: true, + is_show_edit: 1 + }, + { + title: '被屏蔽用户ID', + key: 'blocked_user_id', + data_type: 'number', + com: 'InputNumber', + required: true, + is_show_edit: 1 + }, + { + title: '屏蔽时间', + key: 'block_time', + com: 'DatePicker', + is_show_edit: 1 + } ] } }, diff --git a/src/components/tables/editModal.vue b/src/components/tables/editModal.vue index 95ab03f..db65a93 100644 --- a/src/components/tables/editModal.vue +++ b/src/components/tables/editModal.vue @@ -65,7 +65,16 @@ import Vue from 'vue' import dayjs from 'dayjs' import templateRender from './templateRender' -const icons = require('@/config/icons') + +// 导入框架中的图标配置 +let icons = [] +try { + icons = require('../../config/icons.json') || [] +} catch (e) { + console.warn('未找到图标配置文件，图标选择功能将不可用', e) + icons = [] +} + export default { props: ['columns', 'width'], components: { @@ -183,7 +192,12 @@ export default { this.isOPen = false }, async init(row, isgl) { - this.icons = icons.map((item) => item.trim()) + // 安全处理图标数据 + if (Array.isArray(icons)) { + this.icons = icons.map((item) => item.trim ? item.trim() : item) + } else { + this.icons = [] + } row = row || {} let rules = this.curRules if (isgl) { diff --git a/src/components/upload/Single.vue b/src/components/upload/Single.vue index f28fbe3..1448900 100644 --- a/src/components/upload/Single.vue +++ b/src/components/upload/Single.vue @@ -30,11 +30,17 @@ let headers = { export default { props: ['value'], - computed: {}, + computed: { + actionUrl() { + // 优先使用 $config，如果不存在则使用 window.framework.config + const config = this.$config || (window.framework && window.framework.config) || {} + const apiUrl = config.apiUrl || config.uploadUrl || '' + return apiUrl + 'sys_file/upload_oos_img' + } + }, data() { return { headers, - actionUrl: this.config.apiUrl + 'sys_file/upload_oos_img', imgUrl: '', visible: false, }