rvis-aiui-kit 1.0.0

package/components/model-list/index.ink

@@ -0,0 +1,181 @@
+<script def>
+{
+  "component": true
+}
+</script>
+
+<script setup>
+export default {
+  properties: {
+    items: {
+      type: String,
+      value: '[]'
+    },
+    selectedId: {
+      type: String,
+      value: ''
+    },
+    showIndex: {
+      type: Boolean,
+      value: true
+    },
+    visible: {
+      type: Boolean,
+      value: true
+    }
+  }
+};
+</script>
+
+<page>
+  <view
+    class="model-list-mask"
+    style="left: {{ visible === true || visible === 'true' ? '0px' : '-100%' }}; right: {{ visible === true || visible === 'true' ? '0px' : '100%' }};"
+  >
+    <scroll-view
+      class="model-list-scroll"
+      scroll-y="true"
+      scroll-top="{{ Math.max(0, Math.min((JSON.parse(items).findIndex(listItem => String(listItem.id) === selectedId) - 3) * 50, (JSON.parse(items).length - 7) * 50)) }}"
+    >
+      <view class="model-list-items">
+        <view
+          class="model-list-item"
+          ink:for="{{ JSON.parse(items).map((listItem, listIndex) => ({ id: String(listItem.id), title: listItem.title == null ? '' : String(listItem.title), description: listItem.description == null ? '' : String(listItem.description), indexText: listItem.indexText == null ? String(listIndex + 1) : String(listItem.indexText) })) }}"
+          ink:key="id"
+        >
+          <view
+            class="model-list-index"
+            ink:if="{{ showIndex === true || showIndex === 'true' }}"
+          >
+            <text class="model-list-index-text">{{ typeof item === 'undefined' ? '' : item.indexText }}</text>
+          </view>
+
+          <text class="model-list-title">{{ typeof item === 'undefined' ? '' : item.title }}</text>
+          <text class="model-list-description">{{ typeof item === 'undefined' ? '' : item.description }}</text>
+        </view>
+
+        <view
+          class="model-list-item model-list-item-selected model-list-selected-overlay"
+          style="left: {{ JSON.parse(items).some(listItem => String(listItem.id) === selectedId) ? '0px' : '-100%' }}; top: {{ Math.max(0, (350 - JSON.parse(items).length * 50) / 2) + Math.max(0, JSON.parse(items).findIndex(listItem => String(listItem.id) === selectedId)) * 50 }}px;"
+        >
+          <view
+            class="model-list-index model-list-index-selected"
+            ink:if="{{ showIndex === true || showIndex === 'true' }}"
+          >
+            <text class="model-list-index-text model-list-index-text-selected">{{ (JSON.parse(items).find(listItem => String(listItem.id) === selectedId) || {}).indexText || JSON.parse(items).findIndex(listItem => String(listItem.id) === selectedId) + 1 }}</text>
+          </view>
+
+          <text class="model-list-title">{{ (JSON.parse(items).find(listItem => String(listItem.id) === selectedId) || {}).title || '' }}</text>
+          <text class="model-list-description">{{ (JSON.parse(items).find(listItem => String(listItem.id) === selectedId) || {}).description || '' }}</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</page>
+
+<style>
+.model-list-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.88);
+}
+
+.model-list-scroll {
+  width: 400px;
+  height: 350px;
+}
+
+.model-list-items {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 400px;
+  min-height: 350px;
+}
+
+.model-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 400px;
+  height: 50px;
+  padding: 0 24px;
+  box-sizing: border-box;
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 2px;
+}
+
+.model-list-item-selected {
+  border-color: #40ff5e;
+}
+
+.model-list-selected-overlay {
+  position: absolute;
+  z-index: 1;
+  background-color: #000000;
+}
+
+.model-list-index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(64, 255, 94, 0.6);
+  border-radius: 12px;
+}
+
+.model-list-index-selected {
+  background-color: rgba(64, 255, 94, 0.6);
+  border-color: transparent;
+}
+
+.model-list-index-text {
+  height: 24px;
+  color: #40ff5e;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: center;
+}
+
+.model-list-index-text-selected {
+  color: #000000;
+}
+
+.model-list-title {
+  min-width: 0;
+  color: #40ff5e;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.model-list-description {
+  margin-left: auto;
+  flex-shrink: 0;
+  color: rgba(64, 255, 94, 0.4);
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: right;
+}
+</style>

package/components/model-list/readme.md

