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

Merge pull request #3240 from xinnan-tech/update-theme

Browse Source 
Update theme
This commit is contained in:
wengzh
2026-06-24 17:58:13 +08:00
committed by GitHub
parent b152c5dc23 1518dfca30
commit 0c53b8f543
6 changed files with 682 additions and 1758 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/ManualAddDeviceDialog.vue
+32 -74
View File
@@ -1,43 +1,45 @@
<template>
<el-dialog :title="$t('manualAddDeviceDialog.title')" :visible="visible" @close="handleClose" width="30%" center>
<div class="dialog-content">
<el-form :model="deviceForm" :rules="rules" ref="deviceForm" label-width="auto">
<el-form-item :label="$t('manualAddDeviceDialog.deviceType')" prop="board">
<el-select v-model="deviceForm.board" :placeholder="$t('manualAddDeviceDialog.deviceTypePlaceholder')" style="width: 100%">
<el-option
v-for="item in firmwareTypes"
:key="item.key"
:label="item.name"
:value="item.key">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('manualAddDeviceDialog.firmwareVersion')" prop="appVersion">
<el-input v-model="deviceForm.appVersion" :placeholder="$t('manualAddDeviceDialog.firmwareVersionPlaceholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('manualAddDeviceDialog.macAddress')" prop="macAddress">
<el-input v-model="deviceForm.macAddress" :placeholder="$t('manualAddDeviceDialog.macAddressPlaceholder')"></el-input>
</el-form-item>
</el-form>
</div>
<div style="display: flex;margin: 15px 15px;gap: 7px;">
<div class="dialog-btn" @click="submitForm">{{ $t('manualAddDeviceDialog.confirm') }}</div>
<div class="dialog-btn cancel-btn" @click="cancel">{{ $t('manualAddDeviceDialog.cancel') }}</div>
</div>
</el-dialog>
<CustomDialog
:title="$t('manualAddDeviceDialog.title')"
:visible="visible"
width="600px"
:destroy-on-close="false"
@close="closeDialog"
@confirm="submitForm"
>
<el-form :model="deviceForm" :rules="rules" ref="deviceForm" label-width="auto">
<el-form-item :label="$t('manualAddDeviceDialog.deviceType')" prop="board">
<el-select v-model="deviceForm.board" :placeholder="$t('manualAddDeviceDialog.deviceTypePlaceholder')" style="width: 100%">
<el-option
v-for="item in firmwareTypes"
:key="item.key"
:label="item.name"
:value="item.key">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('manualAddDeviceDialog.firmwareVersion')" prop="appVersion">
<el-input v-model="deviceForm.appVersion" :placeholder="$t('manualAddDeviceDialog.firmwareVersionPlaceholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('manualAddDeviceDialog.macAddress')" prop="macAddress">
<el-input v-model="deviceForm.macAddress" :placeholder="$t('manualAddDeviceDialog.macAddressPlaceholder')"></el-input>
</el-form-item>
</el-form>
</CustomDialog>
</template>
<script>
import Api from '@/apis/api';
import CustomDialog from './CustomDialog.vue';
export default {
name: 'ManualAddDeviceDialog',
components: { CustomDialog },
props: {
visible: { type: Boolean, required: true },
agentId: { type: String, required: true }
},
data() {
// MAC地址验证规则
const validateMac = (rule, value, callback) => {
const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
if (!value) {
@@ -67,7 +69,7 @@ export default {
{ required: true, validator: validateMac, trigger: 'blur' }
]
}
}
};
},
created() {
this.getFirmwareTypes();
@@ -94,7 +96,7 @@ export default {
agentId: this.agentId,
...this.deviceForm
};
Api.device.manualAddDevice(params, ({ data }) => {
if (data.code === 0) {
this.$message.success(this.$t('manualAddDeviceDialog.addSuccess'));
@@ -108,51 +110,7 @@ export default {
closeDialog() {
this.$emit('update:visible', false);
this.$refs.deviceForm.resetFields();
},
cancel() {
this.closeDialog();
},
handleClose() {
this.closeDialog();
}
}
}
};
</script>
<style scoped>
.dialog-content {
padding: 0 20px;
}
.dialog-btn {
cursor: pointer;
flex: 1;
border-radius: 23px;
background: #5778ff;
height: 40px;
font-weight: 500;
font-size: 12px;
color: #fff;
line-height: 40px;
text-align: center;
}
.cancel-btn {
background: #e6ebff;
border: 1px solid #adbdff;
color: #5778ff;
}
::v-deep .el-dialog {
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
::v-deep .el-dialog__body {
padding: 20px 20px;
}
::v-deep .el-form-item {
margin-bottom: 20px;
}
</style>
main/manager-web/src/components/VoiceCloneDialog.vue
+35 -25
View File
@@ -1,6 +1,11 @@
<template>
<el-dialog :title="$t('voiceClone.dialogTitle')" :visible.sync="visible" width="900px" top="10vh"
:before-close="handleClose" class="voice-clone-dialog">
<CustomDialog
:title="$t('voiceClone.dialogTitle')"
:visible.sync="innerVisible"
width="900px"
:footer="false"
@close="handleDialogClose"
>
<div class="dialog-content">
<!-- 步骤指示器 -->
<div class="steps-header">
@@ -73,22 +78,28 @@
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">{{ currentStep === 1 ? $t('voiceClone.cancel') : $t('voiceClone.prevStep')
}}</el-button>
<el-button type="primary" @click="handleNext" :loading="uploading">
<div class="custom-footer">
<CustomButton @click="handleCancel">
{{ currentStep === 1 ? $t('voiceClone.cancel') : $t('voiceClone.prevStep') }}
</CustomButton>
<CustomButton type="confirm" :loading="uploading" @click="handleNext">
{{ currentStep === 1 ? $t('voiceClone.nextStep') : $t('voiceClone.upload') }}
</el-button>
</span>
</el-dialog>
</CustomButton>
</div>
</CustomDialog>
</template>
<script>
import Api from "@/apis/api";
import CustomDialog from './CustomDialog.vue';
import CustomButton from './CustomButton.vue';
export default {
name: 'VoiceCloneDialog',
components: {
CustomDialog,
CustomButton
},
props: {
visible: {
type: Boolean,
@@ -122,6 +133,14 @@ export default {
};
},
computed: {
innerVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
},
selectedDuration() {
if (this.selectionStart !== null && this.selectionEnd !== null && this.audioBuffer) {
const duration = this.audioBuffer.duration;
@@ -146,14 +165,16 @@ export default {
}
},
methods: {
handleClose() {
handleCancel() {
if (this.currentStep === 2) {
this.currentStep = 1;
} else {
this.resetDialog();
this.$emit('update:visible', false);
}
},
handleDialogClose() {
this.resetDialog();
},
resetDialog() {
this.currentStep = 1;
this.audioFile = null;
@@ -509,13 +530,6 @@ export default {
</script>
<style lang="scss" scoped>
.voice-clone-dialog {
::v-deep .el-dialog__body {
padding: 20px 30px;
}
}
.steps-header {
display: flex;
justify-content: center;
@@ -578,7 +592,6 @@ export default {
background: #e4e7ed;
margin-left: 12px;
}
.step-content {
padding: 20px 0;
}
@@ -685,10 +698,7 @@ export default {
gap: 12px;
margin-top: 20px;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
.custom-footer {
text-align: right;
}
</style>
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/DeviceManagement.vue
+116 -438
View File
@@ -2,118 +2,83 @@
<div class="welcome">
<HeaderBar />
<div class="operation-bar">
<h2 class="page-title">{{ $t('device.management') }}</h2>
<div class="right-operations">
<el-input :placeholder="$t('device.searchPlaceholder')" v-model="searchKeyword" class="search-input"
@keyup.enter.native="handleSearch" clearable />
<el-button class="btn-search" @click="handleSearch">{{ $t('device.search') }}</el-button>
</div>
</div>
<div class="main-wrapper">
<div class="content-panel">
<div class="content-area">
<el-card class="device-card" shadow="never">
<el-table ref="deviceTable" :data="paginatedDeviceList" class="transparent-table"
:header-cell-class-name="headerCellClassName" v-loading="loading"
:element-loading-text="$t('deviceManagement.loading')" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.7)">
<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('device.model')" prop="model" align="center">
<template slot-scope="scope">
{{ getFirmwareTypeName(scope.row.model) }}
</template>
</el-table-column>
<el-table-column :label="$t('device.firmwareVersion')" prop="firmwareVersion"
align="center"></el-table-column>
<el-table-column :label="$t('device.macAddress')" prop="macAddress" align="center">
<template slot-scope="scope">
<MacAddressMask :macAddress="scope.row.macAddress" />
</template>
</el-table-column>
<el-table-column :label="$t('device.bindTime')" prop="bindTime" align="center"></el-table-column>
<el-table-column :label="$t('device.lastConversation')" prop="lastConversation"
align="center"></el-table-column>
<el-table-column v-if="mqttServiceAvailable" :label="$t('device.deviceStatus')" prop="deviceStatus" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.deviceStatus === 'online'" type="success">{{ $t('device.online') }}</el-tag>
<el-tag v-else type="danger">{{ $t('device.offline') }}</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('device.remark')" align="center">
<template #default="{ row }">
<el-input v-show="row.isEdit" v-model="row.remark" size="mini" maxlength="64" show-word-limit
@blur="onRemarkBlur(row)" @keyup.enter.native="onRemarkEnter(row)" />
<span v-show="!row.isEdit" class="remark-view">
<i class="el-icon-edit" @click="row.isEdit = true" style="cursor: pointer;"></i>
<span @click="row.isEdit = true">
{{ row.remark || '-' }}
</span>
</span>
</template>
</el-table-column>
<el-table-column :label="$t('device.autoUpdate')" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.otaSwitch" size="mini" active-color="#13ce66" inactive-color="#ff4949"
@change="handleOtaSwitchChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column :label="$t('device.operation')" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleUnbind(scope.row.device_id)">
{{ $t('device.unbind') }}
</el-button>
<el-button v-if="isGenerate(scope.row)" size="mini" type="text" @click="handleGenertor(scope.row)">
{{ $t('device.deviceThemeGeneration') }}
</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">
{{ isCurrentPageAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
</el-button>
<el-button type="success" size="mini" class="add-device-btn" @click="handleAddDevice">
{{ $t('device.bindWithCode') }}
</el-button>
<el-button type="success" size="mini" class="add-device-btn" @click="handleManualAddDevice">
{{ $t('device.manualAdd') }}
</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelected">
{{ $t('device.unbind') }}
</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('dictManagement.itemsPerPage').replace('{items}', item)" :value="item">
</el-option>
</el-select>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
{{ $t('dictManagement.firstPage') }}
</button>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">
{{ $t('dictManagement.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('dictManagement.nextPage') }}
</button>
<span class="total-text">
{{ $t('dictManagement.totalRecords').replace('{total}', deviceList.length) }}
</span>
<div class="operation-header">
<h2 class="page-title">{{ $t('device.management') }}</h2>
<div class="right-operations">
<el-input :placeholder="$t('device.searchPlaceholder')" v-model="searchKeyword" class="search-input"
@keyup.enter.native="handleSearch" clearable />
<CustomButton icon="el-icon-search" type="confirm" @click="handleSearch">{{ $t('device.search') }}</CustomButton>
</div>
</div>
<CustomTable
ref="deviceTable"
:data="paginatedDeviceList"
:columns="tableColumns"
:loading="loading"
:loading-text="$t('deviceManagement.loading')"
:show-selection="true"
:show-operations="true"
:operations-label="$t('device.operation')"
:total="filteredDeviceList.length"
:current-page="currentPage"
:page-size="pageSize"
:page-size-options="pageSizeOptions"
@size-change="handlePageSizeChange"
@page-change="goToPage"
>
<template slot="model" slot-scope="scope">
{{ getFirmwareTypeName(scope.row.model) }}
</template>
<template slot="macAddress" slot-scope="scope">
<MacAddressMask :macAddress="scope.row.macAddress" />
</template>
<template slot="deviceStatus" slot-scope="scope">
<el-tag v-if="scope.row.deviceStatus === 'online'" type="success">{{ $t('device.online') }}</el-tag>
<el-tag v-else type="danger">{{ $t('device.offline') }}</el-tag>
</template>
<template slot="remark" slot-scope="scope">
<el-input v-show="scope.row.isEdit" v-model="scope.row.remark" size="mini" maxlength="64" show-word-limit
@blur="onRemarkBlur(scope.row)" @keyup.enter.native="onRemarkEnter(scope.row)" />
<span v-show="!scope.row.isEdit" class="remark-view">
<i class="el-icon-edit" @click="scope.row.isEdit = true" style="cursor: pointer;"></i>
<span @click="scope.row.isEdit = true">
{{ scope.row.remark || '-' }}
</span>
</span>
</template>
<template slot="otaSwitch" slot-scope="scope">
<el-switch v-model="scope.row.otaSwitch" size="mini" active-color="#13ce66" inactive-color="#ff4949"
@change="handleOtaSwitchChange(scope.row)"></el-switch>
</template>
<template slot="operations" slot-scope="scope">
<el-button size="mini" type="text" @click="handleUnbind(scope.row.device_id)">
{{ $t('device.unbind') }}
</el-button>
<el-button v-if="isGenerate(scope.row)" size="mini" type="text" @click="handleGenertor(scope.row)">
{{ $t('device.deviceThemeGeneration') }}
</el-button>
</template>
<template slot="footer-btns">
<div class="ctrl_btn">
<CustomButton :icon="isCurrentPageAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
{{ isCurrentPageAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
</CustomButton>
<CustomButton icon="el-icon-plus" type="add" size="small" @click="handleAddDevice">
{{ $t('device.bindWithCode') }}
</CustomButton>
<CustomButton icon="el-icon-plus" type="add" size="small" @click="handleManualAddDevice">
{{ $t('device.manualAdd') }}
</CustomButton>
<CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelected">
{{ $t('device.unbind') }}
</CustomButton>
</div>
</template>
</CustomTable>
</el-card>
</div>
</div>
@@ -136,6 +101,8 @@ import HeaderBar from "@/components/HeaderBar.vue";
import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue";
import VersionFooter from "@/components/VersionFooter.vue";
import MacAddressMask from "@/components/MacAddressMask.vue";
import CustomButton from "@/components/CustomButton.vue";
import CustomTable from "@/components/CustomTable.vue";
export default {
components: {
@@ -144,6 +111,8 @@ export default {
ManualAddDeviceDialog,
VersionFooter,
MacAddressMask,
CustomButton,
CustomTable,
},
data() {
return {
@@ -160,7 +129,7 @@ export default {
loading: false,
userApi: null,
firmwareTypes: [],
mqttServiceAvailable: false, // MQTT服务是否可用
mqttServiceAvailable: false,
};
},
computed: {
@@ -178,28 +147,24 @@ export default {
const end = start + this.pageSize;
return this.filteredDeviceList.slice(start, end);
},
pageCount() {
return Math.ceil(this.filteredDeviceList.length / this.pageSize);
},
// 计算当前页是否全选
isCurrentPageAllSelected() {
return this.paginatedDeviceList.length > 0 &&
this.paginatedDeviceList.every(device => device.selected);
},
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);
tableColumns() {
const columns = [
{ prop: 'model', label: this.$t('device.model'), align: 'center' },
{ prop: 'firmwareVersion', label: this.$t('device.firmwareVersion'), align: 'center' },
{ prop: 'macAddress', label: this.$t('device.macAddress'), align: 'center' },
{ prop: 'bindTime', label: this.$t('device.bindTime'), align: 'center' },
{ prop: 'lastConversation', label: this.$t('device.lastConversation'), align: 'center' },
];
if (this.mqttServiceAvailable) {
columns.push({ prop: 'deviceStatus', label: this.$t('device.deviceStatus'), align: 'center' });
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
return pages;
columns.push({ prop: 'remark', label: this.$t('device.remark'), align: 'center' });
columns.push({ prop: 'otaSwitch', label: this.$t('device.autoUpdate'), align: 'center' });
return columns;
},
},
mounted() {
@@ -313,14 +278,12 @@ export default {
row._submitting = false;
});
},
// 备注输入框：失焦时提交
onRemarkBlur(row) {
row.isEdit = false;
setTimeout(() => {
this.submitRemark(row);
}, 100); // 延迟 100ms，避开 enter+blur 同时触发的窗口
}, 100);
},
// 备注输入框：按回车时提交
onRemarkEnter(row) {
row.isEdit = false;
this.submitRemark(row);
@@ -354,15 +317,6 @@ export default {
sessionStorage.setItem('devicePath', window.location.href);
window.location.href = url;
},
goFirst() {
this.currentPage = 1;
},
goPrev() {
if (this.currentPage > 1) this.currentPage--;
},
goNext() {
if (this.currentPage < this.pageCount) this.currentPage++;
},
goToPage(page) {
this.currentPage = page;
},
@@ -389,7 +343,6 @@ export default {
otaSwitch: device.autoUpdate === 1,
rawBindTime: new Date(device.createDate).getTime(),
selected: false,
// 初始设置为离线状态
deviceStatus: 'offline'
};
})
@@ -397,7 +350,6 @@ export default {
this.activeSearchKeyword = "";
this.searchKeyword = "";
// 获取设备列表后，立即获取设备状态
this.fetchDeviceStatus(agentId);
} else {
this.$message.error(data.msg || this.$t('device.getListFailed'));
@@ -405,47 +357,35 @@ export default {
});
},
// 获取设备状态
fetchDeviceStatus(agentId) {
// 开启表格等待状态，处理动态加载表头导致鼠标所在行的hover事件无法移除的问题
this.loading = true;
Api.device.getDeviceStatus(agentId, ({ data }) => {
this.loading = false;
if (data.code === 0) {
try {
// 解析后端返回的设备状态JSON
const statusData = JSON.parse(data.data);
// 直接使用解析后的数据作为设备状态映射（不需要devices字段包装）
if (statusData && typeof statusData === 'object') {
// 成功获取到设备状态
this.mqttServiceAvailable = true;
// 更新设备状态
this.updateDeviceStatusFromResponse(statusData);
} else {
// 数据格式不正确，MQTT服务不可用
this.mqttServiceAvailable = false;
}
} catch (error) {
// JSON解析失败，MQTT服务不可用
this.mqttServiceAvailable = false;
}
} else {
// 接口调用失败，MQTT服务不可用
this.mqttServiceAvailable = false;
}
});
},
// 根据API响应更新设备状态
updateDeviceStatusFromResponse(deviceStatusMap) {
this.deviceList.forEach(device => {
// 构建设备的MQTT客户端ID
const macAddress = device.macAddress ? device.macAddress.replace(/:/g, '_') : 'unknown';
const groupId = device.model ? device.model.replace(/:/g, '_') : 'GID_default';
const mqttClientId = `${groupId}@@@${macAddress}@@@${macAddress}`;
// 从状态映射中获取设备状态
if (deviceStatusMap[mqttClientId]) {
const statusInfo = deviceStatusMap[mqttClientId];
@@ -462,17 +402,10 @@ export default {
device.deviceStatus = isOnline ? 'online' : 'offline';
} else {
// 如果没有找到对应的状态信息，默认为离线
device.deviceStatus = 'offline';
}
});
},
headerCellClassName({ columnIndex }) {
if (columnIndex === 0) {
return "custom-selection-header";
}
return "";
},
getFirmwareTypeName(type) {
const firmwareType = this.firmwareTypes.find(item => item.key === type)
return firmwareType ? firmwareType.name : type
@@ -492,7 +425,6 @@ export default {
this.$message.error(msg || this.$t('message.error'))
})
},
// 判断是否可以生成表情、主题、字体bin文件
isGenerate(row) {
const version = row.firmwareVersion.replace(/\./g, '');
return Number(version) >= 200;
@@ -503,13 +435,13 @@ export default {
if (isNaN(ts)) return '-';
const date = new Date(ts);
if (isNaN(date.getTime())) return '-';
return date.toLocaleString(); // 自动适配本地时区
return date.toLocaleString();
},
}
};
</script>
<style scoped>
<style lang="scss" scoped>
.welcome {
min-width: 900px;
min-height: 506px;
@@ -517,34 +449,33 @@ export default {
display: flex;
position: relative;
flex-direction: column;
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
overflow: hidden;
}
.main-wrapper {
height: calc(100vh - 63px - 35px - 72px);
margin: 0 22px;
border-radius: 15px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
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;
color: #2c3e50;
}
.right-operations {
@@ -554,74 +485,10 @@ export default {
}
.search-input {
width: 280px;
border-radius: 4px;
}
.btn-search {
background: linear-gradient(135deg, #6b8cff, #a966ff);
border: none;
color: white;
}
::v-deep .search-input .el-input__inner {
border-radius: 4px;
border: 1px solid #DCDFE6;
background-color: white;
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;
width: 240px;
}
.content-panel {
flex: 1;
display: flex;
overflow: hidden;
height: 100%;
@@ -642,161 +509,33 @@ export default {
.device-card {
background: white;
flex: 1;
display: flex;
flex-direction: column;
border: none;
box-shadow: none;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
::v-deep .el-card__body {
padding: 15px;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
::v-deep .el-card__body {
padding: 14px 20px;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
}
.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;
}
.ctrl_btn .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);
:deep(.el-table .el-button--text) {
color: #7079aa;
}
.ctrl_btn .el-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.ctrl_btn .el-button--primary {
background: #5f70f3;
color: white;
}
.ctrl_btn .el-button--success {
background: #5bc98c;
color: white;
}
.ctrl_btn .el-button--danger {
background: #fd5b63;
color: white;
}
.custom-pagination {
display: flex;
align-items: center;
gap: 10px;
}
.custom-pagination .el-select {
margin-right: 8px;
}
.custom-pagination .pagination-btn:first-child,
.custom-pagination .pagination-btn:nth-child(2),
.custom-pagination .pagination-btn:nth-last-child(2),
.custom-pagination .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;
}
.custom-pagination .pagination-btn:first-child:hover,
.custom-pagination .pagination-btn:nth-child(2):hover,
.custom-pagination .pagination-btn:nth-last-child(2):hover,
.custom-pagination .pagination-btn:nth-child(3):hover {
background: #d7dce6;
}
.custom-pagination .pagination-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.custom-pagination .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;
}
.custom-pagination .pagination-btn:not(:first-child):not(:nth-child(3)):not(:nth-child(2)):not(:nth-last-child(2)):hover {
background: rgba(245, 247, 250, 0.3);
}
.custom-pagination .pagination-btn.active {
background: #5f70f3 !important;
color: #ffffff !important;
border-color: #5f70f3 !important;
}
.custom-pagination .pagination-btn.active:hover {
background: #6d7cf5 !important;
}
.custom-pagination .total-text {
color: #909399;
font-size: 14px;
margin-left: 10px;
}
:deep(.transparent-table) {
background: white;
border: none;
}
:deep(.transparent-table .el-table__header th) {
background: white !important;
color: black;
border-right: none !important;
}
:deep(.transparent-table .el-table__body tr td) {
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
border-right: none !important;
}
:deep(.transparent-table .el-table__header tr th:first-child .cell),
:deep(.transparent-table .el-table__body tr td:first-child .cell) {
padding-left: 10px;
:deep(.el-table .el-button--text:hover) {
color: #5a64b5;
}
:deep(.el-icon-edit) {
@@ -807,65 +546,4 @@ export default {
:deep(.el-icon-edit:hover) {
color: #5a64b5;
}
:deep(.custom-selection-header .el-checkbox) {
display: none !important;
}
:deep(.el-table .el-button--text) {
color: #7079aa;
}
:deep(.el-table .el-button--text:hover) {
color: #5a64b5;
}
:deep(.transparent-table) {
flex: 1;
display: flex;
flex-direction: column;
/* max-height: calc(100vh - 40vh); */
}
:deep(.el-table__body-wrapper) {
flex: 1;
overflow-y: auto;
max-height: none !important;
}
:deep(.el-table__header-wrapper) {
flex-shrink: 0;
}
@media (min-width: 1144px) {
.table_bottom {
margin-top: 40px;
}
:deep(.transparent-table) .el-table__body tr td {
padding-top: 16px;
padding-bottom: 16px;
}
}
: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;
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
display: none !important;
}
</style>
main/manager-web/src/views/VoiceCloneManagement.vue
+417 -807
View File
File diff suppressed because it is too large Load Diff
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>