|
|
eb12248a62
|
feat: 主题切换性能优化 — View Transitions API + 0.15s 统一过渡 + 设置页增强
【问题】
桌面端（Electron）切换主题时颜色变化速度不一致、明显卡顿。
根因分析（4 轮迭代）：
1. 过渡时长不统一（body 0.3s / 组件 0.15s）→ 统一到 0.2s
2. antd CSS-in-JS 标签替换导致瞬间变色 → 尝试 cssVar（无效，仍走标签替换）
3. applyHtmlTheme 在 updater 回调中执行，与 antd CSS 变更不同帧 → 移入 useLayoutEffect
4. html * 全局过渡在 Electron 中为数千 DOM 节点同步插值 → 合成器掉帧
终极方案：View Transitions API（GPU 合成器 1 次 cross-fade 替代 N 个 CSS 过渡）
+ 精准 CSS 过渡覆盖 ~80 个 antd 容器类（回退方案）
【修改】
ThemeProvider.tsx — 核心重构
- applyHtmlTheme 从 setIsDark updater → useLayoutEffect([isDark])
确保自定义 CSS 变量与 antd CSS-in-JS 在同一次 React 提交中生效
- View Transitions API：document.startViewTransition + flushSync
GPU 合成器截取旧/新两帧做单次 cross-fade，消除多元素插值卡顿
- 浏览器不支持时自动回退到 CSS transition 方案
globals.css — 过渡策略
- body: 0.3s ease → 0.15s linear
- View Transitions 动画：::view-transition-old/new(root) 0.15s linear
- ~80 个 antd 容器类精准过渡（Layout/Card/Modal/Table/Input/
Select/Picker/Menu/Tabs/Tag/Alert/Empty/Result/Skeleton 等）
按功能分组：布局 → 表格 → 表单 → 导航 → 反馈
不覆盖交互组件自有 transition（Button/Switch/Slider 等）
linear 替代 ease — 匀速插值，桌面应用更利落
Layout.tsx / HomeContent.tsx / LeftPanel.tsx / ModelSelector.tsx
- 过渡参数对齐：全部 0.2s → 0.15s linear
SettingsPage.tsx — 用户体验
- Modal 取消 keyboard={false}，Esc 键可关闭
- macOS：关闭按钮移至标题左侧（遵循 macOS HIG）
- afterClose 中 blur 当前焦点元素，防止聚焦跳到导航栏
【文档】
CHANGELOG.md — 新增 0.0.15 版本记录
CLAUDE.md — 新增主题系统架构章节（双轨颜色体系 / 时序 / 过渡策略）
|
2026-06-09 11:02:40 +08:00 |
|
|
|
1da95eaef3
|
feat: 实现业务首页（三栏布局 + 轮播图）
## 首页整体架构
- 新增 src/pages/home/ — 完整首页模块（10 个组件）
- HomePage / HomeContent：三栏弹性布局，拖动分隔条调整列宽
- BannerCarousel：顶部轮播图（antd Carousel，2280×90 长条图片适配）
- LeftPanel：模型选择器(Menu 分组) + 任务记录(Table 分页)，纵向拖拽调整比例
- CenterPanel / ModelInputForm：动态表单，根据模型 param_schema/ui_config 渲染控件
- RightPanel / OutputPreview：任务输出预览（Image/Video）
- 新增 Layout 组件：h-screen flex 布局，首页 Banner + NavBar + Outlet
## 数据层（数据与视图分离）
- 新增 src/services/modules/ — API 模块（banner/models/task/auth）
- TaskAPI 静态方法，TaskInfoItemResponseBody 判别联合类型
- ModelAPI / BannerAPI，const 断言路由常量
- 新增 src/hooks/use-async.ts — 通用异步 Hook
- useAsyncData：竞态处理、条件请求(enabled)、自动错误日志
- useAsyncMutation：数据变更，onSuccess/onError
- getErrorMessage()：RequestErrorType → 可读错误信息
- 新增 src/hooks/use-api.ts — 业务 Hook
- useBannerList / useModelList / useTaskList / useTaskDetail / useSubmitTask
## 主题与交互
- 重写暗色令牌：科技感蓝紫（#080C24 底 / #0F1340 面板 / #2A3278 边框）
- 三栏分隔线：token.colorBorderSecondary 常驻 + 手柄竖线 hover 高亮
- 左面板纵向拖拽：模型区/任务区可调比例，ResizeObserver 自适应
- 暗色/亮色同步：tokens.ts + antd-theme.ts + globals.css 三处一致
## 基础设施
- EventBus 新增 TASK_SUBMITTED 事件（替代 Context 数字递增 hack）
- HomeContext 状态管理（选中模型、任务分页、折叠状态）
- 所有组件边框使用 token.colorBorderSecondary（主题自适应）
- Table 滚动高度 ResizeObserver 动态计算（修复分页器遮挡）
|
2026-06-05 16:24:17 +08:00 |
|
|
|
767bb8b297
|
feat: 初始化船长·HeiXiu 桌面应用项目（错误是svg的问题）
Electron + React 19 + TypeScript + Ant Design 6 + Tailwind CSS 4
【核心架构】
- Electron 主进程（窗口管理、平台检测、图标适配）
- Vite 构建链（双产物 dist/ + dist-electron/）
- 共享层 shared/（类型、常量、工具函数）
- IPC 通信框架 + 安全守卫
【主题系统】
- 蓝紫渐变主题（亮色/暗色双模式）
- Ant Design ConfigProvider 适配（lightAlgorithm / darkAlgorithm）
- Tailwind CSS 4 @theme 指令 + CSS 变量
- 设计令牌三处同步（tokens.ts / globals.css / antd-theme.ts）
【导航栏】
- 自定义 H5 导航栏替代系统菜单
- 个人版/企业版双布局
- 未登录拦截 + 事件总线驱动登录弹窗
【登录注册】
- Modal 弹层（Portal）+ Tabs 切换
- 登录/注册表单动态字段渲染
- 记住密码 / 自动登录 / 用户协议
【更新系统】
- 自定义 API 版本检查（替代 electron-updater generic provider）
- 手动下载 + SHA512 校验 + spawn NSIS 安装
- 渲染进程更新状态机 Hook（useUpdater）
- 检查更新按钮 + 下载进度展示
【构建工具链】
- build.mjs 构建总管（--win/--mac/--linux --personal/--enterprise --build/--clean/--sign/--upload/--publish）
- scripts/ 自动化脚本（clean / generate-update-info / upload-oss / publish-release）
- electron-builder NSIS 安装器（可选路径、多版本打包）
- update-info.json 自动生成（fileSize/sha512/changelog/releaseDate）
【代码质量】
- ESLint + TypeScript strict + Prettier
- husky + lint-staged（提交前自动检查）
- commitlint（规范提交信息）
- Playwright E2E + Vitest 单元测试框架
- rollup-plugin-visualizer 打包体积分析
【文档】
- README.md（快速开始 + 目录结构 + 命令速查）
- UpdateA.md（发布手册：API/签名/发版流程/数据库）
- CHANGELOG.md（更新日志）
- .env.example（构建环境变量模板）
|
2026-06-03 15:00:51 +08:00 |
|