@@ -0,0 +1,111 @@
+# Model List 覆盖列表组件
+
+`rvis-model-list` 用于在页面上方显示全屏半透明遮罩，并在遮罩中央展示单选列表。
+
+## 引入组件
+
+在页面的 `<script def>` 中注册组件：
+
+```json
+{
+  "usingComponents": {
+    "rvis-model-list": "rvis-aiui-kit/model-list"
+  }
+}
+```
+
+## API
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `items` | `String` | `'[]'` | 是 | 列表数据序列化后的 JSON 字符串 |
+| `selectedId` | `String` | `''` | 否 | 当前选中项的 `id`，为空时没有选中项 |
+| `showIndex` | `Boolean` | `true` | 否 | 是否显示从 1 开始的序号 |
+| `visible` | `Boolean` | `true` | 否 | 是否将遮罩和列表显示在屏幕内 |
+
+### Item 数据结构
+
+| 字段 | 类型 | 必填 | 说明 |
+| --- | --- | --- | --- |
+| `id` | `String` | 是 | 列表项唯一标识，用于 `ink:key` 和选中态匹配 |
+| `title` | `String` | 是 | 列表项标题 |
+| `description` | `String` | 否 | 列表项右侧描述 |
+| `indexText` | `String` | 否 | 自定义序号；不传时使用当前列表内从 1 开始的序号。 |
+
+组件不提供事件。页面需要切换选中项时，更新传入的 `selectedId`；组件会在列表溢出时自动滚动，确保选中项可见并尽量保持在列表中央。
+
+## 使用示例
+
+```js
+const MODEL_ITEMS = [
+  {
+    id: 'model-1',
+    title: '海关安全检查',
+    description: '02819939'
+  },
+  {
+    id: 'model-2',
+    title: '设备巡检',
+    description: '02819940'
+  }
+];
+
+export default {
+  data: {
+    showModelList: true,
+    selectedIndex: 0,
+    selectedModelId: MODEL_ITEMS[0].id,
+    modelItems: JSON.stringify(MODEL_ITEMS)
+  },
+
+  selectModel(nextIndex) {
+    const selectedIndex = Math.max(
+      0,
+      Math.min(nextIndex, MODEL_ITEMS.length - 1)
+    );
+    if (selectedIndex === this.data.selectedIndex) return;
+
+    this.setData({
+      selectedIndex,
+      selectedModelId: MODEL_ITEMS[selectedIndex].id
+    });
+  },
+
+  onKeyUp(event) {
+    switch (event.code) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.selectModel(this.data.selectedIndex + 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.selectModel(this.data.selectedIndex - 1);
+        break;
+      default:
+        break;
+    }
+  }
+};
+```
+
+```html
+<rvis-model-list
+  items="{{ modelItems }}"
+  selectedId="{{ selectedModelId }}"
+  showIndex="{{ true }}"
+  visible="{{ showModelList }}"
+  style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000;"
+></rvis-model-list>
+```
+
+## 布局和显示说明
+
+- Mask 使用 `position: fixed` 和 `top: 0; left: 0; right: 0; bottom: 0;` 覆盖设备屏幕，不设置固定屏幕宽高。
+- AIUI 自定义组件宿主会裁剪内部内容，调用时也必须按照示例为 `<rvis-model-list>` 设置 `position: fixed` 和四边 `0`，不要设置固定宽高。
+- Mask 背景为 `rgba(0, 0, 0, 0.88)`，不会降低列表内容自身的透明度。
+- 每项固定为 `400 × 50px`，列表容器最大高度为 `350px`，最多完整显示 7 项。
+- 列表使用纵向 `scroll-view`；超过 7 项时，`selectedId` 变化会同步更新 `scroll-top`，使选中项在中段尽量居中，并在列表首尾自动夹紧滚动范围。
+- `visible` 为 `false` 时，组件通过固定定位移动到屏幕外，不使用 `display` 隐藏。
+- Mask 相对设备视口定位，不依赖调用页面的容器尺寸和定位方式。
+- `items` 必须是可被 `JSON.parse` 解析的数组字符串。
+- 当前运行时会把宿主传入的属性同步为字符串，组件已兼容 `showIndex`、`visible` 的 Boolean 值和字符串形式。

package/components/paragraph/index.ink

