From a2f9e5e5ac38c42dd5e31583fa9aa8e57e3403a5 Mon Sep 17 00:00:00 2001 From: cshaptx4869 <994774638@qq.com> Date: Fri, 11 Sep 2026 12:03:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(vxetable):=20:sparkles:=20=E9=80=82?= =?UTF-8?q?=E9=85=8D=20vxetable=204.7+?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +- pnpm-lock.yaml | 82 +-- src/plugins/vxe-table.ts | 73 ++- src/styles/vendors.scss | 90 --- src/views/demo/table/vxe-table/index.vue | 797 ++++++++++++++++------- 5 files changed, 669 insertions(+), 378 deletions(-) diff --git a/package.json b/package.json index 250852b3..8667a585 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@form-create/designer": "3.5.0", "@form-create/element-ui": "3.3.3", "@vueuse/core": "^14.4.0", + "@vxe-ui/plugin-export-xlsx": "^4.5.4", "@wangeditor-next/editor": "^5.7.16", "@wangeditor-next/editor-for-vue": "^5.1.14", "animate.css": "^4.1.1", @@ -73,7 +74,9 @@ "vue-draggable-plus": "^0.6.1", "vue-i18n": "^11.4.8", "vue-router": "^5.2.0", - "vxe-table": "~4.6.25" + "vxe-pc-ui": "^4.18.9", + "vxe-table": "^4.21.10", + "xe-utils": "^4.0.13" }, "devDependencies": { "@commitlint/cli": "^21.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41939952..238f6e46 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@vueuse/core': specifier: ^14.4.0 version: 14.4.0(vue@3.5.42(typescript@6.0.3)) + '@vxe-ui/plugin-export-xlsx': + specifier: ^4.5.4 + version: 4.5.4(vxe-table@4.21.10) '@wangeditor-next/editor': specifier: ^5.7.16 version: 5.7.16 @@ -86,9 +89,15 @@ importers: vue-router: specifier: ^5.2.0 version: 5.3.1(@vue/compiler-sfc@3.5.42)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.42(typescript@6.0.3)))(rolldown@1.2.7)(vite@8.2.2(@types/node@26.4.1)(jiti@2.7.0)(sass@1.104.0)(terser@5.51.2)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3)) + vxe-pc-ui: + specifier: ^4.18.9 + version: 4.18.9(vue@3.5.42(typescript@6.0.3)) vxe-table: - specifier: ~4.6.25 - version: 4.6.25(vue@3.5.42(typescript@6.0.3)) + specifier: ^4.21.10 + version: 4.21.10 + xe-utils: + specifier: ^4.0.13 + version: 4.0.13 devDependencies: '@commitlint/cli': specifier: ^21.2.1 @@ -742,56 +751,48 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] - libc: [glibc] '@oxc-parser/binding-linux-arm64-musl@0.131.0': resolution: {integrity: sha512-vtPiwmfVTAXzaxDKsOXG+LwgRAA7WEnaeHzhS5z0GE89gAK18KSXnly7Z6saXXq6L3dVMyK44uoTI03zKxrpmw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] - libc: [musl] '@oxc-parser/binding-linux-ppc64-gnu@0.131.0': resolution: {integrity: sha512-8AW8L7w5cGHSdZPcyZX2yR0+GUODsT15rbRjfdD54rv6DMbtuEB19ysLOpKJlRGfH6UNYNpCHaU1uJWgTWf1/w==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] - libc: [glibc] '@oxc-parser/binding-linux-riscv64-gnu@0.131.0': resolution: {integrity: sha512-vvpjkjEOUsPcsYf8evE4MO3aGx9+3wodXEBOicGNnOwTuAik8eBONNkgSdhkGsAblQmfVHJyanRnpxglddTXIA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] - libc: [glibc] '@oxc-parser/binding-linux-riscv64-musl@0.131.0': resolution: {integrity: sha512-AqmcNC3fClXX+fxQ6VGEN1667xVFiRBkY0CZmDMSiaeFUsv1+UkBPYYi48IUKcA9/ivvoKNRzQl2I4//kT9F/w==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] - libc: [musl] '@oxc-parser/binding-linux-s390x-gnu@0.131.0': resolution: {integrity: sha512-7d3jOMKy7RSQCcDLIci+ySll2FgsOMl/GiRux4q2JNv0zg4EdhFISa9idvrdN/HEUIQQJNg6dmveUeJl2YErGA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] - libc: [glibc] '@oxc-parser/binding-linux-x64-gnu@0.131.0': resolution: {integrity: sha512-JHK/h95qVqVQ+ITER837kcTdwBDFpFaNnOTYGCP0zdUSX/mLKC7tXOoyrTb6vG7iRPwGlcgBil3v2IjYw1FqJA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] - libc: [glibc] '@oxc-parser/binding-linux-x64-musl@0.131.0': resolution: {integrity: sha512-b2BO82O8azXAyf7EUgOPKu145nWypbNyk07HbU09fkzhm9lEA5oPvaN/M8Nlo7tOErVTa2WOgS4QbOnxAPXdDQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] - libc: [musl] '@oxc-parser/binding-openharmony-arm64@0.131.0': resolution: {integrity: sha512-GHO9glZaX7LkX/OGfluEPf1yjg+ehiFbUdowbX6uNWOQhmwKWU4m4+nZ9FJkrHNKuxyI1KKertMdGjVKCApKWA==} @@ -860,42 +861,36 @@ packages: engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] - libc: [glibc] '@parcel/watcher-linux-arm-musl@2.6.0': resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==} engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] - libc: [musl] '@parcel/watcher-linux-arm64-glibc@2.6.0': resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] - libc: [glibc] '@parcel/watcher-linux-arm64-musl@2.6.0': resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] - libc: [musl] '@parcel/watcher-linux-x64-glibc@2.6.0': resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] - libc: [glibc] '@parcel/watcher-linux-x64-musl@2.6.0': resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] - libc: [musl] '@parcel/watcher-win32-arm64@2.6.0': resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==} @@ -968,42 +963,36 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] - libc: [glibc] '@rolldown/binding-linux-arm64-musl@1.2.7': resolution: {integrity: sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] - libc: [musl] '@rolldown/binding-linux-ppc64-gnu@1.2.7': resolution: {integrity: sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] - libc: [glibc] '@rolldown/binding-linux-s390x-gnu@1.2.7': resolution: {integrity: sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] - libc: [glibc] '@rolldown/binding-linux-x64-gnu@1.2.7': resolution: {integrity: sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] - libc: [glibc] '@rolldown/binding-linux-x64-musl@1.2.7': resolution: {integrity: sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] - libc: [musl] '@rolldown/binding-openharmony-arm64@1.2.7': resolution: {integrity: sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==} @@ -1384,6 +1373,16 @@ packages: peerDependencies: vue: ^3.5.0 + '@vxe-ui/core@4.4.21': + resolution: {integrity: sha512-xaKGhQxrSU3G7+cQbxMBSzNXiWliRDgtR5GmD/FD9f5tl8e9SuZLe2SfODjItp6oBvBkKI2TXBZiCx502WftyA==} + peerDependencies: + vue: ^3.2.0 + + '@vxe-ui/plugin-export-xlsx@4.5.4': + resolution: {integrity: sha512-aG1K17m5mG4Mbs1WwY5d0e3rIEWcB319c+1P0Ma1kcaLL26NvMMUAGg8ChpACIhmRDYEJWJ36cVSU3sZ9VMZ/w==} + peerDependencies: + vxe-table: ^4.12 + '@wangeditor-next/basic-modules@3.0.3': resolution: {integrity: sha512-Z+nBFCsgToh4Mx1zPX6QpIx4VJenuNXFQnEIoPbNR/b29gXEfL1Lnvj/sYDdq8tiLDxhryq175gvRlZyuwEq7w==} peerDependencies: @@ -2783,28 +2782,24 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [glibc] lightningcss-linux-arm64-musl@1.33.0: resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [musl] lightningcss-linux-x64-gnu@1.33.0: resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [glibc] lightningcss-linux-x64-musl@1.33.0: resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [musl] lightningcss-win32-arm64-msvc@1.33.0: resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==} @@ -4126,10 +4121,11 @@ packages: peerDependencies: vue: ^3.0.1 - vxe-table@4.6.25: - resolution: {integrity: sha512-rFhGh8w+420cdnIasQKisiKagz9F/iNieB/z6v0j4GcsMfGHEmSJ72YrHcXogQh4wNlCzKVfb7rl7nREL5eIOg==} - peerDependencies: - vue: ^3.2.28 + vxe-pc-ui@4.18.9: + resolution: {integrity: sha512-TJk788bY4Ok2LIBWB3JakNNuq3lirigVhyRgvNw9c8CdkWn98fSgqkncijMtx9qgDZssgsvPF61YMEq9jCJ+zQ==} + + vxe-table@4.21.10: + resolution: {integrity: sha512-9O4Yi/gbafmW/x8qrhG8ZTCUrgGYFK6w3draMH+nsxkKjQhlhYgFvFmcJKOfL6+7VuDvMdQp8JXPi38MxdSb5Q==} wangeditor@4.7.15: resolution: {integrity: sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==} @@ -4194,8 +4190,8 @@ packages: utf-8-validate: optional: true - xe-utils@3.9.1: - resolution: {integrity: sha512-Ujk5UmoH6Iaqhgz3oGwfCXVcMdUJKlXnfvLABdnMyseMG0eHsX2mcCvLd/8sGlIXtfwsprI9bW7vgcVognLmqQ==} + xe-utils@4.0.13: + resolution: {integrity: sha512-hIxQ3LQv/WF0DyeNsZ7VclX5+n5CKoUJ3DG76GFtuAnVQ/NaSv3MKmyZ6MD73wfSdzZBcziV8wcas8GRNSYMwg==} xml-name-validator@5.0.0: resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} @@ -5514,6 +5510,16 @@ snapshots: dependencies: vue: 3.5.42(typescript@6.0.3) + '@vxe-ui/core@4.4.21(vue@3.5.42(typescript@6.0.3))': + dependencies: + dom-zindex: 1.0.7 + vue: 3.5.42(typescript@6.0.3) + xe-utils: 4.0.13 + + '@vxe-ui/plugin-export-xlsx@4.5.4(vxe-table@4.21.10)': + dependencies: + vxe-table: 4.21.10 + '@wangeditor-next/basic-modules@3.0.3(@wangeditor-next/core@1.9.5(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)': dependencies: '@wangeditor-next/core': 1.9.5(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4) @@ -8342,11 +8348,13 @@ snapshots: sortablejs: 1.14.0 vue: 3.5.42(typescript@6.0.3) - vxe-table@4.6.25(vue@3.5.42(typescript@6.0.3)): + vxe-pc-ui@4.18.9(vue@3.5.42(typescript@6.0.3)): dependencies: - dom-zindex: 1.0.7 - vue: 3.5.42(typescript@6.0.3) - xe-utils: 3.9.1 + '@vxe-ui/core': 4.4.21(vue@3.5.42(typescript@6.0.3)) + transitivePeerDependencies: + - vue + + vxe-table@4.21.10: {} wangeditor@4.7.15: dependencies: @@ -8406,7 +8414,7 @@ snapshots: ws@8.21.3: {} - xe-utils@3.9.1: {} + xe-utils@4.0.13: {} xml-name-validator@5.0.0: {} diff --git a/src/plugins/vxe-table.ts b/src/plugins/vxe-table.ts index e0c1d3bb..13522af4 100644 --- a/src/plugins/vxe-table.ts +++ b/src/plugins/vxe-table.ts @@ -1,34 +1,76 @@ -/** - * VxeTable 全局配置 - * @see https://vxetable.cn/v4.6/#/table/start/install - */ +// 引入样式 +import "vxe-pc-ui/lib/style.css"; +import "vxe-table/lib/style.css"; +// 导入主题变量，也可以重写主题变量 +import "vxe-pc-ui/styles/cssvar.scss"; +import "vxe-table/styles/cssvar.scss"; +// 导入默认的语言 +import enUS from "vxe-pc-ui/lib/language/en-US"; +import zhCN from "vxe-pc-ui/lib/language/zh-CN"; +import VxeUIPluginExportXLSX from "@vxe-ui/plugin-export-xlsx"; +import ExcelJS from "exceljs"; +import { VxeUI } from "vxe-pc-ui"; -import VXETable from "vxe-table"; +import { useAppStore } from "@/stores/app"; +import { DeviceEnum } from "@/enums"; -export function configureVxeTable() { - VXETable.setConfig({ +export function configureVxeUI() { + const appStore = useAppStore(); + const isMobile = appStore.device === DeviceEnum.MOBILE; + + // 导入导出xlsx插件 https://vxetable.cn/other4/#/table/plugin/exportXLSX + VxeUI.use(VxeUIPluginExportXLSX, { + ExcelJS, + }); + + // 注册语言 + VxeUI.setI18n("zh-CN", zhCN); + VxeUI.setI18n("en-US", enUS); + // 切换指定语言 + VxeUI.setLanguage("zh-CN"); + + // 全局默认参数 + VxeUI.setConfig({ + // 全局尺寸 size: "medium", + // 全局 zIndex 起始值，默认是 999，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡 zIndex: 9999, + // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据 version: 0, + // 全局 loading 提示内容，如果为 null 则不显示文本 + loading: { + showText: false, + text: "", + }, table: { + minHeight: 46, showHeader: true, showOverflow: "tooltip", - showHeaderOverflow: "tooltip", + showHeaderOverflow: isMobile ? false : "tooltip", autoResize: true, + // stripe: false, border: "inner", + // round: false, emptyText: "暂无数据", rowConfig: { isHover: true, isCurrent: true, + // 行数据的唯一主键字段名 keyField: "_VXE_ID", }, columnConfig: { resizable: false, + minWidth: isMobile ? "auto" : undefined, }, align: "center", headerAlign: "center", + validConfig: { + theme: "normal", + }, }, pager: { + // size: "medium", + // 配套的样式 perfect: false, pageSize: 10, pagerCount: 7, @@ -44,11 +86,22 @@ export function configureVxeTable() { "FullJump", ], }, + form: { + span: isMobile ? 24 : 6, + validConfig: { + theme: "normal", + }, + }, modal: { - minWidth: 500, - minHeight: 400, + fullscreen: isMobile, + remember: isMobile, + width: isMobile ? "95%" : undefined, + // minWidth: 500, + // minHeight: 400, lockView: true, mask: true, + // duration: 3000, + // marginSize: 20, dblclickZoom: false, showTitleOverflow: true, transfer: true, diff --git a/src/styles/vendors.scss b/src/styles/vendors.scss index f0489190..9cadeb44 100644 --- a/src/styles/vendors.scss +++ b/src/styles/vendors.scss @@ -7,96 +7,6 @@ background-color: var(--el-color-primary); } -// VxeTable 变量覆写 -:root { - --vxe-font-color: var(--el-text-color-regular); - --vxe-primary-color: var(--el-color-primary); - --vxe-success-color: var(--el-color-success); - --vxe-info-color: var(--el-color-info); - --vxe-warning-color: var(--el-color-warning); - --vxe-danger-color: var(--el-color-danger); - --vxe-font-lighten-color: var(--el-text-color-primary); - --vxe-primary-lighten-color: var(--el-color-primary-light-3); - --vxe-success-lighten-color: var(--el-color-success-light-3); - --vxe-info-lighten-color: var(--el-color-info-light-3); - --vxe-warning-lighten-color: var(--el-color-warning-light-3); - --vxe-danger-lighten-color: var(--el-color-danger-light-3); - --vxe-font-darken-color: var(--el-text-color-secondary); - --vxe-primary-darken-color: var(--el-color-primary-dark-2); - --vxe-success-darken-color: var(--el-color-success-dark-2); - --vxe-info-darken-color: var(--el-color-info-dark-2); - --vxe-warning-darken-color: var(--el-color-warning-dark-2); - --vxe-danger-darken-color: var(--el-color-danger-dark-2); - --vxe-font-disabled-color: var(--el-text-color-disabled); - --vxe-primary-disabled-color: var(--el-color-primary-light-5); - --vxe-success-disabled-color: var(--el-color-success-light-5); - --vxe-info-disabled-color: var(--el-color-info-light-5); - --vxe-warning-disabled-color: var(--el-color-warning-light-5); - --vxe-danger-disabled-color: var(--el-color-danger-light-5); - --vxe-input-border-color: var(--el-border-color); - --vxe-input-disabled-color: var(--el-text-color-disabled); - --vxe-input-disabled-background-color: var(--el-fill-color-light); - --vxe-input-placeholder-color: var(--el-text-color-placeholder); - --vxe-table-popup-border-color: var(--el-border-color); - --vxe-table-header-font-color: var(--el-text-color-regular); - --vxe-table-footer-font-color: var(--el-text-color-regular); - --vxe-table-border-color: var(--el-border-color-lighter); - --vxe-table-header-background-color: var(--el-bg-color); - --vxe-table-body-background-color: var(--el-bg-color); - --vxe-table-footer-background-color: var(--el-bg-color); - --vxe-table-row-hover-background-color: var(--el-fill-color-light); - --vxe-table-row-current-background-color: var(--el-fill-color-light); - --vxe-table-row-hover-current-background-color: var(--el-fill-color-light); - --vxe-table-checkbox-range-background-color: var(--el-fill-color-light); - --vxe-table-menu-background-color: var(--el-bg-color-overlay); - --vxe-loading-color: var(--el-color-primary); - --vxe-loading-background-color: var(--el-mask-color); - --vxe-table-validate-error-color: var(--el-color-danger); - --vxe-toolbar-background-color: var(--el-bg-color); - --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay); - --vxe-toolbar-panel-background-color: var(--el-bg-color-overlay); - --vxe-pager-background-color: var(--el-bg-color); - --vxe-modal-header-background-color: var(--el-bg-color); - --vxe-modal-body-background-color: var(--el-bg-color); - --vxe-modal-border-color: var(--el-border-color); - --vxe-button-default-background-color: var(--el-bg-color-overlay); - --vxe-input-background-color: var(--el-fill-color-blank); - --vxe-input-panel-background-color: var(--el-fill-color-blank); - --vxe-form-background-color: var(--el-bg-color); - --vxe-form-validate-error-color: var(--el-color-danger); - --vxe-select-option-hover-background-color: var(--el-bg-color-overlay); - --vxe-select-panel-background-color: var(--el-bg-color); -} - -// VxeTable 自定义样式 -.vxe-grid { - &--form-wrapper .vxe-form { - padding: 10px 20px; - margin-bottom: 20px; - } - - &--toolbar-wrapper .vxe-toolbar { - padding: 20px; - } - - &--pager-wrapper .vxe-pager { - height: 70px; - padding: 0 20px; - - &--wrapper { - @media screen and (width <= 768px) { - .vxe-pager--total, - .vxe-pager--sizes, - .vxe-pager--jump, - .vxe-pager--jump-prev, - .vxe-pager--jump-next { - display: none; - } - } - } - } -} - // WangEditor 暗黑模式 html.dark { --w-e-textarea-bg-color: var(--el-bg-color); diff --git a/src/views/demo/table/vxe-table/index.vue b/src/views/demo/table/vxe-table/index.vue index 7762c780..0742ed9b 100644 --- a/src/views/demo/table/vxe-table/index.vue +++ b/src/views/demo/table/vxe-table/index.vue @@ -1,32 +1,26 @@ @@ -62,33 +56,45 @@ + - + - + + + + + From 45b7332342d60f1136f4f00e66d1cd7a83de8716 Mon Sep 17 00:00:00 2001 From: cshaptx4869 <994774638@qq.com> Date: Fri, 11 Sep 2026 16:28:56 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20:sparkles:=20=E5=8A=A0=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E6=A3=80=E6=9F=A5=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 6 +++ src/composables/useVersionCheck.ts | 66 ++++++++++++++++++++++++++++++ vite.config.ts | 17 +++++++- 3 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 src/composables/useVersionCheck.ts diff --git a/src/App.vue b/src/App.vue index bc6d8b0f..87cb5475 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,6 +15,7 @@ import { useAppStore, useSettingsStore } from "@/stores"; import { appConfig } from "@/settings"; import { ThemeMode, ComponentSize } from "@/enums"; +import { useVersionCheck } from "@/composables/useVersionCheck"; const appStore = useAppStore(); const settingsStore = useSettingsStore(); @@ -30,4 +31,9 @@ const fontColor = computed(() => { ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"; }); + +// 初始化版本检查 +if (!import.meta.env.DEV) { + useVersionCheck(5 * 60_000); +} diff --git a/src/composables/useVersionCheck.ts b/src/composables/useVersionCheck.ts new file mode 100644 index 00000000..e6bfef93 --- /dev/null +++ b/src/composables/useVersionCheck.ts @@ -0,0 +1,66 @@ +import { ElNotification } from "element-plus"; +import { onMounted, onUnmounted, ref } from "vue"; + +/** 版本检查 */ +export function useVersionCheck(interval = 60_000) { + const hasNewVersion = ref(false); + let notified = false; + const safeInterval = Math.max(10_000, interval); + + const checkVersion = async () => { + try { + const base = import.meta.env.BASE_URL; + const baseUrl = base.endsWith("/") ? base : `${base}/`; + // 时间戳防 CDN/代理缓存，no-cache 防浏览器磁盘缓存 + const res = await fetch(`${baseUrl}version.json?t=${Date.now()}`, { + cache: "no-cache", + }); + if (!res.ok) return; // 非核心功能，网络异常不影响正常使用 + + const data = await res.json(); + if (data.version && data.version !== __APP_INFO__.buildTimestamp) { + hasNewVersion.value = true; + showUpdateNotice(); + } + } catch (e) { + console.warn("版本检测失败", e); + } + }; + + const showUpdateNotice = () => { + if (notified) return; + notified = true; + + // 使用 Notification 而非 Modal，不打断用户操作 + ElNotification({ + title: "🎉 发现新版本", + message: "系统已更新，点击刷新以获取最新功能", + duration: 0, // 不自动关闭 + position: "bottom-right", + onClick: () => window.location.reload(), + onClose: () => { + notified = false; + }, + customClass: "version-update-notice", + }); + }; + + let timer: ReturnType; + // 用户从其他标签页切回时立即检测，无需等待下一次轮询 + const handleVisibilityChange = () => { + if (!document.hidden) checkVersion(); + }; + + onMounted(() => { + checkVersion(); + timer = setInterval(checkVersion, safeInterval); + document.addEventListener("visibilitychange", handleVisibilityChange); + }); + + onUnmounted(() => { + clearInterval(timer); + document.removeEventListener("visibilitychange", handleVisibilityChange); + }); + + return { hasNewVersion }; +} diff --git a/vite.config.ts b/vite.config.ts index da77f8bc..8cc21b11 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,7 +9,8 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import { mockDevServerPlugin } from "vite-plugin-mock-dev-server"; import UnoCSS from "unocss/vite"; -import { resolve } from "path"; +import { join, resolve } from "path"; +import { existsSync, mkdirSync, writeFileSync } from "fs"; import { name, version } from "./package.json" with { type: "json" }; // 平台名称、版本信息 @@ -85,6 +86,20 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { dts: false, //dts: "types/components.d.ts", }), + // 生成版本号文件 + { + name: "dist-version", + closeBundle() { + const distDir = resolve(__dirname, "dist"); + if (!existsSync(distDir)) { + mkdirSync(distDir, { recursive: true }); + } + writeFileSync( + join(distDir, "version.json"), + JSON.stringify({ version: __APP_INFO__.buildTimestamp }) + ); + }, + }, ] as PluginOption[], // 预加载项目必需的依赖 optimizeDeps: {