# Bill 板块布局统一改造计划

> 目标：统一 `@src/views/bill` 下页面布局与视觉风格，解决“底部 30px 留白不稳定”问题，并沉淀可复用布局组件，便于后续新会话直接接续执行。

## 1. 背景与问题

当前 `bill` 板块存在以下共性问题：

1. 页面布局实现不统一（外层滚动、内层滚动、固定高度混用）。
2. 多数页面为“左右两列 + 多卡片”结构，但容器命名、间距、宽高策略不一致。
3. `30px` 底部留白在不同页面生效机制不同，容易出现：
   - 某页不生效
   - 增加占位后挤压布局
   - Header（Tab/操作按钮）受影响
4. 样式硬编码较多（固定宽高、局部 margin/padding），复用性低。

## 2. 总体改造策略

采用“**分层统一 + 渐进迁移**”策略，避免一次性大改风险：

- **第一层：板块承载层统一**
  - 统一滚动、内容宽度、底部安全留白机制。
- **第二层：页面布局骨架统一**
  - 抽象“页面壳 + 双列布局 + 卡片容器”组件。
- **第三层：业务页迁移**
  - 先迁移典型页，再批量替换。

## 3. 分阶段计划

### 阶段 A：基线确认与止血（进行中）

- 修复当前试错引入的结构问题（例如模板闭合错误、布局挤压）。
- 保证关键页面可用：
  - `background`
  - `processAnalysis`
  - `introdoction`

### 阶段 B：新增通用布局组件（进行中）

#### 完成备注（2026-04-02）

- [x] 第一步已完成并通过验收：完成布局组件目录与基础文件脚手架
  - `src/views/bill/components/layout/BillPageShell.vue`
  - `src/views/bill/components/layout/BillTwoColumn.vue`
  - `src/views/bill/components/layout/BillPanel.vue`
  - `src/views/bill/components/layout/index.js`
- [x] 第二步已完成并通过验收：实现 `BillPageShell` 滚动容器与底部 `30px` 安全留白机制
- [x] 第三步已完成并通过验收：实现 `BillTwoColumn` 统一双列布局（1064/520 + gap 16 + 响应式堆叠）
- [x] 第四步已完成并通过验收：实现 `BillPanel` 统一卡片结构与基础样式（header/body/footer + 可配置边框/圆角/阴影）
- [x] 第五步已完成并通过验收：`bill-tokens.scss` 接入 `BillPageShell/BillTwoColumn/BillPanel` 并替换关键样式硬编码
- [x] 第六步已完成并通过验收：试点页 `background/index.vue` 已迁移到统一布局骨架（`BillPageShell + BillTwoColumn`）
- [x] 第六步修正项（验收反馈已落实）：
  - 修正 1：移除 `.right-panel` 的 `margin-left/margin-right`，避免右列偏移与原样式不一致
  - 修正 2：`BillPageShell` 不再使用内部滚动容器；页面滚动回到外层 `layout-main`，确保 Header 与内容一起滚动
- [x] 第七步已完成并通过验收：`introdoction/index.vue` 迁移到统一布局骨架（`BillPageShell + BillTwoColumn`）
- [x] 第七步修正项（验收反馈已落实）：
  - 修正 1：移除 `.introduction-wrap-right` 的 `margin-left/margin-right`，消除右列偏移
  - 修正 2：在 `.introduction-wrap-content` 增加 `margin-bottom: 30px`，确保外层滚动时可见底部留白
- [x] 第八步已完成并通过验收：`template/index.vue` 迁移到统一布局骨架（`BillPageShell + BillTwoColumn`）
- [x] 第八步注意点（已沉淀）：
  - 删除 `page-bottom-gap` 占位节点，避免与统一留白策略重复
  - 在双列容器 `.content-row` 增加 `margin-bottom: 30px`，适配“外层 `layout-main` 滚动”模式
  - 迁移后需检查未使用变量并清理，避免 lint 噪音影响后续页面迁移
- [x] 第九步已完成并通过验收：`deepDig/processOverview/index.vue` 迁移到统一页面壳（`BillPageShell`）
- [x] 第九步注意点（已沉淀）：
  - 保留页面内部横向滚动容器（`.main`），仅替换页面根壳，避免时间轴布局回归风险
  - 删除 `page-bottom-gap`，改用页面容器底部留白（`margin-bottom: 30px`）适配外层滚动
- [x] 第十步已完成并通过验收：`deepDig/processAnalysis/index.vue` 迁移到统一页面壳（`BillPageShell`）
- [x] 第十步注意点（已沉淀）：
  - 保持原双列业务结构与内部滚动策略不变，仅替换页面根壳
  - 页面底部留白统一为容器 `margin-bottom: 30px`，与外层 `layout-main` 滚动机制一致

