# Layout Structure / 页面布局结构

> Extracted from SKILL.md v2.1.0 — Zone 0-3 layout specifications, CSS variables, responsive breakpoints, and full page structure template.

---

## ASCII Wireframe (V5 Four-Zone Layout)

```
┌─────────────────────────────────────────────────────────────┐
│ Zone 0: Global Header (56px fixed)                          │
│ [Logo] [标题] [数据截止: 2024-12] [公司筛选▾] [时间筛选▾]    │
├─────────────────────────────────────────────────────────────┤
│ Zone 1: Tab Filter (sticky top:56px)                        │
│ [公司▾] [阶段▾] [行业▾] [类型▾] [时间▾]                    │
├─────────────────────────────────────────────────────────────┤
│ 面包屑A: Tab筛选路径 (32px, 蓝色#409EFF)                    │
│ 集团 > 全集团                                               │
├─────────────────────────────────────────────────────────────┤
│ Zone 2: KPI Section                                          │
│ ┌───────┬───────┬───────┬───────┬───────┐                   │
│ │累计投 │投资项 │在管资 │累计退 │AUM基金│                   │
│ │资     │目     │产     │出     │       │                   │
│ └───────┴───────┴───────┴───────┴───────┘                   │
├─────────────────────────────────────────────────────────────┤
│ 面包屑B: 组件下钻路径 (32px, 绿色#67C23A, 条件显示)         │
│ 全集团 > 下钻条件                                           │
├─────────────────────────────────────────────────────────────┤
│ Zone 3: Chart Section (flex:1)                              │
│ ┌─────────────────┬─────────────────────────┐               │
│ │ 左列: 仪表区    │ 右列: 明细区            │               │
│ │ [环形图:阶段]   │ [折线图:趋势]           │               │
│ │ [柱状图:公司]   │ [表格:项目明细]         │               │
│ └─────────────────┴─────────────────────────┘               │
└─────────────────────────────────────────────────────────────┘
│ 详情页 (独立页面, URL参数传递)                               │
└─────────────────────────────────────────────────────────────┘
```

---

## CSS Variables (MUST define in `:root`)

```css
:root {
  --primary-blue: #2563EB;
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --success: #059669;
  --danger: #DC2626;
  --breadcrumb-a-color: #409EFF;
  --breadcrumb-b-color: #67C23A;
}
```

---

## Zone 0: Global Header (56px fixed)

```html
<!-- Zone 0: Global Header (56px fixed) -->
<header class="global-header" role="banner">
  <div class="header-left">
    <div class="logo">LOGO</div>
    <h1 class="page-title">董事长驾驶舱</h1>
  </div>
  <div class="header-right">
    <span class="data-date">数据截止: 2024-12-31</span>
    <select class="company-filter" id="company-filter" aria-label="公司筛选">
      <option value="all">全集团</option>
      <option value="company1">子公司A</option>
      <option value="company2">子公司B</option>
    </select>
    <select class="time-filter" id="time-filter" aria-label="时间筛选">
      <option value="2024">2024年</option>
      <option value="2023">2023年</option>
    </select>
  </div>
</header>
```

**Key CSS:**
```css
.global-header {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 24px; z-index: 100;
}
```

---

## Zone 1: Tab Filter (sticky top:56px)

```html
<!-- Zone 1: Tab Filter -->
<section class="tab-filter" role="navigation" aria-label="筛选条件">
  <div class="filter-group">
    <select class="filter-item" data-filter="company" aria-label="公司筛选">
      <option value="">公司</option>
    </select>
    <select class="filter-item" data-filter="stage" aria-label="阶段筛选">
      <option value="">阶段</option>
    </select>
    <select class="filter-item" data-filter="industry" aria-label="行业筛选">
      <option value="">行业</option>
    </select>
    <select class="filter-item" data-filter="type" aria-label="类型筛选">
      <option value="">类型</option>
    </select>
    <select class="filter-item" data-filter="time" aria-label="时间筛选">
      <option value="">时间</option>
    </select>
  </div>
</section>
```

**Key CSS:**
```css
.tab-filter {
  position: sticky; top: 56px;
  background: var(--bg-card); padding: 12px 24px;
  border-bottom: 1px solid var(--border); z-index: 90;
}
```

---

## Zone 3: Chart Section (flex:1)

```html
<!-- Zone 3: Chart Section -->
<section class="chart-section" aria-label="数据分析图表">
  <div class="chart-column-left">
    <!-- COMP-DOUGHNUT-01: 投资阶段分布环形图 -->
    <div class="chart-container" data-component="COMP-DOUGHNUT-01">
      <h3 class="chart-title">投资阶段分布</h3>
      <div id="chart-doughnut" class="echarts-chart" role="img" aria-label="投资阶段分布环形图"></div>
    </div>
    <!-- COMP-BAR-V-01: 子公司对比柱状图 -->
    <div class="chart-container" data-component="COMP-BAR-V-01">
      <h3 class="chart-title">子公司投资对比</h3>
      <div id="chart-bar" class="echarts-chart" role="img" aria-label="子公司投资对比柱状图"></div>
    </div>
  </div>

  <div class="chart-column-right">
    <!-- COMP-LINE-01: 投资趋势折线图 -->
    <div class="chart-container" data-component="COMP-LINE-01">
      <h3 class="chart-title">投资趋势</h3>
      <div id="chart-line" class="echarts-chart" role="img" aria-label="投资趋势折线图"></div>
      <div class="chart-summary">
        <span>本月投资: 8.5亿</span><span>环比: +12%</span><span>同比: +23%</span>
      </div>
    </div>
    <!-- COMP-TABLE-01: 项目明细表格 -->
    <div class="chart-container" data-component="COMP-TABLE-01">
      <h3 class="chart-title">项目明细</h3>
      <!-- table content -->
    </div>
  </div>
</section>
```

**Key CSS:**
```css
.chart-section {
  display: flex; flex: 1; padding: 24px; gap: 24px;
}
.chart-column-left, .chart-column-right {
  flex: 1; display: flex; flex-direction: column; gap: 24px;
}
.chart-container {
  background: var(--bg-card); border-radius: 12px;
  padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
```

---

## Full Page Structure Template

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>董事长驾驶舱</title>
  <style>
    :root { /* CSS variables as defined above */ }
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg-page); color: var(--text-primary);
      margin: 0; padding-top: 56px;
    }
    /* Zone styles — see respective sections */
  </style>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>
<body>
  <header class="global-header">...</header>
  <section class="tab-filter">...</section>
  <nav class="breadcrumb-a">...</nav>
  <main class="main-content">
    <section class="kpi-section">...</section>
    <nav class="breadcrumb-b hidden">...</nav>
    <section class="chart-section">...</section>
  </main>
  <script>/* interaction logic */</script>
</body>
</html>
```

---

## Responsive Breakpoints

| Breakpoint | Width | Grid Behavior |
|------------|-------|---------------|
| XL | ≥1200px | KPI 5 cols, chart side-by-side |
| MD | 768-1199px | KPI 3 cols |
| SM | 576-767px | KPI 2 cols, chart stacked |
| XS | <576px | KPI 1 col, mobile-first |

**CSS:**
```css
@media (max-width: 1199px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-section { flex-direction: column; }
}
@media (max-width: 575px) { .kpi-grid { grid-template-columns: 1fr; } }
```