rvis-aiui-kit 1.0.0

package/components/table/readme.md

@@ -0,0 +1,83 @@
+# Table 表格组件
+
+`rvis-table` 用于以横向表格或纵向详情表的形式展示结构化数据。
+
+## 引入组件
+
+在页面的 `<script def>` 中注册组件：
+
+```json
+{
+  "usingComponents": {
+    "rvis-table": "rvis-aiui-kit/table"
+  }
+}
+```
+
+## API
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `header` | `String` | `''` | 否 | 表格标题；未传入、空字符串或全空白字符串时不渲染标题区域 |
+| `column` | `String` | `'[]'` | 是 | 列配置数组序列化后的 JSON 字符串 |
+| `data` | `String` | `'[]'` | 是 | 表格数据数组序列化后的 JSON 字符串 |
+| `direction` | `String` | `'horizontal'` | 否 | 表格方向，可选值为 `horizontal`、`vertical` |
+| `compact` | `Boolean` | `false` | 否 | 横向表格使用 `8px 6px` 单元格内边距；默认仍为 `12px 12px` |
+| `columnWidths` | `String` | `''` | 否 | 横向列宽，例如 `'120px 156px 144px'`；总宽度应为 `420px`、列数匹配 `column`；空字符串表示等分 |
+
+### Column 数据结构
+
+| 字段 | 类型 | 必填 | 说明 |
+| --- | --- | --- | --- |
+| `title` | `String` | 是 | 字段标题 |
+| `dataIndex` | `String` | 是 | 对应数据项中的字段名 |
+| `align` | `String` | 否 | 横向单元格对齐，`left`（默认）、`center`、`right` |
+
+### Data 数据结构
+
+每条数据应提供稳定且唯一的 `key`，其他字段由 `column[].dataIndex` 决定。
+
+## 方向
+
+- `horizontal`：第一行显示字段标题，后续每行显示一条数据。
+- `vertical`：每行显示一个字段，第一列是字段标题，后续每列对应一条数据。
+
+## 使用示例
+
+```js
+export default {
+  data: {
+    header: '人员信息',
+    column: JSON.stringify([
+      { title: '名称', dataIndex: 'name' },
+      { title: '年龄', dataIndex: 'age' }
+    ]),
+    data: JSON.stringify([
+      { key: '1', name: '张三', age: 20 }
+    ])
+  }
+};
+```
+
+```html
+<rvis-table
+  header="{{ header }}"
+  column="{{ column }}"
+  data="{{ data }}"
+  direction="horizontal"
+></rvis-table>
+```
+
+## 注意事项
+
+- `column` 和 `data` 必须是可以被 `JSON.parse` 解析的 JSON 数组字符串，不要直接传入 JavaScript 数组。
+- `header` 为空或仅包含空白字符时，标题及其分隔线都不会渲染。
+- `direction` 未传入或传入非 `vertical` 的值时按 `horizontal` 渲染。
+- 字段值为 `null`、`undefined` 或不存在时显示为空字符串。
+- AIUI 当前不支持嵌套 `ink:for`，组件内部会将单元格数据扁平化后使用单层循环渲染。
+- 表格宽度为 `424px`；横向表格在可用宽度内等分各列，纵向表格使用固定标签列和弹性内容列。
+- 当内容宽度超过可用列宽时，单元格文字会自动换行，并由文字实际行数撑开表格行高。
+- 表格使用横向虚线分隔各行，不显示纵向列分隔线。
+- 默认表头和所有模式的单元格均使用 `12px` 上下内边距；横向紧凑模式使用 `8px` 上下、`6px` 左右内边距。
+- 横向表头和纵向首列标签使用 `700` 字重，普通内容使用 `300` 字重。
+- 当组件放在纵向 Flex 容器中时，父容器应设置 `align-items: flex-start`，避免 Flex 默认的交叉轴拉伸将组件宿主撑满整行。

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "rvis-aiui-kit",
+  "version": "1.0.0",
+  "description": "RVIS AIUI components and Glass3 extension SDK.",
+  "type": "module",
+  "main": "./sdk/index.js",
+  "module": "./sdk/index.js",
+  "exports": {
+    ".": "./sdk/index.js",
+    "./sdk": "./sdk/index.js",
+    "./api-map": "./sdk/api-map.js",
+    "./package.json": "./package.json"
+  },
+  "ink": {
+    "components": {
+      "./image": "./components/image/index",
+      "./list": "./components/list/index",
+      "./markdown": "./components/markdown/index",
+      "./model-list": "./components/model-list/index",
+      "./paragraph": "./components/paragraph/index",
+      "./table": "./components/table/index"
+    }
+  },
+  "files": [
+    "components",
+    "sdk",
+    "README.md"
+  ],
+  "keywords": [
+    "aiui",
+    "ink",
+    "rokid",
+    "rvis"
+  ]
+}