-
@@ -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;
}
-
- {{ isAllSelected ? $t('voiceClone.deselectAll') : $t('voiceClone.selectAll') }}
-
- {{
- $t('voiceClone.addNew') }}
- {{
- $t('voiceClone.delete') }}
-
-
-
-
-
-
-
-
-
-
- {{ $t('voiceClone.totalRecords', { total }) }}
+
+
+ {{ getTrainStatusText(scope.row) }}
+
+
+ {{ formatDate(scope.row.createDate) }}
+
+
+ {{ $t('voiceClone.delete') }}
+
+
+
+
+ {{ $t('voiceResource.title') }}
+
+ {{ $t('voiceClone.search') }}
+
+ {{ isAllSelected ? $t('voiceClone.deselectAll') : $t('voiceClone.selectAll') }}
+
+ {{ $t('voiceClone.addNew') }}
+ {{ $t('voiceClone.delete') }}
+
+
+