asai-vue-pinyin — 汉字拼音标注组件

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-pinyin | src/index.ts | AsaiVuePinyin → imComp（含 AsaiPinYin） | Feature |

概述

asai-vue-pinyin 基于 pinyin-pro 为中文文本自动添加上标拼音，适用于阅读辅助与 book 模块拼音标注。

集成方式

// monorepo — webclient/src/App.vue（首屏同步）
import AsaiVuePinyin from './plugs/asai-vue-pinyin/src/index';
// npm
// import { imComp } from '@estun/asai-vue-pinyin';

useProvide({ plugs: { AsaiVuePinyin } });
const AsaiPinYin = ujt.$fn.AsaiVuePinyin.AsaiPinYin;

独立性约束

• 禁止 cross-import 其它 plugs/*（含 asai-vue-book）。
• 禁止 import 插件目录外路径；buildCompMap 定义于插件内 src/useCompLoader.ts。
• book 通过 props 或 $fn.AsaiVuePinyin 运行时传入拼音组件，不在 book 包内 import pinyin 源码。

主要 API / 导出

| 导出 | 说明 | |------|------| | imComp.AsaiPinYin | 拼音标注 Vue 组件 | | Props | content（必填）, opt.showTone（'symbol'\|'none'\|'num'） |

性能说明

• 首屏同步注册；组件经 buildCompMap 异步加载。
• @pinyin-pro/data/complete 词库在模块加载时进入内存；长文逐字 pinyin() 有 CPU 开销，建议对固定内容缓存 computed 结果。
• 整行批量 pinyin(line, { type: 'array' }) 可优化热点路径。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "dependencies": {
    "pinyin-pro": "^3.0.0",
    "@pinyin-pro/data": "^1.0.0"
  }
}

使用说明

<AsaiPinYin :ujt="ujt" :content="text" :opt="{ showTone: 'symbol' }" />

showTone

| 值 | 示例 | |----|------| | symbol | nǐ hǎo | | none | ni hao | | num | ni3 hao3 |

渲染效果

  nǐ  hǎo
  你   好

非 [一-龥] 字符原样显示，保留换行。

文件结构

asai-vue-pinyin/
├── src/index.ts
├── src/useCompLoader.ts   # 插件内 glob → async 组件
└── src/components/AsaiPinYin.vue

与 book 协作

<AsaiBook :AsPinYin="ujt.$fn.AsaiVuePinyin.AsaiPinYin" :opt="{ pinyin: true }" />

勿在 book 插件内 import '../asai-vue-pinyin/...'。