Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 07:03:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3239 from xinnan-tech/update-theme

Browse Source 
模型配置页面样式调整
This commit is contained in:
wengzh
2026-06-23 16:31:30 +08:00
committed by GitHub
parent 7986148013 04bfddf457
commit b152c5dc23
15 changed files with 395 additions and 782 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/AddModelDialog.vue
+83 -165
View File
@@ -1,39 +1,38 @@
<template>
<el-dialog :visible="dialogVisible" @update:visible="handleVisibleChange" width="57%" center
custom-class="add-model-dialog" :show-close="false" class="center-dialog">
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
<div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
{{ $t('modelConfigDialog.addModel') }}
</div>
<button class="custom-close-btn" @click="handleClose">
×
</button>
<CustomDialog
:visible.sync="dialogVisible"
:title="$t('modelConfigDialog.addModel')"
width="57%"
class="add-model-dialog"
:confirmLoading="saving"
@close="handleClose"
@confirm="confirm"
>
<div class="dialog-content">
<!-- 模型信息部分 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div style="font-size: 20px; font-weight: bold; color: #3d4566;">{{ $t('modelConfigDialog.modelInfo') }}</div>
<div style="display: flex; align-items: center; gap: 20px;">
<div style="display: flex; align-items: center;">
<span style="margin-right: 8px;">{{ $t('modelConfigDialog.enable') }}</span>
<div class="section-header">
<div class="section-title">{{ $t('modelConfigDialog.modelInfo') }}</div>
<div class="switch-group">
<div class="switch-item">
<span>{{ $t('modelConfigDialog.enable') }}</span>
<el-switch v-model="formData.isEnabled" class="custom-switch"></el-switch>
</div>
<div style="display: none; align-items: center;">
<span style="margin-right: 8px;">{{ $t('modelConfigDialog.setDefault') }}</span>
<div class="switch-item" style="display: none;">
<span>{{ $t('modelConfigDialog.setDefault') }}</span>
<el-switch v-model="formData.isDefault" class="custom-switch"></el-switch>
</div>
</div>
</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
<el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
<div style="display: flex; gap: 20px; margin-bottom: 0;">
<div class="divider"></div>
<el-form :model="formData" label-width="auto" label-position="left" class="custom-form">
<div class="form-row">
<el-form-item :label="$t('modelConfigDialog.modelId')" prop="id" style="flex: 1;">
<el-input v-model="formData.id" :placeholder="$t('modelConfigDialog.enterModelId')" class="custom-input-bg"
maxlength="32"></el-input>
</el-form-item>
</div>
<div style="display: flex; gap: 20px; margin-bottom: 0;">
<div class="form-row">
<el-form-item :label="$t('modelConfigDialog.modelName')" prop="modelName" style="flex: 1;">
<el-input v-model="formData.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"
class="custom-input-bg"></el-input>
@@ -44,7 +43,7 @@
</el-form-item>
</div>
<div style="display: flex; gap: 20px; margin-bottom: 0;">
<div class="form-row">
<el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1;">
<el-select v-model="formData.supplier" :placeholder="$t('modelConfigDialog.selectSupplier')"
class="custom-select custom-input-bg" style="width: 100%;" @focus="loadProviders" filterable>
@@ -57,7 +56,6 @@
</el-form-item>
</div>
<el-form-item :label="$t('modelConfigDialog.docLink')" prop="docLink" style="margin-bottom: 27px;">
<el-input v-model="formData.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"
class="custom-input-bg"></el-input>
@@ -70,13 +68,13 @@
</el-form-item>
</el-form>
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">{{
$t('modelConfigDialog.callInfo') }}</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
<teleport v-if="chunkedCallInfoFields.length">
<div class="section-title">{{ $t('modelConfigDialog.callInfo') }}</div>
<div class="divider"></div>
</teleport>
<el-form :model="formData.configJson" label-width="auto" label-position="left" class="custom-form">
<div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex"
style="display: flex; gap: 20px; margin-bottom: 0;">
<div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex" class="form-row">
<el-form-item v-for="field in row" :key="field.prop" :label="field.label" :prop="field.prop" style="flex: 1;">
<el-input v-model="formData.configJson[field.prop]" :placeholder="field.placeholder"
:type="field.type || 'text'" class="custom-input-bg" :show-password="field.type === 'password'">
@@ -85,19 +83,17 @@
</div>
</el-form>
</div>
<div style="display: flex;justify-content: center;">
<el-button type="primary" @click="confirm" class="save-btn" :loading="saving" :disabled="saving">
{{ $t('modelConfigDialog.save') }}
</el-button>
</div>
</el-dialog>
</CustomDialog>
</template>
<script>
import Api from '@/apis/api';
import CustomDialog from './CustomDialog.vue';
export default {
name: 'AddModelDialog',
components: {
CustomDialog
},
props: {
visible: { type: Boolean, required: true },
modelType: { type: String, required: true }
@@ -178,16 +174,10 @@ export default {
});
this.formData.configJson = { ...defaultConfig };
},
handleVisibleChange(val) {
this.dialogVisible = val;
this.$emit('update:visible', val);
if (!val) {
this.resetForm();
}
},
handleClose() {
this.saving = false;
this.dialogVisible = false;
this.$emit('update:visible', false);
},
initDynamicConfig() {
@@ -232,7 +222,7 @@ export default {
try {
this.$emit('confirm', submitData);
this.$emit('update:visible', false);
this.handleClose();
this.resetForm();
} catch (e) {
console.error(e);
@@ -297,134 +287,64 @@ export default {
}
</script>
<style>
<style lang="scss" scoped>
::v-deep .el-dialog {
margin-top: 6vh !important;
}
.add-model-dialog {
position: relative;
border-radius: 20px;
overflow: hidden;
background: white;
padding-bottom: 17px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.add-model-dialog .el-dialog__header {
padding: 0;
border-bottom: none;
}
.section-title {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
color: #3d4566;
text-align: left;
}
.center-dialog {
display: flex;
align-items: center;
justify-content: center;
}
.switch-group {
display: flex;
align-items: center;
gap: 20px;
}
.center-dialog .el-dialog {
margin: 0 0 auto !important;
display: flex;
flex-direction: column;
}
.switch-item {
display: flex;
align-items: center;
.custom-close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 35px;
height: 35px;
border-radius: 50%;
border: 2px solid #cfcfcf;
background: none;
font-size: 30px;
font-weight: lighter;
color: #cfcfcf;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
padding: 0;
outline: none;
}
span {
margin-right: 8px;
}
}
.custom-close-btn:hover {
color: #409EFF;
border-color: #409EFF;
}
.divider {
height: 1px;
background: #e9e9e9;
margin-bottom: 16px;
}
.custom-select .el-input__suffix {
background: #e6e8ea;
right: 6px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
top: 9px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 0;
}
.custom-select .el-input__suffix-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.custom-select .el-icon-arrow-up:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #c0c4cc;
position: relative;
top: -2px;
transform: rotate(180deg);
.dialog-footer {
display: flex;
justify-content: center;
gap: 20px;
padding: 16px 20px;
}
}
.custom-form .el-form-item {
margin-bottom: 20px;
margin-bottom: 10px;
}
.custom-form .el-form-item__label {
color: #3d4566;
font-weight: normal;
text-align: right;
padding-right: 20px;
}
.custom-form .el-form-item.prop-remark .el-form-item__label {
margin-top: -4px;
}
.custom-input-bg .el-input__inner::-webkit-input-placeholder,
.custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
color: #9c9f9e;
}
.custom-input-bg .el-input__inner,
.custom-input-bg .el-textarea__inner {
background-color: #ffffff;
}
.save-btn {
background: #e6f0fd;
color: #237ff4;
border: 1px solid #b3d1ff;
width: 150px;
height: 40px;
font-size: 16px;
transition: all 0.3s ease;
}
.save-btn:hover {
background: linear-gradient(to right, #237ff4, #9c40d5);
color: white;
border: none;
}
.custom-switch .el-switch__core {
border-radius: 20px;
height: 23px;
@@ -439,7 +359,7 @@ export default {
background-color: white;
top: 3px;
left: 4px;
transition: all .3s;
transition: all 0.3s;
}
.custom-switch.is-checked .el-switch__core {
@@ -454,12 +374,10 @@ export default {
background-color: #1b47ee;
}
[style*="display: flex"] {
gap: 20px;
}
.custom-input-bg .el-input__inner {
height: 32px;
}
::v-deep .el-input__inner {
height: 32px;
}
</style>
main/manager-web/src/components/CustomButton.vue
+44 -8
View File
@@ -15,7 +15,7 @@ export default {
type: {
type: String,
default: 'default',
validator: (val) => ['default', 'confirm', 'delete'].includes(val)
validator: (val) => ['default', 'confirm', 'delete', 'add'].includes(val)
}
}
};
@@ -27,12 +27,12 @@ export default {
background: #4998ff;
color: #ffffff;
border: none;
border-radius: 6px;
border-radius: 4px;
transition: all 0.3s ease;
&.el-button--small {
padding: 10px;
font-size: 14px;
padding: 9px 14px;
font-size: 12px;
}
&.el-button--medium {
padding: 12px 20px;
@@ -62,11 +62,12 @@ export default {
background: linear-gradient(to right, #4a7cfd, #8154fc);
color: white;
border: none;
border-radius: 6px;
border-radius: 4px;
transition: all 0.3s ease;
&.el-button--small {
font-size: 14px;
padding: 9px 14px;
font-size: 12px;
}
&.el-button--medium {
padding: 12px 20px;
@@ -95,11 +96,12 @@ export default {
background: #ff6b6b;
color: white;
border: none;
border-radius: 6px;
border-radius: 4px;
transition: all 0.3s ease;
&.el-button--small {
font-size: 14px;
padding: 9px 14px;
font-size: 12px;
}
&.el-button--medium {
padding: 12px 20px;
@@ -122,4 +124,38 @@ export default {
cursor: not-allowed;
}
}
.custom-button--add {
width: fit-content;
background: #52c41a;
color: white;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
&.el-button--small {
padding: 9px 14px;
font-size: 12px;
}
&.el-button--medium {
padding: 12px 20px;
}
&:hover {
color: white;
border-color: transparent;
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
transform: translateY(-2px);
}
&.is-disabled,
&.is-disabled:hover {
background: linear-gradient(to right, #a0e89a, #c4f0c0);
color: rgba(255, 255, 255, 0.6);
border-color: transparent;
box-shadow: none;
transform: none;
cursor: not-allowed;
}
}
</style>
main/manager-web/src/components/CustomDialog.vue
-1
View File
@@ -127,7 +127,6 @@ export default {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 15vh !important;
}
::v-deep .el-dialog__header {
main/manager-web/src/components/ModelEditDialog.vue
+165 -271
View File
@@ -1,135 +1,109 @@
<template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="57%" center custom-class="custom-dialog"
:show-close="false" class="center-dialog">
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px">
<div style="
font-size: 30px;
color: #3d4566;
margin-top: -10px;
margin-bottom: 10px;
text-align: center;
">
{{
modelData.duplicateMode
? $t("modelConfigDialog.duplicateModel")
: $t("modelConfigDialog.editModel")
}}
</div>
<button class="custom-close-btn" @click="dialogVisible = false">×</button>
<div style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
">
<div style="font-size: 20px; font-weight: bold; color: #3d4566">
{{ $t("modelConfigDialog.modelInfo") }}
<CustomDialog
:title="$t('modelConfigDialog.editModel')"
:visible.sync="dialogVisible"
width="57%"
class="model-edit-dialog"
:confirmLoading="saving"
@confirm="handleSave"
@close="handleClose"
@open="handleOpen"
>
<div class="dialog-scroll-body">
<div class="header-row">
<div class="section-title">{{ $t("modelConfigDialog.modelInfo") }}</div>
<div class="switch-group">
<div class="switch-item">
<span class="switch-label">{{ $t("modelConfigDialog.enable") }}</span>
<el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
</div>
<div style="display: flex; align-items: center; gap: 20px">
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">{{ $t("modelConfigDialog.enable") }}</span>
<el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
</div>
<div style="display: none; align-items: center">
<span style="margin-right: 8px">{{
$t("modelConfigDialog.setDefault")
}}</span>
<el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
</div>
<div class="switch-item hidden">
<span class="switch-label">{{ $t("modelConfigDialog.setDefault") }}</span>
<el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
</div>
</div>
</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px"></div>
<div class="section-divider"></div>
<el-form :model="form" ref="form" label-width="auto" label-position="left" class="custom-form">
<div style="display: flex; gap: 20px; margin-bottom: 0">
<el-form-item :label="$t('modelConfigDialog.modelName')" prop="name" style="flex: 1">
<el-input v-model="form.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"
class="custom-input-bg"></el-input>
</el-form-item>
<el-form-item :label="$t('modelConfigDialog.modelCode')" prop="code" style="flex: 1">
<el-input v-model="form.modelCode" :placeholder="$t('modelConfigDialog.enterModelCode')"
class="custom-input-bg"></el-input>
</el-form-item>
</div>
<div style="display: flex; gap: 20px; margin-bottom: 0">
<el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1">
<el-select v-model="form.configJson.type" :placeholder="$t('modelConfigDialog.selectSupplier')"
class="custom-select custom-input-bg" style="width: 100%" @focus="loadProviders" filterable>
<el-option v-for="item in providers" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('modelConfigDialog.sortOrder')" prop="sort" style="flex: 1">
<el-input v-model.number="form.sort" type="number" :placeholder="$t('modelConfigDialog.enterSortOrder')"
class="custom-input-bg"></el-input>
</el-form-item>
</div>
<el-form-item :label="$t('modelConfigDialog.docLink')" prop="docUrl" style="margin-bottom: 27px">
<el-input v-model="form.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"
class="custom-input-bg"></el-input>
<el-form :model="form" ref="form" label-width="auto" label-position="left">
<div class="form-row">
<el-form-item :label="$t('modelConfigDialog.modelName')" prop="name" style="flex: 1">
<el-input v-model="form.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"></el-input>
</el-form-item>
<el-form-item :label="$t('modelConfigDialog.remark')" prop="remark" class="prop-remark">
<el-input v-model="form.remark" type="textarea" :rows="3" :placeholder="$t('modelConfigDialog.enterRemark')"
:autosize="{ minRows: 3, maxRows: 5 }" class="custom-input-bg"></el-input>
<el-form-item :label="$t('modelConfigDialog.modelCode')" prop="code" style="flex: 1">
<el-input v-model="form.modelCode" :placeholder="$t('modelConfigDialog.enterModelCode')"></el-input>
</el-form-item>
</el-form>
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px">
{{ $t("modelConfigDialog.callInfo") }}
</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px"></div>
<el-form :model="form.configJson" ref="callInfoForm" label-width="auto" class="custom-form">
<template v-for="(row, rowIndex) in chunkedCallInfoFields">
<div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0">
<el-form-item v-for="field in row" :key="field.prop" :label="field.label" :prop="field.prop"
style="flex: 1">
<template v-if="field.type === 'json-textarea'">
<el-input v-model="fieldJsonMap[field.prop]" type="textarea" :rows="3"
:placeholder="$t('modelConfigDialog.enterJsonExample')" class="custom-input-bg"
@change="(val) => handleJsonChange(field.prop, val)" @focus="
isSensitiveField(field.prop)
? handleJsonInputFocus(field.prop, fieldJsonMap[field.prop])
: undefined
" @blur="
isSensitiveField(field.prop)
? handleJsonInputBlur(field.prop)
: undefined
"></el-input>
</template>
<div class="form-row">
<el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1">
<el-select v-model="form.configJson.type" :placeholder="$t('modelConfigDialog.selectSupplier')"
style="width: 100%" @focus="loadProviders" filterable>
<el-option v-for="item in providers" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('modelConfigDialog.sortOrder')" prop="sort" style="flex: 1">
<el-input v-model.number="form.sort" type="number" :placeholder="$t('modelConfigDialog.enterSortOrder')"></el-input>
</el-form-item>
</div>
<el-input v-else v-model="form.configJson[field.prop]" :placeholder="field.placeholder" :type="field.type"
class="custom-input-bg" :show-password="field.type === 'password'" @focus="
<el-form-item :label="$t('modelConfigDialog.docLink')" prop="docUrl" style="margin-bottom: 27px">
<el-input v-model="form.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"></el-input>
</el-form-item>
<el-form-item :label="$t('modelConfigDialog.remark')" prop="remark" class="prop-remark">
<el-input v-model="form.remark" type="textarea" :rows="4" :placeholder="$t('modelConfigDialog.enterRemark')"></el-input>
</el-form-item>
</el-form>
<teleport v-if="chunkedCallInfoFields.length">
<div class="section-title">{{ $t("modelConfigDialog.callInfo") }}</div>
<div class="section-divider"></div>
</teleport>
<el-form :model="form.configJson" ref="callInfoForm" label-width="auto">
<template>
<div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex" class="form-row">
<el-form-item v-for="field in row" :key="field.prop" :label="field.label" :prop="field.prop"
style="flex: 1">
<template v-if="field.type === 'json-textarea'">
<el-input v-model="fieldJsonMap[field.prop]" type="textarea" :rows="3"
:placeholder="$t('modelConfigDialog.enterJsonExample')"
@change="(val) => handleJsonChange(field.prop, val)" @focus="
isSensitiveField(field.prop)
? handleInputFocus(field.prop, form.configJson[field.prop])
? handleJsonInputFocus(field.prop, fieldJsonMap[field.prop])
: undefined
" @blur="
isSensitiveField(field.prop) ? handleInputBlur(field.prop) : undefined
isSensitiveField(field.prop)
? handleJsonInputBlur(field.prop)
: undefined
"></el-input>
</el-form-item>
</div>
</template>
</el-form>
</div>
</template>
<div style="display: flex; justify-content: center">
<el-button type="primary" @click="handleSave" class="save-btn" :loading="saving" :disabled="saving">
{{ $t("modelConfigDialog.save") }}
</el-button>
<el-input v-else v-model="form.configJson[field.prop]" :placeholder="field.placeholder" :type="field.type"
:show-password="field.type === 'password'" @focus="
isSensitiveField(field.prop)
? handleInputFocus(field.prop, form.configJson[field.prop])
: undefined
" @blur="
isSensitiveField(field.prop) ? handleInputBlur(field.prop) : undefined
"></el-input>
</el-form-item>
</div>
</template>
</el-form>
</div>
</el-dialog>
</CustomDialog>
</template>
<script>
import CustomDialog from './CustomDialog.vue';
import Api from "@/apis/api";
export default {
name: "ModelEditDialog",
components: { CustomDialog },
props: {
visible: { type: Boolean, default: false },
modelData: {
@@ -175,6 +149,11 @@ export default {
};
},
computed: {
title() {
return this.modelData.duplicateMode
? this.$t("modelConfigDialog.duplicateModel")
: this.$t("modelConfigDialog.editModel");
},
chunkedCallInfoFields() {
const chunkSize = 2;
const result = [];
@@ -189,19 +168,11 @@ export default {
this.resetProviders();
this.loadProviders();
},
dialogVisible(val) {
this.$emit("update:visible", val);
if (!val) {
this.resetForm();
} else if (val && this.modelData.id) {
this.loadModelData();
}
},
visible(val) {
this.dialogVisible = val;
if (val) {
this.loadProviders();
}
},
dialogVisible(val) {
this.$emit("update:visible", val);
},
"form.configJson.type"(newVal) {
if (newVal && this.providersLoaded) {
@@ -210,6 +181,19 @@ export default {
},
},
methods: {
handleOpen() {
this.loadProviders();
if (this.modelData.id) {
this.loadModelData();
}
},
handleClose() {
this.saving = false;
// 处理关闭弹窗闪动问题
setTimeout(() => {
this.resetForm();
}, 200)
},
resetForm() {
this.form = {
id: "",
@@ -480,168 +464,78 @@ export default {
</script>
<style lang="scss" scoped>
.custom-dialog {
position: relative;
border-radius: 20px;
overflow: hidden;
background: white;
padding-bottom: 17px;
::v-deep .el-dialog {
margin-top: 6vh !important;
}
.model-edit-dialog {
.dialog-scroll-body {
max-height: 72vh;
overflow-y: auto;
overflow-x: hidden;
.custom-dialog .el-dialog__header {
padding: 0;
border-bottom: none;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #a1c9fd;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: #f0f3fe;
border-radius: 3px;
}
}
.center-dialog {
display: flex;
align-items: center;
justify-content: center;
}
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.custom-close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 35px;
height: 35px;
border-radius: 50%;
border: 2px solid #cfcfcf;
background: none;
font-size: 30px;
font-weight: lighter;
color: #cfcfcf;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
padding: 0;
outline: none;
}
.section-title {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
color: #3d4566;
text-align: left;
}
.custom-close-btn:hover {
color: #409eff;
border-color: #409eff;
}
.switch-group {
display: flex;
align-items: center;
gap: 20px;
}
.custom-select .el-input__suffix {
background: #e6e8ea;
right: 6px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
top: 9px;
}
.switch-item {
display: flex;
align-items: center;
.custom-select .el-input__suffix-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
&.hidden {
display: none;
}
.custom-select .el-icon-arrow-up:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #c0c4cc;
position: relative;
top: -2px;
transform: rotate(180deg);
}
.switch-label {
margin-right: 8px;
}
}
.custom-form .el-form-item {
margin-bottom: 20px;
}
.section-divider {
height: 1px;
background: #e9e9e9;
margin-bottom: 16px;
}
.custom-form .el-form-item__label {
color: #3d4566;
font-weight: normal;
text-align: right;
padding-right: 20px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 0;
}
.custom-form .el-form-item.prop-remark .el-form-item__label {
margin-top: -4px;
}
.custom-input-bg .el-input__inner::-webkit-input-placeholder,
.custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
color: #9c9f9e;
}
.custom-input-bg .el-input__inner,
.custom-input-bg .el-textarea__inner {
background-color: #f6f8fc;
}
.save-btn {
background: #e6f0fd;
color: #237ff4;
border: 1px solid #b3d1ff;
width: 150px;
height: 40px;
font-size: 16px;
transition: all 0.3s ease;
}
.save-btn:hover {
background: linear-gradient(to right, #237ff4, #9c40d5);
color: white;
border: none;
}
.custom-switch .el-switch__core {
border-radius: 20px;
height: 23px;
background-color: #c0ccda;
width: 35px;
padding: 0 20px;
}
.custom-switch .el-switch__core:after {
width: 15px;
height: 15px;
background-color: white;
top: 3px;
left: 4px;
transition: all 0.3s;
}
.custom-switch.is-checked .el-switch__core {
border-color: #b5bcf0;
background-color: #cfd7fa;
padding: 0 20px;
}
.custom-switch.is-checked .el-switch__core:after {
left: 100%;
margin-left: -18px;
background-color: #1b47ee;
}
[style*="display: flex"] {
gap: 20px;
}
.custom-input-bg .el-input__inner {
height: 32px;
}
.custom-form .el-form-item {
margin-bottom: 20px;
}
.custom-form .el-form-item__label {
color: #3d4566;
font-weight: normal;
text-align: right;
padding-right: 20px;
::v-deep .el-input__inner {
height: 32px;
}
::v-deep .el-form-item {
margin-bottom: 10px;
}
}
</style>
main/manager-web/src/components/TtsModel.vue
+16 -61
View File
@@ -1,9 +1,7 @@
<template>
<el-dialog :visible.sync="localVisible" width="90%" @close="handleClose" :show-close="false" :append-to-body="true"
:close-on-click-modal="true">
<button class="custom-close-btn" @click="handleClose">
×
</button>
<CustomDialog :visible.sync="localVisible" :title="$t('modelConfig.voiceManagement')" width="90%"
:close-on-click-modal="true" :destroy-on-close="false" :footer="false" :append-to-body="true"
@close="handleClose">
<div class="scroll-wrapper">
<div class="table-container" ref="tableContainer" @scroll="handleScroll">
<el-table v-loading="loading" :data="filteredTtsModels" style="width: 100%;" class="data-table"
@@ -92,25 +90,27 @@
</div>
</div>
<div class="action-buttons">
<el-button type="primary" size="mini" @click="toggleSelectAll" style="background: #606ff3;border: None">
<CustomButton :icon="selectAll ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" type="default" @click="toggleSelectAll">
{{ selectAll ? $t('ttsModel.deselectAll') : $t('ttsModel.selectAll') }}
</el-button>
<el-button type="primary" size="mini" @click="addNew" style="background: #5bc98c;border: None;">
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" type="add" @click="addNew">
{{ $t('ttsModel.add') }}
</el-button>
<el-button type="primary" size="mini" @click="deleteRow(filteredTtsModels.filter(row => row.selected))"
style="background: red;border:None">{{ $t('ttsModel.delete') }}
</el-button>
</CustomButton>
<CustomButton icon="el-icon-delete" size="small" type="delete" @click="deleteRow(filteredTtsModels.filter(row => row.selected))">
{{ $t('ttsModel.delete') }}
</CustomButton>
</div>
</el-dialog>
</CustomDialog>
</template>
<script>
import Api from "@/apis/api";
import AudioPlayer from './AudioPlayer.vue';
import CustomDialog from './CustomDialog.vue';
import CustomButton from './CustomButton.vue';
export default {
components: { AudioPlayer },
components: { AudioPlayer, CustomDialog, CustomButton },
props: {
visible: {
type: Boolean,
@@ -532,18 +532,6 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
border-radius: 8px !important;
overflow: hidden;
top: 1vh !important;
}
::v-deep .el-dialog__header {
display: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 表格样式 */
::v-deep .data-table .el-table__header th {
color: black;
@@ -570,33 +558,6 @@ export default {
border: none !important;
}
/* 关闭按钮 */
.custom-close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #cfcfcf;
background: none;
font-size: 30px;
font-weight: lighter;
color: #cfcfcf;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
padding: 0;
outline: none;
}
.custom-close-btn:hover {
color: #409EFF;
border-color: #409EFF;
}
/* 备注文本 */
::v-deep .remark-input .el-textarea__inner {
border-radius: 4px;
@@ -691,11 +652,6 @@ export default {
margin: 0 auto;
}
.action-buttons .el-button {
padding: 8px 15px;
font-size: 11px;
}
.edit-btn,
.delete-btn,
.save-btn {
@@ -727,9 +683,8 @@ export default {
/* 按钮组定位调整 */
.action-buttons {
position: static;
padding: 15px 0;
background: white;
padding-top: 10px;
text-align: left;
}
/* 输入框自适应 */
main/manager-web/src/views/AddressBookManagement.vue
+6 -7
View File
@@ -141,11 +141,9 @@
<p class="section-desc">{{ $t('addressBookManagement.setPermissionDesc', { count: selectedPermissions.length }) }}</p>
</div>
<div class="section-actions">
<el-button size="small" @click="handleCancel">{{ $t('common.cancel') }}</el-button>
<el-button size="small" @click="handleToggleSelectAll">
{{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }}
</el-button>
<el-button type="primary" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</el-button>
<CustomButton size="small" @click="handleCancel">{{ $t('common.cancel') }}</CustomButton>
<CustomButton size="small" @click="handleToggleSelectAll">{{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }}</CustomButton>
<CustomButton type="confirm" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</CustomButton>
</div>
</div>
@@ -208,10 +206,11 @@ import VersionFooter from "@/components/VersionFooter.vue";
import Api from "@/apis/api.js";
import AddressBookApi from "@/apis/module/addressBook.js";
import MacAddressMask from "@/components/MacAddressMask.vue";
import CustomButton from "@/components/CustomButton.vue";
export default {
name: "AddressBookManagement",
components: { HeaderBar, VersionFooter, MacAddressMask },
components: { HeaderBar, VersionFooter, MacAddressMask, CustomButton },
data() {
return {
searchKeyword: "",
@@ -946,8 +945,8 @@ export default {
}
.section-actions {
margin-top: 4px;
display: flex;
gap: 8px;
}
}
}
main/manager-web/src/views/AgentTemplateManagement.vue
+1 -1
View File
@@ -54,7 +54,7 @@
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t("agentTemplateManagement.deselectAll") : $t("agentTemplateManagement.selectAll") }}
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddTemplateDialog">
<CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddTemplateDialog">
{{ $t("agentTemplateManagement.createTemplate") }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDeleteTemplate">
main/manager-web/src/views/DictManagement.vue
+1 -1
View File
@@ -65,7 +65,7 @@
size="small" @click="selectAllDictData">
{{ isAllDictDataSelected ? $t('dictManagement.deselectAll') : $t('dictManagement.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDictDataDialog">
<CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDictDataDialog">
{{ $t('dictManagement.addDictData') }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDeleteDictData">
main/manager-web/src/views/KnowledgeBaseItem.vue
+5 -4
View File
@@ -14,9 +14,9 @@
prefix-icon="el-icon-search"
clearable
/>
<el-button size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</el-button>
<el-button size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</el-button>
<el-button size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</el-button>
<CustomButton size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</CustomButton>
<CustomButton type="add" size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</CustomButton>
<CustomButton type="confirm" size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</CustomButton>
</div>
</div>
<div class="doc-grid" v-loading="docLoading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
@@ -85,6 +85,7 @@
<script>
import Api from "@/apis/api";
import CustomButton from "@/components/CustomButton.vue";
import CustomPagination from "@/components/CustomPagination.vue";
const iconMap = {
@@ -101,7 +102,7 @@ const iconMap = {
export default {
name: 'LibraryItem',
components: { CustomPagination },
components: { CustomPagination, CustomButton },
props: {
kb: {
type: Object,
main/manager-web/src/views/ModelConfig.vue
+67 -256
View File
@@ -105,7 +105,8 @@
>
<el-switch
v-model="scope.row.isEnabled"
class="custom-switch"
active-color="#5778ff"
inactive-color="#DCDFE6"
:active-value="1"
:inactive-value="0"
disabled
@@ -115,7 +116,8 @@
<el-switch
v-else
v-model="scope.row.isEnabled"
class="custom-switch"
active-color="#5778ff"
inactive-color="#DCDFE6"
:active-value="1"
:inactive-value="0"
@change="handleStatusChange(scope.row)"
@@ -126,7 +128,8 @@
<template slot-scope="scope">
<el-switch
v-model="scope.row.isDefault"
class="custom-switch"
active-color="#5778ff"
inactive-color="#DCDFE6"
:active-value="1"
:inactive-value="0"
@change="handleDefaultChange(scope.row)"
@@ -184,76 +187,33 @@
</el-table>
<div class="table-footer">
<div class="batch-actions">
<el-button size="mini" type="primary" @click="selectAll">
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" type="default" size="small" @click="selectAll">
{{
isAllSelected
? $t("modelConfig.deselectAll")
: $t("modelConfig.selectAll")
}}
</el-button>
<el-button type="success" size="mini" @click="addModel" class="add-btn">
</CustomButton>
<CustomButton icon="el-icon-plus" type="add" size="small" @click="addModel">
{{ $t("modelConfig.add") }}
</el-button>
<el-button
size="mini"
type="danger"
</CustomButton>
<CustomButton
type="delete"
size="small"
icon="el-icon-delete"
@click="batchDelete"
>
{{ $t("modelConfig.delete") }}
</el-button>
</div>
<div class="custom-pagination">
<el-select
v-model="pageSize"
@change="handlePageSizeChange"
class="page-size-select"
>
<el-option
v-for="item in pageSizeOptions"
:key="item"
:label="$t('modelConfig.itemsPerPage', { items: item })"
:value="item"
>
</el-option>
</el-select>
<button
class="pagination-btn"
:disabled="currentPage === 1"
@click="goFirst"
>
{{ $t("modelConfig.firstPage") }}
</button>
<button
class="pagination-btn"
:disabled="currentPage === 1"
@click="goPrev"
>
{{ $t("modelConfig.prevPage") }}
</button>
<button
v-for="page in visiblePages"
:key="page"
class="pagination-btn"
:class="{ active: page === currentPage }"
@click="goToPage(page)"
>
{{ page }}
</button>
<button
class="pagination-btn"
:disabled="currentPage === pageCount"
@click="goNext"
>
{{ $t("modelConfig.nextPage") }}
</button>
<span class="total-text">{{
$t("modelConfig.totalRecords", { total })
}}</span>
</CustomButton>
</div>
<CustomPagination
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:page-size-options="pageSizeOptions"
@size-change="handlePageSizeChange"
@page-change="handlePageChange"
/>
</div>
</el-card>
</div>
@@ -288,9 +248,11 @@ import AddModelDialog from "@/components/AddModelDialog.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import ModelEditDialog from "@/components/ModelEditDialog.vue";
import TtsModel from "@/components/TtsModel.vue";
import CustomPagination from "@/components/CustomPagination.vue";
import CustomButton from "@/components/CustomButton.vue";
import VersionFooter from "@/components/VersionFooter.vue";
export default {
components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog, VersionFooter },
components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog, VersionFooter, CustomPagination, CustomButton },
data() {
return {
addDialogVisible: false,
@@ -334,24 +296,6 @@ export default {
this.$t("modelConfig." + this.activeTab) || this.$t("modelConfig.modelConfig")
);
},
pageCount() {
return Math.ceil(this.total / this.pageSize);
},
visiblePages() {
const pages = [];
const maxVisible = 3;
let start = Math.max(1, this.currentPage - 1);
let end = Math.min(this.pageCount, start + maxVisible - 1);
if (end - start + 1 < maxVisible) {
start = Math.max(1, end - maxVisible + 1);
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
return pages;
},
},
methods: {
@@ -481,9 +425,9 @@ export default {
this.$message.info(this.$t("modelConfig.deleteCancelled"));
});
},
handleCurrentChange(page) {
handlePageChange(page) {
this.currentPage = page;
this.$refs.modelTable.clearSelection();
this.loadData();
},
handleModelSave({ provideCode, formData, done }) {
const modelType = this.activeTab;
@@ -558,28 +502,6 @@ export default {
});
},
// 分页器
goFirst() {
this.currentPage = 1;
this.loadData();
},
goPrev() {
if (this.currentPage > 1) {
this.currentPage--;
this.loadData();
}
},
goNext() {
if (this.currentPage < this.pageCount) {
this.currentPage++;
this.loadData();
}
},
goToPage(page) {
this.currentPage = page;
this.loadData();
},
// 获取模型配置列表
loadData() {
this.loading = true; // 开始加载
@@ -793,50 +715,6 @@ export default {
transition: border-color 0.2s;
}
::v-deep .page-size-select {
width: 100px;
margin-right: 8px;
}
::v-deep .page-size-select .el-input__inner {
height: 32px;
line-height: 32px;
border-radius: 4px;
border: 1px solid #e4e7ed;
background: #dee7ff;
color: #606266;
font-size: 14px;
}
::v-deep .page-size-select .el-input__suffix {
right: 6px;
width: 15px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
top: 6px;
border-radius: 4px;
}
::v-deep .page-size-select .el-input__suffix-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
::v-deep .page-size-select .el-icon-arrow-up:before {
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 9px solid #606266;
position: relative;
transform: rotate(0deg);
transition: transform 0.3s;
}
::v-deep .search-input .el-input__inner:focus {
border-color: #6b8cff;
outline: none;
@@ -869,53 +747,53 @@ export default {
background: white;
}
.batch-actions {
display: flex;
gap: 8px;
}
// .batch-actions {
// display: flex;
// gap: 8px;
// }
.batch-actions .el-button {
min-width: 72px;
height: 32px;
padding: 7px 12px 7px 10px;
font-size: 12px;
border-radius: 4px;
line-height: 1;
font-weight: 500;
border: none;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
// .batch-actions .el-button {
// min-width: 72px;
// height: 32px;
// padding: 7px 12px 7px 10px;
// font-size: 12px;
// border-radius: 4px;
// line-height: 1;
// font-weight: 500;
// border: none;
// transition: all 0.3s ease;
// box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
// }
.batch-actions .el-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
// .batch-actions .el-button:hover {
// transform: translateY(-1px);
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
// }
.batch-actions .el-button--primary {
background: #5f70f3 !important;
color: white;
}
// .batch-actions .el-button--primary {
// background: #5f70f3 !important;
// color: white;
// }
.batch-actions .el-button--success {
background: #5bc98c;
color: white;
}
// .batch-actions .el-button--success {
// background: #5bc98c;
// color: white;
// }
.batch-actions .el-button--danger {
background: #fd5b63;
color: white;
}
// .batch-actions .el-button--danger {
// background: #fd5b63;
// color: white;
// }
.batch-actions .el-button:first-child {
background: linear-gradient(135deg, #409eff, #6b8cff);
border: none;
color: white;
}
// .batch-actions .el-button:first-child {
// background: linear-gradient(135deg, #409eff, #6b8cff);
// border: none;
// color: white;
// }
.batch-actions .el-button:first-child:hover {
background: linear-gradient(135deg, #3a8ee6, #5a7cff);
}
// .batch-actions .el-button:first-child:hover {
// background: linear-gradient(135deg, #3a8ee6, #5a7cff);
// }
.el-table th ::v-deep .el-table__cell {
overflow: hidden;
@@ -1018,73 +896,6 @@ export default {
padding-right: 10px;
}
/* 分页器 */
.custom-pagination {
display: flex;
align-items: center;
gap: 8px;
/* 导航按钮样式 (首页、上一页、下一页) */
.pagination-btn:first-child,
.pagination-btn:nth-child(2),
.pagination-btn:nth-child(3),
.pagination-btn:nth-last-child(2) {
min-width: 60px;
height: 32px;
padding: 0 12px;
border-radius: 4px;
border: 1px solid #e4e7ed;
background: #dee7ff;
color: #606266;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: #d7dce6;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
/* 数字按钮样式 */
.pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-last-child(2)) {
min-width: 28px;
height: 32px;
padding: 0;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
color: #606266;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: rgba(245, 247, 250, 0.3);
}
}
.pagination-btn.active {
background: #5f70f3 !important;
color: #ffffff !important;
border-color: #5f70f3 !important;
&:hover {
background: #6d7cf5 !important;
}
}
.total-text {
color: #909399;
font-size: 14px;
margin-left: 10px;
}
}
.model-card {
background: white;
flex: 1;
main/manager-web/src/views/OtaManagement.vue
+1 -1
View File
@@ -52,7 +52,7 @@
size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDialog">
<CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDialog">
{{ $t('otaManagement.addNew') }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete"
main/manager-web/src/views/ParamsManagement.vue
+1 -1
View File
@@ -60,7 +60,7 @@
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('paramManagement.deselectAll') : $t('paramManagement.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDialog">
<CustomButton icon="el-icon-plus" type="add" size="small" @click="showAddDialog">
{{ $t('paramManagement.add') }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedParams">
main/manager-web/src/views/ProviderManagement.vue
+1 -1
View File
@@ -67,7 +67,7 @@
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDialog">
<CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDialog">
{{ $t('common.add') }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedProviders">
main/manager-web/src/views/ReplacementWordManagement.vue
+1 -1
View File
@@ -70,7 +70,7 @@
>
{{ allSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="handleAdd">
<CustomButton type="add" icon="el-icon-plus" size="small" @click="handleAdd">
{{ $t('replacementWordManagement.addFile') }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="handleBatchDelete">
main/manager-web/src/views/UserManagement.vue
+3 -3
View File
@@ -52,12 +52,12 @@
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
</CustomButton>
<CustomButton size="small" icon="el-icon-circle-check" @click="batchEnable">{{
$t('user.enable')
}}</CustomButton>
<CustomButton size="small" icon="el-icon-remove-outline" @click="batchDisable">
{{$t('user.disable') }}
</CustomButton>
<CustomButton size="small" type="add" icon="el-icon-circle-check" @click="batchEnable">{{
$t('user.enable')
}}</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDelete">{{ $t('user.delete')
}}</CustomButton>
</div>