sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: 样式升级

Browse Source
This commit is contained in:
sion
2026-03-16 23:54:01 +08:00
parent 110fe62404
commit 4a5fdd3961
42 changed files with 1931 additions and 1404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
frontend/app/web-gold/src/views/user/Profile.vue
View File

@@ -1,17 +1,10 @@
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { Icon } from '@iconify/vue'
import { useUserStore } from '@/stores/user'
import { getPointRecordPage } from '@/api/pointRecord'
import {
UserOutlined,
DatabaseOutlined,
WalletOutlined,
PayCircleOutlined,
ClockCircleOutlined,
SafetyCertificateOutlined,
PlusOutlined,
MinusOutlined
} from '@ant-design/icons-vue'
import { Progress } from '@/components/ui/progress'
import { Button } from '@/components/ui/button'
const userStore = useUserStore()
@@ -87,12 +80,16 @@ async function fetchPointRecords() {
}
// 分页变化
function handleTableChange(page, pageSize) {
function handlePageChange(page) {
recordsPagination.current = page
recordsPagination.pageSize = pageSize
fetchPointRecords()
}
// 计算总页数
const totalPages = computed(() => {
return Math.ceil(recordsPagination.total / recordsPagination.pageSize)
})
// 格式化积分记录时间
function formatRecordTime(dateStr) {
if (!dateStr) return ''
@@ -154,17 +151,17 @@ onMounted(async () => {
<p class="page-subtitle">管理您的账户信息和资源使用情况</p>
</div>
<a-row :gutter="[24, 24]">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- 左侧：用户信息卡片 -->
<a-col :xs="24" :lg="8">
<a-card class="user-card" :bordered="false">
<div class="lg:col-span-4">
<div class="user-card">
<div class="user-info-header">
<div class="avatar-wrapper">
<img
v-if="userStore.displayAvatar"
class="user-avatar"
:src="userStore.displayAvatar"
alt="avatar"
<img
v-if="userStore.displayAvatar"
class="user-avatar"
:src="userStore.displayAvatar"
alt="avatar"
/>
<div v-else class="user-avatar-placeholder">
{{ userStore.displayName?.charAt(0) || 'U' }}
@@ -173,9 +170,9 @@ onMounted(async () => {
<h2 class="user-name">{{ userStore.displayName }}</h2>
<div class="user-role-badge">普通用户</div>
</div>
<a-divider />
<div class="divider"></div>
<div class="user-details">
<div class="detail-item">
<span class="detail-label">注册时间</span>
@@ -186,117 +183,117 @@ onMounted(async () => {
<span class="detail-value">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
</div>
</div>
</a-card>
</a-col>
</div>
</div>
<!-- 右侧：资源统计与活动 -->
<a-col :xs="24" :lg="16">
<div class="lg:col-span-8">
<!-- 资源概览卡片 -->
<a-row :gutter="[24, 24]">
<a-col :xs="24" :sm="12" :md="8">
<a-card class="stat-card" :bordered="false">
<div class="stat-icon-wrapper blue">
<DatabaseOutlined />
</div>
<div class="stat-content">
<div class="stat-label">存储空间</div>
<div class="stat-value">{{ formatStorage(usedStorage) }} <span class="stat-unit">/ {{ formatStorage(totalStorage) }}</span></div>
<a-progress
:percent="storagePercent"
:show-info="false"
:stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }"
size="small"
class="stat-progress"
/>
</div>
</a-card>
</a-col>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- 存储空间 -->
<div class="stat-card">
<div class="stat-icon-wrapper blue">
<Icon icon="lucide:database" class="text-2xl" />
</div>
<div class="stat-content">
<div class="stat-label">存储空间</div>
<div class="stat-value">{{ formatStorage(usedStorage) }} <span class="stat-unit">/ {{ formatStorage(totalStorage) }}</span></div>
<Progress :value="storagePercent" class="stat-progress h-2" />
</div>
</div>
<a-col :xs="24" :sm="12" :md="8">
<a-card class="stat-card" :bordered="false">
<div class="stat-icon-wrapper purple">
<WalletOutlined />
</div>
<div class="stat-content">
<div class="stat-label">剩余积分</div>
<div class="stat-value">{{ formatCredits(userStore.remainingPoints) }}</div>
<div class="stat-desc">用于生成消耗</div>
</div>
</a-card>
</a-col>
<!-- 剩余积分 -->
<div class="stat-card">
<div class="stat-icon-wrapper purple">
<Icon icon="lucide:wallet" class="text-2xl" />
</div>
<div class="stat-content">
<div class="stat-label">剩余积分</div>
<div class="stat-value">{{ formatCredits(userStore.remainingPoints) }}</div>
<div class="stat-desc">用于生成消耗</div>
</div>
</div>
<a-col :xs="24" :sm="12" :md="8">
<a-card class="stat-card" :bordered="false">
<div class="stat-icon-wrapper orange">
<PayCircleOutlined />
</div>
<div class="stat-content">
<div class="stat-label">账户余额</div>
<div class="stat-value">¥{{ formatMoney(userStore.totalRecharge) }}</div>
<div class="stat-desc">累计充值金额</div>
</div>
</a-card>
</a-col>
</a-row>
<!-- 账户余额 -->
<div class="stat-card">
<div class="stat-icon-wrapper orange">
<Icon icon="lucide:coins" class="text-2xl" />
</div>
<div class="stat-content">
<div class="stat-label">账户余额</div>
<div class="stat-value">¥{{ formatMoney(userStore.totalRecharge) }}</div>
<div class="stat-desc">累计充值金额</div>
</div>
</div>
</div>
<!-- 积分记录 -->
<a-card title="积分记录" :bordered="false" class="activity-card mt-6">
<template #extra>
<div class="activity-card mt-6">
<div class="activity-header">
<h3 class="activity-title">积分记录</h3>
<span class="record-count">共 {{ recordsPagination.total }} 条记录</span>
</template>
<a-spin :spinning="recordsLoading">
<a-list
v-if="pointRecords.length > 0"
item-layout="horizontal"
:data-source="pointRecords"
class="point-record-list"
>
<template #renderItem="{ item }">
<a-list-item>
<a-list-item-meta>
<template #avatar>
<div :class="['record-icon', item.type === 'increase' ? 'increase' : 'decrease']">
<PlusOutlined v-if="item.type === 'increase'" />
<MinusOutlined v-else />
</div>
</template>
<template #title>
<div class="record-title">
<span class="record-reason">{{ getBizTypeName(item.bizType) }}</span>
</div>
</template>
<template #description>
<div class="record-desc">
<span>{{ formatRecordTime(item.createTime) }}</span>
</div>
</template>
</a-list-item-meta>
<div :class="['record-amount', item.type === 'increase' ? 'increase' : 'decrease']">
{{ item.type === 'increase' ? '+' : '-' }}{{ Math.abs(item.pointAmount) }}
</div>
</a-list-item>
</template>
</a-list>
<a-pagination
v-if="recordsPagination.total > recordsPagination.pageSize"
v-model:current="recordsPagination.current"
v-model:page-size="recordsPagination.pageSize"
:total="recordsPagination.total"
:show-size-changer="false"
:show-total="total => `共 ${total} 条`"
size="small"
class="record-pagination"
@change="handleTableChange"
/>
<div v-if="pointRecords.length === 0 && !recordsLoading" class="empty-state">
<ClockCircleOutlined class="empty-icon" />
<p>暂无积分记录</p>
</div>
</a-spin>
</a-card>
</div>
</a-col>
</a-row>
<!-- 加载状态 -->
<div v-if="recordsLoading" class="loading-state">
<span class="custom-spinner"></span>
<span>加载中...</span>
</div>
<!-- 积分记录列表 -->
<div v-else-if="pointRecords.length > 0" class="point-record-list">
<div
v-for="item in pointRecords"
:key="item.id"
class="record-item"
>
<div class="record-left">
<div :class="['record-icon', item.type === 'increase' ? 'increase' : 'decrease']">
<Icon v-if="item.type === 'increase'" icon="lucide:plus" />
<Icon v-else icon="lucide:minus" />
</div>
<div class="record-info">
<div class="record-reason">{{ getBizTypeName(item.bizType) }}</div>
<div class="record-time">{{ formatRecordTime(item.createTime) }}</div>
</div>
</div>
<div :class="['record-amount', item.type === 'increase' ? 'increase' : 'decrease']">
{{ item.type === 'increase' ? '+' : '-' }}{{ Math.abs(item.pointAmount) }}
</div>
</div>
<!-- 分页 -->
<div v-if="recordsPagination.total > recordsPagination.pageSize" class="record-pagination">
<Button
variant="outline"
size="sm"
:disabled="recordsPagination.current === 1"
@click="handlePageChange(recordsPagination.current - 1)"
>
上一页
</Button>
<span class="page-info">
{{ recordsPagination.current }} / {{ totalPages }}
</span>
<Button
variant="outline"
size="sm"
:disabled="recordsPagination.current >= totalPages"
@click="handlePageChange(recordsPagination.current + 1)"
>
下一页
</Button>
</div>
</div>
<!-- 空状态 -->
<div v-else class="empty-state">
<Icon icon="lucide:clock" class="empty-icon" />
<p>暂无积分记录</p>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -330,6 +327,7 @@ onMounted(async () => {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
background: var(--color-bg-container, #fff);
height: 100%;
padding: 24px;
}
.user-info-header {
@@ -383,6 +381,12 @@ onMounted(async () => {
font-weight: 500;
}
.divider {
height: 1px;
background: var(--color-border-secondary, #f0f0f0);
margin: 16px 0;
}
.user-details {
padding: 16px 0;
}
@@ -411,7 +415,9 @@ onMounted(async () => {
.stat-card {
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
transition: transform 0.2s;
background: var(--color-bg-container, #fff);
padding: 20px;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
@@ -426,7 +432,6 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 16px;
}
@@ -477,6 +482,29 @@ onMounted(async () => {
margin-top: 24px;
}
/* Loading State */
.loading-state {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 0;
color: var(--color-text-secondary);
}
.custom-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(24, 144, 255, 0.2);
border-top-color: #1890ff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Empty State */
.empty-state {
text-align: center;
@@ -490,16 +518,26 @@ onMounted(async () => {
opacity: 0.5;
}
.security-icon {
font-size: 24px;
color: #52c41a;
margin-right: 12px;
}
/* Point Record List */
.activity-card {
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
background: var(--color-bg-container, #fff);
padding: 20px;
}
.activity-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.activity-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.record-count {
@@ -512,6 +550,24 @@ onMounted(async () => {
overflow-y: auto;
}
.record-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
}
.record-item:last-child {
border-bottom: none;
}
.record-left {
display: flex;
align-items: center;
gap: 12px;
}
.record-icon {
width: 36px;
height: 36px;
@@ -532,30 +588,23 @@ onMounted(async () => {
color: #ff4d4f;
}
.record-title {
.record-info {
display: flex;
align-items: center;
gap: 8px;
flex-direction: column;
gap: 2px;
}
.record-reason {
font-weight: 500;
color: var(--color-text);
font-size: 14px;
}
.record-desc {
display: flex;
gap: 12px;
.record-time {
font-size: 12px;
color: var(--color-text-secondary);
}
.record-biz-type {
padding: 1px 6px;
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
}
.record-amount {
font-size: 18px;
font-weight: 600;
@@ -570,7 +619,17 @@ onMounted(async () => {
}
.record-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
text-align: center;
padding-top: 16px;
border-top: 1px solid var(--color-border-secondary, #f0f0f0);
}
.page-info {
font-size: 14px;
color: var(--color-text-secondary);
}
</style>