From 891740e0db4d00f9b64022f06fb0820b8be91050 Mon Sep 17 00:00:00 2001
From: admin <admin@livestream.local>
Date: Fri, 7 Aug 2026 21:04:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5=20/=20?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=B7=B3=E8=BD=AC=20admin=EF=BC=9B=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=85=AC=E5=BC=80=20HomePage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                   |   3 +-
 frontend/src/viewer/pages/HomePage.tsx | 126 +++++++++++++++++++++++++
 2 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/viewer/pages/HomePage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f434378..63854ff 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import StreamList from './admin/pages/StreamList'
 import StreamForm from './admin/pages/StreamForm'
 import NodeManager from './admin/pages/NodeManager'
 import SettingsPage from './admin/pages/Settings'
+import HomePage from './viewer/pages/HomePage'
 import WatchPage from './viewer/pages/WatchPage'
 import { verifyToken } from './api/auth'
 import { getToken } from './api/client'
@@ -46,7 +47,7 @@ export default function App() {
             <Route path="nodes" element={<NodeManager />} />
             <Route path="settings" element={<SettingsPage />} />
           </Route>
-          <Route path="/" element={<Navigate to="/admin" replace />} />
+          <Route path="/" element={<HomePage />} />
         </Routes>
       </BrowserRouter>
     </ConfigProvider>
diff --git a/frontend/src/viewer/pages/HomePage.tsx b/frontend/src/viewer/pages/HomePage.tsx
new file mode 100644
index 0000000..4974561
--- /dev/null
+++ b/frontend/src/viewer/pages/HomePage.tsx
@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Layout, Row, Col, Card, Typography, Tag, Button, Skeleton, Empty, Space,
+} from 'antd'
+import { LoginOutlined, FireOutlined, ClockCircleOutlined } from '@ant-design/icons'
+import { fetchStreams, type StreamInfo } from '../api/streams'
+
+const { Header, Content } = Layout
+const { Title, Text } = Typography
+
+const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
+  live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
+  pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
+  ended: { color: 'default', label: '已结束', icon: null },
+  cancelled: { color: 'default', label: '已取消', icon: null },
+}
+
+export default function HomePage() {
+  const [streams, setStreams] = useState<StreamInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    fetchStreams()
+      .then(setStreams)
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  const sorted = [...streams].sort((a, b) => {
+    const order: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 }
+    return (order[a.status] ?? 9) - (order[b.status] ?? 9)
+  })
+
+  return (
+    <Layout style={{ minHeight: '100vh', background: '#FAF8F5' }}>
+      <Header style={{
+        background: '#FFFFFF',
+        borderBottom: '1px solid #E8E4DD',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 32px',
+        height: 60,
+      }}>
+        <Title level={4} style={{ margin: 0, letterSpacing: -0.5, color: '#1A1A16' }}>
+          LiveStream
+          <Text type="secondary" style={{ fontSize: 14, marginLeft: 10, fontWeight: 400 }}>
+            简易直播平台
+          </Text>
+        </Title>
+        <Button
+          type="text"
+          icon={<LoginOutlined />}
+          onClick={() => navigate('/admin')}
+        >
+          管理后台
+        </Button>
+      </Header>
+      <Content style={{ padding: '32px 48px', maxWidth: 1280, margin: '0 auto' }}>
+        <Title level={3} style={{ marginBottom: 24 }}>全部直播</Title>
+
+        {loading ? (
+          <Row gutter={[24, 24]}>
+            {[1,2,3,4,5,6].map((i) => (
+              <Col key={i} xs={24} sm={12} md={8} lg={8}>
+                <Card><Skeleton active /></Card>
+              </Col>
+            ))}
+          </Row>
+        ) : sorted.length === 0 ? (
+          <Empty description="暂无直播" style={{ marginTop: 80 }} />
+        ) : (
+          <Row gutter={[24, 24]}>
+            {sorted.map((s) => {
+              const meta = statusMeta[s.status] ?? statusMeta.pending
+              return (
+                <Col key={s.id} xs={24} sm={12} md={8} lg={8}>
+                  <Card
+                    hoverable
+                    style={{ overflow: 'hidden', borderRadius: 8 }}
+                    cover={
+                      <div style={{
+                        height: 160,
+                        background: s.cover_url
+                          ? `url(${s.cover_url}) center/cover no-repeat`
+                          : 'linear-gradient(135deg, #2b2b2b 0%, #1a1a16 100%)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}>
+                        {!s.cover_url && (
+                          <Text style={{ color: '#666', fontSize: 36 }}>
+                            {s.status === 'live' ? <FireOutlined style={{ color: '#D97757' }} /> : '🎬'}
+                          </Text>
+                        )}
+                      </div>
+                    }
+                    onClick={() => navigate(`/watch/${s.id}`)}
+                  >
+                    <Card.Meta
+                      title={
+                        <Space>
+                          <Tag color={meta.color} style={{ margin: 0 }}>
+                            {meta.icon} {meta.label}
+                          </Tag>
+                          <Text ellipsis style={{ maxWidth: 160 }}>{s.title}</Text>
+                        </Space>
+                      }
+                      description={
+                        s.description
+                          ? <Text type="secondary" ellipsis>{s.description}</Text>
+                          : <Text type="secondary" italic>暂无简介</Text>
+                      }
+                    />
+                  </Card>
+                </Col>
+              )
+            })}
+          </Row>
+        )}
+      </Content>
+    </Layout>
+  )
+}