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

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>