@roki-h5/create-roki-app 0.1.0 → 0.1.2

package/templates/h5/src/components/WelcomeInfo.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import logoSrc from '@/assets/images/home/logo-free.png'
+import deviceImg from '@/assets/images/home/img-device.png'
+import { useAppStore } from '@/stores'
+
+const { welcomeCopy } = storeToRefs(useAppStore())
+
+const prefixText = computed(() => {
+  const prefix = welcomeCopy.value?.prefix
+  return prefix && String(prefix).trim() ? String(prefix).trim() : ''
+})
+
+const speechText = computed(() => {
+  const speech = welcomeCopy.value?.speech
+  return speech && String(speech).trim() ? String(speech).trim() : ''
+})
+</script>
+
+<template>
+  <section class="welcome-info">
+    <div class="welcome-info__left">
+      <img class="welcome-info__logo" :src="logoSrc" alt="ROKI" />
+      <h3 v-if="prefixText" class="welcome-info__prefix">{{ prefixText }}</h3>
+      <p v-if="speechText" class="welcome-info__speech">{{ speechText }}</p>
+    </div>
+
+    <div class="welcome-info__right">
+      <img class="welcome-info__device" :src="deviceImg" alt="" />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.welcome-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  margin-bottom: 24px;
+}
+
+.welcome-info__left {
+  min-width: 0;
+  padding-top: 6px;
+  margin-left: 32px;
+  line-height: 1.5;
+}
+
+.welcome-info__logo {
+  display: block;
+  position: relative;
+  top: 0;
+  right: 4px;
+  width: 68px;
+  height: 68px;
+  border-radius: 14px;
+}
+
+.welcome-info__prefix {
+  margin: 8px 0 4px;
+  background: linear-gradient(90deg, #005da7 0%, #f87b4d 50%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.welcome-info__speech {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.welcome-info__right {
+  position: relative;
+  flex-shrink: 0;
+  width: 200px;
+  height: 200px;
+}
+
+.welcome-info__device {
+  display: block;
+  width: 100%;
+}
+</style>

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

@@ -8,7 +8,7 @@ const router = createRouter({
       path: '/',
       name: 'Home',
       component: Home,
-      meta: { title: '__PROJECT_NAME__' },
+      meta: { title: import.meta.env.VITE_APP_TITLE },
     },
   ],
   scrollBehavior: () => ({ top: 0 }),

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

@@ -1,15 +1,110 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import { getWelcomeMessage, type WelcomeMessageData } from '@/api/welcome'
+
+function formatRequestDate(date = new Date()) {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+}
+
+/** 可通过 updateState 批量更新的字段 */
+export interface AppStateUpdates {
+  terminal?: string
+  accessToken?: string
+  familyId?: string
+  deviceType?: string
+  deviceCategory?: string
+  deviceName?: string
+  deviceId?: string
+  deviceGuid?: string
+  userId?: string
+}
 
 export const useAppStore = defineStore('app', () => {
-  const accessToken = ref('')
+  /** 应用展示名，可在启动时由接口或配置覆盖 */
+  const appName = ref('Roki H5')
+  const terminal = ref('android')
+  const deviceName = ref('燃气热水器·HT808-16')
+  const familyId = ref('')
+  const deviceId = ref('HT80888a68d0fb812')
+  const deviceGuid = ref('HT80888a68d0fb812')
+  const deviceType = ref('HT808')
+  const deviceCategory = ref('RRSQ')
+  const userId = ref('3243300064')
+
+  /** 开发联调用 token，生产环境由 App 注入覆盖 */
+  const accessToken = ref(
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE4MDI5Mjg0ODAsInVzZXJJZCI6MzI0MzMwMDA2NCwianRpIjoiMDI3ZjhiMGMtYmU5MS00NzA2LWI3ZDUtOGI5OTJlMjA0MzQ2IiwiY2xpZW50X2lkIjoicm9raV9jbGllbnQifQ.aW0hKvcv-k_4PocYNVWiml7IB15jZIcn24eXZFZCSz4',
+  )
+
+  /** `/rest/ops/ai/welcome` 的 data：prefix / speech */
+  const welcomeCopy = ref<WelcomeMessageData>({})
+
+  function setAppName(name: string) {
+    appName.value = name
+  }
 
   function setAccessToken(token: string) {
     accessToken.value = token
   }
 
+  function resetWelcomeCopy() {
+    welcomeCopy.value = {}
+  }
+
+  async function loadWelcomeMessage(params: Record<string, unknown> = {}) {
+    try {
+      const res = await getWelcomeMessage({
+        date: formatRequestDate(),
+        ...params,
+      })
+      welcomeCopy.value = res?.data ?? {}
+    } catch (e) {
+      welcomeCopy.value = {}
+      if (import.meta.env.DEV) {
+        console.warn('[App] loadWelcomeMessage failed', e)
+      }
+    }
+  }
+
+  function updateState(updates: AppStateUpdates) {
+    const stateRefs = {
+      terminal,
+      accessToken,
+      familyId,
+      deviceType,
+      deviceCategory,
+      deviceName,
+      deviceId,
+      deviceGuid,
+      userId,
+    } as const
+
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in stateRefs) {
+        stateRefs[key as keyof typeof stateRefs].value = value as never
+      } else if (import.meta.env.DEV) {
+        console.warn(`[App] updateState: unknown key "${key}"`)
+      }
+    })
+  }
+
   return {
+    appName,
+    terminal,
+    deviceName,
+    familyId,
+    deviceId,
+    deviceGuid,
+    deviceType,
+    deviceCategory,
+    userId,
     accessToken,
+    welcomeCopy,
+    setAppName,
     setAccessToken,
+    resetWelcomeCopy,
+    loadWelcomeMessage,
+    updateState,
   }
 })

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

