---
name: grid-fix
overview: 修复 Grid 组件：对齐项目样式范式（全局一次性引入栅格样式而非 script 双 import）、修正 gutter/push/pull 视觉问题、替换为无 deprecation 的 SCSS 写法，并补一次构建验证。
todos:
  - id: grid-scss-fix
    content: 改写 grid/index.scss：@use sass:math 消除 deprecation，.fms-row 加 width:100%，.fms-col 加 min-width:0
    status: completed
  - id: grid-import-remove
    content: 移除 row.vue 与 col.vue 中 script 里的 import './index.scss'
    status: completed
    dependencies:
      - grid-scss-fix
  - id: grid-global-import
    content: 在 src/styles/index.css 顶部 @import grid/index.scss 实现全局单例引入
    status: completed
    dependencies:
      - grid-import-remove
  - id: grid-demo-fix
    content: 修改 demo/grid.vue：Row 外包块级 wrapper 隔离 .demo-panel flex，简化 push/pull 段
    status: completed
    dependencies:
      - grid-global-import
  - id: grid-verify
    content: 使用 [skill:antdv-next] 复核 API 语义，跑 vite build + oxlint 验证无编译错误与 deprecation
    status: completed
    dependencies:
      - grid-demo-fix
---

## 用户需求

用户已实现 Grid（Row + Col 基础栅格，不含 xs~xxxl 响应式），但反馈"完全不行"，要求分析根因并修复。

## 产品概述

基于 24 栅格系统的布局组件（Row 容器 + Col 列），用于快速搭建页面结构。当前已实现但存在视觉错乱与范式问题，需修复使其达到与项目其他组件一致的可用状态。

## 核心特性（修复后应保持）

- Row：flex 行容器，支持 gutter（数字 / [水平, 垂直]）、align、justify、wrap。
- Col：列单元，支持 span、offset、order、push、pull、flex。
- 24 栅格百分比宽度 + gutter 负 margin 经典实现，纯 CSS、无 JS 断点监听。

## 技术栈

- Vue 3 `<script setup>` + scoped/全局 SCSS（与本项目一致）
- 纯 CSS 栅格，复用 `--fms-*` token，新增 `--fms-grid-gutter`

## 实现方案

### 策略

对照可正常工作的 `date` 组件（同为 `<script> import scss` 全局写法）与 `splitter`/`spin`（`<style scoped> @use` 写法），定位 Grid 的真实缺陷并修复。核心修正三类问题：Demo 容器嵌套 flex 导致栅格错乱、样式作用域双注入、SCSS 过时 API。

### 关键技术决策

1. **修正 Demo 嵌套 flex 主因**：`.demo-panel`（`demo.css`）是 `display:flex; flex-wrap:wrap`，Grid 的 `<Row>` 作为其子项默认 `flex:0 1 auto` 被压缩/拉伸，内部 Col 依赖 Row 的 flex 上下文因而错位。修复：在 `index.scss` 给 `.fms-row` 加 `width:100%`，并在 demo 里用块级 wrapper 包住 Row，隔离外层 flex。
2. **样式全局单例引入**：移除 row.vue/col.vue 各自 `import './index.scss'`（双注入、全局污染），改为在 `src/styles/index.css` 顶部 `@import '../components/ui/grid/index.scss';` 一次性全局引入（栅格为跨组件结构性样式，应全局单例，与 antd 一致）。
3. **消除 SCSS deprecation**：`@use 'sass:math'` + `math.percentage(math.div($n, $cols))` 替换 `percentage($n / $cols)`。
4. **健壮性**：`.fms-col` 加 `min-width:0` 防内容撑破（参照 splitter panel）。
5. **简化 push/pull 演示**：避免与 offset 混用语义冲突，移除易错乱的混用段。

### 性能与可靠性

- 静态 class + CSS 变量，无高频事件、无布局读取、无残留监听。
- 全局单例引入避免重复注入，构建产物更小、无 scoped 跨组件失效风险。

## 实现备注

- 复用现有 `.fms-<name>` 命名与 `@use`/`@import` 约定（参考 splitter/index.scss、date 写法）。
- 不创建 barrel index（规范 3）。
- 演示注册方式沿用现有 App.vue 的 demoMap（已完成，无需改）。
- 修复后跑一次 `vite build`（诊断性）确认无编译错误 / deprecation 阻断，并 oxlint。

## 目录结构

```
fms-vue/src/components/ui/grid/
  row.vue      # [MODIFY] 移除 `<script>` 中 `import './index.scss'`（改全局单例引入）。
  col.vue      # [MODIFY] 移除 `<script>` 中 `import './index.scss'`。
  index.scss   # [MODIFY] ①`@use 'sass:math'` 改写除法/percentage 消 deprecation；②`.fms-col` 加 `min-width:0`；③`.fms-row` 加 `width:100%`。
fms-vue/src/styles/index.css        # [MODIFY] 顶部新增 `@import '../components/ui/grid/index.scss';` 全局单例引入栅格样式。
fms-vue/src/components/ui/demo/grid.vue  # [MODIFY] ① 每个 Row 外包块级 wrapper 隔离 `.demo-panel` flex；② 简化 push/pull 演示段。
```

## 关键代码结构

```
// grid/index.scss 关键修正
@use 'sass:math';

.fms-row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;                 // 防止被外层 flex 容器压缩
  // ...gutter 变量与负 margin 保持不变
}

.fms-col {
  min-width: 0;                // 防止内容撑破 flex 列
  padding-left: calc(var(--fms-grid-gutter-h) / 2);
  padding-right: calc(var(--fms-grid-gutter-h) / 2);
  box-sizing: border-box;
}

// 24 栅格宽度（消 deprecation）
@for $n from 0 through 24 {
  .fms-col-#{$n} {
    @if $n == 0 { display: none; } @else { display: block; }
    flex: 0 0 math.percentage(math.div($n, 24));
    max-width: math.percentage(math.div($n, 24));
  }
}
```

## Agent Extensions

### Skill

- **antdv-next**
- Purpose: 对照 antdv-next Grid 的官方实现（row.tsx/col.tsx/index.tsx）确认 gutter 负 margin、push/pull relative 实现、24 栅格 API 语义，确保 Vue 化移植的修复忠于原库交互。
- Expected outcome: 确认 Row/Col 的 props 集合、gutter 实现细节与 flex 解析规则，指导 Grid 修复方案不偏离原库设计。
- **agent-browser**
- Purpose: 在修复前后打开 http://localhost:5082 的 Grid 演示页截图，直观验证"完全不行"的具体现象（竖排/错位/出血）及修复后渲染是否正确。
- Expected outcome: 取得 Grid 演示区真实渲染截图，作为修复验证的客观证据（构建后可用）。