@reglow/reui-mcp 0.3.11 → 0.3.13
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/catalog.mjs
CHANGED
|
@@ -35,6 +35,7 @@ export const CATEGORIES = [
|
|
|
35
35
|
components: [
|
|
36
36
|
{ name: "border-beam", cn: "边框光束", desc: "边框发光动画" },
|
|
37
37
|
{ name: "masonry-grid", cn: "瀑布流", desc: "瀑布流布局" },
|
|
38
|
+
{ name: "scroll-area", cn: "滚动区域", desc: "自定义滚动条容器" },
|
|
38
39
|
{ name: "splitter", cn: "面板分割", desc: "可拖拽分割面板" },
|
|
39
40
|
],
|
|
40
41
|
},
|
|
@@ -61,6 +62,7 @@ export const CATEGORIES = [
|
|
|
61
62
|
{ name: "date-picker", cn: "日期选择", desc: "选择日期" },
|
|
62
63
|
{ name: "editor", cn: "富文本", desc: "富文本编辑器" },
|
|
63
64
|
{ name: "input", cn: "输入框", desc: "基础文本输入" },
|
|
65
|
+
{ name: "input-group", cn: "输入框组", desc: "输入框与前后置内容组合" },
|
|
64
66
|
{ name: "input-password", cn: "密码输入框", desc: "掩码显示与显隐切换" },
|
|
65
67
|
{ name: "input-select", cn: "输入选择", desc: "输入与下拉结合" },
|
|
66
68
|
{ name: "native-select", cn: "原生选择", desc: "原生下拉框" },
|
|
@@ -69,6 +71,7 @@ export const CATEGORIES = [
|
|
|
69
71
|
{ name: "segmented", cn: "分段控制", desc: "分段选择" },
|
|
70
72
|
{ name: "select", cn: "选择器", desc: "下拉选择" },
|
|
71
73
|
{ name: "slide-captcha", cn: "滑块验证", desc: "滑块验证码" },
|
|
74
|
+
{ name: "slider", cn: "滑块", desc: "范围内拖拽选择数值" },
|
|
72
75
|
{ name: "switch", cn: "开关", desc: "受控开关" },
|
|
73
76
|
{ name: "tags-input", cn: "标签输入", desc: "标签式输入" },
|
|
74
77
|
{ name: "textarea", cn: "多行文本", desc: "多行文本输入" },
|
|
@@ -87,7 +90,11 @@ export const CATEGORIES = [
|
|
|
87
90
|
{ name: "badge", cn: "徽标", desc: "角标与状态点" },
|
|
88
91
|
{ name: "calendar", cn: "日历", desc: "日历展示" },
|
|
89
92
|
{ name: "card", cn: "卡片", desc: "内容容器卡片" },
|
|
90
|
-
{
|
|
93
|
+
{
|
|
94
|
+
name: "carousel",
|
|
95
|
+
cn: "轮播图",
|
|
96
|
+
desc: "循环播放的内容切换（默认箭头 + 拖拽增强）",
|
|
97
|
+
},
|
|
91
98
|
{ name: "chat", cn: "对话", desc: "对话气泡组件" },
|
|
92
99
|
{
|
|
93
100
|
name: "chart",
|
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.11（`reui/package.json`）。
|
|
6
6
|
|
|
7
7
|
## 使用方式
|
|
8
8
|
|
|
@@ -36,6 +36,7 @@ import { Button } from "@reglow/reui/reui/button";
|
|
|
36
36
|
| ------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------ | ---------------------------- | ------------------- |
|
|
37
37
|
| [border-beam](https://reglow.huoli.tech/components-library/reui/components/layout/border-beam) | 边框光束 | 边框发光动画 | `BorderBeam` | `reui/border-beam` |
|
|
38
38
|
| [masonry-grid](https://reglow.huoli.tech/components-library/reui/components/layout/masonry-grid) | 瀑布流 | 瀑布流布局 | `MasonryGrid` | `reui/masonry-grid` |
|
|
39
|
+
| [scroll-area](https://reglow.huoli.tech/components-library/reui/components/layout/scroll-area) | 滚动区域 | 自定义滚动条容器（纵 / 横向） | `ScrollArea` / `ScrollBar` | `ui/scroll-area` |
|
|
39
40
|
| [splitter](https://reglow.huoli.tech/components-library/reui/components/layout/splitter) | 面板分割 | 可拖拽分割面板（支持折叠、受控、延迟渲染） | `Splitter` / `SplitterPanel` | `reui/splitter` |
|
|
40
41
|
|
|
41
42
|
## 导航 navigation
|
|
@@ -61,6 +62,7 @@ import { Button } from "@reglow/reui/reui/button";
|
|
|
61
62
|
| [date-picker](https://reglow.huoli.tech/components-library/reui/components/data-entry/date-picker) | 日期选择 | 选择日期 / 日期范围 / 日期时间 | `DatePicker` / `DateRangePicker` / `CalendarPanel` | `reui/date-picker` |
|
|
62
63
|
| [editor](https://reglow.huoli.tech/components-library/reui/components/data-entry/editor) | 富文本 | 富文本编辑器（Tiptap） | `Editor` / `EditorToolbar` / `EditorBubbleMenu` / `EditorDragHandle` / `EditorSuggestionMenu` / `EditorMentionMenu` / `EditorEmojiMenu` | `reui/editor` |
|
|
63
64
|
| [input](https://reglow.huoli.tech/components-library/reui/components/data-entry/input) | 输入框 | 基础文本输入（含 variant / status） | `Input` | `reui/input` |
|
|
65
|
+
| [input-group](https://reglow.huoli.tech/components-library/reui/components/data-entry/input-group) | 输入框组 | 输入框与前后置内容组合为整体 | `InputGroup` / `InputGroupAddon` / `InputGroupButton` / `InputGroupInput` / `InputGroupText` / `InputGroupTextarea` | `ui/input-group` |
|
|
64
66
|
| [input-password](https://reglow.huoli.tech/components-library/reui/components/data-entry/input-password) | 密码输入框 | 掩码显示与显隐切换 | `InputPassword` | `reui/input-password` |
|
|
65
67
|
| [input-select](https://reglow.huoli.tech/components-library/reui/components/data-entry/input-select) | 输入选择 | 输入与下拉结合 | `InputSelect` | `reui/input-select` |
|
|
66
68
|
| [native-select](https://reglow.huoli.tech/components-library/reui/components/data-entry/native-select) | 原生选择 | 原生下拉框 | `NativeSelect` / `NativeSelectOptGroup` / `NativeSelectOption` | `reui/native-select` |
|
|
@@ -69,6 +71,7 @@ import { Button } from "@reglow/reui/reui/button";
|
|
|
69
71
|
| [segmented](https://reglow.huoli.tech/components-library/reui/components/data-entry/segmented) | 分段控制 | 分段选择 | `Segmented` | `reui/segmented` |
|
|
70
72
|
| [select](https://reglow.huoli.tech/components-library/reui/components/data-entry/select) | 选择器 | 下拉选择（reka-ui 透传） | `Select` / `SelectTrigger` / `SelectContent` / `SelectItem` / `SelectValue` / `SelectGroup` / `SelectLabel` … | `reui/select` |
|
|
71
73
|
| [slide-captcha](https://reglow.huoli.tech/components-library/reui/components/data-entry/slide-captcha) | 滑块验证 | 滑块验证码 | `SlideCaptcha` | `reui/slide-captcha` |
|
|
74
|
+
| [slider](https://reglow.huoli.tech/components-library/reui/components/data-entry/slider) | 滑块 | 范围内拖拽选择数值（单值 / 范围 / 垂直） | `Slider` | `ui/slider` |
|
|
72
75
|
| [switch](https://reglow.huoli.tech/components-library/reui/components/data-entry/switch) | 开关 | 受控开关 | `Switch` | `ui/switch` |
|
|
73
76
|
| [tags-input](https://reglow.huoli.tech/components-library/reui/components/data-entry/tags-input) | 标签输入 | 标签式输入 | `TagsInput` / `TagsInputInput` / `TagsInputItem` / `TagsInputItemText` / `TagsInputItemDelete` | `reui/tags-input` |
|
|
74
77
|
| [textarea](https://reglow.huoli.tech/components-library/reui/components/data-entry/textarea) | 多行文本 | 多行文本输入 | `Textarea` | `reui/textarea` |
|
|
@@ -86,7 +89,7 @@ import { Button } from "@reglow/reui/reui/button";
|
|
|
86
89
|
| [badge](https://reglow.huoli.tech/components-library/reui/components/data-display/badge) | 徽标 | 角标与状态点 | `Badge` / `BadgeRibbon` | `reui/badge` |
|
|
87
90
|
| [calendar](https://reglow.huoli.tech/components-library/reui/components/data-display/calendar) | 日历 | 日历展示 | `Calendar` | `reui/calendar` |
|
|
88
91
|
| [card](https://reglow.huoli.tech/components-library/reui/components/data-display/card) | 卡片 | 内容容器卡片 | `Card` / `CardHeader` / `CardTitle` / `CardDescription` / `CardContent` / `CardFooter` / `CardMeta` / `CardGroup` | `reui/card` |
|
|
89
|
-
| [carousel](https://reglow.huoli.tech/components-library/reui/components/data-display/carousel) | 轮播图 |
|
|
92
|
+
| [carousel](https://reglow.huoli.tech/components-library/reui/components/data-display/carousel) | 轮播图 | 循环播放的内容切换（自动播放/淡入淡出/拖拽增强，箭头默认显示） | `Carousel` | `reui/carousel` |
|
|
90
93
|
| [chat](https://reglow.huoli.tech/components-library/reui/components/data-display/chat) | 对话 | 对话气泡组件 | `ChatMessage` / `ChatMessages` / `ChatPalette` / `ChatPrompt` / `ChatPromptSubmit` / `ChatReasoning` / `ChatShimmer` / `ChatTool` | `reui/chat` |
|
|
91
94
|
| [chart](https://reglow.huoli.tech/components-library/reui/components/data-display/chart) | 图表 | 基于 Unovis 的图表（漏斗 / 仪表盘 / 雷达 / 迷你图 / 中国地图等） | `ChartContainer` / `ChartTooltip` / `ChartCrosshair` / `ChartLegend` / `FunnelChart` / `GaugeChart` / `RadarChart` / `MiniChart` / `ChinaMap` | `reui/chart` |
|
|
92
95
|
| [collapse](https://reglow.huoli.tech/components-library/reui/components/data-display/collapse) | 折叠面板 | 配置式 + 复合式、手风琴、ghost | `Collapse` / `CollapsePanel` | `reui/collapse` |
|
|
@@ -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
|
| 步骤 | 调用 | 参数 | 判断 |
|