feat: 添加 PrimeVue 组件演示页面

src/locales-4-route/en-US.ts

@@ -5,6 +5,8 @@ export default {
   DemosApiDemo: 'API Demo',
   DemosCounterDemo: 'Counter Demo',
   DemosI18nDemo: 'i18n Demo',
+  DemosPrimevueDemo: 'PrimeVue Demo',
   DemosWebsocketDemo: 'WebSocket Demo',
   Home: 'Home',
-} as const satisfies PageTitleLocalizations;
+  Login: 'Login',
+} satisfies PageTitleLocalizations;

src/locales-4-route/zh-CN.ts

@@ -5,6 +5,8 @@ export default {
   DemosApiDemo: 'API 调用示例',
   DemosCounterDemo: '点击计数器',
   DemosI18nDemo: '国际化示例',
+  DemosPrimevueDemo: 'PrimeVue 组件示例',
   DemosWebsocketDemo: 'WebSocket 示例',
   Home: '首页',
-} as const satisfies PageTitleLocalizations;
+  Login: '登录',
+} satisfies PageTitleLocalizations;

src/pages/Login.page.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>Login</div>
+</template>

src/pages/demos/primevue-demo.page.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ToastMessageOptions } from 'primevue/toast';
+
+definePage({
+  meta: {},
+});
+</script>
+
+<template>
+  <div class="prime-vue-demo-page">
+    <Card>
+      <template #title>PrimeVue 组件演示</template>
+      <template #content>
+        <Message severity="info">演示 PrimeVue 各种组件的使用方法和功能特性</Message>
+
+        <Panel header="Toast 消息" class="mt-1.5">
+          <div flex="~ wrap" gap="4">
+            <Button
+              v-for="severity in [
+                'secondary',
+                'success',
+                'info',
+                'warn',
+                'error',
+                'contrast',
+                undefined,
+              ] satisfies ToastMessageOptions['severity'][]"
+              :key="severity ?? 'default'"
+              @click="
+                ToastService.add({
+                  severity: severity,
+                  summary: `severity: ${severity ?? 'default'}`,
+                  life: 5000,
+                  detail: '消息内容',
+                })
+              "
+            >
+              {{ `${severity ?? 'default'}` }}
+            </Button>
+          </div>
+        </Panel>
+      </template>
+    </Card>
+  </div>
+</template>

src/plugins/10.primevue-plugin.ts

@@ -6,6 +6,7 @@ import Aura from '@primeuix/themes/aura';
 import zhCN from 'primelocale/zh-CN.json';
 import PrimeVue from 'primevue/config';
 import StyleClass from 'primevue/styleclass';
+import ToastService from 'primevue/toastservice';
 
 export function install({ app }: { app: import('vue').App<Element> }) {
   app.directive('styleclass', StyleClass);
@@ -25,4 +26,5 @@ export function install({ app }: { app: import('vue').App<Element> }) {
       preset: Aura,
     },
   });
+  app.use(ToastService);
 }

src/styles/index.ts

@@ -1,3 +1,6 @@
 import 'nprogress/nprogress.css'; // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/nprogress/nprogress.css" />
 
+import 'primeicons/primeicons.css';
+import './reset-primevue.css';
+
 import 'virtual:uno.css';

src/styles/reset-primevue.css

@@ -0,0 +1,8 @@
+.p-confirmdialog,
+.p-toast {
+  max-width: calc(100% - 50px);
+}
+
+.p-toast .p-toast-message-text {
+  margin-top: -0.2rem;
+}