chain-saasui 1.0.11 → 1.0.12-alpha.3

package/COMPONENTS.md

@@ -1,319 +1,319 @@
-# saasui 组件清单
-
-基础组件必须优先使用 `common/saasui` 中的封装，禁止直接使用原生 `el-*` 组件。未在此列出的组件才允许回落到 Element UI。
-
-## 使用前提
-
-`saasui` 已在主应用中全局 `Vue.use(saasui)` 注册，模板内直接使用 kebab-case 标签即可：
-
-```vue
-<s-button type="primary">保存</s-button>
-```
-
-所有组件通过 `v-bind="$attrs"` / `v-on="$listeners"` 透传到底层 Element UI，因此 element 原有 props/事件仍可使用。
-
----
-
-## 一、按钮类
-
-### `<s-button>`
-
-主按钮，替代 `el-button`。封装了路由跳转、`icon` 类型、边框模式。
-
-| 参数     | 类型     | 默认值      | 说明                                        |
-| ------ | ------ | -------- | ----------------------------------------- |
-| type   | String | default  | `primary` / `default` / `danger` / `icon` |
-| border | String | -        | 边框样式，自定义 class 后缀                         |
-| mode   | String | button   | `button` / `link` / `external`            |
-| path   | String | -        | `mode=link` 时的路由 path                     |
-| query  | Object | -        | 路由 query                                  |
-| target | String | -        | `_blank` 在新窗口打开                           |
-
-```vue
-<s-button type="primary" @click="handleSave">保存</s-button>
-<s-button mode="link" path="/detail" :query="{ id }">查看</s-button>
-```
-
-### `<s-button-text>`
-
-文字按钮，用于表格行内次要操作，替代 `el-button type="text"`。
-
-| 参数     | 类型     | 默认值  | 说明                    |
-| ------ | ------ | ---- | --------------------- |
-| type   | String | text | `text` / `link`       |
-| path   | String | -    | `type=link` 时的路由 path |
-| query  | Object | -    | 路由 query              |
-| target | String | -    | `_blank` 在新窗口打开       |
-
-### `<s-table-buttons>`
-
-行内操作按钮组，**表格操作列强制使用**。超出 `maxLength` 自动收起到下拉更多。
-
-| 参数        | 类型     | 默认值  | 说明            |
-| --------- | ------ | ---- | ------------- |
-| list      | Array  | []   | 按钮配置数组，见下方字段  |
-| row       | Object | -    | 当前行，透传到 onClick |
-| maxLength | Number | 2    | 最多显示几个，其余进入更多 |
-| moreType  | String | text | `text` / `more`（更多按钮样式） |
-
-`list` 项：`{ label, onClick, show?, tip?, attrs? }`，`show` 支持布尔或函数。
-
-```vue
-<s-table-buttons :list="actionList" :row="row" @action="handleAction" />
-```
-
----
-
-## 二、分页 / 布局 / 容器
-
-### `<s-pagetable>`
-
-**列表页外层容器，必须使用**。自带 `header` / `form` / `footer` 插槽。
-
-| 参数                | 类型      | 默认值   | 说明                       |
-| ----------------- | ------- | ----- | ------------------------ |
-| title             | String  | 路由标题  | 页头标题，默认取路由 meta          |
-| mode              | String  | page  | `page` / `form`          |
-| showHeader        | Boolean | false | 是否显示头部                   |
-| showClose         | Boolean | false | 显示返回箭头                   |
-| showFooter        | Boolean | true  | 是否渲染 footer 插槽           |
-| showFooterButton  | Boolean | false | 底部是否展示「取消 / 确认」按钮       |
-| loadingBtn        | Boolean | false | 确认按钮 loading             |
-| confirmText       | String  | 确定    |                          |
-| cancelText        | String  | 取消    |                          |
-
-插槽：`default`（内容）、`header`、`header-append`、`title`、`form`（搜索区）、`footer`（分页）。
-
-```vue
-<s-pagetable>
-    <template #form>...筛选条件...</template>
-    <s-table :data="list" :columns="columns" />
-    <template #footer>
-        <el-pagination ... />
-    </template>
-</s-pagetable>
-```
-
-### `<s-page-tabs>` （项目中的 Tabs 基础组件）
-
-基于数组驱动的标签页，**替代 `el-tabs`**（项目中不存在 `s-tabs`，对应组件就是这个）。支持滚动、拖拽、显隐控制。
-
-| 参数           | 类型                | 默认值                            | 说明                      |
-| ------------ | ----------------- | ------------------------------ | ----------------------- |
-| value        | String / Number   | ''                             | `v-model`，当前激活的 value   |
-| tabs         | Array             | []                             | `{ label, value, disabled?, show? }` |
-| fieldNames   | Object            | `{ label, value }`             | 字段映射                    |
-| gap          | String / Number   | 32                             | tab 间距                  |
-| showBorder   | Boolean           | true                           | 是否显示下边框                 |
-| beforeLeave  | Function          | -                              | 切换前钩子，返回 `false`/Promise reject 阻止切换 |
-| draggable    | Boolean           | false                          | 是否开启拖拽排序                |
-
-事件：`input`、`tab-click(tab, index)`、`tabs-sort(newTabs, { from, to, tab })`。
-
-插槽：`extra`（右侧）、`tab-suffix`（每个 tab 尾部）。
-
-```vue
-<s-page-tabs v-model="active" :tabs="tabs" />
-```
-
-> 纯样式的简单切换也可以使用原生 `el-tabs`，但项目规范下**优先用 `s-page-tabs`**。
-
-### `<s-page-button>`
-
-页面级按钮区容器，用于 `s-pagetable` 顶部操作栏排布。
-
-### `<s-card>`
-
-内容卡片，带标题和可折叠能力。
-
-| 参数         | 类型      | 默认值   | 说明       |
-| ---------- | ------- | ----- | -------- |
-| title      | String  | ''    | 卡片标题     |
-| titleSub   | String  | ''    | 副标题      |
-| isCollapse | Boolean | false | 是否开启折叠箭头 |
-
-插槽：`title`、`action`（右上角）、`default`。
-
-### `<s-container>`
-
-外层容器，不常用，用于非 PageTable 页面的基础容器。
-
-### `<s-group>`
-
-分组数据块，常用于首页卡片类分组展示。
-
-| 参数              | 类型       | 默认值   | 说明                     |
-| --------------- | -------- | ----- | ---------------------- |
-| list            | Array    | []    | 分组数据，`{ label, children }` |
-| data            | Object   | {}    | 绑定数据                   |
-| isActive        | Function | -     | 判断 item 是否激活           |
-| showGroupTitle  | Boolean  | false | 是否显示分组标题               |
-
----
-
-## 三、表格
-
-### `<s-table>`
-
-**列表页表格强制使用**。继承 `el-table` 全部 props + 事件，新增 `columns` 配置化、内置多选列。
-
-| 参数               | 类型       | 默认值     | 说明                                |
-| ---------------- | -------- | ------- | --------------------------------- |
-| data             | Array    | -       | 同 `el-table`                      |
-| border           | Boolean  | true    | 默认有边框                             |
-| columns          | Array    | []      | 列配置，见下方                           |
-| minWidth         | Number/String | 160 | 列默认最小宽度                           |
-| selectable       | Boolean  | false   | 是否展示多选列                           |
-| selectableType   | String   | default | `default` / `all`（跨页全选）           |
-| reserveSelection | Boolean  | false   | 翻页保留选中                            |
-| checkSelectable  | Function | () => true | 行是否可选                          |
-| selected         | Array    | []      | 跨页全选时的选中 id 集合，需 `:selected.sync` |
-
-`columns` 项字段：
-
-| 字段       | 说明                                       |
-| -------- | ---------------------------------------- |
-| label    | 表头文字                                     |
-| value    | 对应 `prop`，也是插槽名                          |
-| type     | `text` / `select` / `unit` / `operate` / `index` / `UserModel` |
-| tip      | 表头 tooltip                               |
-| width / minWidth / fixed | 列宽、冻结                      |
-| actionList | `type=operate` 时的按钮数组                  |
-| options  | `type=select` / `unit` 时的字典              |
-
-事件：`action(name, row, column)`（操作列）、`selection-change`、`select-all`、透传 `el-table` 所有事件。
-
-暴露方法：`doLayout()`、`clearSelection()`、`toggleRowSelection()`、`getSelection()`。
-
-```vue
-<s-table
-    :data="list"
-    :columns="[
-        { label: '姓名', value: 'name' },
-        { label: '状态', value: 'status', type: 'unit', options: statusOptions },
-        { label: '操作', value: 'action', type: 'operate', actionList },
-    ]"
-    @action="onAction" />
-```
-
-### `<s-table-column>`
-
-内置于 `s-table` 的列渲染器，一般不直接使用，通过 `columns` 配置。
-
----
-
-## 四、弹窗 / 抽屉
-
-### `<s-dialog>`
-
-**新增 / 编辑弹窗必须使用**。继承 `el-dialog` 全部 props，内置 footer、loading。
-
-| 参数                 | 类型            | 默认值   | 说明                  |
-| ------------------ | ------------- | ----- | ------------------- |
-| visible            | Boolean       | false | 使用 `visible.sync`   |
-| width              | String/Number | 720px |                     |
-| showFooter         | Boolean       | true  | 是否显示底部按钮            |
-| showCancelButton   | Boolean       | true  |                     |
-| showConfirmButton  | Boolean       | true  |                     |
-| loadingBtn         | Boolean       | false | 确认按钮 loading        |
-| confirmText        | String        | 确定    |                     |
-| cancelText         | String        | 取消    |                     |
-| closeOnClickModal  | Boolean       | false | 强制 false，点击遮罩不关闭   |
-
-事件：`confirm`、`close`、`update:visible`。
-
-```vue
-<s-dialog :visible.sync="visible" title="新增" :loading-btn="saving" @confirm="onSave">
-    ...表单...
-</s-dialog>
-```
-
-### `<s-drawer>`
-
-侧边抽屉，参数同 `s-dialog`，`width` 改为 `size`（默认 720px）。
-
-### `SMessagebox` / `SInputDialog`
-
-以 JS 方式调起的命令式弹窗，直接从 saasui 导入调用。
-
-```js
-import saasui from 'saasui';
-saasui.SMessagebox({ title: '提示', content: '...' });
-```
-
----
-
-## 五、表单控件（替代 `el-*`）
-
-> 所有控件支持 `from="text"` 进入纯展示模式，用于详情页与表单共用一套配置。
-
-| 组件                  | 替代          | 关键 props                                         |
-| ------------------- | ----------- | ------------------------------------------------ |
-| `<s-input>`         | el-input    | `type`、`from`、默认 `clearable`、`maxlength`         |
-| `<s-input-number>`  | el-input-number |                                              |
-| `<s-select>`        | el-select   | `options=[{ label, value }]`、默认 `filterable`、支持分组 |
-| `<s-cascader>`      | el-cascader | `options`、`props`                                |
-| `<s-date-picker>`   | el-date-picker | `type` 默认 `date`、`valueFormat` 默认 `yyyy-MM-dd` |
-| `<s-radio-group>`   | el-radio-group | `options`、`direction`（horizontal / vertical） |
-| `<s-switch>`        | el-switch   |                                                  |
-| `<s-mask-input>`    | -           | 脱敏输入                                             |
-| `<s-currency>`      | -           | 货币金额输入                                           |
-| `<s-currency-select>`| -          | 货币种类选择                                           |
-| `<s-field-group>`   | -           | 多字段组合，`fields=[{ field, type, ... }]`            |
-
----
-
-## 六、展示 / 反馈
-
-| 组件                | 用途                                       |
-| ----------------- | ---------------------------------------- |
-| `<s-unit value type options>`    | 状态点 / tag 样式展示，配合字典                    |
-| `<s-tag>`         | 标签，替代 `el-tag`                          |
-| `<s-tip>`         | 提示性文字 / 弱提示                             |
-| `<s-alert>`       | 警告/通知条，替代 `el-alert`                    |
-| `<s-tooltip-wrap>`| 自适应文字省略 + tooltip，替代常见 `text-overflow` 包装 |
-| `<s-item-list>`   | 展示键值对列表                                  |
-| `<s-steps>`       | 步骤条，替代 `el-steps`                       |
-| `<s-segmented>`   | 分段控件                                     |
-| `<s-icon>`        | 图标统一入口                                   |
-| `<s-empty>`       | 空状态                                      |
-
-### `<s-tooltip-wrap>`
-
-| 参数        | 类型      | 默认值       | 说明              |
-| --------- | ------- | --------- | --------------- |
-| text      | String  | ''        | 展示文本，超出才显示 tooltip |
-| placement | String  | top-start |                 |
-| lineClamp | String  | '1'       | 多行省略行数          |
-| inherit   | Boolean | false     | 继承父级文字样式        |
-
-### `<s-unit>`
-
-| 参数      | 类型             | 默认值 | 说明                  |
-| ------- | -------------- | --- | ------------------- |
-| value   | String/Number  | -   | 值                   |
-| type    | String         | ''  | 预设类型                |
-| options | Array          | []  | 字典数组                |
-| props   | Object         | -   | 字段映射 `{ value, label, style }` |
-| color   | String         | ''  | 强制指定颜色              |
-| isLink  | Boolean        | -   | 是否当链接展示             |
-
----
-
-## 七、布局
-
-### `<s-space>` / `<s-space-item>`
-
-元素间距容器，替代手写 `margin`。
-
----
-
-## 使用规则速记
-
-1. **新建列表页** → `s-pagetable` + `s-table` + `s-table-buttons` + `s-dialog`
-2. **Tabs 切换** → `s-page-tabs`，不要再写 `el-tabs`
-3. **表单字段** → `s-input` / `s-select` / `s-date-picker` / `s-radio-group`，详情页传 `from="text"` 即可
-4. **弹窗** → 新增编辑用 `s-dialog`、侧边配置用 `s-drawer`、命令式用 `SMessagebox`
-5. **行内操作** → 一律用 `s-table-buttons`，不要手写 `el-button` 列表
-6. **文字省略** → `s-tooltip-wrap`，不要手写 `text-overflow`
-7. **状态展示** → `s-unit` + 字典，不要自己拼颜色
+# saasui 组件清单
+
+基础组件必须优先使用 `common/saasui` 中的封装，禁止直接使用原生 `el-*` 组件。未在此列出的组件才允许回落到 Element UI。
+
+## 使用前提
+
+`saasui` 已在主应用中全局 `Vue.use(saasui)` 注册，模板内直接使用 kebab-case 标签即可：
+
+```vue
+<s-button type="primary">保存</s-button>
+```
+
+所有组件通过 `v-bind="$attrs"` / `v-on="$listeners"` 透传到底层 Element UI，因此 element 原有 props/事件仍可使用。
+
+---
+
+## 一、按钮类
+
+### `<s-button>`
+
+主按钮，替代 `el-button`。封装了路由跳转、`icon` 类型、边框模式。
+
+| 参数     | 类型     | 默认值      | 说明                                        |
+| ------ | ------ | -------- | ----------------------------------------- |
+| type   | String | default  | `primary` / `default` / `danger` / `icon` |
+| border | String | -        | 边框样式，自定义 class 后缀                         |
+| mode   | String | button   | `button` / `link` / `external`            |
+| path   | String | -        | `mode=link` 时的路由 path                     |
+| query  | Object | -        | 路由 query                                  |
+| target | String | -        | `_blank` 在新窗口打开                           |
+
+```vue
+<s-button type="primary" @click="handleSave">保存</s-button>
+<s-button mode="link" path="/detail" :query="{ id }">查看</s-button>
+```
+
+### `<s-button-text>`
+
+文字按钮，用于表格行内次要操作，替代 `el-button type="text"`。
+
+| 参数     | 类型     | 默认值  | 说明                    |
+| ------ | ------ | ---- | --------------------- |
+| type   | String | text | `text` / `link`       |
+| path   | String | -    | `type=link` 时的路由 path |
+| query  | Object | -    | 路由 query              |
+| target | String | -    | `_blank` 在新窗口打开       |
+
+### `<s-table-buttons>`
+
+行内操作按钮组，**表格操作列强制使用**。超出 `maxLength` 自动收起到下拉更多。
+
+| 参数        | 类型     | 默认值  | 说明            |
+| --------- | ------ | ---- | ------------- |
+| list      | Array  | []   | 按钮配置数组，见下方字段  |
+| row       | Object | -    | 当前行，透传到 onClick |
+| maxLength | Number | 2    | 最多显示几个，其余进入更多 |
+| moreType  | String | text | `text` / `more`（更多按钮样式） |
+
+`list` 项：`{ label, onClick, show?, tip?, attrs? }`，`show` 支持布尔或函数。
+
+```vue
+<s-table-buttons :list="actionList" :row="row" @action="handleAction" />
+```
+
+---
+
+## 二、分页 / 布局 / 容器
+
+### `<s-pagetable>`
+
+**列表页外层容器，必须使用**。自带 `header` / `form` / `footer` 插槽。
+
+| 参数                | 类型      | 默认值   | 说明                       |
+| ----------------- | ------- | ----- | ------------------------ |
+| title             | String  | 路由标题  | 页头标题，默认取路由 meta          |
+| mode              | String  | page  | `page` / `form`          |
+| showHeader        | Boolean | false | 是否显示头部                   |
+| showClose         | Boolean | false | 显示返回箭头                   |
+| showFooter        | Boolean | true  | 是否渲染 footer 插槽           |
+| showFooterButton  | Boolean | false | 底部是否展示「取消 / 确认」按钮       |
+| loadingBtn        | Boolean | false | 确认按钮 loading             |
+| confirmText       | String  | 确定    |                          |
+| cancelText        | String  | 取消    |                          |
+
+插槽：`default`（内容）、`header`、`header-append`、`title`、`form`（搜索区）、`footer`（分页）。
+
+```vue
+<s-pagetable>
+    <template #form>...筛选条件...</template>
+    <s-table :data="list" :columns="columns" />
+    <template #footer>
+        <el-pagination ... />
+    </template>
+</s-pagetable>
+```
+
+### `<s-page-tabs>` （项目中的 Tabs 基础组件）
+
+基于数组驱动的标签页，**替代 `el-tabs`**（项目中不存在 `s-tabs`，对应组件就是这个）。支持滚动、拖拽、显隐控制。
+
+| 参数           | 类型                | 默认值                            | 说明                      |
+| ------------ | ----------------- | ------------------------------ | ----------------------- |
+| value        | String / Number   | ''                             | `v-model`，当前激活的 value   |
+| tabs         | Array             | []                             | `{ label, value, disabled?, show? }` |
+| fieldNames   | Object            | `{ label, value }`             | 字段映射                    |
+| gap          | String / Number   | 32                             | tab 间距                  |
+| showBorder   | Boolean           | true                           | 是否显示下边框                 |
+| beforeLeave  | Function          | -                              | 切换前钩子，返回 `false`/Promise reject 阻止切换 |
+| draggable    | Boolean           | false                          | 是否开启拖拽排序                |
+
+事件：`input`、`tab-click(tab, index)`、`tabs-sort(newTabs, { from, to, tab })`。
+
+插槽：`extra`（右侧）、`tab-suffix`（每个 tab 尾部）。
+
+```vue
+<s-page-tabs v-model="active" :tabs="tabs" />
+```
+
+> 纯样式的简单切换也可以使用原生 `el-tabs`，但项目规范下**优先用 `s-page-tabs`**。
+
+### `<s-page-button>`
+
+页面级按钮区容器，用于 `s-pagetable` 顶部操作栏排布。
+
+### `<s-card>`
+
+内容卡片，带标题和可折叠能力。
+
+| 参数         | 类型      | 默认值   | 说明       |
+| ---------- | ------- | ----- | -------- |
+| title      | String  | ''    | 卡片标题     |
+| titleSub   | String  | ''    | 副标题      |
+| isCollapse | Boolean | false | 是否开启折叠箭头 |
+
+插槽：`title`、`action`（右上角）、`default`。
+
+### `<s-container>`
+
+外层容器，不常用，用于非 PageTable 页面的基础容器。
+
+### `<s-group>`
+
+分组数据块，常用于首页卡片类分组展示。
+
+| 参数              | 类型       | 默认值   | 说明                     |
+| --------------- | -------- | ----- | ---------------------- |
+| list            | Array    | []    | 分组数据，`{ label, children }` |
+| data            | Object   | {}    | 绑定数据                   |
+| isActive        | Function | -     | 判断 item 是否激活           |
+| showGroupTitle  | Boolean  | false | 是否显示分组标题               |
+
+---
+
+## 三、表格
+
+### `<s-table>`
+
+**列表页表格强制使用**。继承 `el-table` 全部 props + 事件，新增 `columns` 配置化、内置多选列。
+
+| 参数               | 类型       | 默认值     | 说明                                |
+| ---------------- | -------- | ------- | --------------------------------- |
+| data             | Array    | -       | 同 `el-table`                      |
+| border           | Boolean  | true    | 默认有边框                             |
+| columns          | Array    | []      | 列配置，见下方                           |
+| minWidth         | Number/String | 160 | 列默认最小宽度                           |
+| selectable       | Boolean  | false   | 是否展示多选列                           |
+| selectableType   | String   | default | `default` / `all`（跨页全选）           |
+| reserveSelection | Boolean  | false   | 翻页保留选中                            |
+| checkSelectable  | Function | () => true | 行是否可选                          |
+| selected         | Array    | []      | 跨页全选时的选中 id 集合，需 `:selected.sync` |
+
+`columns` 项字段：
+
+| 字段       | 说明                                       |
+| -------- | ---------------------------------------- |
+| label    | 表头文字                                     |
+| value    | 对应 `prop`，也是插槽名                          |
+| type     | `text` / `select` / `unit` / `operate` / `index` / `UserModel` |
+| tip      | 表头 tooltip                               |
+| width / minWidth / fixed | 列宽、冻结                      |
+| actionList | `type=operate` 时的按钮数组                  |
+| options  | `type=select` / `unit` 时的字典              |
+
+事件：`action(name, row, column)`（操作列）、`selection-change`、`select-all`、透传 `el-table` 所有事件。
+
+暴露方法：`doLayout()`、`clearSelection()`、`toggleRowSelection()`、`getSelection()`。
+
+```vue
+<s-table
+    :data="list"
+    :columns="[
+        { label: '姓名', value: 'name' },
+        { label: '状态', value: 'status', type: 'unit', options: statusOptions },
+        { label: '操作', value: 'action', type: 'operate', actionList },
+    ]"
+    @action="onAction" />
+```
+
+### `<s-table-column>`
+
+内置于 `s-table` 的列渲染器，一般不直接使用，通过 `columns` 配置。
+
+---
+
+## 四、弹窗 / 抽屉
+
+### `<s-dialog>`
+
+**新增 / 编辑弹窗必须使用**。继承 `el-dialog` 全部 props，内置 footer、loading。
+
+| 参数                 | 类型            | 默认值   | 说明                  |
+| ------------------ | ------------- | ----- | ------------------- |
+| visible            | Boolean       | false | 使用 `visible.sync`   |
+| width              | String/Number | 720px |                     |
+| showFooter         | Boolean       | true  | 是否显示底部按钮            |
+| showCancelButton   | Boolean       | true  |                     |
+| showConfirmButton  | Boolean       | true  |                     |
+| loadingBtn         | Boolean       | false | 确认按钮 loading        |
+| confirmText        | String        | 确定    |                     |
+| cancelText         | String        | 取消    |                     |
+| closeOnClickModal  | Boolean       | false | 强制 false，点击遮罩不关闭   |
+
+事件：`confirm`、`close`、`update:visible`。
+
+```vue
+<s-dialog :visible.sync="visible" title="新增" :loading-btn="saving" @confirm="onSave">
+    ...表单...
+</s-dialog>
+```
+
+### `<s-drawer>`
+
+侧边抽屉，参数同 `s-dialog`，`width` 改为 `size`（默认 720px）。
+
+### `SMessagebox` / `SInputDialog`
+
+以 JS 方式调起的命令式弹窗，直接从 saasui 导入调用。
+
+```js
+import saasui from 'saasui';
+saasui.SMessagebox({ title: '提示', content: '...' });
+```
+
+---
+
+## 五、表单控件（替代 `el-*`）
+
+> 所有控件支持 `from="text"` 进入纯展示模式，用于详情页与表单共用一套配置。
+
+| 组件                  | 替代          | 关键 props                                         |
+| ------------------- | ----------- | ------------------------------------------------ |
+| `<s-input>`         | el-input    | `type`、`from`、默认 `clearable`、`maxlength`         |
+| `<s-input-number>`  | el-input-number |                                              |
+| `<s-select>`        | el-select   | `options=[{ label, value }]`、默认 `filterable`、支持分组 |
+| `<s-cascader>`      | el-cascader | `options`、`props`                                |
+| `<s-date-picker>`   | el-date-picker | `type` 默认 `date`、`valueFormat` 默认 `yyyy-MM-dd` |
+| `<s-radio-group>`   | el-radio-group | `options`、`direction`（horizontal / vertical） |
+| `<s-switch>`        | el-switch   |                                                  |
+| `<s-mask-input>`    | -           | 脱敏输入                                             |
+| `<s-currency>`      | -           | 货币金额输入                                           |
+| `<s-currency-select>`| -          | 货币种类选择                                           |
+| `<s-field-group>`   | -           | 多字段组合，`fields=[{ field, type, ... }]`            |
+
+---
+
+## 六、展示 / 反馈
+
+| 组件                | 用途                                       |
+| ----------------- | ---------------------------------------- |
+| `<s-unit value type options>`    | 状态点 / tag 样式展示，配合字典                    |
+| `<s-tag>`         | 标签，替代 `el-tag`                          |
+| `<s-tip>`         | 提示性文字 / 弱提示                             |
+| `<s-alert>`       | 警告/通知条，替代 `el-alert`                    |
+| `<s-tooltip-wrap>`| 自适应文字省略 + tooltip，替代常见 `text-overflow` 包装 |
+| `<s-item-list>`   | 展示键值对列表                                  |
+| `<s-steps>`       | 步骤条，替代 `el-steps`                       |
+| `<s-segmented>`   | 分段控件                                     |
+| `<s-icon>`        | 图标统一入口                                   |
+| `<s-empty>`       | 空状态                                      |
+
+### `<s-tooltip-wrap>`
+
+| 参数        | 类型      | 默认值       | 说明              |
+| --------- | ------- | --------- | --------------- |
+| text      | String  | ''        | 展示文本，超出才显示 tooltip |
+| placement | String  | top-start |                 |
+| lineClamp | String  | '1'       | 多行省略行数          |
+| inherit   | Boolean | false     | 继承父级文字样式        |
+
+### `<s-unit>`
+
+| 参数      | 类型             | 默认值 | 说明                  |
+| ------- | -------------- | --- | ------------------- |
+| value   | String/Number  | -   | 值                   |
+| type    | String         | ''  | 预设类型                |
+| options | Array          | []  | 字典数组                |
+| props   | Object         | -   | 字段映射 `{ value, label, style }` |
+| color   | String         | ''  | 强制指定颜色              |
+| isLink  | Boolean        | -   | 是否当链接展示             |
+
+---
+
+## 七、布局
+
+### `<s-space>` / `<s-space-item>`
+
+元素间距容器，替代手写 `margin`。
+
+---
+
+## 使用规则速记
+
+1. **新建列表页** → `s-pagetable` + `s-table` + `s-table-buttons` + `s-dialog`
+2. **Tabs 切换** → `s-page-tabs`，不要再写 `el-tabs`
+3. **表单字段** → `s-input` / `s-select` / `s-date-picker` / `s-radio-group`，详情页传 `from="text"` 即可
+4. **弹窗** → 新增编辑用 `s-dialog`、侧边配置用 `s-drawer`、命令式用 `SMessagebox`
+5. **行内操作** → 一律用 `s-table-buttons`，不要手写 `el-button` 列表
+6. **文字省略** → `s-tooltip-wrap`，不要手写 `text-overflow`
+7. **状态展示** → `s-unit` + 字典，不要自己拼颜色

package/README.md

@@ -1,6 +1,6 @@
-
-## 纯粹 ui组件库 基于elementui的二次封装
-```js
-import saasui from 'saasui';
-Vue.use(saasui)
+
+## 纯粹 ui组件库 基于elementui的二次封装
+```js
+import saasui from 'saasui';
+Vue.use(saasui)
 ```