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

2024-11-22 12:34:43 +08:00
parent 30721736a4
commit 2bbe9c7a59
13 changed files with 136 additions and 25 deletions
--- 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"
 }
--- 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",
--- 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: {}
--- 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) {
 }
--- a/src/components/primevue.vue
+++ b/src/components/primevue.vue
@ -0,0 +1,8 @@
+<template>
+  <div class="pppppppp">
+    <InputText />
+    <button>button</button>
+    <Button>Button</Button>
+    <PButton>PButton</PButton>
+  </div>
+</template>
--- a/src/components/vue-macros/ReactivityTransform.vue
+++ b/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>
--- 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');
 }
--- a/src/pages/data-loaders.[id].vue
+++ b/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 @click="reload()">Reload</button>
+    <button class="green" @click="$router.back()">Back</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>
--- a/src/pages/index-page.vue
+++ b/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 :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link></li>
-    <li><router-link :to="{ name: 'SomePage' }">Some Page</router-link></li>
-    <li><router-link :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
-    <li><router-link :to="{ name: 'Api' }">Api</router-link></li>
+    <li><router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
+    <li><router-link class="green" :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link></li>
+    <li><router-link class="green" :to="{ name: 'SomePage' }">Some Page</router-link></li>
+    <li><router-link class="green" :to="{ name: '中文页面' }">中文-页面.page.vue</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>
--- a/src/pages/some-page.page.vue
+++ b/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>
--- a/src/pages/ts-enum-util.vue
+++ b/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>
--- a/src/pages/中文-页面.page.vue
+++ b/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>
--- a/vite.config.ts
+++ b/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({