在浏览器里做一个可复用的拼音输入法组件：pinyin-ime 项目介绍
很多 Web 场景里，系统输入法并不总是可用：
- 全屏游戏/应用内嵌 WebView
- 远程桌面、云端工作台
- 某些受限浏览器环境
这就是我做 pinyin-ime 的原因：在浏览器内部提供“拼音 -> 汉字”的输入能力，并且做成可复用组件，开箱可接入 React、Vue 和原生 HTML/JS。
项目地址：https://github.com/catcherinsky/pinyin-ime
npm地址：https://www.npmjs.com/package/pinyin-ime
演示地址：https://catcherinsky.github.io/pinyinime/
这个项目解决什么问题？
pinyin-ime 提供一个web component自定义元素：<pinyin-ime-editor>。
它的目标不是替代系统输入法，而是补齐“系统输入法不可用或体验不稳定”时的输入能力。
核心体验是：
- 在输入框输入拼音（a-z）
- 组件展示候选词
- 通过空格/数字键等完成选词上屏
适用于输入框和文本域两种宿主形态（editor-type="input" | "textarea"）。
为什么选 Web Component 作为统一入口？
我希望它在不同技术栈里都能低成本使用，所以统一成了 Web Component + TypeScript 类型导出 的形式：
- React：监听
change，做受控同步 - Vue 3：配置
isCustomElement后直接用 - 原生页面：
document.createElement("pinyin-ime-editor")即可
这样做的好处是：
同一套内核、同一套行为，在多框架项目里一致复用，不用分别维护 React/Vue 版本组件。
设计上的几个关键点
1) 词典加载支持“本地动态 import”和“远程注入”
组件既支持默认本地词典，也支持你通过 getDictionary 注入远程词典。
这让部署策略更灵活：
- 想要开箱即用：走包内词典
- 想要更小首包/可热更新词典：走远程加载
2) 候选分页与快捷键
内置候选分页，支持常见键位：
- 空格选首候选
- 数字键选第 n 候选
=/.下一页，-/,上一页Enter上屏拼音串，Esc清空缓冲
3) 可定制样式但不泄露实现细节
组件运行在 Shadow DOM 内，同时通过两种方式开放定制：
- CSS 变量（主题色、边框、光标等）
::part()（候选框、候选行、footer 等）
既保证封装性，也能满足业务主题适配。
