UI全面精雕: 米兰色衬线体系 + 全页质感升级

主题层: - 更精细的色彩层级(primaryBg/hover/active等语义色) - 字号体系: heading1-5, fontSize 15 基准 - 控件高度 40/48/32 三档, 圆角 6/10 - 三层阴影分层, motionDuration 首页: - 大幅面渐变英雄区(64px padding, 40px 标题) - 直播卡片: 暖棕渐变封面, LIVE 脉冲红点标签 - 悬停 transform+shadow 过渡, 描边高亮仪表盘: - 彩色顶部边框卡片(绿/蓝/棕), 品牌名+标语头部登录页: - 48px 大内边距, 返回首页链接直播列表: - 描述行内展示, 推流码截断, 操作图标组节点页: - 发光圆点在线指示器, 三色 CPU/内存进度阈值 - 在线/离线统计, Origin 标签播放页: - 暗色 #1A1815 背景, 毛玻璃顶栏 - 圆角视频容器, box-shadow 景深 - document.title 动态标题
2026-08-10 16:30:39 +08:00
1 parent d4a3742136
commit f0b8c2d64f
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Card, Form, Input, Button, Typography, message, Space } from 'antd'
-import { LockOutlined } from '@ant-design/icons'
+import { Card, Form, Input, Button, Typography, message, Space, Divider } from 'antd'
+import { LockOutlined, ArrowLeftOutlined } from '@ant-design/icons'
 import { login } from '../api/auth'
 import { useBrand } from '../brand/BrandContext'

@@ -32,37 +32,69 @@ export default function LoginPage() {
      alignItems: 'center',
      justifyContent: 'center',
      background: '#F6F3ED',
+      padding: 24,
    }}>
-      <Card style={{ width: 400, borderRadius: 12, boxShadow: '0 12px 40px rgba(20,20,16,0.06)' }}>
-        <Space direction="vertical" size="large" style={{ width: '100%' }}>
+      <Card
+        style={{
+          width: 420,
+          borderRadius: 14,
+          boxShadow: '0 12px 48px rgba(20,20,16,0.07), 0 2px 8px rgba(20,20,16,0.04)',
+          border: '1px solid #E6E0D6',
+        }}
+        bodyStyle={{ padding: '48px 44px' }}
+      >
+        <Space direction="vertical" size={32} style={{ width: '100%' }}>
          <div style={{ textAlign: 'center' }}>
            {brand.brand_logo_url && (
              <img src={brand.brand_logo_url} alt={brand.brand_name}
-                style={{ height: 36, marginBottom: 12 }} />
+                style={{ height: 40, marginBottom: 16 }} />
            )}
