291 lines
13 KiB
Vue
291 lines
13 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-base-100 p-3 md:p-6">
|
||
<BreadcrumbHeader />
|
||
|
||
<div class="card shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl mb-6" >
|
||
<div :class="['card-body text-white', getGradientClass()]">
|
||
<div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
|
||
<div class="avatar">
|
||
<div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full ring ring-white ring-offset-base-100 ring-offset-2"
|
||
v-if="!user?.avatar_url">
|
||
<div
|
||
class="bg-white text-primary-content font-bold flex items-center justify-center w-full h-full">
|
||
<span class="text-2xl sm:text-3xl">{{ user?.username?.[0]?.toUpperCase() }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full ring ring-white ring-offset-base-100 ring-offset-2"
|
||
v-else>
|
||
<img :src="user?.avatar_url" :alt="user?.name" />
|
||
</div>
|
||
</div>
|
||
<div class="text-center sm:text-left">
|
||
<h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight">
|
||
<span class="mr-2">👋 </span>{{ getTimeOfDay() }}，{{ user?.name || user?.username }}
|
||
</h1>
|
||
<p class="text-white/80 text-base sm:text-lg mt-1 font-medium">欢迎回到您的个人仪表盘</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
|
||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-200">
|
||
<div class="card-body p-4 md:p-6">
|
||
<h2 class="card-title text-lg md:text-xl font-bold flex items-center gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6 text-base-content"
|
||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
</svg>
|
||
基本信息
|
||
</h2>
|
||
<div class="divider my-1"></div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">用户名</span>
|
||
<span class="badge">{{ user?.username }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">显示名称</span>
|
||
<span class="badge">{{ user?.name || '-' }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">邮箱</span>
|
||
<span class="badge truncate max-w-full">{{ user?.email || '-' }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">角色</span>
|
||
<span class="badge" :class="user?.role > 0 ? 'badge-warning' : 'badge-ghost'">{{
|
||
getRoleName(user?.role || 0) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-200">
|
||
<div class="card-body p-4 md:p-6">
|
||
<h2 class="card-title text-lg md:text-xl font-bold flex items-center gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6 text-base-content"
|
||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
账户状态
|
||
</h2>
|
||
<div class="divider my-1"></div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">状态</span>
|
||
<span :class="[
|
||
'badge badge-outline',
|
||
user?.active ? 'badge-success' : 'badge-error'
|
||
]">
|
||
{{ user?.active ? 'Active' : 'Inactive' }}
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">时区</span>
|
||
<span class="badge ">{{ user?.timezone || 'UTC' }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">语言</span>
|
||
<span class="badge">{{ user?.language || 'en' }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-base-content/70 w-20">最后活动</span>
|
||
<span class="badge">{{ getLastActive() }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-200">
|
||
<div class="card-body p-4 md:p-6">
|
||
<h2 class="card-title text-lg md:text-xl font-bold flex items-center gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6 text-base-content"
|
||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||
</svg>
|
||
配额信息
|
||
</h2>
|
||
<div class="divider my-1"></div>
|
||
<div class="space-y-4">
|
||
<div v-if="user?.unlimited_quota">
|
||
<div class="flex flex-wrap justify-between mb-2">
|
||
<span class="font-semibold text-base-content/70">使用量</span>
|
||
<span class="badge badge-lg text-success">无限制</span>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="flex flex-wrap justify-between mb-2">
|
||
<span class="font-semibold text-base-content/70">使用量</span>
|
||
<span :class="getQuotaColor">
|
||
{{ formatQuota(user?.used_quota || 0, user?.quota||0) }}
|
||
</span>
|
||
</div>
|
||
<progress class="progress w-full"
|
||
:class="getQuotaColorClass"
|
||
:value="quotaPercentage"
|
||
max="100"></progress>
|
||
</div>
|
||
|
||
<div class="stats stats-vertical shadow w-full bg-base-100">
|
||
<div class="stat p-2 md:p-4">
|
||
<div class="stat-title text-xs md:text-sm">创建时间</div>
|
||
<div class="stat-value text-sm md:text-base">{{ formatDateTime(user?.created_at) }}
|
||
</div>
|
||
</div>
|
||
<div class="stat p-2 md:p-4">
|
||
<div class="stat-title text-xs md:text-sm">更新时间</div>
|
||
<div class="stat-value text-sm md:text-base">{{ formatDateTime(user?.updated_at) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed } from 'vue'
|
||
import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
|
||
import { useAuthStore } from '@/stores/auth';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
const authStore = useAuthStore();
|
||
const user = computed(() => authStore.user);
|
||
|
||
onMounted(async () => {
|
||
if (!authStore.isLoggedIn) {
|
||
router.push('/login');
|
||
};
|
||
await authStore.refreshProfile();
|
||
});
|
||
|
||
|
||
const getTimeOfDay = () => {
|
||
const hour = new Date().getHours();
|
||
if (hour < 12) return '早上好';
|
||
if (hour < 18) return '下午好';
|
||
return '晚上好';
|
||
};
|
||
|
||
const formatQuota = (used, total) => {
|
||
if (total === 0) return '无限制';
|
||
|
||
// 格式化金额
|
||
const formatCurrency = (amount) => {
|
||
if (amount === 0) return '$0';
|
||
return `$${amount.toFixed(2)}`;
|
||
};
|
||
|
||
const percentage = (used / total) * 100;
|
||
return `${formatCurrency(used)} / ${formatCurrency(total)} (${percentage.toFixed(1)}%)`;
|
||
};
|
||
|
||
|
||
const getRoleName = (role) => {
|
||
switch (role) {
|
||
case 20: return 'Root';
|
||
case 10: return 'Admin';
|
||
default: return 'User';
|
||
}
|
||
};
|
||
|
||
// 格式化日期时间
|
||
function formatDateTime(unixTimestamp) {
|
||
// 如果时间戳不存在或为0，返回'未知'
|
||
if (!unixTimestamp) return '未知';
|
||
|
||
// 将Unix时间戳转换为毫秒
|
||
const date = new Date(unixTimestamp * 1000);
|
||
|
||
// 获取日期和时间的各个部分
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
|
||
// 返回格式化的日期时间字符串
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||
}
|
||
|
||
// 获取背景渐变类
|
||
const getGradientClass = () => {
|
||
const hour = new Date().getHours();
|
||
if (hour < 6) return 'bg-gradient-to-r from-[#e0f2f1] to-[#1a1a1a] bg-opacity-50 backdrop-blur-lg'; // 深夜到黎明：柔和的薄荷绿渐变到微黑
|
||
if (hour < 12) return 'bg-gradient-to-r from-[#8cc7f1] to-[#cf6f26] bg-opacity-50 backdrop-blur-lg'; // 早晨：温暖的杏仁色渐变到深灰
|
||
if (hour < 18) return 'bg-gradient-to-r from-[#e3f2fd] to-[#ad4212] bg-opacity-50 backdrop-blur-lg'; // 下午：清新的天空蓝渐变到近黑
|
||
return 'bg-gradient-to-r from-[#000000] to-[#434343] bg-opacity-50 backdrop-blur-lg'; // 夜晚：纯黑到深灰
|
||
};
|
||
|
||
|
||
|
||
// 计算配额百分比
|
||
const quotaPercentage = computed(() => {
|
||
if (!user.value || user.value.unlimited_quota || !user.value.quota) return 0;
|
||
return (user.value.used_quota / user.value.quota) * 100;
|
||
});
|
||
|
||
// 获取配额颜色
|
||
const getQuotaColor = computed(() => {
|
||
const percentage = quotaPercentage.value;
|
||
if (percentage < 50) return 'text-success';
|
||
if (percentage < 80) return 'text-warning';
|
||
return 'text-error';
|
||
});
|
||
|
||
// 获取配额颜色类
|
||
const getQuotaColorClass = computed(() => {
|
||
const percentage = quotaPercentage.value;
|
||
if (percentage < 50) return 'progress-success';
|
||
if (percentage < 80) return 'progress-warning';
|
||
return 'progress-error';
|
||
});
|
||
|
||
// 用户最后活动时间
|
||
const getLastActive = () => {
|
||
if (!user.value || !user.value?.updated_at) return '未知';
|
||
|
||
const lastActive = new Date(user.value.updated_at * 1000);
|
||
const now = new Date();
|
||
const diff = now - lastActive;
|
||
|
||
// 转换为天/小时/分钟
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
if (days > 0) return `${days}天前`;
|
||
|
||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||
if (hours > 0) return `${hours}小时前`;
|
||
|
||
const minutes = Math.floor(diff / (1000 * 60));
|
||
if (minutes > 0) return `${minutes}分钟前`;
|
||
|
||
return '刚刚';
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 添加一些过渡动画 */
|
||
.card {
|
||
transform-origin: center;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
/* 确保响应式设计中文本不会溢出 */
|
||
.badge {
|
||
white-space: normal;
|
||
height: auto;
|
||
min-height: 1.6rem;
|
||
line-height: 1.2;
|
||
}
|
||
</style> |