Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-26 00:53:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #815 from xinnan-tech/web-page-modify

Browse Source 
Web page modify
This commit is contained in:
CGD
2025-04-15 16:27:51 +08:00
committed by GitHub
parent 2242070bdc eafd131a22
commit 4e885dac3e
3 changed files with 224 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/ModelConfig.vue
+126 -91
View File
@@ -43,49 +43,49 @@
<!-- 右侧内容 --> <!-- 右侧内容 -->
<div class="content-area"> <div class="content-area">
<el-table ref="modelTable" style="width: 100%" :header-cell-style="{ background: 'transparent' }" <el-card class="model-card" shadow="never">
:data="modelList" class="data-table" header-row-class-name="table-header" <el-table ref="modelTable" style="width: 100%" :header-cell-style="{ background: 'transparent' }"
:header-cell-class-name="headerCellClassName" @selection-change="handleSelectionChange"> :data="modelList" class="data-table" header-row-class-name="table-header"
<el-table-column type="selection" width="55" align="center"></el-table-column> :header-cell-class-name="headerCellClassName" @selection-change="handleSelectionChange">
<el-table-column label="模型名称" prop="modelName" align="center"></el-table-column> <el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column label="模型编码" prop="modelCode" align="center"></el-table-column> <el-table-column label="模型名称" prop="modelName" align="center"></el-table-column>
<el-table-column label="提供商" align="center"> <el-table-column label="模型编码" prop="modelCode" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column label="提供商" align="center">
{{ scope.row.configJson.type || '未知' }} <template slot-scope="scope">
</template> {{ scope.row.configJson.type || '未知' }}
</el-table-column> </template>
<el-table-column label="是否启用" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="是否启用" align="center">
<el-switch v-model="scope.row.isEnabled" class="custom-switch" :active-value="1" :inactive-value="0" <template slot-scope="scope">
@change="handleStatusChange(scope.row)" /> <el-switch v-model="scope.row.isEnabled" class="custom-switch" :active-value="1" :inactive-value="0"
</template> @change="handleStatusChange(scope.row)" />
</el-table-column> </template>
<el-table-column label="是否默认" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="是否默认" align="center">
<el-switch v-model="scope.row.isDefault" class="custom-switch" :active-value="1" :inactive-value="0" <template slot-scope="scope">
@change="handleDefaultChange(scope.row)" /> <el-switch v-model="scope.row.isDefault" class="custom-switch" :active-value="1" :inactive-value="0"
</template> @change="handleDefaultChange(scope.row)" />
</el-table-column> </template>
<el-table-column v-if="activeTab === 'tts'" label="音色管理" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column v-if="activeTab === 'tts'" label="音色管理" align="center">
<el-button type="text" size="mini" @click="openTtsDialog(scope.row)" class="voice-management-btn"> <template slot-scope="scope">
音色管理 <el-button type="text" size="mini" @click="openTtsDialog(scope.row)" class="voice-management-btn">
</el-button> 音色管理
</template> </el-button>
</el-table-column> </template>
<el-table-column label="操作" align="center" width="150px"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="操作" align="center" width="150px">
<el-button type="text" size="mini" @click="editModel(scope.row)" class="edit-btn"> <template slot-scope="scope">
修改 <el-button type="text" size="mini" @click="editModel(scope.row)" class="edit-btn">
</el-button> 修改
<el-button type="text" size="mini" @click="deleteModel(scope.row)" class="delete-btn"> </el-button>
删除 <el-button type="text" size="mini" @click="deleteModel(scope.row)" class="delete-btn">
</el-button> 删除
</template> </el-button>
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
<div class="table-footer"> <div class="table-footer">
<div class="batch-actions"> <div class="batch-actions">
<el-button size="mini" type="primary" @click="selectAll"> <el-button size="mini" type="primary" @click="selectAll">
{{ isAllSelected ? {{ isAllSelected ?
@@ -121,6 +121,7 @@
<span class="total-text">共{{ total }}条记录</span> <span class="total-text">共{{ total }}条记录</span>
</div> </div>
</div> </div>
</el-card>
</div> </div>
</div> </div>
@@ -153,7 +154,7 @@ export default {
modelList: [], modelList: [],
pageSizeOptions: [5, 10, 20, 50, 100], pageSizeOptions: [5, 10, 20, 50, 100],
currentPage: 1, currentPage: 1,
pageSize: 5, pageSize: 10,
total: 0, total: 0,
selectedModels: [], selectedModels: [],
isAllSelected: false isAllSelected: false
@@ -165,7 +166,6 @@ export default {
}, },
computed: { computed: {
modelTypeText() { modelTypeText() {
const map = { const map = {
vad: '语言活动检测模型(VAD)', vad: '语言活动检测模型(VAD)',
@@ -177,8 +177,6 @@ export default {
} }
return map[this.activeTab] || '模型配置' return map[this.activeTab] || '模型配置'
}, },
pageCount() { pageCount() {
return Math.ceil(this.total / this.pageSize); return Math.ceil(this.total / this.pageSize);
}, },
@@ -200,6 +198,11 @@ export default {
}, },
methods: { methods: {
handlePageSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.loadData();
},
openTtsDialog(row) { openTtsDialog(row) {
this.selectedTtsModelId = row.id; this.selectedTtsModelId = row.id;
this.ttsDialogVisible = true; this.ttsDialogVisible = true;
@@ -212,7 +215,8 @@ export default {
}, },
handleMenuSelect(index) { handleMenuSelect(index) {
this.activeTab = index; this.activeTab = index;
this.currentPage = 1; this.currentPage = 1; // 重置到第一页
this.pageSize = 10; // 可选：重置每页条数
this.loadData(); this.loadData();
}, },
handleSearch() { handleSearch() {
@@ -457,7 +461,9 @@ export default {
.main-wrapper { .main-wrapper {
margin: 5px 22px; margin: 5px 22px;
border-radius: 15px; border-radius: 15px;
min-height: 600px; min-height: calc(100vh - 235px);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -475,12 +481,6 @@ export default {
margin: 0; margin: 0;
} }
.right-operations {
display: flex;
gap: 10px;
margin-left: auto;
}
.content-panel { .content-panel {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -553,17 +553,10 @@ export default {
padding: 24px; padding: 24px;
height: 100%; height: 100%;
min-width: 600px; min-width: 600px;
overflow-x: auto; overflow: hidden;
background-color: white; background-color: white;
}
.title-bar {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center;
margin-bottom: 24px;
flex-wrap: nowrap;
} }
.action-group { .action-group {
@@ -594,6 +587,48 @@ export default {
transition: border-color 0.2s; 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 { ::v-deep .search-input .el-input__inner:focus {
border-color: #6b8cff; border-color: #6b8cff;
outline: none; outline: none;
@@ -633,6 +668,9 @@ export default {
align-items: center; align-items: center;
padding: 16px 0; padding: 16px 0;
width: 100%; width: 100%;
flex-shrink: 0;
min-height: 60px;
background: white;
} }
.batch-actions { .batch-actions {
@@ -640,12 +678,6 @@ export default {
gap: 8px; gap: 8px;
} }
.title-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.batch-actions .el-button { .batch-actions .el-button {
min-width: 72px; min-width: 72px;
height: 32px; height: 32px;
@@ -697,11 +729,6 @@ export default {
background-color: transparent !important; background-color: transparent !important;
} }
.pagination-container {
display: flex;
justify-content: flex-end;
}
::v-deep .el-table .custom-selection-header .cell .el-checkbox__inner { ::v-deep .el-table .custom-selection-header .cell .el-checkbox__inner {
display: none !important; display: none !important;
} }
@@ -802,7 +829,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-top: 15px;
/* 导航按钮样式 (首页、上一页、下一页) */ /* 导航按钮样式 (首页、上一页、下一页) */
.pagination-btn:first-child, .pagination-btn:first-child,
@@ -865,23 +891,32 @@ export default {
} }
} }
.page-size-select { .model-card{
width: 100px; background: white;
margin-right: 8px; flex: 1;
display: flex;
flex-direction: column;
border: none;
box-shadow: none;
overflow: hidden;
}
:deep(.el-input__inner) { .model-card ::v-deep .el-card__body{
height: 32px; padding: 0;
line-height: 32px; display: flex;
border-radius: 4px; flex-direction: column;
border: 1px solid #e4e7ed; flex: 1;
background: #dee7ff; overflow: hidden;
color: #606266; }
font-size: 14px;
}
:deep(.el-input__suffix) { .data-table {
line-height: 32px; --table-max-height: calc(100vh - 450px);
} max-height: var(--table-max-height);
}
.data-table ::v-deep .el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 80px);
overflow-y: auto;
} }
</style> </style>
main/manager-web/src/views/ParamsManagement.vue
+28 -4
View File
@@ -426,8 +426,7 @@ export default {
.custom-pagination { .custom-pagination {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
margin-top: 15px;
.el-select { .el-select {
margin-right: 8px; margin-right: 8px;
@@ -597,7 +596,7 @@ export default {
.page-size-select { .page-size-select {
width: 100px; width: 100px;
margin-right: 8px; margin-right: 10px;
:deep(.el-input__inner) { :deep(.el-input__inner) {
height: 32px; height: 32px;
@@ -610,7 +609,32 @@ export default {
} }
:deep(.el-input__suffix) { :deep(.el-input__suffix) {
line-height: 32px; 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;
} }
} }
main/manager-web/src/views/UserManagement.vue
+70 -17
View File
@@ -16,7 +16,7 @@
<div class="content-area"> <div class="content-area">
<el-card class="user-card" shadow="never"> <el-card class="user-card" shadow="never">
<el-table ref="userTable" :data="userList" class="transparent-table" <el-table ref="userTable" :data="userList" class="transparent-table"
:header-cell-class-name="headerCellClassName" :max-height="tableMaxHeight"> :header-cell-class-name="headerCellClassName">
<el-table-column label="选择" type="selection" align="center" width="120"></el-table-column> <el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
<el-table-column label="用户Id" prop="userid" align="center"></el-table-column> <el-table-column label="用户Id" prop="userid" align="center"></el-table-column>
<el-table-column label="手机号码" prop="mobile" align="center"></el-table-column> <el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
@@ -50,7 +50,6 @@
<el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button> <el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
</div> </div>
<div class="custom-pagination"> <div class="custom-pagination">
<el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select"> <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
<el-option <el-option
v-for="item in pageSizeOptions" v-for="item in pageSizeOptions"
@@ -101,7 +100,6 @@ export default {
currentPage: 1, currentPage: 1,
pageSize: 5, pageSize: 5,
total: 0, total: 0,
tableMaxHeight: 410,
isAllSelected: false isAllSelected: false
}; };
}, },
@@ -361,6 +359,7 @@ export default {
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center; background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
-webkit-background-size: cover; -webkit-background-size: cover;
-o-background-size: cover; -o-background-size: cover;
overflow: hidden;
} }
.main-wrapper { .main-wrapper {
@@ -368,6 +367,7 @@ export default {
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 350px); min-height: calc(100vh - 350px);
height: auto; height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -419,12 +419,18 @@ export default {
min-width: 600px; min-width: 600px;
overflow-x: auto; overflow-x: auto;
background-color: white; background-color: white;
display: flex;
flex-direction: column;
} }
.user-card { .user-card {
background: white; background: white;
border: none; border: none;
box-shadow: none; box-shadow: none;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
} }
.table_bottom { .table_bottom {
@@ -489,7 +495,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-top: 15px;
.el-select { .el-select {
margin-right: 8px; margin-right: 8px;
@@ -556,6 +561,19 @@ export default {
:deep(.transparent-table) { :deep(.transparent-table) {
background: white; background: white;
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
.el-table__body-wrapper {
flex: 1;
overflow: auto;
max-height: none !important;
}
.el-table__header-wrapper {
flex-shrink: 0;
}
.el-table__header th { .el-table__header th {
background: white !important; background: white !important;
@@ -635,22 +653,57 @@ export default {
} }
.page-size-select { .page-size-select {
width: 100px; width: 100px;
margin-right: 8px; margin-right: 10px;
:deep(.el-input__inner) { :deep(.el-input__inner) {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;
background: #dee7ff; background: #dee7ff;
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
} }
:deep(.el-input__suffix) { :deep(.el-input__suffix) {
line-height: 32px; 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;
}
}
.el-table {
--table-max-height: calc(100vh - 400px);
max-height: var(--table-max-height);
.el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 40px);
} }
} }
</style> </style>