下面是一个使用Quasar组合式API实现的用户详情组件，满足企业级要求，采用TypeScript并避免any类型

下面是一个使用Quasar组合式API实现的用户详情组件，满足企业级要求，采用TypeScript并避免any类型：

```vue
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { useAuthStore } from 'stores/auth'
import {
QAvatar,
QBadge,
QBtn,
QCard,
QCardSection,
QIcon,
QItem,
QItemLabel,
QItemSection,
QList,
QPage,
QSeparator,
QSkeleton,
QSpace,
QTimeline,
QTimelineEntry
} from 'quasar'
import type { AxiosResponse } from 'axios'
import { type UserProfile, UserRole } from 'src/types/auth/profiles'
import { apiClient } from 'src/services/axios'
import { date } from 'quasar'
import { logSecurityEvent } from 'src/services/audit'

const $q = useQuasar()
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 状态管理
const loading = ref(true)
const error = ref<string | null>(null)
const userProfile = ref<UserProfile | null>(null)
const activityLogs = ref<Array<{action: string; timestamp: string}>>([])

// 获取用户ID
const userId = computed(() => route.params.userId as string)

// 权限检查
const isAdmin = computed(() => {
return (
authStore.userRole === UserRole.SYSTEM_ADMIN ||
authStore.userRole === UserRole.SECURITY_ADMIN
)
})

const isCurrentUser = computed(() => {
return authStore.userId === userId.value
})

// 获取用户详情
const fetchUserProfile = async () => {
try {
loading.value = true
error.value = null

const response: AxiosResponse<UserProfile> = await apiClient.get(
`/users/profile/${userId.value}/`
)

userProfile.value = response.data

// 模拟活动日志数据
activityLogs.value = [
{ action: '更新了个人信息', timestamp: '2025-08-01T14:30:00Z' },
{ action: '修改了密码', timestamp: '2025-07-25T09:15:00Z' },
{ action: '登录系统', timestamp: '2025-07-20T08:45:00Z' },
]

// 记录审计日志
logSecurityEvent('USER_PROFILE_VIEWED', {
targetUserId: userId.value,
viewerId: authStore.userId
})
} catch (err) {
handleProfileError(err)
} finally {
loading.value = false
}
}

// 错误处理
const handleProfileError = (err: unknown) => {
let errorMessage = '获取用户信息失败'

if (typeof err === 'object' && err !== null) {
if ('response' in err) {
const axiosError = err as { response?: { status: number; data?: unknown } }

switch (axiosError.response?.status) {
case 403:
errorMessage = '您没有权限查看此用户信息'
break
case 404:
errorMessage = '用户不存在或已被删除'
break
case 500:
errorMessage = '服务器错误，请稍后重试'
break
default:
if (axiosError.response?.data) {
const errorData = axiosError.response.data as { detail?: string }
errorMessage = errorData.detail || errorMessage
}
}
} else if ('message' in err) {
errorMessage = (err as { message: string }).message
}
}

error.value = errorMessage
$q.notify({
type: 'negative',
message: errorMessage,
position: 'top',
timeout: 5000
})
}

// 状态标签颜色
const getStatusColor = (status: string) => {
const statusMap: Record<string, string> = {
'正常': 'positive',
'已锁定': 'negative',
'已停用': 'grey',
'密码过期': 'warning',
'已删除': 'dark'
}

return statusMap[status] || 'info'
}

// 编辑用户
const editUser = () => {
router.push(`/profile/${userId.value}/edit`)
}

// 返回列表
const backToList = () => {
router.push('/users')
}

// 初始化加载
onMounted(() => {
if (!userId.value) {
error.value = '无效的用户ID'
return
}

void fetchUserProfile()
})
</script>

<template>
<QPage class="q-pa-lg">
<!-- 加载状态 -->
<template v-if="loading">
<div class="q-pa-xl text-center">
<QSkeleton type="QAvatar" size="100px" class="q-mb-md" />
<QSkeleton type="text" width="200px" class="q-mb-sm" />
<QSkeleton type="text" width="150px" />

<div class="row q-mt-xl q-gutter-md justify-center">
<div v-for="n in 3" :key="n" class="col-3">
<QSkeleton type="rect" height="100px" />
</div>
</div>
</div>
</template>

<!-- 错误状态 -->
<template v-else-if="error">
<div class="text-center q-pa-xl">
<QIcon name="error_outline" size="xl" color="negative" class="q-mb-md" />
<div class="text-h6 q-mb-md text-negative">{{ error }}</div>
<QBtn label="返回用户列表" color="primary" @click="backToList" />
</div>
</template>

<!-- 用户详情内容 -->
<template v-else-if="userProfile">
<div class="row justify-between items-center q-mb-lg">
<div class="text-h4">用户详情</div>
<div>
<QBtn
label="返回列表"
color="grey-7"
flat
class="q-mr-sm"
@click="backToList"
/>
<QBtn
v-if="isAdmin || isCurrentUser"
label="编辑信息"
color="primary"
icon="edit"
@click="editUser"
/>
</div>
</div>

<QCard class="q-mb-lg">
<QCardSection>
<div class="row items-center q-col-gutter-lg">
<!-- 头像区域 -->
<div class="col-auto">
<QAvatar size="120px">
<img
:src="userProfile.avatar || 'default-avatar.png'"
:alt="userProfile.nickname"
>
</QAvatar>
</div>

<!-- 基本信息 -->
<div class="col">
<div class="text-h5 q-mb-sm">
{{ userProfile.nickname }}
<QBadge
:label="userProfile.status_display"
:color="getStatusColor(userProfile.status_display)"
class="q-ml-sm"
/>
</div>

<div class="text-subtitle1 text-grey-7 q-mb-md">
{{ userProfile.username }} · {{ userProfile.role_display }}
</div>

<div class="row q-col-gutter-lg">
<div class="col-auto">
<div class="text-caption text-grey-6">用户ID</div>
<div>{{ userProfile.id }}</div>
</div>

<div class="col-auto">
<div class="text-caption text-grey-6">部门</div>
<div>{{ userProfile.department_info?.name || '未分配' }}</div>
</div>

<div class="col-auto">
<div class="text-caption text-grey-6">手机</div>
<div>{{ userProfile.phone || '未绑定' }}</div>
</div>

<div class="col-auto">
<div class="text-caption text-grey-6">邮箱</div>
<div>{{ userProfile.email || '未绑定' }}</div>
</div>
</div>
</div>
</div>
</QCardSection>

<QSeparator />

<!-- 详细信息 -->
<QCardSection>
<div class="row q-col-gutter-lg">
<div class="col-12 col-md-6">
<div class="text-h6 q-mb-md">账户信息</div>
<QList bordered separator>
<QItem>
<QItemSection>
<QItemLabel caption>创建时间</QItemLabel>
<QItemLabel>
{{ date.formatDate(userProfile.created_at, 'YYYY-MM-DD HH:mm:ss') }}
</QItemLabel>
</QItemSection>
</QItem>

<QItem>
<QItemSection>
<QItemLabel caption>最后登录</QItemLabel>
<QItemLabel>
{{ userProfile.last_login ?
date.formatDate(userProfile.last_login, 'YYYY-MM-DD HH:mm:ss') :
'从未登录' }}
</QItemLabel>
</QItemSection>
</QItem>

<QItem>
<QItemSection>
<QItemLabel caption>登录次数</QItemLabel>
<QItemLabel>
{{ userProfile.login_count || 0 }} 次
</QItemLabel>
</QItemSection>
</QItem>

<QItem>
<QItemSection>
<QItemLabel caption>密码更新时间</QItemLabel>
<QItemLabel>
{{ userProfile.password_updated_at ?
date.formatDate(userProfile.password_updated_at, 'YYYY-MM-DD') :
'未知' }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>

<div class="col-12 col-md-6">
<div class="text-h6 q-mb-md">安全信息</div>
<QList bordered separator>
<QItem>
<QItemSection>
<QItemLabel caption>双因素认证</QItemLabel>
<QItemLabel>
<QIcon
:name="userProfile.mfa_enabled ? 'check_circle' : 'cancel'"
:color="userProfile.mfa_enabled ? 'positive' : 'negative'"
class="q-mr-xs"
/>
{{ userProfile.mfa_enabled ? '已启用' : '未启用' }}
</QItemLabel>
</QItemSection>
</QItem>

<QItem>
<QItemSection>
<QItemLabel caption>最后活动时间</QItemLabel>
<QItemLabel>
{{ userProfile.last_active ?
date.formatDate(userProfile.last_active, 'YYYY-MM-DD HH:mm') :
'无记录' }}
</QItemLabel>
</QItemSection>
</QItem>

<QItem>
<QItemSection>
<QItemLabel caption>账户锁定</QItemLabel>
<QItemLabel>
<QIcon
:name="userProfile.is_locked ? 'lock' : 'lock_open'"
:color="userProfile.is_locked ? 'negative' : 'positive'"
class="q-mr-xs"
/>
{{ userProfile.is_locked ? '已锁定' : '未锁定' }}
</QItemLabel>
</QItemSection>
</QItem>

<QItem>
<QItemSection>
<QItemLabel caption>IP限制</QItemLabel>
<QItemLabel>
{{ userProfile.ip_restriction ? '已启用' : '未启用' }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
</div>
</QCardSection>
</QCard>

<!-- 活动时间线 -->
<div class="text-h5 q-mt-xl q-mb-md">最近活动</div>
<QCard>
<QCardSection>
<QTimeline color="secondary" layout="dense" v-if="activityLogs.length > 0">
<QTimelineEntry
v-for="(log, index) in activityLogs"
:key="index"
:title="log.action"
:subtitle="date.formatDate(log.timestamp, 'YYYY-MM-DD HH:mm')"
icon="history"
color="primary"
/>
</QTimeline>

<div v-else class="text-center text-grey-7 q-py-xl">
<QIcon name="history" size="xl" class="q-mb-sm" />
<div>暂无活动记录</div>
</div>
</QCardSection>
</QCard>
</template>
</QPage>
</template>

<style lang="scss" scoped>
.q-card {
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

&__section {
padding: 24px;
}
}

.q-timeline {
padding: 0 16px;

&::before {
left: 8px !important;
}

&-entry {
padding-bottom: 24px;

&__title {
font-weight: 500;
font-size: 1rem;
}

&__subtitle {
font-size: 0.85rem;
color: #6c757d;
}
}
}
</style>
```

### 主要功能说明：

1. **组合式API与TypeScript**：
- 使用`<script setup lang="ts">`语法
- 明确定义类型（如`UserProfile`）
- 避免使用any类型

2. **企业级特性**：
- 完整的加载状态管理（骨架屏）
- 详细的错误处理机制
- 权限控制（管理员/当前用户）
- 审计日志记录（`logSecurityEvent`）
- 响应式设计

3. **数据展示**：
- 用户基本信息（头像、昵称、状态）
- 账户信息（创建时间、最后登录等）
- 安全信息（MFA、账户锁定等）
- 活动时间线（最近操作记录）

4. **交互功能**：
- 编辑用户信息
- 返回用户列表
- 响应式布局适配不同屏幕

5. **UI组件**：
- 使用Quasar的卡片、列表、时间线等组件
- 状态徽章颜色编码
- 骨架屏加载效果
- 合理的空间布局和视觉层次

这个组件可以独立工作，只需将其放置在适当的路由位置（如`/profile/:userId`），就能与之前的用户列表组件无缝集成。