探字星球

Appearance

全局组件 (Components) ​

5个全局组件，TypeScript + Vue 3 | 文件位于 web/src/components/

架构概览 ​

components/
├── AppNavBar.vue              ← 导航栏（全局注册）
├── EtymologyViewer.vue        ← 字源查看器
├── StrokeAnimationCanvas.vue  ← 笔顺动画画布
├── WritingPracticeCanvas.vue  ← 书写练习画布
└── FooterCredit.vue           ← 页脚版权信息

AppNavBar.vue — 导航栏 ​

文件: web/src/components/AppNavBar.vue

职责 ​

  • 全局导航栏，在 main.ts 中全局注册
  • 基于 TDesign t-navbar 封装
  • 支持 :placeholder 属性控制占位符

使用方式 ​

vue
<AppNavBar title="页面标题" :placeholder="false" />

EtymologyViewer.vue — 字源查看器 ​

文件: web/src/components/EtymologyViewer.vue

职责 ​

  • 展示汉字字源演变（甲骨文 → 金文 → 篆书 → 隶书 → 楷书）
  • 通过 resource-service.ts 加载字源 SVG
  • 支持多阶段切换
  • 查看字源时自动触发 userStore.recordEtymologyViewed() 记录

StrokeAnimationCanvas.vue — 笔顺动画画布 ​

文件: web/src/components/StrokeAnimationCanvas.vue

职责 ​

  • 基于 HanziWriter 的笔顺演示动画
  • 支持自动播放/暂停/调速
  • 笔画颜色根据模式动态切换：描红模式黑色 #1f2937，笔顺演示模式蓝色 #3b82f6

WritingPracticeCanvas.vue — 书写练习画布 ​

文件: web/src/components/WritingPracticeCanvas.vue

职责 ​

  • 基于 HanziWriter 的手写描红练习
  • 笔画匹配检测
  • 书写评分（通过 score-calculator.ts）
  • 支持撤销/重做/清除

FooterCredit.vue — 页脚版权 ​

文件: web/src/components/FooterCredit.vue

职责 ​

  • 页脚版权信息展示
  • 可通过设置中的 showFooterCredit 选项控制显示/隐藏

组件注册 ​

  • 全局注册: AppNavBar（在 main.ts 中 app.component("AppNavBar", AppNavBar)）
  • 按需引入: 其他组件在页面中按需 import