完善观众端交互视觉体系

frontend/src/viewer/pages/HomePage.tsx

@@ -38,7 +38,7 @@ export default function HomePage() {
       <header className="viewer-hero">
         <nav className="viewer-nav" aria-label="主导航">
           <span>{brand.brand_name}</span>
-          <button type="button" onClick={() => document.getElementById('programmes')?.scrollIntoView()}>
+          <button className="viewer-button viewer-button--ghost" type="button" onClick={() => document.getElementById('programmes')?.scrollIntoView()}>
             节目目录
           </button>
         </nav>
@@ -77,7 +77,7 @@ export default function HomePage() {
               aria-label="搜索节目"
             />
           </label>
-          <div className="viewer-filters" aria-label="按节目状态筛选">
+          <div className="viewer-filters" aria-label="按节目状态筛选" role="group">
             {[
               ['all', '全部'],
               ['live', '直播中'],
@@ -87,7 +87,8 @@ export default function HomePage() {
               <button
                 key={value}
                 type="button"
-                className={filter === value ? 'is-active' : ''}
+                className={`viewer-button viewer-filter${filter === value ? ' is-active' : ''}`}
+                aria-pressed={filter === value}
                 onClick={() => setFilter(value)}
               >
                 {label}
@@ -108,13 +109,10 @@ export default function HomePage() {
             ))}
           </div>
         ) : visibleStreams.length === 0 ? (
-          <div style={{
+          <div className="viewer-empty">
-            textAlign: 'center', padding: '80px 0',
+            <span className="viewer-empty-icon"><VideoCameraOutlined /></span>
-            background: '#fff', borderRadius: 14,
+            <h3>暂无直播</h3>
-          }}>
+            <p>当前没有正在播出或排期的直播节目</p>
-            <VideoCameraOutlined style={{ fontSize: 40, color: '#C4BCB0', marginBottom: 16 }} />
-            <h3 style={{ fontSize: 18, fontWeight: 500, color: '#5E5A52' }}>暂无直播</h3>
-            <p style={{ color: '#949088', fontSize: 14, marginTop: 4 }}>当前没有正在播出或排期的直播节目</p>
           </div>
         ) : (
           <div className="stream-grid">

frontend/src/viewer/pages/WatchPage.tsx

@@ -167,7 +167,7 @@ export default function WatchPage() {
                   <h2>节目章节</h2>
                   <div className="chapter-list">
                     {info.chapters.map((chapter, index) => (
-                      <button key={`${chapter.time}-${index}`} type="button" onClick={() => jumpToChapter(chapter.time)}>
+                      <button className="viewer-button chapter-button" key={`${chapter.time}-${index}`} type="button" onClick={() => jumpToChapter(chapter.time)}>
                         <span>{chapter.title}</span>
                         <time>{Math.floor(chapter.time / 60)}:{String(chapter.time % 60).padStart(2, '0')}</time>
                       </button>

frontend/src/viewer/pages/viewer.css

@@ -1,10 +1,29 @@
 .viewer-shell {
   min-height: 100vh;
+  overflow-x: hidden;
   background: #f4f0e8;
   color: #211d18;
   font-family: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
 }
 
+.viewer-button {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: 600 13px/1 Inter, "Noto Sans SC", sans-serif;
+  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.viewer-button:hover { transform: translateY(-1px); }
+.viewer-button:active { transform: translateY(0); }
+.viewer-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(118, 95, 69, 0.2); }
+.viewer-button:disabled { cursor: not-allowed; opacity: 0.48; transform: none; }
+.viewer-button--ghost { padding: 9px 14px; border-color: #d2cabf; background: rgba(255, 255, 255, 0.48); color: #403a33; }
+.viewer-button--ghost:hover { border-color: #aa9f91; background: #fffdf9; color: #211d18; }
+
 .viewer-nav {
   display: flex;
   align-items: center;
@@ -37,24 +56,26 @@
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.58);
   color: #767066;
+  box-shadow: 0 1px 2px rgba(33, 29, 24, 0.04), 0 8px 24px rgba(33, 29, 24, 0.04);
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 .viewer-search:focus-within { border-color: #aaa296; box-shadow: 0 0 0 3px rgba(117, 108, 94, 0.08); }
-.viewer-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #292720; font: 14px/1.4 Inter, "Noto Sans SC", sans-serif; }
+.viewer-search input { appearance: none; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #292720; font: 14px/1.4 Inter, "Noto Sans SC", sans-serif; }
 .viewer-search input::placeholder { color: #9d978d; }
 
 .viewer-filters { display: flex; flex-wrap: wrap; gap: 6px; }
-.viewer-filters button {
+.viewer-filter {
   padding: 8px 12px;
   border: 1px solid transparent;
-  border-radius: 7px;
+  border-radius: 999px;
   background: transparent;
   color: #777168;
   cursor: pointer;
   font: 13px/1 Inter, "Noto Sans SC", sans-serif;
 }
-.viewer-filters button:hover { border-color: #d8d2c8; color: #292720; background: rgba(255, 255, 255, 0.45); }
+.viewer-filter:hover { border-color: #d8d2c8; color: #292720; background: rgba(255, 255, 255, 0.72); }
-.viewer-filters button.is-active { border-color: #cbc4b9; background: #eae5dc; color: #292720; }
+.viewer-filter.is-active { border-color: #292720; background: #292720; color: #fffdf9; box-shadow: 0 5px 14px rgba(33, 29, 24, 0.16); }
 
 .stream-card { border-color: #d9d3c9; box-shadow: none; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
 .stream-card:hover { transform: translateY(-2px); border-color: #bcb4a8; }
@@ -135,11 +156,12 @@
 }
 
 .stream-card {
+  appearance: none;
   display: block;
   width: 100%;
   overflow: hidden;
   border: 1px solid #dcd3c7;
-  border-radius: 8px;
+  border-radius: 14px;
   background: #fffdf9;
   color: inherit;
   font: inherit;
@@ -155,6 +177,7 @@ button.stream-card {
 button.stream-card:hover {
   border-color: #a99882;
   transform: translateY(-2px);
+  box-shadow: 0 14px 32px rgba(40, 34, 27, 0.09);
 }
 
 button.stream-card:active {
@@ -185,13 +208,31 @@ button.stream-card:focus-visible {
   align-items: center;
   min-height: 26px;
   padding: 4px 10px;
-  border-radius: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
   font-family: system-ui, sans-serif;
   font-size: 11px;
   font-weight: 650;
   letter-spacing: 0.06em;
 }
 
+.viewer-empty {
+  display: grid;
+  min-height: 300px;
+  place-items: center;
+  align-content: center;
+  padding: 56px 24px;
+  border: 1px dashed #cec5b8;
+  border-radius: 16px;
+  background: rgba(255, 253, 249, 0.72);
+  text-align: center;
+}
+
+.viewer-empty-icon { display: grid; width: 58px; height: 58px; margin-bottom: 18px; place-items: center; border-radius: 18px; background: #ebe4da; color: #766d62; font-size: 25px; }
+.viewer-empty h3 { color: #3f3932; font-size: 19px; font-weight: 650; }
+.viewer-empty p { margin-top: 6px; color: #84796c; font: 14px/1.6 Inter, "Noto Sans SC", sans-serif; }
+
 .stream-status.live {
   background: #8f302b;
   color: #fff;
@@ -261,6 +302,7 @@ button.stream-card:focus-visible {
   background: #171512;
   color: #eee7dc;
   font-family: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
+  overflow-x: hidden;
 }
 
 .watch-header {
@@ -364,7 +406,9 @@ button.stream-card:focus-visible {
   cursor: pointer;
   text-align: left;
 }
-.chapter-list button:hover { border-color: #806d56; background: #2b261f; }
+.chapter-button { width: 100%; border-radius: 8px; }
+.chapter-list button:hover { border-color: #9d8263; background: #302920; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
+.chapter-list button:focus-visible { border-color: #b99a76; box-shadow: 0 0 0 3px rgba(185, 154, 118, 0.22); }
 .chapter-list time { color: #949088; font-variant-numeric: tabular-nums; }
 
 @media (max-width: 720px) {
@@ -423,7 +467,8 @@ button.stream-card:focus-visible {
 
   .viewer-directory-tools { align-items: stretch; flex-direction: column; }
   .viewer-search { width: auto; }
-  .viewer-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
+  .viewer-filters { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; }
+  .viewer-filters::-webkit-scrollbar { display: none; }
   .viewer-filters button { flex: none; }
 
   .viewer-hero {
@@ -452,6 +497,14 @@ button.stream-card:focus-visible {
   }
 }
 
+@media (max-width: 360px) {
+  .viewer-hero, .viewer-main { padding-inline: 16px; }
+  .viewer-nav { gap: 12px; }
+  .viewer-nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .watch-header { padding-inline: 12px; }
+  .watch-quality, .watch-line { min-width: 0; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .viewer-shell *,
   .viewer-shell *::before,