YoungestSongMo
1da95eaef3
## 首页整体架构
- 新增 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 动态计算（修复分页器遮挡）
106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
// ============================================================
|
||
// 设计令牌（Design Tokens）—— 蓝紫渐变主题
|
||
// 此处定义的颜色、圆角、阴影等令牌，需同步到：
|
||
// 1. globals.css（Tailwind CSS 扩展，通过 @theme 指令）
|
||
// 2. antd-theme.ts（Ant Design ConfigProvider 主题配置）
|
||
// 修改时三处同步更新。
|
||
// ============================================================
|
||
|
||
// ---------- 品牌色（蓝紫渐变） ----------
|
||
|
||
export const colorPrimary = '#6366F1';
|
||
export const colorPrimaryLight = '#818CF8';
|
||
export const colorPrimaryDark = '#4F46E5';
|
||
export const colorSecondary = '#8B5CF6';
|
||
|
||
export const gradientStart = '#4F46E5';
|
||
export const gradientEnd = '#7C3AED';
|
||
export const gradientPrimary = `linear-gradient(135deg, ${gradientStart}, ${gradientEnd})`;
|
||
export const gradientPrimaryHover = `linear-gradient(135deg, ${colorPrimary}, ${colorSecondary})`;
|
||
|
||
// ---------- 功能色 ----------
|
||
|
||
export const colorSuccess = '#10B981';
|
||
export const colorWarning = '#F59E0B';
|
||
export const colorError = '#EF4444';
|
||
export const colorInfo = '#3B82F6';
|
||
|
||
// ---------- 中性色（亮色模式） ----------
|
||
|
||
export const colorTextBase = '#1E1B4B';
|
||
export const colorTextSecondary = '#6B7280';
|
||
export const colorTextTertiary = '#9CA3AF';
|
||
|
||
export const colorBgBase = '#FFFFFF';
|
||
export const colorBgContainer = '#F9FAFB';
|
||
export const colorBgElevated = '#FFFFFF';
|
||
export const colorBgLayout = '#F5F3FF';
|
||
export const colorBgSpotlight = '#F3F4F6';
|
||
|
||
/** 亮色模式 — 面板边框（稍明显） */
|
||
export const colorBorder = '#E2E0F0';
|
||
/** 亮色模式 — 内部分隔线（可见但不强烈） */
|
||
export const colorBorderSecondary = '#EEECF6';
|
||
|
||
// ---------- 中性色（暗色模式 — 融入品牌蓝紫调） ----------
|
||
|
||
/** 暗色模式 — 主文字 */
|
||
export const darkColorTextBase = '#E8E8FA';
|
||
/** 暗色模式 — 次要文字 */
|
||
export const darkColorTextSecondary = '#A0A8D8';
|
||
/** 暗色模式 — 辅助文字 */
|
||
export const darkColorTextTertiary = '#6E78B0';
|
||
|
||
/** 暗色模式 — 页面底色（深邃蓝黑） */
|
||
export const darkColorBgBase = '#080C24';
|
||
/** 暗色模式 — 卡片/面板背景（暗蓝紫） */
|
||
export const darkColorBgContainer = '#0F1340';
|
||
/** 暗色模式 — 悬浮层背景（微亮蓝紫） */
|
||
export const darkColorBgElevated = '#171B52';
|
||
/** 暗色模式 — 页面布局底层 */
|
||
export const darkColorBgLayout = '#050818';
|
||
|
||
/** 暗色模式 — 面板外框（蓝紫边框，可见但不刺眼） */
|
||
export const darkColorBorder = '#2A3278';
|
||
/** 暗色模式 — 内部分隔线（柔和蓝紫，常驻可见） */
|
||
export const darkColorBorderSecondary = '#1C2250';
|
||
|
||
// ---------- 圆角 ----------
|
||
|
||
export const borderRadiusBase = 8;
|
||
export const borderRadiusLG = 12;
|
||
export const borderRadiusSM = 6;
|
||
export const borderRadiusXS = 4;
|
||
|
||
// ---------- 阴影 ----------
|
||
|
||
export const boxShadowBase =
|
||
'0 1px 3px 0 rgba(99, 102, 241, 0.08), 0 1px 2px -1px rgba(99, 102, 241, 0.08)';
|
||
export const boxShadowLG =
|
||
'0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -4px rgba(99, 102, 241, 0.1)';
|
||
|
||
// ---------- 字体 ----------
|
||
|
||
export const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif`;
|
||
export const fontFamilyCode = `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace`;
|
||
|
||
export const fontSizeBase = 14;
|
||
export const fontSizeLG = 16;
|
||
export const fontSizeSM = 12;
|
||
export const fontSizeXL = 20;
|
||
|
||
// ---------- 间距 ----------
|
||
|
||
export const spacingUnit = 4;
|
||
export const spacingXS = 4;
|
||
export const spacingSM = 8;
|
||
export const spacingMD = 16;
|
||
export const spacingLG = 24;
|
||
export const spacingXL = 32;
|
||
export const spacingXXL = 48;
|
||
|
||
// ---------- 动画 ----------
|
||
|
||
export const transitionDuration = '0.2s';
|
||
export const transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
|