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

删除多余样式

Browse Source
This commit is contained in:
LiJinHui
2025-09-20 23:43:58 +08:00
parent 9e218281da
commit 588d75763c
4 changed files with 352 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/i18n/en.js
+9 -4
View File
@@ -881,7 +881,12 @@ export default {
'templateQuickConfig.templateNotFound': 'Template not found',
'templateQuickConfig.fetchTemplateFailed': 'Failed to fetch template',
'templateQuickConfig.fetchTemplateBackendError': 'Failed to fetch template, please check if the backend service is normal',
'warning': 'Warning',
'info': 'Info'
}
;
'warning': 'Warning',
'info': 'Info',
// agentTemplateManagement error handling
'agentTemplateManagement.invalidResponse': 'Invalid response object:',
'agentTemplateManagement.apiCallFailed': 'API call failed:',
'agentTemplateManagement.apiCallException': 'Exception occurred when calling API:',
'common.networkError': 'Network request failed'
}
main/manager-web/src/i18n/zh_CN.js
+7 -1
View File
@@ -878,5 +878,11 @@ export default {
'templateQuickConfig.fetchTemplateFailed': '获取模板失败',
'templateQuickConfig.fetchTemplateBackendError': '获取模板失败，请检查后端服务是否正常',
'warning': '警告',
'info': '提示'
'info': '提示',
// 在agentTemplateManagement部分添加以下内容
'agentTemplateManagement.invalidResponse': '无效的响应对象:',
'agentTemplateManagement.apiCallFailed': 'API调用失败:',
'agentTemplateManagement.apiCallException': '调用API时发生异常:',
'common.networkError': '网络请求失败'
}
main/manager-web/src/i18n/zh_TW.js
+7 -1
View File
@@ -883,5 +883,11 @@ export default {
'templateQuickConfig.fetchTemplateBackendError': '獲取模板失敗，請檢查後端服務是否正常',
'error': '錯誤',
'warning': '警告',
'info': '提示'
'info': '提示',
// agentTemplateManagement錯誤處理相關
'agentTemplateManagement.invalidResponse': '無效的回應物件:',
'agentTemplateManagement.apiCallFailed': 'API調用失敗:',
'agentTemplateManagement.apiCallException': '調用API時發生異常:',
'common.networkError': '網路請求失敗'
}
main/manager-web/src/views/AgentTemplateManagement.vue
+329 -369
View File
@@ -1,14 +1,20 @@
<template>
<div class="welcome">
<HeaderBar />
<HeaderBar />
<div class="operation-bar">
<h2 class="page-title">{{ $t('agentTemplateManagement.title') }}</h2>
<h2 class="page-title">{{ $t("agentTemplateManagement.title") }}</h2>
<div class="right-operations">
<el-input :placeholder="$t('agentTemplateManagement.searchPlaceholder')" v-model="search" class="search-input" clearable
@keyup.enter.native="handleSearch" style="width: 240px" />
<el-input
:placeholder="$t('agentTemplateManagement.searchPlaceholder')"
v-model="search"
class="search-input"
clearable
@keyup.enter.native="handleSearch"
style="width: 240px"
/>
<el-button class="btn-search" @click="handleSearch">
{{ $t('agentTemplateManagement.search') }}
{{ $t("agentTemplateManagement.search") }}
</el-button>
</div>
</div>
@@ -18,53 +24,99 @@
<div class="content-panel">
<div class="content-area">
<el-card class="template-card" shadow="never">
<el-table ref="templateTable" :data="templateList" style="width: 100%" v-loading="templateLoading"
:element-loading-text="$t('agentTemplateManagement.loading')" element-loading-spinner="el-icon-loading"
<el-table
ref="templateTable"
:data="templateList"
style="width: 100%"
v-loading="templateLoading"
:element-loading-text="$t('agentTemplateManagement.loading')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.7)"
class="transparent-table" :header-cell-style="{padding: '10px 20px'}" :cell-style="{padding: '10px 20px'}"> <!-- 移除@row-click="handleRowClick" -->
class="transparent-table"
:header-cell-style="{ padding: '10px 20px' }"
:cell-style="{ padding: '10px 20px' }"
>
<!-- 移除@row-click="handleRowClick" -->
<!-- 自定义选择列，实现表头是"选择"文字，数据行是小方框 -->
<el-table-column :label="$t('agentTemplateManagement.select')" align="center" min-width="100">
<el-table-column
:label="$t('agentTemplateManagement.select')"
align="center"
min-width="100"
>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.selected" @change="handleRowSelectionChange(scope.row)" @click.stop></el-checkbox>
<el-checkbox
v-model="scope.row.selected"
@change="handleRowSelectionChange(scope.row)"
@click.stop
></el-checkbox>
</template>
</el-table-column>
<!-- 模板名称 -->
<el-table-column :label="$t('agentTemplateManagement.templateName')" prop="agentName" min-width="250" show-overflow-tooltip>
<el-table-column
:label="$t('agentTemplateManagement.templateName')"
prop="agentName"
min-width="250"
show-overflow-tooltip
>
<template slot-scope="scope">
<span>{{ scope.row.agentName }}</span>
</template>
</el-table-column>
<!-- 修改为序号列，并移动到此处 -->
<el-table-column :label="$t('agentTemplateManagement.serialNumber')" min-width="120" align="center">
<el-table-column
:label="$t('agentTemplateManagement.serialNumber')"
min-width="120"
align="center"
>
<template slot-scope="scope">
<span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column :label="$t('agentTemplateManagement.action')" min-width="250" align="center">
<el-table-column
:label="$t('agentTemplateManagement.action')"
min-width="250"
align="center"
>
<template slot-scope="scope">
<div style="display: flex; justify-content: center; gap: 15px;">
<el-button type="text" @click="editTemplate(scope.row)">{{ $t('agentTemplateManagement.editTemplate') }}</el-button>
<div style="display: flex; justify-content: center; gap: 15px">
<el-button type="text" @click="editTemplate(scope.row)">{{
$t("agentTemplateManagement.editTemplate")
}}</el-button>
<!-- 修复：调用正确的方法名 -->
<el-button type="text" @click="deleteTemplate(scope.row)">{{ $t('agentTemplateManagement.deleteTemplate') }}</el-button>
<el-button type="text" @click="deleteTemplate(scope.row)">{{
$t("agentTemplateManagement.deleteTemplate")
}}</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- 表格底部操作栏 -->
<div class="table_bottom">
<div class="ctrl_btn">
<el-button type="primary" @click="handleSelectAll" size="mini" class="select-all-btn">
{{ isAllSelected ? $t('agentTemplateManagement.deselectAll') : $t('agentTemplateManagement.selectAll') }}
<el-button
type="primary"
@click="handleSelectAll"
size="mini"
class="select-all-btn"
>
{{
isAllSelected
? $t("agentTemplateManagement.deselectAll")
: $t("agentTemplateManagement.selectAll")
}}
</el-button>
<el-button type="success" @click="handleCreate" size="mini">
{{ $t('agentTemplateManagement.createTemplate') }}
{{ $t("agentTemplateManagement.createTemplate") }}
</el-button>
<el-button type="danger" @click="batchDeleteTemplate" :disabled="!hasSelected" size="mini">
{{ $t('agentTemplateManagement.batchDelete') }}
<el-button
type="danger"
@click="batchDeleteTemplate"
:disabled="!hasSelected"
size="mini"
>
{{ $t("agentTemplateManagement.batchDelete") }}
</el-button>
</div>
@@ -85,20 +137,19 @@
</div>
</div>
</div>
</div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar';
import agentApi from '@/apis/module/agent';
import HeaderBar from "@/components/HeaderBar";
import agentApi from "@/apis/module/agent";
export default {
name: 'AgentTemplateManagement',
name: "AgentTemplateManagement",
components: {
HeaderBar
HeaderBar,
},
// 1. 首先确保在 data 部分添加了 isAllSelected 状态
data() {
return {
@@ -107,93 +158,106 @@ export default {
templateLoading: false,
selectedTemplates: [],
isAllSelected: false, // 添加全选状态
search: '',
search: "",
// 分页相关数据
pageSizeOptions: [10, 20, 50, 100],
currentPage: 1,
pageSize: 10,
total: 0
}
total: 0,
};
},
created() {
this.loadTemplateList()
this.loadTemplateList();
},
// 在computed部分添加hasSelected属性
computed: {
pageCount() {
return Math.ceil(this.total / this.pageSize)
},
visiblePages() {
return this.getVisiblePages()
},
hasSelected() {
return this.selectedTemplates.length > 0
}
pageCount() {
return Math.ceil(this.total / this.pageSize);
},
visiblePages() {
return this.getVisiblePages();
},
hasSelected() {
return this.selectedTemplates.length > 0;
},
},
methods: {
// 加载模板列表
// 改进loadTemplateList方法的错误处理逻辑
loadTemplateList() {
this.templateLoading = true
this.templateLoading = true;
const params = {
page: this.currentPage,
limit: this.pageSize
}
limit: this.pageSize,
};
if (this.search) {
params.agentName = this.search
params.agentName = this.search;
}
try {
agentApi.getAgentTemplatesPage(params, (res) => {
// 更健壮的响应处理逻辑
if (res && typeof res === 'object') {
if (res.data && res.data.code === 0) {
const responseData = res.data.data || {}
// 为每个模板添加selected属性
this.templateList = Array.isArray(responseData.list) ?
responseData.list.map(item => ({ ...item, selected: false })) : []
this.total = typeof responseData.total === 'number' ? responseData.total : 0
agentApi.getAgentTemplatesPage(
params,
(res) => {
// 更健壮的响应处理逻辑
if (res && typeof res === "object") {
if (res.data && res.data.code === 0) {
const responseData = res.data.data || {};
// 为每个模板添加selected属性
this.templateList = Array.isArray(responseData.list)
? responseData.list.map((item) => ({ ...item, selected: false }))
: [];
this.total =
typeof responseData.total === "number" ? responseData.total : 0;
} else {
console.error(
this.$t("agentTemplateManagement.fetchTemplateFailed"),
res
);
this.templateList = [];
this.total = 0;
this.$message.error(
res?.data?.msg || this.$t("agentTemplateManagement.fetchTemplateFailed")
);
}
} else {
console.error('获取模板列表失败:', res)
this.templateList = []
this.total = 0
this.$message.error(res?.data?.msg || '获取模板列表失败')
console.error(this.$t("agentTemplateManagement.invalidResponse"), res);
this.templateList = [];
this.total = 0;
this.$message.error(
this.$t("agentTemplateManagement.fetchTemplateBackendError")
);
}
} else {
console.error('无效的响应对象:', res)
this.templateList = []
this.total = 0
this.$message.error('获取模板列表失败')
this.templateLoading = false;
},
(error) => {
console.error(this.$t("agentTemplateManagement.apiCallFailed"), error);
this.templateList = [];
this.total = 0;
this.templateLoading = false;
this.$message.error(this.$t("common.networkError"));
}
this.templateLoading = false
}, (error) => {
console.error('API调用失败:', error)
this.templateList = []
this.total = 0
this.templateLoading = false
this.$message.error('网络请求失败')
})
);
} catch (error) {
console.error('调用API时发生异常:', error)
this.templateList = []
this.total = 0
this.templateLoading = false
this.$message.error('加载模板列表时发生错误')
console.error(this.$t("agentTemplateManagement.apiCallException"), error);
this.templateList = [];
this.total = 0;
this.templateLoading = false;
this.$message.error(this.$t("agentTemplateManagement.fetchTemplateBackendError"));
}
},
// 搜索模板
handleSearch() {
if (this.search) {
const searchValue = this.search.toLowerCase()
const filteredList = this.templateList.filter(template =>
const searchValue = this.search.toLowerCase();
const filteredList = this.templateList.filter((template) =>
template.agentName.toLowerCase().includes(searchValue)
)
this.templateList = filteredList
this.total = filteredList.length
);
this.templateList = filteredList;
this.total = filteredList.length;
} else {
this.loadTemplateList()
this.loadTemplateList();
}
},
@@ -202,222 +266,225 @@ export default {
showAddTemplateDialog() {
// 跳转到模板快速配置页面，不传递templateId参数表示新增
this.$router.push({
path: '/template-quick-config'
})
path: "/template-quick-config",
});
},
// 添加handleCreate方法，与模板中绑定的按钮保持一致
handleCreate() {
this.showAddTemplateDialog();
},
// 保留原有的editTemplate方法
// 编辑模板
editTemplate(row) {
// 跳转到模板快速配置页面，并传递模板ID参数
this.$router.push({
path: '/template-quick-config',
query: { templateId: row.id }
})
path: "/template-quick-config",
query: { templateId: row.id },
});
},
// 删除模板
deleteTemplate(row) {
this.$confirm(this.$t('agentTemplateManagement.confirmSingleDelete'), this.$t('common.warning'), {
confirmButtonText: this.$t('common.confirm'),
cancelButtonText: this.$t('common.cancel'),
type: 'warning'
}).then(() => {
agentApi.deleteAgentTemplate(row.id, (res) => {
// 添加调试日志
console.log('删除模板响应:', res);
if (res && typeof res === 'object') {
// 检查res.data是否存在且包含code=0
if (res.data && res.data.code === 0) {
this.$message.success(this.$t('agentTemplateManagement.deleteSuccess'))
this.loadTemplateList()
this.$confirm(
this.$t("agentTemplateManagement.confirmSingleDelete"),
this.$t("common.warning"),
{
confirmButtonText: this.$t("common.confirm"),
cancelButtonText: this.$t("common.cancel"),
type: "warning",
}
)
.then(() => {
agentApi.deleteAgentTemplate(row.id, (res) => {
// 添加调试日志
console.log("删除模板响应:", res);
if (res && typeof res === "object") {
// 检查res.data是否存在且包含code=0
if (res.data && res.data.code === 0) {
this.$message.success(this.$t("agentTemplateManagement.deleteSuccess"));
this.loadTemplateList();
} else {
this.$message.error(
res?.data?.msg || this.$t("agentTemplateManagement.deleteFailed")
);
}
} else {
this.$message.error(res?.data?.msg || this.$t('agentTemplateManagement.deleteFailed'))
console.error("无效的响应对象:", res);
this.$message.error(this.$t("agentTemplateManagement.deleteBackendError"));
}
} else {
console.error('无效的响应对象:', res);
this.$message.error(this.$t('agentTemplateManagement.deleteBackendError'))
}
});
})
}).catch(() => {
this.$message.info(this.$t('common.deleteCancelled'))
})
.catch(() => {
this.$message.info(this.$t("common.deleteCancelled"));
});
},
// 修改batchDeleteTemplate方法，使用selectedTemplates
// 批量删除模板 - 完全重写这个方法
batchDeleteTemplate() {
if (this.selectedTemplates.length === 0) {
this.$message.warning(this.$t('agentTemplateManagement.selectTemplate'))
return
this.$message.warning(this.$t("agentTemplateManagement.selectTemplate"));
return;
}
this.$confirm(this.$t('agentTemplateManagement.confirmBatchDelete', { count: this.selectedTemplates.length }), this.$t('common.warning'), {
confirmButtonText: this.$t('common.confirm'),
cancelButtonText: this.$t('common.cancel'),
type: 'warning'
}).then(() => {
// 确保参数格式正确 - 将id数组作为请求体
const ids = this.selectedTemplates.map(template => template.id)
console.log('批量删除的模板ID:', ids)
agentApi.batchDeleteAgentTemplate(ids, (res) => {
// 添加更健壮的响应处理
console.log('批量删除响应:', res)
if (res && typeof res === 'object') {
if (res.data && res.data.code === 0) {
this.$message.success(this.$t('agentTemplateManagement.batchDeleteSuccess'))
// 重新加载模板列表
this.loadTemplateList()
// 清空选中状态
this.selectedTemplates = []
this.isAllSelected = false
this.$confirm(
this.$t("agentTemplateManagement.confirmBatchDelete", {
count: this.selectedTemplates.length,
}),
this.$t("common.warning"),
{
confirmButtonText: this.$t("common.confirm"),
cancelButtonText: this.$t("common.cancel"),
type: "warning",
}
)
.then(() => {
// 确保参数格式正确 - 将id数组作为请求体
const ids = this.selectedTemplates.map((template) => template.id);
console.log("批量删除的模板ID:", ids);
agentApi.batchDeleteAgentTemplate(ids, (res) => {
console.log("批量删除响应:", res);
if (res && typeof res === "object") {
if (res.data && res.data.code === 0) {
this.$message.success(
this.$t("agentTemplateManagement.batchDeleteSuccess")
);
// 重新加载模板列表
this.loadTemplateList();
// 清空选中状态
this.selectedTemplates = [];
this.isAllSelected = false;
} else {
this.$message.error(
res?.data?.msg || this.$t("agentTemplateManagement.batchDeleteFailed")
);
}
} else {
this.$message.error(res?.data?.msg || this.$t('agentTemplateManagement.batchDeleteFailed'))
console.error("无效的响应对象:", res);
this.$message.error(this.$t("agentTemplateManagement.deleteBackendError"));
}
} else {
console.error('无效的响应对象:', res)
this.$message.error(this.$t('agentTemplateManagement.deleteBackendError'))
}
});
})
}).catch(() => {
this.$message.info(this.$t('common.deleteCancelled'))
})
.catch(() => {
this.$message.info(this.$t("common.deleteCancelled"));
});
},
// 分页相关方法
// 添加日期格式化函数
formatDate(dateString) {
if (!dateString) return ''
const date = new Date(dateString)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
if (!dateString) return "";
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
// 完善分页相关方法
handlePageChange(page) {
this.currentPage = page
this.loadTemplateList()
this.currentPage = page;
this.loadTemplateList();
},
handlePageSizeChange(size) {
this.pageSize = size
this.currentPage = 1
this.loadTemplateList()
this.pageSize = size;
this.currentPage = 1;
this.loadTemplateList();
},
goFirst() {
this.currentPage = 1
this.currentPage = 1;
},
goPrev() {
this.currentPage--
this.currentPage--;
},
goNext() {
this.currentPage++
this.currentPage++;
},
goToPage(page) {
this.currentPage = page
this.currentPage = page;
},
getVisiblePages() {
const pages = []
const totalPages = this.pageCount
const currentPage = this.currentPage
const pages = [];
const totalPages = this.pageCount;
const currentPage = this.currentPage;
if (totalPages <= 7) {
for (let i = 1; i <= totalPages; i++) {
pages.push(i)
pages.push(i);
}
} else {
if (currentPage <= 4) {
for (let i = 1; i <= 5; i++) {
pages.push(i)
pages.push(i);
}
pages.push('...')
pages.push(totalPages)
pages.push("...");
pages.push(totalPages);
} else if (currentPage >= totalPages - 3) {
pages.push(1)
pages.push('...')
pages.push(1);
pages.push("...");
for (let i = totalPages - 4; i <= totalPages; i++) {
pages.push(i)
pages.push(i);
}
} else {
pages.push(1)
pages.push('...')
pages.push(1);
pages.push("...");
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
pages.push(i)
pages.push(i);
}
pages.push('...')
pages.push(totalPages)
pages.push("...");
pages.push(totalPages);
}
}
return pages
return pages;
},
// 修改handleSelectAll方法
handleSelectAll() {
this.isAllSelected = !this.isAllSelected
this.templateList.forEach(row => {
row.selected = this.isAllSelected
})
this.isAllSelected = !this.isAllSelected;
this.templateList.forEach((row) => {
row.selected = this.isAllSelected;
});
// 更新选中的模板列表
this.selectedTemplates = this.isAllSelected ? [...this.templateList] : []
this.selectedTemplates = this.isAllSelected ? [...this.templateList] : [];
},
// 处理行选择变化
handleRowSelectionChange(row) {
// 查找选中的模板
this.selectedTemplates = this.templateList.filter(template => template.selected);
this.selectedTemplates = this.templateList.filter((template) => template.selected);
// 更新全选状态
this.isAllSelected = this.templateList.length > 0 && this.selectedTemplates.length === this.templateList.length;
this.isAllSelected =
this.templateList.length > 0 &&
this.selectedTemplates.length === this.templateList.length;
},
// 修改handleRowClick方法，移除选中状态切换逻辑
handleRowClick(row, event, column) {
// 完全移除选中状态切换的逻辑，只允许通过复选框点击来选择
// 保留方法以避免可能的事件处理问题
},
}
}
},
};
</script>
<style scoped lang="scss">
/* 首先确保html和body元素有正确的背景设置 */
:global(html),
:global(body) {
background: #f5f7fa;
margin: 0;
padding: 0;
height: 100%;
}
/* 基础背景和布局设置 */
.welcome {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
background-size: cover;
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
width: 100%;
}
/* 操作栏样式 */
.operation-bar {
display: flex;
justify-content: space-between;
@@ -446,6 +513,7 @@ export default {
color: white;
}
/* 主容器样式 */
.main-wrapper {
margin: 5px 22px;
border-radius: 15px;
@@ -479,6 +547,7 @@ export default {
position: relative;
}
/* 模板卡片样式 */
.template-card {
border: none;
box-shadow: none;
@@ -496,45 +565,77 @@ export default {
}
}
/* 表格样式 - 优化整合版 */
.transparent-table {
width: 100%;
/* 关键：为表格容器设置最大高度，确保有足够空间将按钮推到底部 */
flex: 1;
min-height: 0;
}
/* 添加表格内部容器的样式，确保表格本身有高度限制 */
:deep(.el-table) {
height: 100%;
display: flex;
flex-direction: column;
--table-max-height: calc(100vh - 42vh);
max-height: var(--table-max-height);
.el-table__body-wrapper {
flex: 1;
overflow-y: auto;
overflow-x: auto;
/* 表格头部样式 */
.el-table__header th {
padding: 8px 0 !important;
height: 40px !important;
}
.el-table__header th .cell {
color: #303133 !important;
font-weight: 600;
}
/* 表格主体样式 */
.el-table__body {
.el-table__row td {
padding: 12px 0 !important;
border-bottom: 1px solid #ebeef5;
}
.el-table__row:hover {
background-color: #f5f7fa;
}
}
/* 表格按钮样式 */
.el-button--text {
color: #7079aa;
}
.el-button--text:hover {
color: #5a64b5;
}
/* 单元格文本样式 */
.cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
// 表格底部操作栏
/* 表格底部操作栏 */
.table_bottom {
display: flex;
justify-content: space-between !important;
align-items: center;
margin-top: auto; /* 关键：使用auto margin将按钮栏推到底部 */
padding: 0 20px 15px !important; /* 增加底部padding，让按钮看起来更靠下 */
margin-top: auto;
padding: 0 20px 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 控制按钮样式 */
.ctrl_btn {
display: flex;
gap: 8px;
padding-left: 0 !important;
margin-left: 0 !important;
.el-button {
min-width: 72px;
height: 32px;
@@ -557,154 +658,13 @@ export default {
background: #5f70f3;
color: white;
}
.el-button--success {
background: #5bc98c;
color: white;
}
.el-button--danger {
background: #fd5b63;
color: white;
}
}
// 自定义分页样式
.custom-pagination {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto !important;
padding-right: 0 !important;
margin-right: 0 !important;
}
// 调整分页按钮样式
.pagination-btn:last-child {
margin-right: 0;
}
.el-select {
margin-right: 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;
}
// 表格内部样式调整
:deep(.el-table__header th) {
padding: 8px 0 !important;
height: 40px !important;
}
:deep(.el-table__header th .cell) {
color: #303133 !important;
font-weight: 600;
}
:deep(.el-table__body) {
.el-table__row td {
padding: 12px 0 !important;
border-bottom: 1px solid #ebeef5;
}
.el-table__row:hover {
background-color: #f5f7fa;
}
}
:deep(.el-table .el-button--text) {
color: #7079aa;
}
:deep(.el-table .el-button--text:hover) {
color: #5a64b5;
}
:deep(.el-table .cell) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 选择框样式
:deep(.el-checkbox__inner) {
background-color: #ffffff !important;
border-color: #dcdfe6 !important;
width: 16px !important;
height: 16px !important;
border-radius: 2px !important;
}
:deep(.el-checkbox__inner:hover) {
border-color: #c0c4cc !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: #5f70f3 !important;
border-color: #5f70f3 !important;
}
// 调整表格最大高度
:deep(.el-table) {
--table-max-height: calc(100vh - 42vh);
max-height: var(--table-max-height);
.el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 40px);
}
}
</style>
</style>