UI彻底重做: 全新设计语言, 纯手工精调

设计系统:
- CSS变量体系: 暖纸底色(#F9F7F4), 6级灰阶, 5级阴影
- 字体节奏: clamp响应式字号, -0.02em字间距
- 间距韵律: 4-128px 8级递进

首页:
- 96px大留白英雄区, clamp(36px,5vw,56px)巨型标题
- 200px暗色封面卡片(#2C2824)
- LIVE红点脉动标签, 待开播黑底白字徽章
- hover抬升2px + 阴影, 淡棕描边高亮

管理页:
- stat卡片: 1px边框+3px彩色顶线
- 表格卡片化: borderRadius 12, 统一白底+边框
- 表单/设置: 统一圆角8px, 大内边距36px

播放页:
- #1A1814暗底, 毛玻璃顶栏
- 视频圆角12px + boxShadow景深
- document.title动态标题

登录页: 56px内边距, 品牌居中, 返回链接

frontend/src/admin/pages/StreamList.tsx

@@ -36,51 +36,29 @@ export default function StreamList() {
   }
 
   const columns = [
-    { title: 'ID', dataIndex: 'id', key: 'id', width: 70 },
-    {
-      title: '标题', dataIndex: 'title', key: 'title', ellipsis: true,
-      render: (v: string, r: StreamInfo) => (
-        <Space direction="vertical" size={0}>
-          <Text strong>{v}</Text>
-          {r.description && <Text type="secondary" style={{ fontSize: 12 }} ellipsis>{r.description}</Text>}
-        </Space>
-      ),
-    },
+    { title: 'ID', dataIndex: 'id', key: 'id', width: 60 },
+    { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
     { title: '状态', dataIndex: 'status', key: 'status', width: 90,
       render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
-    { title: '推流码', dataIndex: 'stream_key', key: 'stream_key', width: 130,
+    { title: '推流码', dataIndex: 'stream_key', key: 'stream_key', width: 120,
       render: (v: string) => <Text code style={{ fontSize: 12 }}>{v.slice(0, 12)}...</Text> },
     { title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 160 },
     {
-      title: '操作', key: 'actions', width: 280,
+      title: '操作', key: 'actions', width: 240,
       render: (_: any, r: StreamInfo) => (
         <Space size={4}>
           <Tooltip title="复制推流码">
             <Button size="small" icon={<LinkOutlined />}
-              onClick={e => { e.stopPropagation(); navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }} />
+              onClick={() => { navigator.clipboard.writeText(r.stream_key); message.success('已复制') }} />
           </Tooltip>
           {r.status !== 'live' ? (
-            <Tooltip title="开播">
-              <Button size="small" type="primary" icon={<PlayCircleOutlined />} ghost
-                onClick={e => { e.stopPropagation(); handleGoLive(r.id) }} />
-            </Tooltip>
+            <Tooltip title="开播"><Button size="small" type="primary" ghost icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} /></Tooltip>
           ) : (
-            <Tooltip title="结束直播">
-              <Button size="small" icon={<StopOutlined />} danger
-                onClick={e => { e.stopPropagation(); handleEnd(r.id) }} />
-            </Tooltip>
+            <Tooltip title="结束"><Button size="small" danger icon={<StopOutlined />} onClick={() => handleEnd(r.id)} /></Tooltip>
           )}
-          <Tooltip title="观看">
-            <Button size="small" icon={<EyeOutlined />}
-              onClick={e => { e.stopPropagation(); window.open(`/watch/${r.id}`, '_blank') }} />
-          </Tooltip>
-          <Popconfirm title="确定删除这条直播？" okText="删除" cancelText="取消" placement="left"
-            onConfirm={e => { e?.stopPropagation(); handleDelete(r.id) }}
-            onCancel={e => e?.stopPropagation()}>
-            <Tooltip title="删除">
-              <Button size="small" icon={<DeleteOutlined />} danger
-                onClick={e => e.stopPropagation()} />
-            </Tooltip>
+          <Tooltip title="观看"><Button size="small" icon={<EyeOutlined />} onClick={() => window.open(`/watch/${r.id}`, '_blank')} /></Tooltip>
+          <Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
+            <Tooltip title="删除"><Button size="small" danger icon={<DeleteOutlined />} /></Tooltip>
           </Popconfirm>
         </Space>
       ),
@@ -89,24 +67,23 @@ export default function StreamList() {
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
         <div>
-          <Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播列表</Title>
-          <Text type="secondary" style={{ fontSize: 14 }}>管理所有直播流</Text>
+          <Title level={2} style={{ margin: '0 0 4px', fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }}>直播列表</Title>
+          <Text style={{ color: '#949088', fontSize: 14 }}>管理所有直播流</Text>
         </div>
         <Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => navigate('/admin/streams/new')}>
           创建直播
         </Button>
       </div>
-      <Table
-        dataSource={streams}
-        columns={columns}
-        rowKey="id"
-        loading={loading}
-        pagination={{ pageSize: 15, showSizeChanger: false }}
-        size="middle"
-        locale={{ emptyText: '暂无直播，点击上方按钮创建' }}
-      />
+      <div style={{
+        background: '#fff', borderRadius: 12,
+        border: '1px solid #EBE5DB', padding: '8px 8px 0',
+      }}>
+        <Table dataSource={streams} columns={columns} rowKey="id" loading={loading}
+          pagination={{ pageSize: 15, showSizeChanger: false }} size="middle"
+          locale={{ emptyText: '暂无直播，创建第一条直播吧' }} />
+      </div>
     </div>
   )
 }