feat: 仪表盘布局重排，新增题图上传能力

frontend/src/pages/Dashboard/Dashboard.jsx

@@ -1,15 +1,18 @@
 import { useState, useEffect } from 'react'
-import { Row, Col, Card, Avatar, Tooltip, Button } from 'antd'
+import { Row, Col, Card, Avatar, Tooltip, Button, Spin } from 'antd'
 import {
-  BarChartOutlined,
   EyeOutlined,
-  CalendarOutlined,
   FireOutlined,
+  CalendarOutlined,
+  BarChartOutlined,
   PictureOutlined,
+  UploadOutlined,
 } from '@ant-design/icons'
 import useAuthStore from '../../stores/authStore'
 import { listEpisodes } from '../../services/episodeService'
 import { listTargets } from '../../services/yearlyTargetService'
+import { getCurrentCover, getUpcomingSchedules } from '../../services/dashboardService'
+import ChangeCoverModal from './ChangeCoverModal'
 import './Dashboard.css'
 
 /**
@@ -20,23 +23,34 @@ import './Dashboard.css'
  * 判色取该期 air_date 所属年份的 yearly_targets 行（不是当前年）。
  */
 function getShareColor(share, targets, airYear) {
-  // 强制转数值，避免后端返回字符串导致数值比较失败
   const n = Number(share)
-  const target = targets.find(t => Number(t.year) === Number(airYear))
+  const target = (targets || []).find(t => Number(t.year) === Number(airYear))
   if (!target) return '#999'
   if (isNaN(n)) return '#999'
   const stretch = Number(target.stretch_target)
   const base = Number(target.base_target)
-  if (n > stretch) return '#c0584f' // 红=超过摸高目标（优秀）
-  if (n >= base) return '#5b8db8'   // 蓝=未达摸高目标（达标）
-  return '#7aa874'                   // 绿=未达基础目标（待提升）
+  if (n > stretch) return '#c0584f'   // 红=超过摸高目标（优秀）
+  if (n >= base) return '#5b8db8'     // 蓝=未达摸高目标（达标）
+  return '#7aa874'                    // 绿=未达基础目标（待提升）
+}
+
+function getColorLabel(share, targets, airYear) {
+  const n = Number(share)
+  const target = (targets || []).find(t => Number(t.year) === Number(airYear))
+  if (!target) return '未知'
+  const stretch = Number(target.stretch_target)
+  const base = Number(target.base_target)
+  if (n > stretch) return '优秀'
+  if (n >= base) return '达标'
+  return '待提升'
 }
 
 function getBarHeight(share) {
-  return Math.round((share / 1.0) * 180)
+  return Math.round((Number(share) / 1.0) * 160)
 }
 
 function getShortTitle(title) {
+  if (!title) return '?'
   return title.length > 12 ? title.slice(0, 12) + '...' : title
 }
 
