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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roki-h5/create-roki-app",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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.0",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",
@@ -14,6 +14,7 @@
   "dependencies": {
     "@roki-h5/ui": "workspace:*",
     "axios": "^1.7.9",
+    "event-source-polyfill": "^1.0.31",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

package/templates/h5/src/App.vue

@@ -3,10 +3,15 @@ import { onBeforeMount, onMounted } from 'vue'
 import { useAppStore } from '@/stores'
 import { getAppData } from '@/utils/appInfo'
 import { BUILD_TIME, VERSION } from '@/utils/buildInfo'
+import { useDeviceShadow } from '@/utils/useDeviceShadow'
+import { useGlobalSse } from '@/utils/useGlobalSse'
 
 const appStore = useAppStore()
 const appTitle = import.meta.env.VITE_APP_TITLE || 'Roki H5'
 
+useDeviceShadow()
+useGlobalSse()
+
 onBeforeMount(async () => {
   await getAppData()
   void appStore.loadWelcomeMessage()

package/templates/h5/src/api/deviceInfo.ts

@@ -0,0 +1,46 @@
+import { devReq } from '@/api/request'
+
+export interface DeviceShadowItem {
+  properties?: Record<string, unknown>
+}
+
+export interface DeviceShadowResponse {
+  data?: DeviceShadowItem[]
+}
+
+export interface DeviceStatusItem {
+  status?: number
+}
+
+export interface DeviceStatusResponse {
+  data?: DeviceStatusItem[]
+}
+
+export function getDeviceStatus(deviceIds: string[]) {
+  return devReq<DeviceStatusResponse>({
+    url: '/rest/iot/api/device/info/state',
+    method: 'post',
+    data: deviceIds,
+  })
+}
+
+export function getDeviceAllProperty(params: { deviceIds: string }) {
+  return devReq<DeviceShadowResponse>({
+    url: '/rest/iot/api/device/property/shadow',
+    method: 'get',
+    params,
+  })
+}
+
+export function setDeviceFunctionProperty(data: Record<string, unknown>) {
+  return devReq({
+    url: '/rest/iot/api/device/function/invoke',
+    method: 'post',
+    data,
+  }).catch((err) => {
+    if (import.meta.env.DEV) {
+      console.warn('[setDeviceFunctionProperty] devReq rejected', err)
+    }
+    return null
+  })
+}

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

@@ -0,0 +1,83 @@
+/** shadow / SSE 中开关机字段名 */
+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',
+  ON: '1',
+} as const
+
+/**
+ * 热水器 shadow powerState（与 SSE 一致）
+ * 0 关机 / 1 就绪 / 2 工作中
+ */
+export const DEVICE_POWER_STATE = {
+  OFF: 0,
+  READY: 1,
+  WORKING: 2,
+} as const
+
+export const DEVICE_POWER_FUNCTION = {
+  POWER_CONTROL: 'powerControl',
+} as const
+
+export const DEVICE_TOAST = {
+  OFFLINE: '设备已离线',
+  POWER_OFF: '热水器已关机',
+  POWER_ON_SUCCESS: '热水器已准备就绪',
+  POWER_OFF_SUCCESS: '热水器已关机',
+} as const
+
+export function parseDevicePowerState(raw: unknown) {
+  if (raw === undefined || raw === null || raw === '') return null
+  const n = Number(raw)
+  return Number.isNaN(n) ? null : n
+}
+
+export function isDevicePowerOff(powerState: number | null) {
+  return powerState === DEVICE_POWER_STATE.OFF
+}
+
+export function resolvePowState(source: Record<string, unknown> | null | undefined) {
+  if (source == null || typeof source !== 'object') {
+    return null
+  }
+
+  const value = source[DEVICE_PROPERTY_KEY.POW_STATE] ?? source.powerState
+
+  if (value == null || value === '') {
+    return null
+  }
+
+  return String(value)
+}
+
+export function normalizePowState(value: unknown) {
+  if (value == null || value === '') {
+    return null
+  }
+
+  return String(value)
+}
+
+export function isDeviceOnline(status: unknown) {
+  return Number(status) === DEVICE_ONLINE_STATUS.ONLINE
+}
+
+export function isDevicePowerOn(powState: unknown) {
+  const normalized = normalizePowState(powState)
+
+  if (normalized != null) {
+    return normalized === DEVICE_POW_STATE.ON
+  }
+
+  return Number(powState) === 1
+}

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

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import { getWelcomeMessage, type WelcomeMessageData } from '@/api/welcome'
+import { SseService } from '@/utils/sse'
 
 function formatRequestDate(date = new Date()) {
   const pad = (n: number) => String(n).padStart(2, '0')
@@ -18,6 +19,9 @@ export interface AppStateUpdates {
   deviceId?: string
   deviceGuid?: string
   userId?: string
+  machineOpenStatus?: boolean | null
+  machinePowerStateReady?: boolean
+  machineOnlineStatus?: boolean
 }
 
 export const useAppStore = defineStore('app', () => {
@@ -40,6 +44,15 @@ export const useAppStore = defineStore('app', () => {
   /** `/rest/ops/ai/welcome` 的 data：prefix / speech */
   const welcomeCopy = ref<WelcomeMessageData>({})
 
+  /** 设备是否开机（null 表示尚未从 shadow/SSE 同步） */
+  const machineOpenStatus = ref<boolean | null>(null)
+  /** 开关机状态是否已从 shadow/SSE 同步过 */
+  const machinePowerStateReady = ref(false)
+  /** 设备是否在线 */
+  const machineOnlineStatus = ref(true)
+  /** SSE 客户端 */
+  const sseClient = ref<SseService | null>(null)
+
   function setAppName(name: string) {
     appName.value = name
   }
@@ -48,6 +61,15 @@ export const useAppStore = defineStore('app', () => {
     accessToken.value = token
   }
 
+  function initSSEClient(url: string) {
+    if (sseClient.value) {
+      console.log('[SSE] 已存在连接，不重复创建')
+      return sseClient.value
+    }
+    sseClient.value = new SseService(url)
+    return sseClient.value
+  }
+
   function resetWelcomeCopy() {
     welcomeCopy.value = {}
   }
@@ -78,6 +100,9 @@ export const useAppStore = defineStore('app', () => {
       deviceId,
       deviceGuid,
       userId,
+      machineOpenStatus,
+      machinePowerStateReady,
+      machineOnlineStatus,
     } as const
 
     Object.entries(updates).forEach(([key, value]) => {
@@ -101,8 +126,13 @@ export const useAppStore = defineStore('app', () => {
     userId,
     accessToken,
     welcomeCopy,
+    machineOpenStatus,
+    machinePowerStateReady,
+    machineOnlineStatus,
+    sseClient,
     setAppName,
     setAccessToken,
+    initSSEClient,
     resetWelcomeCopy,
     loadWelcomeMessage,
     updateState,

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

@@ -5,3 +5,4 @@ const pinia = createPinia()
 export default pinia
 export { useAppStore } from './app'
 export type { AppStateUpdates } from './app'
+export { useMachineStateStore } from './machineState'

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

@@ -0,0 +1,39 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface MachineDeviceData {
+  data?: Record<string, unknown>
+  messageType?: string
+}
+
+export const useMachineStateStore = defineStore('machineState', () => {
+  const deviceData = ref<MachineDeviceData>({})
+  const deviceShadowReady = ref(false)
+
+  async function updateMachineState(newState: MachineDeviceData) {
+    deviceData.value = {
+      ...deviceData.value,
+      data: {
+        ...deviceData.value.data,
+        ...newState.data,
+      },
+      messageType: newState.messageType,
+    }
+  }
+
+  function markDeviceShadowReady() {
+    deviceShadowReady.value = true
+  }
+
+  function resetDeviceShadowReady() {
+    deviceShadowReady.value = false
+  }
+
+  return {
+    deviceData,
+    deviceShadowReady,
+    updateMachineState,
+    markDeviceShadowReady,
+    resetDeviceShadowReady,
+  }
+})

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

@@ -1,3 +1,3 @@
 // 此文件由构建脚本自动生成，请勿手动修改
-export const BUILD_TIME = '—'
-export const VERSION = '0.0.0'
+export const BUILD_TIME = '2026/6/26 17:40:17'
+export const VERSION = '0.1.1'

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

@@ -0,0 +1,40 @@
+import { useAppStore } from '@/stores/app'
+
+interface DeviceParamsOverrides {
+  uid?: string
+  deviceId?: string
+  function?: string
+  params?: Record<string, unknown>
+}
+
+/** 设备功能下发 invoke 请求体 */
+export class DeviceParams {
+  messageId: number
+  uid: string
+  deviceId: string
+  params: Record<string, unknown>
+  function: string
+
+  constructor(overrides: DeviceParamsOverrides = {}) {
+    const appStore = useAppStore()
+    this.messageId = Date.now()
+    this.uid = overrides.uid ?? appStore.userId
+    this.deviceId = overrides.deviceId ?? appStore.deviceId
+    this.params = { powerCtrl: 1, ...(overrides.params ?? {}) }
+    this.function = overrides.function ?? ''
+  }
+
+  static create(overrides: DeviceParamsOverrides = {}) {
+    return new DeviceParams(overrides)
+  }
+
+  toPayload() {
+    return {
+      messageId: this.messageId,
+      uid: this.uid,
+      deviceId: this.deviceId,
+      function: this.function,
+      params: this.params,
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import { getDeviceAllProperty } from '@/api/deviceInfo'
+import { isDevicePowerOn, resolvePowState } from '@/constants/device'
+import { useAppStore } from '@/stores/app'
+import { useMachineStateStore } from '@/stores/machineState'
+
+let cachedDeviceId = ''
+let inflightPromise: Promise<boolean> | null = null
+
+export function applyDeviceShadowProperties(properties?: Record<string, unknown>) {
+  if (!properties || typeof properties !== 'object') {
+    return false
+  }
+
+  const appStore = useAppStore()
+  const machineStateStore = useMachineStateStore()
+  const powState = resolvePowState(properties)
+
+  appStore.updateState({
+    machinePowerStateReady: true,
+    ...(powState != null ? { machineOpenStatus: isDevicePowerOn(powState) } : {}),
+  })
+  machineStateStore.updateMachineState({ data: properties })
+  machineStateStore.markDeviceShadowReady()
+
+  return true
+}
+
+export function resetDeviceShadowCache() {
+  cachedDeviceId = ''
+  inflightPromise = null
+}
+
+export function fetchAndStoreDeviceShadow(deviceId: string, { force = false } = {}) {
+  if (!deviceId) {
+    return Promise.resolve(false)
+  }
+
+  const machineStateStore = useMachineStateStore()
+
+  if (!force && cachedDeviceId === deviceId && machineStateStore.deviceShadowReady) {
+    return Promise.resolve(true)
+  }
+
+  if (!force && inflightPromise && cachedDeviceId === deviceId) {
+    return inflightPromise
+  }
+
+  cachedDeviceId = deviceId
+  inflightPromise = getDeviceAllProperty({ deviceIds: deviceId })
+    .then((res) => {
+      const success = applyDeviceShadowProperties(res?.data?.[0]?.properties)
+
+      if (!success) {
+        cachedDeviceId = ''
+      }
+
+      return success
+    })
+    .catch((error) => {
+      console.error('[DeviceShadow] 获取 shadow 失败:', error)
+      cachedDeviceId = ''
+      return false
+    })
+    .finally(() => {
+      inflightPromise = null
+    })
+
+  return inflightPromise
+}

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

@@ -0,0 +1,8 @@
+export function randomNum(length: number) {
+  const str = '0123456789'
+  let result = ''
+  for (let i = length; i > 0; i -= 1) {
+    result += str[Math.floor(Math.random() * str.length)]
+  }
+  return result
+}

package/templates/h5/src/utils/sse/index.ts

@@ -0,0 +1,292 @@
+import { useAppStore } from '@/stores/app'
+import { EventSourcePolyfill } from 'event-source-polyfill'
+
+export type SseListener = (...args: unknown[]) => void
+
+interface SseServiceOptions {
+  autoReconnect?: boolean
+  maxReconnectAttempts?: number
+  reconnectDelay?: number
+  maxReconnectDelay?: number
+}
+
+export class SseService {
+  private eventSource: EventSourcePolyfill | null = null
+  private listeners: Record<string, SseListener[]> = {}
+  private isConnected = false
+  private autoReconnect: boolean
+  private accessToken: string
+  private maxReconnectAttempts: number
+  private reconnectDelay: number
+  private maxReconnectDelay: number
+  private reconnectAttempts = 0
+  private reconnectTimer: number | null = null
+  private missedPingCount = 0
+  private readonly maxMissedPings = 3
+  private lastPingTime = Date.now()
+  private messageCheckTimer: number | null = null
+  private lastMessageTime = Date.now()
+  private isPingReconnecting = false
+  private handleVisibilityChange: (() => void) | null = null
+  private handleNetworkOnline: (() => void) | null = null
+  private handleNetworkOffline: (() => void) | null = null
+
+  constructor(
+    private readonly url: string,
+    options: SseServiceOptions = {},
+  ) {
+    this.autoReconnect = options.autoReconnect ?? true
+    this.maxReconnectAttempts = options.maxReconnectAttempts ?? 5
+    this.reconnectDelay = options.reconnectDelay ?? 2000
+    this.maxReconnectDelay = options.maxReconnectDelay ?? 30000
+    this.accessToken = useAppStore().accessToken
+    this.connect()
+    this.setupEventListeners()
+  }
+
+  private setupEventListeners() {
+    this.handleVisibilityChange = this.onVisibilityChange.bind(this)
+    this.handleNetworkOnline = this.onNetworkOnline.bind(this)
+    this.handleNetworkOffline = this.onNetworkOffline.bind(this)
+    document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    window.addEventListener('online', this.handleNetworkOnline)
+    window.addEventListener('offline', this.handleNetworkOffline)
+  }
+
+  private removeEventListeners() {
+    if (this.handleVisibilityChange) {
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    }
+    if (this.handleNetworkOnline) {
+      window.removeEventListener('online', this.handleNetworkOnline)
+    }
+    if (this.handleNetworkOffline) {
+      window.removeEventListener('offline', this.handleNetworkOffline)
+    }
+  }
+
+  private onVisibilityChange() {
+    if (document.visibilityState === 'visible' && !this.isConnected && this.autoReconnect) {
+      console.log('[SSE] 页面可见，自动重新连接')
+      this.resetReconnectAttempts()
+      this.connect()
+    }
+  }
+
+  private onNetworkOnline() {
+    if (!this.isConnected && this.autoReconnect) {
+      console.log('[SSE] 网络恢复，自动重新连接')
+      this.resetReconnectAttempts()
+      this.connect()
+    }
+  }
+
+  private onNetworkOffline() {
+    console.log('[SSE] 网络断开，连接可能受影响')
+    this.handleConnectionLoss()
+  }
+
+  private resetReconnectAttempts() {
+    this.reconnectAttempts = 0
+  }
+
+  private startMessageCheck() {
+    if (this.messageCheckTimer) {
+      window.clearInterval(this.messageCheckTimer)
+    }
+
+    this.lastMessageTime = Date.now()
+    this.messageCheckTimer = window.setInterval(() => {
+      const timeSinceLastMessage = Date.now() - this.lastMessageTime
+
+      if (timeSinceLastMessage > 30000 && !this.isPingReconnecting) {
+        console.log('[SSE] 30秒未收到任何消息，网络可能存在问题')
+        this.handleConnectionLoss()
+
+        if (this.messageCheckTimer) {
+          window.clearInterval(this.messageCheckTimer)
+          this.messageCheckTimer = null
+        }
+      }
+    }, 5000)
+  }
+
+  private handleMessage(event: MessageEvent) {
+    this.lastMessageTime = Date.now()
+
+    try {
+      const data = JSON.parse(event.data) as { messageType?: string }
+
+      if (data.messageType === 'PING' || data.messageType) {
+        this.lastPingTime = Date.now()
+        this.missedPingCount = 0
+        this.isPingReconnecting = false
+      } else {
+        const timeSinceLastPing = Date.now() - this.lastPingTime
+
+        if (timeSinceLastPing > 15000) {
+          this.missedPingCount += 1
+          console.log(`[SSE] 未收到 ping 事件 ${this.missedPingCount}/${this.maxMissedPings} 次`)
+
+          if (this.missedPingCount >= this.maxMissedPings) {
+            this.isPingReconnecting = true
+            this.handleConnectionLoss()
+          }
+        }
+      }
+    } catch (error) {
+      console.error('[SSE] 消息解析错误:', error)
+    }
+
+    this.emit('message', event)
+  }
+
+  connect() {
+    if (this.eventSource) {
+      return
+    }
+
+    try {
+      this.eventSource = new EventSourcePolyfill(this.url, {
+        headers: {
+          Authorization: `Bearer ${this.accessToken}`,
+          'app-id': 'roki_app_h5',
+        },
+      })
+
+      this.eventSource.onopen = () => {
+        console.log('[SSE] 连接已建立')
+        this.isConnected = true
+        this.resetReconnectAttempts()
+        this.lastPingTime = Date.now()
+        this.lastMessageTime = Date.now()
+        this.missedPingCount = 0
+        this.isPingReconnecting = false
+        this.startMessageCheck()
+        this.emit('open')
+      }
+
+      this.eventSource.onerror = (error) => {
+        this.isConnected = false
+        console.log('[SSE] 连接错误:', error)
+
+        if (this.eventSource?.readyState === EventSource.CLOSED) {
+          console.log('[SSE] 连接已关闭')
+          this.emit('close')
+          this.handleConnectionLoss()
+        }
+
+        this.emit('error', error)
+      }
+
+      this.eventSource.onmessage = this.handleMessage.bind(this)
+    } catch (error) {
+      console.log('[SSE] 连接创建失败:', error)
+      this.emit('error', error)
+      this.handleConnectionLoss()
+    }
+  }
+
+  private handleReconnect() {
+    this.disconnect()
+
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.log(`[SSE] 自动重连失败，已达到最大重连次数 ${this.maxReconnectAttempts}`)
+      this.emit('maxReconnectReached')
+      return
+    }
+
+    const delay =
+      this.reconnectAttempts === 0
+        ? 0
+        : Math.min(
+            this.reconnectDelay * 1.5 ** (this.reconnectAttempts - 1),
+            this.maxReconnectDelay,
+          )
+
+    this.reconnectAttempts += 1
+    console.log(`[SSE] 将在 ${delay}ms 后进行第 ${this.reconnectAttempts} 次自动重连`)
+    this.emit('reconnecting', { attempt: this.reconnectAttempts, delay })
+
+    this.reconnectTimer = window.setTimeout(() => {
+      this.connect()
+    }, delay)
+  }
+
+  emit(event: string, data?: unknown) {
+    const eventListeners = this.listeners[event]
+    if (!eventListeners?.length) {
+      return
+    }
+
+    eventListeners.forEach((listener) => {
+      try {
+        listener(data)
+      } catch (error) {
+        console.error(`[SSE] 事件监听器执行错误 (${event}):`, error)
+      }
+    })
+  }
+
+  disconnect() {
+    this.isConnected = false
+
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+
+    if (this.messageCheckTimer) {
+      clearInterval(this.messageCheckTimer)
+      this.messageCheckTimer = null
+    }
+
+    if (this.eventSource) {
+      this.eventSource.close()
+      this.eventSource = null
+      this.emit('close')
+    }
+  }
+
+  on(event: string, callback: SseListener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = []
+    }
+    this.listeners[event].push(callback)
+  }
+
+  off(event: string, callback: SseListener) {
+    if (!this.listeners[event]) {
+      return
+    }
+    this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback)
+  }
+
+  removeAllListeners(event?: string) {
+    if (event) {
+      this.listeners[event] = []
+      return
+    }
+    this.listeners = {}
+  }
+
+  get connected() {
+    return this.isConnected
+  }
+
+  destroy() {
+    this.autoReconnect = false
+    this.disconnect()
+    this.removeEventListeners()
+    this.removeAllListeners()
+  }
+
+  private handleConnectionLoss() {
+    this.isConnected = false
+    if (this.autoReconnect) {
+      this.handleReconnect()
+    } else {
+      this.disconnect()
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppStore } from '@/stores/app'
+import { useMachineStateStore } from '@/stores/machineState'
+import { fetchAndStoreDeviceShadow, resetDeviceShadowCache } from '@/utils/deviceShadow'
+
+/** 应用启动时拉取一次 shadow，子页面直接读 store */
+export function useDeviceShadow() {
+  const appStore = useAppStore()
+  const machineStateStore = useMachineStateStore()
+  const { deviceId } = storeToRefs(appStore)
+
+  watch(
+    deviceId,
+    (newId, oldId) => {
+      if (newId !== oldId) {
+        resetDeviceShadowCache()
+        machineStateStore.resetDeviceShadowReady()
+      }
+
+      if (!newId) {
+        return
+      }
+
+      void fetchAndStoreDeviceShadow(newId)
+    },
+    { immediate: true },
+  )
+}

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

@@ -0,0 +1,198 @@
+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 { normalDeviceApiBase } from '@config/env'
+import { useAppStore } from '@/stores/app'
+import { useMachineStateStore } from '@/stores/machineState'
+import { randomNum } from '@/utils/random'
+import type { SseListener } from '@/utils/sse'
+
+const OFFLINE_STATUS_REFRESH_MS = 3000
+
+function throttle<T extends (...args: never[]) => void>(fn: T, wait: number) {
+  let last = 0
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  return (...args: Parameters<T>) => {
+    const now = Date.now()
+    const remaining = wait - (now - last)
+
+    if (remaining <= 0) {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      last = now
+      fn(...args)
+      return
+    }
+
+    if (!timer) {
+      timer = setTimeout(() => {
+        last = Date.now()
+        timer = null
+        fn(...args)
+      }, remaining)
+    }
+  }
+}
+
+/**
+ * 应用级 SSE：建立长连接并同步设备在线/开关机/工作状态。
+ * shadow 全量属性仅在 App 启动时拉取一次；此处通过 SSE 增量更新 store。
+ */
+export function useGlobalSse() {
+  const router = useRouter()
+  const appStore = useAppStore()
+  const machineStateStore = useMachineStateStore()
+  const { updateMachineState } = machineStateStore
+  const { deviceId, userId, sseClient, machineOnlineStatus } = storeToRefs(appStore)
+
+  let connectedForDeviceId = ''
+
+  const refreshDeviceOnlineStatus = throttle(() => {
+    if (!deviceId.value) {
+      return
+    }
+
+    getDeviceStatus([deviceId.value])
+      .then((statusRes) => {
+        appStore.updateState({
+          machineOnlineStatus: isDeviceOnline(statusRes.data?.[0]?.status),
+        })
+      })
+      .catch((error) => {
+        console.error('[SSE] 刷新设备在线状态失败:', error)
+      })
+  }, OFFLINE_STATUS_REFRESH_MS)
+
+  const onGlobalSseMessage: SseListener = (data) => {
+    const event = data as MessageEvent
+    let res: {
+      messageType?: string
+      data?: Record<string, unknown>
+    }
+
+    try {
+      res = JSON.parse(event.data || '{}')
+    } catch {
+      return
+    }
+
+    if (!res?.data) {
+      return
+    }
+
+    console.log('🌹🌹 【 SSE 】🌹🌹', res)
+
+    const powState = resolvePowState(res.data)
+
+    if (res.messageType === 'OFFLINE') {
+      appStore.updateState({
+        machineOnlineStatus: false,
+      })
+      void nextTick(() => {
+        void router.replace('/')
+      })
+      return
+    }
+
+    if (res.messageType === 'ONLINE') {
+      appStore.updateState({
+        machineOnlineStatus: true,
+      })
+    }
+
+    if (!machineOnlineStatus.value) {
+      refreshDeviceOnlineStatus()
+    }
+
+    if (powState != null) {
+      appStore.updateState({
+        machinePowerStateReady: true,
+        machineOpenStatus: isDevicePowerOn(powState),
+      })
+    }
+
+    if (res.messageType === 'EVENT' || res.messageType === 'REPORT_PROPERTY') {
+      void updateMachineState(res)
+    }
+  }
+
+  const bindGlobalListeners = () => {
+    if (!sseClient.value) {
+      return
+    }
+
+    sseClient.value.off('message', onGlobalSseMessage)
+    sseClient.value.on('message', onGlobalSseMessage)
+  }
+
+  const destroySseClient = () => {
+    if (!sseClient.value) {
+      return
+    }
+
+    sseClient.value.destroy()
+    sseClient.value = null
+    connectedForDeviceId = ''
+  }
+
+  const initSseConnection = () => {
+    if (!deviceId.value || !userId.value) {
+      return
+    }
+
+    if (sseClient.value) {
+      if (connectedForDeviceId === deviceId.value) {
+        return
+      }
+
+      destroySseClient()
+    }
+
+    const url = `${normalDeviceApiBase}/rest/iot/api/device/property/connect?uid=${userId.value}&connectId=${randomNum(10)}&deviceIds=${deviceId.value}`
+
+    appStore.initSSEClient(url)
+    connectedForDeviceId = deviceId.value
+
+    sseClient.value?.on('open', () => {
+      console.log('SSE连接成功建立')
+    })
+
+    sseClient.value?.on('error', () => {
+      console.log('SSE连接异常，正在自动重试...')
+    })
+
+    sseClient.value?.on('maxReconnectReached', () => {
+      console.warn('SSE重连失败，已达到最大重连次数')
+    })
+
+    sseClient.value?.on('reconnecting', ((data) => {
+      const payload = data as { attempt: number }
+      console.log(`SSE正在进行第${payload.attempt}次重连...`)
+    }) satisfies SseListener)
+
+    sseClient.value?.on('close', () => {
+      console.log('SSE连接关闭，正在清理...')
+    })
+
+    bindGlobalListeners()
+  }
+
+  watch(
+    [deviceId, userId],
+    () => {
+      initSseConnection()
+    },
+    { immediate: true },
+  )
+
+  watch(sseClient, (client) => {
+    if (client) {
+      bindGlobalListeners()
+    }
+  })
+}

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

@@ -1,33 +1,135 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import WelcomeInfo from '@/components/WelcomeInfo.vue'
+import { setDeviceFunctionProperty } from '@/api/deviceInfo'
 import { nativeApi } from '@/api/nativeApi'
+import {
+  DEVICE_POWER_FUNCTION,
+  DEVICE_POWER_STATE,
+  DEVICE_TOAST,
+  isDevicePowerOff,
+  parseDevicePowerState,
+} from '@/constants/device'
+import { useAppStore, useMachineStateStore } from '@/stores'
+import { DeviceParams } from '@/utils/deviceParams'
+import iconMore from '@/assets/images/home/icon-more.png'
+import iconPower from '@/assets/images/home/icon-power.png'
 
-const appTitle = import.meta.env.VITE_APP_TITLE
+const appStore = useAppStore()
+const machineStateStore = useMachineStateStore()
+const { deviceName, machineOnlineStatus } = storeToRefs(appStore)
+const { deviceData } = storeToRefs(machineStateStore)
+
+const homeHeaderTitle = computed(
+  () => String(deviceName.value ?? '').trim() || '燃气热水器',
+)
+
+const deviceShadowProperties = computed(
+  () => deviceData.value.data ?? {},
+)
+
+const devicePowerState = computed(() =>
+  parseDevicePowerState(
+    deviceShadowProperties.value.powerState ??
+      deviceShadowProperties.value.powState,
+  ),
+)
+
+const devicePowerOff = computed(() => isDevicePowerOff(devicePowerState.value))
+
+const deviceShutdownWhileOnline = computed(
+  () => devicePowerOff.value && machineOnlineStatus.value,
+)
+
+function showTip(message: string) {
+  if (import.meta.env.DEV) {
+    console.warn('[Tip]', message)
+  }
+}
 
 function onBack() {
   history.back()
 }
 
-function onMore() {
+async function invokePowerToggle(
+  params: Record<string, unknown>,
+  successToast?: string,
+) {
+  const payload = DeviceParams.create({
+    function: DEVICE_POWER_FUNCTION.POWER_CONTROL,
+    params,
+  }).toPayload()
+
+  const res = await setDeviceFunctionProperty(payload)
+  if (res != null && successToast) {
+    showTip(successToast)
+  }
+}
+
+async function onPowerIconClick() {
+  if (!machineOnlineStatus.value) {
+    showTip(DEVICE_TOAST.OFFLINE)
+    return
+  }
+
+  const ps = devicePowerState.value
+
+  if (ps === DEVICE_POWER_STATE.OFF) {
+    await invokePowerToggle({ powerCtrl: 1 }, DEVICE_TOAST.POWER_ON_SUCCESS)
+    return
+  }
+
+  if (
+    ps === DEVICE_POWER_STATE.READY ||
+    ps === DEVICE_POWER_STATE.WORKING
+  ) {
+    await invokePowerToggle({ powerCtrl: 0 }, DEVICE_TOAST.POWER_OFF_SUCCESS)
+    return
+  }
+
+  showTip(DEVICE_TOAST.OFFLINE)
+}
+
+function onMoreIconClick() {
+  if (deviceShutdownWhileOnline.value) {
+    showTip(DEVICE_TOAST.POWER_OFF)
+    return
+  }
+
   void nativeApi.skipDeviceMore('5.0')
 }
 </script>
 
 <template>
   <div class="page home-page">
-    <RokiNavBar :title="appTitle" @click-left="onBack">
+    <RokiNavBar :title="homeHeaderTitle" @click-left="onBack">
       <template #right>
-        <span
-          role="button"
-          tabindex="0"
-          class="home-page__more"
-          aria-label="更多"
-          @click.stop="onMore"
-          @keydown.enter.prevent="onMore"
-          @keydown.space.prevent="onMore"
-        >
-          ⋯
-        </span>
+        <div class="home-page__icon-group">
+          <span
+            role="button"
+            tabindex="0"
+            class="home-page__icon-btn"
+            :class="{ 'home-page__icon-btn--muted': devicePowerOff }"
+            aria-label="电源"
+            @click.stop="onPowerIconClick"
+            @keydown.enter.prevent="onPowerIconClick"
+            @keydown.space.prevent="onPowerIconClick"
+          >
+            <img :src="iconPower" alt="" />
+          </span>
+          <span
+            role="button"
+            tabindex="0"
+            class="home-page__icon-btn"
+            aria-label="更多"
+            @click.stop="onMoreIconClick"
+            @keydown.enter.prevent="onMoreIconClick"
+            @keydown.space.prevent="onMoreIconClick"
+          >
+            <img :src="iconMore" alt="" />
+          </span>
+        </div>
       </template>
     </RokiNavBar>
 
@@ -44,15 +146,37 @@ function onMore() {
   padding: 0 18px 24px;
 }
 
-.home-page__more {
+.home-page__icon-group {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 10px;
+  flex-shrink: 0;
+}
+
+.home-page__icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 42px;
-  height: 42px;
-  font-size: 20px;
-  line-height: 1;
-  color: rgba(0, 0, 0, 0.85);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  line-height: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.home-page__icon-btn img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.home-page__icon-btn--muted img {
+  opacity: 0.6;
+  filter: grayscale(1);
 }
 
 .home-page__spacer {

package/templates/h5/src/vite-env.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="vite/client" />
 
+declare module 'event-source-polyfill' {
+  export class EventSourcePolyfill extends EventSource {
+    constructor(url: string, options?: { headers?: Record<string, string> })
+  }
+}
+
 declare module '*.png' {
   const src: string
   export default src