af-mobile-client-vue3 1.5.83 → 1.5.85

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.5.83",
+  "version": "1.5.85",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/core/AppHeader/index.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import MessageNotification from '@af-mobile-client-vue3/components/core/MessageNotification/MessageNotification.vue'
+import { useSettingStore } from '@af-mobile-client-vue3/stores/modules/setting'
+import { Icon } from '@iconify/vue'
+import { computed, ref } from 'vue'
+
+interface NavigationStyle {
+  bgColor?: string
+  titleColor?: string
+  iconColor?: string
+}
+
+interface Props {
+  title?: string
+  showBack?: boolean
+  showMessage?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  showBack: true,
+  showMessage: true,
+})
+
+const emit = defineEmits<{
+  back: []
+}>()
+
+// 从 settingStore 获取导航样式配置
+const settingStore = useSettingStore()
+const navigationStyle = computed<NavigationStyle>(() => {
+  const config = (settingStore.getSetting() as any)?.navigationStyle
+  return {
+    bgColor: config?.bgColor || '#fff',
+    titleColor: config?.titleColor || '#000',
+    iconColor: config?.iconColor || '#666',
+  }
+})
+
+const headerRef = ref<HTMLElement>()
+
+function onBack() {
+  emit('back')
+}
+
+defineExpose({
+  getHeaderHeight: () => {
+    if (headerRef.value) {
+      const rect = headerRef.value.getBoundingClientRect()
+      const height = rect.height
+      if (height > 0) {
+        document.documentElement.style.setProperty('--system-header-height', `${height}px`)
+      }
+      return height
+    }
+    return 0
+  },
+})
+</script>
+
+<template>
+  <div ref="headerRef" class="app-header" :style="{ backgroundColor: navigationStyle.bgColor }">
+    <Icon
+      v-if="props.showBack"
+      icon="mdi:arrow-left"
+      :width="24"
+      :height="24"
+      size="1.15em"
+      :style="{ color: navigationStyle.iconColor }"
+      @click="onBack"
+    />
+    <span class="app-header-title" :style="{ color: navigationStyle.titleColor }">{{ props.title }}</span>
+    <div v-if="props.showMessage" class="app-header-action">
+      <MessageNotification :icon-color="navigationStyle.iconColor" />
+    </div>
+    <div v-else class="app-header-action-placeholder" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding-left: 16px;
+  padding-right: 16px;
+  border-bottom: 1px solid #ebedf0;
+}
+
+.app-header-title {
+  padding-left: 10px;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.app-header-action {
+  margin-left: auto;
+}
+
+.app-header-action-placeholder {
+  margin-left: auto;
+  width: 36px;
+}
+</style>

package/src/components/core/MessageNotification/MessageNotification.vue

@@ -8,6 +8,14 @@ import { closeWebSocket, initWebSocket } from './webSocket'
 import 'vant/es/badge/style'
 import 'vant/es/icon/style'
 
+interface Props {
+  iconColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconColor: '#666',
+})
+
 const userInfo = useUserStore().getUserInfo()
 
 // 未读消息数量
@@ -137,9 +145,9 @@ onUnmounted(() => {
 <template>
   <div ref="messageNotificationRef" class="message_icon" @click="showMessageDropdown">
     <VanBadge v-if="unreadCount > 0" :content="unreadCount" max="99">
-      <VanIcon name="bell" />
+      <VanIcon name="bell" :color="props.iconColor" />
     </VanBadge>
-    <VanIcon v-else name="bell" />
+    <VanIcon v-else name="bell" :color="props.iconColor" />
   </div>
 
   <div v-if="isShowMessageDropdown" class="message_overlay" @click="isShowMessageDropdown = false" />
@@ -313,7 +321,6 @@ onUnmounted(() => {
 
   .van-icon {
     font-size: 20px;
-    color: #666;
   }
 }
 </style>

package/src/stores/modules/setting.ts

@@ -26,9 +26,10 @@ export interface WebConfig {
   hiddenTraditionalLogin: boolean
   isFaceRecognition: boolean // 登录是否需要人脸识别
   intervalFaceRecognition: boolean // 登录是否需要开启定时人脸识别
-  faceIntervalMinutes: number // 定时时间
-  faceRetryCount: number // 重试次数
+  faceIntervalMinutes: number // 定时时间 单位分钟
+  faceRetryCount: number // 定时验证 重试次数
   getPlatformUser: boolean // 获取外部用户信息
+  navigationStyle: any // app顶部导航区域样式控制
 }
 
 //  存放 webConfig 中的 setting 配置

package/src/stores/modules/user.ts

@@ -247,6 +247,13 @@ export const useUserStore = defineStore('app-user', () => {
       }
       // save token
       setToken(data.access_token)
+      const LoginTicket = crypto.AESEncrypt(JSON.stringify(params), '3KMKqvgwR8ULbR8Z')
+      if (data.session && useSettingStore().getSetting().requestEncrypt) {
+        const k = encryptUtil.RSADecrypt(data.session as string)
+        localStorage.setItem('v4-session-key', k)
+        secureStorageWrite('v4-session-key', k)
+      }
+      Storage.set('LoginTicket', LoginTicket)
       return Promise.resolve(data)
     }
     catch (error) {

package/src/views/user/my/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { PhoneLocationStatus } from '@af-mobile-client-vue3/components/data/XOlMap/types'
-import MessageNotification from '@af-mobile-client-vue3/components/core/MessageNotification/MessageNotification.vue'
+import AppHeader from '@af-mobile-client-vue3/components/core/AppHeader/index.vue'
 import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import { openDrivingConfigPopup } from '@af-mobile-client-vue3/utils/driving/drivingUtils'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import { Dialog as vanDialog, Icon as vanIcon, Sticky as VanSticky, Switch as VanSwitch,
+import { Dialog as vanDialog, Icon as vanIcon, Switch as VanSwitch,
 } from 'vant'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -167,22 +167,7 @@ function syncAudioPlayEnabled() {
 <template>
   <main class="my_main">
     <!-- 顶部导航栏 -->
-    <VanSticky :offset-top="0">
-      <nav class="header_nav">
-        <div class="header_content">
-          <h1 class="main_title">
-            我的
-          </h1>
-          <!--        <div class="setting_section"> -->
-          <!--          <van-icon name="setting-o" class="setting-icon" /> -->
-          <!--        </div> -->
-          <div class="action_section">
-            <MessageNotification />
-          </div>
-        </div>
-      </nav>
-    </VanSticky>
-
+    <AppHeader title="工作台" :show-back="false" :show-message="true" />
     <!-- 主要内容区域 -->
     <div class="content">
       <!-- 用户信息卡片 -->