af-mobile-client-vue3 1.5.82 → 1.5.84

package/.env.development

@@ -1 +1,2 @@
 NODE_ENV=development
+VITE_RSA_PRIVATE_KEY=MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAIRrmftLDHCQqREEJ132Onu+W3vmFbdF7QD751SrcDDGDTfzuz1zBuElvkHhuDBb7KZkXrCIe+MhvX2IvxcLObl3faX+evYlnfj2HRbF0hIpQLuIq22tL06ZcV5w7wqLxUZRpFElIFm8gZTkUvfKXVuHw89e4daDVhU5hK3GHNGTAgMBAAECgYABiINrFaE1E8pkBYx1JJA5yuhL73aUktfd2TeCU00vFg6kyrWCI85Sa2RKu/6CJNZWeOFgdubEUv7a22tRrNIZb3yUMaqtTwSso78mspIOJqjWXTkTH9WPElfTcdpdIse/lgZtPz6egxkuhadSvwrM9Y6NgusiW/5+x95Ct08iOQJBAN5aK+7uISURvGQj2EaRtgGEd8+d4oHl+BYvvTeG3qSgUikHQW3j0sp4gXPw2kxw6sjVgLFOc4FB6LGqwzOTzokCQQCYdYG8ty3Uo/ebUlNzeJFxHXjy/KvBSytAUzAXkRu3nZrkEaPQsi3dgOkZgk+F1fMDzfQ4EbDIU6xvqOoZXHg7AkATCW9XfoXR8anKfRMoP5Nwn9HOMbtR2cmaxK2TknV/bMZ8AsYETYwfj5+tuIJIJybC2RyykX/sIiN1CqS5xr7ZAkArj19rMRdaKyMi8MnBM1Cy9g3Jt2HHj5ejAGG8SgyWUOShh1y70z0BjcSMMkxQXAncK2s83ekZw7aADM4eQupjAkARRgTwwMOnn3IoKmQusKhZk0uxilZ4Zc2LH6Z4GiWnvteM0W8Zw4Z1lJUcjgQq3dGqL2RdmzeQZ+HgPIOXrZVK

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.5.82",
+  "version": "1.5.84",
   "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>