@@ -0,0 +1,86 @@
+import { useAppStore } from '@/stores'
+
+export interface AppDeviceInfo {
+  deviceId?: string
+  deviceName?: string
+  deviceType?: string
+  deviceCategory?: string
+  familyId?: string
+  userId?: string
+  terminal?: string
+  accessToken?: string
+}
+
+export function patchAppStoreFromInfo(rawInfo: unknown) {
+  if (!rawInfo) return null
+
+  try {
+    const info =
+      typeof rawInfo === 'string'
+        ? (JSON.parse(rawInfo) as AppDeviceInfo)
+        : (rawInfo as AppDeviceInfo)
+
+    const {
+      deviceId,
+      deviceName,
+      deviceType,
+      deviceCategory,
+      familyId,
+      userId,
+      terminal,
+      accessToken,
+    } = info
+
+    const appStore = useAppStore()
+    const prevGuid = String(appStore.deviceGuid ?? '').trim()
+    const nextGuid = String(deviceId ?? '').trim()
+
+    appStore.updateState({
+      deviceId,
+      deviceName,
+      deviceGuid: deviceId,
+      deviceType,
+      deviceCategory,
+      familyId,
+      userId,
+      terminal,
+      accessToken,
+    })
+
+    if (nextGuid && nextGuid !== prevGuid) {
+      appStore.resetWelcomeCopy()
+      void appStore.loadWelcomeMessage()
+    }
+
+    return info
+  } catch (e) {
+    console.warn('[appInfo] 设备信息解析失败', e)
+    return null
+  }
+}
+
+/** 从混合 App 原生桥获取设备信息并写入 store */
+export async function getAppData() {
+  let info: unknown = null
+
+  if (
+    window.nativeInterface &&
+    typeof window.nativeInterface.getDeviceInfo === 'function'
+  ) {
+    info = await Promise.resolve(window.nativeInterface.getDeviceInfo())
+    if (import.meta.env.DEV) {
+      console.log('[appInfo] 安卓/鸿蒙数据获取成功', info)
+    }
+  } else if (window.getDeviceInfo) {
+    const raw = window.getDeviceInfo
+    info = await Promise.resolve(
+      typeof raw === 'function' ? raw() : raw,
+    )
+    if (import.meta.env.DEV) {
+      console.log('[appInfo] iOS 数据获取成功', info)
+    }
+  }
+
+  if (!info) return null
+  return patchAppStoreFromInfo(info)
+}

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

