From 61156eca02e99d9a33b854f978074fe7eba5d93a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=90=AF=E6=BA=90?= Date: Wed, 22 Jul 2026 13:13:17 +0800 Subject: [PATCH] refactor(ui): remove Ant Design Vue dependency --- README.md | 14 +- package.json | 2 - pnpm-lock.yaml | 198 ----------------- src/App.test.ts | 29 ++- src/App.vue | 259 ++++++++++++++-------- src/components/WaveformChart.test.ts | 30 +-- src/components/WaveformChart.vue | 22 +- src/components/WaveformPagination.test.ts | 42 ++++ src/components/WaveformPagination.vue | 142 ++++++++++++ src/main.ts | 1 - src/styles.css | 134 ++++++++++- vite.lib.config.ts | 2 +- 12 files changed, 520 insertions(+), 355 deletions(-) create mode 100644 src/components/WaveformPagination.test.ts create mode 100644 src/components/WaveformPagination.vue diff --git a/README.md b/README.md index 99145d9..601d4b8 100644 --- a/README.md +++ b/README.md @@ -28,23 +28,23 @@ pnpm install pnpm dev ``` -组件库将 Vue、D3、Ant Design Vue 和 vue3-colorpicker 作为 peer dependency；直接安装到业务项目时请一并 +组件库将 Vue、D3 和 vue3-colorpicker 作为 peer dependency；直接安装到业务项目时请一并 安装这些依赖： ```bash -pnpm add waveform-analysis vue d3 ant-design-vue vue3-colorpicker +pnpm add waveform-analysis vue d3 vue3-colorpicker ``` ### 运行时版本要求 组件库支持以下运行时版本： -| 依赖 | 支持版本 | -| -------------- | ------------- | -| Vue | `>=3.2.33 <4` | -| Ant Design Vue | `>=3.2.20 <4` | +| 依赖 | 支持版本 | +| ---- | ------------- | +| Vue | `>=3.2.33 <4` | +| D3 | `>=7.9.0 <8` | -安装时请确保业务项目中的 Vue 与 Ant Design Vue 版本满足上述范围。 +安装时请确保业务项目中的 Vue 与 D3 版本满足上述范围。 ## 发布 diff --git a/package.json b/package.json index 77dfbd1..6c2c68d 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "test:coverage": "vitest run --coverage" }, "peerDependencies": { - "ant-design-vue": ">=3.2.20 <4", "d3": ">=7.9.0 <8", "vue": ">=3.2.33 <4", "vue3-colorpicker": ">=2.3.0 <3" @@ -47,7 +46,6 @@ "@vitejs/plugin-vue": "6.0.8", "@vitest/coverage-v8": "4.1.10", "@vue/test-utils": "2.4.11", - "ant-design-vue": "4.2.6", "d3": "7.9.0", "eslint": "10.7.0", "eslint-config-prettier": "10.1.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fa81791..49cb65c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,9 +26,6 @@ importers: '@vue/test-utils': specifier: 2.4.11 version: 2.4.11(@vue/compiler-dom@3.5.40)(@vue/server-renderer@3.5.40)(vue@3.5.40(typescript@6.0.3)) - ant-design-vue: - specifier: 4.2.6 - version: 4.2.6(vue@3.5.40(typescript@6.0.3)) d3: specifier: 7.9.0 version: 7.9.0 @@ -77,17 +74,6 @@ packages: '@aesoper/normal-utils@0.1.5': resolution: {integrity: sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==} - '@ant-design/colors@6.0.0': - resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==} - - '@ant-design/icons-svg@4.5.0': - resolution: {integrity: sha512-1BTUFyKPTBZ53MuTP8s0k5SFEXL7o3VHEOwLgzaoWKwnBeqIcqUtVshc4SKzhI6uACfqhJqBwBUE9FsWR3uULA==} - - '@ant-design/icons-vue@7.0.1': - resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==} - peerDependencies: - vue: '>=3.0.3' - '@asamuzakjp/css-color@5.1.11': resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} @@ -116,10 +102,6 @@ packages: engines: {node: '>=6.0.0'} hasBin: true - '@babel/runtime@7.29.7': - resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==} - engines: {node: '>=6.9.0'} - '@babel/types@7.29.7': resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==} engines: {node: '>=6.9.0'} @@ -168,10 +150,6 @@ packages: resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==} engines: {node: '>=20.19.0'} - '@ctrl/tinycolor@3.6.1': - resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} - engines: {node: '>=10'} - '@emnapi/core@1.11.1': resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==} @@ -181,12 +159,6 @@ packages: '@emnapi/wasi-threads@1.2.2': resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==} - '@emotion/hash@0.9.2': - resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} - - '@emotion/unitless@0.8.1': - resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} - '@eslint-community/eslint-utils@4.9.1': resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -386,9 +358,6 @@ packages: '@rolldown/pluginutils@1.0.1': resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==} - '@simonwep/pickr@1.8.2': - resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==} - '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} @@ -710,15 +679,6 @@ packages: resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==} engines: {node: '>=12'} - ant-design-vue@4.2.6: - resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==} - engines: {node: '>=12.22.0'} - peerDependencies: - vue: '>=3.2.0' - - array-tree-filter@2.1.0: - resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==} - assertion-error@2.0.1: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} @@ -726,9 +686,6 @@ packages: ast-v8-to-istanbul@1.0.5: resolution: {integrity: sha512-UPAgKJFSEGMWSDr3LX4tqnAb4f7KGT8O40Tyx8wbYmmZ/yn58lNCm8h3svs3eXgiGd5AXxz8NDOvXWvicq+rJA==} - async-validator@4.2.5: - resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==} - balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -768,18 +725,12 @@ packages: resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} engines: {node: '>= 10'} - compute-scroll-into-view@1.0.20: - resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==} - config-chain@1.1.13: resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==} convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} - core-js@3.49.0: - resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==} - cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -927,9 +878,6 @@ packages: resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} - dayjs@1.11.21: - resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==} - debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -952,12 +900,6 @@ packages: resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} engines: {node: '>=8'} - dom-align@1.12.4: - resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==} - - dom-scroll-into-view@2.0.1: - resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==} - eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -1163,10 +1105,6 @@ packages: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} - is-plain-object@3.0.1: - resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==} - engines: {node: '>=0.10.0'} - is-plain-object@5.0.0: resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} engines: {node: '>=0.10.0'} @@ -1203,9 +1141,6 @@ packages: js-tokens@10.0.0: resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==} - js-tokens@4.0.0: - resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - jsdom@29.1.1: resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==} engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0} @@ -1312,13 +1247,6 @@ packages: lodash-es@4.18.1: resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==} - lodash@4.18.1: - resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==} - - loose-envify@1.4.0: - resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} - hasBin: true - lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} @@ -1362,9 +1290,6 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - nanopop@2.4.2: - resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==} - natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -1451,9 +1376,6 @@ packages: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} - resize-observer-polyfill@1.5.1: - resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} - robust-predicates@3.0.3: resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==} @@ -1472,17 +1394,11 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} - scroll-into-view-if-needed@2.2.31: - resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==} - semver@7.8.5: resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==} engines: {node: '>=10'} hasBin: true - shallow-equal@1.2.1: - resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==} - shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -1524,9 +1440,6 @@ packages: resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==} engines: {node: '>=12'} - stylis@4.4.0: - resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==} - supports-color@7.2.0: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} @@ -1534,10 +1447,6 @@ packages: symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} - throttle-debounce@5.0.2: - resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==} - engines: {node: '>=12.22'} - tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} @@ -1722,12 +1631,6 @@ packages: peerDependencies: typescript: '>=5.0.0' - vue-types@3.0.2: - resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==} - engines: {node: '>=10.15.0'} - peerDependencies: - vue: ^3.0.0 - vue-types@4.2.1: resolution: {integrity: sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==} engines: {node: '>=12.16.0'} @@ -1758,9 +1661,6 @@ packages: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} - warning@4.0.3: - resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} - webidl-conversions@8.0.1: resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==} engines: {node: '>=20'} @@ -1814,18 +1714,6 @@ snapshots: '@aesoper/normal-utils@0.1.5': {} - '@ant-design/colors@6.0.0': - dependencies: - '@ctrl/tinycolor': 3.6.1 - - '@ant-design/icons-svg@4.5.0': {} - - '@ant-design/icons-vue@7.0.1(vue@3.5.40(typescript@6.0.3))': - dependencies: - '@ant-design/colors': 6.0.0 - '@ant-design/icons-svg': 4.5.0 - vue: 3.5.40(typescript@6.0.3) - '@asamuzakjp/css-color@5.1.11': dependencies: '@asamuzakjp/generational-cache': 1.0.1 @@ -1854,8 +1742,6 @@ snapshots: dependencies: '@babel/types': 7.29.7 - '@babel/runtime@7.29.7': {} - '@babel/types@7.29.7': dependencies: '@babel/helper-string-parser': 7.29.7 @@ -1891,8 +1777,6 @@ snapshots: '@csstools/css-tokenizer@4.0.0': {} - '@ctrl/tinycolor@3.6.1': {} - '@emnapi/core@1.11.1': dependencies: '@emnapi/wasi-threads': 1.2.2 @@ -1909,10 +1793,6 @@ snapshots: tslib: 2.8.1 optional: true - '@emotion/hash@0.9.2': {} - - '@emotion/unitless@0.8.1': {} - '@eslint-community/eslint-utils@4.9.1(eslint@10.7.0)': dependencies: eslint: 10.7.0 @@ -2050,11 +1930,6 @@ snapshots: '@rolldown/pluginutils@1.0.1': {} - '@simonwep/pickr@1.8.2': - dependencies: - core-js: 3.49.0 - nanopop: 2.4.2 - '@standard-schema/spec@1.1.0': {} '@tybys/wasm-util@0.10.3': @@ -2483,34 +2358,6 @@ snapshots: ansi-styles@6.2.3: {} - ant-design-vue@4.2.6(vue@3.5.40(typescript@6.0.3)): - dependencies: - '@ant-design/colors': 6.0.0 - '@ant-design/icons-vue': 7.0.1(vue@3.5.40(typescript@6.0.3)) - '@babel/runtime': 7.29.7 - '@ctrl/tinycolor': 3.6.1 - '@emotion/hash': 0.9.2 - '@emotion/unitless': 0.8.1 - '@simonwep/pickr': 1.8.2 - array-tree-filter: 2.1.0 - async-validator: 4.2.5 - csstype: 3.2.3 - dayjs: 1.11.21 - dom-align: 1.12.4 - dom-scroll-into-view: 2.0.1 - lodash: 4.18.1 - lodash-es: 4.18.1 - resize-observer-polyfill: 1.5.1 - scroll-into-view-if-needed: 2.2.31 - shallow-equal: 1.2.1 - stylis: 4.4.0 - throttle-debounce: 5.0.2 - vue: 3.5.40(typescript@6.0.3) - vue-types: 3.0.2(vue@3.5.40(typescript@6.0.3)) - warning: 4.0.3 - - array-tree-filter@2.1.0: {} - assertion-error@2.0.1: {} ast-v8-to-istanbul@1.0.5: @@ -2519,8 +2366,6 @@ snapshots: estree-walker: 3.0.3 js-tokens: 10.0.0 - async-validator@4.2.5: {} - balanced-match@1.0.2: {} balanced-match@4.0.4: {} @@ -2551,8 +2396,6 @@ snapshots: commander@7.2.0: {} - compute-scroll-into-view@1.0.20: {} - config-chain@1.1.13: dependencies: ini: 1.3.8 @@ -2560,8 +2403,6 @@ snapshots: convert-source-map@2.0.0: {} - core-js@3.49.0: {} - cross-spawn@7.0.6: dependencies: path-key: 3.1.1 @@ -2736,8 +2577,6 @@ snapshots: transitivePeerDependencies: - '@noble/hashes' - dayjs@1.11.21: {} - debug@4.4.3: dependencies: ms: 2.1.3 @@ -2752,10 +2591,6 @@ snapshots: detect-libc@2.1.2: {} - dom-align@1.12.4: {} - - dom-scroll-into-view@2.0.1: {} - eastasianwidth@0.2.0: {} editorconfig@1.0.7: @@ -2949,8 +2784,6 @@ snapshots: dependencies: is-extglob: 2.1.1 - is-plain-object@3.0.1: {} - is-plain-object@5.0.0: {} is-potential-custom-element-name@1.0.1: {} @@ -2988,8 +2821,6 @@ snapshots: js-tokens@10.0.0: {} - js-tokens@4.0.0: {} - jsdom@29.1.1: dependencies: '@asamuzakjp/css-color': 5.1.11 @@ -3086,12 +2917,6 @@ snapshots: lodash-es@4.18.1: {} - lodash@4.18.1: {} - - loose-envify@1.4.0: - dependencies: - js-tokens: 4.0.0 - lru-cache@10.4.3: {} lru-cache@11.5.2: {} @@ -3128,8 +2953,6 @@ snapshots: nanoid@3.3.16: {} - nanopop@2.4.2: {} - natural-compare@1.4.0: {} nopt@7.2.1: @@ -3203,8 +3026,6 @@ snapshots: require-from-string@2.0.2: {} - resize-observer-polyfill@1.5.1: {} - robust-predicates@3.0.3: {} rolldown@1.1.5: @@ -3236,14 +3057,8 @@ snapshots: dependencies: xmlchars: 2.2.0 - scroll-into-view-if-needed@2.2.31: - dependencies: - compute-scroll-into-view: 1.0.20 - semver@7.8.5: {} - shallow-equal@1.2.1: {} - shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -3280,16 +3095,12 @@ snapshots: dependencies: ansi-regex: 6.2.2 - stylis@4.4.0: {} - supports-color@7.2.0: dependencies: has-flag: 4.0.0 symbol-tree@3.2.4: {} - throttle-debounce@5.0.2: {} - tinybench@2.9.0: {} tinycolor2@1.6.0: {} @@ -3417,11 +3228,6 @@ snapshots: '@vue/language-core': 3.3.7 typescript: 6.0.3 - vue-types@3.0.2(vue@3.5.40(typescript@6.0.3)): - dependencies: - is-plain-object: 3.0.1 - vue: 3.5.40(typescript@6.0.3) - vue-types@4.2.1(vue@3.5.40(typescript@6.0.3)): dependencies: is-plain-object: 5.0.0 @@ -3452,10 +3258,6 @@ snapshots: dependencies: xml-name-validator: 5.0.0 - warning@4.0.3: - dependencies: - loose-envify: 1.4.0 - webidl-conversions@8.0.1: {} whatwg-mimetype@5.0.0: {} diff --git a/src/App.test.ts b/src/App.test.ts index d9f4f55..5a9bca1 100644 --- a/src/App.test.ts +++ b/src/App.test.ts @@ -1,5 +1,4 @@ import { flushPromises, mount } from '@vue/test-utils' -import { InputNumber, Select } from 'ant-design-vue' import { describe, expect, it, vi } from 'vitest' import { ColorPicker } from 'vue3-colorpicker' @@ -53,9 +52,9 @@ describe('App workspace layout', { timeout: 20_000 }, () => { expect(frameControls.find('[aria-label="图框线宽"]').exists()).toBe(true) expect(frameControls.find('[aria-label="图框线型"]').exists()).toBe(true) expect(frameControls.find('[aria-label="显示图框水印"]').exists()).toBe(true) - expect(frameControls.get('.frame-style-control--switch .ant-switch').classes()).toContain( - 'ant-switch-small', - ) + expect( + frameControls.get('.frame-style-control--switch .native-switch').attributes('role'), + ).toBe('switch') const titleControls = panel.get('.title-controls') expect(panel.find('[aria-label="显示标题"]').exists()).toBe(true) expect(titleControls.find('[aria-label="标题名称"]').exists()).toBe(true) @@ -85,8 +84,8 @@ describe('App workspace layout', { timeout: 20_000 }, () => { expect(chart.props('cleanView')).toBe(false) expect(chart.props('zeroLine')).toMatchObject({ visible: false, color: '#98a2b3', width: 1 }) - await wrapper.get('[aria-label="净图模式"]').trigger('click') - await wrapper.get('[aria-label="显示零值参考线"]').trigger('click') + await wrapper.get('[aria-label="净图模式"]').setValue(true) + await wrapper.get('[aria-label="显示零值参考线"]').setValue(true) await flushPromises() expect(chart.props('cleanView')).toBe(true) @@ -237,7 +236,7 @@ describe('App workspace layout', { timeout: 20_000 }, () => { expect(renderedTitle().attributes('style')).toContain('font-style: normal') expect(renderedTitle().attributes('style')).toContain('text-decoration: none') - await wrapper.get('[aria-label="显示标题"]').trigger('click') + await wrapper.get('[aria-label="显示标题"]').setValue(false) await flushPromises() expect(wrapper.find('.waveform-chart__title-area').exists()).toBe(false) @@ -250,17 +249,17 @@ describe('App workspace layout', { timeout: 20_000 }, () => { const frameControls = wrapper.get('.frame-style-controls') const colorPickers = frameControls.findAllComponents(ColorPicker) - const widthInput = frameControls.findAllComponents(InputNumber)[0] - const styleSelect = frameControls.findAllComponents(Select)[0] + const widthInput = frameControls.get('[aria-label="图框线宽"]') + const styleSelect = frameControls.get('[aria-label="图框线型"]') expect(colorPickers).toHaveLength(2) - expect(widthInput).toBeDefined() - expect(styleSelect).toBeDefined() + expect(widthInput.element.tagName).toBe('INPUT') + expect(styleSelect.element.tagName).toBe('SELECT') colorPickers[0].vm.$emit('update:pureColor', 'rgba(220, 38, 38, 0.8)') colorPickers[1].vm.$emit('update:pureColor', 'rgba(14, 165, 233, 0.25)') - widthInput?.vm.$emit('update:value', 3) - styleSelect?.vm.$emit('update:value', 'dashed') + await widthInput.setValue('3') + await styleSelect.setValue('dashed') await flushPromises() const frames = wrapper.findAll('.waveform-chart__plot-frame') @@ -291,11 +290,11 @@ describe('App workspace layout', { timeout: 20_000 }, () => { expect(initialWatermarks.length).toBeGreaterThan(1) - await watermarkToggle.trigger('click') + await watermarkToggle.setValue(false) await flushPromises() expect(wrapper.findAll('.waveform-chart__watermark')).toHaveLength(0) - await watermarkToggle.trigger('click') + await watermarkToggle.setValue(true) await flushPromises() expect( wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()), diff --git a/src/App.vue b/src/App.vue index fbd8a05..168286e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,4 @@ + + + + diff --git a/src/main.ts b/src/main.ts index daf72a1..b9ca7f1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,4 @@ import { createApp } from 'vue' -import 'ant-design-vue/dist/reset.css' import App from './App.vue' import './styles.css' diff --git a/src/styles.css b/src/styles.css index 851eea5..4677c83 100644 --- a/src/styles.css +++ b/src/styles.css @@ -17,6 +17,12 @@ box-sizing: border-box; } +button, +input, +select { + font: inherit; +} + html, body, #app { @@ -91,16 +97,124 @@ body { margin-bottom: 0; } +.control-panel .native-input, +.control-panel .native-select { + min-width: 0; + height: 28px; + padding: 4px 8px; + color: #101828; + font-size: 12px; + background: #fff; + border: 1px solid #d0d5dd; + border-radius: 4px; + outline: none; +} + +.control-panel .native-input:focus-visible, +.control-panel .native-select:focus-visible, +.control-panel button:focus-visible { + border-color: #1677ff; + outline: 2px solid rgb(22 119 255 / 20%); + outline-offset: 1px; +} + +.control-panel .native-switch { + position: relative; + width: 30px; + height: 18px; + margin: 0; + appearance: none; + background: #d0d5dd; + border: 0; + border-radius: 999px; + cursor: pointer; + transition: background-color 120ms ease; +} + +.control-panel .native-switch::after { + position: absolute; + top: 3px; + left: 3px; + width: 12px; + height: 12px; + content: ''; + background: #fff; + border-radius: 50%; + box-shadow: 0 1px 2px rgb(16 24 40 / 20%); + transition: transform 120ms ease; +} + +.control-panel .native-switch:checked { + background: #1677ff; +} + +.control-panel .native-switch:checked::after { + transform: translateX(12px); +} + +.control-panel .native-switch:focus-visible { + outline: 2px solid rgb(22 119 255 / 35%); + outline-offset: 2px; +} + +.control-action, +.mobile-control-toggle, +.control-panel__close { + padding: 5px 10px; + color: #344054; + font-size: 12px; + line-height: 18px; + background: #fff; + border: 1px solid #d0d5dd; + border-radius: 4px; + cursor: pointer; +} + +.control-action:hover, +.mobile-control-toggle:hover, +.control-panel__close:hover { + color: #0958d9; + border-color: #1677ff; +} + +.control-action--block { + width: 100%; +} + .display-mode-control { display: flex; width: 100%; - white-space: nowrap; + overflow: hidden; + border: 1px solid #d0d5dd; + border-radius: 4px; } -.display-mode-control .ant-radio-button-wrapper { +.display-mode-control label { + position: relative; flex: 1 1 0; - padding-inline: 7px; + min-width: 0; + padding: 5px 7px; + color: #475467; + font-size: 12px; text-align: center; + cursor: pointer; +} + +.display-mode-control label + label { + border-left: 1px solid #d0d5dd; +} + +.display-mode-control input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + pointer-events: none; +} + +.display-mode-control input:checked + span { + color: #0958d9; + font-weight: 600; } .grid-size-control { @@ -112,7 +226,7 @@ body { font-size: 12px; } -.grid-size-control .ant-input-number { +.grid-size-control .native-input { width: 58px; } @@ -134,7 +248,7 @@ body { margin-top: 10px; } -.select-control .ant-select { +.select-control .native-select { width: 100%; } @@ -171,12 +285,12 @@ body { font-size: 12px; } -.frame-style-control .ant-input-number, -.frame-style-control .ant-select { +.frame-style-control .native-input, +.frame-style-control .native-select { width: 100%; } -.frame-style-control--switch .ant-switch { +.frame-style-control--switch .native-switch { width: auto; justify-self: start; } @@ -210,8 +324,8 @@ body { grid-column: 1 / -1; } -.title-control .ant-select, -.title-control .ant-input-number { +.title-control .native-select, +.title-control .native-input { width: 100%; } diff --git a/vite.lib.config.ts b/vite.lib.config.ts index 69896c9..f0ddde9 100644 --- a/vite.lib.config.ts +++ b/vite.lib.config.ts @@ -3,7 +3,7 @@ import { fileURLToPath, URL } from 'node:url' import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' -const peerDependencies = ['vue', 'd3', 'ant-design-vue', 'vue3-colorpicker'] +const peerDependencies = ['vue', 'd3', 'vue3-colorpicker'] export default defineConfig({ plugins: [vue()],