新增组件建议放在：`src/views/bill/components/layout/`

#### 计划新增组件索引

1. `src/views/bill/components/layout/BillPageShell.vue`
   - 作用：统一页面根容器、内容区、底部留白（30px）机制。

2. `src/views/bill/components/layout/BillTwoColumn.vue`
   - 作用：统一左右列布局（默认 1064 / 520）、列间距、响应式策略。

3. `src/views/bill/components/layout/BillPanel.vue`
   - 作用：统一卡片容器（header/body/footer）结构、间距、基础样式。

4. `src/views/bill/components/layout/index.js`
   - 作用：导出布局组件，便于页面统一引入。

> 可选（后续）：
> - `BillPanelGroup.vue`（同列多卡片统一间距）
> - `BillPageSection.vue`（统一页面内 section 标题与辅助动作区）

### 阶段 C：样式 Token 统一（计划）

新增：`src/styles/bill-tokens.scss`（或接入现有变量体系）

- 间距：`8/12/16/24/30`
- 列间距：`16`
- 标题字号/字重
- 卡片边框、阴影、圆角
- 统一颜色 token（主文字、次文字、强调色）

### 阶段 D：页面迁移（计划）

按“先典型、后批量”执行：

1. 试点页（先迁移）
   - `background/index.vue`（典型双列 + 卡片 + 多交互）

2. 法案概况组
   - `introdoction/index.vue`
   - `template/index.vue`
   - `background/index.vue`

3. 深度挖掘组
   - `deepDig/processOverview/index.vue`
   - `deepDig/processAnalysis/index.vue`
   - `deepDig/poliContribution/index.vue`

4. 影响分析组
   - `influence/industry/index.vue`
   - `influence/scientificResearch/index.vue`
   - `influence/index.vue`（承载层）

### 阶段 E：收口与回归（计划）

- 清理临时样式补丁（历史试错 `gap/margin-bottom` 等）。
- 回归检查：
  1. 所有页面底部留白可见
  2. 无横向滚动条
  3. Header 不丢失
  4. 双列不挤压

## 4. 现有页面索引（改造范围）

### 4.1 板块承载与导航层

- `src/views/bill/billLayout/index.vue`
- `src/views/bill/billLayout/components/BillHeader.vue`
- `src/views/bill/index.vue`
- `src/views/bill/deepDig/index.vue`
- `src/views/bill/influence/index.vue`

### 4.2 法案概况（Bill）

- `src/views/bill/introdoction/index.vue`
- `src/views/bill/background/index.vue`
- `src/views/bill/template/index.vue`
- `src/views/bill/billOriginalText/index.vue`

### 4.3 深度挖掘（DeepDig）

- `src/views/bill/deepDig/processOverview/index.vue`
- `src/views/bill/deepDig/processAnalysis/index.vue`
- `src/views/bill/deepDig/poliContribution/index.vue`

### 4.4 影响分析（Influence）

- `src/views/bill/influence/industry/index.vue`
- `src/views/bill/influence/scientificResearch/index.vue`
- `src/views/bill/influence/ProgressForecast/index.vue`

### 4.5 其他相关页面

- `src/views/bill/relevantCircumstance/index.vue`
- `src/views/bill/versionCompare/index.vue`
- `src/views/bill/billHome/index.vue`

## 5. 迁移原则（执行时必须遵守）

1. 不改变业务逻辑（API、状态、路由行为）
2. 先替换布局骨架，再替换样式细节
3. 每次只迁移少量页面，保证可回滚
4. 对“固定高度 + 内部滚动”页面优先保守改造
5. 若页面是横向 flex 主体，禁止直接插入会改变横向布局的占位节点

## 6. 验收标准

1. `@bill` 目标页面滚动到底统一可见 `30px` 留白
2. 页面核心布局（左右列、卡片）不变形
3. `BillHeader` 的 Tab 与功能按钮稳定显示
4. 不新增横向滚动条
5. 关键路由刷新后视觉一致

## 7. 新会话接续建议

新会话可直接按以下顺序继续：

1. 先读取本文件：
   - `src/views/bill/BILL_LAYOUT_UNIFICATION_PLAN.md`
2. 先完成组件脚手架：
   - `BillPageShell.vue`
   - `BillTwoColumn.vue`
   - `BillPanel.vue`
3. 首个迁移页：
   - `src/views/bill/background/index.vue`
4. 迁移完成后逐页扩展到 `introdoction/template/processOverview/processAnalysis`

---

最后更新：2026-04-02