-            <Title level={2} style={{ marginBottom: 4, color: '#C2693A', fontWeight: 600,
-              fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
+            <Title style={{
+              margin: '0 0 8px', fontWeight: 600, fontSize: 28, letterSpacing: -1,
+              fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
+            }}>
              {brand.brand_name}
            </Title>
-            <Text type="secondary">管理控制台</Text>
+            <Text type="secondary" style={{ fontSize: 15 }}>
+              {brand.brand_tagline || '管理控制台'}
+            </Text>
          </div>
-          <Form onFinish={handleSubmit} layout="vertical">
+
+          <Form onFinish={handleSubmit} layout="vertical" size="large">
            <Form.Item
              name="password"
-              rules={[{ required: true, message: '请输入密码' }]}
+              rules={[{ required: true, message: '请输入管理员密码' }]}
+              style={{ marginBottom: 24 }}
            >
              <Input.Password
-                prefix={<LockOutlined />}
+                prefix={<LockOutlined style={{ color: '#8B867D' }} />}
                placeholder="管理员密码"
-                size="large"
+                style={{ height: 48 }}
              />
            </Form.Item>
-            <Form.Item>
-              <Button type="primary" htmlType="submit" loading={loading} block size="large">
-                登录
+            <Form.Item style={{ marginBottom: 0 }}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                loading={loading}
+                block
+                style={{ height: 48, fontSize: 16, fontWeight: 600 }}
+              >
+                登录管理控制台
              </Button>
            </Form.Item>
          </Form>
+
+          <div style={{ textAlign: 'center' }}>
+            <Button
+              type="text"
+              icon={<ArrowLeftOutlined />}
+              onClick={() => navigate('/')}
+              style={{ color: '#8B867D', fontSize: 13 }}
+            >
+              返回首页
+            </Button>
+          </div>
        </Space>
      </Card>
    </div>
@@ -1,11 +1,13 @@
 import { useState, useEffect } from 'react'
-import { Row, Col, Card, Statistic, Typography, Table, Tag } from 'antd'
-import { VideoCameraOutlined, SignalFilled, PlayCircleOutlined } from '@ant-design/icons'
+import { Row, Col, Card, Statistic, Typography, Table, Tag, Skeleton } from 'antd'
+import { SignalFilled, ClockCircleOutlined, PlayCircleOutlined } from '@ant-design/icons'
 import { fetchStreams, type StreamInfo } from '../../api/streams'
+import { useBrand } from '../../brand/BrandContext'

-const { Title } = Typography
+const { Title, Text } = Typography

 export default function Dashboard() {
+  const { brand } = useBrand()
  const [streams, setStreams] = useState<StreamInfo[]>([])
  const [loading, setLoading] = useState(true)

@@ -16,15 +18,12 @@ export default function Dashboard() {
  }, [])

  async function loadData() {
-    try {
-      const data = await fetchStreams()
-      setStreams(data)
-    } catch { /* ignore */ }
+    try { setStreams(await fetchStreams()) } catch { /* */ }
    setLoading(false)
  }

-  const liveCount = streams.filter((s) => s.status === 'live').length
-  const pendingCount = streams.filter((s) => s.status === 'pending').length
+  const liveCount = streams.filter(s => s.status === 'live').length
+  const pendingCount = streams.filter(s => s.status === 'pending').length

  const statusMap: Record<string, { color: string; label: string }> = {
    pending: { color: 'blue', label: '待开播' },
@@ -35,45 +34,46 @@ export default function Dashboard() {

  const columns = [
    { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
-    {
-      title: '状态', dataIndex: 'status', key: 'status', width: 100,
-      render: (s: string) => {
-        const m = statusMap[s] || { color: 'default', label: s }
-        return <Tag color={m.color}>{m.label}</Tag>
-      },
-    },
-    {
-      title: '创建时间', dataIndex: 'created_at', key: 'created_at',
-      render: (v: string) => v?.slice(0, 16), width: 170,
-    },
+    { title: '状态', dataIndex: 'status', key: 'status', width: 100,
+      render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
+    { title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
  ]

  return (
    <div>
-      <Title level={3} style={{ marginBottom: 24 }}>概览</Title>
-      <Row gutter={[24, 24]}>
+      <div style={{ marginBottom: 32 }}>
+        <Title level={2} style={{ margin: 0, fontWeight: 600 }}>{brand.brand_name}</Title>
+        <Text type="secondary" style={{ fontSize: 15 }}>管理控制台</Text>
+      </div>
+
+      <Row gutter={[28, 28]} style={{ marginBottom: 32 }}>
        <Col xs={24} sm={8}>
-          <Card style={{ borderRadius: 10 }}>
-            <Statistic title="直播中" value={liveCount}
-              prefix={<SignalFilled style={{ color: '#5B8C5A' }} />} loading={loading} />
+          <Card style={{ borderRadius: 12, borderTop: '3px solid #5B8C5A' }}>
+            <Statistic title="直播中" value={liveCount} loading={loading}
+              prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 18 }} />} />
          </Card>
        </Col>
        <Col xs={24} sm={8}>
-          <Card style={{ borderRadius: 10 }}>
-            <Statistic title="待开播" value={pendingCount}
-              prefix={<VideoCameraOutlined style={{ color: '#6B8CA8' }} />} loading={loading} />
+          <Card style={{ borderRadius: 12, borderTop: '3px solid #6B8CA8' }}>
+            <Statistic title="待开播" value={pendingCount} loading={loading}
+              prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 18 }} />} />
          </Card>
        </Col>
        <Col xs={24} sm={8}>
-          <Card style={{ borderRadius: 10 }}>
-            <Statistic title="直播总数" value={streams.length}
-              prefix={<PlayCircleOutlined />} loading={loading} />
+          <Card style={{ borderRadius: 12, borderTop: '3px solid #C2693A' }}>
+            <Statistic title="直播总数" value={streams.length} loading={loading}
+              prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 18 }} />} />
          </Card>
        </Col>
      </Row>
