byvm815/hanzi-chai.github.io

汉字自动拆分系统网页版

汉字自动拆分系统网页版

本项目是汉字自动拆分系统的网页版，采用 React, React Router 以及 Ant Design 实现，为用户提供了一个方便的图形界面，使方案设计更加便捷。

使用

网址

本项目部署的主要位置为 https://chaifen.app，托管在 Cloudflare Pages 上，但是考虑到网络环境的不稳定，提供以下额外部署方案：

1. GitHub Pages 版本：https://hanzi-chai.github.io
2. Vercel 版本：https://hanzi-chai.vercel.app
3. Cloudflare Pages 原始域名：https://chai.pages.dev

以上地址均可使用。不过，由于本项目采用浏览器的 localStorage 来存储数据，您保存的方案并不会在本地同步。

基本操作

文件管理

首次打开网站时，您将看到右侧的一个 Logo 和左侧的空文件列表。点击「新建」将在文件列表中添加一个新文件。点击任一文件右侧的「编辑」即可进入编辑器界面，点击「删除」则将移除该文件。每个文件中包含一个您所定义的汉字输入方案，不同方案之间数据是相互独立的。

编辑器界面进一步分为五个不同的页面：

基本

可以输入方案的名称、作者、版本号、备注等信息。名称和备注会出现在文件管理页面的列表中。

数据（待完善）

规则（待完善）

字根

您可以在左侧的面板上选中一个部件，然后点击「添加」将其添加为一个字根；也可以点击「切片」选取其中的部分笔画成为一个字根。

在右侧的字根列表中可以选中一个字根，点击下方的「删除」按钮来删除。

拆分

点击「计算」按当前方案拆分汉字，结果以列表的方式呈现在页面上，可以用笔画来过滤。可以以 JSON 格式下载拆分结果。

---

在任一编辑器界面，您都可以导入一个方案文件覆盖当前方案，也可以导出当前方案到一个文件。

开发

仓库克隆到本地后，首先运行 npm i 安装依赖，然后运行 npm run data 安装自动拆分数据库。本项目使用 Vite 作为打包工具。

• npm run dev 在本地运行开发服务器，可以访问 http://localhost:5173 来查看；
• npm run build 将项目打包为可发布的静态文件；
• npm run format 使用 Prettier 格式化代码（无需手动运行，在每次提交代码前自动运行）；