diff --git a/src/pages/DataScreen.jsx b/src/pages/DataScreen.jsx index 34b6d75..c5420f5 100644 --- a/src/pages/DataScreen.jsx +++ b/src/pages/DataScreen.jsx @@ -486,99 +486,94 @@ function ParkOverviewStrip({ d }) { ); } -/* ---------- TOKEN 消耗 ---------- */ -function TokenPanel({ d }) { +/* ========================================================= + 中部轮换大屏(一次展示一个面板,自动轮换,降低信息密度) + ========================================================= */ + +/* ---------- TOKEN 消耗(大屏版) ---------- */ +function TokenBig({ d }) { return ( -
- {/* 概括数据内联在标题右侧 */} - - 今日{fmtWan(d.token.today)} tokens - 累计{fmtWan(d.token.total)} tokens - 速率{d.token.rate} t/s -
- } - /> - {/* 四列布局:环形图(最左) · 模型(左) · 折线图(中) · 数值(右) */} -
-
- +
+ + 今日消耗{fmtWan(d.token.today)} tokens + 累计消耗{fmtWan(d.token.total)} tokens + 实时速率{d.token.rate} t/s
-
- {MODELS.map((m) => ( -
- - {m.name} -
- ))} -
-
- +
+
+
-
- {MODELS.map((m) => ( -
- - {m.value}% -
- ))} +
+
+ +
+
+ {MODELS.map((m) => ( +
+ + {m.name} +
+ ))} +
+
+ {MODELS.map((m) => ( +
+ + {m.value}% +
+ ))} +
); } -/* ---------- 工具调用 ---------- */ -function ToolsPanel({ d }) { +/* ---------- 工具调用(大屏版) ---------- */ +function ToolsBig({ d }) { return ( -
- {/* 概括数据内联在标题右侧 */} - - 今日调用{fmtInt(d.tools.today)} 次 - 累计调用{(d.tools.total / 10000).toFixed(1)}万 次 - 成功{d.tools.success}% - {/* 服务节点12 / 12 在线 */} -
- } - /> -
热门工具调用占比
- -
- · 文本创作 34% - · 智能分析 27% - · 多模态生成 16% +
+ + 今日调用{fmtInt(d.tools.today)} 次 + 累计调用{(d.tools.total / 10000).toFixed(1)}万 次 + 成功率{d.tools.success}% + 服务节点12 / 12 在线 +
+ } /> +
+
+
今日调用{fmtInt(d.tools.today)}
+
累计调用{(d.tools.total / 10000).toFixed(1)}万次
+
成功率{d.tools.success}%
+
AI 服务节点12/12 在线
+
+
+
热门工具调用占比
+ +
); } -/* ---------- 入园项目 ---------- */ +/* ---------- 入园项目(组视图 · 中密度) ---------- */ function ProjectsPanel({ d }) { return (
- {/* 概括数据内联在标题右侧 */} - - 在园{d.projects.inPark} 家 - 累计孵化{d.projects.cum} 家 - 本月新增{d.projects.todayNew} 家 - {/* 高企 / 研发32 / 18 */} -
- } - /> + + 在园{d.projects.inPark} 家 + 累计孵化{d.projects.cum} 家 + 今日新增{d.projects.todayNew} 家 + {/* 高企 / 研发32 / 18 */} +
+ } />
- +
{ZONE_DIST.map((z) => (
@@ -604,23 +599,18 @@ function ProjectsPanel({ d }) { ); } -/* ---------- 带动就业 ---------- */ +/* ---------- 带动就业(组视图 · 中密度) ---------- */ function JobsPanel({ d }) { return (
- {/* 概括数据内联在标题右侧 */} - - 就业{fmtInt(d.jobs.total)} 人 - 毕业生1,680 人 - 实习506 人 - 新增{d.jobs.todayNew} 人 -
- } - /> + + 累计{fmtInt(d.jobs.total)} 人 + 毕业生1,680 人 + 实习506 人 + {/* 今日新增{d.jobs.todayNew} 人 */} +
+ } />
行业就业分布
{INDUSTRY.slice(0, 6).map((it, i) => { @@ -640,23 +630,18 @@ function JobsPanel({ d }) { ); } -/* ---------- 营收总数 ---------- */ +/* ---------- 营收总数(组视图 · 中密度) ---------- */ function RevenuePanel({ d }) { return (
- {/* 概括数据内联在标题右侧 */} - - 累计{fmtWan(d.revenue.total)} 元 - 今日+{d.revenue.today} 万 - 估值5.2 亿元 - 环比+{d.revenue.growth}% -
- } - /> + + 累计营收{fmtWan(d.revenue.total)} 元 + 今日营收+{d.revenue.today} 万 + 企业估值5.2 亿元 + 环比+{d.revenue.growth}% +
+ } />
@@ -670,6 +655,63 @@ function RevenuePanel({ d }) { ); } +/* ---------- 中部轮换器:五项面板自由组织成两组,组间轮换 ---------- */ +const ROTATE_MS = 10000; + +function MiddleRotator({ d }) { + const views = [ + { + key: 'ai', + label: 'AI 智能应用', + icon: 'cpu', + node: ( +
+ + +
+ ), + }, + { + key: 'park', + label: '园区经营概况', + icon: 'building', + node: ( +
+ + + +
+ ), + }, + ]; + 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 ( +
+
+ {views.map((p, i) => ( + + ))} +
+
+
+ {views[idx].node} +
+
+
+ ); +} + /* ---------- 实时动态(纯列表,外层自行包裹卡片) ---------- */ function LiveFeed({ feed, limit = 7 }) { return ( @@ -713,25 +755,8 @@ export default function DataScreen() { {/* 园区今日概览(五个指标一行 + 标题右侧运行状态) */} - {/* 主体:下方内容三列显示 */} -
- {/* 第 1 列:TOKEN 消耗 · 工具调用 */} -
- - -
- - {/* 第 2 列:入园项目 · 带动就业 */} -
- - -
- - {/* 第 3 列:营收总数 */} -
- -
-
+ {/* 中部大屏:五项内容自动轮换展示(降低信息密度) */} + {/* 园区实时动态(底部整行 · 园区概览条上方 · 内容三列) */}
diff --git a/src/styles/datascreen.css b/src/styles/datascreen.css index 513fb52..2688848 100644 --- a/src/styles/datascreen.css +++ b/src/styles/datascreen.css @@ -264,7 +264,7 @@ position: relative; z-index: 2; flex-shrink: 0; - padding: 0 clamp(12px, 1.5vw, 22px); + padding: 0 clamp(12px, 1.5vw, 22px) 10px; } .bd-feed-row .bd-feed-card { height: 128px; @@ -294,6 +294,187 @@ font-size: 9.5px; } +/* ============ 中部轮换大屏(自动轮换 · 降低信息密度) ============ */ +.bd-rotator { + position: relative; + z-index: 2; + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + gap: 8px; + padding: clamp(6px, 0.7vw, 10px) clamp(12px, 1.5vw, 22px); +} +.bd-rotator-tabs { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + flex-shrink: 0; +} +.bd-rot-tab { + position: relative; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 16px; + font-size: 12.5px; + font-weight: 600; + color: var(--bd-sub); + background: rgba(255, 255, 255, 0.6); + border: 1px solid rgba(47, 107, 255, 0.12); + border-radius: 10px; + cursor: pointer; + overflow: hidden; + transition: all 0.2s; + white-space: nowrap; +} +.bd-rot-tab .appica-ico { color: var(--bd-blue); } +.bd-rot-tab:hover { border-color: rgba(47, 107, 255, 0.4); color: var(--bd-ink); } +.bd-rot-tab.active { + color: #fff; + background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan)); + border-color: transparent; + box-shadow: 0 4px 14px rgba(47, 107, 255, 0.35); +} +.bd-rot-tab.active .appica-ico { color: #fff; } +.bd-rot-progress { + position: absolute; + left: 0; + bottom: 0; + height: 2.5px; + width: 0; + background: rgba(255, 255, 255, 0.85); + opacity: 0; +} +.bd-rot-tab.active .bd-rot-progress { + opacity: 1; + animation: bdRotProgress 10s linear forwards; +} +@keyframes bdRotProgress { from { width: 0; } to { width: 100%; } } + +.bd-rotator-stage { + flex: 1; + min-height: 0; + position: relative; +} +.bd-rotator-slide { + position: absolute; + inset: 0; + animation: bdRotIn 0.5s ease both; +} +@keyframes bdRotIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* 组视图:2 列 / 3 列网格 */ +.bd-view { + position: absolute; + inset: 0; + display: grid; + gap: clamp(10px, 1vw, 16px); +} +.bd-view-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.bd-view-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.bd-view > .bd-card { min-width: 0; min-height: 0; } + +/* 大屏面板(一次只展示一个,布局舒展) */ +.bd-big { + padding: clamp(14px, 1.4vw, 22px); +} +.bd-big-body { + flex: 1; + min-height: 0; + display: flex; + gap: clamp(16px, 2vw, 32px); +} +.bd-big-left { + flex: 1.5; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; +} +.bd-big-right { + flex: 1; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; + justify-content: center; + gap: 12px; +} +.bd-big-chart { justify-content: center; } +.bd-big-chart .bd-chart-svg { height: 100%; } +.bd-big-right .bd-donut-block { justify-content: center; } + +/* 大数字统计块 */ +.bd-big-stats { gap: 12px; } +.bd-big-stat { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 14px 20px; + border-radius: 14px; + background: rgba(244, 248, 253, 0.8); + border: 1px solid rgba(47, 107, 255, 0.08); +} +.bd-big-stat span { font-size: 13px; color: var(--bd-sub); white-space: nowrap; } +.bd-big-stat b { + font-family: "JetBrains Mono", "Oswald", monospace; + font-size: 26px; + font-weight: 700; + color: var(--bd-ink); + white-space: nowrap; +} +.bd-big-stat b em { + font-style: normal; + font-size: 13px; + color: var(--bd-sub); + margin-left: 4px; +} + +/* TOKEN 大屏:左图表 + 右环形图/模型/数值 */ +.bd-big-token .bd-big-right { + flex-direction: row; + align-items: center; + gap: 16px; +} +.bd-big-token .bd-model-list { flex: 1; gap: 8px; } +.bd-big-token .bd-value-list { flex: 0 0 64px; gap: 8px; } + +/* 工具调用大屏:左统计 + 右大条形 */ +.bd-big-bars { justify-content: center; } +.bd-big-bars .bd-hbars { gap: 16px; } +.bd-big-bars .bd-hbar { grid-template-columns: 120px minmax(0, 1fr) 56px; gap: 14px; } +.bd-big-bars .bd-hbar-name { font-size: 14px; } +.bd-big-bars .bd-hbar-track { height: 16px; } +.bd-big-bars .bd-hbar-val { font-size: 14px; } + +/* 入园项目大屏:左环形图+图例 · 右名录滚动 */ +.bd-big-zone { + flex-direction: row; + align-items: center; + gap: 28px; +} +.bd-big-zone .bd-zone-legend { grid-template-columns: 1fr; gap: 6px; } +.bd-big-zone .bd-zone-row { font-size: 13px; } +.bd-big-ticker { gap: 6px; } +.bd-big-ticker .bd-ticker { flex: 1; } +.bd-big-ticker .bd-ticker-item { padding: 6px 12px; font-size: 13px; } + +/* 带动就业大屏:左大柱状 + 右统计 */ +.bd-big-jobsbars { justify-content: center; } +.bd-big-jobsbars .bd-jobs-bars { gap: 16px; } +.bd-big-jobsbars .bd-vbar-val { font-size: 15px; } +.bd-big-jobsbars .bd-vbar-name { font-size: 12px; } + +/* 营收大屏:左大折线 + 右统计/标签 */ +.bd-big-revenue .bd-big-right { gap: 12px; } +.bd-big-revenue .bd-revenue-tags { margin-top: 2px; } + /* ============ 卡片(通透玻璃,弱化卡片感) ============ */ .bd-card { position: relative; @@ -351,6 +532,8 @@ align-items: center; gap: 6px; white-space: nowrap; + min-width: 0; + overflow: hidden; } /* 标签(轻量徽标) */ @@ -1137,6 +1320,19 @@ .bd-model-list { flex-basis: 88px; } .bd-value-list { flex-basis: 44px; } .bd-split-tri .bd-donut { width: 64px; height: 64px; } + .bd-rot-tab { padding: 4px 11px; font-size: 11.5px; } + .bd-big { padding: 10px 14px; } + .bd-big-stat { padding: 9px 14px; } + .bd-big-stat b { font-size: 19px; } + .bd-big-stat span { font-size: 11.5px; } + .bd-big-body { gap: 14px; } + .bd-big .bd-donut { width: 108px; height: 108px; } + .bd-big-zone .bd-zone-row { font-size: 11.5px; } + .bd-big-ticker .bd-ticker-item { padding: 4px 10px; font-size: 11.5px; } + .bd-big-bars .bd-hbar-name { font-size: 12px; } + .bd-big-bars .bd-hbar-track { height: 12px; } + .bd-big-bars .bd-hbar-val { font-size: 12px; } + .bd-big-jobsbars .bd-vbar-name { font-size: 10px; } } /* 窄屏:收缩 TOKEN 卡内部列宽 + 概览条压缩 */ @media (max-width: 1500px) { @@ -1576,12 +1772,33 @@ gap: 5px; } /* 卡片标题右侧的概括数据内联 */ +/* 卡片标题右侧的概括数据内联(强制一行,不允许超出) */ .bd-head-stats { display: flex; align-items: center; justify-content: flex-end; - flex-wrap: wrap; - gap: 5px; + flex-wrap: nowrap; + gap: 4px; + min-width: 0; +} +.bd-head-stats .bd-ost-chip { + flex-shrink: 1; + min-width: 0; + padding: 2px 7px; + font-size: 9.5px; + gap: 3px; + overflow: hidden; + white-space: nowrap; +} +.bd-head-stats .bd-ost-chip i { + overflow: hidden; + text-overflow: ellipsis; + max-width: 70px; +} +.bd-head-stats .bd-ost-chip b { + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; } .bd-ost-chip { display: inline-flex;