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:
43
src/contexts/home-context.ts
Normal file
43
src/contexts/home-context.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
// ============================================================
|
||||
// HomeContext — 首页状态管理
|
||||
// 管理:选中模型、任务分页、选中任务记录、刷新信号
|
||||
// ============================================================
|
||||
|
||||
import { createContext, useContext } from 'react';
|
||||
import type { ModelsListResponseBody } from '@/services/modules/models';
|
||||
import type { TaskInfoItemResponseBody } from '@/services/modules/task';
|
||||
|
||||
// ---------- Context 类型 ----------
|
||||
|
||||
export interface HomeContextValue {
|
||||
/** 当前选中的模型 */
|
||||
selectedModel: ModelsListResponseBody | null;
|
||||
setSelectedModel: (model: ModelsListResponseBody | null) => void;
|
||||
|
||||
/** 任务记录分页 — 当前页码 */
|
||||
taskPage: number;
|
||||
/** 任务记录分页 — 每页条数 */
|
||||
taskPageSize: number;
|
||||
setTaskPage: (page: number) => void;
|
||||
setTaskPageSize: (size: number) => void;
|
||||
|
||||
/** 当前选中的任务记录(用于右侧预览) */
|
||||
selectedTask: TaskInfoItemResponseBody | null;
|
||||
setSelectedTask: (task: TaskInfoItemResponseBody | null) => void;
|
||||
|
||||
/** 侧边栏折叠状态 */
|
||||
isLeftCollapsed: boolean;
|
||||
toggleLeftCollapsed: () => void;
|
||||
}
|
||||
|
||||
export const HomeContext = createContext<HomeContextValue | null>(null);
|
||||
|
||||
// ---------- Consumer Hook ----------
|
||||
|
||||
export function useHomeContext(): HomeContextValue {
|
||||
const ctx = useContext(HomeContext);
|
||||
if (!ctx) {
|
||||
throw new Error('useHomeContext() 必须在 <HomeProvider> 内部调用');
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
Reference in New Issue
Block a user