Yang-RuiQi/ele-HeiXiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现业务首页（三栏布局 + 轮播图）

Browse Source 
## 首页整体架构
  - 新增 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:
YoungestSongMo
2026-06-05 16:24:17 +08:00
parent 6204c14b88
commit 1da95eaef3
31 changed files with 2639 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/home/BannerCarousel.tsx Normal file
View File

@@ -0,0 +1,74 @@
// ============================================================
// BannerCarousel — 首页顶部轮播图
// 使用 useBannerList() Hook 获取数据，组件仅负责渲染
// ============================================================
import { useRef, useMemo } from 'react';
import { Carousel, Skeleton } from 'antd';
import type { CarouselRef } from 'antd/es/carousel';
import { useBannerList } from '@/hooks/use-api';
import type { Banner } from '@/services/modules';
// ---------- 组件 Props ----------
interface BannerCarouselProps {
className?: string;
}
// ---------- 组件 ----------
export function BannerCarousel({ className }: BannerCarouselProps) {
const carouselRef = useRef<CarouselRef>(null);
const { data: rawBanners, loading } = useBannerList();
// 过滤 + 排序（纯计算，无副作用）
const banners = useMemo<Banner[]>(() => {
if (!rawBanners) return [];
return rawBanners
.filter((b) => b.is_active)
.filter((b) => b.category === 'banner')
.sort((a, b) => a.sort_order - b.sort_order);
}, [rawBanners]);
// 无数据时不渲染
if (!loading && banners.length === 0) {
return null;
}
// 加载态 — 适配长条比例（2280×90）
if (loading) {
return (
<div className={className} style={{ width: '100%' }}>
<Skeleton.Input active block style={{ height: 90 }} />
</div>
);
}
return (
<div
className={`banner-carousel ${className ?? ''}`}
style={{ position: 'relative', width: '100%', overflow: 'hidden', lineHeight: 0 }}
>
<Carousel
ref={carouselRef}
autoplay
autoplaySpeed={5000}
effect="fade"
pauseOnHover
adaptiveHeight={true}
dots={banners.length > 1}
>
{banners.map((banner) => (
<div key={banner.id}>
<img
src={banner.image_url}
alt={banner.title}
style={{ width: '100%', height: 'auto', display: 'block' }}
/>
</div>
))}
</Carousel>
</div>
);
}

23
src/pages/home/CenterPanel.tsx Normal file
View File

@@ -0,0 +1,23 @@
// ============================================================
// CenterPanel — 中列容器（模型输入表单）
// ============================================================
import { theme as antTheme } from 'antd';
import { ModelInputForm } from './ModelInputForm';
export function CenterPanel() {
const { token } = antTheme.useToken();
return (
<div
style={{
height: '100%',
overflow: 'hidden',
borderRadius: 8,
border: `1px solid ${token.colorBorderSecondary}`,
}}
>
<ModelInputForm />
</div>
);
}

261
src/pages/home/HomeContent.tsx Normal file
View File

