需求文档

Electron + React 桌面工具,导入含参数约定的 HTML 文件后自动识别可调参数,通过滑块/取色器/开关实时调节并预览,导出参数固定的独立 HTML。

前端微调需求文档-上

前端微调需求文档-下

对话设计

四阶段交互闭环:导入 HTML → 实时调参(Range/Color/Toggle/Text 控件 + postMessage 增量预览)→ 预设管理(localStorage 隔离)→ 导出(平衡括号算法移除调参代码)。

前端微调对话设计-上

前端微调对话设计-下

流程图

用户导入 → parser.ts 解析 tune-config / CSS 变量 → 参数面板渲染 → 双路径预览(postMessage 增量 / srcdoc 全量)→ 导出器移除调参代码。

前端微调流程图-上

前端微调流程图-下

架构图

Electron Shell(主进程 IPC + 预加载桥接)→ React Renderer(左侧参数面板 + 右侧 iframe 预览)→ 核心模块(parser / preview / exporter / presets / history)。

前端微调架构图-上

前端微调架构图-下

README

技术栈:Electron 28 + React 18 + TypeScript + Vite + Tailwind CSS + electron-builder

项目地址:GitHub

前端微调README-上

前端微调README-下