rvis-aiui-kit 1.0.1 → 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/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.1",
+  "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"
     }
   },