fork-it/gpt-load
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化前端数值格式

Browse Source
This commit is contained in:
tbphp
2025-07-14 08:49:26 +08:00
parent 807b766e79
commit f759c17fa0
3 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/BaseInfoCard.vue
View File

@@ -14,11 +14,8 @@ const formatValue = (value: number, type: "count" | "rate" = "count"): string =>
if (type === "rate") { if (type === "rate") {
return `${value.toFixed(2)}%`; return `${value.toFixed(2)}%`;
} }
if (value >= 10000) {
return `${(value / 10000).toFixed(1)}w`;
}
if (value >= 1000) { if (value >= 1000) {
return `${(value / 1000).toFixed(1)}k`; return `${(value / 1000).toFixed(1)}K`;
} }
return value.toString(); return value.toString();
}; };
@@ -39,12 +36,14 @@ const fetchStats = async () => {
// 添加动画效果 // 添加动画效果
setTimeout(() => { setTimeout(() => {
animatedValues.value = { animatedValues.value = {
key_count: 1, key_count:
(stats.value?.key_count?.value ?? 0) /
((stats.value?.key_count?.value ?? 1) + (stats.value?.key_count?.sub_value ?? 1)),
group_count: 1, group_count: 1,
request_count: 1, request_count: Math.min(100 + (stats.value?.request_count?.trend ?? 0), 100) / 100,
error_rate: 1, error_rate: (100 - (stats.value?.error_rate?.value ?? 0)) / 100,
}; };
}, 150); }, 0);
} catch (error) { } catch (error) {
console.error("获取统计数据失败:", error); console.error("获取统计数据失败:", error);
} finally { } finally {
@@ -78,7 +77,7 @@ onMounted(() => {
<div class="stat-content"> <div class="stat-content">
<div class="stat-value"> <div class="stat-value">
{{ stats ? formatValue(stats.key_count.value) : "--" }} {{ stats?.key_count?.value ?? 0 }}
</div> </div>
<div class="stat-title">秘钥数量</div> <div class="stat-title">秘钥数量</div>
</div> </div>
@@ -87,7 +86,7 @@ onMounted(() => {
<div <div
class="stat-bar-fill key-bar" class="stat-bar-fill key-bar"
:style="{ :style="{
width: `${animatedValues.key_count * 100}%`, width: `${(animatedValues.key_count ?? 0) * 100}%`,
}" }"
/> />
</div> </div>
@@ -103,7 +102,7 @@ onMounted(() => {
<div class="stat-content"> <div class="stat-content">
<div class="stat-value"> <div class="stat-value">
{{ stats ? formatValue(stats.group_count.value) : "--" }} {{ stats?.group_count?.value ?? 0 }}
</div> </div>
<div class="stat-title">分组数量</div> <div class="stat-title">分组数量</div>
</div> </div>
@@ -112,7 +111,7 @@ onMounted(() => {
<div <div
class="stat-bar-fill group-bar" class="stat-bar-fill group-bar"
:style="{ :style="{
width: `${animatedValues.group_count * 100}%`, width: `${(animatedValues.group_count ?? 0) * 100}%`,
}" }"
/> />
</div> </div>
@@ -145,7 +144,7 @@ onMounted(() => {
<div <div
class="stat-bar-fill request-bar" class="stat-bar-fill request-bar"
:style="{ :style="{
width: `${animatedValues.request_count * 100}%`, width: `${(animatedValues.request_count ?? 0) * 100}%`,
}" }"
/> />
</div> </div>
@@ -169,7 +168,7 @@ onMounted(() => {
<div class="stat-content"> <div class="stat-content">
<div class="stat-value"> <div class="stat-value">
{{ stats ? formatValue(stats.error_rate.value, "rate") : "--" }} {{ stats ? formatValue(stats.error_rate.value ?? 0, "rate") : "--" }}
</div> </div>
<div class="stat-title">24小时错误率</div> <div class="stat-title">24小时错误率</div>
</div> </div>
@@ -178,7 +177,7 @@ onMounted(() => {
<div <div
class="stat-bar-fill error-bar" class="stat-bar-fill error-bar"
:style="{ :style="{
width: `${animatedValues.error_rate * 100}%`, width: `${(animatedValues.error_rate ?? 0) * 100}%`,
}" }"
/> />
</div> </div>
@@ -288,7 +287,7 @@ onMounted(() => {
.stat-bar-fill { .stat-bar-fill {
height: 100%; height: 100%;
border-radius: 2px; border-radius: 2px;
transition: width 1s ease-out; transition: width 0.5s ease-out;
transition-delay: 0.2s; transition-delay: 0.2s;
} }

7
web/src/components/LineChart.vue
View File

@@ -177,9 +177,10 @@ const generateAreaPath = (data: number[]) => {
// 数字格式化 // 数字格式化
const formatNumber = (value: number) => { const formatNumber = (value: number) => {
if (value >= 1000000) { // if (value >= 1000000) {
return `${(value / 1000000).toFixed(1)}M`; // return `${(value / 1000000).toFixed(1)}M`;
} else if (value >= 1000) { // } else
if (value >= 1000) {
return `${(value / 1000).toFixed(1)}K`; return `${(value / 1000).toFixed(1)}K`;
} }
return Math.round(value).toString(); return Math.round(value).toString();

6
web/src/components/keys/GroupInfoCard.vue
View File

@@ -108,9 +108,9 @@ async function handleDelete() {
} }
function formatNumber(num: number): string { function formatNumber(num: number): string {
if (num >= 1000000) { // if (num >= 1000000) {
return `${(num / 1000000).toFixed(1)}M`; // return `${(num / 1000000).toFixed(1)}M`;
} // }
if (num >= 1000) { if (num >= 1000) {
return `${(num / 1000).toFixed(1)}K`; return `${(num / 1000).toFixed(1)}K`;
} }