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