WFC/fe.wfc
2
0
Fork 0
Code Activity

fix：限速设置界面中英适配

Browse Source
This commit is contained in:
zhongzm
2025-02-08 18:36:18 +08:00
parent 196ff4bcdc
commit 66b705ab17
3 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -829,6 +829,34 @@ const local: any = {
geterr:'Failed to get the billing rule',
updatesuc:'Update successful',
updateerr:'Update failed'
},
ratelimit:{
title:'Speed limit management',
change:'Modify speed limit configuration',
add:'New speed limit configuration.',
name:'Limie Name',
plename:'Please enter speed limit name.',
upratelimit:'Up Rate Limit',
useuplimit:'Enable upstream rate limiting.',
uplimit:'Upstream bandwidth',
pleuplimit:'Please enter upstream bandwidth.',
downratelimit:'Down Rate Limit',
usedownlimit:'Enable downstream speed limit',
downlimit:'Downstream bandwidth',
pledownlimit:'Please enter downstream bandwidth.',
reject:'Please enter bandwidth value greater than 0.',
confirmdelete:'Confirm deletion.',
deletecontant:'It is confirmed to delete the speed limit configuration',
deletesuc:'Deletion successful.',
idnull:'The editor ID cannot be empty.',
changesuc:'Modification successful.',
addsuc:'Addition successful.',
changeerror:'Modification failed.',
adderror:'Failed to add.',
unlimit:'Unlimited',
operate:'Operate',
changed:'Revise',
delete:'Delete',
}
},
form: {

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

@@ -829,6 +829,34 @@ const local:any = {
geterr:'获取计费规则失败',
updatesuc:'更新成功',
updateerr:'更新失败'
},
ratelimit:{
title:'限速管理',
change:'修改限速配置',
add:'新增限速配置',
name:'限速名称',
plename:'请输入限速名称',
upratelimit:'上行限速',
useuplimit:'启用上行限速',
uplimit:'上行带宽',
pleuplimit:'请输入上行带宽',
downratelimit:'下行限速',
usedownlimit:'启用下行限速',
downlimit:'下行带宽',
pledownlimit:'请输入下行带宽',
reject:'请输入大于0的带宽值',
confirmdelete:'确认删除',
deletecontant:'确定要删除限速配置',
deletesuc:'删除成功',
idnull:'编辑ID不能为空',
changesuc:'修改成功',
addsuc:'添加成功',
changeerror:'修改失败',
adderror:'添加失败',
unlimit:'无限制',
operate:'操作',
changed:'修改',
delete:'删除',
}
},
form: {

76
src/views/billing/ratelimit/index.vue
View File

@@ -2,25 +2,20 @@
<SimpleScrollbar>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<ACard
title="限速管理"
:title="t('page.ratelimit.title')"
:bordered="false"
:body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
>
<template #extra>
<div class="flex items-center gap-2">
<AButton type="primary" @click="handleAdd">
<template #icon>
<PlusOutlined />
</template>
新增
</AButton>
<TableHeaderOperation
v-model:columns="columnChecks"
:loading="loading"
:show-delete="false"
:show-add="false"
@refresh="getData"
@add="handleAdd"
/>
</div>
</template>
@@ -40,7 +35,7 @@
<!-- 新增限速配置弹窗 -->
<AModal
v-model:visible="showModal"
:title="isEdit ? '修改限速配置' : '新增限速配置'"
:title="isEdit ? t('page.ratelimit.change') : t('page.ratelimit.add')"
@ok="handleOk"
@cancel="handleCancel"
>
@@ -51,24 +46,24 @@
:label-col="{ span: 6 }"
:wrapper-col="{ span: 16 }"
>
<AFormItem label="限速名称" name="rateLimitName">
<AInput v-model:value="formState.rateLimitName" placeholder="请输入限速名称" />
<AFormItem :label="t('page.ratelimit.name')" name="rateLimitName">
<AInput v-model:value="formState.rateLimitName" :placeholder="t('page.ratelimit.plename')" />
</AFormItem>
<AFormItem label="上行限速" name="upLimitEnable">
<ACheckbox v-model:checked="formState.upLimitEnable">启用上行限速</ACheckbox>
<AFormItem :label="t('page.ratelimit.upratelimit')" name="upLimitEnable">
<ACheckbox v-model:checked="formState.upLimitEnable">{{ t('page.ratelimit.useuplimit') }}</ACheckbox>
</AFormItem>
<AFormItem
v-if="formState.upLimitEnable"
label="上行带宽"
:label="t('page.ratelimit.uplimit')"
name="upLimit"
>
<div class="flex gap-2">
<AFormItem name="upLimit" class="mb-0 flex-1">
<AInputNumber
v-model:value="formState.upLimit"
placeholder="请输入上行带宽"
:placeholder="t('page.ratelimit.pleuplimit')"
:min="1"
style="width: 100%"
/>
@@ -83,20 +78,20 @@
</div>
</AFormItem>
<AFormItem label="下行限速" name="downLimitEnable">
<ACheckbox v-model:checked="formState.downLimitEnable">启用下行限速</ACheckbox>
<AFormItem :label="t('page.ratelimit.downratelimit')" name="downLimitEnable">
<ACheckbox v-model:checked="formState.downLimitEnable">{{ t('page.ratelimit.usedownlimit') }}</ACheckbox>
</AFormItem>
<AFormItem
v-if="formState.downLimitEnable"
label="下行带宽"
:label="t('page.ratelimit.downlimit')"
name="downLimit"
>
<div class="flex gap-2">
<AFormItem name="downLimit" class="mb-0 flex-1">
<AInputNumber
v-model:value="formState.downLimit"
placeholder="请输入下行带宽"
:placeholder="t('page.ratelimit.pledownlimit')"
:min="1"
style="width: 100%"
/>
@@ -126,7 +121,8 @@ import { message, Modal, Button } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { bandwidthUnits, convertBandwidth, formatBandwidth, type BandwidthUnit } from '@/utils/units';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
interface RateLimitForm extends Omit<Api.Auth.RateLimitAdd, 'upLimit' | 'downLimit'> {
upLimit: number;
downLimit: number;
@@ -157,15 +153,15 @@ const formState = ref<RateLimitForm>({
});
const rules: Record<string, Rule[]> = {
rateLimitName: [{ required: true, message: '请输入限速名称', trigger: 'blur' }],
rateLimitName: [{ required: true, message: t('page.ratelimit.plename'), trigger: 'blur' }],
upLimit: [
{
required: true,
message: '请输入上行限速带宽',
message: t('page.ratelimit.pleuplimit'),
trigger: 'blur',
validator: (_rule: Rule, value: number) => {
if (!formState.value.upLimitEnable) return Promise.resolve();
if (!value || value <= 0) return Promise.reject('请输入大于0的带宽值');
if (!value || value <= 0) return Promise.reject(t('page.ratelimit.reject'));
return Promise.resolve();
}
}
@@ -173,11 +169,11 @@ const rules: Record<string, Rule[]> = {
downLimit: [
{
required: true,
message: '请输入下行限速带宽',
message: t('page.ratelimit.pledownlimit'),
trigger: 'blur',
validator: (_rule: Rule, value: number) => {
if (!formState.value.downLimitEnable) return Promise.resolve();
if (!value || value <= 0) return Promise.reject('请输入大于0的带宽值');
if (!value || value <= 0) return Promise.reject(t('page.ratelimit.reject'));
return Promise.resolve();
}
}
@@ -221,16 +217,16 @@ const handleEdit = (record: Api.Auth.RateLimit) => {
const handleDelete = (record: Api.Auth.RateLimit) => {
Modal.confirm({
title: '确认删除',
title: t('page.ratelimit.confirmdelete'),
icon: () => <ExclamationCircleOutlined />,
content: `确定要删除限速配置 "${record.rateLimitName}" 吗？`,
content: `${t('page.ratelimit.deletecontant')} "${record.rateLimitName}"?`,
async onOk() {
try {
await removeRateLimit(record.id);
message.success('删除成功');
message.success(t('page.ratelimit.deletesuc'));
getData();
} catch (error) {
console.error('删除失败:', error);
console.error('error:', error);
}
}
});
@@ -264,7 +260,7 @@ const handleOk = async () => {
if (isEdit.value) {
if (!editId.value) {
message.error('编辑ID不能为空');
message.error(t('page.ratelimit.idnull'));
return;
}
await editRateLimit({
@@ -275,15 +271,15 @@ const handleOk = async () => {
upLimit: submitData.upLimit,
downLimit: submitData.downLimit
});
message.success('修改成功');
message.success(t('page.ratelimit.changesuc'));
} else {
await addRateLimit(submitData);
message.success('添加成功');
message.success(t('page.ratelimit.addsuc'));
}
handleCancel();
getData();
} catch (error) {
message.error(isEdit.value ? '修改失败' : '添加失败');
message.error(isEdit.value ? 'change error' : 'add error');
}
};
@@ -319,16 +315,16 @@ const {
{
key: 'rateLimitName',
dataIndex: 'rateLimitName',
title: '限速名称',
title: t('page.ratelimit.name'),
align: 'center'
},
{
key: 'upLimit',
dataIndex: 'upLimit',
title: '上行限速',
title: t('page.ratelimit.upratelimit'),
align: 'center',
customRender: ({ text, record }) => {
if (!record.upLimitEnable) return '无限制';
if (!record.upLimitEnable) return t('page.ratelimit.unlimit');
const { value, unit } = formatBandwidth(text);
return `${value} ${unit}`;
}
@@ -336,16 +332,16 @@ const {
{
key: 'downLimit',
dataIndex: 'downLimit',
title: '下行限速',
title: t('page.ratelimit.downratelimit'),
align: 'center',
customRender: ({ text, record }) => {
if (!record.downLimitEnable) return '无限制';
if (!record.downLimitEnable) return t('page.ratelimit.unlimit');
const { value, unit } = formatBandwidth(text);
return `${value} ${unit}`;
}
},
{
title: '操作',
title: t('page.ratelimit.operate'),
key: 'operate',
align: 'center',
width: 200,
@@ -353,10 +349,10 @@ const {
customRender: ({ record }) => (
<div class="flex justify-center gap-2">
<Button type="link" onClick={() => handleEdit(record)}>
修改
{ t('page.ratelimit.changed') }
</Button>
<Button type="link" danger onClick={() => handleDelete(record)}>
删除
{t('page.ratelimit.delete')}
</Button>
</div>
)