1

2025-11-06 13:56:53 +08:00
parent b02853d5f7
commit c734e698de
12 changed files with 742 additions and 36 deletions
--- 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",
--- 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",
--- 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'
--- a/demo/src/views/users/wch_cities.vue
+++ b/demo/src/views/users/wch_cities.vue
@@ -21,6 +21,51 @@
                @changePage="query"></tables>
        </div>
        <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
+        
+        <FloatPanel ref="floatPanel" title="城市详情" position="right">
+            <div v-if="currentRow" class="detail-content">
+                <div class="detail-item">
+                    <label>ID:</label>
+                    <span>{{ currentRow.id }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>城市名称(中文):</label>
+                    <span>{{ currentRow.cn_city }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>城市代码:</label>
+                    <span>{{ currentRow.city_code }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>省份(中文):</label>
+                    <span>{{ currentRow.cn_state || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>国家(中文):</label>
+                    <span>{{ currentRow.cn_country || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>城市名称(英文):</label>
+                    <span>{{ currentRow.city || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>省份(英文):</label>
+                    <span>{{ currentRow.state || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>国家(英文):</label>
+                    <span>{{ currentRow.country || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>省份代码:</label>
+                    <span>{{ currentRow.state_code || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                    <label>国家代码:</label>
+                    <span>{{ currentRow.country_code || '-' }}</span>
+                </div>
+            </div>
+        </FloatPanel>
    </div>
 </template>
 <script>
@@ -36,6 +81,7 @@ export default {
        rules["cn_country"] = [{ required: false, message: '请填写国家' }];

        return {
+            currentRow: null,
            seachTypes: [
                { key: 'cn_city', value: '城市名称' },
                { key: 'city_code', value: '城市代码' },
@@ -69,10 +115,17 @@ export default {
                {
                    title: '操作', 
                    key: 'action', 
-                    width: 200,
+                    width: 250,
                    type: 'template',
                    render: (h, params) => {
                        let btns = [
+                            {
+                                title: '详情',
+                                type: 'info',
+                                click: () => {
+                                    this.showDetail(params.row)
+                                },
+                            },
                            {
                                title: '编辑',
                                type: 'primary',
@@ -138,7 +191,43 @@ export default {
            wch_citiesServer.exportCsv(this.gridOption.param).then(res => {
                tools.downloadFile(res, '城市管理.csv');
            });
+        },
+        showDetail(row) {
+            this.currentRow = row
+            this.$refs.floatPanel.show()
+        },
+        hideDetail() {
+            this.$refs.floatPanel.hide()
        }
    }
 }
 </script>
+
+<style lang="less" scoped>
+.detail-content {
+    padding: 10px 0;
+    
+    .detail-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid #f0f0f0;
+        
+        &:last-child {
+            border-bottom: none;
+        }
+        
+        label {
+            min-width: 120px;
+            font-weight: 500;
+            color: #515a6e;
+            margin-right: 10px;
+        }
+        
+        span {
+            flex: 1;
+            color: #17233d;
+        }
+    }
+}
+</style>
--- 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