af-mobile-client-vue3 1.3.13 → 1.3.15

package/.claude/settings.local.json

@@ -1,9 +1,7 @@
 {
   "permissions": {
     "allow": [
-      "Bash(pnpm typecheck:*)",
-      "Bash(pnpm lint:*)",
-      "mcp__ide__getDiagnostics"
+      "Bash(rm:*)"
     ],
     "deny": []
   }

package/package.json

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

package/src/components/data/CardHeader/CardContainer.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import CardHeader from './CardHeader.vue'
+
+const props = defineProps({
+  shadow: {
+    type: Boolean,
+    default: true,
+  },
+  className: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
+  defaultCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isCollapsed = ref(props.defaultCollapsed)
+
+function handleToggle(collapsed: boolean) {
+  isCollapsed.value = collapsed
+}
+
+// 过渡动画钩子函数
+function onEnter(el: HTMLElement) {
+  el.style.height = '0'
+  el.style.overflow = 'hidden'
+  el.style.opacity = '0'
+  el.style.transformOrigin = 'top'
+  el.style.transform = 'scaleY(0.8)'
+
+  // 触发回流
+  void el.offsetHeight
+
+  el.style.transition = 'height 0.2s ease, opacity 0.2s ease, transform 0.2s ease'
+  el.style.height = `${el.scrollHeight}px`
+  el.style.opacity = '1'
+  el.style.transform = 'scaleY(1)'
+}
+
+function onAfterEnter(el: HTMLElement) {
+  el.style.height = ''
+  el.style.overflow = ''
+  el.style.transition = ''
+  el.style.transformOrigin = ''
+}
+
+function onBeforeLeave(el: HTMLElement) {
+  el.style.height = `${el.scrollHeight}px`
+  el.style.overflow = 'hidden'
+  el.style.transformOrigin = 'top'
+
+  // 触发回流
+  void el.offsetHeight
+}
+
+function onLeave(el: HTMLElement) {
+  el.style.transition = 'height 0.2s ease, opacity 0.2s ease, transform 0.2s ease'
+  el.style.height = '0'
+  el.style.opacity = '0'
+  el.style.transform = 'scaleY(0.8)'
+}
+watch(() => props.defaultCollapsed, (newVal) => {
+  isCollapsed.value = newVal
+})
+</script>
+
+<template>
+  <div class="card-container" :class="[shadow ? 'with-shadow' : '', className]">
+    <CardHeader
+      v-if="title"
+      :title="title"
+      :collapsible="collapsible"
+      :default-collapsed="defaultCollapsed"
+      @toggle="handleToggle"
+    />
+    <transition
+      name="collapse-transition"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div v-show="!isCollapsed" class="card-content">
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card-container {
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  padding: 10px;
+  // margin-bottom: 0;
+
+  &.with-shadow {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.card-content {
+  will-change: height, opacity, transform;
+  transform-origin: top;
+}
+</style>

package/src/components/data/CardHeader/CardHeader.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
+  defaultCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['toggle'])
+
+const isCollapsed = ref(props.defaultCollapsed)
+
+function toggleCollapse() {
+  if (props.collapsible) {
+    isCollapsed.value = !isCollapsed.value
+    emit('toggle', isCollapsed.value)
+  }
+}
+</script>
+
+<template>
+  <div class="card-header" @click="toggleCollapse">
+    <div class="card-header__title">
+      <slot name="icon">
+        <van-icon v-if="icon" class="card-header__icon" :name="icon" />
+      </slot>
+      <h4 class="card-header__text">
+        {{ title }}
+      </h4>
+    </div>
+    <div class="card-header__extra">
+      <slot name="extra" />
+      <van-icon
+        v-if="collapsible"
+        class="card-header__collapse-icon"
+        :name="isCollapsed ? 'arrow-down' : 'arrow-up'"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #f0f0f0;
+
+  &__title {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  &__text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+  }
+
+  &__extra {
+    display: flex;
+    align-items: center;
+  }
+
+  &__collapse-icon {
+    margin-left: 8px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+
+    &:hover {
+      color: #333;
+    }
+  }
+}
+</style>

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'