draftgo-cli 2.0.2 → 2.0.3

package/README.md

@@ -147,6 +147,19 @@ CLI v1.2.0 在 skill 包里追加了一套**分级开发流程规范**（`rules/
 
 ---
 
+## v2.0.3 升级要点（操作型页面空间利用）
+
+CLI v2.0.3 补充操作型页面的空间模型，重点解决后台管理 / 表格 / 列表页面按普通文档流布局时，数据少导致分页、保存栏、批量操作区上浮，页面空间利用不足的问题。
+
+**核心变化：**
+
+- **工作台布局原则**：后台管理、表格、列表、审批、配置、内容维护等操作型页面，优先让页面根容器占满可用视口 / iframe 内容区。
+- **稳定控制区**：顶部筛选、搜索、标题操作区保持稳定高度，底部分页、批量操作栏、保存栏等流程控制区保持在工作区底部或稳定位置。
+- **数据区承接剩余空间**：主体数据区使用 `flex:1; min-height:0; overflow:auto` 等结构承接剩余空间，数据少时保留工作区空白，数据多时优先让数据区内部滚动。
+- **数据表规则同步**：`data-table.md` 新增工作台空间模型和 CSS 骨架参考，避免分页跟随 1-2 条数据上浮。
+
+---
+
 ## v2.0.2 升级要点（统一目标识别信号）
 
 CLI v2.0.2 进一步完善 `draftgo update` 的目标识别逻辑，避免只修到单个工具而遗漏其他 AI 工具。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draftgo-cli",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Install and manage the DraftGo skill across AI coding agents (Claude Code, Codex, Cursor, Windsurf, Antigravity, Copilot, Gemini, Kiro).",
   "bin": {
     "draftgo": "bin/draftgo.js"

package/resources/skill/rules/data-table.md

@@ -12,7 +12,17 @@ version: 1.0.0
 
 ---
 
-## 1. 常见布局参考
+## 1. 工作台空间模型
+
+数据列表 / 表格 / 多数据管理页通常是**操作型页面**，应先建立占满可用空间的工作台容器，再放筛选、表格、分页等组件。不要把页面写成普通文档流。
+
+- 页面根容器占满可用视口 / iframe 内容区，常用 `display:flex; flex-direction:column; min-height:100vh; overflow:hidden`。
+- Toolbar / Filter Bar 是稳定控制区，`flex-shrink:0`。
+- 表格 / 列表主体是主工作区，`flex:1; min-height:0; overflow:auto`，数据少时也保留工作区空白。
+- Pagination / 批量操作栏 / 底部保存栏是流程控制区，`flex-shrink:0`，应贴在当前工作区底部或保持稳定位置。
+- 数据只有 1-2 条时，分页不应跟随最后一行上浮；数据很多时，滚动应优先发生在表格主体，而不是把分页挤出视野。
+
+### 常见布局参考
 
 ```
 ┌─────────────────────────────────────────────────────────────────┐
@@ -24,6 +34,9 @@ version: 1.0.0
 │───┼──────┼──────┼──────┼──────┼────────────────────────────── │
 │ □ │      │      │      │      │  [编辑] [删除] [...]          │  ← 数据行
 │ □ │      │      │      │      │                                │
+│   │      │      │      │      │                                │  ← 剩余数据区留白
+│   │      │      │      │      │                                │
+│   │      │      │      │      │                                │
 ├─────────────────────────────────────────────────────────────────┤
 │ 共128条 · 第2/13页  每页[20▼]条       [◀ ‹ 1 2 ③ 4 5…13 › ▶] │  ← Pagination
 └─────────────────────────────────────────────────────────────────┘
@@ -31,6 +44,27 @@ version: 1.0.0
 
 上图是高密度管理页的常见结构，不是唯一模板。轻量列表、卡片列表、看板、时间线、图库或移动端优先页面，都可以根据内容形态采用更合适的呈现方式。
 
+### CSS 骨架参考
+
+```css
+.table-workbench {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.table-toolbar,
+.filter-bar,
+.pagination-bar {
+  flex-shrink: 0;
+}
+.table-region {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+```
+
 ---
 
 ## 2. Toolbar 参考

package/resources/skill/rules/frontend.md

@@ -187,6 +187,45 @@ App.put(`db/${type}/${id}`, { data: { age: 31 } })
 - 页面必须有加载态、空态、错误态、成功态，不能只堆静态卡片。
 - 若页面展示可维护内容（案例、新闻、产品、招聘、资料等），主动判断是否需要后台管理页和同一份真实数据；不要只写死 HTML。
 
+### 操作型页面空间利用（强制）
+
+后台管理、表格、列表、审批、配置、内容维护等操作型页面，优先按**工作台布局**处理，而不是普通内容文档流。先分配页面空间，再放组件：
+- 页面根容器应占满可用视口 / iframe 内容区，使用 `display:flex; flex-direction:column; min-height:100vh` 或等效结构。
+- 顶部筛选、搜索、批量入口、标题操作区保持稳定高度，不应随数据量漂移。
+- 主体数据区使用 `flex:1; min-height:0; overflow:auto` 承接剩余空间，数据少时保留工作区空白，不让页面高度随行数塌陷。
+- 分页、批量操作栏、保存栏、流程按钮等控制区应固定在当前工作区底部或保持稳定位置，不能跟随 1-2 条数据上浮。
+- 内部滚动优先发生在数据区 / 表格区，避免整个后台页面因为少量内容显得松散，也避免大量内容把操作区挤出视野。
+
+参考结构：
+
+```css
+.workbench-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.workbench-toolbar {
+  flex-shrink: 0;
+}
+.workbench-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.workbench-data {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.workbench-footer {
+  flex-shrink: 0;
+}
+```
+
+不要让分页、保存栏、批量操作栏跟随少量数据上浮；不要用纯文档流堆叠后台管理页面。
+
 ### 新增页面绑定（强制）
 
 创建或新增页面后，必须继续处理“绑定”：