@@ -0,0 +1,26 @@
+/** 轻量 UA 判断，供 JsBridge / nativeApi 区分 iOS 与 Android */
+function getUa() {
+  return typeof navigator !== 'undefined' && navigator.userAgent
+    ? navigator.userAgent
+    : ''
+}
+
+const ua = getUa()
+
+const android = /Android/i.test(ua)
+const iPhone = /iPhone/i.test(ua) && !/iPod/i.test(ua)
+const iPod = /iPod/i.test(ua)
+const iPad =
+  /iPad/i.test(ua) ||
+  (typeof navigator !== 'undefined' &&
+    navigator.platform === 'MacIntel' &&
+    Number(navigator.maxTouchPoints) > 1)
+
+export const browser = {
+  versions: {
+    android,
+    iPhone,
+    iPad,
+    iPod,
+  },
+}

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

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

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

@@ -0,0 +1,38 @@
+/** 时段及问候语 与后端 getGreeting 枚举一致 前端兜底方案 避免接口请求失败时展示不正确 */
+export const TIME_PERIOD_GREETINGS = [
+  '早上好',
+  '中午好',
+  '下午好',
+  '傍晚好',
+  '夜深了',
+] as const
+
+export function getGreetingByTime(dateTime = new Date()) {
+  const hours = dateTime.getHours()
+  const minutes = dateTime.getMinutes()
+  const totalMinutes = hours * 60 + minutes
+
+  if (totalMinutes >= 5 * 60 + 1 && totalMinutes <= 10 * 60) return '早上好'
+  if (totalMinutes >= 10 * 60 + 1 && totalMinutes <= 14 * 60) return '中午好'
+  if (totalMinutes >= 14 * 60 + 1 && totalMinutes <= 17 * 60) return '下午好'
+  if (totalMinutes >= 17 * 60 + 1 && totalMinutes <= 22 * 60) return '傍晚好'
+  return '夜深了'
+}
+
+export function extractTimePeriodGreeting(text: string) {
+  const t = String(text ?? '').trim()
+  if (!t) return ''
+  if (t === '深夜了' || t.includes('深夜')) return '夜深了'
+  return TIME_PERIOD_GREETINGS.find((greeting) => t === greeting) ?? ''
+}
+
+/** 解析首页问候 prefix：无接口数据或时段不一致时以本地时间为准 */
+export function resolveWelcomePrefix(apiPrefix?: string, dateTime = new Date()) {
+  const localGreeting = getGreetingByTime(dateTime)
+  const trimmed = String(apiPrefix ?? '').trim()
+  if (!trimmed) return localGreeting
+
+  const apiGreeting = extractTimePeriodGreeting(trimmed)
+  if (apiGreeting && apiGreeting !== localGreeting) return localGreeting
+  return trimmed
+}

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

@@ -1,16 +1,21 @@
 <script setup lang="ts">
+import WelcomeInfo from '@/components/WelcomeInfo.vue'
+import { nativeApi } from '@/api/nativeApi'
+
+const appTitle = import.meta.env.VITE_APP_TITLE
+
 function onBack() {
   history.back()
 }
 
 function onMore() {
-  console.log('more')
+  void nativeApi.skipDeviceMore('5.0')
 }
 </script>
 
 <template>
   <div class="page home-page">
-    <RokiNavBar title="__PROJECT_NAME__" @click-left="onBack">
+    <RokiNavBar :title="appTitle" @click-left="onBack">
       <template #right>
         <span
           role="button"
