重做观众端衬线体直播界面

frontend/src/App.tsx

@@ -1,21 +1,22 @@
-import { useState, useEffect } from 'react'
+import { lazy, Suspense, useState, useEffect } from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { ConfigProvider } from 'antd'
 import zhCN from 'antd/locale/zh_CN'
 import theme from './theme/anthropic'
 import { BrandProvider, useBrand } from './brand/BrandContext'
-import AdminLayout from './admin/AdminLayout'
-import LoginPage from './admin/LoginPage'
-import Dashboard from './admin/pages/Dashboard'
-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'
 
+const HomePage = lazy(() => import('./viewer/pages/HomePage'))
+const WatchPage = lazy(() => import('./viewer/pages/WatchPage'))
+const AdminLayout = lazy(() => import('./admin/AdminLayout'))
+const LoginPage = lazy(() => import('./admin/LoginPage'))
+const Dashboard = lazy(() => import('./admin/pages/Dashboard'))
+const StreamList = lazy(() => import('./admin/pages/StreamList'))
+const StreamForm = lazy(() => import('./admin/pages/StreamForm'))
+const NodeManager = lazy(() => import('./admin/pages/NodeManager'))
+const SettingsPage = lazy(() => import('./admin/pages/Settings'))
+
 function AdminGuard({ children }: { children: React.ReactNode }) {
   const [authed, setAuthed] = useState<boolean | null>(null)
 
@@ -35,6 +36,7 @@ function AppRoutes() {
   useEffect(() => { document.title = brand.brand_name }, [brand.brand_name])
   return (
     <BrowserRouter>
+      <Suspense fallback={<div className="route-loading" role="status" aria-label="页面加载中" />}>
         <Routes>
         <Route path="/watch/:id" element={<WatchPage />} />
         <Route path="/admin/login" element={<LoginPage />} />
@@ -51,6 +53,7 @@ function AppRoutes() {
         </Route>
         <Route path="/" element={<HomePage />} />
         </Routes>
+      </Suspense>
     </BrowserRouter>
   )
 }

frontend/src/viewer/pages/HomePage.tsx

@@ -1,11 +1,10 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Row, Col, Tag, Skeleton } from 'antd'
+import { Skeleton } from 'antd'
 import { VideoCameraOutlined } from '@ant-design/icons'
 import { fetchStreams, type StreamInfo } from '../../api/streams'
 import { useBrand } from '../../brand/BrandContext'
-
+import './viewer.css'
-const liveDot = { width: 8, height: 8, borderRadius: '50%', background: '#E53935', display: 'inline-block', marginRight: 6, boxShadow: '0 0 0 2px rgba(229,57,53,0.2)' }
 
 export default function HomePage() {
   const { brand } = useBrand()
@@ -14,7 +13,12 @@ export default function HomePage() {
   const navigate = useNavigate()
 
   useEffect(() => {
-    fetchStreams().then(setStreams).catch(() => {}).finally(() => setLoading(false))
+    let active = true
+    fetchStreams()
+      .then(data => { if (active) setStreams(data) })
+      .catch(() => {})
+      .finally(() => { if (active) setLoading(false) })
+    return () => { active = false }
   }, [])
 
   const sorted = [...streams].sort((a, b) => {
@@ -23,68 +27,44 @@ export default function HomePage() {
   })
 
   return (
-    <div style={{ minHeight: '100vh', background: '#F9F7F4' }}>
+    <div className="viewer-shell">
-      {/* Hero */}
+      <header className="viewer-hero">
-      <section style={{
+        <div className="viewer-eyebrow">LIVE PROGRAMME</div>
-        padding: '96px 48px 80px',
-        maxWidth: 1200, margin: '0 auto',
-      }}>
         {brand.brand_logo_url && (
           <img src={brand.brand_logo_url} alt={brand.brand_name}
-            style={{ height: 36, marginBottom: 24, display: 'block' }} />
+            className="viewer-logo" />
         )}
-        <h1 style={{
+        <h1 className="viewer-title">
-          fontSize: 'clamp(36px, 5vw, 56px)',
-          fontWeight: 600,
-          lineHeight: 1.1,
-          letterSpacing: '-0.03em',
-          margin: 0,
-          color: '#1C1A17',
-        }}>
           {brand.brand_name}
         </h1>
         {brand.brand_tagline && (
-          <p style={{
+          <p className="viewer-tagline">
-            fontSize: 'clamp(16px, 2vw, 20px)',
-            color: '#5E5A52', marginTop: 16,
-            fontWeight: 400, lineHeight: 1.5,
-          }}>
             {brand.brand_tagline}
           </p>
         )}
-      </section>
+      </header>
 
-      {/* Streams */}
+      <main className="viewer-main">
-      <section style={{
+        <div className="viewer-section-heading">
-        maxWidth: 1200, margin: '0 auto',
+          <h2>
-        padding: '0 48px 96px',
-      }}>
-        <div style={{
-          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
-          marginBottom: 40, paddingBottom: 16,
-          borderBottom: '1px solid #EBE5DB',
-        }}>
-          <h2 style={{ fontSize: 22, fontWeight: 600, margin: 0, letterSpacing: '-0.02em' }}>
             直播频道
           </h2>
-          <span style={{ fontSize: 14, color: '#949088' }}>
+          <span>
             {sorted.length} 个节目
           </span>
         </div>
 
         {loading ? (
-          <Row gutter={[32, 40]}>
+          <div className="stream-grid" aria-label="正在加载直播节目">
             {[1,2,3,4,5,6].map(i => (
-              <Col key={i} xs={24} sm={12} lg={8}>
+              <div className="stream-card stream-skeleton" key={i}>
-                <div style={{ background: '#fff', borderRadius: 10, overflow: 'hidden' }}>
+                  <div className="stream-cover" />
-                  <div style={{ height: 200, background: '#F3F0EC' }} />
+                  <div className="stream-copy">
-                  <div style={{ padding: '20px 24px 24px' }}>
                     <Skeleton active paragraph={{ rows: 2 }} title={{ width: '60%' }} />
                   </div>
               </div>
-              </Col>
             ))}
-          </Row>
+          </div>
         ) : sorted.length === 0 ? (
           <div style={{
             textAlign: 'center', padding: '80px 0',
@@ -95,101 +75,60 @@ export default function HomePage() {
             <p style={{ color: '#949088', fontSize: 14, marginTop: 4 }}>当前没有正在播出或排期的直播节目</p>
           </div>
         ) : (
-          <Row gutter={[32, 40]}>
+          <div className="stream-grid">
             {sorted.map(s => {
               const isLive = s.status === 'live'
               const isPending = s.status === 'pending'
               return (
-                <Col key={s.id} xs={24} sm={12} lg={8}>
+                <article key={s.id}>
-                  <div
+                  <button
+                    type="button"
+                    className={`stream-card${isLive ? ' is-live' : ''}`}
                     onClick={() => navigate(`/watch/${s.id}`)}
-                    style={{
-                      background: '#fff',
-                      borderRadius: 10,
-                      overflow: 'hidden',
-                      cursor: 'pointer',
-                      transition: 'transform 0.2s, box-shadow 0.2s',
-                      border: `1px solid ${isLive ? '#E8D0BE' : '#EBE5DB'}`,
-                    }}
-                    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(28,26,23,0.06)' }}
-                    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none' }}
                   >
                     {/* Cover */}
-                    <div style={{
+                    <div className="stream-cover" style={s.cover_url ? { backgroundImage: `url(${s.cover_url})` } : undefined}>
-                      height: 200, position: 'relative',
-                      background: s.cover_url
-                        ? `url(${s.cover_url}) center/cover no-repeat`
-                        : '#2C2824',
-                      display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    }}>
                       {!s.cover_url && (
                         <VideoCameraOutlined style={{ color: 'rgba(249,247,244,0.08)', fontSize: 56 }} />
                       )}
                       {/* Status badge */}
                       {isLive && (
-                        <div style={{
+                        <div className="stream-status live">
-                          position: 'absolute', top: 16, left: 16,
+                          <span className="live-dot" />直播中
-                          display: 'inline-flex', alignItems: 'center',
-                          background: 'rgba(229,57,53,0.92)', color: '#fff',
-                          padding: '4px 12px', borderRadius: 4,
-                          fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
-                        }}>
-                          <span style={liveDot} />LIVE
                         </div>
                       )}
                       {isPending && (
-                        <div style={{
+                        <div className="stream-status pending">
-                          position: 'absolute', top: 16, left: 16,
-                          background: '#1C1A17', color: '#F9F7F4',
-                          padding: '4px 12px', borderRadius: 4,
-                          fontSize: 12, fontWeight: 600,
-                        }}>
                           待开播
                         </div>
                       )}
                       {!isLive && !isPending && (
-                        <div style={{
+                        <div>
-                          position: 'absolute', bottom: 16, left: 16,
+                          <span className="stream-status ended">
-                        }}>
-                          <Tag color="default" style={{ margin: 0, border: 0, fontSize: 11 }}>
                             {s.status === 'ended' ? '已结束' : '已取消'}
-                          </Tag>
+                          </span>
                         </div>
                       )}
                     </div>
                     {/* Info */}
-                    <div style={{ padding: '20px 24px 24px' }}>
+                    <div className="stream-copy">
-                      <h3 style={{
+                      <h3>
-                        fontSize: 17, fontWeight: 600, margin: '0 0 6px',
-                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                        letterSpacing: '-0.01em',
-                      }}>
                         {s.title}
                       </h3>
-                      <p style={{
+                      <p>
-                        fontSize: 14, color: '#949088', margin: 0,
-                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                        lineHeight: 1.4,
-                      }}>
                         {s.description || '暂无简介'}
                       </p>
                     </div>
-                  </div>
+                  </button>
-                </Col>
+                </article>
               )
             })}
-          </Row>
+          </div>
         )}
-      </section>
+      </main>
 
-      {/* Footer */}
+      <footer className="viewer-footer">
-      <footer style={{
+        <span>
-        borderTop: '1px solid #EBE5DB',
-        padding: '24px 48px',
-        textAlign: 'center',
-        background: '#fff',
-      }}>
-        <span style={{ fontSize: 13, color: '#949088' }}>
           {brand.brand_name} &copy; {new Date().getFullYear()}
         </span>
       </footer>

frontend/src/viewer/pages/WatchPage.tsx

@@ -5,6 +5,7 @@ import { ArrowLeftOutlined, WifiOutlined, SignalFilled } from '@ant-design/icons
 import Hls from 'hls.js'
 import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams'
 import { useBrand } from '../../brand/BrandContext'
+import './viewer.css'
 
 const { Text } = Typography
 
@@ -17,13 +18,13 @@ export default function WatchPage() {
   const [loading, setLoading] = useState(true)
   const [activeLine, setActiveLine] = useState<string>('')
   const [activeQuality, setActiveQuality] = useState<string>('')
-  const [hls, setHls] = useState<Hls | null>(null)
+  const hlsRef = useRef<Hls | null>(null)
 
   useEffect(() => {
     if (!id) return
     loadInfo()
     const timer = setInterval(loadInfo, 15000)
-    return () => { clearInterval(timer); if (hls) hls.destroy() }
+    return () => clearInterval(timer)
   }, [id])
 
   async function loadInfo() {
@@ -55,16 +56,21 @@ export default function WatchPage() {
     if (!line) return
     const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0]
     if (!quality) return
-    if (hls) hls.destroy()
+    hlsRef.current?.destroy()
+    hlsRef.current = null
     if (Hls.isSupported()) {
       const hi = new Hls({ enableWorker: false, lowLatencyMode: false })
       hi.loadSource(quality.url); hi.attachMedia(videoRef.current!)
       hi.on(Hls.Events.MANIFEST_PARSED, () => { videoRef.current?.play().catch(() => {}) })
       hi.on(Hls.Events.ERROR, (_e, d) => { if (d.fatal) message.warning('播放异常，尝试切换线路...') })
-      setHls(hi)
+      hlsRef.current = hi
     } else if (videoRef.current!.canPlayType('application/vnd.apple.mpegurl')) {
       videoRef.current!.src = quality.url
     }
+    return () => {
+      hlsRef.current?.destroy()
+      hlsRef.current = null
+    }
   }, [activeLine, activeQuality, info])
 
   useEffect(() => { document.title = info ? `${info.title} - ${brand.brand_name}` : brand.brand_name }, [info, brand])
@@ -83,16 +89,9 @@ export default function WatchPage() {
   const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
 
   return (
-    <div style={{ minHeight: '100vh', background: '#1A1814', display: 'flex', flexDirection: 'column' }}>
+    <div className="watch-shell">
       {/* Top bar */}
-      <div style={{
+      <header className="watch-header">
-        height: 52, minHeight: 52,
-        background: 'rgba(26,24,20,0.97)',
-        backdropFilter: 'blur(12px)',
-        borderBottom: '1px solid rgba(235,229,219,0.06)',
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        padding: '0 28px',
-      }}>
         <Space size={16}>
           <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#949088' }}
             onClick={() => navigate('/')}>{brand.brand_name}</Button>
@@ -113,17 +112,11 @@ export default function WatchPage() {
             options={info.lines.map(l => ({ value: l.node_id, label: l.node_name }))}
             prefix={<WifiOutlined />} placeholder="线路" />
         </Space>
-      </div>
+      </header>
 
       {/* Video */}
-      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
+      <main className="watch-stage">
-        <div style={{
+        <div className="watch-frame">
-          width: '100%', maxWidth: 1280,
-          aspectRatio: '16/9', maxHeight: 'calc(100vh - 132px)',
-          background: '#0A0A08', borderRadius: 12, overflow: 'hidden',
-          position: 'relative',
-          boxShadow: '0 12px 48px rgba(0,0,0,0.5)',
-        }}>
           <video ref={videoRef} controls autoPlay playsInline
             style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
           {info.status !== 'live' && (
@@ -144,7 +137,7 @@ export default function WatchPage() {
             </div>
           )}
         </div>
-      </div>
+      </main>
     </div>
   )
 }

frontend/src/viewer/pages/viewer.css

@@ -0,0 +1,303 @@
+.viewer-shell {
+  min-height: 100vh;
+  background: #f4f0e8;
+  color: #211d18;
+  font-family: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
+}
+
+.viewer-hero {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 88px 40px 72px;
+  border-bottom: 1px solid #d7cec0;
+}
+
+.viewer-eyebrow {
+  margin-bottom: 18px;
+  color: #806d56;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+}
+
+.viewer-logo {
+  display: block;
+  max-width: 180px;
+  height: 36px;
+  margin-bottom: 24px;
+  object-fit: contain;
+  object-position: left center;
+}
+
+.viewer-title {
+  max-width: 850px;
+  margin: 0;
+  color: #211d18;
+  font-size: clamp(42px, 7vw, 76px);
+  font-weight: 600;
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+}
+
+.viewer-tagline {
+  max-width: 680px;
+  margin: 22px 0 0;
+  color: #685f54;
+  font-size: clamp(16px, 2vw, 20px);
+  line-height: 1.75;
+}
+
+.viewer-main {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 52px 40px 96px;
+}
+
+.viewer-section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.viewer-section-heading h2 {
+  margin: 0;
+  font-size: 25px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.viewer-section-heading span {
+  color: #84796c;
+  font-size: 13px;
+}
+
+.stream-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px 26px;
+}
+
+.stream-card {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #dcd3c7;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+button.stream-card {
+  padding: 0;
+  cursor: pointer;
+  transition: border-color 140ms ease, transform 140ms ease;
+}
+
+button.stream-card:hover {
+  border-color: #a99882;
+  transform: translateY(-2px);
+}
+
+button.stream-card:active {
+  transform: translateY(0);
+}
+
+button.stream-card:focus-visible {
+  outline: 2px solid #765f45;
+  outline-offset: 3px;
+}
+
+.stream-cover {
+  position: relative;
+  display: flex;
+  aspect-ratio: 16 / 9;
+  align-items: center;
+  justify-content: center;
+  background-color: #29251f;
+  background-position: center;
+  background-size: cover;
+}
+
+.stream-status {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 4px 10px;
+  border-radius: 3px;
+  font-family: system-ui, sans-serif;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+}
+
+.stream-status.live {
+  background: #8f302b;
+  color: #fff;
+}
+
+.stream-status.pending {
+  background: #27231e;
+  color: #f8f3ea;
+}
+
+.stream-status.ended {
+  top: auto;
+  bottom: 14px;
+  background: rgba(30, 27, 23, 0.82);
+  color: #e7dfd3;
+}
+
+.live-dot {
+  width: 6px;
+  height: 6px;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.stream-copy {
+  min-height: 112px;
+  padding: 20px 22px 22px;
+}
+
+.stream-copy h3 {
+  overflow: hidden;
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stream-copy p {
+  overflow: hidden;
+  margin: 0;
+  color: #766d62;
+  font-size: 14px;
+  line-height: 1.6;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stream-skeleton {
+  pointer-events: none;
+}
+
+.viewer-footer {
+  padding: 26px 40px;
+  border-top: 1px solid #d7cec0;
+  color: #84796c;
+  font-size: 12px;
+  text-align: center;
+}
+
+.watch-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #171512;
+  color: #eee7dc;
+  font-family: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
+}
+
+.watch-header {
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 10px 28px;
+  border-bottom: 1px solid #342f29;
+  background: #1d1a16;
+}
+
+.watch-stage {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 36px;
+}
+
+.watch-frame {
+  position: relative;
+  width: 100%;
+  max-width: 1280px;
+  max-height: calc(100vh - 136px);
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  border: 1px solid #3d3730;
+  border-radius: 8px;
+  background: #080706;
+}
+
+@media (max-width: 720px) {
+  .watch-header {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 14px 16px;
+  }
+
+  .watch-stage {
+    align-items: flex-start;
+    padding: 20px 0;
+  }
+
+  .watch-frame {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+}
+
+@media (max-width: 900px) {
+  .stream-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 600px) {
+  .viewer-hero {
+    padding: 58px 20px 48px;
+  }
+
+  .viewer-main {
+    padding: 38px 20px 64px;
+  }
+
+  .viewer-title {
+    font-size: clamp(38px, 13vw, 54px);
+  }
+
+  .stream-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .viewer-section-heading {
+    margin-bottom: 24px;
+  }
+
+  .viewer-footer {
+    padding-inline: 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .viewer-shell *,
+  .viewer-shell *::before,
+  .viewer-shell *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}