@reglow/reui-mcp 0.3.10 → 0.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> 分类与文档链接取自官网组件总览 https://reglow.huoli.tech/components-library/reui （同源仓库文件：`reglow-docs/content/components-library/1.reui/1.index.md`）。
|
|
4
4
|
> 导入符号已逐一核对各组件目录的 `index.ts`（`reui/components/reui/*/index.ts`、`reui/components/ui/*/index.ts`）。
|
|
5
|
-
> 版本基线：`@reglow/reui` 0.6.
|
|
5
|
+
> 版本基线：`@reglow/reui` 0.6.10（`reui/package.json`）。
|
|
6
6
|
|
|
7
7
|
## 使用方式
|
|
8
8
|
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
|
|
33
33
|
统一由 CSS 变量管理，**不要自定义 z-index 数字**。来源：`main.css` 全局层级体系。
|
|
34
34
|
|
|
35
|
-
| 变量
|
|
36
|
-
|
|
|
37
|
-
| `--z-overlay-base` | 1000
|
|
38
|
-
| `--z-flyout`
|
|
39
|
-
| `--z-tooltip`
|
|
40
|
-
| `--z-toast`
|
|
35
|
+
| 变量 | 值 | 用途 |
|
|
36
|
+
| ------------------ | ----- | ---------------------------------------- |
|
|
37
|
+
| `--z-overlay-base` | 1000 | Dialog / Drawer 遮罩起点（每开一个 +10） |
|
|
38
|
+
| `--z-flyout` | 1200 | Portal 浮层：Select / Popover / Dropdown |
|
|
39
|
+
| `--z-tooltip` | 1400 | Tooltip |
|
|
40
|
+
| `--z-toast` | 10000 | Toast |
|
|
41
41
|
|
|
42
42
|
规则：浮层始终高于任何已打开 Modal；新增浮层优先复用组件库 Portal 实现，不要手写挂 body 的绝对定位层。
|
|
43
43
|
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
标准结构：**标题栏 → 搜索/操作栏 → 表格卡片（分页）**。来源：`ListPageSkeleton.vue`。
|
|
49
49
|
|
|
50
50
|
- 标题栏：标题 + 竖线分隔 + 计数/描述，`flex items-center gap-3`。
|
|
51
|
-
-
|
|
51
|
+
- **PageTable 表头「左操作、右筛选」**：`#toolbar` 操作按钮（新增/导出等）居**左**，`#filters` 筛选 + 搜索框 + 列设置居**右**（桌面端 `sm:justify-end` 右对齐，窄屏自然换行）。搜索框 `h-9`；不要把手动操作按钮放进 `#filters`，也不要把筛选控件塞进 `#toolbar`。
|
|
52
52
|
- 表格：`Card > CardContent(class="p-0") > Table`，表格区 `overflow-hidden flex-auto min-h-0`。
|
|
53
53
|
- 加载态用 `ListPageSkeleton`，不要空白闪烁。
|
|
54
54
|
- 表格用 `PageTable`（服务端分页/排序），列的 `accessorKey` 必须与后端字段名（snake_case）一致；单列排序默认，需要多列时加 `multi-sort`（Shift 点击，最多 3 列）。来源：`reglow-design/README.md`。
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
```
|
|
78
78
|
|
|
79
79
|
来源：`reglow-design/src/assets/css/main.css`、`README.md`「样式接入」。
|
|
80
|
+
|
|
80
81
|
- 样式只引一次；不要在每个组件里重复 import。
|
|
81
82
|
|
|
82
83
|
## 6. 交互与可访问性
|
|
@@ -89,15 +90,15 @@
|
|
|
89
90
|
|
|
90
91
|
## 7. 常见陷阱速查
|
|
91
92
|
|
|
92
|
-
| 陷阱
|
|
93
|
-
|
|
|
94
|
-
| 引了 `style.css` 就不加 `@source` | 消费方跑 Tailwind 时必须 `@source` 库产物
|
|
95
|
-
| 手写颜色 / z-index
|
|
96
|
-
| 依赖系统深色模式
|
|
97
|
-
| 表格列名与后端不一致
|
|
98
|
-
| 列表页无加载骨架
|
|
99
|
-
| 数字宽度跳动
|
|
100
|
-
| 多个 Modal 叠层错乱
|
|
93
|
+
| 陷阱 | 正确做法 | 来源 |
|
|
94
|
+
| --------------------------------- | ------------------------------------------- | -------------- |
|
|
95
|
+
| 引了 `style.css` 就不加 `@source` | 消费方跑 Tailwind 时必须 `@source` 库产物 | `README.md` |
|
|
96
|
+
| 手写颜色 / z-index | 用语义 token 与 `--z-*` 变量 | `main.css` |
|
|
97
|
+
| 依赖系统深色模式 | 用 `.dark` 类与 `applyTheme` | `main.css` |
|
|
98
|
+
| 表格列名与后端不一致 | `accessorKey` 用后端 snake_case 字段名 | `README.md` |
|
|
99
|
+
| 列表页无加载骨架 | 用 `ListPageSkeleton` / `FormSkeleton` | 组件文件 |
|
|
100
|
+
| 数字宽度跳动 | 统计值加 `tabular-nums` | `StatCard.vue` |
|
|
101
|
+
| 多个 Modal 叠层错乱 | 复用 `--z-overlay-base` 递增与 `--z-flyout` | `main.css` |
|
|
101
102
|
|
|
102
103
|
---
|
|
103
104
|
|
|
@@ -141,6 +141,8 @@ const rowActions: RowAction<User>[] = [
|
|
|
141
141
|
</template>
|
|
142
142
|
```
|
|
143
143
|
|
|
144
|
+
> **表头布局**：PageTable 表头为「**左操作、右筛选**」——`#toolbar`（新增/导出等操作按钮）放**左侧**，`#filters` 筛选、搜索框与列设置放**右侧**。业务页的操作按钮一律放 `#toolbar`，不要把按钮混进 `#filters` 或搜索区。
|
|
145
|
+
|
|
144
146
|
### 示例 3：全局统一语言与主题（ConfigProvider / createReui）
|
|
145
147
|
|
|
146
148
|
| 步骤 | 调用 | 参数 | 判断 |
|