From 2bbe9c7a5980093012e0bdfad9956e1968d0bbd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Fri, 22 Nov 2024 12:34:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20PrimeVue=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=E6=8C=89=E9=92=AE=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 5 +- package.json | 3 + pnpm-lock.yaml | 81 +++++++++++++++++++ src/assets/main.css | 14 ++-- src/components/primevue.vue | 8 ++ .../vue-macros/ReactivityTransform.vue | 2 +- src/main.ts | 8 ++ src/pages/data-loaders.[id].vue | 6 +- src/pages/index-page.vue | 16 ++-- src/pages/some-page.page.vue | 10 ++- src/pages/ts-enum-util.vue | 4 +- src/pages/中文-页面.page.vue | 2 +- vite.config.ts | 2 + 13 files changed, 136 insertions(+), 25 deletions(-) create mode 100644 src/components/primevue.vue diff --git a/.vscode/settings.json b/.vscode/settings.json index 2c1892d..95dd51c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,7 +3,7 @@ "source.fixAll": "explicit" }, "editor.formatOnSave": true, - "editor.formatOnSaveMode": "modifications", // 只格式化修改的部分 + "editor.formatOnSaveMode": "modificationsIfAvailable", // 只格式化修改的部分 "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, @@ -15,5 +15,6 @@ }, "typescript.tsdk": "node_modules/typescript/lib", "typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"], - "i18n-ally.localesPaths": ["src/locales"] + "i18n-ally.localesPaths": ["src/locales"], + "i18n-ally.keystyle": "nested" } diff --git a/package.json b/package.json index fdcd210..9d41bdc 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "dependencies": { "@alova/adapter-axios": "^2.0.10", "@intlify/unplugin-vue-i18n": "^5.3.1", + "@primevue/themes": "^4.2.2", "@unhead/vue": "^1.11.11", "@vant/use": "^1.6.0", "@vueuse/core": "^11.3.0", @@ -43,6 +44,7 @@ "page-stack-vue3": "^2.5.6", "pinia": "^2.2.6", "pinia-plugin-persistedstate": "^4.1.3", + "primevue": "^4.2.2", "radash": "^12.1.0", "taze": "^0.18.0", "tdesign-icons-vue-next": "^0.3.3", @@ -62,6 +64,7 @@ "@iconify-json/carbon": "^1.2.4", "@iconify/utils": "^2.1.33", "@playwright/test": "^1.49.0", + "@primevue/auto-import-resolver": "^4.2.2", "@tsconfig/node20": "^20.1.4", "@types/jsdom": "^21.1.7", "@types/node": "^22.9.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e4c62a8..0568da5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@intlify/unplugin-vue-i18n': specifier: ^5.3.1 version: 5.3.1(@vue/compiler-dom@3.5.13)(eslint@9.15.0(jiti@2.4.0))(rollup@4.27.3)(typescript@5.6.3)(vue-i18n@10.0.4(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)) + '@primevue/themes': + specifier: ^4.2.2 + version: 4.2.2 '@unhead/vue': specifier: ^1.11.11 version: 1.11.11(vue@3.5.13(typescript@5.6.3)) @@ -53,6 +56,9 @@ importers: pinia-plugin-persistedstate: specifier: ^4.1.3 version: 4.1.3(pinia@2.2.6(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3)))(rollup@4.27.3) + primevue: + specifier: ^4.2.2 + version: 4.2.2(vue@3.5.13(typescript@5.6.3)) radash: specifier: ^12.1.0 version: 12.1.0 @@ -105,6 +111,9 @@ importers: '@playwright/test': specifier: ^1.49.0 version: 1.49.0 + '@primevue/auto-import-resolver': + specifier: ^4.2.2 + version: 4.2.2 '@tsconfig/node20': specifier: ^20.1.4 version: 20.1.4 @@ -1165,6 +1174,36 @@ packages: '@polka/url@1.0.0-next.28': resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} + '@primeuix/styled@0.3.2': + resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==} + engines: {node: '>=12.11.0'} + + '@primeuix/utils@0.3.2': + resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==} + engines: {node: '>=12.11.0'} + + '@primevue/auto-import-resolver@4.2.2': + resolution: {integrity: sha512-tM4BSIaS3JTXsVLNm69L7ZD9IOUdzK4PzrS+9zyDqA+l5mPTb+KOBEPXLvYXi+0NE7bAluvx/MhmfRA8eGXXzQ==} + engines: {node: '>=12.11.0'} + + '@primevue/core@4.2.2': + resolution: {integrity: sha512-ZxlbPBKTSpKN2mht2noiFQV689HH2KiM5yDxHyY0NJafxbB16SLgWWwRDcPulNrbLmu5e3joutTv5tB/52kvAQ==} + engines: {node: '>=12.11.0'} + peerDependencies: + vue: ^3.3.0 + + '@primevue/icons@4.2.2': + resolution: {integrity: sha512-x0AwfjB94MoLsmNyQtSGgrEWhZ52SzRQ3X5hEUA30L7tdob66qYmiMKCnjfq2gvJIB477DwB7cxJZhaTxspsDw==} + engines: {node: '>=12.11.0'} + + '@primevue/metadata@4.2.2': + resolution: {integrity: sha512-9vwrYujR/Hljb/NgMLJfeW6wtR/Oi2TlrLVraDV3Rayupdv/uQe5UDPHo2uhP71kwjEOoArDAvQIl8pNWNnNJw==} + engines: {node: '>=12.11.0'} + + '@primevue/themes@4.2.2': + resolution: {integrity: sha512-2PUX+Ur4gyYB5xfCIySQMq4jWRVJSclniBaAiNb3HQ7rhnkfdjJRzfqfbk3YkH02ZA6QUgCNHHjqtz2vI0tk7g==} + engines: {node: '>=12.11.0'} + '@rollup/pluginutils@4.2.1': resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} engines: {node: '>= 8.0.0'} @@ -4075,6 +4114,10 @@ packages: resolution: {integrity: sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==} engines: {node: '>=10'} + primevue@4.2.2: + resolution: {integrity: sha512-L+WWWdSbyTCwJDLMKoFQpTr2C/VFQHoArPzw8xFwADOB7I5OsDCd5ZQaD+WEn3iFG/25EkFFt59sxGb69zf3eQ==} + engines: {node: '>=12.11.0'} + progress@2.0.3: resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==} engines: {node: '>=0.4.0'} @@ -5977,6 +6020,35 @@ snapshots: '@polka/url@1.0.0-next.28': {} + '@primeuix/styled@0.3.2': + dependencies: + '@primeuix/utils': 0.3.2 + + '@primeuix/utils@0.3.2': {} + + '@primevue/auto-import-resolver@4.2.2': + dependencies: + '@primevue/metadata': 4.2.2 + + '@primevue/core@4.2.2(vue@3.5.13(typescript@5.6.3))': + dependencies: + '@primeuix/styled': 0.3.2 + '@primeuix/utils': 0.3.2 + vue: 3.5.13(typescript@5.6.3) + + '@primevue/icons@4.2.2(vue@3.5.13(typescript@5.6.3))': + dependencies: + '@primeuix/utils': 0.3.2 + '@primevue/core': 4.2.2(vue@3.5.13(typescript@5.6.3)) + transitivePeerDependencies: + - vue + + '@primevue/metadata@4.2.2': {} + + '@primevue/themes@4.2.2': + dependencies: + '@primeuix/styled': 0.3.2 + '@rollup/pluginutils@4.2.1': dependencies: estree-walker: 2.0.2 @@ -9280,6 +9352,15 @@ snapshots: dependencies: parse-ms: 2.1.0 + primevue@4.2.2(vue@3.5.13(typescript@5.6.3)): + dependencies: + '@primeuix/styled': 0.3.2 + '@primeuix/utils': 0.3.2 + '@primevue/core': 4.2.2(vue@3.5.13(typescript@5.6.3)) + '@primevue/icons': 4.2.2(vue@3.5.13(typescript@5.6.3)) + transitivePeerDependencies: + - vue + progress@2.0.3: {} promisepipe@3.0.0: {} diff --git a/src/assets/main.css b/src/assets/main.css index a818095..0429e75 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -7,18 +7,16 @@ font-weight: normal; } -button:not(.van-button), -a, +/* button:not(.van-button), +a, */ .green { text-decoration: none; color: hsla(160, 100%, 37%, 1); transition: 0.4s; padding: 3px; } - -@media (hover: hover) { - button:not(.van-button):hover, - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } +.green:hover { + background-color: hsla(160, 100%, 37%, 0.2); +} +@media (hover: hover) { } diff --git a/src/components/primevue.vue b/src/components/primevue.vue new file mode 100644 index 0000000..21be713 --- /dev/null +++ b/src/components/primevue.vue @@ -0,0 +1,8 @@ + diff --git a/src/components/vue-macros/ReactivityTransform.vue b/src/components/vue-macros/ReactivityTransform.vue index 64db11b..92cbaef 100644 --- a/src/components/vue-macros/ReactivityTransform.vue +++ b/src/components/vue-macros/ReactivityTransform.vue @@ -10,5 +10,5 @@ function increment() { diff --git a/src/main.ts b/src/main.ts index a9f0bcb..1a59aac 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,6 +10,9 @@ import App from './App.vue'; import { router } from './router'; import { createI18n } from 'vue-i18n'; +import PrimeVue from 'primevue/config'; +import Aura from '@primevue/themes/aura'; + /* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing * All i18n resources specified in the plugin `include` option can be loaded * at once using the import syntax @@ -46,6 +49,11 @@ async function init() { messages, }), ); + app.use(PrimeVue, { + theme: { + preset: Aura, + }, + }); app.config.globalProperties.$__DEV__ = $__DEV__; app.mount('#app'); } diff --git a/src/pages/data-loaders.[id].vue b/src/pages/data-loaders.[id].vue index 6401d75..f3d18f2 100644 --- a/src/pages/data-loaders.[id].vue +++ b/src/pages/data-loaders.[id].vue @@ -51,14 +51,14 @@ watch(