Rime 主题工坊

一个在浏览器里制作 Rime 输入法主题的可视化工具，支持小狼毫（Weasel / Windows）和鼠须管（Squirrel / macOS）。

功能

• 🎨 实时预览：像素级仿真候选窗，改动即时可见，可切换小狼毫 / 鼠须管、浅色 / 深色
• 🔍 参数联动：悬停参数即在预览中高亮对应区域；点击预览区域可反向定位到参数
• 🌗 明暗模式：同时编辑浅色与深色配色，导出后跟随系统切换
• 🧰 预设起点：内置青瓷、胭脂、水墨、青花、Catppuccin、Gruvbox、Win11、Nord 等 10 套预设
• 🔄 自动转换：界面按正常颜色选取，导出时自动转为 Rime 的 ABGR（0xAABBGGRR）格式；导入支持 abgr / argb / rgba 三种 color_format
• 📤 一键导出：生成带中文注释的 weasel.custom.yaml / squirrel.custom.yaml，可复制或下载

使用

1. 从右侧选一个预设主题，或点击「新建主题」从中性配色开始
2. 在左侧「配色 / 布局 / 字体」面板中调整参数，中央预览实时更新
3. 点击右上角「导出主题」，下载对应平台的 YAML 文件
4. 将文件放入 Rime 用户目录，然后重新部署：
   • 小狼毫：%APPDATA%\Rime
   • 鼠须管：~/Library/Rime

已有主题也可以通过「导入 YAML」载入后继续修改。

开发

技术栈：Vite + React 19 + TypeScript + Tailwind CSS 4 + Radix UI + zustand，代码检查用 Biome。

bun install      # 安装依赖（pnpm 亦可）
bun run dev      # 启动开发服务器
bun run build    # 类型检查 + 生产构建
bun run check    # Biome 格式化与 lint

核心代码结构：

src/
├── lib/
│   ├── color.ts             # ABGR/ARGB/RGBA 与 CSS 颜色互转
│   ├── params.ts            # 参数定义 + 预览区域映射
│   ├── presets.ts           # 内置预设主题
│   ├── store.ts             # zustand 全局状态
│   └── export.ts            # YAML 生成与解析
└── components/
    ├── Region.tsx           # 参数 ↔ 预览联动高亮机制
    ├── WeaselPreview.tsx    # 小狼毫候选窗仿真
    ├── SquirrelPreview.tsx  # 鼠须管候选窗仿真
    └── ...

部署

可 fork 仓库后在 SaaS 平台部署。推送 main 分支后，GitHub Actions 会自动构建并发布到 GitHub Pages（见 .github/workflows/deploy.yml）。

License

GPL