# 布局结构规范 / Layout Structure Specification

> **版本**: 2.0.0 | **日期**: 2026-06-24
> **兼容**: 设计系统规范 design-system-spec.md

---

## 全局页面结构 / Global Page Structure

```
┌─────────────────────────────────────────────────────────────┐
│ Zone 0: 全局顶栏 (56px fixed)                                │
│ z-index: 1000 | position: fixed | top: 0                    │
├─────────────────────────────────────────────────────────────┤
│ Zone 1: 面包屑 (32px sticky, top: 56px)                      │
│ z-index: 999                                                │
├─────────────────────────────────────────────────────────────┤
│ Zone 2: 时间范围选择器 (40px sticky, top: 88px)               │
│ z-index: 998                                                │
├─────────────────────────────────────────────────────────────┤
│ Zone 3: KPI 卡片区 (自适应高度, top: 128px)                    │
│ z-index: 997                                                │
├─────────────────────────────────────────────────────────────┤
│ Zone 4: 图表区 (flex: 1, 滚动, top: 自动)                      │
│ overflow-y: auto                                            │
└─────────────────────────────────────────────────────────────┘
```

---

## Zone 0: 全局顶栏 (Global Header)

### 结构
```html
<header class="global-header" role="banner">
  <div class="header-left">
    <div class="header-logo">LOGO</div>
    <h1 class="header-title">盛京金控·董事长驾驶舱</h1>
</header>
```

### 尺寸
- **Height**: `56px`
- **Padding**: `0 24px`
- **Background**: `var(--bg-card)`
- **Border**: `1px solid var(--border)` (bottom only)
- **Z-index**: `1000`

### 布局
- `display: flex`
- `justify-content: space-between`
- `align-items: center`
- `flex-shrink: 0`

### 响应式
| Breakpoint | Logo Size | Font Size | Padding |
|------------|-----------|-----------|---------|
| XL (`≥1200px`) | 36px | 18px | `0 24px` |
| LG (`768-1199px`) | 32px | 16px | `0 20px` |
| MD (`576-767px`) | 28px | 14px | `0 16px` |
| SM (`<576px`) | 24px | 13px | `0 12px` |

---

## Zone 1: 主面包屑 (Primary Breadcrumb)

### 样式
```css
.breadcrumb {
  background: var(--bg-card);
  padding: 8px 24px;
  font-size: 13px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
}
.breadcrumb-item-a { color: var(--primary-blue); font-weight: 600; }
.breadcrumb-item-b { color: var(--success); font-weight: 600; }
.breadcrumb-separator { color: var(--text-muted); margin: 0 8px; }
```

### 交互
- 可点击层级回退
- 溢出横向滚动
- 前2级 + 后2级始终可见
- 当前高亮颜色区分

---

## Zone 2: 时间范围选择器 (Time Range Selector)

### 样式
```css
.time-range-selector {
  display: inline-flex;
  gap: 8px;
  padding: 8px 24px;
  align-items: center;
}
.time-select {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
}
```

### 布局模式
- **开始**: `#time-start` (默认"开始")
- **至**: 灰色分隔符 `至` (13px, `color: var(--text-muted)`)
- **结束**: `#time-end` (默认"至今")

### 交互
- 双下拉框联动
- 默认范围: `Start: null, End: '至今'`
- 图表数据动态过滤

---

## Zone 3: KPI 卡片布局 (KPI Card Grid)

### 3.1 折叠模式 (Fold Mode)

```html
<div class="kpi-card kpi-card-fold">
  <div class="kpi-name">累计投资总额</div>
  <div class="kpi-value">¥128.50亿</div>
  <div class="kpi-change positive">+12.5% ↑</div>
  <div class="kpi-aux">较去年同期</div>
  <button class="kpi-fold-trigger" aria-expanded="false">🔺</button>
  <div class="kpi-sub-items">...</div>
</div>
```

### 3.2 明细模式 (Detail Mode)

```html
<div class="kpi-card kpi-card-detail">
  <div class="kpi-name">累计投资总额</div>
  <div class="kpi-value">¥128.50亿</div>
  <div class="kpi-change positive">+12.5% ↑</div>
  <svg class="kpi-sparkline" viewBox="0 0 60 40">...</svg>
  <div class="kpi-split-container">
    <div class="kpi-split-left">...</div>
    <div class="kpi-split-right">...</div>
  </div>
</div>
```

### 3.3 抽屉模式 (Drawer Mode)

```html
<div class="kpi-card kpi-card-drawer">
  <div class="kpi-name">累计投资总额</div>
  <div class="kpi-value">¥128.50亿</div>
  <div class="kpi-change positive">+12.5% ↑</div>
  <button class="kpi-luxury-trigger" aria-label="查看详情">▶</button>
</div>
```

### 3.4 模式切换

```javascript
function setCardStyle(style) {
  // style = 'fold' | 'detail' | 'drawer'
  // Removes all .kpi-card-{fold,detail,drawer}
  // Adds .kpi-card-{style} to all cards
}
```

---

## Zone 4: 图表区域 (Chart Section)

### 4.1 图表布局

```
┌────────────────────┬────────────────────┐
│ 左列: GAUGE + BAR   │ 右列: LINE + TABLE  │
│ 或 RING             │ 或 RING + TABLE     │
│                    │                    │
└────────────────────┴────────────────────┘
```

### 4.2 响应式布局
| Breakpoint | Layout | Container Flex |
|------------|--------|----------------|
| XL | 2列 `1fr 1fr` | `display: flex` |
| LG | 2列 `1fr 1fr` | `display: flex` |
| MD | 2列 (紧凑) | `display: flex` |
| SM | 1列 `1fr` | `flex-direction: column` |

### 4.3 图表容器样式

```css
.chart-section {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 16px;
}
.chart-column-left,
.chart-column-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
```

---

## 侧滑抽屉布局 (Drawer Panel Layout)

### 结构
```html
<div class="drawer-overlay" id="drawer-overlay">
  <aside class="drawer" id="drawer" role="dialog">
    <div class="drawer-header">
      <nav class="drawer-breadcrumb">...</nav>
      <button class="drawer-close">×</button>
    </div>
    <div class="drawer-body" id="drawer-body">
      <!-- Mini-cards or detail content -->
    </div>
    <div class="drawer-footer">
      <button>← 返回</button>
      <button>全屏查看 →</button>
    </div>
  </aside>
</div>
```

### 动画
```css
@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
```

---

## 响应式完整断点表

| Property | XL (≥1200px) | LG (768-1199px) | MD (576-767px) | SM (<576px) |
|----------|--------------|-----------------|----------------|-------------|
| **Header height** | `56px` | `56px` | `56px` | `44px` |
| **Header padding** | `0 24px` | `0 20px` | `0 16px` | `0 12px` |
| **KPI columns** | `5` | `3` | `2` | `1` |
| **Chart height** | `400px` | `320px` | `260px` | `200px` |
| **Gap (cards/charts)** | `20px` | `16px` | `16px` | `12px` |
| **Drawer width** | `min(520px, 45vw)` | `100vw` | `100vw` | `100vw` |
| **Touch target** | `44×44px` | `44×44px` | `44×44px` | `44×44px` |