-      <Card title="最近直播" style={{ marginTop: 24, borderRadius: 10 }}>
+
+      <Card
+        title={<Title level={4} style={{ margin: 0, fontWeight: 600 }}>最近直播</Title>}
+        style={{ borderRadius: 12 }}
+      >
        <Table dataSource={streams.slice(0, 10)} columns={columns}
-          rowKey="id" loading={loading} pagination={false} size="middle" />
+          rowKey="id" loading={loading} pagination={false} size="middle"
+          locale={{ emptyText: '暂无直播数据' }} />
      </Card>
    </div>
  )
@@ -1,22 +1,12 @@
 import { useState, useEffect } from 'react'
-import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Tooltip, Progress } from 'antd'
-import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Progress } from 'antd'
+import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons'
 import api from '../../api/client'

 const { Title, Text } = Typography

-interface NodeMetrics {
-  cpu_percent: number | null
-  memory_percent: number | null
-  bandwidth_mbps: number | null
-  active_connections: number | null
-  hls_readers: number | null
-}
-interface NodeInfo {
-  id: string; name: string; host: string; hls_port: number; api_port: number
-  weight: number; enabled: boolean; subnet: string; is_origin: boolean
-  online: boolean; metrics: NodeMetrics | null
-}
+interface NodeMetrics { cpu_percent: number | null; memory_percent: number | null; bandwidth_mbps: number | null; active_connections: number | null; hls_readers: number | null }
+interface NodeInfo { id: string; name: string; host: string; hls_port: number; api_port: number; weight: number; enabled: boolean; subnet: string; is_origin: boolean; online: boolean; metrics: NodeMetrics | null }
 interface StrategyInfo { strategy: string; multicast_enabled: boolean; multicast_available: boolean }

 const strategyLabels: Record<string, string> = {
@@ -43,56 +33,109 @@ export default function NodeManager() {
  }
  async function toggleNode(nid: string, en: boolean) {
    const node = nodes.find(n => n.id === nid); if (!node) return
-    try { await api.put(`/nodes/${nid}`, { weight: node.weight, enabled: en })
-      setNodes(p => p.map(n => n.id === nid ? { ...n, enabled: en } : n)); message.success('已更新') } catch { message.error('更新失败') }
+    try { await api.put(`/nodes/${nid}`, { weight: node.weight, enabled: en }); setNodes(p => p.map(n => n.id === nid ? { ...n, enabled: en } : n)); message.success('已更新') } catch { message.error('更新失败') }
  }

  const onlineCount = nodes.filter(n => n.online).length
+  const offlineCount = nodes.length - onlineCount

  const columns = [
-    { title: '状态', dataIndex: 'online', key: 'online', width: 70,
-      render: (v: boolean) => <Tag icon={v ? <CheckCircleOutlined /> : <CloseCircleOutlined />} color={v ? 'success' : 'error'} /> },
-    { title: '名称', dataIndex: 'name', key: 'name' },
+    {
+      title: '', dataIndex: 'online', key: 'online', width: 48,
+      render: (v: boolean, r: NodeInfo) => (
+        <div style={{
+          width: 10, height: 10, borderRadius: '50%',
+          background: v ? '#5B8C5A' : '#B54A4A',
+          boxShadow: `0 0 6px ${v ? 'rgba(91,140,90,0.4)' : 'rgba(181,74,74,0.3)'}`,
+        }} />
+      ),
+    },
+    { title: '名称', dataIndex: 'name', key: 'name',
+      render: (v: string, r: NodeInfo) => <Text strong>{v}{r.is_origin ? <Tag color="warning" style={{ marginLeft: 8 }}>Origin</Tag> : null}</Text> },
    { title: '地址', dataIndex: 'host', key: 'host', width: 130 },
-    { title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130, render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
-    { title: 'CPU', key: 'cpu', width: 70,
+    { title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130,
+      render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
+    {
+      title: 'CPU', key: 'cpu', width: 80,
      render: (_: any, r: NodeInfo) => r.metrics?.cpu_percent != null
-        ? <Progress size="small" percent={Math.round(r.metrics.cpu_percent)} strokeColor="#C2693A" showInfo={false} />
-        : <Text type="secondary">--</Text> },
-    { title: '内存', key: 'mem', width: 70,
+        ? <Progress percent={Math.round(r.metrics.cpu_percent)} size="small" strokeColor={
+          r.metrics.cpu_percent > 80 ? '#B54A4A' : r.metrics.cpu_percent > 60 ? '#C2873A' : '#C2693A'
+        } showInfo={false} />
+        : <Text type="secondary">--</Text>,
+    },
+    {
+      title: '内存', key: 'mem', width: 80,
      render: (_: any, r: NodeInfo) => r.metrics?.memory_percent != null
-        ? <Progress size="small" percent={Math.round(r.metrics.memory_percent)} strokeColor="#C2693A" showInfo={false} />
-        : <Text type="secondary">--</Text> },
-    { title: '带宽', key: 'bw', width: 80,
+        ? <Progress percent={Math.round(r.metrics.memory_percent)} size="small" strokeColor={
+          r.metrics.memory_percent > 80 ? '#B54A4A' : r.metrics.memory_percent > 60 ? '#C2873A' : '#C2693A'
+        } showInfo={false} />
+        : <Text type="secondary">--</Text>,
+    },
+    { title: '带宽', key: 'bw', width: 85,
      render: (_: any, r: NodeInfo) => r.metrics?.bandwidth_mbps != null
        ? <Text style={{ fontSize: 12 }}>{r.metrics.bandwidth_mbps.toFixed(1)} Mbps</Text>
        : <Text type="secondary">--</Text> },
-    { title: '连接', key: 'conn', width: 65,
+    { title: '连接', key: 'conn', width: 60,
      render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null
        ? r.metrics.active_connections : <Text type="secondary">--</Text> },
-    { title: '权重', dataIndex: 'weight', key: 'weight', width: 130,
+    {
+      title: '权重', dataIndex: 'weight', key: 'weight', width: 130,
      render: (_: number, r: NodeInfo) => (
        <InputNumber min={0} max={1000} value={r.weight} size="small" style={{ width: 80 }}
          disabled={r.is_origin}
          onChange={v => { const val = v || 0; setNodes(p => p.map(n => n.id === r.id ? { ...n, weight: val } : n)); updateWeight(r.id, val) }} />
-      ) },
-    { title: '启用', dataIndex: 'enabled', key: 'enabled', width: 65,
-      render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} /> },
+      ),
+    },
+    {
+      title: '启用', dataIndex: 'enabled', key: 'enabled', width: 60,
+      render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} />,
+    },
  ]

  return (
    <div>
-      <Title level={3} style={{ marginBottom: 24 }}>边缘节点</Title>
+      <div style={{ marginBottom: 28 }}>
+        <Title level={3} style={{ margin: '0 0 4px', fontWeight: 600 }}>边缘节点</Title>
+        <Text type="secondary">管理 CDN 边缘节点集群，监控实时状态</Text>
+      </div>
+
      {strategy && (
-        <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
-          <Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="策略" value={strategyLabels[strategy.strategy] || strategy.strategy} /></Card></Col>
-          <Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="组播" value={strategy.multicast_available ? '可用' : '不可用'} valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#999' }} /></Card></Col>
-          <Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="节点总数" value={nodes.length} /></Card></Col>
-          <Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="在线" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A' }} /></Card></Col>
+        <Row gutter={[24, 24]} style={{ marginBottom: 28 }}>
+          <Col xs={24} sm={6}>
+            <Card style={{ borderRadius: 12 }}>
+              <Statistic title="均衡策略" value={strategyLabels[strategy.strategy] || strategy.strategy} valueStyle={{ fontSize: 22 }} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={6}>
+            <Card style={{ borderRadius: 12 }}>
+              <Statistic title="组播状态" value={strategy.multicast_available ? '可用' : '不可用'}
+                valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#B0ABA3', fontSize: 22 }} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={6}>
+            <Card style={{ borderRadius: 12 }}>
+              <Statistic title="在线节点" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A', fontSize: 22 }}
+                suffix={<Text style={{ fontSize: 14, color: '#8B867D' }}>/ {nodes.length}</Text>} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={6}>
+            <Card style={{ borderRadius: 12 }}>
+              <Statistic title="离线节点" value={offlineCount}
+                valueStyle={{ color: offlineCount > 0 ? '#B54A4A' : '#B0ABA3', fontSize: 22 }}
+                prefix={offlineCount > 0 ? <WarningOutlined style={{ fontSize: 18 }} /> : undefined} />
+            </Card>
+          </Col>
        </Row>
      )}
-      <Card title="节点列表" extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>} style={{ borderRadius: 10 }}>
-        <Table dataSource={nodes} columns={columns} rowKey="id" loading={loading} pagination={false} size="small" scroll={{ x: 1100 }} />
+
+      <Card
+        title={<Text strong style={{ fontSize: 16 }}>节点列表</Text>}
+        extra={<Button icon={<ReloadOutlined />} onClick={loadData} type="text">刷新</Button>}
+        style={{ borderRadius: 12 }}
+      >
+        <Table dataSource={nodes} columns={columns} rowKey="id" loading={loading}
+          pagination={false} size="small" scroll={{ x: 1150 }}
+          locale={{ emptyText: '暂无边缘节点' }} />
      </Card>
    </div>
  )
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert } from 'antd'
-import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons'
+import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert, Divider } from 'antd'
+import { CopyOutlined, ArrowLeftOutlined, CheckCircleOutlined } from '@ant-design/icons'
 import { createStream } from '../../api/streams'

 const { Title, Text } = Typography