@@ -0,0 +1,61 @@
+<script def>
+{
+  "component": true
+}
+</script>
+
+<script setup>
+export default {
+  properties: {
+    text: {
+      type: String,
+      value: ''
+    },
+    width: {
+      type: String,
+      value: '380px'
+    },
+    segments: {
+      type: String,
+      value: '[]'
+    }
+  }
+};
+</script>
+
+<page>
+  <view class="paragraph-container" style="width: {{ width }};">
+    <text class="paragraph-text" style="width: {{ width }}; position: {{ JSON.parse(segments).length === 0 ? 'relative' : 'absolute' }}; left: {{ JSON.parse(segments).length === 0 ? '0px' : '-1000px' }};">{{ text }}</text>
+    <p class="paragraph-text paragraph-rich" style="width: {{ width }}; position: {{ JSON.parse(segments).length > 0 ? 'relative' : 'absolute' }}; left: {{ JSON.parse(segments).length > 0 ? '0px' : '-1000px' }};">
+      <text class="paragraph-run" ink:for="{{ JSON.parse(segments) }}" ink:key="index" style="font-weight: {{ item.bold ? '700' : '400' }};">{{ item.text }}</text>
+    </p>
+  </view>
+</page>
+
+<style>
+.paragraph-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+}
+
+.paragraph-text {
+  width: 380px;
+  color: #40FF5E;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.paragraph-rich {
+  margin: 0;
+  padding: 0;
+}
+
+.paragraph-run {
+  color: #40ff5e;
+  font-size: 16px;
+  line-height: 24px;
+}
+</style>

package/components/paragraph/readme.md

@@ -0,0 +1,17 @@
+# Paragraph 段落组件
+
+注册路径：`rvis-aiui-kit/paragraph`。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `text` | String | `''` | 普通段落文本 |
+| `width` | String | `'380px'` | 段落宽度 |
+| `segments` | String | `'[]'` | 行内片段数组的 JSON 字符串；非空时优先于 `text` |
+
+片段格式：`{ "text": "内容", "bold": true }`。`bold` 为布尔值，省略时按普通文字显示。
+
+```xml
+<rvis-paragraph text="{{ text }}" width="424px" segments="{{ segments }}"></rvis-paragraph>
+```
+
+普通 `text` 保留原有纯文本渲染；片段使用原生 `p` 和带字重的 `text` 进行行内排版。不要使用 `streamdown`，也不要把 HTML 放入 `segments`。调用方须提供合法 JSON 数组。原生 `p` 支持已按本机 ink 运行时源码及无窗口截图核对，目标设备仍需匹配该能力。

package/components/table/index.ink

