chore(deps): update primevue pkgs

chore(deps): update dependency @splinetool/runtime to ^1.10.19
chore(deps): update lint dependencies to ^1.5.0
2025-07-03 20:27:12 +08:00 · 2025-07-02 12:00:38 +08:00 · 2025-07-02 09:31:33 +08:00 · 2025-07-02 09:29:20 +08:00 · 2025-07-02 07:14:42 +08:00 · 2025-07-02 04:58:04 +08:00
42 changed files with 7960 additions and 3073 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -39,6 +39,7 @@ commit-msg text eol=lf
 *.woff2 binary
 *.eot binary
 *.otf binary
+*.spline binary
 # Add more binary...


--- a/.gitattributes.MD
+++ b/.gitattributes.MD
@ -0,0 +1,21 @@
+### .gitattributes
+
+如果你先推送了一个.jpg文件，然后再推送包含.gitattributes文件的更新，Git不会自动重新处理之前的.jpg文件的属性。为使.gitattributes中的新规则生效，你可以通过以下步骤重新应用设置：
+
+```bash
+1.	删除本地缓存的.jpg文件：git rm --cached <file>.jpg
+2.	重新添加该文件：git add <file>.jpg
+3.	再次提交并推送：git commit -m "Apply .gitattributes changes" && git push
+```
+
+这样，Git将按照.gitattributes中的新规则处理该文件。
+
+要验证.gitattributes文件中的二进制配置是否生效，可以使用以下方法：
+
+```bash
+1.	推送后验证：先按照之前步骤重新添加并推送.jpg文件。
+2.	查看差异（diff）：执行 git diff，检查文件是否有文本形式的改动。如果是二进制文件，Git不会显示具体内容的差异。
+3.	Git日志验证：执行 git log -p <file>.jpg 查看提交的改动记录，确认文件未受行尾或编码处理的影响。
+```
+
+如果以上测试显示该文件未发生不必要的改动，说明.gitattributes配置已生效。
--- a/.github/copilot-instructions_MD
+++ b/.github/copilot-instructions_MD
@ -1,3 +0,0 @@
-```bash
-ln -s .github/copilot-instructions.md .roorules
-```
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 🛠️ 设置Node环境
-        uses: yanhao98/composite-actions/setup-node-environment@4470aa136359d05ae3b086d37cfaa33305448a5b
+        uses: yanhao98/composite-actions/setup-node-environment@3bf07469124a5a7b9a06b6d07be36a116c5aa49e
      - name: 🔍 静态代码分析
        run: pnpm run lint
      - name: 📦 构建项目
--- a/.github/workflows/playwright.yaml
+++ b/.github/workflows/playwright.yaml
@ -7,6 +7,13 @@ env:

 on:
  push:
+  workflow_dispatch:
+    inputs:
+      run_cleanup:
+        description: '是否运行 Surge 清理 Job'
+        required: false
+        type: boolean
+        default: true

 jobs:
  surge:
@ -15,7 +22,7 @@ jobs:
      url: ${{ steps.surge_deploy.outputs.url }}
    steps:
      - name: ⚙️ 设置 Node 环境
-        uses: yanhao98/composite-actions/setup-node-environment@4470aa136359d05ae3b086d37cfaa33305448a5b
+        uses: yanhao98/composite-actions/setup-node-environment@3bf07469124a5a7b9a06b6d07be36a116c5aa49e
      - name: 🔨 构建项目
        run: pnpm run build-only
        env:
@ -23,21 +30,27 @@ jobs:
      - name: 🚀 部署到 Surge
        id: surge_deploy
        if: ${{ github.actor != 'nektos/act' }} # https://nektosact.com/usage/index.html#skipping-steps
-        uses: yanhao98/composite-actions/deploy-dist-to-surge@4470aa136359d05ae3b086d37cfaa33305448a5b
+        uses: yanhao98/composite-actions/deploy-dist-to-surge@3bf07469124a5a7b9a06b6d07be36a116c5aa49e

  playwright:
    needs: surge
    runs-on: ubuntu-latest
-    container: mcr.microsoft.com/playwright:v1.51.1-noble
+    container: mcr.microsoft.com/playwright:v1.53.2-noble
    steps:
      - name: ⚙️ 设置 Node 环境
-        uses: yanhao98/composite-actions/setup-node-environment@4470aa136359d05ae3b086d37cfaa33305448a5b
+        uses: yanhao98/composite-actions/setup-node-environment@3bf07469124a5a7b9a06b6d07be36a116c5aa49e
      # - name: 📥 安装 Playwright 浏览器
      #   run: pnpm exec playwright install --with-deps
      - name: ▶️ 运行 Playwright 测试
        run: npx playwright test
        env:
          BASE_URL: ${{ needs.surge.outputs.url }}
+
+  cleanup_surge:
+    runs-on: ubuntu-latest
+    needs: [surge, playwright]
+    if: github.event_name == 'push' || github.event.inputs.run_cleanup == true
+    steps:
      - name: 🧹 清理 Surge 部署
        run: npx surge teardown ${{ needs.surge.outputs.url }} --token ${{ env.SURGE_TOKEN }}
        env:
--- a/.github/workflows/vercel.yaml
+++ b/.github/workflows/vercel.yaml
@ -14,7 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: ⚙️ 设置 Node 环境
-        uses: yanhao98/composite-actions/setup-node-environment@4470aa136359d05ae3b086d37cfaa33305448a5b
+        uses: yanhao98/composite-actions/setup-node-environment@3bf07469124a5a7b9a06b6d07be36a116c5aa49e

      - name: 📥 拉取 Vercel 环境信息
        run: pnpm dlx vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -1,5 +1,6 @@
 # 此钩子在 pre-commit 钩子成功完成后，用于检查提交消息。
 echo "📝 [Commit-msg] 正在运行 commit-msg 钩子..."
-# 在这里添加你的 commit message 验证逻辑，例如 commitlint
+echo "当前提交的文件是：$1"
 # npx --no -- commitlint --edit "$1"
+pnpm exec commitlint --edit $1
 echo "✅ [Commit-msg] commit-msg 钩子完成！"
--- a/.npmrc
+++ b/.npmrc
@ -5,7 +5,7 @@ registry=https://registry.npmjs.org/
 # registry=https://nexus.oo1.dev/repository/npm/

 # https://pnpm.io/zh/npmrc#node-mirrorltreleasedir
-use-node-version=22.14.0
+use-node-version=22.15.0
 node-mirror:release=https://npmmirror.com/mirrors/node/ # pnpm config set node-mirror:release=https://npmmirror.com/mirrors/node/
 node-mirror:rc=https://npmmirror.com/mirrors/node-rc/
 node-mirror:nightly=https://npmmirror.com/mirrors/node-nightly/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -27,8 +27,7 @@
    "source.fixAll.eslint": "never",
    "source.fixAll.stylelint": "never",
    "source.fixAll.oxc": "never",
-    "source.organizeImports": "never",
-    "source.fixAll": "never"
+    "source.organizeImports": "never"
  },
  "editor.formatOnSave": false,
  "oxc.enable": true,