@@ -18,14 +23,17 @@ function onMore() {
           class="home-page__more"
           aria-label="更多"
           @click.stop="onMore"
+          @keydown.enter.prevent="onMore"
+          @keydown.space.prevent="onMore"
         >
           ⋯
         </span>
       </template>
     </RokiNavBar>
 
+    <WelcomeInfo />
+
     <main class="home-page__content">
-      <p class="home-page__tip">向下滚动，导航栏背景会从透明渐变为白色。</p>
       <div class="home-page__spacer" />
     </main>
   </div>
@@ -33,14 +41,7 @@ function onMore() {
 
 <style scoped>
 .home-page__content {
-  padding: 24px 18px;
-}
-
-.home-page__tip {
-  margin: 0;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.6);
-  line-height: 1.6;
+  padding: 0 18px 24px;
 }
 
 .home-page__more {

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

@@ -1,9 +1,35 @@
 /// <reference types="vite/client" />
 
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
 interface ImportMetaEnv {
+  readonly VITE_ENV: string
+  readonly VITE_APP_TITLE: string
   readonly VITE_BASE_API: string
+  readonly VITE_NORMALDEVICE_BASE_API: string
+  readonly VITE_PUBLIC_BASE?: string
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+interface WebViewJavascriptBridge {
+  callHandler: (
+    handlerName: string,
+    params: Record<string, unknown>,
+    callback: (responseData: unknown) => void,
+  ) => void
+}
+
+interface Window {
+  WebViewJavascriptBridge?: WebViewJavascriptBridge
+  WVJBCallbacks?: Array<(bridge: WebViewJavascriptBridge) => void>
+  nativeInterface?: {
+    getDeviceInfo?: () => unknown
+  }
+  getDeviceInfo?: (() => unknown) | unknown
+}

package/templates/h5/tsconfig.json

@@ -13,8 +13,9 @@
     "noEmit": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@config/*": ["config/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.vue", "config/env.ts"]
 }

package/templates/h5/vite.config.ts

@@ -1,19 +1,64 @@
+import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const monorepoUiDir = path.resolve(__dirname, '../../../ui')
+const isMonorepoDev = fs.existsSync(path.join(monorepoUiDir, 'package.json'))
 
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, path.resolve(__dirname, 'config/env'), '')
+
+  const rawPublicBase = (env.VITE_PUBLIC_BASE ?? '').trim()
+  const base =
+    mode === 'development'
+      ? '/'
+      : rawPublicBase === './' || rawPublicBase === '.'
+        ? './'
+        : rawPublicBase
+          ? rawPublicBase.endsWith('/')
+            ? rawPublicBase
+            : `${rawPublicBase}/`
+          : './'
+
+  return {
+    plugins: [vue()],
+    envDir: path.resolve(__dirname, 'config/env'),
+    resolve: {
+      alias: [
+        { find: '@', replacement: path.resolve(__dirname, 'src') },
+        { find: '@config', replacement: path.resolve(__dirname, 'config') },
+        ...(isMonorepoDev
+          ? [
+              {
+                find: '@roki-h5/ui/style.css',
+                replacement: path.resolve(
+                  monorepoUiDir,
+                  'src/styles/base.css',
+                ),
+              },
+              {
+                find: '@roki-h5/ui',
+                replacement: path.resolve(monorepoUiDir, 'src/index.ts'),
+              },
+            ]
+          : []),
+      ],
+    },
+    base,
+    server: {
+      host: true,
+      port: 5174,
+      cors: true,
+      proxy: {
+        '/api': {
+          target: 'https://api-test.myroki.com',
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/api/, ''),
+        },
+      },
     },
-  },
-  server: {
-    host: true,
-    port: 5173,
-  },
+  }
 })

package/templates/h5/.env.development

@@ -1 +0,0 @@
-VITE_BASE_API=