diff --git a/main/manager-web/src/components/ManualAddDeviceDialog.vue b/main/manager-web/src/components/ManualAddDeviceDialog.vue
index 7cc8625f..00490de6 100644
--- a/main/manager-web/src/components/ManualAddDeviceDialog.vue
+++ b/main/manager-web/src/components/ManualAddDeviceDialog.vue
@@ -1,43 +1,45 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ $t('manualAddDeviceDialog.confirm') }}
-
{{ $t('manualAddDeviceDialog.cancel') }}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
\ No newline at end of file
diff --git a/main/manager-web/src/components/VoiceCloneDialog.vue b/main/manager-web/src/components/VoiceCloneDialog.vue
index 7bd95f48..6af12268 100644
--- a/main/manager-web/src/components/VoiceCloneDialog.vue
+++ b/main/manager-web/src/components/VoiceCloneDialog.vue
@@ -1,6 +1,11 @@
-
+
-
-
diff --git a/main/manager-web/src/components/VoiceResourceDialog.vue b/main/manager-web/src/components/VoiceResourceDialog.vue
index 1575ea0b..d05c8d52 100644
--- a/main/manager-web/src/components/VoiceResourceDialog.vue
+++ b/main/manager-web/src/components/VoiceResourceDialog.vue
@@ -1,7 +1,15 @@
-
-
+
+
@@ -31,19 +39,16 @@
-
-
-
+
-
-
diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue
index a897352b..1cefd474 100644
--- a/main/manager-web/src/views/DeviceManagement.vue
+++ b/main/manager-web/src/views/DeviceManagement.vue
@@ -2,118 +2,83 @@
-
-
{{ $t('device.management') }}
-
-
- {{ $t('device.search') }}
-
-
-
-
-
-
-
-
-
-
-
- {{ getFirmwareTypeName(scope.row.model) }}
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('device.online') }}
- {{ $t('device.offline') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('device.unbind') }}
-
-
- {{ $t('device.deviceThemeGeneration') }}
-
-
-
-
-
-
-
-
- {{ isCurrentPageAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
-
-
- {{ $t('device.bindWithCode') }}
-
-
- {{ $t('device.manualAdd') }}
-
-
- {{ $t('device.unbind') }}
-
-
-
@@ -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();
},
}
};
-
diff --git a/main/manager-web/src/views/VoiceCloneManagement.vue b/main/manager-web/src/views/VoiceCloneManagement.vue
index e7740a87..0fa67db5 100644
--- a/main/manager-web/src/views/VoiceCloneManagement.vue
+++ b/main/manager-web/src/views/VoiceCloneManagement.vue
@@ -1,128 +1,83 @@
-
-
-
-
{{ $t('voiceClone.title') }}
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ row.name || '-' }}
-
-
-
-
-
-
-
-
- {{ getTrainStatusText(scope.row) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ playingRowId === scope.row.id ? $t('voiceClone.stop') : $t('voiceClone.play') }}
-
-
- {{ $t('voiceClone.upload') }}
-
-
- {{ $t('voiceClone.clone') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('voiceClone.noVoiceCloneAssigned') }}
-
-
- {{ $t('voiceClone.contactAdmin') }}
-
-
-
+
+
+
+
+
+
+ {{ scope.row.name || '-' }}
+
+
+
+
+
+ {{ getTrainStatusText(scope.row) }}
-
+
+
+
+
+
+
+
+
+
+ {{ playingRowId === scope.row.id ? $t('voiceClone.stop') : $t('voiceClone.play') }}
+
+
+ {{ $t('voiceClone.upload') }}
+
+
+ {{ $t('voiceClone.clone') }}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main/manager-web/src/views/VoiceResourceManagement.vue b/main/manager-web/src/views/VoiceResourceManagement.vue
index 0e2b0b38..cf3e9ee9 100644
--- a/main/manager-web/src/views/VoiceResourceManagement.vue
+++ b/main/manager-web/src/views/VoiceResourceManagement.vue
@@ -1,91 +1,48 @@
-
-
-
{{ $t('voiceResource.title') }}
-
-
- {{ $t('voiceClone.search') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ getTrainStatusText(scope.row) }}
-
-
-
-
- {{ formatDate(scope.row.createDate) }}
-
-
-
-
- {{
- $t('voiceClone.delete') }}
-
-
-
-
-
-
-
- {{ isAllSelected ? $t('voiceClone.deselectAll') : $t('voiceClone.selectAll') }}
-
- {{
- $t('voiceClone.addNew') }}
- {{
- $t('voiceClone.delete') }}
-
-
@@ -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;
}