refactor(inbox): 侧边栏素材列表改为轻量 Flex 布局 — Card→Flex, 新增状态 Tag, hover 切换删除按钮, 左侧竖线选中态

src/web/features/inbox/components/MaterialCard.tsx

@@ -1,7 +1,7 @@
 import { DeleteOutlined } from "@ant-design/icons";
-import { Button, Card, Flex, Popconfirm, Typography } from "antd";
+import { Button, Flex, Popconfirm, Tag, Typography } from "antd";
 
-import type { Material } from "../types";
+import type { Material, MaterialStatus } from "../types";
 
 interface MaterialCardProps {
   material: Material;
@@ -10,34 +10,55 @@ interface MaterialCardProps {
   selected: boolean;
 }
 
-export function MaterialCard({ material, onDelete, onSelect }: MaterialCardProps) {
+const STATUS_MAP: Record<MaterialStatus, { color: string; label: string }> = {
+  approved: { color: "green", label: "已通过" },
+  discarded: { color: "red", label: "已放弃" },
+  pending: { color: "gold", label: "待审核" },
+};
+
+export function MaterialCard({ material, onDelete, onSelect, selected }: MaterialCardProps) {
+  const statusInfo = STATUS_MAP[material.status];
+  const className = selected ? "material-list-item material-list-item--selected" : "material-list-item";
+
   return (
-    <Card hoverable={false} onClick={onSelect} size="small">
-      <Typography.Paragraph ellipsis={{ rows: 3 }}>{material.description}</Typography.Paragraph>
-      <Flex align="center" justify="space-between">
-        <Typography.Text type="secondary">{formatMaterialTime(material.createdAt)}</Typography.Text>
-        <Popconfirm
-          description="删除后不可恢复"
-          okButtonProps={{ danger: true }}
-          okText="删除"
-          onCancel={(e) => e?.stopPropagation()}
-          onConfirm={(e) => {
-            e?.stopPropagation();
-            onDelete();
-          }}
-          title="确认删除该素材？"
-        >
-          <Button
-            aria-label="删除"
-            danger
-            icon={<DeleteOutlined />}
-            onClick={(e) => e.stopPropagation()}
-            size="small"
-            type="text"
-          />
-        </Popconfirm>
-      </Flex>
-    </Card>
+    <Flex align="center" className={className} gap="small" justify="space-between" onClick={onSelect}>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <Typography.Text ellipsis strong={selected}>
+          {material.description}
+        </Typography.Text>
+        <br />
+        <Typography.Text className="material-item-time" type="secondary">
+          {formatMaterialTime(material.createdAt)}
+        </Typography.Text>
+      </div>
+      <div className="material-item-right">
+        <span className="material-item-tag">
+          {statusInfo && <Tag color={statusInfo.color}>{statusInfo.label}</Tag>}
+        </span>
+        <span className="material-item-actions">
+          <Popconfirm
+            description="删除后不可恢复"
+            okButtonProps={{ danger: true }}
+            okText="删除"
+            onCancel={(e) => e?.stopPropagation()}
+            onConfirm={(e) => {
+              e?.stopPropagation();
+              onDelete();
+            }}
+            title="确认删除该素材？"
+          >
+            <Button
+              aria-label="删除"
+              danger
+              icon={<DeleteOutlined />}
+              onClick={(e) => e.stopPropagation()}
+              size="small"
+              type="text"
+            />
+          </Popconfirm>
+        </span>
+      </div>
+    </Flex>
   );
 }