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 动态计算(修复分页器遮挡)
This commit is contained in:
@@ -8,28 +8,14 @@
|
||||
|
||||
// ---------- 品牌色(蓝紫渐变) ----------
|
||||
|
||||
/** 品牌主色 — Indigo-500 */
|
||||
export const colorPrimary = '#6366F1';
|
||||
|
||||
/** 品牌主色浅色变体 */
|
||||
export const colorPrimaryLight = '#818CF8';
|
||||
|
||||
/** 品牌主色深色变体 */
|
||||
export const colorPrimaryDark = '#4F46E5';
|
||||
|
||||
/** 品牌辅助色 — Violet-500(渐变另一端) */
|
||||
export const colorSecondary = '#8B5CF6';
|
||||
|
||||
/** 品牌渐变色起始值 */
|
||||
export const gradientStart = '#4F46E5'; // Indigo-600
|
||||
|
||||
/** 品牌渐变色结束值 */
|
||||
export const gradientEnd = '#7C3AED'; // Violet-600
|
||||
|
||||
/** 品牌渐变色(CSS 值,可直接用于 background) */
|
||||
export const gradientStart = '#4F46E5';
|
||||
export const gradientEnd = '#7C3AED';
|
||||
export const gradientPrimary = `linear-gradient(135deg, ${gradientStart}, ${gradientEnd})`;
|
||||
|
||||
/** 品牌渐变悬停态 */
|
||||
export const gradientPrimaryHover = `linear-gradient(135deg, ${colorPrimary}, ${colorSecondary})`;
|
||||
|
||||
// ---------- 功能色 ----------
|
||||
@@ -41,41 +27,43 @@ export const colorInfo = '#3B82F6';
|
||||
|
||||
// ---------- 中性色(亮色模式) ----------
|
||||
|
||||
export const colorTextBase = '#1E1B4B'; // 深蓝紫黑
|
||||
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'; // Violet-50
|
||||
export const colorBgLayout = '#F5F3FF';
|
||||
export const colorBgSpotlight = '#F3F4F6';
|
||||
|
||||
export const colorBorder = '#E5E7EB';
|
||||
export const colorBorderSecondary = '#F3F4F6';
|
||||
/** 亮色模式 — 面板边框(稍明显) */
|
||||
export const colorBorder = '#E2E0F0';
|
||||
/** 亮色模式 — 内部分隔线(可见但不强烈) */
|
||||
export const colorBorderSecondary = '#EEECF6';
|
||||
|
||||
// ---------- 中性色(暗色模式) ----------
|
||||
// ---------- 中性色(暗色模式 — 融入品牌蓝紫调) ----------
|
||||
|
||||
/** 暗色模式 — 主文字 */
|
||||
export const darkColorTextBase = '#E8E6F0';
|
||||
export const darkColorTextBase = '#E8E8FA';
|
||||
/** 暗色模式 — 次要文字 */
|
||||
export const darkColorTextSecondary = '#A5A0C9';
|
||||
export const darkColorTextSecondary = '#A0A8D8';
|
||||
/** 暗色模式 — 辅助文字 */
|
||||
export const darkColorTextTertiary = '#6E6998';
|
||||
export const darkColorTextTertiary = '#6E78B0';
|
||||
|
||||
/** 暗色模式 — 基础背景 */
|
||||
export const darkColorBgBase = '#0F0D1A'; // 深蓝紫黑
|
||||
/** 暗色模式 — 容器背景 */
|
||||
export const darkColorBgContainer = '#1A1730'; // 抬升一层
|
||||
/** 暗色模式 — 悬浮背景 */
|
||||
export const darkColorBgElevated = '#242040'; // 再抬升一层
|
||||
/** 暗色模式 — 布局背景 */
|
||||
export const darkColorBgLayout = '#0B0A15'; // 最深背景
|
||||
/** 暗色模式 — 页面底色(深邃蓝黑) */
|
||||
export const darkColorBgBase = '#080C24';
|
||||
/** 暗色模式 — 卡片/面板背景(暗蓝紫) */
|
||||
export const darkColorBgContainer = '#0F1340';
|
||||
/** 暗色模式 — 悬浮层背景(微亮蓝紫) */
|
||||
export const darkColorBgElevated = '#171B52';
|
||||
/** 暗色模式 — 页面布局底层 */
|
||||
export const darkColorBgLayout = '#050818';
|
||||
|
||||
/** 暗色模式 — 边框 */
|
||||
export const darkColorBorder = '#2E2A4A';
|
||||
/** 暗色模式 — 次要边框 */
|
||||
export const darkColorBorderSecondary = '#1F1C38';
|
||||
/** 暗色模式 — 面板外框(蓝紫边框,可见但不刺眼) */
|
||||
export const darkColorBorder = '#2A3278';
|
||||
/** 暗色模式 — 内部分隔线(柔和蓝紫,常驻可见) */
|
||||
export const darkColorBorderSecondary = '#1C2250';
|
||||
|
||||
// ---------- 圆角 ----------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user