@@ -29,57 +29,81 @@ export default function StreamForm() {

  if (result) {
    return (
-      <div style={{ maxWidth: 640 }}>
-        <Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
-        <Alert type="success" showIcon message="推流信息" style={{ marginBottom: 24 }}
-          description={
-            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
-              <div>
-                <Text strong>推流码:</Text>
-                <div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', borderRadius: 6, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
-                  {result.stream_key}
-                </div>
+      <div style={{ maxWidth: 680 }}>
+        <div style={{ marginBottom: 28 }}>
+          <CheckCircleOutlined style={{ fontSize: 36, color: '#5B8C5A', marginBottom: 12 }} />
+          <Title level={3} style={{ margin: '0 0 8px', fontWeight: 600 }}>直播已创建</Title>
+          <Text type="secondary">将以下信息提供给推流端即可开始直播</Text>
+        </div>
+
+        <Card style={{ borderRadius: 12, marginBottom: 20 }}>
+          <Space direction="vertical" size={20} style={{ width: '100%' }}>
+            <div>
+              <Text type="secondary" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.5 }}>推流码</Text>
+              <div style={{
+                marginTop: 8, padding: '14px 18px',
+                background: '#F6F3ED', borderRadius: 8,
+                fontFamily: '"SF Mono", "Fira Code", "Cascadia Code", monospace',
+                fontSize: 14, wordBreak: 'break-all',
+                border: '1px solid #E6E0D6',
+              }}>
+                {result.stream_key}
              </div>
-              <div>
-                <Text strong>RTMP 推流地址:</Text>
-                <div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', borderRadius: 6, fontFamily: 'monospace', fontSize: 14, wordBreak: 'break-all' }}>
-                  {result.rtmp_url}
-                </div>
+            </div>
+            <div>
+              <Text type="secondary" style={{ fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.5 }}>RTMP 推流地址</Text>
+              <div style={{
+                marginTop: 8, padding: '14px 18px',
+                background: '#F6F3ED', borderRadius: 8,
+                fontFamily: '"SF Mono", "Fira Code", "Cascadia Code", monospace',
+                fontSize: 14, wordBreak: 'break-all',
+                border: '1px solid #E6E0D6',
+              }}>
+                {result.rtmp_url}
              </div>
-            </Space>
-          }
-        />
-        <Space>
-          <Button icon={<CopyOutlined />} onClick={() => {
+            </div>
+          </Space>
+        </Card>
+
+        <Space size={12}>
+          <Button size="large" icon={<CopyOutlined />} onClick={() => {
            navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`)
-            message.success('已复制')
-          }}>复制全部</Button>
-          <Button type="primary" onClick={() => navigate('/admin/streams')}>返回列表</Button>
+            message.success('已复制到剪贴板')
+          }}>复制全部信息</Button>
+          <Button type="primary" size="large" onClick={() => navigate('/admin/streams')}>返回列表</Button>
        </Space>
      </div>
    )
  }

  return (
-    <div style={{ maxWidth: 640 }}>
-      <Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')} style={{ marginBottom: 16 }}>返回</Button>
-      <Card style={{ borderRadius: 10 }}>
-        <Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
-        <Form layout="vertical" onFinish={handleSubmit}>
-          <Form.Item name="title" label="直播标题" rules={[{ required: true, message: '请输入标题' }]}>
-            <Input placeholder="输入直播标题" size="large" />
+    <div style={{ maxWidth: 680 }}>
+      <Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')}
+        style={{ marginBottom: 16, color: '#5C5952' }}>返回列表</Button>
+
+      <Card style={{ borderRadius: 12 }}>
+        <Title level={3} style={{ marginBottom: 8, fontWeight: 600 }}>创建直播</Title>
+        <Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>填写直播信息，系统将生成推流码与 RTMP 地址</Text>
+
+        <Form layout="vertical" onFinish={handleSubmit} size="large">
+          <Form.Item name="title" label="直播标题"
+            rules={[{ required: true, message: '请输入直播标题' }]}>
+            <Input placeholder="输入直播标题" />
          </Form.Item>
          <Form.Item name="description" label="简介">
-            <TextArea rows={3} placeholder="可选简介" />
+            <TextArea rows={3} placeholder="直播内容简介（可选）" />
          </Form.Item>
-          <Form.Item name="cover_url" label="封面图片地址">
+          <Form.Item name="cover_url" label="封面图片 URL">
            <Input placeholder="https://..." />
          </Form.Item>
          <Form.Item name="scheduled_at" label="预定开播时间">
-            <DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择时间" />
+            <DatePicker showTime style={{ width: '100%' }} placeholder="选择日期（可选）" />
          </Form.Item>
-          <Form.Item>
-            <Button type="primary" htmlType="submit" loading={loading} size="large" block>创建直播</Button>
+          <Divider style={{ margin: '8px 0 24px' }} />
+          <Form.Item style={{ marginBottom: 0 }}>
+            <Button type="primary" htmlType="submit" loading={loading} style={{ height: 48 }} block>
+              创建直播
+            </Button>
          </Form.Item>
        </Form>
      </Card>
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Table, Button, Tag, Space, Typography, message, Tooltip, Popconfirm } from 'antd'
-import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
+import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined, EyeOutlined } from '@ant-design/icons'
 import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '../../api/streams'

-const { Title } = Typography
+const { Title, Text } = Typography

 const statusMap: Record<string, { color: string; label: string }> = {
  pending: { color: 'blue', label: '待开播' },
@@ -36,27 +36,51 @@ export default function StreamList() {
  }

  const columns = [
-    { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
-    { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
-    { title: '状态', dataIndex: 'status', key: 'status', width: 100,
+    { 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: '状态', dataIndex: 'status', key: 'status', width: 90,
      render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
-    { title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
+    { title: '推流码', dataIndex: 'stream_key', key: 'stream_key', width: 130,
+      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,
      render: (_: any, r: StreamInfo) => (
-        <Space size="small">
-          <Button size="small" icon={<LinkOutlined />}
-            onClick={() => { navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }}>
-            复制推流码
-          </Button>
+        <Space size={4}>
+          <Tooltip title="复制推流码">
+            <Button size="small" icon={<LinkOutlined />}
+              onClick={e => { e.stopPropagation(); navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }} />
+          </Tooltip>
          {r.status !== 'live' ? (
-            <Tooltip title="开播"><Button size="small" type="primary" icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} ghost /></Tooltip>
+            <Tooltip title="开播">
+              <Button size="small" type="primary" icon={<PlayCircleOutlined />} ghost
+                onClick={e => { e.stopPropagation(); handleGoLive(r.id) }} />
+            </Tooltip>
          ) : (
-            <Tooltip title="结束"><Button size="small" icon={<StopOutlined />} onClick={() => handleEnd(r.id)} danger /></Tooltip>
+            <Tooltip title="结束直播">
+              <Button size="small" icon={<StopOutlined />} danger
+                onClick={e => { e.stopPropagation(); handleEnd(r.id) }} />
+            </Tooltip>
          )}
-          <Button size="small" onClick={() => window.open(`/watch/${r.id}`, '_blank')}>观看</Button>
-          <Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
-            <Button size="small" icon={<DeleteOutlined />} danger />
+          <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>
          </Popconfirm>
        </Space>
      ),
@@ -66,10 +90,23 @@ export default function StreamList() {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
-        <Title level={3} style={{ margin: 0 }}>直播列表</Title>
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>创建直播</Button>
+        <div>
+          <Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播列表</Title>
+          <Text type="secondary" style={{ 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 }} size="middle" />
+      <Table
+        dataSource={streams}
+        columns={columns}
+        rowKey="id"
+        loading={loading}
+        pagination={{ pageSize: 15, showSizeChanger: false }}
+        size="middle"
+        locale={{ emptyText: '暂无直播，点击上方按钮创建' }}
+      />
    </div>
  )
 }