Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-27 09:33:55 +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> <template>
<el-dialog :visible="dialogVisible" @update:visible="handleVisibleChange" width="57%" center <CustomDialog
custom-class="add-model-dialog" :show-close="false" class="center-dialog"> :visible.sync="dialogVisible"
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;"> :title="$t('modelConfigDialog.addModel')"
<div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;"> width="57%"
{{ $t('modelConfigDialog.addModel') }} class="add-model-dialog"
</div> :confirmLoading="saving"
@close="handleClose"
<button class="custom-close-btn" @click="handleClose"> @confirm="confirm"
× >
</button> <div class="dialog-content">
<!-- 模型信息部分 --> <!-- 模型信息部分 -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;"> <div class="section-header">
<div style="font-size: 20px; font-weight: bold; color: #3d4566;">{{ $t('modelConfigDialog.modelInfo') }}</div> <div class="section-title">{{ $t('modelConfigDialog.modelInfo') }}</div>
<div style="display: flex; align-items: center; gap: 20px;"> <div class="switch-group">
<div style="display: flex; align-items: center;"> <div class="switch-item">
<span style="margin-right: 8px;">{{ $t('modelConfigDialog.enable') }}</span> <span>{{ $t('modelConfigDialog.enable') }}</span>
<el-switch v-model="formData.isEnabled" class="custom-switch"></el-switch> <el-switch v-model="formData.isEnabled" class="custom-switch"></el-switch>
</div> </div>
<div style="display: none; align-items: center;"> <div class="switch-item" style="display: none;">
<span style="margin-right: 8px;">{{ $t('modelConfigDialog.setDefault') }}</span> <span>{{ $t('modelConfigDialog.setDefault') }}</span>
<el-switch v-model="formData.isDefault" class="custom-switch"></el-switch> <el-switch v-model="formData.isDefault" class="custom-switch"></el-switch>
</div> </div>
</div> </div>
</div> </div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div> <div class="divider"></div>
<el-form :model="formData" label-width="100px" label-position="left" class="custom-form"> <el-form :model="formData" label-width="auto" label-position="left" class="custom-form">
<div style="display: flex; gap: 20px; margin-bottom: 0;"> <div class="form-row">
<el-form-item :label="$t('modelConfigDialog.modelId')" prop="id" style="flex: 1;"> <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" <el-input v-model="formData.id" :placeholder="$t('modelConfigDialog.enterModelId')" class="custom-input-bg"
maxlength="32"></el-input> maxlength="32"></el-input>
</el-form-item> </el-form-item>
</div> </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-form-item :label="$t('modelConfigDialog.modelName')" prop="modelName" style="flex: 1;">
<el-input v-model="formData.modelName" :placeholder="$t('modelConfigDialog.enterModelName')" <el-input v-model="formData.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"
class="custom-input-bg"></el-input> class="custom-input-bg"></el-input>
@@ -44,7 +43,7 @@
</el-form-item> </el-form-item>
</div> </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-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1;">
<el-select v-model="formData.supplier" :placeholder="$t('modelConfigDialog.selectSupplier')" <el-select v-model="formData.supplier" :placeholder="$t('modelConfigDialog.selectSupplier')"
class="custom-select custom-input-bg" style="width: 100%;" @focus="loadProviders" filterable> class="custom-select custom-input-bg" style="width: 100%;" @focus="loadProviders" filterable>
@@ -57,7 +56,6 @@
</el-form-item> </el-form-item>
</div> </div>
<el-form-item :label="$t('modelConfigDialog.docLink')" prop="docLink" style="margin-bottom: 27px;"> <el-form-item :label="$t('modelConfigDialog.docLink')" prop="docLink" style="margin-bottom: 27px;">
<el-input v-model="formData.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')" <el-input v-model="formData.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"
class="custom-input-bg"></el-input> class="custom-input-bg"></el-input>
@@ -70,13 +68,13 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">{{ <teleport v-if="chunkedCallInfoFields.length">
$t('modelConfigDialog.callInfo') }}</div> <div class="section-title">{{ $t('modelConfigDialog.callInfo') }}</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div> <div class="divider"></div>
</teleport>
<el-form :model="formData.configJson" label-width="auto" label-position="left" class="custom-form"> <el-form :model="formData.configJson" label-width="auto" label-position="left" class="custom-form">
<div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex" <div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex" class="form-row">
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;"> <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" <el-input v-model="formData.configJson[field.prop]" :placeholder="field.placeholder"
:type="field.type || 'text'" class="custom-input-bg" :show-password="field.type === 'password'"> :type="field.type || 'text'" class="custom-input-bg" :show-password="field.type === 'password'">
@@ -85,19 +83,17 @@
</div> </div>
</el-form> </el-form>
</div> </div>
</CustomDialog>
<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>
</template> </template>
<script> <script>
import Api from '@/apis/api'; import Api from '@/apis/api';
import CustomDialog from './CustomDialog.vue';
export default { export default {
name: 'AddModelDialog', name: 'AddModelDialog',
components: {
CustomDialog
},
props: { props: {
visible: { type: Boolean, required: true }, visible: { type: Boolean, required: true },
modelType: { type: String, required: true } modelType: { type: String, required: true }
@@ -178,16 +174,10 @@ export default {
}); });
this.formData.configJson = { ...defaultConfig }; this.formData.configJson = { ...defaultConfig };
}, },
handleVisibleChange(val) {
this.dialogVisible = val;
this.$emit('update:visible', val);
if (!val) {
this.resetForm();
}
},
handleClose() { handleClose() {
this.saving = false; this.saving = false;
this.dialogVisible = false;
this.$emit('update:visible', false); this.$emit('update:visible', false);
}, },
initDynamicConfig() { initDynamicConfig() {
@@ -232,7 +222,7 @@ export default {
try { try {
this.$emit('confirm', submitData); this.$emit('confirm', submitData);
this.$emit('update:visible', false); this.handleClose();
this.resetForm(); this.resetForm();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -297,134 +287,64 @@ export default {
} }
</script> </script>
<style> <style lang="scss" scoped>
::v-deep .el-dialog {
margin-top: 6vh !important;
}
.add-model-dialog { .add-model-dialog {
position: relative; .section-header {
border-radius: 20px; display: flex;
overflow: hidden; justify-content: space-between;
background: white; align-items: center;
padding-bottom: 17px; }
}
.add-model-dialog .el-dialog__header { .section-title {
padding: 0; margin-bottom: 10px;
border-bottom: none; font-size: 20px;
} font-weight: bold;
color: #3d4566;
text-align: left;
}
.center-dialog { .switch-group {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 20px;
} }
.center-dialog .el-dialog { .switch-item {
margin: 0 0 auto !important; display: flex;
display: flex; align-items: center;
flex-direction: column;
}
.custom-close-btn { span {
position: absolute; margin-right: 8px;
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;
}
.custom-close-btn:hover { .divider {
color: #409EFF; height: 1px;
border-color: #409EFF; background: #e9e9e9;
} margin-bottom: 16px;
}
.custom-select .el-input__suffix { .form-row {
background: #e6e8ea; display: flex;
right: 6px; gap: 20px;
width: 20px; margin-bottom: 0;
height: 20px; }
display: flex;
justify-content: center;
align-items: center;
top: 9px;
}
.custom-select .el-input__suffix-inner { .dialog-footer {
display: flex; display: flex;
align-items: center; justify-content: center;
justify-content: center; gap: 20px;
width: 100%; padding: 16px 20px;
} }
.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);
} }
.custom-form .el-form-item { .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 { .custom-switch .el-switch__core {
border-radius: 20px; border-radius: 20px;
height: 23px; height: 23px;
@@ -439,7 +359,7 @@ export default {
background-color: white; background-color: white;
top: 3px; top: 3px;
left: 4px; left: 4px;
transition: all .3s; transition: all 0.3s;
} }
.custom-switch.is-checked .el-switch__core { .custom-switch.is-checked .el-switch__core {
@@ -454,12 +374,10 @@ export default {
background-color: #1b47ee; background-color: #1b47ee;
} }
[style*="display: flex"] {
gap: 20px;
}
.custom-input-bg .el-input__inner { .custom-input-bg .el-input__inner {
height: 32px; height: 32px;
} }
::v-deep .el-input__inner {
height: 32px;
}
</style> </style>
main/manager-web/src/components/CustomButton.vue
+44 -8
View File
@@ -15,7 +15,7 @@ export default {
type: { type: {
type: String, type: String,
default: 'default', 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; background: #4998ff;
color: #ffffff; color: #ffffff;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
&.el-button--small { &.el-button--small {
padding: 10px; padding: 9px 14px;
font-size: 14px; font-size: 12px;
} }
&.el-button--medium { &.el-button--medium {
padding: 12px 20px; padding: 12px 20px;
@@ -62,11 +62,12 @@ export default {
background: linear-gradient(to right, #4a7cfd, #8154fc); background: linear-gradient(to right, #4a7cfd, #8154fc);
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
&.el-button--small { &.el-button--small {
font-size: 14px; padding: 9px 14px;
font-size: 12px;
} }
&.el-button--medium { &.el-button--medium {
padding: 12px 20px; padding: 12px 20px;
@@ -95,11 +96,12 @@ export default {
background: #ff6b6b; background: #ff6b6b;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
&.el-button--small { &.el-button--small {
font-size: 14px; padding: 9px 14px;
font-size: 12px;
} }
&.el-button--medium { &.el-button--medium {
padding: 12px 20px; padding: 12px 20px;
@@ -122,4 +124,38 @@ export default {
cursor: not-allowed; 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> </style>
main/manager-web/src/components/CustomDialog.vue
-1
View File
@@ -127,7 +127,6 @@ export default {
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 15vh !important;
} }
::v-deep .el-dialog__header { ::v-deep .el-dialog__header {
main/manager-web/src/components/ModelEditDialog.vue
+165 -271
View File
@@ -1,135 +1,109 @@
<template> <template>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="57%" center custom-class="custom-dialog" <CustomDialog
:show-close="false" class="center-dialog"> :title="$t('modelConfigDialog.editModel')"
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px"> :visible.sync="dialogVisible"
<div style=" width="57%"
font-size: 30px; class="model-edit-dialog"
color: #3d4566; :confirmLoading="saving"
margin-top: -10px; @confirm="handleSave"
margin-bottom: 10px; @close="handleClose"
text-align: center; @open="handleOpen"
"> >
{{ <div class="dialog-scroll-body">
modelData.duplicateMode <div class="header-row">
? $t("modelConfigDialog.duplicateModel") <div class="section-title">{{ $t("modelConfigDialog.modelInfo") }}</div>
: $t("modelConfigDialog.editModel") <div class="switch-group">
}} <div class="switch-item">
</div> <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>
<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") }}
</div> </div>
<div style="display: flex; align-items: center; gap: 20px"> <div class="switch-item hidden">
<div style="display: flex; align-items: center"> <span class="switch-label">{{ $t("modelConfigDialog.setDefault") }}</span>
<span style="margin-right: 8px">{{ $t("modelConfigDialog.enable") }}</span> <el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
<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> </div>
</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"> <el-form :model="form" ref="form" label-width="auto" label-position="left">
<div style="display: flex; gap: 20px; margin-bottom: 0"> <div class="form-row">
<el-form-item :label="$t('modelConfigDialog.modelName')" prop="name" style="flex: 1"> <el-form-item :label="$t('modelConfigDialog.modelName')" prop="name" style="flex: 1">
<el-input v-model="form.modelName" :placeholder="$t('modelConfigDialog.enterModelName')" <el-input v-model="form.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"></el-input>
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-item> </el-form-item>
<el-form-item :label="$t('modelConfigDialog.modelCode')" prop="code" style="flex: 1">
<el-form-item :label="$t('modelConfigDialog.remark')" prop="remark" class="prop-remark"> <el-input v-model="form.modelCode" :placeholder="$t('modelConfigDialog.enterModelCode')"></el-input>
<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> </el-form-item>
</el-form>
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px">
{{ $t("modelConfigDialog.callInfo") }}
</div> </div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px"></div>
<el-form :model="form.configJson" ref="callInfoForm" label-width="auto" class="custom-form"> <div class="form-row">
<template v-for="(row, rowIndex) in chunkedCallInfoFields"> <el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1">
<div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0"> <el-select v-model="form.configJson.type" :placeholder="$t('modelConfigDialog.selectSupplier')"
<el-form-item v-for="field in row" :key="field.prop" :label="field.label" :prop="field.prop" style="width: 100%" @focus="loadProviders" filterable>
style="flex: 1"> <el-option v-for="item in providers" :key="item.value" :label="item.label" :value="item.value" />
<template v-if="field.type === 'json-textarea'"> </el-select>
<el-input v-model="fieldJsonMap[field.prop]" type="textarea" :rows="3" </el-form-item>
:placeholder="$t('modelConfigDialog.enterJsonExample')" class="custom-input-bg" <el-form-item :label="$t('modelConfigDialog.sortOrder')" prop="sort" style="flex: 1">
@change="(val) => handleJsonChange(field.prop, val)" @focus=" <el-input v-model.number="form.sort" type="number" :placeholder="$t('modelConfigDialog.enterSortOrder')"></el-input>
isSensitiveField(field.prop) </el-form-item>
? handleJsonInputFocus(field.prop, fieldJsonMap[field.prop]) </div>
: undefined
" @blur="
isSensitiveField(field.prop)
? handleJsonInputBlur(field.prop)
: undefined
"></el-input>
</template>
<el-input v-else v-model="form.configJson[field.prop]" :placeholder="field.placeholder" :type="field.type" <el-form-item :label="$t('modelConfigDialog.docLink')" prop="docUrl" style="margin-bottom: 27px">
class="custom-input-bg" :show-password="field.type === 'password'" @focus=" <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) isSensitiveField(field.prop)
? handleInputFocus(field.prop, form.configJson[field.prop]) ? handleJsonInputFocus(field.prop, fieldJsonMap[field.prop])
: undefined : undefined
" @blur=" " @blur="
isSensitiveField(field.prop) ? handleInputBlur(field.prop) : undefined isSensitiveField(field.prop)
? handleJsonInputBlur(field.prop)
: undefined
"></el-input> "></el-input>
</el-form-item> </template>
</div>
</template>
</el-form>
</div>
<div style="display: flex; justify-content: center"> <el-input v-else v-model="form.configJson[field.prop]" :placeholder="field.placeholder" :type="field.type"
<el-button type="primary" @click="handleSave" class="save-btn" :loading="saving" :disabled="saving"> :show-password="field.type === 'password'" @focus="
{{ $t("modelConfigDialog.save") }} isSensitiveField(field.prop)
</el-button> ? 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> </div>
</el-dialog> </CustomDialog>
</template> </template>
<script> <script>
import CustomDialog from './CustomDialog.vue';
import Api from "@/apis/api"; import Api from "@/apis/api";
export default { export default {
name: "ModelEditDialog", name: "ModelEditDialog",
components: { CustomDialog },
props: { props: {
visible: { type: Boolean, default: false }, visible: { type: Boolean, default: false },
modelData: { modelData: {
@@ -175,6 +149,11 @@ export default {
}; };
}, },
computed: { computed: {
title() {
return this.modelData.duplicateMode
? this.$t("modelConfigDialog.duplicateModel")
: this.$t("modelConfigDialog.editModel");
},
chunkedCallInfoFields() { chunkedCallInfoFields() {
const chunkSize = 2; const chunkSize = 2;
const result = []; const result = [];
@@ -189,19 +168,11 @@ export default {
this.resetProviders(); this.resetProviders();
this.loadProviders(); this.loadProviders();
}, },
dialogVisible(val) {
this.$emit("update:visible", val);
if (!val) {
this.resetForm();
} else if (val && this.modelData.id) {
this.loadModelData();
}
},
visible(val) { visible(val) {
this.dialogVisible = val; this.dialogVisible = val;
if (val) { },
this.loadProviders(); dialogVisible(val) {
} this.$emit("update:visible", val);
}, },
"form.configJson.type"(newVal) { "form.configJson.type"(newVal) {
if (newVal && this.providersLoaded) { if (newVal && this.providersLoaded) {
@@ -210,6 +181,19 @@ export default {
}, },
}, },
methods: { methods: {
handleOpen() {
this.loadProviders();
if (this.modelData.id) {
this.loadModelData();
}
},
handleClose() {
this.saving = false;
// 处理关闭弹窗闪动问题
setTimeout(() => {
this.resetForm();
}, 200)
},
resetForm() { resetForm() {
this.form = { this.form = {
id: "", id: "",
@@ -480,168 +464,78 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-dialog { ::v-deep .el-dialog {
position: relative; margin-top: 6vh !important;
border-radius: 20px;
overflow: hidden;
background: white;
padding-bottom: 17px;
} }
.model-edit-dialog {
.dialog-scroll-body {
max-height: 72vh;
overflow-y: auto;
overflow-x: hidden;
.custom-dialog .el-dialog__header { &::-webkit-scrollbar {
padding: 0; width: 6px;
border-bottom: none; }
} &::-webkit-scrollbar-thumb {
background: #a1c9fd;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: #f0f3fe;
border-radius: 3px;
}
}
.center-dialog { .header-row {
display: flex; display: flex;
align-items: center; justify-content: space-between;
justify-content: center; align-items: center;
} }
.custom-close-btn { .section-title {
position: absolute; margin-bottom: 10px;
top: 20px; font-size: 20px;
right: 20px; font-weight: bold;
width: 35px; color: #3d4566;
height: 35px; text-align: left;
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 { .switch-group {
color: #409eff; display: flex;
border-color: #409eff; align-items: center;
} gap: 20px;
}
.custom-select .el-input__suffix { .switch-item {
background: #e6e8ea; display: flex;
right: 6px; align-items: center;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
top: 9px;
}
.custom-select .el-input__suffix-inner { &.hidden {
display: flex; display: none;
align-items: center; }
justify-content: center;
width: 100%;
}
.custom-select .el-icon-arrow-up:before { .switch-label {
content: ""; margin-right: 8px;
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);
}
.custom-form .el-form-item { .section-divider {
margin-bottom: 20px; height: 1px;
} background: #e9e9e9;
margin-bottom: 16px;
}
.custom-form .el-form-item__label { .form-row {
color: #3d4566; display: flex;
font-weight: normal; gap: 20px;
text-align: right; margin-bottom: 0;
padding-right: 20px; }
}
.custom-form .el-form-item.prop-remark .el-form-item__label { ::v-deep .el-input__inner {
margin-top: -4px; height: 32px;
} }
::v-deep .el-form-item {
.custom-input-bg .el-input__inner::-webkit-input-placeholder, margin-bottom: 10px;
.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;
} }
</style> </style>
main/manager-web/src/components/TtsModel.vue
+16 -61
View File
@@ -1,9 +1,7 @@
<template> <template>
<el-dialog :visible.sync="localVisible" width="90%" @close="handleClose" :show-close="false" :append-to-body="true" <CustomDialog :visible.sync="localVisible" :title="$t('modelConfig.voiceManagement')" width="90%"
:close-on-click-modal="true"> :close-on-click-modal="true" :destroy-on-close="false" :footer="false" :append-to-body="true"
<button class="custom-close-btn" @click="handleClose"> @close="handleClose">
×
</button>
<div class="scroll-wrapper"> <div class="scroll-wrapper">
<div class="table-container" ref="tableContainer" @scroll="handleScroll"> <div class="table-container" ref="tableContainer" @scroll="handleScroll">
<el-table v-loading="loading" :data="filteredTtsModels" style="width: 100%;" class="data-table" <el-table v-loading="loading" :data="filteredTtsModels" style="width: 100%;" class="data-table"
@@ -92,25 +90,27 @@
</div> </div>
</div> </div>
<div class="action-buttons"> <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') }} {{ selectAll ? $t('ttsModel.deselectAll') : $t('ttsModel.selectAll') }}
</el-button> </CustomButton>
<el-button type="primary" size="mini" @click="addNew" style="background: #5bc98c;border: None;"> <CustomButton icon="el-icon-plus" size="small" type="add" @click="addNew">
{{ $t('ttsModel.add') }} {{ $t('ttsModel.add') }}
</el-button> </CustomButton>
<el-button type="primary" size="mini" @click="deleteRow(filteredTtsModels.filter(row => row.selected))" <CustomButton icon="el-icon-delete" size="small" type="delete" @click="deleteRow(filteredTtsModels.filter(row => row.selected))">
style="background: red;border:None">{{ $t('ttsModel.delete') }} {{ $t('ttsModel.delete') }}
</el-button> </CustomButton>
</div> </div>
</el-dialog> </CustomDialog>
</template> </template>
<script> <script>
import Api from "@/apis/api"; import Api from "@/apis/api";
import AudioPlayer from './AudioPlayer.vue'; import AudioPlayer from './AudioPlayer.vue';
import CustomDialog from './CustomDialog.vue';
import CustomButton from './CustomButton.vue';
export default { export default {
components: { AudioPlayer }, components: { AudioPlayer, CustomDialog, CustomButton },
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
@@ -532,18 +532,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <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 { ::v-deep .data-table .el-table__header th {
color: black; color: black;
@@ -570,33 +558,6 @@ export default {
border: none !important; 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 { ::v-deep .remark-input .el-textarea__inner {
border-radius: 4px; border-radius: 4px;
@@ -691,11 +652,6 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
.action-buttons .el-button {
padding: 8px 15px;
font-size: 11px;
}
.edit-btn, .edit-btn,
.delete-btn, .delete-btn,
.save-btn { .save-btn {
@@ -727,9 +683,8 @@ export default {
/* 按钮组定位调整 */ /* 按钮组定位调整 */
.action-buttons { .action-buttons {
position: static; padding-top: 10px;
padding: 15px 0; text-align: left;
background: white;
} }
/* 输入框自适应 */ /* 输入框自适应 */
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> <p class="section-desc">{{ $t('addressBookManagement.setPermissionDesc', { count: selectedPermissions.length }) }}</p>
</div> </div>
<div class="section-actions"> <div class="section-actions">
<el-button size="small" @click="handleCancel">{{ $t('common.cancel') }}</el-button> <CustomButton size="small" @click="handleCancel">{{ $t('common.cancel') }}</CustomButton>
<el-button size="small" @click="handleToggleSelectAll"> <CustomButton size="small" @click="handleToggleSelectAll">{{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }}</CustomButton>
{{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }} <CustomButton type="confirm" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</CustomButton>
</el-button>
<el-button type="primary" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</el-button>
</div> </div>
</div> </div>
@@ -208,10 +206,11 @@ import VersionFooter from "@/components/VersionFooter.vue";
import Api from "@/apis/api.js"; import Api from "@/apis/api.js";
import AddressBookApi from "@/apis/module/addressBook.js"; import AddressBookApi from "@/apis/module/addressBook.js";
import MacAddressMask from "@/components/MacAddressMask.vue"; import MacAddressMask from "@/components/MacAddressMask.vue";
import CustomButton from "@/components/CustomButton.vue";
export default { export default {
name: "AddressBookManagement", name: "AddressBookManagement",
components: { HeaderBar, VersionFooter, MacAddressMask }, components: { HeaderBar, VersionFooter, MacAddressMask, CustomButton },
data() { data() {
return { return {
searchKeyword: "", searchKeyword: "",
@@ -946,8 +945,8 @@ export default {
} }
.section-actions { .section-actions {
margin-top: 4px;
display: flex; 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"> <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t("agentTemplateManagement.deselectAll") : $t("agentTemplateManagement.selectAll") }} {{ isAllSelected ? $t("agentTemplateManagement.deselectAll") : $t("agentTemplateManagement.selectAll") }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddTemplateDialog"> <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddTemplateDialog">
{{ $t("agentTemplateManagement.createTemplate") }} {{ $t("agentTemplateManagement.createTemplate") }}
</CustomButton> </CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDeleteTemplate"> <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"> size="small" @click="selectAllDictData">
{{ isAllDictDataSelected ? $t('dictManagement.deselectAll') : $t('dictManagement.selectAll') }} {{ isAllDictDataSelected ? $t('dictManagement.deselectAll') : $t('dictManagement.selectAll') }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDictDataDialog"> <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDictDataDialog">
{{ $t('dictManagement.addDictData') }} {{ $t('dictManagement.addDictData') }}
</CustomButton> </CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDeleteDictData"> <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" prefix-icon="el-icon-search"
clearable clearable
/> />
<el-button size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</el-button> <CustomButton size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</CustomButton>
<el-button size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</el-button> <CustomButton type="add" size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</CustomButton>
<el-button size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</el-button> <CustomButton type="confirm" size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</CustomButton>
</div> </div>
</div> </div>
<div class="doc-grid" v-loading="docLoading" :element-loading-text="$t('knowledgeBaseManagement.loading')"> <div class="doc-grid" v-loading="docLoading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
@@ -85,6 +85,7 @@
<script> <script>
import Api from "@/apis/api"; import Api from "@/apis/api";
import CustomButton from "@/components/CustomButton.vue";
import CustomPagination from "@/components/CustomPagination.vue"; import CustomPagination from "@/components/CustomPagination.vue";
const iconMap = { const iconMap = {
@@ -101,7 +102,7 @@ const iconMap = {
export default { export default {
name: 'LibraryItem', name: 'LibraryItem',
components: { CustomPagination }, components: { CustomPagination, CustomButton },
props: { props: {
kb: { kb: {
type: Object, type: Object,
main/manager-web/src/views/ModelConfig.vue
+67 -256
View File
@@ -105,7 +105,8 @@
> >
<el-switch <el-switch
v-model="scope.row.isEnabled" v-model="scope.row.isEnabled"
class="custom-switch" active-color="#5778ff"
inactive-color="#DCDFE6"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
disabled disabled
@@ -115,7 +116,8 @@
<el-switch <el-switch
v-else v-else
v-model="scope.row.isEnabled" v-model="scope.row.isEnabled"
class="custom-switch" active-color="#5778ff"
inactive-color="#DCDFE6"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
@change="handleStatusChange(scope.row)" @change="handleStatusChange(scope.row)"
@@ -126,7 +128,8 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
v-model="scope.row.isDefault" v-model="scope.row.isDefault"
class="custom-switch" active-color="#5778ff"
inactive-color="#DCDFE6"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
@change="handleDefaultChange(scope.row)" @change="handleDefaultChange(scope.row)"
@@ -184,76 +187,33 @@
</el-table> </el-table>
<div class="table-footer"> <div class="table-footer">
<div class="batch-actions"> <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 isAllSelected
? $t("modelConfig.deselectAll") ? $t("modelConfig.deselectAll")
: $t("modelConfig.selectAll") : $t("modelConfig.selectAll")
}} }}
</el-button> </CustomButton>
<el-button type="success" size="mini" @click="addModel" class="add-btn"> <CustomButton icon="el-icon-plus" type="add" size="small" @click="addModel">
{{ $t("modelConfig.add") }} {{ $t("modelConfig.add") }}
</el-button> </CustomButton>
<el-button <CustomButton
size="mini" type="delete"
type="danger" size="small"
icon="el-icon-delete" icon="el-icon-delete"
@click="batchDelete" @click="batchDelete"
> >
{{ $t("modelConfig.delete") }} {{ $t("modelConfig.delete") }}
</el-button> </CustomButton>
</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>
</div> </div>
<CustomPagination
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:page-size-options="pageSizeOptions"
@size-change="handlePageSizeChange"
@page-change="handlePageChange"
/>
</div> </div>
</el-card> </el-card>
</div> </div>
@@ -288,9 +248,11 @@ import AddModelDialog from "@/components/AddModelDialog.vue";
import HeaderBar from "@/components/HeaderBar.vue"; import HeaderBar from "@/components/HeaderBar.vue";
import ModelEditDialog from "@/components/ModelEditDialog.vue"; import ModelEditDialog from "@/components/ModelEditDialog.vue";
import TtsModel from "@/components/TtsModel.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"; import VersionFooter from "@/components/VersionFooter.vue";
export default { export default {
components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog, VersionFooter }, components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog, VersionFooter, CustomPagination, CustomButton },
data() { data() {
return { return {
addDialogVisible: false, addDialogVisible: false,
@@ -334,24 +296,6 @@ export default {
this.$t("modelConfig." + this.activeTab) || this.$t("modelConfig.modelConfig") 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: { methods: {
@@ -481,9 +425,9 @@ export default {
this.$message.info(this.$t("modelConfig.deleteCancelled")); this.$message.info(this.$t("modelConfig.deleteCancelled"));
}); });
}, },
handleCurrentChange(page) { handlePageChange(page) {
this.currentPage = page; this.currentPage = page;
this.$refs.modelTable.clearSelection(); this.loadData();
}, },
handleModelSave({ provideCode, formData, done }) { handleModelSave({ provideCode, formData, done }) {
const modelType = this.activeTab; 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() { loadData() {
this.loading = true; // 开始加载 this.loading = true; // 开始加载
@@ -793,50 +715,6 @@ export default {
transition: border-color 0.2s; 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 { ::v-deep .search-input .el-input__inner:focus {
border-color: #6b8cff; border-color: #6b8cff;
outline: none; outline: none;
@@ -869,53 +747,53 @@ export default {
background: white; background: white;
} }
.batch-actions { // .batch-actions {
display: flex; // display: flex;
gap: 8px; // gap: 8px;
} // }
.batch-actions .el-button { // .batch-actions .el-button {
min-width: 72px; // min-width: 72px;
height: 32px; // height: 32px;
padding: 7px 12px 7px 10px; // padding: 7px 12px 7px 10px;
font-size: 12px; // font-size: 12px;
border-radius: 4px; // border-radius: 4px;
line-height: 1; // line-height: 1;
font-weight: 500; // font-weight: 500;
border: none; // border: none;
transition: all 0.3s ease; // transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); // box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
} // }
.batch-actions .el-button:hover { // .batch-actions .el-button:hover {
transform: translateY(-1px); // transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
} // }
.batch-actions .el-button--primary { // .batch-actions .el-button--primary {
background: #5f70f3 !important; // background: #5f70f3 !important;
color: white; // color: white;
} // }
.batch-actions .el-button--success { // .batch-actions .el-button--success {
background: #5bc98c; // background: #5bc98c;
color: white; // color: white;
} // }
.batch-actions .el-button--danger { // .batch-actions .el-button--danger {
background: #fd5b63; // background: #fd5b63;
color: white; // color: white;
} // }
.batch-actions .el-button:first-child { // .batch-actions .el-button:first-child {
background: linear-gradient(135deg, #409eff, #6b8cff); // background: linear-gradient(135deg, #409eff, #6b8cff);
border: none; // border: none;
color: white; // color: white;
} // }
.batch-actions .el-button:first-child:hover { // .batch-actions .el-button:first-child:hover {
background: linear-gradient(135deg, #3a8ee6, #5a7cff); // background: linear-gradient(135deg, #3a8ee6, #5a7cff);
} // }
.el-table th ::v-deep .el-table__cell { .el-table th ::v-deep .el-table__cell {
overflow: hidden; overflow: hidden;
@@ -1018,73 +896,6 @@ export default {
padding-right: 10px; 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 { .model-card {
background: white; background: white;
flex: 1; flex: 1;
main/manager-web/src/views/OtaManagement.vue
+1 -1
View File
@@ -52,7 +52,7 @@
size="small" @click="handleSelectAll"> size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }} {{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDialog"> <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDialog">
{{ $t('otaManagement.addNew') }} {{ $t('otaManagement.addNew') }}
</CustomButton> </CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" <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"> <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('paramManagement.deselectAll') : $t('paramManagement.selectAll') }} {{ isAllSelected ? $t('paramManagement.deselectAll') : $t('paramManagement.selectAll') }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDialog"> <CustomButton icon="el-icon-plus" type="add" size="small" @click="showAddDialog">
{{ $t('paramManagement.add') }} {{ $t('paramManagement.add') }}
</CustomButton> </CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedParams"> <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"> <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }} {{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="showAddDialog"> <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDialog">
{{ $t('common.add') }} {{ $t('common.add') }}
</CustomButton> </CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedProviders"> <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') }} {{ allSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" size="small" @click="handleAdd"> <CustomButton type="add" icon="el-icon-plus" size="small" @click="handleAdd">
{{ $t('replacementWordManagement.addFile') }} {{ $t('replacementWordManagement.addFile') }}
</CustomButton> </CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="handleBatchDelete"> <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"> <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('user.deselectAll') : $t('user.selectAll') }} {{ isAllSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
</CustomButton> </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"> <CustomButton size="small" icon="el-icon-remove-outline" @click="batchDisable">
{{$t('user.disable') }} {{$t('user.disable') }}
</CustomButton> </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 size="small" type="delete" icon="el-icon-delete" @click="batchDelete">{{ $t('user.delete')
}}</CustomButton> }}</CustomButton>
</div> </div>