feat: 仪表盘视觉优化-居中/logo放大/柱图数字挪顶/节目名加长

frontend/src/components/Layout/AppLayout.css

@@ -29,4 +29,6 @@
   padding: 24px;
   background: var(--color-bg-cream);
   min-height: calc(100vh - 64px);
+  max-width: 1400px;
+  margin: 0 auto;
 }

frontend/src/pages/Dashboard/Dashboard.css

@@ -38,7 +38,7 @@
   position: absolute;
   top: 16px;
   right: 16px;
-  height: 40px;
+  height: 64px;
   width: auto;
   opacity: 0.9;
 }
@@ -177,6 +177,8 @@
   flex: 1;
   max-width: 42px;
   min-width: 20px;
+  justify-content: flex-end;
+  height: 180px;
 }
 
 .bar {
@@ -192,15 +194,15 @@
   font-size: 9px;
   font-weight: 600;
   text-align: center;
-  margin-bottom: 3px;
   white-space: nowrap;
+  margin-bottom: 2px;
 }
 
 .bar-program {
-  font-size: 9px;
+  font-size: 10px;
   color: #6b6b6b;
   text-align: center;
-  max-width: 42px;
+  max-width: 64px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

frontend/src/pages/Dashboard/Dashboard.jsx

@@ -51,7 +51,7 @@ function getBarHeight(share) {
 
 function getShortTitle(title) {
   if (!title) return '?'
-  return title.length > 12 ? title.slice(0, 12) + '...' : title
+  return title.length > 9 ? title.slice(0, 9) + '...' : title
 }
 
 function Dashboard() {
@@ -83,10 +83,10 @@ function Dashboard() {
     })
   }, [])
 
-  // 显示最近有份额数据的期次（最多9个）
+  // 显示最近有份额数据的期次（最多12个）
   const displayEpisodes = episodes
     .filter(e => e.audience_share != null)
-    .slice(0, 9)
+    .slice(0, 12)
 
   const bestEpisode = [...displayEpisodes].sort((a, b) => Number(b.audience_share) - Number(a.audience_share))[0]
 
@@ -100,7 +100,7 @@ function Dashboard() {
     {
       icon: <EyeOutlined style={{ color: '#6b8e6b', fontSize: 14 }} />,
       bg: '#e8f5e9',
-      label: '近9期已录',
+      label: '近12期已录',
       value: displayEpisodes.length || '--',
     },
     {
@@ -188,7 +188,7 @@ function Dashboard() {
       {/* ===== 近9期收视柱图（全宽） ===== */}
       <div className="bar-chart-card">
         <div className="bar-chart-header">
-          <h3 className="bar-chart-title">近 9 期收视份额</h3>
+          <h3 className="bar-chart-title">近 12 期收视份额</h3>
           <span className="bar-chart-hint">悬浮看编导/期次/收视率·颜色只对收视份额</span>
         </div>
         {loading ? (
@@ -212,6 +212,9 @@ function Dashboard() {
                 `
                 return (
                   <div key={ep.id} className="bar-item">
+                    <div className="bar-number" style={{ color }}>
+                      {ep.audience_share != null ? Number(ep.audience_share).toFixed(2) : '--'}
+                    </div>
                     <Tooltip title={<span dangerouslySetInnerHTML={{ __html: tooltipContent }} />}>
                       <div
                         className="bar"
@@ -221,9 +224,6 @@ function Dashboard() {
                         }}
                       />
                     </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>