fix(web): 趋势图改用 colorField，折线分色并显示指标图例

web/src/components/creator/WorksGallery.tsx

@@ -44,7 +44,7 @@ export function WorkCover({ workID, title }: { workID: string; title?: string })
   );
 }
 
-// 观看/点赞/评论/分享全宽四列 GRID，贴在封面下方（body padding 置 0，本行自带上下边框）。
+// 观看/点赞/评论/分享全宽四列 GRID，紧贴封面（卡片 body 顶部，本行自带上下边框）。
 function WorkStatsGrid({ work }: { work: any }) {
   const items = [
     { key: 'play_count', label: '观看', icon: EyeOutlined },
@@ -53,15 +53,15 @@ function WorkStatsGrid({ work }: { work: any }) {
     { key: 'shares', label: '分享', icon: ShareAltOutlined },
   ];
   return (
-    <Flex style={{ margin: '10px 0 0', padding: '8px 0', borderTop: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0' }}>
+    <Flex style={{ padding: '6px 0', borderTop: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0' }}>
       {items.map(({ key, label, icon: Icon }) => (
-        <Flex key={key} vertical align="center" gap={2} style={{ flex: 1, minWidth: 0 }}>
-          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-            <Icon /> {label}
-          </Typography.Text>
-          <Typography.Text strong style={{ fontSize: 12 }}>
+        <Flex key={key} vertical align="center" gap={0} style={{ flex: 1, minWidth: 0 }}>
+          <Typography.Text strong style={{ fontSize: 14, lineHeight: '20px' }}>
             {work[key] ?? '—'}
           </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 11, lineHeight: '16px' }}>
+            <Icon /> {label}
+          </Typography.Text>
         </Flex>
       ))}
     </Flex>
@@ -96,7 +96,7 @@ function GrowthChart({ metrics }: { metrics: any[] }) {
       data={data}
       xField="time"
       yField="value"
-      seriesField="metric"
+      colorField="metric"
       height={240}
       yAxis={{ labelFormatter: (v: number) => (v >= 10000 ? `${(v / 10000).toFixed(1)}w` : `${v}`) }}
       legend={{ position: 'top' }}
@@ -231,7 +231,8 @@ export default function WorksGallery({ sourceId, sourceType, emptyHint }: WorksG
                     onClick={() => openWorkDetail(work)}
                     cover={<WorkCover workID={work.id} title={work.title} />}
                   >
-                    <div style={{ padding: '12px 16px 0' }}>
+                    <WorkStatsGrid work={work} />
+                    <div style={{ padding: '10px 16px 0' }}>
                       <Flex vertical gap={8} style={{ minWidth: 0 }}>
                         <Typography.Paragraph strong ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
                           {work.title || '无标题'}
@@ -246,7 +247,6 @@ export default function WorksGallery({ sourceId, sourceType, emptyHint }: WorksG
                         </Typography.Text>
                       </Flex>
                     </div>
-                    <WorkStatsGrid work={work} />
                     {work.likes_growth != null && work.likes_growth > 0 ? (
                       <Typography.Text type="warning" style={{ display: 'block', padding: '8px 16px 0', fontSize: 12 }}>
                         <FireOutlined /> 24h +{work.likes_growth}

web/src/pages/accounts/$id/index.tsx

@@ -52,7 +52,7 @@ function AccountTrendChart({ metrics }: { metrics: any[] }) {
       data={data}
       xField="time"
       yField="value"
-      seriesField="metric"
+      colorField="metric"
       height={240}
       yAxis={{ labelFormatter: (v: number) => (v >= 10000 ? `${(v / 10000).toFixed(1)}w` : `${v}`) }}
       legend={{ position: 'top' }}