feat: 添加 PrimeVue 组件演示页面

.husky/pre-commit

@@ -2,4 +2,5 @@
 echo "🧹 [Pre-commit] 正在运行 lint-staged..."
 time pnpm exec lint-staged
 time pnpm run lint:vue-i18n-extract
+# time pnpm run type-check
 echo "🧹 [Pre-commit] lint-staged 完成！"

auto-imports.d.ts

@@ -7,7 +7,10 @@
 export {}
 declare global {
   const APP_THEME_MODES: typeof import('./src/stores/app-store')['APP_THEME_MODES']
+  const ConfirmationService: typeof import('utils4u/primevue')['ConfirmationService']
+  const DialogService: typeof import('utils4u/primevue')['DialogService']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ToastService: typeof import('utils4u/primevue')['ToastService']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const arrayToTree: typeof import('utils4u/array')['arrayToTree']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -255,6 +258,7 @@ declare global {
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const usePrimevueDialogRef: typeof import('utils4u/primevue')['usePrimevueDialogRef']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useRefs: typeof import('utils4u/vue-use')['useRefs']
@@ -345,7 +349,10 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly APP_THEME_MODES: UnwrapRef<typeof import('./src/stores/app-store')['APP_THEME_MODES']>
+    readonly ConfirmationService: UnwrapRef<typeof import('utils4u/primevue')['ConfirmationService']>
+    readonly DialogService: UnwrapRef<typeof import('utils4u/primevue')['DialogService']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ToastService: UnwrapRef<typeof import('utils4u/primevue')['ToastService']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly arrayToTree: UnwrapRef<typeof import('utils4u/array')['arrayToTree']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
@@ -593,6 +600,7 @@ declare module 'vue' {
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly usePrimevueDialogRef: UnwrapRef<typeof import('utils4u/primevue')['usePrimevueDialogRef']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useRefs: UnwrapRef<typeof import('utils4u/vue-use')['useRefs']>

package.json

@@ -18,7 +18,7 @@
     "type-check": "vue-tsc --build",
     "lint": "run-s lint:*",
     "lint:vue-i18n-extract": "vue-i18n-extract report --vueFiles './src/**/*.?(ts|tsx|vue)' --languageFiles './src/locales/*.?(json|yml|yaml|js)' --ci",
-    "lint:stylelint": "stylelint \"**/*.{css,less,scss,vue}\" --fix --ignore-path .gitignore",
+    "lint:stylelint": "stylelint --fix --ignore-path .gitignore \"**/*.{css,less,scss,vue}\"",
     "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
     "lint:eslint": "eslint . --fix",
     "test:unit:DisableWatch": "vitest --run",
@@ -27,14 +27,15 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "{server,src,e2e}/**/*.{js,jsx,ts,tsx,vue}": [
+    "{src,e2e}/**/*.{js,jsx,ts,tsx,vue}": [
-      "prettier --write",
       "eslint --fix",
-      "oxlint --fix"
+      "oxlint --fix",
+      "prettier --write"
     ],
     "{src,packages}/**/*.{css,less,scss,vue}": [
       "stylelint --fix"
-    ]
+    ],
+    "{src/locales-4-route,src/locales}/**/*": "node scripts/type-check-for-lint-staged.mjs"
   },
   "pnpm": {
     "overrides": {
@@ -61,6 +62,7 @@
     "highlight.js": "^11.11.1",
     "naive-ui": "^2.43.1",
     "pinia": "^3.0.3",
+    "primeicons": "^7.0.0",
     "primelocale": "^2.1.7",
     "primevue": "^4.3.9",
     "ts-enum-util": "^4.1.0",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       pinia:
         specifier: ^3.0.3
         version: 3.0.3(typescript@5.9.2)(vue@3.5.22(typescript@5.9.2))
+      primeicons:
+        specifier: ^7.0.0
+        version: 7.0.0
       primelocale:
         specifier: ^2.1.7
         version: 2.1.7
@@ -4609,6 +4612,9 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  primeicons@7.0.0:
+    resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
+
   primelocale@2.1.7:
     resolution: {integrity: sha512-BzqPNAhr0lDDX4tnKM7FUDeCbpXcC558pHaQULTelhi7LG5rEtTx/isqy3ueHTNdyFl3evoY3ZRZ9x21zxUtRg==}
     engines: {node: '>=18.0.0', npm: '>=8.6.0'}
@@ -10373,6 +10379,8 @@ snapshots:
 
   prettier@3.6.2: {}
 
+  primeicons@7.0.0: {}
+
   primelocale@2.1.7: {}
 
   primevue@4.4.1(vue@3.5.22(typescript@5.9.2)):

scripts/type-check-for-lint-staged.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+/**
+ * Type check script for lint-staged
+ * This script ignores file arguments passed by lint-staged and runs type-check on the entire project
+ */
+
+import { spawnSync } from 'child_process';
+
+const result = spawnSync('pnpm', ['run', 'type-check'], {
+  stdio: 'inherit',
+  shell: process.platform === 'win32',
+});
+
+process.exit(result.status ?? 1);

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;
+}

typed-router.d.ts

@@ -65,6 +65,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'DemosPrimevueDemo': RouteRecordInfo<
+      'DemosPrimevueDemo',
+      '/demos/primevue-demo',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     'DemosWebsocketDemo': RouteRecordInfo<
       'DemosWebsocketDemo',
       '/demos/websocket-demo',
@@ -79,6 +86,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'Login': RouteRecordInfo<
+      'Login',
+      '/Login',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
   }
 
   /**
@@ -128,6 +142,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/demos/primevue-demo.page.vue': {
+      routes:
+        | 'DemosPrimevueDemo'
+      views:
+        | never
+    }
     'src/pages/demos/websocket-demo.page.vue': {
       routes:
         | 'DemosWebsocketDemo'
@@ -140,6 +160,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/Login.page.vue': {
+      routes:
+        | 'Login'
+      views:
+        | never
+    }
   }
 
   /**

vite-plugins/02.unplugin-auto-import.ts

@@ -73,7 +73,7 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
         'pinia',
         '@vueuse/core',
         VueRouterAutoImports,
-        createUtils4uAutoImports([]),
+        createUtils4uAutoImports(['primevue']),
         {
           'consola/browser': ['consola'],
           'vue-router/auto': ['useLink'],

vite.config.rollup.ts

@@ -20,7 +20,7 @@ export const viteConfigRollupOptions: RollupOptions = {
     // assetFileNames:'', // 默认：	"assets/[name]-[hash][extname]"
     // https://cn.rollupjs.org/configuration-options/#output-assetfilenames
     assetFileNames(chunkInfo: PreRenderedAsset) {
-      const names = chunkInfo.names;
+      const names = [...new Set(chunkInfo.names)];
 
       if (names.length !== 1) {
         console.error('Multiple names for asset:', chunkInfo);