fix: 系统公告与尊享额度明细
This commit is contained in:
Gsh
@@ -110,6 +110,9 @@ function handleModelClick(item: GetSessionListVO) {
|
||||
规则3：彩色流光（尊享/高级）
|
||||
-------------------------------- */
|
||||
function getModelStyleClass(modelName: any) {
|
||||
if (!modelName) {
|
||||
return;
|
||||
}
|
||||
const name = modelName.toLowerCase();
|
||||
|
||||
// 规则3：彩色流光
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,590 @@
|
||||
<script lang="ts" setup>
|
||||
import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
|
||||
import { showProductPackage } from '@/utils/product-package.ts';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
packageData: {
|
||||
totalQuota: number;
|
||||
usedQuota: number;
|
||||
remainingQuota: number;
|
||||
usagePercentage: number;
|
||||
packageName: string;
|
||||
expireDate: string;
|
||||
};
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
refresh: [];
|
||||
}>();
|
||||
|
||||
// 计算属性
|
||||
const usagePercent = computed(() => {
|
||||
if (props.packageData.totalQuota === 0)
|
||||
return 0;
|
||||
return Number(((props.packageData.usedQuota / props.packageData.totalQuota) * 100).toFixed(2));
|
||||
});
|
||||
|
||||
const remainingPercent = computed(() => {
|
||||
if (props.packageData.totalQuota === 0)
|
||||
return 0;
|
||||
return Number(((props.packageData.remainingQuota / props.packageData.totalQuota) * 100).toFixed(2));
|
||||
});
|
||||
|
||||
// 获取进度条颜色（基于剩余百分比）
|
||||
const progressColor = computed(() => {
|
||||
const percent = remainingPercent.value;
|
||||
if (percent <= 10)
|
||||
return '#f56c6c'; // 红色 - 剩余很少
|
||||
if (percent <= 30)
|
||||
return '#e6a23c'; // 橙色 - 剩余较少
|
||||
return '#67c23a'; // 绿色 - 剩余充足
|
||||
});
|
||||
|
||||
// 格式化数字 - 转换为万为单位
|
||||
function formatNumber(num: number): string {
|
||||
if (num === 0)
|
||||
return '0';
|
||||
const wan = num / 10000;
|
||||
// 保留2位小数，去掉末尾的0
|
||||
return wan.toFixed(2).replace(/\.?0+$/, '');
|
||||
}
|
||||
|
||||
// 格式化原始数字（带千分位）
|
||||
function formatRawNumber(num: number): string {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
||||
function onProductPackage() {
|
||||
showProductPackage();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="premium-package-info">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<el-icon class="header-main-icon">
|
||||
<TrophyBase />
|
||||
</el-icon>
|
||||
<div class="header-titles">
|
||||
<h2 class="main-title">
|
||||
尊享服务
|
||||
</h2>
|
||||
<p class="sub-title">
|
||||
Premium Service
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="default"
|
||||
@click="emit('refresh')"
|
||||
>
|
||||
<el-icon><i-ep-refresh /></el-icon>
|
||||
刷新数据
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 套餐信息卡片 -->
|
||||
<el-card class="package-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">
|
||||
<el-icon class="header-icon">
|
||||
<Coin />
|
||||
</el-icon>
|
||||
<div class="header-text">
|
||||
<span class="header-title">尊享TOKEN包总览</span>
|
||||
<span class="header-subtitle">{{ packageData.packageName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="package-content">
|
||||
<!-- 统计数据 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item total">
|
||||
<div class="stat-label">
|
||||
购买总额度
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ formatNumber(packageData.totalQuota) }}
|
||||
</div>
|
||||
<div class="stat-unit">
|
||||
万 Tokens
|
||||
</div>
|
||||
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
|
||||
({{ formatRawNumber(packageData.totalQuota) }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item used">
|
||||
<div class="stat-label">
|
||||
已用额度
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ formatNumber(packageData.usedQuota) }}
|
||||
</div>
|
||||
<div class="stat-unit">
|
||||
万 Tokens
|
||||
</div>
|
||||
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
|
||||
({{ formatRawNumber(packageData.usedQuota) }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item remaining">
|
||||
<div class="stat-label">
|
||||
剩余额度
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ formatNumber(packageData.remainingQuota) }}
|
||||
</div>
|
||||
<div class="stat-unit">
|
||||
万 Tokens
|
||||
</div>
|
||||
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
|
||||
({{ formatRawNumber(packageData.remainingQuota) }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="progress-section">
|
||||
<div class="progress-header">
|
||||
<span class="progress-label">剩余进度</span>
|
||||
<span class="progress-percent" :style="{ color: progressColor }">
|
||||
{{ remainingPercent }}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<el-progress
|
||||
:percentage="remainingPercent"
|
||||
:color="progressColor"
|
||||
:stroke-width="20"
|
||||
:show-text="false"
|
||||
/>
|
||||
|
||||
<div class="progress-legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot " :style="{ background: progressColor }" />
|
||||
<span class="legend-text">剩余: {{ remainingPercent }}%</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot used-dot" />
|
||||
<span class="legend-text">已使用: {{ usagePercent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买提示卡片（额度不足时显示） -->
|
||||
<el-card
|
||||
v-if="remainingPercent < 20"
|
||||
class="warning-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="warning-content">
|
||||
<el-icon class="warning-icon" color="#e6a23c">
|
||||
<WarningFilled />
|
||||
</el-icon>
|
||||
<div class="warning-text">
|
||||
<h3>额度即将用完</h3>
|
||||
<p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
|
||||
</div>
|
||||
<el-button type="warning" @click="onProductPackage()">
|
||||
立即充值
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 过期时间 -->
|
||||
<div v-if="packageData.expireDate" class="expire-info">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span>有效期至: {{ packageData.expireDate }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<el-alert
|
||||
class="tips-alert"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #title>
|
||||
<div class="tips-content">
|
||||
<p>温馨提示：</p>
|
||||
<ul>
|
||||
<li>Token额度根据不同模型消耗速率不同</li>
|
||||
<li>建议合理使用，避免额度过快消耗</li>
|
||||
<li>额度不足时请及时充值，避免影响使用</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.premium-package-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-main-icon {
|
||||
font-size: 36px;
|
||||
color: #f59e0b;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.header-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 套餐卡片 */
|
||||
.package-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #f0f2f5;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 24px;
|
||||
color: #f59e0b;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.package-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 统计数据网格 */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.stat-item.total {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.stat-item.used {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
.stat-item.remaining {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.stat-raw {
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
margin-top: 4px;
|
||||
cursor: help;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.stat-raw:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 进度条部分 */
|
||||
.progress-section {
|
||||
padding: 20px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.progress-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.used-dot {
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 过期信息 */
|
||||
.expire-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: #f0f9ff;
|
||||
border-radius: 6px;
|
||||
color: #0369a1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips-alert {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tips-content p {
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tips-content ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.tips-content li {
|
||||
margin: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 警告卡片 */
|
||||
.warning-card {
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e6a23c;
|
||||
background: #fef3e9;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.warning-text h3 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #e6a23c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.warning-text p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.header-main-icon {
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.progress-legend {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-header-left {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
|
||||
import { getPremiumTokenPackage } from '@/api/user';
|
||||
import { showProductPackage } from '@/utils/product-package.ts';
|
||||
import PremiumPackageInfo from './PremiumPackageInfo.vue';
|
||||
import PremiumUsageList from './PremiumUsageList.vue';
|
||||
|
||||
// 尊享服务数据
|
||||
const loading = ref(false);
|
||||
@@ -14,59 +14,8 @@ const packageData = ref<any>({
|
||||
expireDate: '', // 过期时间
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const usagePercent = computed(() => {
|
||||
if (packageData.value.totalQuota === 0)
|
||||
return 0;
|
||||
return Number(((packageData.value.usedQuota / packageData.value.totalQuota) * 100).toFixed(2));
|
||||
});
|
||||
|
||||
const remainingPercent = computed(() => {
|
||||
if (packageData.value.totalQuota === 0)
|
||||
return 0;
|
||||
return Number(((packageData.value.remainingQuota / packageData.value.totalQuota) * 100).toFixed(2));
|
||||
});
|
||||
|
||||
// 获取进度条颜色（基于剩余百分比）
|
||||
const progressColor = computed(() => {
|
||||
const percent = remainingPercent.value;
|
||||
if (percent <= 10)
|
||||
return '#f56c6c'; // 红色 - 剩余很少
|
||||
if (percent <= 30)
|
||||
return '#e6a23c'; // 橙色 - 剩余较少
|
||||
return '#67c23a'; // 绿色 - 剩余充足
|
||||
});
|
||||
|
||||
// 格式化数字 - 转换为万为单位
|
||||
function formatNumber(num: number): string {
|
||||
if (num === 0)
|
||||
return '0';
|
||||
const wan = num / 10000;
|
||||
// 保留2位小数，去掉末尾的0
|
||||
return wan.toFixed(2).replace(/\.?0+$/, '');
|
||||
}
|
||||
|
||||
// 格式化原始数字（带千分位）
|
||||
function formatRawNumber(num: number): string {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
/*
|
||||
前端已准备好，后端需要提供以下API：
|
||||
|
||||
接口地址: GET /account/premium/token-package
|
||||
|
||||
返回数据格式:
|
||||
{
|
||||
"success": true,
|
||||
"data": {
|
||||
"totalQuota": 1000000, // 购买总额度
|
||||
"usedQuota": 350000, // 已使用额度
|
||||
"remainingQuota": 650000, // 剩余额度（可选，前端会自动计算）
|
||||
"usagePercentage": 35, // 使用百分比（可选）
|
||||
"packageName": "尊享VIP套餐", // 套餐名称（可选）
|
||||
"expireDate": "2024-12-31" // 过期时间（可选）
|
||||
}
|
||||
} */
|
||||
// 子组件引用
|
||||
const usageListRef = ref<InstanceType<typeof PremiumUsageList>>();
|
||||
|
||||
// 获取尊享服务Token包数据
|
||||
async function fetchPremiumTokenPackage() {
|
||||
@@ -103,434 +52,84 @@ async function fetchPremiumTokenPackage() {
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
// 刷新所有数据
|
||||
function refreshData() {
|
||||
fetchPremiumTokenPackage();
|
||||
usageListRef.value?.refresh();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchPremiumTokenPackage();
|
||||
});
|
||||
|
||||
function onProductPackage() {
|
||||
showProductPackage();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="premium-service">
|
||||
<div class="header">
|
||||
<h2>
|
||||
<el-icon><TrophyBase /></el-icon>
|
||||
尊享服务
|
||||
</h2>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="refreshData"
|
||||
>
|
||||
刷新数据
|
||||
</el-button>
|
||||
<div class="premium-service">
|
||||
<!-- 套餐信息 -->
|
||||
<PremiumPackageInfo
|
||||
:package-data="packageData"
|
||||
:loading="loading"
|
||||
@refresh="refreshData"
|
||||
/>
|
||||
|
||||
<!-- 额度明细列表 -->
|
||||
<div class="usage-list-wrapper">
|
||||
<PremiumUsageList ref="usageListRef" />
|
||||
</div>
|
||||
|
||||
<!-- 套餐信息卡片 -->
|
||||
<el-card class="package-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon class="header-icon">
|
||||
<Coin />
|
||||
</el-icon>
|
||||
<span class="header-title">{{ packageData.packageName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="package-content">
|
||||
<!-- 统计数据 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item total">
|
||||
<div class="stat-label">
|
||||
购买总额度
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ formatNumber(packageData.totalQuota) }}
|
||||
</div>
|
||||
<div class="stat-unit">
|
||||
万 Tokens
|
||||
</div>
|
||||
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
|
||||
({{ formatRawNumber(packageData.totalQuota) }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item used">
|
||||
<div class="stat-label">
|
||||
已用额度
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ formatNumber(packageData.usedQuota) }}
|
||||
</div>
|
||||
<div class="stat-unit">
|
||||
万 Tokens
|
||||
</div>
|
||||
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
|
||||
({{ formatRawNumber(packageData.usedQuota) }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item remaining">
|
||||
<div class="stat-label">
|
||||
剩余额度
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ formatNumber(packageData.remainingQuota) }}
|
||||
</div>
|
||||
<div class="stat-unit">
|
||||
万 Tokens
|
||||
</div>
|
||||
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
|
||||
({{ formatRawNumber(packageData.remainingQuota) }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="progress-section">
|
||||
<div class="progress-header">
|
||||
<span class="progress-label">剩余进度</span>
|
||||
<span class="progress-percent" :style="{ color: progressColor }">
|
||||
{{ remainingPercent }}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<el-progress
|
||||
:percentage="remainingPercent"
|
||||
:color="progressColor"
|
||||
:stroke-width="20"
|
||||
:show-text="false"
|
||||
/>
|
||||
|
||||
<div class="progress-legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot " :style="{ background: progressColor }" />
|
||||
<span class="legend-text">剩余: {{ remainingPercent }}%</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot used-dot" />
|
||||
<span class="legend-text">已使用: {{ usagePercent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买提示卡片（额度不足时显示） -->
|
||||
<el-card
|
||||
v-if="remainingPercent < 20"
|
||||
class="warning-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="warning-content">
|
||||
<el-icon class="warning-icon" color="#e6a23c">
|
||||
<WarningFilled />
|
||||
</el-icon>
|
||||
<div class="warning-text">
|
||||
<h3>额度即将用完</h3>
|
||||
<p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
|
||||
</div>
|
||||
<el-button type="warning" @click="onProductPackage()">
|
||||
立即充值
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 过期时间 -->
|
||||
<div v-if="packageData.expireDate" class="expire-info">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span>有效期至: {{ packageData.expireDate }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<el-alert
|
||||
class="tips-alert"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #title>
|
||||
<div class="tips-content">
|
||||
<p>温馨提示：</p>
|
||||
<ul>
|
||||
<li>Token额度根据不同模型消耗速率不同</li>
|
||||
<li>建议合理使用，避免额度过快消耗</li>
|
||||
<li>额度不足时请及时充值，避免影响使用</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.premium-service {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
|
||||
|
||||
// 美化滚动条
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f3f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.usage-list-wrapper {
|
||||
margin-top: 24px;
|
||||
animation: slideInUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header .el-icon {
|
||||
margin-right: 8px;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* 套餐卡片 */
|
||||
.package-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.package-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 统计数据网格 */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.stat-item.total {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.stat-item.used {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
.stat-item.remaining {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.stat-raw {
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
margin-top: 4px;
|
||||
cursor: help;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.stat-raw:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 进度条部分 */
|
||||
.progress-section {
|
||||
padding: 20px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.progress-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.used-dot {
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.remaining-dot {
|
||||
background: #e4e7ed;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 过期信息 */
|
||||
.expire-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: #f0f9ff;
|
||||
border-radius: 6px;
|
||||
color: #0369a1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips-alert {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tips-content p {
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tips-content ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.tips-content li {
|
||||
margin: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 警告卡片 */
|
||||
.warning-card {
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e6a23c;
|
||||
background: #fef3e9;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.warning-text h3 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #e6a23c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.warning-text p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 768px) {
|
||||
.premium-service {
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.progress-legend {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
.usage-list-wrapper {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,948 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PremiumTokenUsageDto, PremiumTokenUsageQueryParams } from '@/api/user';
|
||||
import { Clock, Refresh, Search } from '@element-plus/icons-vue';
|
||||
import { debounce } from 'lodash-es';
|
||||
import { getPremiumTokenUsageList } from '@/api/user';
|
||||
|
||||
// 额度明细列表
|
||||
const usageList = ref<PremiumTokenUsageDto[]>([]); // 后端返回的原始数据
|
||||
const filteredList = ref<PremiumTokenUsageDto[]>([]); // 前端过滤后的数据
|
||||
const displayList = ref<PremiumTokenUsageDto[]>([]); // 最终显示的数据（前端分页后）
|
||||
const listLoading = ref(false);
|
||||
const totalCount = ref(0); // 后端总数
|
||||
const filteredTotalCount = ref(0); // 前端过滤后的总数
|
||||
|
||||
// 是否有前端筛选条件
|
||||
const hasClientFilter = computed(() => {
|
||||
return !!searchKeyword.value || statusFilter.value !== null;
|
||||
});
|
||||
|
||||
// 查询参数
|
||||
const queryParams = ref<PremiumTokenUsageQueryParams>({
|
||||
skipCount: 0,
|
||||
maxResultCount: 10,
|
||||
});
|
||||
|
||||
// 当前页码
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
// 筛选条件
|
||||
const dateRange = ref<[Date, Date] | null>(null);
|
||||
const searchKeyword = ref('');
|
||||
const statusFilter = ref<boolean | null>(null);
|
||||
|
||||
// 快捷时间选择
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '最近一周',
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 格式化数字 - 转换为万为单位
|
||||
function formatNumber(num: number): string {
|
||||
if (num === 0)
|
||||
return '0';
|
||||
const wan = num / 10000;
|
||||
return wan.toFixed(2).replace(/\.?0+$/, '');
|
||||
}
|
||||
|
||||
// 格式化日期时间
|
||||
function formatDateTime(dateTime: string): string {
|
||||
return new Date(dateTime).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
// 获取使用率颜色
|
||||
function getUsageColor(used: number, total: number): string {
|
||||
if (total === 0)
|
||||
return '#e4e7ed';
|
||||
const percent = (used / total) * 100;
|
||||
if (percent >= 90)
|
||||
return '#f56c6c'; // 红色
|
||||
if (percent >= 70)
|
||||
return '#e6a23c'; // 橙色
|
||||
return '#409eff'; // 蓝色
|
||||
}
|
||||
|
||||
// 获取额度明细列表
|
||||
async function fetchUsageList(resetPage = false) {
|
||||
if (resetPage) {
|
||||
currentPage.value = 1;
|
||||
queryParams.value.skipCount = 0;
|
||||
}
|
||||
|
||||
listLoading.value = true;
|
||||
try {
|
||||
// 如果有前端筛选条件，获取所有数据；否则使用正常分页
|
||||
const params: PremiumTokenUsageQueryParams = {
|
||||
skipCount: hasClientFilter.value ? 0 : queryParams.value.skipCount,
|
||||
maxResultCount: hasClientFilter.value ? 1000 : queryParams.value.maxResultCount,
|
||||
startTime: queryParams.value.startTime,
|
||||
endTime: queryParams.value.endTime,
|
||||
orderByColumn: queryParams.value.orderByColumn,
|
||||
isAsc: queryParams.value.isAsc,
|
||||
};
|
||||
|
||||
console.log('发送到后端的参数:', params);
|
||||
console.log('是否有前端筛选:', hasClientFilter.value);
|
||||
|
||||
const res = await getPremiumTokenUsageList(params);
|
||||
console.log('后端返回结果:', res);
|
||||
|
||||
if (res.data) {
|
||||
usageList.value = res.data.items || [];
|
||||
totalCount.value = res.data.totalCount || 0;
|
||||
|
||||
// 应用前端过滤和分页
|
||||
applyClientFilters();
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取额度明细列表失败:', error);
|
||||
ElMessage.error('获取额度明细列表失败');
|
||||
usageList.value = [];
|
||||
filteredList.value = [];
|
||||
displayList.value = [];
|
||||
totalCount.value = 0;
|
||||
filteredTotalCount.value = 0;
|
||||
}
|
||||
finally {
|
||||
listLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 前端过滤和分页
|
||||
function applyClientFilters() {
|
||||
let filtered = [...usageList.value];
|
||||
|
||||
// 包名称搜索
|
||||
if (searchKeyword.value) {
|
||||
const keyword = searchKeyword.value.toLowerCase();
|
||||
filtered = filtered.filter(item =>
|
||||
item.packageName.toLowerCase().includes(keyword),
|
||||
);
|
||||
}
|
||||
|
||||
// 状态筛选
|
||||
if (statusFilter.value !== null) {
|
||||
filtered = filtered.filter(item => item.isActive === statusFilter.value);
|
||||
}
|
||||
|
||||
filteredList.value = filtered;
|
||||
filteredTotalCount.value = filtered.length;
|
||||
|
||||
// 如果有前端筛选，进行前端分页
|
||||
if (hasClientFilter.value) {
|
||||
const start = (currentPage.value - 1) * pageSize.value;
|
||||
const end = start + pageSize.value;
|
||||
displayList.value = filtered.slice(start, end);
|
||||
}
|
||||
else {
|
||||
// 无前端筛选，直接使用过滤后的数据（实际就是原始数据）
|
||||
displayList.value = filtered;
|
||||
}
|
||||
|
||||
console.log('前端过滤和分页:', {
|
||||
原始数量: usageList.value.length,
|
||||
过滤后数量: filtered.length,
|
||||
当前页显示: displayList.value.length,
|
||||
搜索关键字: searchKeyword.value,
|
||||
状态筛选: statusFilter.value,
|
||||
当前页码: currentPage.value,
|
||||
每页大小: pageSize.value,
|
||||
});
|
||||
}
|
||||
|
||||
// 防抖搜索
|
||||
const debouncedSearch = debounce(() => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
applyClientFilters(); // 只应用前端过滤，不重新请求接口
|
||||
}, 300);
|
||||
|
||||
// 处理分页
|
||||
function handlePageChange(page: number) {
|
||||
console.log('切换页码:', page);
|
||||
currentPage.value = page;
|
||||
|
||||
if (hasClientFilter.value) {
|
||||
// 有前端筛选，只需重新分页
|
||||
applyClientFilters();
|
||||
}
|
||||
else {
|
||||
// 无前端筛选，后端分页
|
||||
queryParams.value.skipCount = (page - 1) * pageSize.value;
|
||||
fetchUsageList();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理每页大小变化
|
||||
function handleSizeChange(size: number) {
|
||||
console.log('修改每页大小:', size);
|
||||
pageSize.value = size;
|
||||
queryParams.value.maxResultCount = size;
|
||||
currentPage.value = 1;
|
||||
queryParams.value.skipCount = 0;
|
||||
|
||||
if (hasClientFilter.value) {
|
||||
// 有前端筛选，只需重新分页
|
||||
applyClientFilters();
|
||||
}
|
||||
else {
|
||||
// 无前端筛选，重新获取数据
|
||||
fetchUsageList();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理排序（使用 OrderByColumn 和 IsAsc）
|
||||
function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
|
||||
console.log('排序变化:', { prop, order });
|
||||
if (order) {
|
||||
// 后端DTO使用 OrderByColumn 和 IsAsc
|
||||
queryParams.value.orderByColumn = prop;
|
||||
// 转换为布尔值：ascending -> true, descending -> false
|
||||
queryParams.value.isAsc = order === 'ascending' ? 'ascending' : 'descending';
|
||||
}
|
||||
else {
|
||||
queryParams.value.orderByColumn = undefined;
|
||||
queryParams.value.isAsc = undefined;
|
||||
}
|
||||
currentPage.value = 1;
|
||||
queryParams.value.skipCount = 0;
|
||||
fetchUsageList();
|
||||
}
|
||||
|
||||
// 处理时间筛选
|
||||
function handleDateChange(value: [Date, Date] | null) {
|
||||
console.log('时间筛选变化:', value);
|
||||
if (value && value.length === 2) {
|
||||
// 设置开始时间为当天00:00:00
|
||||
const startDate = new Date(value[0]);
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
|
||||
// 设置结束时间为当天23:59:59
|
||||
const endDate = new Date(value[1]);
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
|
||||
queryParams.value.startTime = startDate.toISOString();
|
||||
queryParams.value.endTime = endDate.toISOString();
|
||||
console.log('时间范围:', {
|
||||
start: queryParams.value.startTime,
|
||||
end: queryParams.value.endTime,
|
||||
});
|
||||
}
|
||||
else {
|
||||
queryParams.value.startTime = undefined;
|
||||
queryParams.value.endTime = undefined;
|
||||
}
|
||||
fetchUsageList(true); // 重置到第一页并获取数据
|
||||
}
|
||||
|
||||
// 重置筛选
|
||||
function resetFilters() {
|
||||
console.log('重置所有筛选条件');
|
||||
// 重置所有筛选条件
|
||||
dateRange.value = null;
|
||||
searchKeyword.value = '';
|
||||
statusFilter.value = null;
|
||||
currentPage.value = 1;
|
||||
|
||||
// 重置后端查询参数
|
||||
queryParams.value = {
|
||||
skipCount: 0,
|
||||
maxResultCount: pageSize.value,
|
||||
orderByColumn: undefined,
|
||||
isAsc: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
};
|
||||
|
||||
// 重新获取数据
|
||||
fetchUsageList();
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
function handleSearch() {
|
||||
console.log('搜索关键字:', searchKeyword.value);
|
||||
|
||||
// 如果已经有全量数据（之前获取过），直接过滤
|
||||
if (usageList.value.length > 0 && hasClientFilter.value) {
|
||||
debouncedSearch();
|
||||
}
|
||||
else {
|
||||
// 否则需要重新获取数据
|
||||
currentPage.value = 1;
|
||||
fetchUsageList();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理状态筛选
|
||||
function handleStatusChange(value: boolean | null) {
|
||||
console.log('状态筛选:', value);
|
||||
|
||||
// 如果是清除操作（value 为 null），重置筛选
|
||||
if (value === null) {
|
||||
statusFilter.value = null;
|
||||
}
|
||||
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
|
||||
// 状态筛选需要重新获取数据（因为后端不支持状态筛选）
|
||||
fetchUsageList();
|
||||
}
|
||||
|
||||
// 判断是否有活动的筛选条件
|
||||
const hasActiveFilters = computed(() => {
|
||||
return !!dateRange.value || !!searchKeyword.value || statusFilter.value !== null;
|
||||
});
|
||||
|
||||
// 对外暴露刷新方法
|
||||
defineExpose({
|
||||
refresh: fetchUsageList,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchUsageList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card v-loading="listLoading" class="usage-list-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="list-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="header-icon">
|
||||
<i-ep-document />
|
||||
</el-icon>
|
||||
<div class="header-text">
|
||||
<span class="header-title">尊享包额度明细</span>
|
||||
<!-- <span class="header-subtitle">Premium Package Usage Details</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="false" class="header-right">
|
||||
<el-tag v-if="hasClientFilter && filteredTotalCount > 0" type="warning" size="default" class="count-tag">
|
||||
<el-icon><i-ep-filter /></el-icon>
|
||||
筛选后 {{ filteredTotalCount }} 条
|
||||
</el-tag>
|
||||
<el-tag v-else-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
|
||||
<el-icon><i-ep-data-line /></el-icon>
|
||||
共 {{ totalCount }} 条记录
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 筛选工具栏 -->
|
||||
<div class="filter-toolbar">
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索包名称"
|
||||
clearable
|
||||
size="default"
|
||||
class="search-input"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="default"
|
||||
:shortcuts="shortcuts"
|
||||
class="date-picker"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:editable="false"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<el-select
|
||||
v-model="statusFilter"
|
||||
placeholder="全部状态"
|
||||
clearable
|
||||
size="default"
|
||||
class="status-select"
|
||||
@change="handleStatusChange"
|
||||
>
|
||||
<el-option label="激活" :value="true" />
|
||||
<el-option label="未激活" :value="false" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<el-button
|
||||
v-if="hasActiveFilters"
|
||||
size="default"
|
||||
@click="resetFilters"
|
||||
>
|
||||
<el-icon><i-ep-refresh-left /></el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="default"
|
||||
:icon="Refresh"
|
||||
@click="fetchUsageList"
|
||||
>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选提示 -->
|
||||
<!-- <div v-if="searchKeyword || statusFilter !== null" class="filter-tip"> -->
|
||||
<!-- <el-icon color="#409eff"> -->
|
||||
<!-- <i-ep-info-filled /> -->
|
||||
<!-- </el-icon> -->
|
||||
<!-- <span>启用包名称或状态筛选时，将从当前时间范围内获取更多数据进行过滤（最多1000条）</span> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
:data="displayList"
|
||||
stripe
|
||||
class="usage-table"
|
||||
empty-text="暂无数据"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column prop="packageName" label="包名称" min-width="140" sortable="custom" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="package-name-cell">
|
||||
<el-icon class="package-icon" color="#409eff">
|
||||
<i-ep-box />
|
||||
</el-icon>
|
||||
<span>{{ row.packageName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="总额度" min-width="130" prop="totalTokens" sortable="custom" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="token-cell">
|
||||
<span class="token-value">{{ formatNumber(row.totalTokens) }}</span>
|
||||
<span class="token-unit">万</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="已使用" min-width="130" prop="usedTokens" sortable="custom" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="token-cell used">
|
||||
<span class="token-value">{{ formatNumber(row.usedTokens) }}</span>
|
||||
<span class="token-unit">万</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable="custom" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="token-cell remaining">
|
||||
<span
|
||||
class="token-value"
|
||||
:style="{ color: row.remainingTokens > 0 ? '#67c23a' : '#f56c6c', fontWeight: '600' }"
|
||||
>
|
||||
{{ formatNumber(row.remainingTokens) }}
|
||||
</span>
|
||||
<span class="token-unit">万</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="使用率" min-width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="usage-progress-cell">
|
||||
<el-progress
|
||||
:percentage="row.totalTokens > 0 ? Number(((row.usedTokens / row.totalTokens) * 100).toFixed(1)) : 0"
|
||||
:color="getUsageColor(row.usedTokens, row.totalTokens)"
|
||||
:stroke-width="8"
|
||||
:show-text="true"
|
||||
:text-inside="false"
|
||||
>
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-text">{{ percentage }}%</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable="custom" align="right">
|
||||
<template #default="{ row }">
|
||||
<span class="amount-cell">¥{{ row.purchaseAmount.toFixed(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" min-width="90" prop="isActive" sortable="custom" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.isActive ? 'success' : 'info'" size="small" effect="dark">
|
||||
{{ row.isActive ? '激活' : '未激活' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable="custom">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.expireDateTime" class="expire-cell">
|
||||
<el-icon class="expire-icon">
|
||||
<Clock />
|
||||
</el-icon>
|
||||
<span>{{ formatDateTime(row.expireDateTime) }}</span>
|
||||
</div>
|
||||
<span v-else class="no-data">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="remark-cell">{{ row.remark || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!displayList.length && !listLoading" class="empty-container">
|
||||
<el-empty :description="hasActiveFilters ? '当前筛选条件下无数据' : '暂无明细记录'">
|
||||
<el-button v-if="hasActiveFilters" type="primary" @click="resetFilters">
|
||||
清除筛选
|
||||
</el-button>
|
||||
</el-empty>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="(hasClientFilter ? filteredTotalCount : totalCount) > 0" class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="hasClientFilter ? filteredTotalCount : totalCount"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 额度明细列表卡片 */
|
||||
.usage-list-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #f0f2f5;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-header .header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 24px;
|
||||
color: #f59e0b;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 筛选工具栏 */
|
||||
.filter-toolbar {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e8eaed;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
border-left: 3px solid #409eff;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.status-select {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.usage-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.package-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.package-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.usage-progress-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.usage-progress-cell :deep(.el-progress) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.usage-progress-cell :deep(.el-progress__text) {
|
||||
font-size: 13px !important;
|
||||
font-weight: 600;
|
||||
min-width: 45px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.percentage-text {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.token-cell {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.token-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.token-unit {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.amount-cell {
|
||||
font-weight: 600;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.expire-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.expire-icon {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.remark-cell {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-container {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
/* 分页容器 */
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: 2px solid #f0f2f5;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
gap: 8px;
|
||||
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #dcdfe6;
|
||||
background: #fff;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: #667eea;
|
||||
border-color: #667eea;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
border-radius: 8px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #667eea;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination__sizes {
|
||||
.el-select {
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 768px) {
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 移动端筛选工具栏 */
|
||||
.filter-toolbar {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.date-picker,
|
||||
.status-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-actions .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 移动端分页 */
|
||||
.pagination-container {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.el-pagination) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板适配 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.filter-row {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user