@@ -0,0 +1,272 @@
+<script def>
+{
+  "component": true
+}
+</script>
+
+<script setup>
+export default {
+  properties: {
+    header: {
+      type: String,
+      value: ''
+    },
+    column: {
+      type: String,
+      value: '[]'
+    },
+    data: {
+      type: String,
+      value: '[]'
+    },
+    direction: {
+      type: String,
+      value: 'horizontal'
+    },
+    compact: {
+      type: Boolean,
+      value: false
+    },
+    columnWidths: {
+      type: String,
+      value: ''
+    }
+  }
+};
+</script>
+
+<page>
+  <view
+    class="table-card table-card-horizontal"
+    style="position: {{ direction === 'vertical' ? 'absolute' : 'relative' }}; left: {{ direction === 'vertical' ? '-1000px' : '0px' }};"
+  >
+    <view
+      class="table-header"
+      ink:if="{{ header.trim().length > 0 }}"
+    >
+      <text class="table-header-text">{{ header }}</text>
+    </view>
+    <view
+      class="table-header-divider"
+      ink:if="{{ header.trim().length > 0 }}"
+    ></view>
+
+    <view
+      class="table-grid table-grid-horizontal"
+      style="grid-template-columns: {{ columnWidths.trim() || (JSON.parse(column).length === 0 ? '420px' : JSON.parse(column).map(() => String(420 / JSON.parse(column).length) + 'px').join(' ')) }};"
+    >
+      <view
+        class="table-cell"
+        style="padding: {{ compact === true || compact === 'true' ? '8px 6px' : '12px 12px' }};"
+        ink:for="{{ JSON.parse(column).map((columnItem, columnIndex) => ({ key: 'header-' + columnIndex, text: columnItem.title, align: columnItem.align || 'left', showTopDivider: false, isLabel: true })).concat(JSON.parse(data).reduce((cells, row, rowIndex) => cells.concat(JSON.parse(column).map((columnItem) => ({ key: String(row.key == null ? rowIndex : row.key) + '-' + columnItem.dataIndex, text: row[columnItem.dataIndex] == null ? '' : String(row[columnItem.dataIndex]), align: columnItem.align || 'left', showTopDivider: true, isLabel: false }))), [])) }}"
+        ink:key="key"
+      >
+        <view
+          class="table-cell-top-divider"
+          ink:if="{{ item.showTopDivider }}"
+        ></view>
+        <text class="table-cell-label" style="text-align: {{ item.align }};" ink:if="{{ item.isLabel }}">{{ item.text }}</text>
+        <text class="table-cell-text" style="text-align: {{ item.align }};" ink:if="{{ !item.isLabel }}">{{ item.text }}</text>
+      </view>
+    </view>
+  </view>
+
+  <view
+    class="table-card table-card-vertical"
+    style="position: {{ direction === 'vertical' ? 'relative' : 'absolute' }}; left: {{ direction === 'vertical' ? '0px' : '-1000px' }};"
+  >
+    <view
+      class="table-header"
+      ink:if="{{ header.trim().length > 0 }}"
+    >
+      <text class="table-header-text">{{ header }}</text>
+    </view>
+    <view
+      class="table-header-divider"
+      ink:if="{{ header.trim().length > 0 }}"
+    ></view>
+
+    <view
+      class="table-vertical-list"
+      ink:if="{{ JSON.parse(data).length === 1 }}"
+    >
+      <view
+        class="table-vertical-row"
+        ink:for="{{ JSON.parse(column).map((columnItem, rowIndex) => ({ key: columnItem.dataIndex, label: columnItem.title, text: JSON.parse(data)[0][columnItem.dataIndex] == null ? '' : String(JSON.parse(data)[0][columnItem.dataIndex]), showTopDivider: rowIndex !== 0 })) }}"
+        ink:key="key"
+      >
+        <view
+          class="table-cell-top-divider"
+          ink:if="{{ item.showTopDivider }}"
+        ></view>
+        <text class="table-vertical-label">{{ item.label }}</text>
+        <text class="table-vertical-text">{{ item.text }}</text>
+      </view>
+    </view>
+
+    <view
+      class="table-grid table-grid-vertical"
+      style="grid-template-columns: {{ JSON.parse(data).length === 0 ? '420px' : ['88px'].concat(JSON.parse(data).map(() => String(332 / JSON.parse(data).length) + 'px')).join(' ') }};"
+      ink:if="{{ JSON.parse(data).length !== 1 }}"
+    >
+      <view
+        class="table-cell"
+        ink:for="{{ JSON.parse(column).reduce((cells, columnItem, rowIndex) => { const rows = JSON.parse(data); return cells.concat([{ key: columnItem.dataIndex + '-title', text: columnItem.title, showTopDivider: rowIndex !== 0, isLabel: true }].concat(rows.map((row, dataIndex) => ({ key: columnItem.dataIndex + '-' + String(row.key == null ? dataIndex : row.key), text: row[columnItem.dataIndex] == null ? '' : String(row[columnItem.dataIndex]), showTopDivider: rowIndex !== 0, isLabel: false })))); }, []) }}"
+        ink:key="key"
+      >
+        <view
+          class="table-cell-top-divider"
+          ink:if="{{ item.showTopDivider }}"
+        ></view>
+        <text class="table-cell-label" ink:if="{{ item.isLabel }}">{{ item.text }}</text>
+        <text class="table-cell-text" ink:if="{{ !item.isLabel }}">{{ item.text }}</text>
+      </view>
+    </view>
+  </view>
+</page>
+
+<style>
+.table-card {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  max-width: 424px;
+  box-sizing: border-box;
+  background-color: #000000;
+  border: 2px solid rgba(64, 255, 94, 0.6);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.table-card-vertical {
+  width: 424px;
+}
+
+.table-card-horizontal {
+  width: 424px;
+}
+
+.table-grid {
+  display: grid;
+  width: auto;
+  max-width: 100%;
+}
+
+.table-grid-vertical {
+  width: 100%;
+}
+
+.table-grid-horizontal {
+  width: 100%;
+}
+
+.table-vertical-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.table-vertical-row {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  min-height: 30px;
+  box-sizing: border-box;
+}
+
+.table-vertical-label {
+  width: 88px;
+  flex-shrink: 0;
+  padding: 12px 12px;
+  box-sizing: border-box;
+  color: #40ff5e;
+  font-family: monospace;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+.table-vertical-text {
+  width: auto;
+  min-width: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0px;
+  padding: 12px 12px;
+  box-sizing: border-box;
+  color: #40ff5e;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 20px;
+}
+
+.table-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 30px;
+  padding: 12px 12px;
+  box-sizing: border-box;
+}
+
+.table-header-text {
+  width: 100%;
+  color: #40ff5e;
+  font-family: monospace;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.table-header-divider {
+  width: auto;
+  align-self: stretch;
+  height: 2px;
+  flex-shrink: 0;
+  background-color: rgba(64, 255, 94, 0.6);
+}
+
+.table-cell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  min-height: 30px;
+  padding: 12px 12px;
+  box-sizing: border-box;
+}
+
+.table-cell-label,
+.table-cell-text {
+  width: 100%;
+  color: #40ff5e;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.table-cell-label {
+  font-family: monospace;
+  font-weight: 700;
+}
+
+.table-cell-text {
+  font-family: sans-serif;
+  font-weight: 300;
+}
+
+.table-cell-top-divider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  box-sizing: border-box;
+  border-width: 1px 0 0 0;
+  border-style: dashed;
+  border-color: rgba(64, 255, 94, 0.6);
+}
+</style>