@@ -0,0 +1,261 @@
// ============================================================
// HomeContent — 首页三列正文布局 + HomeProvider
// 可拖拽调整三栏宽度，所有数据请求在登录后发送
// ============================================================
import { useState, useCallback, useRef, useEffect } from 'react';
import { theme as antTheme, Empty } from 'antd';
import { HomeContext } from '@/contexts/home-context';
import { useAppContext } from '@/contexts/app-context';
import type { ModelsListResponseBody, TaskInfoItemResponseBody } from '@/services/modules';
import { LeftPanel } from './LeftPanel';
import { CenterPanel } from './CenterPanel';
import { RightPanel } from './RightPanel';
import { Typography } from 'antd';
const { Text } = Typography;
// ---------- 常量 ----------
/** 左列最小/默认宽度 */
const LEFT_MIN = 400;
const LEFT_DEFAULT = 750;
/** 右列最小/默认宽度 */
const RIGHT_MIN = 300;
const RIGHT_DEFAULT = 480;
/** 拖拽分隔条宽度 */
const DIVIDER_WIDTH = 6;
// ---------- 组件 ----------
export function HomeContent() {
const { token } = antTheme.useToken();
const { isLoggedIn } = useAppContext();
// ======== HomeContext 状态 ========
const [selectedModel, setSelectedModel] = useState<ModelsListResponseBody | null>(null);
const [selectedTask, setSelectedTask] = useState<TaskInfoItemResponseBody | null>(null);
const [taskPage, setTaskPage] = useState(1);
const [taskPageSize, setTaskPageSize] = useState(10);
const [isLeftCollapsed, setIsLeftCollapsed] = useState(false);
const toggleLeftCollapsed = useCallback(() => {
setIsLeftCollapsed((v) => !v);
}, []);
const handleSetSelectedModel = useCallback(
(model: ModelsListResponseBody | null) => {
setSelectedModel(model);
setSelectedTask(null);
},
[],
);
const handleSetSelectedTask = useCallback(
(task: TaskInfoItemResponseBody | null) => {
setSelectedTask(task);
},
[],
);
const contextValue = {
selectedModel,
setSelectedModel: handleSetSelectedModel,
taskPage,
taskPageSize,
setTaskPage,
setTaskPageSize,
selectedTask,
setSelectedTask: handleSetSelectedTask,
isLeftCollapsed,
toggleLeftCollapsed,
};
// ======== 拖拽调整列宽 ========
const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
const containerRef = useRef<HTMLDivElement>(null);
// 拖拽状态
const [dragging, setDragging] = useState<'left' | 'right' | null>(null);
// 分隔条 hover 状态
const [hoveredDivider, setHoveredDivider] = useState<'left' | 'right' | null>(null);
const dragState = useRef<{
startX: number;
startWidth: number;
}>({ startX: 0, startWidth: 0 });
const handleDividerMouseDown = (side: 'left' | 'right') => (e: React.MouseEvent) => {
e.preventDefault();
// eslint-disable-next-line react-hooks/refs
dragState.current = { startX: e.clientX, startWidth: side === 'left' ? leftWidth : rightWidth };
setDragging(side);
};
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!dragging) return;
const ds = dragState.current;
const delta = e.clientX - ds.startX;
if (dragging === 'left') {
const newWidth = Math.max(LEFT_MIN, ds.startWidth + delta);
setLeftWidth(newWidth);
} else {
const newWidth = Math.max(RIGHT_MIN, ds.startWidth - delta);
setRightWidth(newWidth);
}
};
const handleMouseUp = () => {
setDragging(null);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [dragging]);
// ======== 分隔条样式工厂 ========
const dividerStyle = (side: 'left' | 'right'): React.CSSProperties => {
const isActive = dragging === side;
const isHovered = hoveredDivider === side;
return {
width: DIVIDER_WIDTH,
flexShrink: 0,
cursor: 'col-resize',
background: isActive
? token.colorPrimary
: isHovered
? `${token.colorPrimary}60`
: token.colorBorderSecondary,
position: 'relative' as const,
zIndex: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background 0.2s ease',
};
};
// ======== 未登录提示 ========
if (!isLoggedIn) {
return (
<HomeContext.Provider value={contextValue}>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
background: token.colorBgLayout,
}}
>
<Empty
description={
<Text type="secondary">
请先登录后再使用首页功能
</Text>
}
image={Empty.PRESENTED_IMAGE_SIMPLE}
/>
</div>
</HomeContext.Provider>
);
}
// ======== 三列布局（可拖拽） ========
return (
<HomeContext.Provider value={contextValue}>
<div
ref={containerRef}
style={{
display: 'flex',
padding: 12,
gap: 0,
flex: 1,
overflow: 'hidden',
background: token.colorBgLayout,
cursor: !!dragging ? 'col-resize' : undefined,
userSelect: !!dragging ? 'none' : undefined,
}}
>
{/* 左列 */}
{!isLeftCollapsed && (
<>
<div style={{ width: leftWidth, overflow: 'hidden', flexShrink: 0 }}>
<LeftPanel />
</div>
{/* 左分隔条 */}
<div
onMouseDown={handleDividerMouseDown('left')}
style={dividerStyle('left')}
onMouseEnter={() => setHoveredDivider('left')}
onMouseLeave={() => setHoveredDivider(null)}
>
{/* 拖拽手柄竖线 */}
<div style={{
width: 2,
height: 32,
borderRadius: 1,
background: dragging === 'left'
? '#fff'
: hoveredDivider === 'left'
? token.colorPrimary
: token.colorBorder,
transition: 'background 0.2s ease',
}} />
</div>
</>
)}
{/* 中列 */}
<div style={{ flex: 1, overflow: 'hidden', minWidth: 300 }}>
<CenterPanel />
</div>
{/* 右分隔条 */}
<div
onMouseDown={handleDividerMouseDown('right')}
style={{
...dividerStyle('right'),
marginLeft: 12,
}}
onMouseEnter={() => setHoveredDivider('right')}
onMouseLeave={() => setHoveredDivider(null)}
>
{/* 拖拽手柄竖线 */}
<div style={{
width: 2,
height: 32,
borderRadius: 1,
background: dragging === 'right'
? '#fff'
: hoveredDivider === 'right'
? token.colorPrimary
: token.colorBorder,
transition: 'background 0.2s ease',
}} />
</div>
{/* 右列 */}
<div style={{ width: rightWidth, overflow: 'hidden', flexShrink: 0, marginLeft: 6 }}>
<RightPanel />
</div>
</div>
</HomeContext.Provider>
);
}

273
src/pages/home/HomePage.tsx
View File

