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

feat: 完成模型配置页面样式改造

Browse Source
This commit is contained in:
zhuoqinglian
2026-06-23 14:15:32 +08:00
parent 9705149b2b
commit f82f364189
2 changed files with 42 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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/ModelConfig.vue
+26 -215
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="mini" @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="mini" @click="addModel">
{{ $t("modelConfig.add") }}
</el-button>
<el-button
</CustomButton>
<CustomButton
type="delete"
size="mini"
type="danger"
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;
@@ -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;