feat: 添加 PrimeVue 组件并更新样式，增强按钮交互体验

.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"
 }

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",

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: {}

src/assets/main.css

@@ -7,18 +7,16 @@
   font-weight: normal;
 }
 
-button:not(.van-button),
+/* button:not(.van-button),
-a,
+a, */
 .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
   padding: 3px;
 }
-
+.green:hover {
-@media (hover: hover) {
-  button:not(.van-button):hover,
-  a:hover {
   background-color: hsla(160, 100%, 37%, 0.2);
 }
+@media (hover: hover) {
 }

src/components/primevue.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="pppppppp">
+    <InputText />
+    <button>button</button>
+    <Button>Button</Button>
+    <PButton>PButton</PButton>
+  </div>
+</template>

src/components/vue-macros/ReactivityTransform.vue

@@ -10,5 +10,5 @@ function increment() {
 </script>
 
 <template>
-  <button @click="increment">ReactivityTransform: {{ count }}</button>
+  <button class="green" @click="increment">ReactivityTransform: {{ count }}</button>
 </template>

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');
 }

src/pages/data-loaders.[id].vue

@@ -51,14 +51,14 @@ watch(
 <template>
   <h1>Data Loaders</h1>
   <div flex="~ row">
-    <button @click="$router.back()">Back</button>
+    <button class="green" @click="$router.back()">Back</button>
-    <button @click="reload()">Reload</button>
+    <button class="green" @click="reload()">Reload</button>
   </div>
   <main>
     <p v-if="isLoading">Loading...</p>
     <template v-else-if="error">
       <p>{{ error.message }}</p>
-      <button @click="reload()">Retry</button>
+      <button class="green" @click="reload()">Retry</button>
     </template>
     <template v-else>
       <p>{{ pageData }}</p>

src/pages/index-page.vue

@@ -1,6 +1,7 @@
 <script lang="tsx" setup>
 import { routes } from 'vue-router/auto-routes';
 import I18nComp from '../components/i18nComp/index.vue';
+import Primevue from '@/components/primevue.vue';
 
 useHead({
   // Titles
@@ -31,11 +32,11 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
 <template>
   <h1>Index Page</h1>
   <ul>
-    <li><router-link :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
+    <li><router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
-    <li><router-link :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link></li>
+    <li><router-link class="green" :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link></li>
-    <li><router-link :to="{ name: 'SomePage' }">Some Page</router-link></li>
+    <li><router-link class="green" :to="{ name: 'SomePage' }">Some Page</router-link></li>
-    <li><router-link :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
+    <li><router-link class="green" :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
-    <li><router-link :to="{ name: 'Api' }">Api</router-link></li>
+    <li><router-link class="green" :to="{ name: 'Api' }">Api</router-link></li>
   </ul>
 
   <div b="1px solid pink" mt-8>
@@ -65,6 +66,11 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
   <div b="1px solid pink" mt-8 p-8>
     <SendSms />
   </div>
+
+  <div b="1px solid pink" mt-8 p-8>
+    <Primevue />
+  </div>
+
   <div b="1px solid pink" mt-8 p-8>
     <pre>{{ JSON.stringify(routes, null, 2) }}</pre>
   </div>

src/pages/some-page.page.vue

@@ -1,14 +1,18 @@
 <template>
   <div>
     <h1>Some Page</h1>
-    <button @click="$router.back()">Back</button>
+    <button class="green" @click="$router.back()">Back</button>
     <main>
       <ul>
         <li>
           密码强度
-          <a target="_blank" href="https://zxcvbn-ts.github.io/zxcvbn/guide/getting-started/">@zxcvbn-ts/core</a>
+          <a class="green" target="_blank" href="https://zxcvbn-ts.github.io/zxcvbn/guide/getting-started/"
+            >@zxcvbn-ts/core</a
+          >
+        </li>
+        <li>
+          vitepress高亮: <a class="green" target="_blank" href="https://shiki.tmrs.site/packages/vitepress">Shiki</a>
         </li>
-        <li>vitepress高亮: <a target="_blank" href="https://shiki.tmrs.site/packages/vitepress">Shiki</a></li>
       </ul>
     </main>
   </div>

src/pages/ts-enum-util.vue

@@ -40,7 +40,7 @@ const mapValue = (value: Direction | null | undefined) => {
 <template>
   <h1>TS Enum Util</h1>
   <div flex="~ row">
-    <button @click="$router.back()">Back</button>
+    <button class="green" @click="$router.back()">Back</button>
   </div>
   <main>
     <p>TestEnum: {{ TestEnum }}</p>
@@ -48,7 +48,7 @@ const mapValue = (value: Direction | null | undefined) => {
     <ul list-circle>
       <li>{{ `.getKeys(): ${$enum(Direction).getKeys()}` }}</li>
       <li>{{ `.getValues(): ${$enum(Direction).getValues()}` }}</li>
-      <li><button @click="visitValue(Direction.Up)">Visit Value</button></li>
+      <li><button class="green" @click="visitValue(Direction.Up)">Visit Value</button></li>
       <li>{{ `.mapValue(null): ${mapValue(null)}` }}</li>
       <li>getKeyOrDefault</li>
       <li>getValueOrDefault</li>

src/pages/中文-页面.page.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button @click="函数($event)">Back</button>
+    <button class="green" @click="函数($event)">Back</button>
     <h1>中文-页面.page.vue</h1>
   </div>
 </template>

vite.config.ts

@@ -1,3 +1,4 @@
+import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import { unheadVueComposablesImports } from '@unhead/vue';
 import { VantResolver } from '@vant/auto-import-resolver';
@@ -114,6 +115,7 @@ function Plugins() {
         }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
         TDesignResolver({ library: 'mobile-vue', esm: true }),
         VantResolver({ importStyle: true }),
+        PrimeVueResolver({ components: { prefix: 'P' } }),
       ],
     }),
     Icons({