@@ -1,277 +1,14 @@
// ============================================================
// HomePage — 首页仪表盘（从 App.tsx 提取）
// HomePage — 首页（业务入口）
// 组合：BannerCarousel（在 Layout 中）+ HomeContent（三列正文）
// ============================================================
import { useState } from 'react';
import {
Button,
Card,
Space,
Tag,
Typography,
Switch as AntSwitch,
Slider,
Progress,
theme as antTheme,
} from 'antd';
import {
ApiOutlined,
ThunderboltOutlined,
BulbOutlined,
BulbFilled,
DownloadOutlined,
SyncOutlined,
CheckCircleOutlined,
ExclamationCircleOutlined,
RocketOutlined,
} from '@ant-design/icons';
import { getPlatformName, isDev } from '@/utils/platform';
import { gradientPrimary } from '@/theme/tokens';
import { useTheme } from '@/hooks/use-theme';
import { useUpdater } from '@/hooks/use-updater';
import { useAppContext } from '@/contexts/app-context';
const { Title, Text } = Typography;
import { HomeContent } from './HomeContent';
export function HomePage() {
const { isDark, toggleTheme } = useTheme();
const { platform, edition, isLoggedIn, logout } = useAppContext();
const { token } = antTheme.useToken();
const [progress, setProgress] = useState(65);
const {
status: updateStatus,
progress: updateProgress,
info: updateInfo,
error: updateError,
checkForUpdates,
installUpdate,
} = useUpdater();
return (
<div className="flex-1 p-8">
<div className="mx-auto max-w-4xl space-y-6">
{/* ---- 标题区 + 主题开关 ---- */}
<div className="text-center space-y-2">
<div className="flex items-center justify-center gap-4">
<Title level={1} className="mb-0! gradient-primary-text">
HeiXiu · 桌面工作台
</Title>
<AntSwitch
checked={isDark}
onChange={toggleTheme}
checkedChildren={<BulbFilled />}
unCheckedChildren={<BulbOutlined />}
title={isDark ? '切换亮色模式' : '切换暗色模式'}
/>
</div>
<Text type="secondary">
Electron + React 19 + TypeScript + Ant Design + Tailwind CSS
</Text>
<br />
<Space size={4}>
<Tag color={isDark ? 'blue' : 'purple'}>
{isDark ? '🌙 暗色' : '☀️ 亮色'}
</Tag>
<Tag color={edition === 'enterprise' ? 'gold' : 'green'}>
{edition === 'enterprise' ? '企业版' : '个人版'}
</Tag>
{isLoggedIn ? (
<>
<Tag color="blue">已登录</Tag>
<Button size="small" type="link" danger onClick={logout}>
退出登录
</Button>
</>
) : (
<Tag color="default">未登录</Tag>
)}
</Space>
</div>
{/* ---- 导航栏状态提示 ---- */}
<Card size="small" variant="borderless" className="rounded-lg">
<Text type="secondary" className="text-xs">
💡 当前使用 <Text strong>H5 自定义导航栏</Text> 替代系统菜单。
{platform === 'darwin'
? ' macOS 保留了最小 Edit 菜单以支持 Cmd+C/V 等快捷键。'
: ' Windows/Linux 已完全移除系统菜单栏。'}
</Text>
</Card>
{/* ---- 主题色预览 ---- */}
<Card
title="🎨 蓝紫渐变主题色预览"
variant="borderless"
className="rounded-lg shadow-lg"
>
<Space orientation="vertical" size="large" className="w-full">
{/* 渐变展示 */}
<div>
<Text strong>品牌渐变</Text>
<div className="flex gap-3 mt-2">
<div
className="flex-1 h-16 rounded-lg flex items-center justify-center text-white font-medium shadow-md"
style={{ background: gradientPrimary }}
>
135° 渐变
</div>
<div
className="flex-1 h-16 rounded-lg flex items-center justify-center text-white font-medium shadow-md"
style={{ background: 'linear-gradient(90deg, #4F46E5, #7C3AED)' }}
>
90° 渐变
</div>
</div>
</div>
{/* 组件示例 */}
<div>
<Text strong>Ant Design 组件</Text>
<Space wrap className="mt-2">
<Button type="primary" icon={<ThunderboltOutlined />}>
主按钮
</Button>
<Button>默认</Button>
<Button type="dashed">虚线</Button>
<Button type="text">文字</Button>
<Button type="link">链接</Button>
</Space>
</div>
{/* 滑块 + 进度条 */}
<div>
<Text strong>交互组件</Text>
<div className="flex items-center gap-4 mt-2">
<span className="text-sm" style={{ color: token.colorTextSecondary }}>
进度:
</span>
<Slider
className="flex-1"
value={progress}
onChange={setProgress}
min={0}
max={100}
/>
<Progress
type="circle"
percent={progress}
size={48}
strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
/>
</div>
</div>
</Space>
</Card>
{/* ---- 平台信息 ---- */}
<Card title="🖥️ 系统信息" variant="borderless" className="rounded-lg shadow-lg">
<Space orientation="vertical" size="middle" className="w-full">
<div className="flex items-center gap-2">
<ApiOutlined style={{ color: token.colorPrimary }} />
<Text strong>运行平台：</Text>
<Tag color="purple">{getPlatformName()}</Tag>
</div>
<div className="flex items-center gap-2">
<ApiOutlined style={{ color: token.colorPrimary }} />
<Text strong>运行环境：</Text>
<Tag color={isDev() ? 'blue' : 'green'}>
{isDev() ? '开发模式' : '生产模式'}
</Tag>
</div>
<div className="flex items-center gap-2">
<ApiOutlined style={{ color: token.colorPrimary }} />
<Text strong>当前导航：</Text>
<Tag color="purple">
H5 自定义导航栏（{edition === 'enterprise' ? '企业版' : '个人版'}
布局）
</Tag>
</div>
</Space>
</Card>
{/* ---- 版本更新 ---- */}
<Card title="🔄 版本更新" variant="borderless" className="rounded-lg shadow-lg">
<Space orientation="vertical" size="middle" className="w-full">
{/* 状态提示 */}
{updateStatus === 'checking' && (
<div className="flex items-center gap-2">
<SyncOutlined spin style={{ color: token.colorPrimary }} />
<Text type="secondary">正在检查更新...</Text>
</div>
)}
{updateStatus === 'no-update' && (
<div className="flex items-center gap-2">
<CheckCircleOutlined style={{ color: token.colorSuccess }} />
<Text type="success">已是最新版本</Text>
</div>
)}
{updateStatus === 'error' && (
<div className="flex items-center gap-2">
<ExclamationCircleOutlined style={{ color: token.colorError }} />
<Text type="danger">{updateError?.message || '检查更新失败'}</Text>
</div>
)}
{/* 发现新版本 */}
{(updateStatus === 'available' || updateStatus === 'downloading') && (
<>
<div className="flex items-center gap-2">
<RocketOutlined style={{ color: token.colorPrimary }} />
<Text strong>发现新版本：{updateInfo?.version}</Text>
{updateInfo?.forceUpdate && <Tag color="red">强制更新</Tag>}
</div>
{updateInfo?.releaseNotes && (
<Text type="secondary" className="text-xs whitespace-pre-line">
{updateInfo.releaseNotes}
</Text>
)}
</>
)}
{/* 下载进度 */}
{updateStatus === 'downloading' && (
<Progress
percent={updateProgress.percent}
strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
/>
)}
{/* 下载完成 */}
{updateStatus === 'downloaded' && (
<>
<div className="flex items-center gap-2">
<CheckCircleOutlined style={{ color: token.colorSuccess }} />
<Text>更新已下载完毕，点击按钮安装并重启</Text>
</div>
<Button
type="primary"
icon={<DownloadOutlined />}
onClick={installUpdate}
>
安装更新
</Button>
</>
)}
{/* 操作按钮 */}
<div className="flex items-center gap-3">
<Button
icon={<SyncOutlined spin={updateStatus === 'checking'} />}
onClick={checkForUpdates}
disabled={updateStatus === 'checking'}
>
检查更新
</Button>
{isDev() && (
<Text type="secondary" className="text-xs">
（生产环境启动 5 秒后自动检查）
</Text>
)}
</div>
</Space>
</Card>
</div>
<div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
<HomeContent />
</div>
);
}

177
src/pages/home/LeftPanel.tsx Normal file
View File

