diff --git a/src/web/features/inbox/components/MaterialContent.tsx b/src/web/features/inbox/components/MaterialContent.tsx index c14c31d..a57cb7c 100644 --- a/src/web/features/inbox/components/MaterialContent.tsx +++ b/src/web/features/inbox/components/MaterialContent.tsx @@ -1,22 +1,14 @@ import { Card, Descriptions, Tag, Typography } from "antd"; -import type { Material, MaterialStatus, MaterialType } from "../types"; +import type { Material, MaterialType } from "../types"; import { formatRelativeTime } from "../../../shared/utils/time"; +import { STATUS_MAP } from "./constants"; interface MaterialContentProps { material: Material; } -const STATUS_MAP: Record = { - approved: { color: "green", label: "已通过" }, - discarded: { color: "red", label: "已放弃" }, - failed: { color: "magenta", label: "失败" }, - pending: { color: "gold", label: "待处理" }, - processing: { color: "blue", label: "处理中" }, - review: { color: "orange", label: "待审核" }, -}; - const MATERIAL_TYPE_LABELS: Record = { general: "通用", meeting: "会议", @@ -27,7 +19,7 @@ export function MaterialContent({ material }: MaterialContentProps) { const typeLabel = MATERIAL_TYPE_LABELS[material.materialType] ?? material.materialType; return ( -
+ <> 素材详情 {material.description} @@ -52,6 +44,6 @@ export function MaterialContent({ material }: MaterialContentProps) { {formatRelativeTime(material.createdAt)} -
+ ); } diff --git a/src/web/features/inbox/components/MaterialDetailPanel.tsx b/src/web/features/inbox/components/MaterialDetailPanel.tsx index 73dfea5..4fffc63 100644 --- a/src/web/features/inbox/components/MaterialDetailPanel.tsx +++ b/src/web/features/inbox/components/MaterialDetailPanel.tsx @@ -1,9 +1,8 @@ import { CheckOutlined, CloseOutlined, RedoOutlined } from "@ant-design/icons"; -import { App as AntApp, Button, Empty, Result, Space, Spin } from "antd"; - -import type { Material } from "../types"; +import { App as AntApp, Button, Empty, Result, Space, Spin, Tag } from "antd"; import { useMaterial } from "../../../shared/hooks/use-materials"; +import { STATUS_MAP } from "./constants"; import { MaterialContent } from "./MaterialContent"; interface MaterialDetailPanelProps { @@ -23,8 +22,10 @@ export function MaterialDetailPanel({ }: MaterialDetailPanelProps) { if (!materialId) { return ( -
- +
+
+ +
); } @@ -46,24 +47,30 @@ function MaterialDetailPanelInner({ materialId, onApprove, onDiscard, onRetry, p if (isLoading) { return ( -
- +
+
+ +
); } if (error) { return ( -
- +
+
+ +
); } if (!data || !materialId) { return ( -
- +
+
+ +
); } @@ -97,44 +104,32 @@ function MaterialDetailPanelInner({ materialId, onApprove, onDiscard, onRetry, p } }; + const statusInfo = STATUS_MAP[data.status] ?? { color: "default", label: data.status }; + return ( -
- - +
+
+ +
+
+ {statusInfo.label} + {data.status === "review" ? ( + + + + + ) : data.status === "failed" ? ( + + + + ) : null} +
); } - -interface ActionButtonsProps { - material: Material; - onApprove: () => Promise; - onDiscard: () => Promise; - onRetry: () => Promise; -} - -function ActionButtons({ material, onApprove, onDiscard, onRetry }: ActionButtonsProps) { - if (material.status === "review") { - return ( - - - - - ); - } - - if (material.status === "failed") { - return ( - - - - ); - } - - return null; -} diff --git a/src/web/features/inbox/components/constants.ts b/src/web/features/inbox/components/constants.ts new file mode 100644 index 0000000..00c0899 --- /dev/null +++ b/src/web/features/inbox/components/constants.ts @@ -0,0 +1,10 @@ +import type { MaterialStatus } from "../types"; + +export const STATUS_MAP: Record = { + approved: { color: "green", label: "已通过" }, + discarded: { color: "red", label: "已放弃" }, + failed: { color: "magenta", label: "失败" }, + pending: { color: "gold", label: "待处理" }, + processing: { color: "blue", label: "处理中" }, + review: { color: "orange", label: "待审核" }, +}; diff --git a/src/web/styles.css b/src/web/styles.css index a29c676..393602f 100644 --- a/src/web/styles.css +++ b/src/web/styles.css @@ -338,16 +338,31 @@ body { overflow: hidden; } -.app-inbox-content { +.app-inbox-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; +} + +.app-inbox-content { + flex: 1; + min-height: 0; padding: var(--ant-padding-xl); overflow-y: auto; } +.app-inbox-action-bar { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: var(--ant-padding-sm) var(--ant-padding-xl); + border-top: 1px solid var(--ant-color-border-secondary); + background: var(--ant-color-bg-container); +} + .app-inbox-datepicker { width: 100%; }