@roki-h5/create-roki-app 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roki-h5/create-roki-app",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Roki H5 项目脚手架",
   "type": "module",
   "license": "MIT",

package/templates/h5/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@roki-h5/scaffold-template",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",

package/templates/h5/src/constants/device.ts

@@ -3,12 +3,6 @@ export const DEVICE_PROPERTY_KEY = {
   POW_STATE: 'powState',
 } as const
 
-/** 设备在线状态（info/state 接口 data[0].status） */
-export const DEVICE_ONLINE_STATUS = {
-  OFFLINE: 0,
-  ONLINE: 1,
-} as const
-
 /** 设备开关机状态 powState（调料机等） */
 export const DEVICE_POW_STATE = {
   OFF: '0',
@@ -68,10 +62,6 @@ export function normalizePowState(value: unknown) {
   return String(value)
 }
 
-export function isDeviceOnline(status: unknown) {
-  return Number(status) === DEVICE_ONLINE_STATUS.ONLINE
-}
-
 export function isDevicePowerOn(powState: unknown) {
   const normalized = normalizePowState(powState)
 

package/templates/h5/src/constants/deviceOnline.ts

@@ -0,0 +1,44 @@
+/**
+ * 设备在线状态
+ * POST /rest/iot/api/device/info/state → data[0].status
+ */
+export const DEVICE_ONLINE_STATUS = {
+  /** 离线 */
+  OFFLINE: 0,
+  /** 在线 */
+  ONLINE: 1,
+} as const
+
+export type DeviceOnlineStatusCode =
+  (typeof DEVICE_ONLINE_STATUS)[keyof typeof DEVICE_ONLINE_STATUS]
+
+/** status 码 → 展示文案 */
+export const DEVICE_ONLINE_STATUS_LABEL: Record<
+  DeviceOnlineStatusCode,
+  string
+> = {
+  [DEVICE_ONLINE_STATUS.OFFLINE]: '离线',
+  [DEVICE_ONLINE_STATUS.ONLINE]: '在线',
+}
+
+export function parseDeviceOnlineStatus(raw: unknown) {
+  if (raw === undefined || raw === null || raw === '') return null
+  const n = Number(raw)
+  return Number.isNaN(n) ? null : n
+}
+
+/** status === 1 为在线 */
+export function isDeviceOnline(status: unknown) {
+  return Number(status) === DEVICE_ONLINE_STATUS.ONLINE
+}
+
+export function getDeviceOnlineStatusLabel(status: unknown) {
+  const code = parseDeviceOnlineStatus(status)
+  if (code === DEVICE_ONLINE_STATUS.OFFLINE) {
+    return DEVICE_ONLINE_STATUS_LABEL[DEVICE_ONLINE_STATUS.OFFLINE]
+  }
+  if (code === DEVICE_ONLINE_STATUS.ONLINE) {
+    return DEVICE_ONLINE_STATUS_LABEL[DEVICE_ONLINE_STATUS.ONLINE]
+  }
+  return ''
+}

package/templates/h5/src/stores/app.ts

@@ -1,6 +1,7 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { getWelcomeMessage, type WelcomeMessageData } from '@/api/welcome'
+import { isDeviceOnline } from '@/constants/deviceOnline'
 import { SseService } from '@/utils/sse'
 
 function formatRequestDate(date = new Date()) {
@@ -21,7 +22,6 @@ export interface AppStateUpdates {
   userId?: string
   machineOpenStatus?: boolean | null
   machinePowerStateReady?: boolean
-  machineOnlineStatus?: boolean
 }
 
 export const useAppStore = defineStore('app', () => {
@@ -48,8 +48,17 @@ export const useAppStore = defineStore('app', () => {
   const machineOpenStatus = ref<boolean | null>(null)
   /** 开关机状态是否已从 shadow/SSE 同步过 */
   const machinePowerStateReady = ref(false)
-  /** 设备是否在线 */
-  const machineOnlineStatus = ref(true)
+  /**
+   * 设备在线状态码：info/state → data[0].status
+   * 0 离线 / 1 在线；未拉取前为 null
+   */
+  const deviceOnlineStatusCode = ref<number | null>(null)
+  /** 是否在线（未拉取前默认 true，避免首屏误显示离线） */
+  const machineOnlineStatus = computed(() => {
+    const status = deviceOnlineStatusCode.value
+    if (status === null || status === undefined) return true
+    return isDeviceOnline(status)
+  })
   /** SSE 客户端 */
   const sseClient = ref<SseService | null>(null)
 
@@ -61,6 +70,10 @@ export const useAppStore = defineStore('app', () => {
     accessToken.value = token
   }
 
+  function setDeviceOnlineStatus(status: number) {
+    deviceOnlineStatusCode.value = status
+  }
+
   function initSSEClient(url: string) {
     if (sseClient.value) {
       console.log('[SSE] 已存在连接，不重复创建')
@@ -102,7 +115,6 @@ export const useAppStore = defineStore('app', () => {
       userId,
       machineOpenStatus,
       machinePowerStateReady,
-      machineOnlineStatus,
     } as const
 
     Object.entries(updates).forEach(([key, value]) => {
@@ -128,10 +140,12 @@ export const useAppStore = defineStore('app', () => {
     welcomeCopy,
     machineOpenStatus,
     machinePowerStateReady,
+    deviceOnlineStatusCode,
     machineOnlineStatus,
     sseClient,
     setAppName,
     setAccessToken,
+    setDeviceOnlineStatus,
     initSSEClient,
     resetWelcomeCopy,
     loadWelcomeMessage,

package/templates/h5/src/utils/useGlobalSse.ts

@@ -2,7 +2,8 @@ import { nextTick, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
 import { getDeviceStatus } from '@/api/deviceInfo'
-import { isDeviceOnline, isDevicePowerOn, resolvePowState } from '@/constants/device'
+import { isDevicePowerOn, resolvePowState } from '@/constants/device'
+import { DEVICE_ONLINE_STATUS, isDeviceOnline } from '@/constants/deviceOnline'
 import { normalDeviceApiBase } from '@config/env'
 import { useAppStore } from '@/stores/app'
 import { useMachineStateStore } from '@/stores/machineState'
@@ -59,9 +60,10 @@ export function useGlobalSse() {
 
     getDeviceStatus([deviceId.value])
       .then((statusRes) => {
-        appStore.updateState({
-          machineOnlineStatus: isDeviceOnline(statusRes.data?.[0]?.status),
-        })
+        const status = statusRes.data?.[0]?.status
+        if (status != null) {
+          appStore.setDeviceOnlineStatus(status)
+        }
       })
       .catch((error) => {
         console.error('[SSE] 刷新设备在线状态失败:', error)
@@ -90,9 +92,7 @@ export function useGlobalSse() {
     const powState = resolvePowState(res.data)
 
     if (res.messageType === 'OFFLINE') {
-      appStore.updateState({
-        machineOnlineStatus: false,
-      })
+      appStore.setDeviceOnlineStatus(DEVICE_ONLINE_STATUS.OFFLINE)
       void nextTick(() => {
         void router.replace('/')
       })
@@ -100,9 +100,7 @@ export function useGlobalSse() {
     }
 
     if (res.messageType === 'ONLINE') {
-      appStore.updateState({
-        machineOnlineStatus: true,
-      })
+      appStore.setDeviceOnlineStatus(DEVICE_ONLINE_STATUS.ONLINE)
     }
 
     if (!machineOnlineStatus.value) {

package/templates/h5/src/views/home/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import WelcomeInfo from '@/components/WelcomeInfo.vue'
-import { setDeviceFunctionProperty } from '@/api/deviceInfo'
+import { getDeviceStatus, setDeviceFunctionProperty } from '@/api/deviceInfo'
 import { nativeApi } from '@/api/nativeApi'
 import {
   DEVICE_POWER_FUNCTION,
@@ -18,7 +18,7 @@ import iconPower from '@/assets/images/home/icon-power.png'
 
 const appStore = useAppStore()
 const machineStateStore = useMachineStateStore()
-const { deviceName, machineOnlineStatus } = storeToRefs(appStore)
+const { deviceName, deviceId, machineOnlineStatus } = storeToRefs(appStore)
 const { deviceData } = storeToRefs(machineStateStore)
 
 const homeHeaderTitle = computed(
@@ -99,6 +99,27 @@ function onMoreIconClick() {
 
   void nativeApi.skipDeviceMore('5.0')
 }
+
+async function loadDeviceOnlineStatus() {
+  const id = String(deviceId.value ?? '').trim()
+  if (!id) return
+
+  try {
+    const res = await getDeviceStatus([id])
+    const status = res?.data?.[0]?.status
+    if (status != null) {
+      appStore.setDeviceOnlineStatus(status)
+    }
+  } catch (e) {
+    if (import.meta.env.DEV) {
+      console.warn('[Home] loadDeviceOnlineStatus failed', e)
+    }
+  }
+}
+
+onMounted(() => {
+  void loadDeviceOnlineStatus()
+})
 </script>
 
 <template>