@@ -0,0 +1,177 @@
// ============================================================
// LeftPanel — 左列容器（模型选择 + 可拖拽分割线 + 任务记录）
// 纵向拖拽分隔线支持鼠标调整上下区域高度比例
// ============================================================
import { useState, useRef, useEffect, useCallback } from 'react';
import { theme as antTheme } from 'antd';
import { ModelSelector } from './ModelSelector';
import { TaskHistory } from './TaskHistory';
// ---------- 常量 ----------
/** 模型选择区最小高度 */
const TOP_MIN = 120;
/** 任务列表区最小高度 */
const BOTTOM_MIN = 200;
/** 默认模型选择区百分比 */
const TOP_DEFAULT_PCT = 0.40;
/** 拖拽分隔条高度 */
const DIVIDER_HEIGHT = 6;
// ---------- 组件 ----------
export function LeftPanel() {
const { token } = antTheme.useToken();
// 面板容器引用
const containerRef = useRef<HTMLDivElement>(null);
// 模型选择区高度（像素）
const [topHeight, setTopHeight] = useState<number | null>(null);
// 拖拽状态
const [dragging, setDragging] = useState(false);
// hover 状态
const [hovered, setHovered] = useState(false);
const dragState = useRef<{
startY: number;
startHeight: number;
}>({ startY: 0, startHeight: 0 });
// 初始化：按百分比计算顶部高度
const initHeight = useCallback(() => {
const el = containerRef.current;
if (!el) return;
const total = el.clientHeight;
setTopHeight(Math.max(TOP_MIN, Math.round(total * TOP_DEFAULT_PCT)));
}, []);
useEffect(() => {
initHeight();
}, [initHeight]);
// 响应容器 resize（窗口大小变化时重新按比例计算）
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const observer = new ResizeObserver(() => {
if (!dragging) {
const total = el.clientHeight;
setTopHeight((prev) => {
if (prev === null) return Math.max(TOP_MIN, Math.round(total * TOP_DEFAULT_PCT));
// 保持原有比例
const ratio = prev / total;
return Math.max(TOP_MIN, Math.round(total * Math.min(ratio, 0.8)));
});
}
});
observer.observe(el);
return () => observer.disconnect();
}, [dragging]);
// 拖拽事件
const handleDividerMouseDown = (e: React.MouseEvent) => {
e.preventDefault();
dragState.current = { startY: e.clientY, startHeight: topHeight ?? 200 };
setDragging(true);
};
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!dragging) return;
const el = containerRef.current;
if (!el) return;
const total = el.clientHeight;
const ds = dragState.current;
const delta = e.clientY - ds.startY;
const newTop = Math.max(TOP_MIN, Math.min(total - BOTTOM_MIN, ds.startHeight + delta));
setTopHeight(newTop);
};
const handleMouseUp = () => {
setDragging(false);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [dragging]);
// 分隔条样式
const isActive = dragging;
const isHovered = hovered;
return (
<div
ref={containerRef}
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
borderRadius: 8,
border: `1px solid ${token.colorBorderSecondary}`,
}}
>
{/* 上方：模型选择（高度由拖拽控制） */}
<div
style={{
height: topHeight ?? '40%',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flexShrink: 0,
}}
>
<ModelSelector />
</div>
{/* 纵向拖拽分隔条 */}
<div
onMouseDown={handleDividerMouseDown}
style={{
height: DIVIDER_HEIGHT,
flexShrink: 0,
cursor: 'row-resize',
background: isActive
? token.colorPrimary
: isHovered
? `${token.colorPrimary}60`
: token.colorBorderSecondary,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background 0.2s ease',
zIndex: 10,
}}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
{/* 拖拽手柄横线 */}
<div style={{
height: 2,
width: 32,
borderRadius: 1,
background: isActive
? '#fff'
: isHovered
? token.colorPrimary
: token.colorBorder,
transition: 'background 0.2s ease',
}} />
</div>
{/* 下方：任务记录（剩余高度） */}
<div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
<TaskHistory />
</div>
</div>
);
}

463
src/pages/home/ModelInputForm.tsx Normal file
View File

