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:
62
src/main.tsx
62
src/main.tsx
@@ -1,53 +1,53 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { App as AntdApp } from 'antd';
|
||||
import {App as AntdApp} from 'antd';
|
||||
|
||||
import App from './App';
|
||||
import { ThemeProvider } from './components/ThemeProvider';
|
||||
import { AppProvider } from './components/AppProvider';
|
||||
import { SettingsProvider } from './components/SettingsProvider';
|
||||
import {ThemeProvider} from './components/ThemeProvider';
|
||||
import {AppProvider} from './components/AppProvider';
|
||||
import {SettingsProvider} from './components/SettingsProvider';
|
||||
// 全局样式(包含 Tailwind 指令 + 主题扩展 + 重置)
|
||||
import './theme/globals.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
{/* AppProvider — 全局应用状态(平台/版本/登录态) */}
|
||||
<AppProvider>
|
||||
{/* ThemeProvider 内部管理 ConfigProvider(亮色/暗色切换) */}
|
||||
<ThemeProvider>
|
||||
{/* SettingsProvider — 集中管理设置项(存储路径等) */}
|
||||
<SettingsProvider>
|
||||
{/* AntdApp 提供 message / notification / modal 的静态方法上下文 */}
|
||||
<AntdApp>
|
||||
<App />
|
||||
</AntdApp>
|
||||
</SettingsProvider>
|
||||
</ThemeProvider>
|
||||
</AppProvider>
|
||||
</React.StrictMode>,
|
||||
<React.StrictMode>
|
||||
{/* AppProvider — 全局应用状态(平台/版本/登录态) */}
|
||||
<AppProvider>
|
||||
{/* ThemeProvider 内部管理 ConfigProvider(亮色/暗色切换) */}
|
||||
<ThemeProvider>
|
||||
{/* SettingsProvider — 集中管理设置项(存储路径等) */}
|
||||
<SettingsProvider>
|
||||
{/* AntdApp 提供 message / notification / modal 的静态方法上下文 */}
|
||||
<AntdApp>
|
||||
<App />
|
||||
</AntdApp>
|
||||
</SettingsProvider>
|
||||
</ThemeProvider>
|
||||
</AppProvider>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
|
||||
// 仅在 Electron 环境中监听主进程消息(浏览器预览时跳过)
|
||||
import { safeIpcOn } from './utils/ipc';
|
||||
safeIpcOn('main-process-message', (_event: unknown, message: unknown) => {
|
||||
console.log('[Main Process Message]:', message);
|
||||
console.log('[Main Process Message]:', message);
|
||||
});
|
||||
|
||||
// 渲染进程全局未捕获错误(兜底记录到日志文件)
|
||||
import { logger } from './utils/logger';
|
||||
import {logger} from './utils/logger';
|
||||
|
||||
window.addEventListener('error', (event) => {
|
||||
logger.error('ui', 'Uncaught error (renderer)', event.error, {
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
});
|
||||
logger.error('ui', 'Uncaught error (renderer)', event.error, {
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
const error =
|
||||
event.reason instanceof Error
|
||||
? event.reason
|
||||
: new Error(String(event.reason));
|
||||
logger.error('ui', 'Unhandled promise rejection (renderer)', error);
|
||||
const error =
|
||||
event.reason instanceof Error
|
||||
? event.reason
|
||||
: new Error(String(event.reason));
|
||||
logger.error('ui', 'Unhandled promise rejection (renderer)', error);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user