af-mobile-client-vue3 1.3.13 → 1.3.14

package/package.json

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

package/src/components/data/UserDetail/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { RecordEntry } from './recordEntries'
 import type { BaseUser, ConfigItem } from './types'
-import useBoolean from '@af-mobile-client-vue3/hooks/useBoolean'
+import useLoading from '@af-mobile-client-vue3/hooks/useLoading'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import { Button as VanButton } from 'vant'
+import { Button as VanButton, Empty as VanEmpty, Icon as VanIcon, Loading as VanLoading } from 'vant'
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import InfoDisplay from '../InfoDisplay/index.vue'
@@ -16,6 +16,8 @@ interface Props {
   recordEntries?: RecordEntry[] // 记录入口配置（可选）
   businessButtonText?: string // 业务办理按钮文本，默认"业务办理"
   showBottomButtons?: boolean // 是否显示底部按钮区域，默认false
+  showHeader?: boolean // 是否显示头部导航栏，默认false
+  headerTitle?: string // 头部标题，默认"用户档案详情"
   getUserDetailApi?: (id: string) => Promise<BaseUser> // 自定义获取用户详情接口
   getRecentTimeApi?: (id: string) => Promise<Record<string, string>> // 自定义获取历史时间接口
 }
@@ -31,6 +33,8 @@ const props = withDefaults(defineProps<Props>(), {
   showRecentTime: false,
   businessButtonText: '业务办理',
   showBottomButtons: false,
+  showHeader: false,
+  headerTitle: '用户档案详情',
   recordEntries: () => defaultRecordEntries,
 })
 
@@ -39,14 +43,15 @@ const router = useRouter()
 
 // 用户数据
 const user = ref<BaseUser | null>(null)
-const userLoading = useBoolean(true)
+const { loading: userLoading, startLoading: startUserLoading, endLoading: endUserLoading } = useLoading(false)
+const userError = ref<string | null>(null)
 
 // 控制用户信息展开收起
 const showUserInfo = ref(false)
 
 // 最近记录
 const recentRecord = ref<Record<string, string>>({})
-const { bool: recentRecordLoading, setTrue: openRecentRecordLoading, setFalse: closeRecentRecordLoading } = useBoolean(false)
+const { loading: recentRecordLoading, startLoading: startRecentRecordLoading, endLoading: endRecentRecordLoading } = useLoading(false)
 
 // 状态类名
 const statusClass = computed(() => {
@@ -122,25 +127,33 @@ async function fetchUserDetail() {
     return
 
   try {
-    userLoading.setTrue()
+    startUserLoading()
+    userError.value = null
     const api = props.getUserDetailApi || getCacheUserDetail
     user.value = await api(props.userInfoId)
   }
   catch (error) {
     console.error('获取用户详情失败:', error)
+    userError.value = error instanceof Error ? error.message : '获取用户详情失败'
+    user.value = null
   }
   finally {
-    userLoading.setFalse()
+    endUserLoading()
   }
 }
 
+// 重试获取用户详情
+function retryFetchUserDetail() {
+  fetchUserDetail()
+}
+
 // 获取最近记录
 async function fetchRecentRecord() {
   if (!props.showRecentTime || !props.userInfoId)
     return
 
   try {
-    openRecentRecordLoading()
+    startRecentRecordLoading()
     const api = props.getRecentTimeApi || getRecentBusinessTime
     recentRecord.value = await api(props.userInfoId)
   }
@@ -149,7 +162,7 @@ async function fetchRecentRecord() {
     recentRecord.value = {}
   }
   finally {
-    closeRecentRecordLoading()
+    endRecentRecordLoading()
   }
 }
 
@@ -214,8 +227,40 @@ watch(() => props.userInfoId, async (newId) => {
 </script>
 
 <template>
-  <div v-if="user" class="user-detail">
-    <div class="user-detail__content">
+  <div class="user-detail" :class="{ 'has-header': props.showHeader }">
+    <!-- 头部导航栏 -->
+    <div v-if="props.showHeader" class="user-detail__header">
+      <div class="header-left">
+        <button type="button" class="back-button" @click="emit('close')">
+          <VanIcon name="arrow-left" />
+        </button>
+        <h3 class="header-title">
+          {{ props.headerTitle }}
+        </h3>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="userLoading" class="loading-container">
+      <VanLoading size="24px" vertical>
+        加载中...
+      </VanLoading>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="userError" class="error-container">
+      <VanEmpty
+        image="error"
+        :description="userError"
+      >
+        <VanButton type="primary" @click="retryFetchUserDetail">
+          重试
+        </VanButton>
+      </VanEmpty>
+    </div>
+
+    <!-- 用户详情内容 -->
+    <div v-else-if="user" class="user-detail__content">
       <!-- 用户基本信息卡片 -->
       <div class="user-info-card">
         <div
@@ -306,7 +351,7 @@ watch(() => props.userInfoId, async (newId) => {
 .user-detail {
   position: relative;
   background-color: #f5f7fa;
-
+  min-height: 100vh;
   padding-bottom: 70px;
 
   &__header {
@@ -326,6 +371,42 @@ watch(() => props.userInfoId, async (newId) => {
   &__content {
     padding: 16px;
   }
+
+  // 当有 header 时，为 content 腾出空间
+  &.has-header &__content {
+    padding-top: calc(16px + 46px); // 16px原有padding + 56px header高度
+  }
+}
+
+// 加载状态
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+  background-color: #fff;
+  margin: 16px;
+  border-radius: 8px;
+}
+
+// 错误状态
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  background-color: #fff;
+  margin: 16px;
+  border-radius: 8px;
+  padding: 32px 16px;
+}
+
+// 当有 header 时，调整加载和错误状态的位置
+.has-header {
+  .loading-container,
+  .error-container {
+    margin-top: calc(16px + 56px); // header高度 + 原有margin
+  }
 }
 
 .header-left {
@@ -439,7 +520,7 @@ watch(() => props.userInfoId, async (newId) => {
 }
 
 .user-info-body {
-  padding: 0 16px 16px;
+  padding: 16px 16px;
   border-top: 1px solid #f0f0f0;
 }
 

package/src/hooks/useLoading.ts

@@ -0,0 +1,16 @@
+import useBoolean from './useBoolean'
+
+/**
+ * 加载状态管理 Hook
+ * @param initValue 初始加载状态，默认为 false
+ * @returns {Object} 包含 loading 状态和控制方法
+ */
+export default function useLoading(initValue = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue)
+
+  return {
+    loading,
+    startLoading,
+    endLoading,
+  }
+}

package/src/views/component/UserDetailView/index.vue

@@ -104,6 +104,16 @@ function switchUser() {
               <span class="prop-type">boolean</span>
               <span class="prop-desc">是否显示底部按钮区域</span>
             </div>
+            <div class="props-row">
+              <span class="prop-name">showHeader</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否显示头部导航栏</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">headerTitle</span>
+              <span class="prop-type">string</span>
+              <span class="prop-desc">头部标题文本</span>
+            </div>
             <div class="props-row">
               <span class="prop-name">#bottom</span>
               <span class="prop-type">slot</span>

package/src/views/userRecords/OperateRecords.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import XExpandDetail from '@af-mobile-client-vue3/views/userRecords/operateRecordDetail/index.vue'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import XExpandDetail from '@/views/userRecords/operateRecordDetail/index.vue'
 // 简易crud表单测试——变更记录
 const configName = 'mobile_operateRecordCRUD'
 const serviceName = 'af-revenue'