@@ -0,0 +1,463 @@
// ============================================================
// ModelInputForm — 动态模型输入表单
// 根据选中模型的 param_schema + ui_config 动态渲染表单控件
// ============================================================
import { useState, useEffect, useMemo, useCallback } from 'react';
import {
Form,
Input,
InputNumber,
Select,
Slider,
Button,
Typography,
Empty,
Upload,
Switch,
theme as antTheme,
message,
} from 'antd';
import {
SendOutlined,
UploadOutlined,
InboxOutlined,
} from '@ant-design/icons';
import type { UploadFile } from 'antd/es/upload';
import { useHomeContext } from '@/contexts/home-context';
import { useAppContext } from '@/contexts/app-context';
import { useSubmitTask } from '@/hooks/use-api';
import { emit, EVENTS } from '@/utils/event-bus';
import type { TaskInfoItemResponseBody } from '@/services/modules';
const { Text, Title } = Typography;
const { TextArea } = Input;
const { Dragger } = Upload;
// ---------- 参数类型映射 ----------
/** 从 ui_config 中解析的参数描述 */
interface ParamDescriptor {
key: string;
label: string;
/** 控件类型 */
controlType: 'text' | 'number' | 'textarea' | 'select' | 'slider' | 'switch' | 'image-upload';
defaultValue?: unknown;
required?: boolean;
placeholder?: string;
/** 数值型：最小值 */
min?: number;
/** 数值型：最大值 */
max?: number;
/** 数值型：步长 */
step?: number;
/** select 型：选项列表 */
options?: Array<{ label: string; value: string | number }>;
}
/** 从 ui_config 对象中解析控件类型 */
function inferControlType(config: Record<string, unknown>): ParamDescriptor['controlType'] {
const type = config.type as string | undefined;
if (!type) return 'text';
switch (type) {
case 'number':
case 'integer':
case 'float':
return 'number';
case 'textarea':
case 'text_area':
case 'prompt':
return 'textarea';
case 'select':
case 'dropdown':
case 'enum':
return 'select';
case 'slider':
case 'range':
return 'slider';
case 'switch':
case 'boolean':
case 'bool':
return 'switch';
case 'image':
case 'image-upload':
case 'file':
return 'image-upload';
default:
return 'text';
}
}
/** 从 param_schema + ui_config 构建参数描述符列表 */
function buildParamDescriptors(
paramSchema: string[],
uiConfig: Record<string, unknown>,
): ParamDescriptor[] {
return paramSchema.map((key) => {
const config = (uiConfig[key] || {}) as Record<string, unknown>;
const controlType = inferControlType(config);
return {
key,
label: (config.label as string) || key,
controlType,
defaultValue: config.default ?? config.defaultValue,
required: (config.required as boolean) || false,
placeholder: (config.placeholder as string) || `请输入${config.label || key}`,
min: config.min as number | undefined,
max: config.max as number | undefined,
step: config.step as number | undefined,
options: (config.options as ParamDescriptor['options']) || undefined,
};
});
}
// ---------- 组件 ----------
export function ModelInputForm() {
const { token } = antTheme.useToken();
const { isLoggedIn } = useAppContext();
const { selectedModel } = useHomeContext();
const [form] = Form.useForm();
const [referenceFiles, setReferenceFiles] = useState<UploadFile[]>([]);
// 提交突变 Hook（自动处理 loading / error / 日志）
const { execute: submitTask, loading: submitting, errorMessage } = useSubmitTask({
onSuccess: useCallback(
(_data: TaskInfoItemResponseBody) => {
message.success('任务已提交');
// 通过事件总线通知 TaskHistory 刷新（替代 Context 中的 refreshTaskSignal）
emit(EVENTS.TASK_SUBMITTED);
},
[],
),
});
// 选中模型时重置表单（仅当有选中模型时操作，避免 form 未连接警告）
useEffect(() => {
if (selectedModel) {
form.resetFields();
}
setReferenceFiles([]);
}, [selectedModel?.id]); // eslint-disable-line react-hooks/exhaustive-deps
// 参数描述符
const paramDescriptors = useMemo(() => {
if (!selectedModel) return [];
return buildParamDescriptors(
selectedModel.param_schema || [],
selectedModel.ui_config || {},
);
}, [selectedModel]);
// 提交
const handleSubmit = async () => {
if (!isLoggedIn) {
message.warning('请先登录后再提交任务');
return;
}
if (!selectedModel) return;
try {
const values = await form.validateFields();
// 分离固定字段和模型动态参数
const { prompt, negative_prompt, num_outputs, ...dynamicParams } = values;
// 构建提交参数（全部转为字符串值）
const params: Record<string, string> = {
prompt: String(prompt ?? ''),
negative_prompt: String(negative_prompt ?? ''),
num_outputs: String(num_outputs ?? 1),
};
// 动态参数统一转字符串
for (const [key, value] of Object.entries(dynamicParams)) {
if (value !== undefined && value !== null) {
params[key] = String(value);
}
}
// 参考图
if (referenceFiles.length > 0) {
const refUrls = referenceFiles
.filter((f) => f.status === 'done')
.map((f) => f.response?.url || f.url || f.name)
.filter(Boolean) as string[];
if (refUrls.length > 0) {
params.reference_images = JSON.stringify(refUrls);
}
}
// 使用 mutation Hook 提交（自动处理 loading / error / 日志）
await submitTask({ model_id: selectedModel.id, params });
} catch (err) {
if (err && typeof err === 'object' && 'errorFields' in err) {
// 表单验证错误，antd 会自动提示
return;
}
// 错误消息由 Hook 自动通过 errorMessage 提供
message.error(errorMessage || '任务提交失败，请重试');
}
};
// 渲染单个参数控件
const renderParamControl = (desc: ParamDescriptor) => {
const commonProps = {
placeholder: desc.placeholder,
style: { width: '100%' },
};
switch (desc.controlType) {
case 'number':
return (
<InputNumber
{...commonProps}
min={desc.min}
max={desc.max}
step={desc.step}
style={{ width: '100%' }}
/>
);
case 'textarea':
return <TextArea rows={3} {...commonProps} />;
case 'select':
return (
<Select
{...commonProps}
options={desc.options}
allowClear
/>
);
case 'slider':
return (
<Slider
min={desc.min ?? 1}
max={desc.max ?? 100}
step={desc.step ?? 1}
marks={
desc.min !== undefined && desc.max !== undefined
? { [desc.min]: `${desc.min}`, [desc.max]: `${desc.max}` }
: undefined
}
tooltip={{ formatter: (v) => v }}
/>
);
case 'switch':
return <Switch />;
case 'image-upload':
return (
<Upload
listType="picture-card"
maxCount={1}
accept="image/png,image/jpg,image/jpeg,image/webp"
beforeUpload={(file) => {
const isImage = file.type.startsWith('image/');
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isImage) {
message.error('只能上传图片文件');
return Upload.LIST_IGNORE;
}
if (!isLt10M) {
message.error('图片大小不能超过 10MB');
return Upload.LIST_IGNORE;
}
return false; // 手动上传
}}
>
<div>
<UploadOutlined />
<div style={{ marginTop: 4, fontSize: 12 }}>上传</div>
</div>
</Upload>
);
default:
return <Input {...commonProps} />;
}
};
// ---- 未选择模型 ----
if (!selectedModel) {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
}}
>
<Empty description="请在左侧选择一个模型" image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>
);
}
// ---- 表单 ----
return (
<div
style={{
height: '100%',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
}}
>
{/* 模型标题 */}
<div
style={{
padding: '16px 20px',
borderBottom: `1px solid ${token.colorBorderSecondary}`,
flexShrink: 0,
}}
>
<Title level={4} style={{ margin: 0, fontSize: 18 }}>
{selectedModel.name}
</Title>
<Text type="secondary" style={{ fontSize: 12 }}>
{selectedModel.provider_name} · {selectedModel.category_name}
</Text>
</div>
{/* 可滚动表单区 */}
<div style={{ flex: 1, overflow: 'auto', padding: '16px 20px' }}>
<Form
form={form}
layout="vertical"
size="small"
initialValues={{ num_outputs: 1 }}
>
{/* ======== 固定字段 ======== */}
{/* 提示词 */}
<Form.Item
name="prompt"
label={<Text strong>提示词</Text>}
rules={[{ required: true, message: '请输入提示词' }]}
>
<TextArea
rows={4}
placeholder="描述你想要的画面、视频或音频内容..."
showCount
maxLength={2000}
/>
</Form.Item>
{/* 负面提示词 */}
<Form.Item
name="negative_prompt"
label={<Text type="secondary">负面提示词</Text>}
>
<TextArea
rows={2}
placeholder="描述你不希望在结果中出现的内容（可选）"
maxLength={1000}
/>
</Form.Item>
{/* 参考图 */}
<Form.Item label={<Text strong>参考图</Text>}>
<Dragger
multiple
listType="picture"
fileList={referenceFiles}
onChange={({ fileList }) => setReferenceFiles(fileList)}
accept="image/png,image/jpg,image/jpeg,image/webp"
beforeUpload={(file) => {
const isImage = file.type.startsWith('image/');
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isImage) {
message.error('只能上传图片文件');
return Upload.LIST_IGNORE;
}
if (!isLt10M) {
message.error('图片大小不能超过 10MB');
return Upload.LIST_IGNORE;
}
return false;
}}
maxCount={5}
style={{ marginBottom: 8 }}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽图片到此区域上传</p>
<p className="ant-upload-hint">
支持 PNG / JPG / WebP，单张不超过 10MB
</p>
</Dragger>
</Form.Item>
{/* 生成数量 */}
<Form.Item
name="num_outputs"
label={<Text strong>生成数量</Text>}
>
<InputNumber min={1} max={10} style={{ width: '100%' }} />
</Form.Item>
{/* ======== 模型动态参数 ======== */}
{paramDescriptors.length > 0 && (
<div
style={{
marginTop: 16,
paddingTop: 16,
borderTop: `1px solid ${token.colorBorderSecondary}`,
}}
>
<Text strong style={{ display: 'block', marginBottom: 12 }}>
模型参数
</Text>
{paramDescriptors.map((desc) => (
<Form.Item
key={desc.key}
name={desc.key}
label={desc.label}
rules={desc.required ? [{ required: true, message: `请输入${desc.label}` }] : undefined}
initialValue={desc.defaultValue}
valuePropName={desc.controlType === 'switch' ? 'checked' : 'value'}
>
{renderParamControl(desc)}
</Form.Item>
))}
</div>
)}
</Form>
</div>
{/* 提交按钮 */}
<div
style={{
padding: '12px 20px',
borderTop: `1px solid ${token.colorBorderSecondary}`,
flexShrink: 0,
}}
>
<Button
type="primary"
icon={<SendOutlined />}
onClick={handleSubmit}
loading={submitting}
disabled={!isLoggedIn || !selectedModel}
block
size="large"
style={{
background: token.colorPrimary,
height: 44,
fontSize: 16,
}}
>
开始生成
</Button>
</div>
</div>
);
}

