update: 按钮样式风格统一

This commit is contained in:
zhuoqinglian
2026-06-23 14:54:45 +08:00
parent 9d78ea29c3
commit 04bfddf457
11 changed files with 75 additions and 72 deletions
@@ -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;
@@ -128,11 +130,12 @@ export default {
background: #52c41a; background: #52c41a;
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;
@@ -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;
} }
} }
} }
@@ -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">
@@ -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">
@@ -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,
+43 -43
View File
@@ -187,19 +187,19 @@
</el-table> </el-table>
<div class="table-footer"> <div class="table-footer">
<div class="batch-actions"> <div class="batch-actions">
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" type="default" size="mini" @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")
}} }}
</CustomButton> </CustomButton>
<CustomButton icon="el-icon-plus" type="add" size="mini" @click="addModel"> <CustomButton icon="el-icon-plus" type="add" size="small" @click="addModel">
{{ $t("modelConfig.add") }} {{ $t("modelConfig.add") }}
</CustomButton> </CustomButton>
<CustomButton <CustomButton
type="delete" type="delete"
size="mini" size="small"
icon="el-icon-delete" icon="el-icon-delete"
@click="batchDelete" @click="batchDelete"
> >
@@ -747,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;
+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"
@@ -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">
@@ -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">
@@ -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">
@@ -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>