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

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

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 @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>

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>

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>