From c734e698dec8a363b269ff6aa6612db9eca4448f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Thu, 6 Nov 2025 13:56:53 +0800 Subject: [PATCH] 1 --- _doc/完整使用文档.md | 126 +++++++++++++ demo/package-lock.json | 203 ++++++++++++++++++++ demo/package.json | 2 + demo/src/main.js | 2 +- demo/src/views/users/wch_cities.vue | 91 ++++++++- demo/webpack.config.js | 9 +- src/components/FloatPanel/index.vue | 277 ++++++++++++++++++++++++++++ src/components/index.js | 4 +- src/components/treeGrid/index.vue | 2 +- src/utils/uiTool.js | 24 +-- src/views/system/sys_log.vue | 28 ++- src/views/system/sys_menu.vue | 10 +- 12 files changed, 742 insertions(+), 36 deletions(-) create mode 100644 src/components/FloatPanel/index.vue diff --git a/_doc/完整使用文档.md b/_doc/完整使用文档.md index 2f44a7c..f95fb27 100644 --- a/_doc/完整使用文档.md +++ b/_doc/完整使用文档.md @@ -719,10 +719,136 @@ const params = await paramSetupServer.getOne('sys_title') + ``` +#### FloatPanel - 浮动面板组件 + +`FloatPanel` 是一个浮动在父窗体上的面板组件，类似于抽屉效果，调用方式和 `AsyncModal` 类似。 + +**基本使用：** + +```vue + + + +``` + +**调用方式（类似 AsyncModal）：** + +```vue + + + +``` + +**属性说明：** + +| 属性 | 类型 | 默认值 | 说明 | +|------|------|--------|------| +| `title` | String | `''` | 面板标题 | +| `width` | String/Number | `'80%'` | 面板宽度（字符串或数字） | +| `height` | String/Number | `'80%'` | 面板高度（字符串或数字） | +| `position` | String | `'right'` | 面板位置：`left`、`right`、`top`、`bottom`、`center` | +| `showBack` | Boolean | `true` | 是否显示返回按钮 | +| `showClose` | Boolean | `false` | 是否显示关闭按钮 | +| `backText` | String | `'返回'` | 返回按钮文字 | +| `closeOnClickBackdrop` | Boolean | `false` | 点击遮罩是否关闭 | +| `mask` | Boolean | `true` | 是否显示遮罩 | +| `zIndex` | Number | `1000` | 层级 | + +**方法：** + +| 方法 | 说明 | 参数 | +|------|------|------| +| `show(callback)` | 显示面板 | `callback`: 可选的回调函数 | +| `hide()` | 隐藏面板 | - | + +**事件：** + +| 事件 | 说明 | 参数 | +|------|------|------| +| `back` | 点击返回按钮时触发 | - | + +**插槽：** + +| 插槽 | 说明 | +|------|------| +| `default` | 面板主体内容 | +| `header-right` | 头部右侧内容 | +| `footer` | 底部内容 | + +**位置说明：** + +- `left`: 从左侧滑入 +- `right`: 从右侧滑入（默认） +- `top`: 从顶部滑入 +- `bottom`: 从底部滑入 +- `center`: 居中显示，带缩放动画 + --- ## 🛠️ 开发指南 diff --git a/demo/package-lock.json b/demo/package-lock.json index 1160859..b57989f 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -21,6 +21,8 @@ "css-loader": "^5.0.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", + "less": "^4.1.0", + "less-loader": "^10.0.0", "style-loader": "^2.0.0", "vue-loader": "^15.9.0", "vue-style-loader": "^4.1.0", @@ -2904,6 +2906,19 @@ "dev": true, "license": "MIT" }, + "node_modules/copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/core-js-compat": { "version": "3.45.1", "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.45.1.tgz", @@ -3331,6 +3346,20 @@ "node": ">=4" } }, + "node_modules/errno": { + "version": "0.1.8", + "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, "node_modules/es-define-property": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz", @@ -4290,6 +4319,20 @@ "postcss": "^8.1.0" } }, + "node_modules/image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, + "license": "MIT", + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/import-local": { "version": "3.2.0", "resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.2.0.tgz", @@ -4466,6 +4509,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true, + "license": "MIT" + }, "node_modules/is-wsl": { "version": "2.2.0", "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz", @@ -4581,6 +4631,16 @@ "node": ">=0.10.0" } }, + "node_modules/klona": { + "version": "2.0.6", + "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz", + "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, "node_modules/launch-editor": { "version": "2.11.1", "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.11.1.tgz", @@ -4592,6 +4652,80 @@ "shell-quote": "^1.8.3" } }, + "node_modules/less": { + "version": "4.4.2", + "resolved": "https://registry.npmmirror.com/less/-/less-4.4.2.tgz", + "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "copy-anything": "^2.0.1", + "parse-node-version": "^1.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=14" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "source-map": "~0.6.0" + } + }, + "node_modules/less-loader": { + "version": "10.2.0", + "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-10.2.0.tgz", + "integrity": "sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==", + "dev": true, + "license": "MIT", + "dependencies": { + "klona": "^2.0.4" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "less": "^3.5.0 || ^4.0.0", + "webpack": "^5.0.0" + } + }, + "node_modules/less/node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/less/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "license": "ISC", + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, "node_modules/loader-runner": { "version": "4.3.1", "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.1.tgz", @@ -4886,6 +5020,38 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/needle": { + "version": "3.3.1", + "resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz", + "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, + "node_modules/needle/node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/negotiator": { "version": "0.6.4", "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.4.tgz", @@ -5118,6 +5284,16 @@ "tslib": "^2.0.3" } }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz", @@ -5202,6 +5378,17 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -5396,6 +5583,14 @@ "node": ">= 0.10" } }, + "node_modules/prr": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/pseudomap": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz", @@ -5704,6 +5899,14 @@ "dev": true, "license": "MIT" }, + "node_modules/sax": { + "version": "1.4.3", + "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.3.tgz", + "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==", + "dev": true, + "license": "BlueOak-1.0.0", + "optional": true + }, "node_modules/schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz", diff --git a/demo/package.json b/demo/package.json index 4ab9cc1..0bc807e 100644 --- a/demo/package.json +++ b/demo/package.json @@ -21,6 +21,8 @@ "css-loader": "^5.0.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", + "less": "^4.1.0", + "less-loader": "^10.0.0", "style-loader": "^2.0.0", "vue-loader": "^15.9.0", "vue-style-loader": "^4.1.0", diff --git a/demo/src/main.js b/demo/src/main.js index 116c271..e058029 100644 --- a/demo/src/main.js +++ b/demo/src/main.js @@ -1,5 +1,5 @@ // 开发环境直接引用源码以支持热更新 -import AdminFramework from '../../src/index.js' +import AdminFramework from '../../dist/admin-framework.js' // 引入组件映射表 import componentMap from './router/component-map.js' diff --git a/demo/src/views/users/wch_cities.vue b/demo/src/views/users/wch_cities.vue index 9fe3732..86b2492 100644 --- a/demo/src/views/users/wch_cities.vue +++ b/demo/src/views/users/wch_cities.vue @@ -21,6 +21,51 @@ @changePage="query"> + + +
+
+ + {{ currentRow.id }} +
+
+ + {{ currentRow.cn_city }} +
+
+ + {{ currentRow.city_code }} +
+
+ + {{ currentRow.cn_state || '-' }} +
+
+ + {{ currentRow.cn_country || '-' }} +
+
+ + {{ currentRow.city || '-' }} +
+
+ + {{ currentRow.state || '-' }} +
+
+ + {{ currentRow.country || '-' }} +
+
+ + {{ currentRow.state_code || '-' }} +
+
+ + {{ currentRow.country_code || '-' }} +
+
+ + + diff --git a/demo/webpack.config.js b/demo/webpack.config.js index 2e0b080..e270978 100644 --- a/demo/webpack.config.js +++ b/demo/webpack.config.js @@ -7,7 +7,8 @@ module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js', - clean: true + clean: true, + publicPath: '/' }, module: { rules: [ @@ -24,6 +25,10 @@ module.exports = { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }, + { + test: /\.less$/, + use: ['vue-style-loader', 'css-loader', 'less-loader'] + }, { test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/, type: 'asset/resource' @@ -45,7 +50,7 @@ module.exports = { } }, devServer: { - hot: true, + hot: true, // 启用热更新 open: true, port: 8080, historyApiFallback: true diff --git a/src/components/FloatPanel/index.vue b/src/components/FloatPanel/index.vue new file mode 100644 index 0000000..02a4aed --- /dev/null +++ b/src/components/FloatPanel/index.vue @@ -0,0 +1,277 @@ + + + + + + diff --git a/src/components/index.js b/src/components/index.js index 104bba7..6e05175 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -19,6 +19,7 @@ import Editor from './editor/index.vue' import editModal from './tables/editModal.vue' import fieldItem from './tables/fieldItem.vue' import FieldRenderer from './tables/fieldRenderer.vue' +import FloatPanel from './FloatPanel/index.vue' @@ -48,6 +49,7 @@ const registerGlobalComponents = (Vue) => { Vue.component('editModal', editModal) Vue.component('fieldItem', fieldItem) Vue.component('FieldRenderer', FieldRenderer) + Vue.component('FloatPanel', FloatPanel) } // 注册自定义组件的方法 @@ -80,7 +82,7 @@ export default { editModal, fieldItem, FieldRenderer, - + FloatPanel } diff --git a/src/components/treeGrid/index.vue b/src/components/treeGrid/index.vue index 4cb2410..07c2132 100644 --- a/src/components/treeGrid/index.vue +++ b/src/components/treeGrid/index.vue @@ -72,7 +72,7 @@ export default { .table-scroll-container { width: 100%; - overflow-x: auto; + overflow: auto; overflow-y: visible; /* 横向滚动条始终可见，不需要滚动到底 */ } diff --git a/src/utils/uiTool.js b/src/utils/uiTool.js index 4222ad6..062e15f 100644 --- a/src/utils/uiTool.js +++ b/src/utils/uiTool.js @@ -35,7 +35,7 @@ export default class uiTool { */ static downloadFile(res, fileName) { // 开头和结尾去掉 中间不去掉 - let tempFileName = fileName || `${new Date().getTime()}.csv` + let tempFileName = fileName || `${new Date().getTime()}.csv` const blob = new Blob([res.data || res]) const downloadElement = document.createElement('a') @@ -130,20 +130,20 @@ export default class uiTool { } static delConfirm(callback) { - const Modal = (window.framework && window.framework.ViewUI && window.framework.ViewUI.Modal) || window.$Modal - if (Modal) { - Modal.confirm({ - title: '温馨提示', - content: '

你确定删除吗？

', - onOk: () => { - callback && callback() - } - }) - } + const Modal = window.rootVue.$Modal + + Modal.confirm({ + title: '温馨提示', + content: '

你确定删除吗？

', + onOk: () => { + callback && callback() + } + }) + } static showConfirm({ title = '温馨提示', content = '内容' }, callback) { - const Modal = (window.framework && window.framework.ViewUI && window.framework.ViewUI.Modal) || window.$Modal + const Modal = window.rootVue.$Modal if (Modal) { Modal.confirm({ title, diff --git a/src/views/system/sys_log.vue b/src/views/system/sys_log.vue index ecf4171..ed2d6de 100644 --- a/src/views/system/sys_log.vue +++ b/src/views/system/sys_log.vue @@ -2,7 +2,7 @@
- +
@@ -83,25 +83,33 @@ export default { } }), h('span', data.title), - h('Icon', { - props: { - type: 'ios-trash', - size: '18' - }, + h('span', { on: { - click: () => { + click: (e) => { + e.stopPropagation() // 阻止事件冒泡 + e.preventDefault() // 阻止默认行为 this.deleteLog(data) } }, style: { - 'margin-left': '8px' + 'margin-left': '8px', + cursor: 'pointer', + display: 'inline-block' } - }) + }, [ + h('Icon', { + props: { + type: 'ios-trash', + size: '18' + } + }) + ]) ]) ] ) }, async selectChange(row) { + row[0].selected = true this.selectRow = row[0].title let res = await sys_log_serve.detail({ title: this.selectRow }) @@ -135,7 +143,7 @@ export default { .content-view { display: flex; flex-direction: row; - .tree-box { + .log-box { height: 90vh; width: 300px; border-right: solid 1px #ccc; diff --git a/src/views/system/sys_menu.vue b/src/views/system/sys_menu.vue index 3c18e5f..6a058e3 100644 --- a/src/views/system/sys_menu.vue +++ b/src/views/system/sys_menu.vue @@ -4,9 +4,7 @@
- -
@@ -254,7 +252,7 @@ export default { this.gridOption.menuData = this.mapTree(menuTree) this.$store.dispatch('setAuthorityMenus') - + }, async initCol() { let res = await menuServer.modelAll() @@ -394,9 +392,5 @@ export default {