122
src/pages/home/ModelSelector.tsx Normal file
View File

@@ -0,0 +1,122 @@
// ============================================================
// ModelSelector — 模型选择器（垂直单选列表，按类别分组）
// 使用 useModelList() Hook 获取数据，组件仅负责渲染
// ============================================================
import { useMemo } from 'react';
import { Menu, Spin, Empty, Tag, Typography, theme as antTheme } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import { useModelList, MODEL_CATEGORY_LABELS } from '@/hooks/use-api';
import { useHomeContext } from '@/contexts/home-context';
import type { ModelCategory } from '@/services/modules';
const { Text } = Typography;
// ---------- 组件 ----------
export function ModelSelector() {
const { token } = antTheme.useToken();
const { selectedModel, setSelectedModel } = useHomeContext();
const { data: models, loading, groupedModels } = useModelList();
// 构建 Menu items：分组标题 + 模型项
const menuItems = useMemo(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const items: any[] = [];
groupedModels.forEach((groupModels, category) => {
const categoryLabel = MODEL_CATEGORY_LABELS[category as ModelCategory] || category;
items.push({
key: `group-${category}`,
label: (
<Text strong style={{ fontSize: 12, color: token.colorTextSecondary }}>
{categoryLabel} ({groupModels.length})
</Text>
),
type: 'group' as const,
children: groupModels.map((model) => ({
key: model.id,
label: (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
<Text
style={{
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: 13,
}}
title={model.name}
>
{model.name}
</Text>
{model.status !== 'active' && (
<Tag
color={model.status === 'inactive' ? 'default' : 'orange'}
style={{ fontSize: 10, lineHeight: '16px', padding: '0 4px' }}
>
{model.status === 'maintenance' ? '维护' : '停用'}
</Tag>
)}
</div>
),
})),
});
});
return items;
}, [groupedModels, token.colorTextSecondary]);
// 选中菜单项
const handleSelect = ({ key }: { key: string }) => {
const model = models?.find((m) => m.id === key);
if (model) {
setSelectedModel(model);
}
};
// 加载态
if (loading) {
return (
<div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
<Spin size="small" />
</div>
);
}
// 空态
if (!models || models.length === 0) {
return <Empty description="暂无可用模型" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
}
// 选中 key
const selectedKeys = selectedModel ? [selectedModel.id] : [];
return (
<div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
<div
style={{
padding: '8px 12px',
borderBottom: `1px solid ${token.colorBorderSecondary}`,
display: 'flex',
alignItems: 'center',
gap: 6,
}}
>
<AppstoreOutlined style={{ color: token.colorPrimary, fontSize: 14 }} />
<Text strong style={{ fontSize: 13 }}>选择模型</Text>
</div>
<Menu
mode="inline"
selectedKeys={selectedKeys}
onSelect={handleSelect}
items={menuItems}
style={{
borderInlineEnd: 'none',
background: 'transparent',
}}
/>
</div>
);
}

165
src/pages/home/OutputPreview.tsx Normal file
View File