--- a/README.md
+++ b/README.md
@ -15,33 +15,9 @@ pnpm install --registry=https://nexus.oo1.dev/repository/npm
 pnpm run dev
 ```

-## Tips
-
-### .gitattributes
-
-如果你先推送了一个.jpg文件，然后再推送包含.gitattributes文件的更新，Git不会自动重新处理之前的.jpg文件的属性。为使.gitattributes中的新规则生效，你可以通过以下步骤重新应用设置：
-
-```bash
-1.	删除本地缓存的.jpg文件：git rm --cached <file>.jpg
-2.	重新添加该文件：git add <file>.jpg
-3.	再次提交并推送：git commit -m "Apply .gitattributes changes" && git push
-```
-
-这样，Git将按照.gitattributes中的新规则处理该文件。
-
-要验证.gitattributes文件中的二进制配置是否生效，可以使用以下方法：
-
-```bash
-1.	推送后验证：先按照之前步骤重新添加并推送.jpg文件。
-2.	查看差异（diff）：执行 git diff，检查文件是否有文本形式的改动。如果是二进制文件，Git不会显示具体内容的差异。
-3.	Git日志验证：执行 git log -p <file>.jpg 查看提交的改动记录，确认文件未受行尾或编码处理的影响。
-```
-
-如果以上测试显示该文件未发生不必要的改动，说明.gitattributes配置已生效。
-
 ## Links

- https://github.com/hyoban-template/shadcn-vue-unocss-starter$0
+- https://github.com/hyoban-template/shadcn-vue-unocss-starter
 - [Performance API优化页面性能](https://juejin.cn/post/7238779568478552122)
 - [vitepress-theme-demoblock](https://www.npmjs.com/package/vitepress-theme-demoblock)
 - [Vite PWA](https://vite-pwa-org-zh.netlify.app/guide/)
@ -53,10 +29,12 @@ pnpm run dev

 ---

+- [如何建立一个最小重现](https://antfu.me/posts/why-reproductions-are-required-zh#如何建立一个最小重现)
 - https://biomejs.dev/zh-cn/internals/language-support/
 - https://github.dev/antfu-collective/vitesse/
 - [Vue3 入门指南与实战案例](https://vue3.chengpeiquan.com/)
- [如何建立一个最小重现](https://antfu.me/posts/why-reproductions-are-required-zh#如何建立一个最小重现)

 ---
 - [primevue-scopedtokens](https://primevue.org/theming/styled/#scopedtokens)
+
+ https://www.npmjs.com/package/npkill
--- a/commitlint.config.ts
+++ b/commitlint.config.ts
@ -0,0 +1,9 @@
+import type { UserConfig } from '@commitlint/types';
+
+
+const Configuration: UserConfig = {
+  extends: ['@commitlint/config-conventional'],
+  formatter: '@commitlint/format',
+};
+
+export default Configuration;
--- a/eslint.config.ts
+++ b/eslint.config.ts
@ -84,6 +84,8 @@ export default defineConfigWithVueTs(
      'import-x/newline-after-import': 'error',
      'import-x/first': 'error',
      'import-x/no-named-as-default': 'off',
+      'import-x/no-duplicates': 'off',
+      'import-x/named': 'off',
    },
  },
  // endregion <<< eslint-plugin-import-x <<<
@ -99,6 +101,8 @@ export default defineConfigWithVueTs(
      'perfectionist/sort-imports': ['error'],
      'perfectionist/sort-modules': 'off',
      'perfectionist/sort-object-types': 'off',
+      'perfectionist/sort-enums': 'off',
+      'perfectionist/sort-union-types': 'off',
    },
  },
  // endregion <<< eslint-plugin-perfectionist <<<
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "packageManager": "pnpm@10.8.0",
+  "packageManager": "pnpm@10.12.4",
  "name": "vue-ts-example",
  "version": "0.0.0",
  "private": true,
@ -44,119 +44,121 @@
    }
  },
  "dependencies": {
-    "@alova/adapter-axios": "^2.0.13",
+    "@alova/adapter-axios": "^2.0.16",
    "@formkit/auto-animate": "^0.8.2",
-    "@intlify/unplugin-vue-i18n": "^6.0.6",
-    "@pinia/colada": "^0.14.2",
-    "@primeuix/themes": "^1.0.3",
-    "@splinetool/runtime": "^1.9.82",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@pinia/colada": "^0.17.1",
+    "@primeuix/themes": "^1.2.1",
+    "@splinetool/runtime": "^1.10.19",
    "@types/p5": "^1.7.6",
    "@types/sortablejs": "^1.15.8",
-    "@unhead/vue": "^2.0.5",
+    "@unhead/vue": "^2.0.11",
    "@vant/use": "^1.6.0",
-    "@vueuse/core": "^13.1.0",
-    "alova": "^3.2.10",
+    "@vueuse/core": "^13.4.0",
+    "alova": "^3.3.4",
    "ant-design-vue": "~4.2.6",
-    "axios": "^1.8.4",
-    "cesium": "^1.128.0",
+    "axios": "^1.10.0",
+    "cesium": "^1.131.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "consola": "^3.4.2",
    "dayjs": "^1.11.13",
-    "deep-freeze-es6": "^4.0.0",
+    "deep-freeze-es6": "^4.0.1",
    "jsencrypt": "^3.3.2",
-    "lucide-vue-next": "^0.487.0",
+    "lucide-vue-next": "^0.525.0",
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
-    "p5": "^1.11.3",
+    "p5": "^2.0.3",
    "page-stack-vue3": "^2.5.6",
-    "pinia": "^3.0.1",
-    "pinia-plugin-persistedstate": "^4.2.0",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
    "plotly.js-dist-min": "^3.0.1",
    "primeicons": "^7.0.0",
-    "primelocale": "^2.1.2",
-    "primevue": "^4.3.3",
-    "radash": "^12.1.0",
+    "primelocale": "^2.1.4",
+    "primevue": "^4.3.6",
+    "radash": "^12.1.1",
    "radix-vue": "^1.9.17",
-    "reka-ui": "^2.2.0",
+    "reka-ui": "^2.3.1",
    "satellite.js": "^6.0.0",
    "sortablejs": "^1.15.6",
-    "tailwind-merge": "^3.2.0",
-    "tdesign-icons-vue-next": "^0.3.5",
-    "three": "^0.175.0",
+    "tailwind-merge": "^3.3.1",
+    "tdesign-icons-vue-next": "^0.3.6",
+    "three": "^0.178.0",
    "ts-enum-util": "^4.1.0",
    "utils4u": "^4.2.3",
-    "vant": "^4.9.18",
-    "vue": "^3.5.13",
+    "vant": "^4.9.20",
+    "vue": "^3.5.17",
+    "vue-data-ui": "^2.12.7",
    "vue-draggable-plus": "^0.6.0",
-    "vue-i18n": "^11.1.3",
+    "vue-i18n": "^11.1.7",
    "vue-page-stack": "^3.2.0",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
-    "@eslint/compat": "^1.2.8",
-    "@faker-js/faker": "^9.6.0",
-    "@iconify-json/carbon": "^1.2.8",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.1",
+    "@faker-js/faker": "^9.9.0",
+    "@iconify-json/carbon": "^1.2.10",
    "@iconify-json/logos": "^1.2.4",
    "@iconify-json/mdi": "^1.2.3",
    "@iconify/utils": "^2.3.0",
-    "@playwright/test": "^1.51.1",
-    "@primevue/auto-import-resolver": "^4.3.3",
-    "@tsconfig/node22": "^22.0.1",
+    "@playwright/test": "^1.53.2",
+    "@primevue/auto-import-resolver": "^4.3.6",
+    "@tsconfig/node22": "^22.0.2",
    "@types/archiver": "^6.0.3",
    "@types/mockjs": "^1.0.10",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.16.0",
    "@types/nprogress": "^0.2.3",
    "@types/plotly.js-dist-min": "^2.3.4",
-    "@types/three": "^0.175.0",
+    "@types/three": "^0.178.0",
    "@vant/auto-import-resolver": "^1.3.0",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vitejs/plugin-vue-jsx": "^4.1.2",
-    "@vitest/eslint-plugin": "^1.1.40",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue-jsx": "^5.0.1",
+    "@vitest/eslint-plugin": "^1.3.4",
    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/eslint-config-typescript": "^14.5.1",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.7.0",
    "archiver": "^7.0.1",
    "depcheck": "^1.4.7",
-    "eruda": "^3.4.1",
-    "eslint": "^9.24.0",
-    "eslint-plugin-import-x": "^4.10.2",
-    "eslint-plugin-oxlint": "^0.16.6",
-    "eslint-plugin-perfectionist": "^4.11.0",
-    "eslint-plugin-unicorn": "^58.0.0",
-    "eslint-plugin-vue": "^10.0.0",
+    "eruda": "^3.4.3",
+    "eslint": "^9.30.1",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-oxlint": "^1.5.0",
+    "eslint-plugin-perfectionist": "^4.15.0",
+    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-vue": "^10.2.0",
    "husky": "^9.1.7",
    "less": "^4.3.0",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^16.1.2",
    "mockjs": "^1.1.0",
-    "npm-run-all2": "^7.0.2",
-    "oxlint": "^0.16.6",
-    "prettier": "3.5.3",
-    "sass-embedded": "^1.86.3",
-    "terser": "^5.39.0",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "^1.5.0",
+    "prettier": "3.6.2",
    "typescript": "~5.8.3",
-    "unocss": "66.1.0-beta.10",
-    "unocss-preset-animations": "^1.1.1",
+    "unocss": "66.3.2",
+    "unocss-preset-animations": "^1.2.1",
    "unocss-preset-chinese": "^0.3.3",
    "unocss-preset-shadcn": "^0.5.0",
-    "unplugin-auto-import": "^19.1.2",
+    "unplugin-auto-import": "^19.3.0",
    "unplugin-icons": "^22.1.0",
-    "unplugin-vue-components": "^28.5.0",
+    "unplugin-vue-components": "^28.8.0",
    "unplugin-vue-macros": "^2.14.5",
-    "unplugin-vue-markdown": "^28.3.1",
-    "unplugin-vue-router": "^0.12.0",
-    "vite": "^6.2.6",
-    "vite-plugin-checker": "^0.9.1",
+    "unplugin-vue-markdown": "^29.1.0",
+    "unplugin-vue-router": "^0.14.0",
+    "vite": "^7.0.0",
+    "vite-plugin-checker": "^0.9.3",
    "vite-plugin-fake-server": "^2.2.0",
-    "vite-plugin-purgecss-updated-v5": "^1.2.4",
+    "vite-plugin-image-tools": "^2.0.2",
+    "vite-plugin-purgecss-updated-v5": "^1.2.6",
    "vite-plugin-singlefile": "^2.2.0",
-    "vite-plugin-static-copy": "^2.3.1",
-    "vite-plugin-vue-devtools": "^7.7.2",
+    "vite-plugin-static-copy": "^3.1.0",
+    "vite-plugin-vue-devtools": "^7.7.7",
    "vite-plugin-vue-layouts": "^0.11.0",
    "vite-plugin-vue-meta-layouts": "^0.5.1",
-    "vite-plugin-webfont-dl": "^3.10.4",
-    "vue-component-type-helpers": "^2.2.8",
-    "vue-tsc": "^2.2.8"
+    "vite-plugin-webfont-dl": "^3.10.5",
+    "vue-component-type-helpers": "^3.0.0",
+    "vue-tsc": "^3.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/PinPuYi/CONST.ts
+++ b/src/components/PinPuYi/CONST.ts
@ -0,0 +1,58 @@
+export enum E_选项卡菜单 {
+  幅度单位列表 = '幅度单位列表',
+  幅度菜单列表 = '幅度菜单列表',
+  跨度菜单列表 = '跨度菜单列表',
+  频率单位列表 = '频率单位列表',
+  频率菜单列表 = '频率菜单列表',
+}
+
+export enum E_幅度菜单列表的项目 {
+  RefLevel = 'Ref Level',
+  // Attenuation = 'Attenuation', // 如果衰减也需要类似交互，则取消注释
+}
+
+export enum E_幅度单位 {
+  dBm = 'dBm',
+  mV = 'mV',
+  uA = 'µA', // 使用 uA 表示微安
+  uV = 'µV', // 使用 uV 表示微伏
+}
+
+export enum E_跨度菜单列表的项目 {
+  FullSpan = 'Full Span',
+  LastSpan = 'Last Span',
+  ZeroSpan = 'Zero Span',
+}
+
+/* 值是在屏幕上显示的值。 */
+export enum E_选项卡菜单Freq菜单列表的项目 {
+  CenterFreq = 'Center',
+  StartFreq = 'Start',
+  StopFreq = 'Stop',
+  // CFStep = 'CFStep',
+  // FreqOffset = 'FreqOffset',
+  // SingnalTrack = 'SingnalTrack',
+  // ScaleType = 'ScaleType',
+}
+
+export enum E_Freq单位 {
+  GHz = 'GHz',
+  Hz = 'Hz',
+  kHz = 'kHz',
+  MHz = 'MHz',
+}
+
+export enum E_数字键盘按键 {
+  Dot = '.',
+  Num0 = 0,
+  Num1 = 1,
+  Num2 = 2,
+  Num3 = 3,
+  Num4 = 4,
+  Num5 = 5,
+  Num6 = 6,
+  Num7 = 7,
+  Num8 = 8,
+  Num9 = 9,
+  PlusMinus = '+/-',
+}
--- a/src/components/PinPuYi/Helvetica.css
+++ b/src/components/PinPuYi/Helvetica.css
@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'Helvetica Custom';
+  font-style: normal;
+  font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
+  src: url('fonts/Helvetica-Light-05.eot');
+  src:
+    url('fonts/Helvetica-Light-05.eot?#iefix') format('embedded-opentype'),
+    url('fonts/Helvetica-Light-05.woff2') format('woff2'),
+    url('fonts/Helvetica-Light-05.woff') format('woff'),
+    url('fonts/Helvetica-Light-05.ttf') format('truetype'),
+    url('fonts/Helvetica-Light-05.svg#Helvetica') format('svg');
+  font-display: swap; /* 推荐 */
+}
--- a/src/components/PinPuYi/PinPuYi.vue
+++ b/src/components/PinPuYi/PinPuYi.vue
@ -0,0 +1,805 @@
+<!-- 频谱仪 -->
+<script setup lang="ts">
+import { $enum } from 'ts-enum-util';
+
+import {
+  E_Freq单位,
+  E_幅度单位,
+  E_幅度菜单列表的项目,
+  E_数字键盘按键,
+  E_跨度菜单列表的项目,
+  E_选项卡菜单,
+  E_选项卡菜单Freq菜单列表的项目,
+} from './CONST';
+import 设备照片 from './pin-pu-yi-bg.png';
+
+const state = reactive({
+  选项卡当前显示: E_选项卡菜单.频率菜单列表,
+  频谱仪状态: {
+    频率输入状态: {
+      选中的频率菜单列表的项目: null as E_选项卡菜单Freq菜单列表的项目 | null,
+      输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
+    },
+    幅度输入状态: {
+      选中的幅度菜单列表的项目: null as E_幅度菜单列表的项目 | null,
+      输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
+      refLevel: {
+        value: 0,
+        unit: E_幅度单位.dBm,
+      },
+      // attenuation: { value: 0, unit: E_幅度单位.dB }, // 如果需要衰减值
+    },
+    center: {
+      value: 0,
+      unit: E_Freq单位.Hz,
+    },
+    start: {
+      value: 0,
+      unit: E_Freq单位.Hz,
+    },
+    stop: {
+      value: 0,
+      unit: E_Freq单位.Hz,
+    },
+    span: {
+      currentSpan: {
+        start: 0,
+        stop: 0,
+        unit: E_Freq单位.Hz,
+      },
+      lastSpan: {
+        start: 0,
+        stop: 0,
+        unit: E_Freq单位.Hz,
+      },
+      fullSpan: {
+        start: 0,
+        stop: 3,
+        unit: E_Freq单位.GHz,
+      },
+      zeroSpan: false,
+    },
+  },
+});
+
+const 选项卡标题 = computed(() =>
+  $enum.mapValue(state.选项卡当前显示).with({
+    [E_选项卡菜单.频率菜单列表]: 'Freq/Channel',
+    [E_选项卡菜单.频率单位列表]: '',
+    [E_选项卡菜单.跨度菜单列表]: 'Span',
+    [E_选项卡菜单.幅度菜单列表]: 'Amplitude',
+    [E_选项卡菜单.幅度单位列表]: '',
+  }),
+);
+
+function 执行点击屏幕右边的按钮(按钮序号: number) {
+  console.group('🔘 点击屏幕右边的按钮', {
+    按钮序号,
+    选项卡当前显示: state.选项卡当前显示,
+  });
+  $enum.visitValue(state.选项卡当前显示).with({
+    [E_选项卡菜单.频率菜单列表]: () => {
+      switch (按钮序号) {
+        case 1: {
+          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.CenterFreq;
+          console.debug('设置 Freq 输入状态为 CenterFreq');
+          break;
+        }
+        case 2: {
+          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StartFreq;
+          console.debug('设置 Freq 输入状态为 StartFreq');
+          break;
+        }
+        case 3: {
+          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StopFreq;
+          console.debug('设置 Freq 输入状态为 StopFreq');
+          break;
+        }
+        default: {
+          console.debug('频率菜单列表 - 这个按键还没有实现');
+          break;
+        }
+      }
+    },
+    [E_选项卡菜单.频率单位列表]: () => {
+      let selectedUnit: E_Freq单位 | null = null;
+      switch (按钮序号) {
+        case 1: {
+          selectedUnit = E_Freq单位.GHz;
+          break;
+        }
+        case 2: {
+          selectedUnit = E_Freq单位.MHz;
+          break;
+        }
+        case 3: {
+          selectedUnit = E_Freq单位.kHz;
+          break;
+        }
+        case 4: {
+          selectedUnit = E_Freq单位.Hz;
+          break;
+        }
+        default: {
+          console.warn('无效的频率单位按钮序号:', 按钮序号);
+          console.groupEnd();
+          return;
+        }
+      }
+
+      const tempInputString = state.频谱仪状态.频率输入状态.输入的值临时输入字符串;
+      const selectedFreqItem = state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目;
+      // 必须有临时输入值和选中的 Freq 项目才能确认
+      if (!tempInputString || !selectedFreqItem) {
+        console.warn('频率输入未完成或未选择项目，无法确认单位。');
+        console.groupEnd();
+        return;
+      }
+
+      const inputValue = Number.parseFloat(tempInputString);
+      // 校验解析结果
+      if (Number.isNaN(inputValue)) {
+        console.warn('无法将临时输入解析为有效数字 (频率):', tempInputString);
+        console.groupEnd();
+        return;
+      }
+
+      console.debug('确认频率单位:', selectedUnit, '值为:', inputValue);
+      switch (selectedFreqItem) {
+        case E_选项卡菜单Freq菜单列表的项目.CenterFreq: {
+          state.频谱仪状态.center.value = inputValue;
+          state.频谱仪状态.center.unit = selectedUnit;
+          console.debug('更新 CenterFreq:', state.频谱仪状态.center);
+          break;
+        }
+        case E_选项卡菜单Freq菜单列表的项目.StartFreq: {
+          state.频谱仪状态.start.value = inputValue;
+          state.频谱仪状态.start.unit = selectedUnit;
+          console.debug('更新 StartFreq:', state.频谱仪状态.start);
+          break;
+        }
+        case E_选项卡菜单Freq菜单列表的项目.StopFreq: {
+          state.频谱仪状态.stop.value = inputValue;
+          state.频谱仪状态.stop.unit = selectedUnit;
+          console.debug('更新 StopFreq:', state.频谱仪状态.stop);
+          break;
+        }
+      }
+      state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = null;
+      state.频谱仪状态.频率输入状态.输入的值临时输入字符串 = null;
+      state.选项卡当前显示 = E_选项卡菜单.频率菜单列表;
+      console.debug('频率输入状态已重置, 切换回频率菜单列表');
+    },
+    [E_选项卡菜单.跨度菜单列表]: () => {
+      switch (按钮序号) {
+        case 1: {
+          // Full Span
+          state.频谱仪状态.span.lastSpan.start = state.频谱仪状态.start.value;
+          state.频谱仪状态.span.lastSpan.stop = state.频谱仪状态.stop.value;
+          state.频谱仪状态.span.lastSpan.unit = state.频谱仪状态.stop.unit;
+          state.频谱仪状态.start.value = state.频谱仪状态.span.fullSpan.start;
+          state.频谱仪状态.start.unit = state.频谱仪状态.span.fullSpan.unit;
+          state.频谱仪状态.stop.value = state.频谱仪状态.span.fullSpan.stop;
+          state.频谱仪状态.stop.unit = state.频谱仪状态.span.fullSpan.unit;
+          state.频谱仪状态.center.value = (state.频谱仪状态.start.value + state.频谱仪状态.stop.value) / 2;
+          state.频谱仪状态.center.unit = state.频谱仪状态.span.fullSpan.unit;
+          state.频谱仪状态.span.zeroSpan = false;
+          console.debug('设置为 Full Span');
+          break;
+        }
+        case 2: {
+          // Zero Span
+          state.频谱仪状态.span.lastSpan.start = state.频谱仪状态.start.value;
+          state.频谱仪状态.span.lastSpan.stop = state.频谱仪状态.stop.value;
+          state.频谱仪状态.span.lastSpan.unit = state.频谱仪状态.stop.unit;
+          state.频谱仪状态.start.value = state.频谱仪状态.center.value;
+          state.频谱仪状态.start.unit = state.频谱仪状态.center.unit;
+          state.频谱仪状态.stop.value = state.频谱仪状态.center.value;
+          state.频谱仪状态.stop.unit = state.频谱仪状态.center.unit;
+          state.频谱仪状态.span.zeroSpan = true;
+          console.debug('设置为 Zero Span');
+          break;
+        }
+        case 3: {
+          // Last Span
+          state.频谱仪状态.start.value = state.频谱仪状态.span.lastSpan.start;
+          state.频谱仪状态.start.unit = state.频谱仪状态.span.lastSpan.unit;
+          state.频谱仪状态.stop.value = state.频谱仪状态.span.lastSpan.stop;
+          state.频谱仪状态.stop.unit = state.频谱仪状态.span.lastSpan.unit;
+          state.频谱仪状态.center.value = (state.频谱仪状态.start.value + state.频谱仪状态.stop.value) / 2;
+          state.频谱仪状态.center.unit = state.频谱仪状态.span.lastSpan.unit;
+          state.频谱仪状态.span.zeroSpan = false;
+          console.debug('恢复到 Last Span');
+          break;
+        }
+        default: {
+          console.debug('跨度菜单列表 - 这个按键还没有实现');
+          break;
+        }
+      }
+    },
+    [E_选项卡菜单.幅度菜单列表]: () => {
+      switch (按钮序号) {
+        case 1: {
+          // Ref Level
+          state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 = E_幅度菜单列表的项目.RefLevel;
+          state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = null;
+          console.debug('设置 幅度输入状态为 RefLevel');
+          break;
+        }
+        case 2: {
+          // Attenuation
+          console.debug('点击了 幅度菜单列表 - Attenuation (功能待实现)');
+          break;
+        }
+        default: {
+          console.debug('幅度菜单列表 - 这个按键还没有实现');
+          break;
+        }
+      }
+    },
+    [E_选项卡菜单.幅度单位列表]: () => {
+      let selectedUnit: E_幅度单位 | null = null;
+      switch (按钮序号) {
+        case 1: {
+          selectedUnit = E_幅度单位.dBm;
+          break;
+        }
+        case 2: {
+          selectedUnit = E_幅度单位.mV;
+          break;
+        }
+        case 3: {
+          selectedUnit = E_幅度单位.uV;
+          break;
+        }
+        case 4: {
+          selectedUnit = E_幅度单位.uA;
+          break;
+        }
+        default: {
+          console.warn('无效的幅度单位按钮序号:', 按钮序号);
+          console.groupEnd();
+          return;
+        }
+      }
+
+      const tempInputString = state.频谱仪状态.幅度输入状态.输入的值临时输入字符串;
+      const selectedAmpItem = state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目;
+
+      if (!tempInputString || !selectedAmpItem) {
+        console.warn('幅度输入未完成或未选择项目，无法确认单位。');
+        console.groupEnd();
+        return;
+      }
+
+      const inputValue = Number.parseFloat(tempInputString);
+      if (Number.isNaN(inputValue)) {
+        console.warn('无法将临时输入解析为有效数字 (幅度):', tempInputString);
+        console.groupEnd();
+        return;
+      }
+
+      console.debug('确认幅度单位:', selectedUnit, '值为:', inputValue);
+      if (selectedAmpItem === E_幅度菜单列表的项目.RefLevel) {
+        state.频谱仪状态.幅度输入状态.refLevel.value = inputValue;
+        state.频谱仪状态.幅度输入状态.refLevel.unit = selectedUnit;
+        console.debug('更新 RefLevel:', state.频谱仪状态.幅度输入状态.refLevel);
+      }
+      state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 = null;
+      state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = null;
+      state.选项卡当前显示 = E_选项卡菜单.幅度菜单列表;
+      console.debug('幅度输入状态已重置, 切换回幅度菜单列表');
+    },
+  });
+  console.groupEnd();
+}
+
+function 执行点击数字按钮(按钮值: E_数字键盘按键) {
+  console.group('🔢 点击数字按钮', { 按钮值 });
+
+  const isFreqInputActive = !!state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目;
+  const isAmpInputActive = !!state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目;
+
+  if (!isFreqInputActive && !isAmpInputActive) {
+    console.warn('请先选择一个频率或幅度菜单项');
+    console.groupEnd();
+    return;
+  }
+
+  let 当前临时输入: string;
+  let 更新临时输入回调: (newVal: null | string) => void;
+  let 后续操作菜单: E_选项卡菜单;
+
+  if (isFreqInputActive) {
+    当前临时输入 = state.频谱仪状态.频率输入状态.输入的值临时输入字符串 ?? '';
+    更新临时输入回调 = (newVal) => {
+      state.频谱仪状态.频率输入状态.输入的值临时输入字符串 = newVal;
+    };
+    后续操作菜单 = E_选项卡菜单.频率单位列表;
+  } else {
+    // isAmpInputActive
+    当前临时输入 = state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 ?? '';
+    更新临时输入回调 = (newVal) => {
+      state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = newVal;
+    };
+    后续操作菜单 = E_选项卡菜单.幅度单位列表;
+  }
+
+  switch (按钮值) {
+    case E_数字键盘按键.Dot: {
+      // 只有在当前临时输入不包含小数点时才允许添加
+      if (当前临时输入.includes('.')) {
+        console.debug('已存在小数点，忽略本次输入');
+      } else {
+        // 如果当前为空，则为 '0.'，否则追加 '.'
+        更新临时输入回调(当前临时输入 ? `${当前临时输入}.` : '0.');
+        console.debug(
+          '输入小数点，临时字符串:',
+          isFreqInputActive
+            ? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
+            : state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
+        );
+      }
+      break;
+    }
+
+    case E_数字键盘按键.Num0:
+    case E_数字键盘按键.Num1:
+    case E_数字键盘按键.Num2:
+    case E_数字键盘按键.Num3:
+    case E_数字键盘按键.Num4:
+    case E_数字键盘按键.Num5:
+    case E_数字键盘按键.Num6:
+    case E_数字键盘按键.Num7:
+    case E_数字键盘按键.Num8:
+    case E_数字键盘按键.Num9: {
+      if (当前临时输入 === '0') {
+        更新临时输入回调(String(按钮值));
+      } else if (当前临时输入 === '-0') {
+        更新临时输入回调(`-${String(按钮值)}`);
+      } else {
+        更新临时输入回调(当前临时输入 + String(按钮值));
+      }
+      console.debug(
+        '输入数字，临时字符串:',
+        isFreqInputActive
+          ? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
+          : state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
+      );
+      break;
+    }
+    case E_数字键盘按键.PlusMinus: {
+      if (当前临时输入.startsWith('-')) {
+        更新临时输入回调(当前临时输入.slice(1));
+      } else if (当前临时输入 && 当前临时输入 !== '0' && 当前临时输入 !== '0.') {
+        更新临时输入回调(`-${当前临时输入}`);
+      } else if (当前临时输入 === '' || 当前临时输入 === '0' || 当前临时输入 === '0.') {
+        更新临时输入回调('-');
+      } else {
+        console.debug('无法切换正负号');
+      }
+      console.debug(
+        '切换正负号，临时字符串:',
+        isFreqInputActive
+          ? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
+          : state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
+      );
+      break;
+    }
+    default: {
+      console.warn('未知的数字键盘按键:', 按钮值);
+    }
+  }
+  state.选项卡当前显示 = 后续操作菜单;
+
+  console.groupEnd();
+}
+
+const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', {
+  eager: true,
+});
+const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png']!.default);
+watch(
+  () => state.频谱仪状态.center.value,
+  () => {
+    屏幕照片.value = img_modules['./imgs/屏幕_1.png']!.default;
+  },
+);
+watch(
+  () => state.频谱仪状态.start.value,
+  () => {
+    屏幕照片.value = img_modules['./imgs/屏幕_2.png']!.default;
+  },
+);
+watch(
+  () => state.频谱仪状态.stop.value,
+  () => {
+    屏幕照片.value = img_modules['./imgs/屏幕_3.png']!.default;
+  },
+);
+watchEffect(() => {
+  console.debug(`屏幕照片.value :>> `, 屏幕照片.value);
+});
+</script>
+
+<template>
+  <!-- <pre
+    v-if="$__DEV__"
+    class="fixed bottom-10 right-10 top-10 z-[9999] overflow-auto overflow-y-auto bg-white p-[10px] text-[12px] text-black"
+    >{{ { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state } }}</pre
+  > -->
+
+  <div class="wrp relative">
+    <img :src="设备照片" alt="频谱仪设备" />
+
+    <div
+      class="absolute left-[640px] top-[174px] flex w-[55px] flex-col gap-y-[4px] overflow-visible text-black"
+      data-box="屏幕右边的按钮"
+    >
+      <!-- 上下还有一个 ESC / RETURN -->
+      <ul class="flex h-[300px] flex-col justify-around gap-y-[4px] overflow-visible" data-box="屏幕右边按钮列表">
+        <template v-for="n in 7" :key="`按钮${n}`">
+          <li
+            class="lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-visible rounded-[2px] text-[12px]"
+            @click="执行点击屏幕右边的按钮(n)"
+          >
+            <button class="ppy-btn !h-full !w-full"></button>
+          </li>
+        </template>
+      </ul>
+    </div>
+
+    <div class="absolute left-[195px] top-[140px] h-[350px] w-[430px] bg-black" data-box="屏幕">
+      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute left-0 top-0 !h-[330px] !w-[340px]" />
+
+      <!--  -->
+      <!-- 屏幕左上角 Ref Level -->
+      <div class="absolute left-[5px] top-[20px] text-left text-[10px] text-white" data-box="屏幕左上角RefLevel">
+        <span>
+          Ref {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
+          {{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
+        </span>
+      </div>
+
+      <div class="absolute bottom-0 left-0 right-[85px] flex justify-between text-white" data-box="下面左Start 右Stop">
+        <div class="flex-1 text-left">
+          <span>Start </span>
+          <span>{{ state.频谱仪状态.start.value }}</span>
+          <span>{{ state.频谱仪状态.start.unit }}</span>
+        </div>
+        <div class="flex-1 text-right">
+          <span>Stop </span>
+          <span>{{ state.频谱仪状态.stop.value }}</span>
+          <span>{{ state.频谱仪状态.stop.unit }}</span>
+        </div>
+      </div>
+
+      <div
+        v-if="
+          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 ||
+          state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目
+        "
+        class="lh-[1.2] absolute left-[40px] top-[140px] flex flex-col gap-y-[0px] bg-gray-500/100 text-white"
+        data-box="正在输入的值"
+      >
+        <!-- 标题：显示当前选中的输入项 -->
+        <div v-if="state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目">
+          {{ state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 }}
+        </div>
+        <div v-else-if="state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目">
+          {{ state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 }}
+        </div>
+
+        <!-- 值：优先显示临时输入字符串，如果为空，则显示已确认的值 -->
+        <div>
+          <template
+            v-if="
+              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 &&
+              state.频谱仪状态.频率输入状态.输入的值临时输入字符串 !== null
+            "
+          >
+            {{ state.频谱仪状态.频率输入状态.输入的值临时输入字符串 }}
+          </template>
+          <template
+            v-else-if="
+              state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 &&
+              state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 !== null
+            "
+          >
+            {{ state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 }}
+          </template>
+          <!-- 已确认的频率值 -->
+          <template
+            v-else-if="
+              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.CenterFreq
+            "
+          >
+            {{ state.频谱仪状态.center.value }}
+            {{ state.频谱仪状态.center.unit }}
+          </template>
+          <template
+            v-else-if="
+              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StartFreq
+            "
+          >
+            {{ state.频谱仪状态.start.value }} {{ state.频谱仪状态.start.unit }}
+          </template>
+          <template
+            v-else-if="
+              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StopFreq
+            "
+          >
+            {{ state.频谱仪状态.stop.value }} {{ state.频谱仪状态.stop.unit }}
+          </template>
+          <!-- 已确认的幅度值 -->
+          <template
+            v-else-if="state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 === E_幅度菜单列表的项目.RefLevel"
+          >
+            {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
+            {{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
+          </template>
+          <template v-else>
+            0.000000000
+            <!-- 默认或回退显示 -->
+          </template>
+        </div>
+      </div>
+
+      <div
+        class="absolute bottom-[15px] right-0 top-0 flex w-[80px] flex-col gap-y-[4px] text-black"
+        data-box="屏幕右侧的选项卡"
+      >
+        <div class="menu-item lh-[30px] h-[30px] overflow-hidden bg-[#AFAFAF] text-center" data-box="菜单标题">
+          {{ 选项卡标题 }}
+        </div>
+
+        <ul
+          v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
+          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
+          data-box="频率菜单列表"
+        >
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>Center Freq</span>
+            {{ state.频谱仪状态.center.value }}
+            {{ state.频谱仪状态.center.unit }}
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>Start Freq</span>
+            {{ state.频谱仪状态.start.value }}
+            {{ state.频谱仪状态.start.unit }}
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>Stop Freq</span>
+            {{ state.频谱仪状态.stop.value }}
+            {{ state.频谱仪状态.stop.unit }}
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>#CF Step</span>
+            <span>0.0000 hz</span>
+            <span>X</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>#Freq Offset</span>
+            <span>0.0000 Hz</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>#Singnal Track</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>#Scale Type</span>
+          </li>
+        </ul>
+
+        <ul
+          v-if="state.选项卡当前显示 === E_选项卡菜单.频率单位列表"
+          class="flex flex-1 flex-col justify-around gap-y-[4px]"
+          data-box="FreqChannel单位列表"
+        >
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>GHz</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>MHz</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>KHz</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>Hz</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+        </ul>
+
+        <ul
+          v-if="state.选项卡当前显示 === E_选项卡菜单.跨度菜单列表"
+          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
+          data-box="跨度菜单列表"
+        >
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_跨度菜单列表的项目.FullSpan }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_跨度菜单列表的项目.ZeroSpan }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_跨度菜单列表的项目.LastSpan }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+        </ul>
+
+        <ul
+          v-if="state.选项卡当前显示 === E_选项卡菜单.幅度菜单列表"
+          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
+          data-box="幅度菜单列表"
+        >
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>Ref Level</span>
+            <span>
+              {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
+              {{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
+            </span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>#Attenuation</span>
+            <!-- <span>TODO</span> -->
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+        </ul>
+
+        <ul
+          v-if="state.选项卡当前显示 === E_选项卡菜单.幅度单位列表"
+          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
+          data-box="幅度单位列表"
+        >
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_幅度单位.dBm }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_幅度单位.mV }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_幅度单位.uV }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
+            <span>{{ E_幅度单位.uA }}</span>
+          </li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="ppy-btns absolute left-[768px] top-[120px] h-[415px] !overflow-visible" data-box="机器右边按键">
+      <!-- 左上角. 长的 -->
+      <div class="flex flex-col gap-y-[18px] !overflow-visible">
+        <button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.频率菜单列表">
+          FREQ<br />Channel
+        </button>
+        <button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.跨度菜单列表">
+          SPAN<br />X Scale
+        </button>
+        <button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.幅度菜单列表">
+          AMPLITUDE<br />Y Scale
+        </button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
+      </div>
+      <div class="mt-[20px] grid grid-cols-3 gap-[16.5px] !overflow-visible" data-box="数字键盘区域">
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num7)">7</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num8)">8</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num9)">9</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num4)">4</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num5)">5</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num6)">6</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num1)">1</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num2)">2</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num3)">3</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num0)">0</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Dot)">.</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)">+/-</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url('./Helvetica.css');
+
+.wrp {
+  font-family: 'Helvetica Custom';
+}
+
+/* .wrp * {
+  overflow: hidden;
+} */
+
+img[alt='频谱仪设备'] {
+  width: calc(2554px * 0.5);
+  max-width: fit-content;
+  height: calc(1626px * 0.5);
+  max-height: fit-content;
+}
+
+.ppy-btn {
+  display: flex; /* 使用 flex 居中文本 */
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 30px;
+  padding-left: 2px;
+  overflow: hidden;
+  font-size: 10px;
+  line-height: 1.2;
+  color: #333; /* 深灰色文字 */
+  text-align: left;
+  text-decoration: none;
+  background-color: #e0e0e0; /* 按钮浅灰色背景 */
+  border: 1px solid green;
+  border: 1px solid #b0b0b0; /* 添加边框 */
+  border-radius: 4px;
+  box-shadow:
+    1px 1px 2px rgb(0 0 0 / 20%),
+    /* 轻微外阴影 */ -1px -1px 2px rgb(255 255 255 / 80%); /* 轻微外高光 */
+
+  transition: all 0.1s ease-in-out; /* 平滑过渡效果 */
+
+  /* width: 100%; */
+
+  /* 宽度占满 grid 单元格 */
+
+  /* height: 100%; */
+
+  /* 高度占满 grid 单元格 */
+
+  /* font-size: 20px; */
+
+  /* 调整字体大小 */
+
+  /* font-weight: bold; */
+
+  /* 字体加粗 */
+
+  /* border-radius: 4px; */
+
+  /* 按钮圆角 */
+}
+
+.ppy-btn:active {
+  background-color: #d5d5d5;
+  border-color: #a0a0a0;
+  box-shadow:
+    inset 1px 1px 3px rgb(0 0 0 / 30%),
+    inset -1px -1px 3px rgb(255 255 255 / 60%);
+  transform: scale(0.98);
+}
+
+.menu-item {
+  /* @apply bg-gray-200/50 p-[2px]; */
+  font-size: 12px;
+
+  /* border: 1px solid white; */
+}
+
+[alt='频谱仪设备'] {
+  opacity: 1;
+  transition: opacity 0.3s;
+}
+
+/* li,
+.ppy-btns,
+[data-box='屏幕'],
+[data-box='菜单标题'] {
+  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
+} */
+</style>
--- a/src/components/PinPuYi/fonts/Helvetica-Light-05.eot
+++ b/src/components/PinPuYi/fonts/Helvetica-Light-05.eot
--- a/src/components/PinPuYi/fonts/Helvetica-Light-05.svg
+++ b/src/components/PinPuYi/fonts/Helvetica-Light-05.svg
--- a/src/components/PinPuYi/fonts/Helvetica-Light-05.ttf
+++ b/src/components/PinPuYi/fonts/Helvetica-Light-05.ttf
--- a/src/components/PinPuYi/fonts/Helvetica-Light-05.woff
+++ b/src/components/PinPuYi/fonts/Helvetica-Light-05.woff
--- a/src/components/PinPuYi/fonts/Helvetica-Light-05.woff2
+++ b/src/components/PinPuYi/fonts/Helvetica-Light-05.woff2
--- a/src/components/PinPuYi/imgs/屏幕_0.png
+++ b/src/components/PinPuYi/imgs/屏幕_0.png
--- a/src/components/PinPuYi/imgs/屏幕_1.png
+++ b/src/components/PinPuYi/imgs/屏幕_1.png
--- a/src/components/PinPuYi/imgs/屏幕_2.png
+++ b/src/components/PinPuYi/imgs/屏幕_2.png
--- a/src/components/PinPuYi/imgs/屏幕_3.png
+++ b/src/components/PinPuYi/imgs/屏幕_3.png
--- a/src/components/PinPuYi/pin-pu-yi-bg-clean.png
+++ b/src/components/PinPuYi/pin-pu-yi-bg-clean.png
--- a/src/components/PinPuYi/pin-pu-yi-bg.png
+++ b/src/components/PinPuYi/pin-pu-yi-bg.png
--- a/src/components/iframe-page-comps/Iframe-PlotlyJs-Comp.vue
+++ b/src/components/iframe-page-comps/Iframe-PlotlyJs-Comp.vue
@ -18,32 +18,32 @@ const readyPromise = new Promise<void>((resolve) => {
 });

 const 频谱瀑布图Layout = {
-  title: '频谱瀑布图',
+  title: { text: '频谱瀑布图' },
  xaxis: {
-    title: '频率 (Hz)',
+    title: { text: '频率 (Hz)' },
    // range: [0, 22_050],
    showgrid: false,
    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
  },
  yaxis: {
-    title: '时间步',
+    title: { text: '时间步' },
    showgrid: false,
    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
  },
  margin: { l: 60, r: 40, b: 40, t: 60 },
-};
+} satisfies Partial<import('plotly.js-dist-min').Layout>;

 const 频谱图Layout = {
-  title: '频谱图',
+  title: { text: '频谱图' },
  xaxis: {
-    title: '频率 (Hz)',
+    title: { text: '频率 (Hz)' },
    // range: [0, 22_050],
    showgrid: true,
    gridcolor: '#eee',
    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
  },
  yaxis: {
-    title: '幅度 (dB)',
+    title: { text: '幅度 (dB)' },
    showgrid: true, // 显示网格线
    gridcolor: '#eee',
    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,12 @@
 import './styles';
+
+import { LogLevels } from 'consola';
+
 import App from './App.vue';
 import { setupPlugins } from './plugins';

 const autoInstallModules = import.meta.glob('./plugins/*.ts', { eager: true });

 setupPlugins(createApp(App), autoInstallModules).mount('#app');
+
+consola.level = LogLevels.verbose;
--- a/src/pages/Page/MDPageImportMD.md
+++ b/src/pages/Page/MDPageImportMD.md
@ -0,0 +1,3 @@
+# 测试
+
+这个文件是被 import 的
--- a/src/pages/Page/MDPageImportMD.page.vue
+++ b/src/pages/Page/MDPageImportMD.page.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import MD from './MDPageImportMD.md';
+</script>
+
+<template>
+  <div>
+    <MD />
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/pages/Page/PinPuYi.page.vue
+++ b/src/pages/Page/PinPuYi.page.vue
@ -0,0 +1,13 @@
+<!--
+http://localhost:4730/Page/PinPuYi
+-->
+<script setup lang="ts">
+definePage({ meta: { title: '频谱仪', hidden: !$__DEV__ } });
+</script>
+
+<template>
+  <template v-if="true">
+    <PinPuYi />
+  </template>
+  <template v-else> 🤡 </template>
+</template>
--- a/src/pages/Page/vue-data-ui.page.vue
+++ b/src/pages/Page/vue-data-ui.page.vue
@ -0,0 +1,352 @@
+<script setup lang="ts">
+import { VueUiXy, type VueUiXyConfig, type VueUiXyDatasetItem } from 'vue-data-ui';
+import 'vue-data-ui/style.css'; // If you are using multiple components, place styles import in your main
+
+const config = computed<VueUiXyConfig>(() => {
+  return {
+    theme: undefined,
+    responsive: false,
+    customPalette: [],
+    useCssAnimation: true,
+    downsample: {
+      threshold: 500,
+    },
+    chart: {
+      fontFamily: 'inherit',
+      backgroundColor: '#FFFFFFff',
+      color: '#1A1A1Aff',
+      height: 600,
+      width: 1000,
+      zoom: {
+        show: true,
+        color: '#CCCCCCff',
+        highlightColor: '#4A4A4A',
+        fontSize: 14,
+        useResetSlot: false,
+        startIndex: null,
+        endIndex: null,
+        enableRangeHandles: true,
+        enableSelectionDrag: true,
+        minimap: {
+          show: true,
+          smooth: false,
+          selectedColor: '#1F77B4',
+          selectedColorOpacity: 0.2,
+          lineColor: '#1A1A1A',
+          selectionRadius: 2,
+          indicatorColor: '#1A1A1A',
+          verticalHandles: false,
+        },
+      },
+      padding: {
+        top: 36,
+        right: 24,
+        bottom: 48,
+        left: 48,
+      },
+      highlighter: {
+        color: '#1A1A1Aff',
+        opacity: 5,
+        useLine: false,
+        lineDasharray: 2,
+        lineWidth: 1,
+      },
+      highlightArea: {
+        show: false,
+        from: 0,
+        to: 0,
+        color: '#CCCCCCff',
+        opacity: 20,
+        caption: {
+          text: 'Caption',
+          fontSize: 20,
+          color: '#1A1A1Aff',
+          bold: false,
+          offsetY: 0,
+          width: 'auto',
+          padding: 3,
+          textAlign: 'center',
+        },
+      },
+      timeTag: {
+        show: false,
+        backgroundColor: '#e1e5e8ff',
+        color: '#1A1A1Aff',
+        fontSize: 12,
+        circleMarker: {
+          radius: 3,
+          color: '#1A1A1Aff',
+        },
+      },
+      grid: {
+        stroke: '#e1e5e8ff',
+        showVerticalLines: false,
+        showHorizontalLines: false,
+        position: 'middle',
+        frame: {
+          show: false,
+          stroke: '#E1E5E8ff',
+          strokeWidth: 2,
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeDasharray: 0,
+        },
+        labels: {
+          show: true,
+          color: '#1A1A1Aff',
+          fontSize: 16,
+          axis: {
+            yLabel: '',
+            yLabelOffsetX: 0,
+            xLabel: '',
+            xLabelOffsetY: 14,
+            fontSize: 12,
+          },
+          zeroLine: {
+            show: true,
+          },
+          xAxis: {
+            showBaseline: true,
+          },
+          yAxis: {
+            showBaseline: true,
+            commonScaleSteps: 10,
+            useIndividualScale: false,
+            stacked: false,
+            gap: 12,
+            labelWidth: 40,
+            formatter: null,
+            scaleMin: null,
+            scaleMax: null,
+            groupColor: '#1A1A1A',
+            scaleLabelOffsetX: 0,
+            scaleValueOffsetX: 0,
+          },
+          xAxisLabels: {
+            color: '#1A1A1Aff',
+            show: true,
+            values: [],
+            fontSize: 18,
+            showOnlyFirstAndLast: false,
+            showOnlyAtModulo: false,
+            modulo: 12,
+            yOffset: 8,
+            rotation: 0,
+          },
+        },
+      },
+      comments: {
+        show: true,
+        showInTooltip: true,
+        width: 200,
+        offsetX: 0,
+        offsetY: 0,
+      },
+      labels: {
+        fontSize: 16,
+        prefix: '',
+        suffix: '',
+      },
+      legend: {
+        color: '#1A1A1Aff',
+        show: true,
+        fontSize: 16,
+      },
+      title: {
+        text: 'Title',
+        color: '#1A1A1Aff',
+        fontSize: 20,
+        bold: true,
+        textAlign: 'center',
+        paddingLeft: 0,
+        paddingRight: 0,
+        subtitle: {
+          color: '#CCCCCCff',
+          text: '',
+          fontSize: 16,
+          bold: false,
+        },
+        show: true,
+      },
+      tooltip: {
+        show: true,
+        color: '#1A1A1Aff',
+        backgroundColor: '#FFFFFFff',
+        fontSize: 14,
+        customFormat: null,
+        borderRadius: 4,
+        borderColor: '#e1e5e8',
+        borderWidth: 1,
+        backgroundOpacity: 30,
+        position: 'center',
+        offsetY: 24,
+        showTimeLabel: true,
+        showValue: true,
+        showPercentage: false,
+        roundingValue: 0,
+        roundingPercentage: 0,
+      },
+      userOptions: {
+        show: true,
+        showOnChartHover: false,
+        keepStateOnChartLeave: true,
+        position: 'right',
+        buttons: {
+          tooltip: true,
+          pdf: true,
+          csv: true,
+          img: true,
+          table: true,
+          labels: true,
+          fullscreen: true,
+          sort: false,
+          stack: true,
+          animation: false,
+          annotator: true,
+        },
+        buttonTitles: {
+          open: 'Open options',
+          close: 'Close options',
+          tooltip: 'Toggle tooltip',
+          pdf: 'Download PDF',
+          csv: 'Download CSV',
+          img: 'Download PNG',
+          table: 'Toggle table',
+          labels: 'Toggle labels',
+          fullscreen: 'Toggle fullscreen',
+          stack: 'Toggle stack mode',
+          annotator: 'Toggle annotator',
+        },
+        print: {
+          allowTaint: false,
+          backgroundColor: '#FFFFFFff',
+          useCORS: false,
+          onclone: null,
+          scale: 2,
+          logging: false,
+        },
+      },
+    },
+    bar: {
+      borderRadius: 2,
+      useGradient: true,
+      periodGap: 0.1,
+      border: {
+        useSerieColor: false,
+        strokeWidth: 1,
+        stroke: '#FFFFFFff',
+      },
+      labels: {
+        show: true,
+        offsetY: -8,
+        rounding: 0,
+        color: '#1A1A1Aff',
+        formatter: null,
+      },
+      serieName: {
+        show: false,
+        offsetY: -6,
+        useAbbreviation: true,
+        abbreviationSize: 3,
+        useSerieColor: true,
+        color: '#1A1A1Aff',
+        bold: false,
+      },
+    },
+    line: {
+      radius: 6,
+      useGradient: false,
+      strokeWidth: 2,
+      cutNullValues: false,
+      dot: {
+        hideAboveMaxSerieLength: 62,
+        useSerieColor: false,
+        fill: '#FFFFFF',
+        strokeWidth: 2,
+      },
+      labels: {
+        show: true,
+        offsetY: -16,
+        rounding: 0,
+        color: '#1A1A1Aff',
+        formatter: null,
+      },
+      area: {
+        useGradient: true,
+        opacity: 20,
+      },
+      tag: {
+        followValue: true,
+        formatter: null,
+        fontSize: 14,
+      },
+    },
+    plot: {
+      radius: 6,
+      useGradient: true,
+      dot: {
+        useSerieColor: true,
+        fill: '#FFFFFF',
+        strokeWidth: 0.5,
+      },
+      labels: {
+        show: true,
+        offsetY: -8,
+        rounding: 0,
+        color: '#1A1A1Aff',
+        formatter: null,
+      },
+      tag: {
+        followValue: true,
+        formatter: null,
+        fontSize: 14,
+      },
+    },
+    table: {
+      responsiveBreakpoint: 400,
+      rounding: 0,
+      sparkline: true,
+      showSum: true,
+      columnNames: {
+        period: 'Period',
+        total: 'Total',
+      },
+      th: {
+        backgroundColor: '#FAFAFAff',
+        color: '#1A1A1Aff',
+        outline: '',
+      },
+      td: {
+        backgroundColor: '#FAFAFAff',
+        color: '#1A1A1Aff',
+        outline: '',
+      },
+    },
+    showTable: false,
+  };
+});
+
+const dataset = computed<VueUiXyDatasetItem[]>(() => {
+  return [
+    {
+      name: 'Serie name',
+      series: [1, 9, 7, 2, 12, 16, 17, 30, 16, 23],
+      color: '#1f77b4',
+      type: 'line',
+      shape: 'circle',
+      useArea: false,
+      useProgression: false,
+      dataLabels: true,
+      smooth: true,
+      dashed: false,
+      useTag: 'none',
+    },
+  ];
+});
+</script>
+<template>
+  <!-- Using a wrapper is optional -->
+  <div :style="{ width: '600px' }">
+    <VueUiXy :config="config" :dataset="dataset" />
+  </div>
+</template>
--- a/src/pages/UI-components/infinite-loading/index.page.vue
+++ b/src/pages/UI-components/infinite-loading/index.page.vue
@ -28,7 +28,7 @@ defineOptions({
  },
 });
 const refresh = () => {
-  state.list.splice(0, state.list.length);
+  state.list.splice(0);
  state.page = 0;
  state.complete = false;
  loadMore();
--- a/src/plugins/router.ts
+++ b/src/plugins/router.ts
@ -1,7 +1,7 @@
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import { setupLayouts } from 'virtual:meta-layouts';
 // import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
-import { createRouter, createWebHistory } from 'vue-router/auto';
+import { createRouter, createWebHistory } from 'vue-router';
 import { handleHotUpdate, routes } from 'vue-router/auto-routes';

 const setupLayoutsResult = setupLayouts(routes);
--- a/src/types/global.ts
+++ b/src/types/global.ts
@ -0,0 +1,11 @@
+declare global {
+  const $__DEV__: boolean;
+}
+
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    $__DEV__: boolean;
+  }
+}
+
+export {};
--- a/src/types/shims/unocss.ts
+++ b/src/types/shims/unocss.ts
--- a/src/types/shims/global.d.ts
+++ b/src/types/shims/global.d.ts
@ -1,12 +1,4 @@
-declare global {
-  const $__DEV__: boolean;
-}
-
-declare module 'vue' {
-  export interface ComponentCustomProperties {
-    $__DEV__: boolean;
-  }
-
+declare module '*.vue' {
  import type { ComponentOptions } from 'vue';

  const Component: ComponentOptions;
@ -19,5 +11,3 @@ declare module '*.md' {
  const Component: ComponentOptions;
  export default Component;
 }
-
-export {};
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@ -34,9 +34,12 @@ declare module 'vue-router/auto-routes' {
    'PageIframePageSpectrogram': RouteRecordInfo<'PageIframePageSpectrogram', '/Page/iframe-page/Spectrogram', Record<never, never>, Record<never, never>>,
    'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
    'PageMDPage': RouteRecordInfo<'PageMDPage', '/Page/MDPage', Record<never, never>, Record<never, never>>,
+    'PageMDPageImportMD': RouteRecordInfo<'PageMDPageImportMD', '/Page/MDPageImportMD', Record<never, never>, Record<never, never>>,
    'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
+    'PagePinPuYi': RouteRecordInfo<'PagePinPuYi', '/Page/PinPuYi', Record<never, never>, Record<never, never>>,
    'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
    'PageViteAssets': RouteRecordInfo<'PageViteAssets', '/Page/vite-assets', Record<never, never>, Record<never, never>>,
+    'PageVueDataUi': RouteRecordInfo<'PageVueDataUi', '/Page/vue-data-ui', Record<never, never>, Record<never, never>>,
    'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
    'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
    'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,
--- a/vite.config.plugins.ts
+++ b/vite.config.plugins.ts
@ -25,6 +25,7 @@ import { createUtils4uAutoImports } from 'utils4u/auto-imports';
 import { type PluginOption } from 'vite';
 import { checker } from 'vite-plugin-checker';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
+import VitePluginImageTools from 'vite-plugin-image-tools';
 import pluginPurgeCss from 'vite-plugin-purgecss-updated-v5';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
@ -190,6 +191,15 @@ export function Plugins() {
        { dest: cesiumBaseUrl, src: `${cesiumSource}/Widgets` },
      ],
    }),
+
+    VitePluginImageTools({
+      quality: 80,
+      enableWebp: true,
+      enableDev: false,
+      enableDevWebp: false,
+      // 排除字体 SVG 文件和可能有问题的 SVG 文件
+      excludes: /fonts\/.*\.svg$|Helvetica.*\.svg$/,
+    }),
  );

  // 检查是否在VS Code终端中运行
--- a/vite.config.ts
+++ b/vite.config.ts
@ -36,6 +36,9 @@ export default defineConfig(({ command, mode }) => {
        'satellite.js',
        'ts-enum-util',
        'unplugin-vue-router',
+        'unplugin-vue-router/runtime',
+        'unplugin-vue-router/data-loaders/basic',
+        'unplugin-vue-router/data-loaders/pinia-colada',
      ],
      exclude: ['quill', 'chart.js/auto'],
    },
@ -53,7 +56,7 @@ export default defineConfig(({ command, mode }) => {
        // https://cn.rollupjs.org/configuration-options/#output-assetfilenames
        // output: env.VITE_SPLIT_CHUNKS === 'true' ? (await import('utils4u/rollup')).createSplitChunkOutput() : undefined,
        output: {
-          minifyInternalExports: false,
+          // minifyInternalExports: false,
          // manualChunks: {
          //   'vendor/utils4u': ['utils4u', 'utils4u/vue-use', 'utils4u/primevue'],
          //   'vendor/vue': ['vue'],
@ -67,6 +70,14 @@ export default defineConfig(({ command, mode }) => {
          manualChunks: {
            'vendor/Cesium': ['cesium'],
          },
+          // advancedChunks: {
+          //   groups: [
+          //     {
+          //       name: 'vendor/cesium',
+          //       test: 'cesium',
+          //     },
+          //   ],
+          // },
        },
      },
      sourcemap: mode !== 'production' || env.VITE_SOURCE_MAP === 'true',