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 17:23:11 +08:00
parent 04bfddf457
commit b6ed220e48
2 changed files with 82 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/VoiceResourceDialog.vue
+14 -15
View File
@@ -1,7 +1,15 @@
<template>
<el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="handleClose"
@open="handleOpen" width="500px">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<CustomDialog
:title="title"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="600px"
@close="handleClose"
@open="handleOpen"
@cancel="handleCancel"
@confirm="handleSubmit"
>
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
<el-form-item :label="$t('voiceClone.platformName')" prop="modelId">
<el-select v-model="form.modelId" :placeholder="$t('voiceClone.platformNamePlaceholder')" filterable
style="width: 100%" @change="handlePlatformChange">
@@ -31,19 +39,16 @@
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">{{ $t('voiceClone.operationCancelled') }}</el-button>
<el-button type="primary" @click="handleSubmit">{{ $t('voiceClone.addNew') }}</el-button>
</div>
</el-dialog>
</CustomDialog>
</template>
<script>
import Api from '@/apis/api';
import CustomDialog from './CustomDialog.vue';
export default {
name: 'VoiceCloneDialog',
components: { CustomDialog },
props: {
visible: {
type: Boolean,
@@ -154,9 +159,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
border-radius: 20px;
}
</style>
main/manager-web/src/views/VoiceResourceManagement.vue
+68 -399
View File
@@ -1,91 +1,48 @@
<template>
<div class="welcome">
<HeaderBar />
<div class="operation-bar">
<h2 class="page-title">{{ $t('voiceResource.title') }}</h2>
<div class="right-operations">
<el-input :placeholder="$t('voiceClone.searchPlaceholder')" v-model="searchName" class="search-input"
@keyup.enter.native="handleSearch" clearable />
<el-button class="btn-search" @click="handleSearch">{{ $t('voiceClone.search') }}</el-button>
</div>
</div>
<div class="main-wrapper">
<div class="content-panel">
<div class="content-area">
<el-card class="params-card" shadow="never">
<el-table ref="paramsTable" :data="voiceCloneList" class="transparent-table" v-loading="loading"
element-loading-text="Loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.7)"
:header-cell-class-name="headerCellClassName">
<el-table-column :label="$t('modelConfig.select')" align="center" width="120">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.selected"></el-checkbox>
</template>
</el-table-column>
<el-table-column :label="$t('voiceClone.voiceId')" prop="voiceId"
align="center"></el-table-column>
<el-table-column :label="$t('voiceClone.name')" prop="name"
align="center"></el-table-column>
<el-table-column :label="$t('voiceClone.userId')" prop="userName"
align="center"></el-table-column>
<el-table-column :label="$t('voiceClone.platformName')" prop="modelName"
align="center"></el-table-column>
<el-table-column :label="$t('voiceClone.languages')" prop="languages"
align="center"></el-table-column>
<el-table-column :label="$t('voiceClone.trainStatus')" prop="trainStatus" align="center">
<template slot-scope="scope">
{{ getTrainStatusText(scope.row) }}
</template>
</el-table-column>
<el-table-column :label="$t('voiceClone.createdAt')" prop="createdAt" align="center">
<template slot-scope="scope">
{{ formatDate(scope.row.createDate) }}
</template>
</el-table-column>
<el-table-column :label="$t('voiceClone.action')" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="deleteVoiceClone(scope.row)">{{
$t('voiceClone.delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<div class="table_bottom">
<div class="ctrl_btn">
<el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">
{{ isAllSelected ? $t('voiceClone.deselectAll') : $t('voiceClone.selectAll') }}
</el-button>
<el-button size="mini" type="success" @click="showAddDialog"
style="background: #5bc98c;border: None;">{{
$t('voiceClone.addNew') }}</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete"
@click="deleteSelectedVoiceClones">{{
$t('voiceClone.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('voiceClone.itemsPerPage', { items: item })" :value="item">
</el-option>
</el-select>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
{{ $t('voiceClone.firstPage') }}
</button>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">
{{ $t('voiceClone.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('voiceClone.nextPage') }}
</button>
<span class="total-text">{{ $t('voiceClone.totalRecords', { total }) }}</span>
<div class="operation-header">
<h2 class="page-title">{{ $t('voiceResource.title') }}</h2>
<div class="right-operations">
<el-input :placeholder="$t('voiceClone.searchPlaceholder')" v-model="searchName"
class="search-input" @keyup.enter.native="handleSearch" clearable />
<CustomButton icon="el-icon-search" type="confirm"
@click="handleSearch">{{ $t('voiceClone.search') }}</CustomButton>
</div>
</div>
<CustomTable ref="voiceTable" :data="voiceCloneList" :columns="tableColumns" :loading="loading"
:show-selection="true" :show-operations="true" :operations-label="$t('voiceClone.action')"
:total="total" :current-page="currentPage" :page-size="pageSize"
:page-size-options="pageSizeOptions" @size-change="handlePageSizeChange"
@page-change="goToPage">
<template slot="trainStatus" slot-scope="scope">
{{ getTrainStatusText(scope.row) }}
</template>
<template slot="createdAt" slot-scope="scope">
{{ formatDate(scope.row.createDate) }}
</template>
<template slot="operations" slot-scope="scope">
<el-button size="mini" type="text"
@click="deleteVoiceClone(scope.row)">{{ $t('voiceClone.delete') }}</el-button>
</template>
<template slot="footer-btns">
<div class="ctrl_btn">
<CustomButton
:icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'"
size="small" @click="handleSelectAll">
{{ isAllSelected ? $t('voiceClone.deselectAll') : $t('voiceClone.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" type="add" size="small"
@click="showAddDialog">{{ $t('voiceClone.addNew') }}</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete"
@click="deleteSelectedVoiceClones">{{ $t('voiceClone.delete') }}</CustomButton>
</div>
</template>
</CustomTable>
</el-card>
</div>
</div>
@@ -106,10 +63,12 @@ import Api from "@/apis/api";
import HeaderBar from "@/components/HeaderBar.vue";
import VersionFooter from "@/components/VersionFooter.vue";
import VoiceCloneDialog from "@/components/VoiceResourceDialog.vue";
import CustomButton from "@/components/CustomButton.vue";
import CustomTable from "@/components/CustomTable.vue";
import { formatDate } from "@/utils/format";
export default {
components: { HeaderBar, VoiceCloneDialog, VersionFooter },
components: { HeaderBar, VoiceCloneDialog, VersionFooter, CustomButton, CustomTable },
data() {
return {
searchName: "",
@@ -126,34 +85,26 @@ export default {
voiceIds: [],
userId: null,
languages: ""
}
},
tableColumns: []
};
},
created() {
this.initTableColumns();
this.fetchVoiceCloneList();
},
computed: {
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: {
initTableColumns() {
this.tableColumns = [
{ prop: 'voiceId', label: this.$t('voiceClone.voiceId'), align: 'center' },
{ prop: 'name', label: this.$t('voiceClone.name'), align: 'center' },
{ prop: 'userName', label: this.$t('voiceClone.userId'), align: 'center' },
{ prop: 'modelName', label: this.$t('voiceClone.platformName'), align: 'center' },
{ prop: 'languages', label: this.$t('voiceClone.languages'), align: 'center' },
{ prop: 'trainStatus', label: this.$t('voiceClone.trainStatus'), align: 'center' },
{ prop: 'createdAt', label: this.$t('voiceClone.createdAt'), align: 'center' }
];
},
handlePageSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
@@ -229,7 +180,6 @@ export default {
}
});
},
deleteSelectedVoiceClones() {
const selectedRows = this.voiceCloneList.filter(row => row.selected);
if (selectedRows.length === 0) {
@@ -299,31 +249,11 @@ export default {
}
});
},
headerCellClassName({ columnIndex }) {
if (columnIndex === 0) {
return "custom-selection-header";
}
return "";
},
goFirst() {
this.currentPage = 1;
this.fetchVoiceCloneList();
},
goPrev() {
if (this.currentPage > 1) {
this.currentPage--;
this.fetchVoiceCloneList();
}
},
goNext() {
if (this.currentPage < this.pageCount) {
this.currentPage++;
this.fetchVoiceCloneList();
}
},
goToPage(page) {
this.currentPage = page;
this.fetchVoiceCloneList();
if (page !== this.currentPage) {
this.currentPage = page;
this.fetchVoiceCloneList();
}
},
formatDate,
getTrainStatusText(row) {
@@ -363,25 +293,24 @@ export default {
}
.main-wrapper {
// 顶部 63px 底部 35px 查询72px
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
// 顶部 63px 底部 35px
height: calc(100vh - 63px - 35px);
padding: 20px 22px 0;
position: relative;
background: rgba(237, 242, 255, 0.5);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.operation-bar {
.operation-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
justify-content: space-between;
padding: 0 0 16px 0;
}
.page-title {
font-weight: 500;
font-size: 24px;
margin: 0;
}
@@ -396,14 +325,7 @@ export default {
width: 240px;
}
.btn-search {
background: linear-gradient(135deg, #6b8cff, #a966ff);
border: none;
color: white;
}
.content-panel {
flex: 1;
display: flex;
overflow: hidden;
height: 100%;
@@ -432,7 +354,7 @@ export default {
overflow: hidden;
::v-deep .el-card__body {
padding: 15px 15px 0;
padding: 14px 20px;
display: flex;
flex-direction: column;
flex: 1;
@@ -440,268 +362,15 @@ export default {
}
}
.table_bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-bottom: 10px;
}
.ctrl_btn {
display: flex;
gap: 8px;
padding-left: 26px;
.el-button {
min-width: 72px;
height: 32px;
padding: 7px 12px 7px 10px;
font-size: 12px;
border-radius: 4px;
line-height: 1;
font-weight: 500;
border: none;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
}
.el-button--primary {
background: #5f70f3;
color: white;
}
.el-button--danger {
background: #fd5b63;
color: white;
}
}
.custom-pagination {
display: flex;
align-items: center;
gap: 5px;
.el-select {
margin-right: 8px;
}
.pagination-btn:first-child,
.pagination-btn:nth-child(2),
.pagination-btn:nth-last-child(2),
.pagination-btn:nth-child(3) {
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(3)):not(:nth-child(2)):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 {
margin-left: 10px;
color: #606266;
font-size: 14px;
}
.page-size-select {
width: 100px;
margin-right: 10px;
:deep(.el-input__inner) {
height: 32px;
line-height: 32px;
border-radius: 4px;
border: 1px solid #e4e7ed;
background: #dee7ff;
color: #606266;
font-size: 14px;
}
:deep(.el-input__suffix) {
right: 6px;
width: 15px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
top: 6px;
border-radius: 4px;
}
:deep(.el-input__suffix-inner) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
:deep(.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;
}
}
:deep(.transparent-table) {
background: white;
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
.el-table__body-wrapper {
flex: 1;
overflow-y: auto;
max-height: none !important;
}
.el-table__header-wrapper {
flex-shrink: 0;
}
.el-table__header th {
background: white !important;
color: black;
font-weight: 600;
height: 40px;
padding: 8px 0;
font-size: 14px;
border-bottom: 1px solid #e4e7ed;
}
.el-table__body tr {
background-color: white;
td {
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 8px 0;
height: 40px;
color: #606266;
font-size: 14px;
}
}
.el-table__row:hover>td {
background-color: #f5f7fa !important;
}
&::before {
display: none;
}
}
:deep(.el-table .el-button--text) {
color: #7079aa !important;
color: #7079aa;
}
:deep(.el-table .el-button--text:hover) {
color: #5a64b5 !important;
}
:deep(.el-checkbox__inner) {
background-color: #ffffff !important;
border-color: #cccccc !important;
}
:deep(.el-checkbox__inner:hover) {
border-color: #cccccc !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: #5f70f3 !important;
border-color: #5f70f3 !important;
}
:deep(.el-loading-mask) {
background-color: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(2px);
}
:deep(.el-loading-spinner .path) {
stroke: #6b8cff;
}
.el-table {
// --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height);
.el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 40px);
}
}
@media (min-width: 1144px) {
.table_bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
:deep(.transparent-table) {
.el-table__body tr {
td {
padding-top: 16px;
padding-bottom: 16px;
}
&+tr {
margin-top: 10px;
}
}
}
color: #5a64b5;
}
</style>