容器组件

提供大屏容器和面板盒子，用于布局和主题管理。

ScreenContainer 大屏容器

提供主题切换、全屏、自适应缩放等能力的顶层容器。

基础用法

:::demo

dashboard/screen-container-basic

:::

API

参数	说明	类型	默认值
theme	当前主题名称	'techBlue' | 'techPurple' | 'techGreen' | 'darkGold'	'techBlue'
designWidth	设计稿宽度（用于自适应缩放）	number	1920
designHeight	设计稿高度	number	1080
toolbar	是否显示工具栏（主题切换、全屏）	boolean	true
fullscreenable	是否允许全屏	boolean	true

Events

事件名	说明	回调参数
theme-change	主题切换时触发	(themeName: string)
fullscreen-change	全屏状态变化时触发	(isFullscreen: boolean)

Slots

插槽名	说明
default	主体内容区域
toolbar-left	工具栏左侧插槽（title、logo 等）
toolbar-right	工具栏右侧插槽（自定义按钮等）

---

PanelBox 面板盒子

带标题、边框、背景的内容面板，用于包裹图表或数据块。

基础用法

:::demo

dashboard/panel-box-basic

:::

API

参数	说明	类型	默认值
title	面板标题	string	''
icon	标题图标类名	string	''
padding	内容区内边距	string	'16px'
bordered	是否显示边框	boolean	true

Slots

插槽名	说明
default	面板内容区
title	自定义标题区（会覆盖 title prop）
extra	标题右侧额外内容（如：刷新按钮、时间范围等）

---

主题系统

ScreenContainer 提供了 4 套预置主题，每套主题定义了一组 CSS 变量：

主题变量

--fd-bg-primary        /* 主背景色 */
--fd-bg-secondary      /* 次背景色（面板、卡片） */
--fd-border-color      /* 边框颜色 */
--fd-text-primary      /* 主文字颜色 */
--fd-text-secondary    /* 次文字颜色 */
--fd-text-disabled     /* 禁用文字颜色 */
--fd-primary           /* 主题色（品牌色） */
--fd-success           /* 成功色 */
--fd-warning           /* 警告色 */
--fd-danger            /* 危险色 */
--fd-info              /* 信息色 */

预置主题

主题名	说明	主题色
techBlue	科技蓝（默认）	#0ea5e9
techPurple	科技紫	#a855f7
techGreen	科技绿	#10b981
darkGold	暗金色	#f59e0b

自定义主题

通过 provide('dashboardTheme', customTheme) 注入自定义主题：

import { provide } from 'vue'
import type { DashboardTheme } from '@axewo/fin-dashboard'

const myTheme: DashboardTheme = {
  name: 'myTheme',
  colors: {
    bgPrimary: '#0B0E14',
    bgSecondary: '#1a1d29',
    borderColor: 'rgba(56, 189, 248, 0.2)',
    textPrimary: '#F8FAFC',
    textSecondary: '#94A3B8',
    textDisabled: '#64748B',
    primary: '#38BDF8',
    success: '#4FD1C5',
    warning: '#F97316',
    danger: '#EF4444',
    info: '#6366F1',
  },
}

provide('dashboardTheme', ref(myTheme))

---

布局建议

典型大屏布局结构

<FScreenContainer>
  <!-- 顶部指标卡片 -->
  <div class="metrics-row">
    <FMetricCard />
    <FMetricCard />
    <FMetricCard />
    <FMetricCard />
  </div>

  <!-- 中部图表区 -->
  <div class="charts-grid">
    <FPanelBox title="销售趋势">
      <FBarLineChart />
    </FPanelBox>
    <FPanelBox title="风险分布">
      <FRiskDonut />
    </FPanelBox>
  </div>

  <!-- 底部表格/列表 -->
  <div class="bottom-tables">
    <FPanelBox title="实时告警">
      <FAlertCardList />
    </FPanelBox>
    <FPanelBox title="设备状态">
      <FStatusTable />
    </FPanelBox>
  </div>
</FScreenContainer>

自适应缩放原理

ScreenContainer 使用 transform: scale() 实现整体缩放：

1. 固定 designWidth × designHeight 作为设计基准
2. 监听窗口 resize，计算缩放比例
3. 应用 transform: scale(ratio) + transform-origin: 0 0
4. 确保内容按设计稿 1:1 还原，无需响应式断点

适用场景： 固定比例大屏投屏、展示厅、会议室显示器
不适用场景： 需要流式布局的管理后台（建议用常规响应式布局）

---

使用建议

1. ScreenContainer — 大屏场景的唯一顶层容器，负责主题、全屏、缩放
2. PanelBox — 每个图表、表格、列表都用 PanelBox 包裹，形成视觉分块
3. 主题切换 — 监听 theme-change 事件持久化用户选择（localStorage）
4. 工具栏插槽 — 用 toolbar-left 放置 logo/标题，toolbar-right 放置自定义操作按钮
5. 性能 — ScreenContainer 只应出现一次，避免嵌套使用