feat: 新增中部轮换大屏组件，优化信息展示方式

src/pages/DataScreen.jsx

@@ -486,99 +486,94 @@ function ParkOverviewStrip({ d }) {
   );
 }
 
-/* ---------- TOKEN 消耗 ---------- */
-function TokenPanel({ d }) {
+/* =========================================================
+   中部轮换大屏（一次展示一个面板，自动轮换，降低信息密度）
+   ========================================================= */
+
+/* ---------- TOKEN 消耗（大屏版） ---------- */
+function TokenBig({ d }) {
   return (
-    <div className="bd-card bd-token-panel">
-      {/* 概括数据内联在标题右侧 */}
-      <CardHead
-        title="TOKEN 消耗"
-        icon="bolt"
-        right={
-          <div className="bd-head-stats">
-            <span className="bd-ost-chip"><i>今日</i><b>{fmtWan(d.token.today)} tokens</b></span>
-            <span className="bd-ost-chip"><i>累计</i><b>{fmtWan(d.token.total)} tokens</b></span>
-            <span className="bd-ost-chip"><i>速率</i><b>{d.token.rate} t/s</b></span>
-          </div>
-        }
-      />
-      {/* 四列布局：环形图(最左) · 模型(左) · 折线图(中) · 数值(右) */}
-      <div className="bd-split bd-split-tri">
-        <div className="bd-donut-block">
-          <Donut items={MODELS} size={96} thickness={13} centerTop="1.28亿" centerBottom="累计 tokens" />
+    <div className="bd-card bd-big bd-big-token">
+      <CardHead title="TOKEN 消耗" icon="bolt" right={
+        <div className="bd-head-stats">
+          <span className="bd-ost-chip"><i>今日消耗</i><b>{fmtWan(d.token.today)} tokens</b></span>
+          <span className="bd-ost-chip"><i>累计消耗</i><b>{fmtWan(d.token.total)} tokens</b></span>
+          <span className="bd-ost-chip"><i>实时速率</i><b>{d.token.rate} t/s</b></span>
         </div>
-        <div className="bd-model-list">
-          {MODELS.map((m) => (
-            <div className="bd-legend-row" key={m.name}>
-              <span className="bd-legend-dot" style={{ background: m.color }} />
-              <span className="bd-legend-name">{m.name}</span>
-            </div>
-          ))}
-        </div>
-        <div className="bd-chart-block bd-chart-mid">
-          <AreaChart series={d.token.series} color="#4cc2ff" height={72}
+      } />
+      <div className="bd-big-body">
+        <div className="bd-big-left bd-big-chart">
+          <AreaChart series={d.token.series} color="#4cc2ff" height={110}
             lastLabel={`近30日 ${d.token.series[d.token.series.length - 1].toFixed(1)}万/日`} />
         </div>
-        <div className="bd-value-list">
-          {MODELS.map((m) => (
-            <div className="bd-legend-row" key={m.name}>
-              <span className="bd-legend-dot" style={{ background: m.color }} />
-              <b className="bd-value-num">{m.value}%</b>
-            </div>
-          ))}
+        <div className="bd-big-right">
+          <div className="bd-donut-block">
+            <Donut items={MODELS} size={150} thickness={16} centerTop="1.28亿" centerBottom="累计 tokens" />
+          </div>
+          <div className="bd-model-list">
+            {MODELS.map((m) => (
+              <div className="bd-legend-row" key={m.name}>
+                <span className="bd-legend-dot" style={{ background: m.color }} />
+                <span className="bd-legend-name">{m.name}</span>
+              </div>
+            ))}
+          </div>
+          <div className="bd-value-list">
+            {MODELS.map((m) => (
+              <div className="bd-legend-row" key={m.name}>
+                <span className="bd-legend-dot" style={{ background: m.color }} />
+                <b className="bd-value-num">{m.value}%</b>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>
   );
 }
 
-/* ---------- 工具调用 ---------- */
-function ToolsPanel({ d }) {
+/* ---------- 工具调用（大屏版） ---------- */
+function ToolsBig({ d }) {
   return (
-    <div className="bd-card bd-tools-panel">
-      {/* 概括数据内联在标题右侧 */}
-      <CardHead
-        title="工具调用"
-        icon="wrench"
-        right={
-          <div className="bd-head-stats">
-            <span className="bd-ost-chip"><i>今日调用</i><b>{fmtInt(d.tools.today)} 次</b></span>
-            <span className="bd-ost-chip"><i>累计调用</i><b>{(d.tools.total / 10000).toFixed(1)}万 次</b></span>
-            <span className="bd-ost-chip"><i>成功</i><b>{d.tools.success}%</b></span>
-            {/* <span className="bd-ost-chip"><i>服务节点</i><b>12 / 12 在线</b></span> */}
-          </div>
-        }
-      />
-      <div className="bd-hbar-title">热门工具调用占比</div>
-      <HBar items={TOOL_RANK} color="#2f6bff" />
-      <div className="bd-tools-foot">
-        <span>· 文本创作 34%</span>
-        <span>· 智能分析 27%</span>
-        <span>· 多模态生成 16%</span>
+    <div className="bd-card bd-big bd-big-tools">
+      <CardHead title="工具调用" icon="wrench" right={
+        <div className="bd-head-stats">
+          <span className="bd-ost-chip"><i>今日调用</i><b>{fmtInt(d.tools.today)} 次</b></span>
+          <span className="bd-ost-chip"><i>累计调用</i><b>{(d.tools.total / 10000).toFixed(1)}万 次</b></span>
+          <span className="bd-ost-chip"><i>成功率</i><b>{d.tools.success}%</b></span>
+          <span className="bd-ost-chip"><i>服务节点</i><b>12 / 12 在线</b></span>
+        </div>
+      } />
+      <div className="bd-big-body">
+        <div className="bd-big-right bd-big-stats">
+          <div className="bd-big-stat"><span>今日调用</span><b>{fmtInt(d.tools.today)}<em>次</em></b></div>
+          <div className="bd-big-stat"><span>累计调用</span><b>{(d.tools.total / 10000).toFixed(1)}<em>万次</em></b></div>
+          <div className="bd-big-stat"><span>成功率</span><b>{d.tools.success}<em>%</em></b></div>
+          <div className="bd-big-stat"><span>AI 服务节点</span><b>12<em>/12 在线</em></b></div>
+        </div>
+        <div className="bd-big-left bd-big-bars">
+          <div className="bd-hbar-title">热门工具调用占比</div>
+          <HBar items={TOOL_RANK} color="#2f6bff" />
+        </div>
       </div>
     </div>
   );
 }
 
-/* ---------- 入园项目 ---------- */
+/* ---------- 入园项目（组视图 · 中密度） ---------- */
 function ProjectsPanel({ d }) {
   return (
     <div className="bd-card bd-projects-panel">
-      {/* 概括数据内联在标题右侧 */}
-      <CardHead
-        title="入园项目"
-        icon="building"
-        right={
-          <div className="bd-head-stats">
-            <span className="bd-ost-chip"><i>在园</i><b>{d.projects.inPark} 家</b></span>
-            <span className="bd-ost-chip"><i>累计孵化</i><b>{d.projects.cum} 家</b></span>
-            <span className="bd-ost-chip"><i>本月新增</i><b>{d.projects.todayNew} 家</b></span>
-            {/* <span className="bd-ost-chip"><i>高企 / 研发</i><b>32 / 18</b></span> */}
-          </div>
-        }
-      />
+      <CardHead title="入园项目" icon="building" right={
+        <div className="bd-head-stats">
+          <span className="bd-ost-chip"><i>在园</i><b>{d.projects.inPark} 家</b></span>
+          <span className="bd-ost-chip"><i>累计孵化</i><b>{d.projects.cum} 家</b></span>
+          <span className="bd-ost-chip"><i>今日新增</i><b>{d.projects.todayNew} 家</b></span>
+          {/* <span className="bd-ost-chip"><i>高企 / 研发</i><b>32 / 18</b></span> */}
+        </div>
+      } />
       <div className="bd-zone-wrap">
-        <Donut items={ZONE_DIST} size={92} thickness={13} centerTop="39" centerBottom="本期企业" />
+        <Donut items={ZONE_DIST} size={96} thickness={13} centerTop="39" centerBottom="本期企业" />
         <div className="bd-zone-legend">
           {ZONE_DIST.map((z) => (
             <div className="bd-zone-row" key={z.name}>
@@ -604,23 +599,18 @@ function ProjectsPanel({ d }) {
   );
 }
 
-/* ---------- 带动就业 ---------- */
+/* ---------- 带动就业（组视图 · 中密度） ---------- */
 function JobsPanel({ d }) {
   return (
     <div className="bd-card bd-jobs-panel">
-      {/* 概括数据内联在标题右侧 */}
-      <CardHead
-        title="带动就业"
-        icon="users"
-        right={
-          <div className="bd-head-stats">
-            <span className="bd-ost-chip"><i>就业</i><b>{fmtInt(d.jobs.total)} 人</b></span>
-            <span className="bd-ost-chip"><i>毕业生</i><b>1,680 人</b></span>
-            <span className="bd-ost-chip"><i>实习</i><b>506 人</b></span>
-            <span className="bd-ost-chip"><i>新增</i><b>{d.jobs.todayNew} 人</b></span>
-          </div>
-        }
-      />
+      <CardHead title="带动就业" icon="users" right={
+        <div className="bd-head-stats">
+          <span className="bd-ost-chip"><i>累计</i><b>{fmtInt(d.jobs.total)} 人</b></span>
+          <span className="bd-ost-chip"><i>毕业生</i><b>1,680 人</b></span>
+          <span className="bd-ost-chip"><i>实习</i><b>506 人</b></span>
+          {/* <span className="bd-ost-chip"><i>今日新增</i><b>{d.jobs.todayNew} 人</b></span> */}
+        </div>
+      } />
       <div className="bd-hbar-title">行业就业分布</div>
       <div className="bd-jobs-bars">
         {INDUSTRY.slice(0, 6).map((it, i) => {
@@ -640,23 +630,18 @@ function JobsPanel({ d }) {
   );
 }
 
-/* ---------- 营收总数 ---------- */
+/* ---------- 营收总数（组视图 · 中密度） ---------- */
 function RevenuePanel({ d }) {
   return (
     <div className="bd-card bd-revenue-panel">
-      {/* 概括数据内联在标题右侧 */}
-      <CardHead
-        title="营收总数"
-        icon="coin"
-        right={
-          <div className="bd-head-stats">
-            <span className="bd-ost-chip"><i>累计</i><b>{fmtWan(d.revenue.total)} 元</b></span>
-            <span className="bd-ost-chip"><i>今日</i><b>+{d.revenue.today} 万</b></span>
-            <span className="bd-ost-chip"><i>估值</i><b>5.2 亿元</b></span>
-            <span className="bd-ost-chip"><i>环比</i><b>+{d.revenue.growth}%</b></span>
-          </div>
-        }
-      />
+      <CardHead title="营收总数" icon="coin" right={
+        <div className="bd-head-stats">
+          <span className="bd-ost-chip"><i>累计营收</i><b>{fmtWan(d.revenue.total)} 元</b></span>
+          <span className="bd-ost-chip"><i>今日营收</i><b>+{d.revenue.today} 万</b></span>
+          <span className="bd-ost-chip"><i>企业估值</i><b>5.2 亿元</b></span>
+          <span className="bd-ost-chip"><i>环比</i><b>+{d.revenue.growth}%</b></span>
+        </div>
+      } />
       <div className="bd-chart-block">
         <AreaChart series={d.revenue.series} color="#17b26a" height={76}
           lastLabel={`近30日 ${d.revenue.series[d.revenue.series.length - 1].toFixed(1)}万/日`} />
@@ -670,6 +655,63 @@ function RevenuePanel({ d }) {
   );
 }
 
+/* ---------- 中部轮换器：五项面板自由组织成两组，组间轮换 ---------- */
+const ROTATE_MS = 10000;
+
+function MiddleRotator({ d }) {
+  const views = [
+    {
+      key: 'ai',
+      label: 'AI 智能应用',
+      icon: 'cpu',
+      node: (
+        <div className="bd-view bd-view-2">
+          <TokenBig d={d} />
+          <ToolsBig d={d} />
+        </div>
+      ),
+    },
+    {
+      key: 'park',
+      label: '园区经营概况',
+      icon: 'building',
+      node: (
+        <div className="bd-view bd-view-3">
+          <ProjectsPanel d={d} />
+          <JobsPanel d={d} />
+          <RevenuePanel d={d} />
+        </div>
+      ),
+    },
+  ];
+  const [idx, setIdx] = useState(0);
+
+  // 组间自动轮换：每次切换后重新计时；点击 Tab 也可切换
+  useEffect(() => {
+    const iv = setInterval(() => setIdx((i) => (i + 1) % views.length), ROTATE_MS);
+    return () => clearInterval(iv);
+  }, [idx, views.length]);
+
+  return (
+    <section className="bd-rotator">
+      <div className="bd-rotator-tabs">
+        {views.map((p, i) => (
+          <button key={p.key} className={`bd-rot-tab${i === idx ? ' active' : ''}`} onClick={() => setIdx(i)}>
+            <Icon name={p.icon} size={13} />
+            <span>{p.label}</span>
+            <i key={`${p.key}-${i === idx ? 'on' : 'off'}`} className="bd-rot-progress" />
+          </button>
+        ))}
+      </div>
+      <div className="bd-rotator-stage">
+        <div className="bd-rotator-slide" key={views[idx].key}>
+          {views[idx].node}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 /* ---------- 实时动态（纯列表，外层自行包裹卡片） ---------- */
 function LiveFeed({ feed, limit = 7 }) {
   return (
@@ -713,25 +755,8 @@ export default function DataScreen() {
       {/* 园区今日概览（五个指标一行 + 标题右侧运行状态） */}
       <TodayOverview d={d} />
 
-      {/* 主体：下方内容三列显示 */}
-      <main className="bd-main bd-main-3col">
-        {/* 第 1 列：TOKEN 消耗 · 工具调用 */}
-        <section className="bd-col bd-col-left">
-          <TokenPanel d={d} />
-          <ToolsPanel d={d} />
-        </section>
-
-        {/* 第 2 列：入园项目 · 带动就业 */}
-        <section className="bd-col bd-col-mid">
-          <ProjectsPanel d={d} />
-          <JobsPanel d={d} />
-        </section>
-
-        {/* 第 3 列：营收总数 */}
-        <section className="bd-col bd-col-right">
-          <RevenuePanel d={d} />
-        </section>
-      </main>
+      {/* 中部大屏：五项内容自动轮换展示（降低信息密度） */}
+      <MiddleRotator d={d} />
 
       {/* 园区实时动态（底部整行 · 园区概览条上方 · 内容三列） */}
       <section className="bd-feed-row">