4251a5a451
- 扩展 Icon.vue 组件，新增 60+ 图标路径 - 导航类: arrowRight, arrowLeft, arrowUp, arrowDown, chevronUp, externalLink - 状态类: checkCircle, xCircle, exclamationCircle, exclamationTriangle, infoCircle - 用户类: user, userCircle, userPlus, users - 文档类: document, clipboard, copy, inbox - 操作类: download, upload, filter, sort - 安全类: key, lock, shield - UI类: menu, calendar, home, terminal, gift, creditCard, mail - 数据类: chartBar, trendingUp, database, cube - 其他: bolt, sparkles, cloud, server, sun, moon, book 等 - 重构 56 个 Vue 组件，用 Icon 组件替换内联 SVG - 净减少约 2200 行代码 - 提升代码可维护性和一致性 - 统一图标样式和尺寸管理
59 lines
2.1 KiB
Vue
59 lines
2.1 KiB
Vue
<template>
|
|
<div class="card overflow-hidden">
|
|
<div
|
|
class="border-b border-gray-100 bg-gradient-to-r from-primary-500/10 to-primary-600/5 px-6 py-5 dark:border-dark-700 dark:from-primary-500/20 dark:to-primary-600/10"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<!-- Avatar -->
|
|
<div
|
|
class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
|
|
>
|
|
{{ user?.email?.charAt(0).toUpperCase() || 'U' }}
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
|
|
{{ user?.email }}
|
|
</h2>
|
|
<div class="mt-1 flex items-center gap-2">
|
|
<span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
|
|
{{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
|
|
</span>
|
|
<span
|
|
:class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
|
|
>
|
|
{{ user?.status }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<Icon name="mail" size="sm" class="text-gray-400 dark:text-gray-500" />
|
|
<span class="truncate">{{ user?.email }}</span>
|
|
</div>
|
|
<div
|
|
v-if="user?.username"
|
|
class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
|
|
>
|
|
<Icon name="user" size="sm" class="text-gray-400 dark:text-gray-500" />
|
|
<span class="truncate">{{ user.username }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import Icon from '@/components/icons/Icon.vue'
|
|
import type { User } from '@/types'
|
|
|
|
defineProps<{
|
|
user: User | null
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
</script>
|