@roki-h5/create-roki-app 0.1.3 → 0.1.4

package/templates/h5/src/assets/styles/atomic/text.css

@@ -0,0 +1,133 @@
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-primary {
+  color: var(--color-text-primary);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.text-tertiary {
+  color: var(--color-text-tertiary);
+}
+
+.text-disabled {
+  color: var(--color-text-disabled);
+}
+
+.text-12 {
+  font-size: 12px;
+}
+
+.text-13 {
+  font-size: 13px;
+}
+
+.text-14 {
+  font-size: 14px;
+}
+
+.text-15 {
+  font-size: 15px;
+}
+
+.text-16 {
+  font-size: 16px;
+}
+
+.text-17 {
+  font-size: 17px;
+}
+
+.text-18 {
+  font-size: 18px;
+}
+
+.text-19 {
+  font-size: 19px;
+}
+
+.text-20 {
+  font-size: 20px;
+}
+
+.text-21 {
+  font-size: 21px;
+}
+
+.text-22 {
+  font-size: 22px;
+}
+
+.text-23 {
+  font-size: 23px;
+}
+
+.text-24 {
+  font-size: 24px;
+}
+
+.text-25 {
+  font-size: 25px;
+}
+
+.text-26 {
+  font-size: 26px;
+}
+
+.text-27 {
+  font-size: 27px;
+}
+
+.text-28 {
+  font-size: 28px;
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.link {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.link:active {
+  color: var(--color-primary-active);
+}

package/templates/h5/src/assets/styles/main.css

@@ -1,8 +1,33 @@
+@import './variables.css';
+@import './atomic/index.css';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html,
 body {
   margin: 0;
   padding: 0;
-  background: #f5f6f8;
+  height: 100%;
+  overscroll-behavior-y: none;
+  -webkit-tap-highlight-color: transparent;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    'PingFang SC',
+    'Microsoft YaHei',
+    sans-serif;
+  font-size: 16px;
+  color: var(--color-text-primary);
+  background: var(--color-bg-page);
 }
 
 #app {

package/templates/h5/src/assets/styles/variables.css

@@ -0,0 +1,19 @@
+:root {
+  --color-primary: #005da7;
+  --color-primary-hover: #4096ff;
+  --color-primary-active: #0958d9;
+  --color-success: #52c41a;
+  --color-warning: #faad14;
+  --color-error: #ff4d4f;
+  --color-info: #005da7;
+  --color-text-primary: rgba(0, 0, 0, 0.8);
+  --color-text-secondary: rgba(0, 0, 0, 0.65);
+  --color-text-tertiary: rgba(0, 0, 0, 0.45);
+  --color-text-disabled: rgba(0, 0, 0, 0.25);
+  --color-bg-page: #f5f6f8;
+  --color-bg-subtle: #eef0f4;
+  --color-bg-elevated: #ffffff;
+  --color-bg-mask: rgba(0, 0, 0, 0.45);
+  --color-border: #e8e8e8;
+  --color-divider: rgba(0, 0, 0, 0.06);
+}

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

@@ -22,8 +22,8 @@ const speechText = computed(() => {
   <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>
+      <h3 v-if="prefixText" class="welcome-info__prefix text-20">{{ prefixText }}</h3>
+      <p v-if="speechText" class="welcome-info__speech text-12 text-primary">{{ speechText }}</p>
     </div>
 
     <div class="welcome-info__right">
@@ -64,15 +64,12 @@ const speechText = computed(() => {
   -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;
 }
 

package/templates/h5/src/main.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import RokiUI from '@roki-h5/ui'
 import '@roki-h5/ui/style.css'
 import { setupRem } from '@/utils/rem'
+import pinia from '@/stores'
 import router from '@/router'
 import App from './App.vue'
 import '@/assets/styles/main.css'
@@ -10,7 +10,7 @@ import '@/assets/styles/main.css'
 setupRem()
 
 const app = createApp(App)
-app.use(createPinia())
+app.use(pinia)
 app.use(router)
 app.use(RokiUI)
 app.mount('#app')

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

@@ -0,0 +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 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/stores/index.ts

@@ -1,110 +1,7 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-import { getWelcomeMessage, type WelcomeMessageData } from '@/api/welcome'
+import { createPinia } from 'pinia'
 
-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())}`
-}
+const pinia = createPinia()
 
-/** 可通过 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 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,
-  }
-})
+export default pinia
+export { useAppStore } from './app'
+export type { AppStateUpdates } from './app'