rvis-aiui-kit 1.0.0 → 1.1.0

package/README.md

@@ -19,4 +19,4 @@ import glass3 from 'rvis-aiui-kit';
 }
 ```
 
-Available component exports: `rvis-aiui-kit/image`, `rvis-aiui-kit/list`, `rvis-aiui-kit/markdown`, `rvis-aiui-kit/model-list`, `rvis-aiui-kit/paragraph`, `rvis-aiui-kit/table`.
+Available component exports: `rvis-aiui-kit/image`, `rvis-aiui-kit/list`, `rvis-aiui-kit/markdown`, `rvis-aiui-kit/model-list`, `rvis-aiui-kit/paragraph`, `rvis-aiui-kit/status-bar`, `rvis-aiui-kit/table`.

package/components/image/index.ink

@@ -13,11 +13,11 @@ export default {
     },
     width: {
       type: String,
-      value: '66px'
+      value: '168px'
     },
     height: {
       type: String,
-      value: '66px'
+      value: '104px'
     },
     objectFit: {
       type: String,
@@ -38,7 +38,7 @@ export default {
 
 <style>
 .image-content {
-  border-radius: 4px;
+  border-radius: 2px;
   overflow: hidden;
 }
 </style>

package/components/image/readme.md

@@ -0,0 +1,35 @@
+# Image 图片组件
+
+注册路径：`rvis-aiui-kit/image`。
+
+Image 用于在 AIUI 页面中显示应用图片，并与 Glass3 默认相机预览区域保持一致的尺寸和圆角。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `src` | String | `''` | 图片地址，支持运行时可读取的网络地址、本地路径或 Base64 Data URL。 |
+| `width` | String | `'168px'` | 图片宽度。 |
+| `height` | String | `'104px'` | 图片高度。 |
+| `objectFit` | String | `'fill'` | 缩放方式：`contain`、`cover` 或 `fill`。 |
+
+组件使用固定 `2px` 圆角。默认 `168px × 104px` 几何与 `glass3.camera.startPreview()` 的默认预览尺寸一致，适合在预览停止后用拍照结果替换同一媒体区域。
+
+```json
+{
+  "usingComponents": {
+    "rvis-image": "rvis-aiui-kit/image"
+  }
+}
+```
+
+```xml
+<rvis-image
+  src="{{ imageSrc }}"
+  objectFit="cover"
+></rvis-image>
+```
+
+拍照结果使用 Base64 时，将 `photoMime` 和 `photoBase64` 组成 Data URL 后传给 `src`：
+
+```js
+const imageSrc = `data:${photo.photoMime || 'image/jpeg'};base64,${photo.photoBase64}`;
+```

package/components/status-bar/index.ink

@@ -0,0 +1,139 @@
+<script def>
+{
+  "component": true
+}
+</script>
+
+<script setup>
+import glass3 from 'rvis-aiui-kit';
+
+function logError(error) {
+  if (error && error.code === 'CALL_DISPOSED') return;
+  console.error('[Status Bar]', error);
+}
+
+export default {
+  properties: {
+    title: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    dateText: '',
+    timeText: '',
+    batteryText: '--%',
+    active: false,
+    clockTimer: null,
+    powerObserveRequestId: ''
+  },
+
+  methods: {
+    updateTime() {
+      const now = new Date();
+      const hours = now.getHours();
+      const minutes = now.getMinutes();
+      this.setData({
+        dateText: `${now.getMonth() + 1}/${now.getDate()}`,
+        timeText: `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}`
+      });
+    },
+
+    updateBattery(event) {
+      if (!this.data.active) return;
+      if (event.eventType === 'invalidated') {
+        this.data.powerObserveRequestId = '';
+        this.setData({ batteryText: '--%' });
+        return;
+      }
+
+      const power = event.eventType === 'snapshot'
+        ? event.snapshot && event.snapshot.power
+        : event.patch && event.patch.power;
+      if (!power) return;
+
+      this.setData({
+        batteryText: power.levelPercent === undefined
+          ? '--%'
+          : `${power.levelPercent}%`
+      });
+    },
+
+    observePower() {
+      glass3.deviceContext.observe(
+        { domains: ['power'] },
+        { onEvent: event => this.updateBattery(event) }
+      ).then(result => {
+        if (this.data.active) {
+          this.data.powerObserveRequestId = result.requestId;
+          return;
+        }
+
+        glass3.deviceContext.stopObserve({
+          requestId: result.requestId
+        }).catch(logError);
+      }).catch(logError);
+    }
+  },
+
+  lifetimes: {
+    attached() {
+      this.data.active = true;
+      this.updateTime();
+      this.data.clockTimer = setInterval(() => this.updateTime(), 1000);
+      this.observePower();
+    },
+
+    detached() {
+      this.data.active = false;
+
+      if (this.data.clockTimer !== null) {
+        clearInterval(this.data.clockTimer);
+        this.data.clockTimer = null;
+      }
+      if (this.data.powerObserveRequestId) {
+        glass3.deviceContext.stopObserve({
+          requestId: this.data.powerObserveRequestId
+        }).catch(logError);
+        this.data.powerObserveRequestId = '';
+      }
+    }
+  }
+};
+</script>
+
+<page>
+  <view class="status-bar">
+    <text class="status-text">{{ title }}</text>
+    <view class="status-right">
+      <text class="status-text">{{ dateText }}</text>
+      <text class="status-text">{{ timeText }}</text>
+      <text class="status-text">{{ batteryText }}</text>
+    </view>
+  </view>
+</page>
+
+<style>
+.status-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 480px;
+  height: 20px;
+}
+
+.status-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-text {
+  color: #40ff5e;
+  font-size: 14px;
+  line-height: 20px;
+}
+</style>

package/components/status-bar/readme.md

@@ -0,0 +1,45 @@
+# Status Bar 组件
+
+标准 Glass3 HUD 状态栏，左侧显示应用标题，右侧显示本地月/日、时间和实时电量。
+
+组件会在 `attached` 时启动时钟和 `power` 订阅，在 `detached` 时清理计时器并停止订阅。
+
+## 注册与使用
+
+```json
+{
+  "usingComponents": {
+    "rvis-status-bar": "rvis-aiui-kit/status-bar"
+  }
+}
+```
+
+```html
+<rvis-status-bar title="应用名称"></rvis-status-bar>
+```
+
+属性：
+
+- `title: String`，默认 `''`，显示在状态栏左侧。
+
+组件固定为 `480px × 20px`，使用 `14px / 20px` 的绿色文本；页面负责将它放在全屏绘制区域的 `(0, 0)`。
+
+## Host 消息转发
+
+Ink 当前只把 Host 消息交给 Page，不会直接调用自定义组件的 `onMessage`。使用该组件的页面必须把消息转发到与组件共享的 `glass3` 单例：
+
+```js
+import glass3 from 'rvis-aiui-kit';
+
+export default {
+  onMessage(messageEvent) {
+    glass3.handleMessage(messageEvent);
+  },
+
+  onUnload() {
+    glass3.dispose();
+  }
+};
+```
+
+除这条 Page 级消息入口外，时间刷新、电量显示、订阅和清理逻辑均由组件管理。电量不可读时显示 `--%`。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rvis-aiui-kit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "RVIS AIUI components and Glass3 extension SDK.",
   "type": "module",
   "main": "./sdk/index.js",
@@ -18,6 +18,7 @@
       "./markdown": "./components/markdown/index",
       "./model-list": "./components/model-list/index",
       "./paragraph": "./components/paragraph/index",
+      "./status-bar": "./components/status-bar/index",
       "./table": "./components/table/index"
     }
   },

package/sdk/README.md

@@ -589,7 +589,7 @@ const preview = await glass3.camera.startPreview();
   left: 0,
   top: 40,
   width: 168,
-  height: 103,
+  height: 104,
   cornerRadius: 2,
   outline: true
 }
@@ -611,7 +611,7 @@ const preview = await glass3.camera.startPreview({
 | 字段 | 类型 | 约束 |
 | --- | --- | --- |
 | `left` | `number` | 有限、非负。 |
-| `top` | `number` | 有限、非负。自定义普通预览建议 `top >= 150`。 |
+| `top` | `number` | 有限、非负。标准 HUD 布局使用默认值 `40`。 |
 | `width` | `number` | 有限且大于 0。 |
 | `height` | `number` | 有限且大于 0。 |
 | `cornerRadius` | `number` | 有限、非负。 |

package/sdk/modules/camera/index.js

@@ -19,7 +19,7 @@ const DEFAULT_PREVIEW_ARGS = {
   left: 0,
   top: 40,
   width: 168,
-  height: 103,
+  height: 104,
   cornerRadius: 2,
   outline: true
 };

package/sdk/modules/camera/readme.md

@@ -33,7 +33,7 @@ const preview = await glass3.camera.startPreview();
   left: 0,
   top: 40,
   width: 168,
-  height: 103,
+  height: 104,
   cornerRadius: 2,
   outline: true
 }