@@ -0,0 +1,165 @@
// ============================================================
// OutputPreview — 任务输出预览（图片 / 视频）
// 使用 useTaskDetail() Hook 获取任务详情，组件仅负责渲染
// ============================================================
import { useMemo } from 'react';
import { Image, Empty, Spin, Typography, Button, Tag, theme as antTheme } from 'antd';
import {
EyeOutlined,
DownloadOutlined,
CloseCircleOutlined,
} from '@ant-design/icons';
import { useHomeContext } from '@/contexts/home-context';
import { useTaskDetail } from '@/hooks/use-api';
import type { TaskStatusString } from '@/services/modules';
const { Text } = Typography;
// ---------- 状态标签配置 ----------
const STATUS_CONFIG: Record<TaskStatusString, { color: string; label: string }> = {
pending: { color: 'blue', label: '排队中' },
submitted: { color: 'cyan', label: '已提交' },
processing: { color: 'orange', label: '处理中' },
success: { color: 'green', label: '已完成' },
failed: { color: 'red', label: '失败' },
};
// ---------- 工具函数 ----------
function isVideoUrl(url: string): boolean {
return /\.(mp4|webm|mov|avi|mkv)(\?|$)/i.test(url);
}
function splitAssets(assets: Array<{ url: string }>): { images: string[]; videos: string[] } {
const images: string[] = [];
const videos: string[] = [];
assets.forEach(({ url }) => {
if (isVideoUrl(url)) videos.push(url);
else images.push(url);
});
return { images, videos };
}
// ---------- 组件 ----------
export function OutputPreview() {
const { token } = antTheme.useToken();
const { selectedTask } = useHomeContext();
// 数据获取（Hook 自动处理：taskId 为 null 时不请求、竞态、loading/error）
const { data: detail, loading } = useTaskDetail(selectedTask?.id);
// 从 output_assets 提取图片/视频
const { images, videos } = useMemo(() => {
if (!detail?.output_assets || detail.output_assets.length === 0) {
return { images: [], videos: [] };
}
return splitAssets(detail.output_assets);
}, [detail]);
const status = selectedTask?.status as TaskStatusString | undefined;
const statusCfg = status
? (STATUS_CONFIG[status] || { color: 'default', label: status })
: { color: 'default', label: '未知' };
// ---- 无选中任务 ----
if (!selectedTask) {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
<Empty description="选择任务记录查看输出" image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>
);
}
// ---- 处理中 ----
if (status === 'pending' || status === 'submitted' || status === 'processing') {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }}>
<Spin size="large" />
<Tag color={statusCfg.color}>{statusCfg.label}</Tag>
<Text type="secondary">任务正在处理中，请稍候...</Text>
</div>
);
}
// ---- 失败 ----
if (status === 'failed') {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12 }}>
<CloseCircleOutlined style={{ fontSize: 48, color: '#ff4d4f' }} />
<Text type="danger" strong>任务执行失败</Text>
{detail?.error_message && (
<Text type="secondary" style={{ maxWidth: 300, textAlign: 'center', fontSize: 12 }}>
{detail.error_message}
</Text>
)}
</div>
);
}
// ---- 加载中 ----
if (loading) {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
<Spin size="large" />
</div>
);
}
// ---- 无结果 ----
if (!detail || images.length + videos.length === 0) {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
<Empty description="暂无输出结果" image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>
);
}
// ---- 展示 ----
return (
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
<div style={{
padding: '12px 16px',
borderBottom: `1px solid ${token.colorBorderSecondary}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexShrink: 0,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<EyeOutlined style={{ fontSize: 14 }} />
<Text strong style={{ fontSize: 13 }}>输出预览</Text>
<Tag color={statusCfg.color} style={{ fontSize: 11 }}>{statusCfg.label}</Tag>
</div>
{videos.length > 0 && (
<Button size="small" type="link" icon={<DownloadOutlined />} href={videos[0]} target="_blank">
下载视频
</Button>
)}
</div>
<div style={{ flex: 1, overflow: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
{videos.map((url, i) => (
<div key={i} style={{ borderRadius: 6, overflow: 'hidden', background: '#000' }}>
<video controls style={{ width: '100%', maxHeight: 360, display: 'block' }} src={url}>
您的浏览器不支持视频播放
</video>
</div>
))}
{images.length === 1 ? (
<Image src={images[0]} alt="输出结果" style={{ borderRadius: 6, width: '100%', objectFit: 'contain' }} />
) : (
<Image.PreviewGroup>
{images.map((url, i) => (
<Image key={i} src={url} alt={`输出结果 ${i + 1}`}
style={{ borderRadius: 6, width: '100%', objectFit: 'contain', marginBottom: 8 }} />
))}
</Image.PreviewGroup>
)}
</div>
</div>
);
}

23
src/pages/home/RightPanel.tsx Normal file
View File

@@ -0,0 +1,23 @@
// ============================================================
// RightPanel — 右列容器（输出预览）
// ============================================================
import { theme as antTheme } from 'antd';
import { OutputPreview } from './OutputPreview';
export function RightPanel() {
const { token } = antTheme.useToken();
return (
<div
style={{
height: '100%',
overflow: 'hidden',
borderRadius: 8,
border: `1px solid ${token.colorBorderSecondary}`,
}}
>
<OutputPreview />
</div>
);
}

250
src/pages/home/TaskHistory.tsx Normal file
View File

@@ -0,0 +1,250 @@
// ============================================================
// TaskHistory — 任务记录列表（分页，横向+纵向滚动）
// 使用 useTaskList() Hook 获取数据，组件仅负责渲染
// ============================================================
import { useState, useRef, useEffect, useCallback } from 'react';
import { Table, Tag, Typography, theme as antTheme } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { HistoryOutlined } from '@ant-design/icons';
import { useTaskList } from '@/hooks/use-api';
import type {
TaskInfoItemResponseBody,
TaskStatusString,
} from '@/services/modules';
import { useHomeContext } from '@/contexts/home-context';
import { on, off, EVENTS } from '@/utils/event-bus';
const { Text } = Typography;
// ---------- 状态标签配置 ----------
const STATUS_CONFIG: Record<TaskStatusString, { color: string; label: string }> = {
pending: { color: 'blue', label: '排队中' },
submitted: { color: 'cyan', label: '已提交' },
processing: { color: 'orange', label: '处理中' },
success: { color: 'green', label: '已完成' },
failed: { color: 'red', label: '失败' },
};
// ---------- 表格列定义 ----------
const columns: ColumnsType<TaskInfoItemResponseBody> = [
{
title: '任务 ID',
dataIndex: 'id',
key: 'id',
width: 140,
ellipsis: true,
fixed: 'left',
render: (id: string) => (
<Text copyable={{ text: id }} style={{ fontSize: 12, fontFamily: 'monospace' }}>
{id.slice(0, 10)}...
</Text>
),
},
{
title: '模型',
dataIndex: 'model_name',
key: 'model_name',
width: 120,
ellipsis: true,
},
{
title: '供应商',
dataIndex: 'provider_name',
key: 'provider_name',
width: 100,
ellipsis: true,
},
{
title: '输出类型',
dataIndex: 'output_type',
key: 'output_type',
width: 80,
render: (t: string) => <Tag>{t}</Tag>,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 80,
render: (s: TaskStatusString) => {
const cfg = STATUS_CONFIG[s] || { color: 'default', label: s };
return <Tag color={cfg.color} style={{ fontSize: 11 }}>{cfg.label}</Tag>;
},
},
{
title: '提示词',
dataIndex: 'prompt',
key: 'prompt',
width: 160,
ellipsis: true,
render: (p: string | undefined) => (
<Text style={{ fontSize: 11 }} title={p}>{p || '-'}</Text>
),
},
{
title: '提交时间',
dataIndex: 'submitted_at',
key: 'submitted_at',
width: 140,
render: (v: Date) => (
<Text style={{ fontSize: 11 }}>
{v ? new Date(v).toLocaleString('zh-CN', {
month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit',
}) : '-'}
</Text>
),
},
{
title: '耗时(分)',
key: 'duration',
width: 80,
render: (_: unknown, record: TaskInfoItemResponseBody) => {
if (!record.submitted_at || !record.finished_at) return <Text style={{ fontSize: 11 }}>-</Text>;
const min = Math.round(
(new Date(record.finished_at).getTime() - new Date(record.submitted_at).getTime()) / 60000,
);
return <Text style={{ fontSize: 11 }}>{min} 分钟</Text>;
},
},
{
title: '费用',
dataIndex: 'cost_cent',
key: 'cost_cent',
width: 80,
render: (c: number) => (
<Text style={{ fontSize: 11 }}>¥{(c / 100).toFixed(2)}</Text>
),
},
{
title: '用户',
dataIndex: 'user_display_name',
key: 'user_display_name',
width: 100,
ellipsis: true,
render: (n: string | null) => (
<Text style={{ fontSize: 11 }}>{n || '-'}</Text>
),
},
];
// ---------- 组件 ----------
export function TaskHistory() {
const { token } = antTheme.useToken();
const {
selectedTask,
setSelectedTask,
taskPage,
taskPageSize,
setTaskPage,
setTaskPageSize,
} = useHomeContext();
// 任务提交事件 → 刷新列表（替代 Context 中的 refreshTaskSignal）
const [refreshTick, setRefreshTick] = useState(0);
const handleTaskSubmitted = useCallback(() => {
setRefreshTick((t) => t + 1);
}, []);
useEffect(() => {
on(EVENTS.TASK_SUBMITTED, handleTaskSubmitted);
return () => {
off(EVENTS.TASK_SUBMITTED, handleTaskSubmitted);
};
}, [handleTaskSubmitted]);
// 数据获取（Hook 自动处理 loading / error / 竞态）
const {
data: taskData,
loading,
errorMessage,
} = useTaskList({ page: taskPage, pageSize: taskPageSize, refreshSignal: refreshTick });
const tasks = taskData?.items ?? [];
const total = taskData?.total ?? 0;
// 表格容器高度（用于 scroll.y）
const tableWrapperRef = useRef<HTMLDivElement>(null);
const [tableBodyHeight, setTableBodyHeight] = useState(400);
useEffect(() => {
const el = tableWrapperRef.current;
if (!el) return;
const observer = new ResizeObserver(() => {
setTableBodyHeight(Math.max(200, el.clientHeight - 80));
});
observer.observe(el);
setTableBodyHeight(Math.max(200, el.clientHeight - 80));
return () => observer.disconnect();
}, []);
// 分页变化
const handleTableChange = (pagination: TablePaginationConfig) => {
if (pagination.current) setTaskPage(pagination.current);
if (pagination.pageSize) setTaskPageSize(pagination.pageSize);
};
// 行样式
const rowClassName = (record: TaskInfoItemResponseBody) =>
selectedTask?.id === record.id ? 'task-row-selected' : '';
return (
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
{/* 标题栏 */}
<div
style={{
padding: '8px 12px',
borderBottom: `1px solid ${token.colorBorderSecondary}`,
display: 'flex',
alignItems: 'center',
gap: 6,
flexShrink: 0,
}}
>
<HistoryOutlined style={{ fontSize: 14 }} />
<Text strong style={{ fontSize: 13 }}>任务记录</Text>
{total > 0 && (
<Text type="secondary" style={{ fontSize: 11 }}>共 {total} 条</Text>
)}
{errorMessage && (
<Text type="danger" style={{ fontSize: 11, marginLeft: 'auto' }}>{errorMessage}</Text>
)}
</div>
{/* 表格 — 横向 + 纵向滚动 */}
<div ref={tableWrapperRef} style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
<Table<TaskInfoItemResponseBody>
columns={columns}
dataSource={tasks}
rowKey="id"
size="small"
loading={loading}
showHeader={true}
scroll={{ x: 1200, y: tableBodyHeight }}
rowClassName={rowClassName}
onRow={(record) => ({
onClick: () => setSelectedTask(record),
style: { cursor: 'pointer' },
})}
onChange={handleTableChange}
pagination={{
current: taskPage,
pageSize: taskPageSize,
total,
size: 'small',
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50'],
placement: ['bottomCenter'],
style: { marginBottom: 0 },
}}
locale={{ emptyText: '暂无任务记录' }}
/>
</div>
</div>
);
}