WFC/fe.wfc.user
2
0
Fork 0
Code Activity

feat:仪表盘界面修改以及中英文适配

Browse Source
This commit is contained in:
zhongzm
2025-01-22 18:38:24 +08:00
parent 737999885f
commit b4c01b8544
4 changed files with 350 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/locales/langs/en-us.ts
View File

@@ -540,15 +540,23 @@ const local: any = {
pay:'pay now'
},
headerbanner:{
Remainingcredit:'Remain credit',
packageinfo:'Package',
packagename:'Package name',
price:'Price',
uplimit:'Up speed',
downlimit:'Down speed',
client:'Client',
accountinfor:'Account information',
Remainingcredit:'Remain balance',
monthphonebill:'Month bill',
Flowremaining:'Remain flowr',
monthflowr:'Month flowr',
Flowremaining:'Remain traffic',
monthflowr:'Traffic',
Trafficrate:'Traffic rate',
Currentspeed:'Current speed',
Used:'Used',
maxspeed:'Max',
deviceCount: "Device",
nolimit:'Unlimited',
},
userInfo:{
kyc:'KYC certification',

8
src/locales/langs/zh-cn.ts
View File

@@ -542,6 +542,13 @@ const local:any = {
pay:'立即支付',
},
headerbanner:{
packageinfo:'套餐信息',
packagename:'套餐名称',
price:'套餐费用',
uplimit:'上行速率',
downlimit:'下行速率',
client:'设备数',
accountinfor:'账户信息',
Remainingcredit:'剩余话费',
monthphonebill:'本月话费',
Flowremaining:'剩余流量',
@@ -551,6 +558,7 @@ const local:any = {
Used:'已用',
maxspeed:'峰值',
deviceCount: "设备数",
nolimit:'无限制',
},
userInfo:{
kyc:'KYC认证',

11
src/typings/api.d.ts vendored
View File

@@ -453,8 +453,15 @@ declare namespace Api {
traffic: number;
trafficUsed: number;
trafficEnable: boolean;
activity: number;
error?: any; // 添加可选的 error 属性
rateLimitEnable: boolean;
upLimitEnable: boolean;
downLimitEnable: boolean;
upLimit: number;
downLimit: number;
packageName:string;
clientNumEnable:boolean;
price:string;
error?: any;
}
}

512
src/views/home/modules/header-banner.vue
View File

@@ -25,6 +25,10 @@ interface GaugeDisplayData {
displayValue?: string;
subTitle?: string;
description?: string;
speedLimits?: {
upLimit: string;
downLimit: string;
};
}
// 添加速率单位转换函数
@@ -74,7 +78,7 @@ const formatBalance = (balance: number | string): string => {
return numBalance.toFixed(2);
};
// 使用 ref 来存储基础数据
// 修改基础数据，移除速率仪表盘
const baseData = ref<GaugeDisplayData[]>([
{
id: 0,
@@ -92,16 +96,11 @@ const baseData = ref<GaugeDisplayData[]>([
max: 1024,
unit: 'B',
description: t('page.headerbanner.monthflowr'),
subTitle: t('page.headerbanner.Used') + ': 0B'
},
{
id: 2,
title: t('page.headerbanner.Trafficrate'),
value: 0,
max: 10,
unit: 'B/s',
description: t('page.headerbanner.Currentspeed'),
subTitle: t('page.headerbanner.maxspeed') + '0B/s'
subTitle: t('page.headerbanner.Used') + ': 0B',
speedLimits: {
upLimit: '无限制',
downLimit: '无限制'
}
}
]);
@@ -179,9 +178,6 @@ const { domRef: gauge1Ref, updateOptions: updateGauge1 } = useEcharts(() => getG
const { domRef: gauge2Ref, updateOptions: updateGauge2 } = useEcharts(() => getGaugeOptions(gaugeData.value[1]), {
onRender: () => {}
});
const { domRef: gauge3Ref, updateOptions: updateGauge3 } = useEcharts(() => getGaugeOptions(gaugeData.value[2]), {
onRender: () => {}
});
// 更新单个图表的数据
const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => {
@@ -254,35 +250,39 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?:
return newOpts;
};
// 添加峰值速率的 ref
const peakTrafficRate = ref(0);
// 修改速率格式化函数
const formatSpeedLimit = (speed: number): string => {
if (speed >= 1000000) {
return `${(speed / 1000000).toFixed(1)}Gbps`;
} else if (speed >= 1000) {
return `${(speed / 1000).toFixed(1)}Mbps`;
}
return `${speed}Kbps`;
};
// 添加检查是否可以上网的函数
function checkAndTriggerAuth(dashboardData: any) {
// 检查是否有余额
const hasBalance = dashboardData.balance > 0;
// 检查是否不限制流量
const noTrafficLimit = !dashboardData.trafficEnable;
// 检查是否有剩余流量
const hasRemainingTraffic = dashboardData.trafficEnable &&
(dashboardData.traffic - dashboardData.trafficUsed) > 0;
// 如果满足任一条件，静默触发上网
if (hasBalance || noTrafficLimit || hasRemainingTraffic) {
clientAuth().catch(err => {
console.warn('Auto auth failed:', err);
// 添加速率限制的响应式引用
const speedLimits = ref({
upLimit: t('page.headerbanner.nolimit'),
downLimit: t('page.headerbanner.nolimit')
});
}
}
// 修改 mockDataUpdate 函数，在获取数据后添加检查
// 添加套餐信息的响应式引用
const packageInfo = ref({
packageName: '',
price: '0.00'
});
// 修改数据更新函数，添加套餐信息的更新
async function mockDataUpdate() {
try {
const response = await authStore.getDashboardData();
// 检查响应是否有效且不是错误响应
if (response && typeof response === 'object' && !response.error) {
// 检查必要的字段是否存在
if (response.balance !== undefined) {
// 更新套餐信息
packageInfo.value = {
packageName: response.packageName || '暂无套餐',
price: formatBalance(response.price || 0)
};
// 更新余额和设备数据
const numBalance = Number(response.balance);
baseData.value[0] = {
@@ -291,65 +291,50 @@ async function mockDataUpdate() {
max: Math.max(numBalance, 100),
displayValue: formatBalance(response.balance),
unit: '元',
subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNum || 0}台`
subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNumEnable ? (response.clientNum || 0) + '台' : t('page.headerbanner.nolimit')}`
};
// 处理流量数据，使用默认值处理可能的空值
const totalTraffic = response.traffic || 0;
const usedTraffic = response.trafficUsed || 0;
// 更新流量数据
const totalTraffic = response.trafficEnable ? (response.traffic || 0) : 0;
const usedTraffic = response.trafficEnable ? (response.trafficUsed || 0) : 0;
const remainingTraffic = Math.max(0, totalTraffic - usedTraffic);
const progressRatio = totalTraffic ? Math.min(1, Math.max(0, remainingTraffic / totalTraffic)) : 0;
// 格式化流量显示
const formattedTotal = formatTraffic(totalTraffic);
const formattedUsed = formatTraffic(usedTraffic);
const formattedRemaining = formatTraffic(remainingTraffic);
const formattedTotal = response.trafficEnable ? formatTraffic(totalTraffic) : { value: 0, unit: '' };
const formattedUsed = response.trafficEnable ? formatTraffic(usedTraffic) : { value: 0, unit: '' };
const formattedRemaining = response.trafficEnable ? formatTraffic(remainingTraffic) : { value: 0, unit: '' };
// 更新流量数据显示
baseData.value[1] = {
...baseData.value[1],
value: remainingTraffic,
max: totalTraffic,
displayValue: `${formattedRemaining.value}${formattedRemaining.unit}`,
displayValue: response.trafficEnable ? `${formattedRemaining.value}${formattedRemaining.unit}` : t('page.headerbanner.nolimit'),
unit: '',
description: `${t('page.headerbanner.monthflowr')} (${formattedTotal.value}${formattedTotal.unit})`,
subTitle: t('page.headerbanner.Used') + `: ${formattedUsed.value}${formattedUsed.unit}`
};
// 获取当前速率
const currentActivity = Number(response.activity ?? 0);
// 更新峰值速率
if (currentActivity > peakTrafficRate.value) {
peakTrafficRate.value = currentActivity;
description: response.trafficEnable
? `${t('page.headerbanner.monthflowr')} (${formattedTotal.value}${formattedTotal.unit})`
: `${t('page.headerbanner.monthflowr')} (${t('page.headerbanner.nolimit')})`,
subTitle: response.trafficEnable
? t('page.headerbanner.Used') + `: ${formattedUsed.value}${formattedUsed.unit}`
: t('page.headerbanner.Used') + `: 0B`,
speedLimits: {
upLimit: speedLimits.value.upLimit,
downLimit: speedLimits.value.downLimit
}
// 格式化当前速度和峰值速度
const currentSpeed = formatSpeed(currentActivity);
const peakSpeed = formatSpeed(peakTrafficRate.value);
// 设置速率的最大值
const minMax = 1024; // 1KB/s 作为最小最大值
const dynamicMax = Math.max(
currentSpeed.value * 1.5,
peakSpeed.value,
minMax
);
// 更新速率数据
baseData.value[2] = {
...baseData.value[2],
value: currentSpeed.value,
unit: currentSpeed.unit,
max: dynamicMax,
subTitle: t('page.headerbanner.maxspeed') + `: ${peakSpeed.value}${peakSpeed.unit}`
};
// 静默执行自动上网检查
try {
await checkAndTriggerAuth(response);
} catch (error) {
console.warn('Auto auth check failed:', error);
// 更新速率限制显示
if (response.rateLimitEnable) {
speedLimits.value = {
upLimit: response.upLimitEnable ? formatSpeedLimit(response.upLimit) : t('page.headerbanner.nolimit'),
downLimit: response.downLimitEnable ? formatSpeedLimit(response.downLimit) : t('page.headerbanner.nolimit')
};
} else {
speedLimits.value = {
upLimit: t('page.headerbanner.nolimit'),
downLimit: t('page.headerbanner.nolimit')
};
}
// 更新图表
@@ -363,17 +348,8 @@ async function mockDataUpdate() {
animationEasing: 'cubicInOut'
};
});
updateGauge3(opts => updateGaugeData(opts, baseData.value[2]));
} else {
// 静默处理无效数据
console.warn('Invalid dashboard data structure:', response);
}
} else {
// 静默处理无效响应
console.warn('Invalid response:', response);
}
} catch (error) {
// 静默处理所有错误
console.warn('Dashboard update failed:', error);
}
}
@@ -395,7 +371,6 @@ onUnmounted(() => {
clearInterval(timer);
timer = null;
}
peakTrafficRate.value = 0;
});
// 监听语言变化
@@ -418,27 +393,87 @@ const updateDashboard = async () => {
defineExpose({
updateDashboard
});
// 修改流量获取函数
const getTrafficTotal = (description?: string, trafficEnable?: boolean): string => {
if (!trafficEnable) return t('page.headerbanner.nolimit');
if (!description) return '0B';
const matches = description.match(/\((.*?)\)/);
return matches ? matches[1] : '0B';
};
// 修改设备数量获取函数
const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => {
if (!clientNumEnable) return t('page.headerbanner.nolimit');
if (!subTitle) return '0';
const parts = subTitle.split(': ');
return parts.length > 1 ? parts[1] : '0';
};
</script>
<template>
<ACard :bordered="false" class="card-wrapper">
<ARow :gutter="[4, 4]" class="justify-around gauge-row">
<ACol :span="8" v-for="item in gaugeData" :key="item.id">
<div class="dashboard-layout">
<!-- 左侧：仪表盘和流量信息 -->
<div class="left-section">
<div class="gauge-container">
<div class="gauge-chart" :ref="el => {
if (item.id === 0) gauge1Ref = el as HTMLElement
else if (item.id === 1) gauge2Ref = el as HTMLElement
else if (item.id === 2) gauge3Ref = el as HTMLElement
}"></div>
<div class="gauge-chart" ref="gauge2Ref"></div>
<div class="gauge-info">
<div class="gauge-title">{{ item.title }}</div>
<div class="gauge-value">{{ item.displayValue ? `${item.displayValue}${item.unit}` : `${item.value}${item.unit}` }}</div>
<div class="gauge-desc">{{ item.description }}</div>
<div class="sub-title">{{ item.subTitle }}</div>
<div class="gauge-title">{{ baseData[1].title }}</div>
<div class="gauge-value">{{ baseData[1].displayValue }}</div>
</div>
</div>
</div>
<!-- 右侧：分组信息显示 -->
<div class="right-section">
<!-- 套餐信息 -->
<div class="info-section">
<div class="section-title">{{t('page.headerbanner.packageinfo')}}</div>
<div class="info-group">
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.packagename') }}</span>
<span class="info-value">{{ packageInfo.packageName || '暂无套餐' }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.price') }}</span>
<span class="info-value">¥{{ packageInfo.price || '0.00' }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.monthflowr') }}</span>
<span class="info-value">{{ getTrafficTotal(baseData[1].description, baseData[1].speedLimits?.upLimit !== t('page.headerbanner.nolimit')) }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.Used') }}</span>
<span class="info-value">{{ getTrafficTotal(baseData[1].description, baseData[1].speedLimits?.downLimit !== t('page.headerbanner.nolimit')) }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.uplimit') }}</span>
<span class="info-value">{{ speedLimits.upLimit }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.downlimit') }}</span>
<span class="info-value">{{ speedLimits.downLimit }}</span>
</div>
</div>
</div>
<!-- 账户信息 -->
<div class="info-section">
<div class="section-title">{{ t('page.headerbanner.accountinfor') }}</div>
<div class="info-group">
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.Remainingcredit') }}</span>
<span class="info-value">¥{{ baseData[0].displayValue }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.client') }}</span>
<span class="info-value">{{ getDeviceCount(baseData[0].subTitle, baseData[0].speedLimits?.upLimit !== t('page.headerbanner.nolimit')) }}</span>
</div>
</div>
</div>
</div>
</div>
</ACol>
</ARow>
</ACard>
</template>
@@ -446,141 +481,224 @@ defineExpose({
.card-wrapper {
margin-bottom: 16px;
background: linear-gradient(180deg, #4284f5 0%, #0c47a7 100%);
padding: 20px 16px;
padding: 16px 12px;
color: #fff;
}
.dashboard-layout {
display: flex;
gap: 12px;
}
/* 左侧部分样式 */
.left-section {
flex: 0 0 auto;
width: 200px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.gauge-container {
height: 220px;
min-height: 140px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-left: -20px;
}
.gauge-chart {
flex: 1;
min-height: 120px;
position: relative;
}
:deep(.echarts-container) {
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 200px;
height: 200px;
}
.gauge-info {
padding: 4px 0;
text-align: center;
color: #fff;
margin-top: -20px;
}
.gauge-value {
font-size: 24px;
font-weight: bold;
line-height: 1.2;
margin-top: -16px;
}
.gauge-title {
font-size: 14px;
margin: 4px 0;
}
.sub-title {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
}
.gauge-desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin: 2px 0;
}
/* 在小屏幕下调整样式 */
@media screen and (max-width: 768px) {
.card-wrapper {
margin-bottom: 8px;
padding: 8px 4px;
}
:deep(.arco-row) {
margin: 0 !important;
}
:deep(.arco-col) {
padding: 0 !important;
}
.gauge-container {
height: 160px;
min-height: 90px;
}
.gauge-chart {
min-height: 70px;
}
.gauge-info {
padding: 2px 0;
}
.gauge-value {
font-size: 18px;
font-weight: bold;
margin-top: 2px;
}
.gauge-title {
font-size: 12px;
margin: 2px 0;
/* 右侧部分样式 */
.right-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.sub-title {
.info-section {
margin-bottom: 8px;
}
.section-title {
font-size: 14px;
font-weight: 500;
color: #fff;
margin-bottom: 4px;
padding-left: 6px;
border-left: 3px solid #fff;
}
.info-group {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 6px 8px;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
}
.info-item:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-label {
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
}
.gauge-desc {
font-size: 10px;
.info-value {
font-size: 13px;
font-weight: 500;
}
/* 调整仪表盘在小屏幕下的置 */
:deep(.echarts-container) {
top: 0;
transform: scale(0.9);
transform-origin: center 45%;
}
.gauge-info {
margin-top: -15px;
}
}
/* 在超小屏幕下进一步优化 */
@media screen and (max-width: 375px) {
/* 移动端适配 */
@media screen and (max-width: 768px) {
.card-wrapper {
padding: 4px 2px;
padding: 16px 12px;
}
.dashboard-layout {
gap: 12px;
}
.right-section {
gap: 6px;
}
.info-section {
margin-bottom: 8px;
}
.section-title {
font-size: 14px;
margin-bottom: 4px;
padding-left: 6px;
}
.info-group {
padding: 6px 8px;
}
.info-item {
padding: 4px 0;
}
.left-section {
width: 140px;
min-height: 180px;
}
.gauge-container {
height: 140px;
min-height: 80px;
width: 140px;
margin-left: -15px;
}
.gauge-chart {
min-height: 60px;
}
:deep(.echarts-container) {
top: 0;
transform: scale(0.85);
transform-origin: center 40%;
width: 140px;
height: 140px;
}
.gauge-info {
margin-top: -10px;
padding: 1px 0;
margin-top: -16px;
}
.gauge-value {
font-size: 18px;
margin-top: 2px;
}
.info-label {
font-size: 12px;
white-space: nowrap;
}
.info-value {
font-size: 13px;
word-break: break-all;
}
}
/* 超小屏幕优化 */
@media screen and (max-width: 375px) {
.card-wrapper {
padding: 10px 8px;
}
.dashboard-layout {
gap: 6px;
}
.left-section {
width: 120px;
min-height: 160px;
}
.gauge-container {
width: 120px;
margin-left: -10px;
}
.gauge-chart {
width: 120px;
height: 120px;
}
.gauge-info {
margin-top: -12px;
}
.gauge-value {
font-size: 16px;
}
.section-title {
font-size: 13px;
margin-bottom: 3px;
padding-left: 4px;
}
.info-group {
padding: 4px 6px;
}
.info-item {
padding: 3px 0;
}
.info-label {
font-size: 11px;
}
.info-value {
font-size: 12px;
}
}
</style>