@@ -44,167 +58,243 @@ function Dashboard() {
   const { user } = useAuthStore()
   const [episodes, setEpisodes] = useState([])
   const [targets, setTargets] = useState([])
+  const [cover, setCover] = useState({ cover_path: null, episode_number: null, episode_title: null })
+  const [schedules, setSchedules] = useState([])
   const [loading, setLoading] = useState(true)
+  const [coverModalOpen, setCoverModalOpen] = useState(false)
+
+  const showChangeCoverBtn = user?.role === 'zhipianren' || user?.role === 'zebian'
 
   useEffect(() => {
     Promise.all([
-      listEpisodes(9),
+      listEpisodes(50),
       listTargets(),
-    ]).then(([epData, tgtData]) => {
-      // 按 air_date 倒序取前 9
-      const sorted = (epData || []).sort((a, b) => new Date(b.air_date) - new Date(a.air_date)).slice(0, 9)
+      getCurrentCover(),
+      getUpcomingSchedules(6),
+    ]).then(([epData, tgtData, coverData, schedData]) => {
+      const sorted = (epData || []).sort((a, b) => new Date(b.air_date) - new Date(a.air_date))
       setEpisodes(sorted)
       setTargets(tgtData || [])
+      setCover(coverData || { cover_path: null, episode_number: null, episode_title: null })
+      setSchedules(Array.isArray(schedData) ? schedData : [])
       setLoading(false)
     }).catch(() => {
       setLoading(false)
     })
   }, [])
 
-  // 显示最近有份额数据的期次（最多9个，不够用真实数据补位）
-  const hasShare = episodes.filter(e => e.audience_share != null)
-  const displayEpisodes = hasShare.length >= 5 ? hasShare.slice(0, 9) : episodes.slice(0, Math.max(9, hasShare.length || 5))
+  // 显示最近有份额数据的期次（最多9个）
+  const displayEpisodes = episodes
+    .filter(e => e.audience_share != null)
+    .slice(0, 9)
 
-  const bestEpisode = [...displayEpisodes].filter(e => e.audience_share != null).sort((a, b) => b.audience_share - a.audience_share)[0]
+  const bestEpisode = [...displayEpisodes].sort((a, b) => Number(b.audience_share) - Number(a.audience_share))[0]
 
-  const showChangeCoverBtn = user?.role === 'zhipianren' || user?.role === 'zebian'
+  const handleCoverUploaded = (newCover) => {
+    setCover(newCover)
+    setCoverModalOpen(false)
+  }
+
+  // KPI 数据
+  const kpiData = [
+    {
+      icon: <EyeOutlined style={{ color: '#6b8e6b', fontSize: 14 }} />,
+      bg: '#e8f5e9',
+      label: '近9期已录',
+      value: displayEpisodes.length || '--',
+    },
+    {
+      icon: <FireOutlined style={{ color: '#ff9800', fontSize: 14 }} />,
+      bg: '#fff3e0',
+      label: '最佳份额',
+      value: bestEpisode ? (Number(bestEpisode.audience_share) * 100).toFixed(2) + '%' : '--',
+    },
+    {
+      icon: <CalendarOutlined style={{ color: '#2196f3', fontSize: 14 }} />,
+      bg: '#e3f2fd',
+      label: '年度目标',
+      value: targets.length || '--',
+    },
+  ]
 
   return (
     <div className="dashboard">
-      {/* 顶部 Banner */}
+      {/* ===== Banner ===== */}
       <div className="dashboard-banner">
+        {/* 题图底图 或 默认渐变 */}
+        {cover.cover_path ? (
+          <img
+            src={cover.cover_path}
+            alt="题图"
+            className="banner-bg"
+          />
+        ) : (
+          <div className="banner-default-bg" />
+        )}
+        {/* 暗化渐变层 */}
+        <div className="banner-gradient" />
+        {/* 右上角 Logo */}
+        <img
+          src="/src/assets/junshikeji_logo.png"
+          alt="栏目logo"
+          className="banner-logo"
+          onError={e => { e.target.style.display = 'none' }}
+        />
+        {/* 左侧文字 */}
         <div className="banner-text">
-          <h2>本月收视最佳</h2>
-          {bestEpisode ? (
-            <p>
-              第 {bestEpisode.episode_number} 期 {bestEpisode.program_name} ·
-              收视份额 {bestEpisode.audience_share}
-            </p>
-          ) : (
-            <p>暂无收视数据</p>
-          )}
+          <p className="banner-eyebrow">本月收视最佳·题图</p>
+          <h2 className="banner-title">
+            {cover.episode_number
+              ? `第 ${cover.episode_number} 期`
+              : bestEpisode
+                ? `第 ${bestEpisode.episode_number} 期`
+                : '暂无收视数据'}
+            {cover.episode_title || (bestEpisode ? ` · ${bestEpisode.program_name}` : '')}
+          </h2>
+          <p className="banner-subtitle">
+            {bestEpisode
+              ? `收视份额 ${Number(bestEpisode.audience_share).toFixed(4)} · 当月最高`
+              : '暂无收视数据'}
+          </p>
+          <p className="banner-hint">建议：可选用近期收视表现好的节目海报</p>
         </div>
-        {/* 题图渐变占位 */}
-        <div className="banner-image-placeholder">
-          <div className="banner-placeholder-gradient" />
-          {showChangeCoverBtn && (
-            <Button
-              size="small"
-              icon={<PictureOutlined />}
-              disabled
-              className="change-cover-btn"
-            >
-              更换题图
-            </Button>
+        {/* 右下角换图按钮 */}
+        {showChangeCoverBtn && (
+          <Button
+            className="change-cover-btn"
+            icon={<PictureOutlined />}
+            onClick={() => setCoverModalOpen(true)}
+          >
+            更换题图
+          </Button>
+        )}
+      </div>
+
+      {/* ===== KPI 细条 ===== */}
+      <div className="kpi-strip">
+        {kpiData.map((item, i) => (
+          <div key={i} className="kpi-chip">
+            <div className="kpi-icon" style={{ background: item.bg }}>
+              {item.icon}
+            </div>
+            <div>
+              <p className="kpi-label">{item.label}</p>
+              <p className="kpi-value">{item.value}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* ===== 近9期收视柱图（全宽） ===== */}
+      <div className="bar-chart-card">
+        <div className="bar-chart-header">
+          <h3 className="bar-chart-title">近 9 期收视份额</h3>
+          <span className="bar-chart-hint">悬浮看编导/期次/收视率·颜色只对收视份额</span>
+        </div>
+        {loading ? (
+          <div className="chart-loading"><Spin size="small" /> 加载中...</div>
+        ) : (
+          <>
+            <div className="bars-wrapper">
+              {displayEpisodes.map((ep) => {
+                const airYear = new Date(ep.air_date).getFullYear()
+                const color = ep.audience_share != null
+                  ? getShareColor(ep.audience_share, targets, airYear)
+                  : '#ccc'
+                const colorLabel = ep.audience_share != null
+                  ? getColorLabel(ep.audience_share, targets, airYear)
+                  : '无数据'
+                const tooltipContent = `
+                  <strong>第 ${ep.episode_number} 期 · ${ep.program_name}</strong><br/>
+                  编导：${ep.editor_name_snapshot || '未知'}<br/>
+                  收视份额：${ep.audience_share != null ? Number(ep.audience_share).toFixed(4) : '无数据'}（${colorLabel}）<br/>
+                  收视率：${ep.audience_rating != null ? Number(ep.audience_rating).toFixed(4) : '无数据'}
+                `
+                return (
+                  <div key={ep.id} className="bar-item">
+                    <Tooltip title={<span dangerouslySetInnerHTML={{ __html: tooltipContent }} />}>
+                      <div
+                        className="bar"
+                        style={{
+                          height: ep.audience_share != null ? getBarHeight(ep.audience_share) : 20,
+                          backgroundColor: color,
+                        }}
+                      />
+                    </Tooltip>
+                    <div className="bar-number" style={{ color }}>
+                      {ep.audience_share != null ? Number(ep.audience_share).toFixed(2) : '--'}
+                    </div>
+                    <div className="bar-program" title={ep.program_name}>
+                      {getShortTitle(ep.program_name)}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+            <div className="chart-legend">
+              <span className="legend-item">
+                <span className="dot" style={{ background: '#7aa874' }}></span>绿=未达基础目标（待提升）
+              </span>
+              <span className="legend-item">
+                <span className="dot" style={{ background: '#5b8db8' }}></span>蓝=未达摸高目标（达标）
+              </span>
+              <span className="legend-item">
+                <span className="dot" style={{ background: '#c0584f' }}></span>红=超过摸高目标（优秀）
+              </span>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* ===== 下方两栏 ===== */}
+      <div className="bottom-row">
+        {/* 左：雷达占位 */}
+        <div className="side-card">
+          <h3 className="side-card-title">军事科技热点雷达</h3>
+          <div className="radar-placeholder">
+            <span className="radar-placeholder-label">Phase 4c·占位</span>
+            <div className="radar-sample-items">
+              <div className="radar-sample-item">1. 神舟飞船对接空间站</div>
+              <div className="radar-sample-item">2. 新型无人机集群技术</div>
+            </div>
+            <BarChartOutlined style={{ fontSize: 28, color: '#ccc', marginBottom: 4 }} />
+            <p>真实抓取 Phase 4c 实现</p>
+            <small>编导个人首页核心功能</small>
+          </div>
+        </div>
+
+        {/* 右：排播计划 */}
+        <div className="side-card">
+          <h3 className="side-card-title">未来排播计划</h3>
+          {loading ? (
+            <div style={{ textAlign: 'center', color: '#999', padding: '24px 0' }}><Spin size="small" /></div>
+          ) : schedules.length > 0 ? (
+            <ul className="schedule-list">
+              {schedules.map((item, i) => (
+                <li key={i} className="schedule-item">
+                  <span className="schedule-ep">第{item.episode_number}期</span>
+                  <span className="schedule-name" title={item.program_name}>{item.program_name}</span>
+                  <span className="schedule-date">{item.planned_air_date}</span>
+                  <span className="schedule-editor">{item.editor_name_snapshot || ''}</span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div style={{ textAlign: 'center', color: '#999', padding: '24px 0' }}>
+              <CalendarOutlined style={{ fontSize: 28, color: '#ccc', marginBottom: 8 }} />
+              <p style={{ margin: 0, fontSize: 12 }}>暂无排播数据</p>
+            </div>
           )}
-          <span className="placeholder-label">敬请期待</span>
         </div>
       </div>
 
-      {/* KPI Cards */}
-      <Row gutter={16} className="kpi-row">
-        <Col span={8}>
-          <Card className="kpi-card">
-            <div className="kpi-icon" style={{ background: '#e8f5e9' }}>
-              <EyeOutlined style={{ color: '#6b8e6b', fontSize: 24 }} />
-            </div>
-            <div className="kpi-info">
-              <span className="kpi-value">{displayEpisodes.filter(e => e.audience_share).length || '--'}</span>
-              <span className="kpi-label">近 9 期已录</span>
-            </div>
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card className="kpi-card">
-            <div className="kpi-icon" style={{ background: '#fff3e0' }}>
-              <FireOutlined style={{ color: '#ff9800', fontSize: 24 }} />
-            </div>
-            <div className="kpi-info">
-              <span className="kpi-value">
-                {bestEpisode ? (bestEpisode.audience_share * 100).toFixed(1) + '%' : '--'}
-              </span>
-              <span className="kpi-label">最佳收视份额</span>
-            </div>
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card className="kpi-card">
-            <div className="kpi-icon" style={{ background: '#e3f2fd' }}>
-              <CalendarOutlined style={{ color: '#2196f3', fontSize: 24 }} />
-            </div>
-            <div className="kpi-info">
-              <span className="kpi-value">{targets.length || '--'}</span>
-              <span className="kpi-label">年度目标条数</span>
-            </div>
-          </Card>
-        </Col>
-      </Row>
-
-      {/* 三卡片区域 */}
-      <Row gutter={16} className="cards-row">
-        {/* 热点雷达 */}
-        <Col span={8}>
-          <Card className="content-card" title="热点雷达">
-            <div className="placeholder-text">
-              <BarChartOutlined style={{ fontSize: 32, color: '#ccc', marginBottom: 8 }} />
-              <p>热点雷达 · Phase 4c</p>
-              <small>编导个人首页核心功能，Phase 4c 实施</small>
-            </div>
-          </Card>
-        </Col>
-
-        {/* 近 9 期收视柱图 */}
-        <Col span={8}>
-          <Card className="content-card" title="近 9 期收视" loading={loading}>
-            <div className="chart-container">
-              <div className="bars-wrapper">
-                {displayEpisodes.map((ep) => {
-                  const airYear = new Date(ep.air_date).getFullYear()
-                  const color = ep.audience_share != null
-                    ? getShareColor(ep.audience_share, targets, airYear)
-                    : '#ccc'
-                  return (
-                    <div key={ep.id} className="bar-item">
-                      <Tooltip title={`${ep.program_name} · ${ep.audience_share ?? '无数据'}`}>
-                        <div
-                          className="bar"
-                          style={{
-                            height: ep.audience_share != null ? getBarHeight(ep.audience_share) : 20,
-                            backgroundColor: color,
-                          }}
-                        />
-                      </Tooltip>
-                      <div className="bar-label-top">{getShortTitle(ep.program_name)}</div>
-                      <div className="bar-label-bottom">
-                        <Avatar size={20} style={{ fontSize: 10 }}>
-                          {(ep.editor_name_snapshot || '?')[0]}
-                        </Avatar>
-                        <span>{ep.editor_name_snapshot || '未知'}</span>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-              <div className="chart-legend">
-                <span className="legend-item"><span className="dot" style={{ background: '#7aa874' }}></span>绿=未达基础目标（待提升）</span>
-                <span className="legend-item"><span className="dot" style={{ background: '#5b8db8' }}></span>蓝=未达摸高目标（达标）</span>
-                <span className="legend-item"><span className="dot" style={{ background: '#c0584f' }}></span>红=超过摸高目标（优秀）</span>
-              </div>
-            </div>
-          </Card>
-        </Col>
-
-        {/* 排播计划 */}
-        <Col span={8}>
-          <Card className="content-card" title="未来排播计划">
-            <div className="placeholder-text">
-              <CalendarOutlined style={{ fontSize: 32, color: '#ccc', marginBottom: 8 }} />
-              <p>排播计划 · Phase 4b</p>
-              <small>甘特图排期使用 frappe-gantt 实现，Phase 4b 开发</small>
-            </div>
-          </Card>
-        </Col>
-      </Row>
+      {/* 换图 Modal */}
+      <ChangeCoverModal
+        open={coverModalOpen}
+        onClose={() => setCoverModalOpen(false)}
+        onUploaded={handleCoverUploaded}
+        episodes={episodes.slice(0, 20)}
+      />
     </div>
   )
 }