mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-23 07:33:53 +08:00
Merge branch 'main' into MVP
This commit is contained in:
Erlei Chen
@@ -3,6 +3,7 @@ import agent from './module/agent.js'
|
||||
import device from './module/device.js'
|
||||
import user from './module/user.js'
|
||||
import ota from './module/ota.js'
|
||||
import admin from './module/admin.js'
|
||||
|
||||
/**
|
||||
* 接口地址
|
||||
@@ -29,5 +30,6 @@ export default {
|
||||
user,
|
||||
agent,
|
||||
device,
|
||||
ota
|
||||
ota,
|
||||
admin
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import RequestService from '../httpRequest'
|
||||
import {getServiceUrl} from '../api'
|
||||
|
||||
|
||||
export default {
|
||||
// 用户列表
|
||||
getUserList(callback) {
|
||||
RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/admin/users`)
|
||||
.method('GET')
|
||||
.success((res) => {
|
||||
RequestService.clearRequestTime()
|
||||
callback(res)
|
||||
})
|
||||
.fail(() => {
|
||||
RequestService.reAjaxFun(() => {
|
||||
this.getList()
|
||||
})
|
||||
}).send()
|
||||
},
|
||||
}
|
||||
@@ -26,9 +26,9 @@ export default {
|
||||
.method('GET')
|
||||
.type('blob')
|
||||
.header({
|
||||
'Content-Type': 'image/gif',
|
||||
'Pragma': 'No-cache',
|
||||
'Cache-Control': 'no-cache'
|
||||
'Content-Type': 'image/gif',
|
||||
'Pragma': 'No-cache',
|
||||
'Cache-Control': 'no-cache'
|
||||
})
|
||||
.success((res) => {
|
||||
RequestService.clearRequestTime();
|
||||
|
||||
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
width="1000px"
|
||||
center
|
||||
custom-class="custom-dialog"
|
||||
:show-close="false"
|
||||
>
|
||||
<div style="margin: 0 30px 20px; text-align: left; padding: 20px; border-radius: 10px;">
|
||||
<div style="font-size: 27px; color: #3d4566; margin-bottom: 15px; text-align: center;">添加模型</div>
|
||||
|
||||
<!-- 模型信息部分 -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
||||
<div style="font-size: 20px; font-weight: bold; color: #3d4566;">模型信息</div>
|
||||
<div style="display: flex; align-items: center; gap: 20px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="margin-right: 8px;">是否启用</span>
|
||||
<el-switch v-model="formData.isEnabled" class="custom-switch"></el-switch>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="margin-right: 8px;">设为默认</span>
|
||||
<el-switch v-model="formData.isDefault" class="custom-switch"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 2px; background: #e9e9e9; margin-bottom: 20px;"></div>
|
||||
|
||||
<el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
|
||||
<!-- 第一行：模型名称和模型编码 -->
|
||||
<div style="display: flex; gap: 20px; margin-bottom: 15px;">
|
||||
<el-form-item label="模型名称" prop="modelName" style="flex: 1; margin-bottom: 0;">
|
||||
<el-input
|
||||
v-model="formData.modelName"
|
||||
placeholder="请输入模型名称"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型编码" prop="modelCode" style="flex: 1; margin-bottom: 0;">
|
||||
<el-input
|
||||
v-model="formData.modelCode"
|
||||
placeholder="请输入模型编码"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：供应器和排序号 -->
|
||||
<div style="display: flex; gap: 20px; margin-bottom: 15px;">
|
||||
<el-form-item label="供应器" prop="supplier" style="flex: 1; margin-bottom: 0;">
|
||||
<el-select
|
||||
v-model="formData.supplier"
|
||||
placeholder="请选择"
|
||||
class="custom-select custom-input-bg"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option label="硅基流动" value="硅基流动"></el-option>
|
||||
<el-option label="智脑科技" value="智脑科技"></el-option>
|
||||
<el-option label="云智科技" value="云智科技"></el-option>
|
||||
<el-option label="其他" value="其他"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" prop="sortOrder" style="flex: 1; margin-bottom: 0;">
|
||||
<el-input
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序号"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 文档地址 -->
|
||||
<el-form-item label="文档地址" prop="docLink" style="margin-bottom: 15px;">
|
||||
<el-input
|
||||
v-model="formData.docLink"
|
||||
placeholder="请输入文档地址"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-form-item label="备注" prop="remark" style="margin-bottom: 15px;">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入模型备注"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 调用信息部分 -->
|
||||
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
|
||||
<div style="height: 2px; background: #e9e9e9; margin-bottom: 20px;"></div>
|
||||
|
||||
<el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
|
||||
<!-- 第一行：模型名称和接口地址 -->
|
||||
<div style="display: flex; gap: 20px; margin-bottom: 15px;">
|
||||
<el-form-item label="模型名称" prop="param1" style="flex: 0.5; margin-bottom: 0;">
|
||||
<el-input
|
||||
v-model="formData.configJson.param1"
|
||||
placeholder="请输入model_name"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口地址" prop="param2" style="flex: 1; margin-bottom: 0;">
|
||||
<el-input
|
||||
v-model="formData.configJson.param2"
|
||||
placeholder="请输入base_url"
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 秘钥信息 -->
|
||||
<el-form-item label="秘钥信息" prop="apiKey" style="margin-bottom: 15px;">
|
||||
<el-input
|
||||
v-model="formData.configJson.apiKey"
|
||||
placeholder="请输入api_key"
|
||||
show-password
|
||||
class="custom-input-bg"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<div style="display: flex; margin: 20px 0; justify-content: center;">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="confirm"
|
||||
class="save-btn"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<!-- 修改关闭按钮 -->
|
||||
<button class="custom-close-btn" @click="handleClose">
|
||||
×
|
||||
</button>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddModelDialog',
|
||||
props: {
|
||||
visible: {type: Boolean, required: true},
|
||||
modelType: {type: String, required: true}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
modelName: '',
|
||||
modelCode: '',
|
||||
supplier: '',
|
||||
sort: 1,
|
||||
docLink: '',
|
||||
remark: '',
|
||||
isEnabled: true,
|
||||
isDefault: true,
|
||||
configJson: {
|
||||
param1: '',
|
||||
param2: '',
|
||||
apiKey: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
if (!this.formData.modelName || !this.formData.modelCode || !this.formData.supplier ||
|
||||
!this.formData.configJson.param1 || !this.formData.configJson.param2 || !this.formData.configJson.apiKey) {
|
||||
this.$message.error('请填写所有必填字段');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('confirm', {
|
||||
...this.formData,
|
||||
provideType: this.formData.supplier
|
||||
});
|
||||
this.$emit('update:visible', false);
|
||||
this.resetForm();
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {
|
||||
modelName: '',
|
||||
modelCode: '',
|
||||
supplier: '',
|
||||
sort: 1,
|
||||
docLink: '',
|
||||
remark: '',
|
||||
isEnabled: true,
|
||||
isDefault: true,
|
||||
configJson: {
|
||||
param1: '',
|
||||
param2: '',
|
||||
apiKey: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
handleClose() {
|
||||
this.resetForm();
|
||||
this.$emit('update:visible', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-dialog {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.custom-dialog .el-dialog__header {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.custom-close-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #cfcfcf;
|
||||
background: none;
|
||||
font-size: 30px;
|
||||
font-weight: lighter;
|
||||
color: #cfcfcf;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom-close-btn:hover {
|
||||
color: #409EFF;
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.custom-select .el-input__inner {
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
.custom-select .el-input__suffix {
|
||||
background: #e6e8ea;
|
||||
right: 7px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.custom-select .el-input__suffix-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-select .el-icon-arrow-up:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 8px solid #c0c4cc;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.custom-select .el-select .el-input .el-select__caret {
|
||||
color: #c0c4cc;
|
||||
font-size: 14px;
|
||||
transition: transform .3s;
|
||||
transform: rotateZ(0deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-select .el-select .el-input.is-focus .el-icon-arrow-up:before {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
/* 表单样式调整 */
|
||||
.custom-form .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.custom-form .el-form-item__label {
|
||||
color: #3d4566;
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* 修改placeholder颜色 */
|
||||
.custom-input-bg .el-input__inner::-webkit-input-placeholder,
|
||||
.custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
|
||||
color: #9c9f9e ;
|
||||
}
|
||||
|
||||
/* 输入框背景色 */
|
||||
.custom-input-bg .el-input__inner,
|
||||
.custom-input-bg .el-textarea__inner {
|
||||
background-color: #f6f8fc;
|
||||
}
|
||||
|
||||
.custom-form .el-input__inner,
|
||||
.custom-form .el-textarea__inner {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.custom-form .el-input__inner:focus,
|
||||
.custom-form .el-textarea__inner:focus {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #e6f0fd;
|
||||
color: #237ff4;
|
||||
border: 1px solid #b3d1ff;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background: linear-gradient(to right, #237ff4, #9c40d5);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 修复select宽度问题 */
|
||||
.el-select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 修改开关样式 */
|
||||
.custom-switch .el-switch__core {
|
||||
border-radius: 20px;
|
||||
height: 23px;
|
||||
background-color: #c0ccda;
|
||||
width: 35px;
|
||||
padding: 0 20px; /* 调整左右内边距 */
|
||||
}
|
||||
|
||||
.custom-switch .el-switch__core:after {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: white;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.custom-switch.is-checked .el-switch__core {
|
||||
border-color: #b5bcf0;
|
||||
background-color: #cfd7fa;
|
||||
padding: 0 20px; /* 确保启用状态也有相同的间隔 */
|
||||
}
|
||||
|
||||
.custom-switch.is-checked .el-switch__core:after {
|
||||
left: 100%;
|
||||
margin-left: -18px;
|
||||
background-color: #1b47ee;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="visible" width="400px" center>
|
||||
<div
|
||||
style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
|
||||
<div
|
||||
style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="@/assets/login/shield.png" alt="" style="width: 19px;height: 23px; filter: brightness(0) invert(1);" />
|
||||
</div>
|
||||
修改密码
|
||||
</div>
|
||||
<div style="height: 1px;background: #e8f0ff;"/>
|
||||
<div style="margin: 22px 15px;">
|
||||
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
|
||||
<div style="color: red;display: inline-block;">*</div>
|
||||
旧密码：
|
||||
</div>
|
||||
<div class="input-46" style="margin-top: 12px;">
|
||||
<el-input placeholder="请输入旧密码" v-model="oldPassword" type="password" show-password/>
|
||||
</div>
|
||||
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;margin-top: 12px;">
|
||||
<div style="color: red;display: inline-block;">*</div>
|
||||
新密码：
|
||||
</div>
|
||||
<div class="input-46" style="margin-top: 12px;">
|
||||
<el-input placeholder="请输入新密码" v-model="newPassword" type="password" show-password/>
|
||||
</div>
|
||||
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;margin-top: 12px;">
|
||||
<div style="color: red;display: inline-block;">*</div>
|
||||
确认新密码：
|
||||
</div>
|
||||
<div class="input-46" style="margin-top: 12px;">
|
||||
<el-input placeholder="请再次输入新密码" v-model="confirmNewPassword" type="password" show-password/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;margin: 15px 15px;gap: 7px;">
|
||||
<div class="dialog-btn" @click="confirm">
|
||||
确定
|
||||
</div>
|
||||
<div class="dialog-btn"
|
||||
style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;"
|
||||
@click="cancel">
|
||||
取消
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userApi from '@/apis/module/user';
|
||||
|
||||
export default {
|
||||
name: 'ChangePasswordDialog',
|
||||
props: {
|
||||
visible: {type: Boolean, required: true}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmNewPassword: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
if (!this.oldPassword.trim() || !this.newPassword.trim() || !this.confirmNewPassword.trim()) {
|
||||
this.$message.error('请填写所有字段');
|
||||
return;
|
||||
}
|
||||
if (this.newPassword !== this.confirmNewPassword) {
|
||||
this.$message.error('两次输入的新密码不一致');
|
||||
return;
|
||||
}
|
||||
if (this.newPassword === this.oldPassword) {
|
||||
this.$message.error('新密码不能与旧密码相同');
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接调用修改密码接口
|
||||
userApi.changePassword(this.oldPassword, this.newPassword, (res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.error(res.msg || '密码修改失败');
|
||||
} else {
|
||||
this.$message.success('密码修改成功');
|
||||
this.$emit('confirm', res);
|
||||
this.$emit('update:visible', false);
|
||||
this.resetForm();
|
||||
}
|
||||
}, (err) => {
|
||||
this.$message.error(err.msg || '密码修改失败');
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:visible', false);
|
||||
this.resetForm();
|
||||
},
|
||||
resetForm() {
|
||||
this.oldPassword = "";
|
||||
this.newPassword = "";
|
||||
this.confirmNewPassword = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-46 {
|
||||
border: 1px solid #e4e6ef;
|
||||
background: #f6f8fb;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__headerbtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialogVisible" width="900px" @close="handleClose" class="compact-dialog" :append-to-body="true">
|
||||
<el-form :model="voiceForm" :rules="rules" ref="voiceForm" label-width="80px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="音色编码" prop="voiceCode">
|
||||
<el-input v-model="voiceForm.voiceCode" placeholder="请输入内容" class="compact-input"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="音色名称" prop="voiceName">
|
||||
<el-input v-model="voiceForm.voiceName" placeholder="请输入内容" class="compact-input"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="语言类型" prop="languageType">
|
||||
<el-input v-model="voiceForm.languageType" placeholder="请输入内容" class="compact-input"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序号" prop="sortNumber">
|
||||
<el-input-number v-model="voiceForm.sortNumber" :min="1" :controls="false" class="compact-number"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="voiceForm.remark" type="textarea" :rows="2" placeholder="请输入内容" class="compact-textarea"
|
||||
></el-input>
|
||||
<div class="audio-controls">
|
||||
<div class="audio-player">
|
||||
<audio
|
||||
:src="audioUrl"
|
||||
controls
|
||||
preload="metadata"
|
||||
class="custom-audio"
|
||||
></audio>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" class="preview-btn">生成试听</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
<el-button type="primary" @click="handleClose">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditVoiceDialog',
|
||||
props: {
|
||||
showDialog: Boolean,
|
||||
voiceData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
voiceCode: 'wawaxiaohe',
|
||||
voiceName: '湾湾小何',
|
||||
languageType: '中文',
|
||||
sortNumber: 123
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: this.showDialog,
|
||||
voiceForm: { ...this.voiceData },
|
||||
audioUrl: 'http://music.163.com/song/media/outer/url?id=447925558.mp3',
|
||||
generatedAudio: null,
|
||||
rules: {
|
||||
voiceCode: [{ required: true, message: '请输入音色编码', trigger: 'blur' }],
|
||||
voiceName: [{ required: true, message: '请输入音色名称', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showDialog(newVal) {
|
||||
this.dialogVisible = newVal
|
||||
if (newVal) this.voiceForm = { ...this.voiceData }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('update:showDialog', false)
|
||||
},
|
||||
handleSave() {
|
||||
this.$refs.voiceForm.validate(valid => {
|
||||
if (valid) this.$emit('save', this.voiceForm)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.compact-dialog {
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.compact-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.compact-number {
|
||||
width: 100%;
|
||||
/deep/ .el-input__inner {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.compact-textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.audio-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
|
||||
|
||||
.preview-btn {
|
||||
padding: 7px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 16px 20px 0;
|
||||
text-align: right;
|
||||
border-top: 1px solid #EBEEF5;
|
||||
|
||||
.el-button {
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -13,6 +13,12 @@
|
||||
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;"/>
|
||||
控制台
|
||||
</div>
|
||||
<div ref="menu-code_user" class="menu-btn" @click="goToPage('/user-management')">
|
||||
用户管理
|
||||
</div>
|
||||
<div ref="menu-code_model" class="menu-btn" @click="goToPage('/model-config')">
|
||||
模型配置
|
||||
</div>
|
||||
<div ref="menu-code_ota" class="menu-btn" @click="goToPage('/ota')">
|
||||
<i class="el-icon-lightning"></i>
|
||||
OTA管理
|
||||
@@ -28,7 +34,7 @@
|
||||
<img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
{{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
{{ userInfo.mobile || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-user" @click.native="">个人中心</el-dropdown-item>
|
||||
@@ -38,15 +44,21 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码弹窗 -->
|
||||
<ChangePasswordDialog :visible.sync="isChangePasswordDialogVisible" />
|
||||
</el-header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userApi from '@/apis/module/user'
|
||||
|
||||
import userApi from '@/apis/module/user';
|
||||
import ChangePasswordDialog from './ChangePasswordDialog.vue'; // 引入修改密码弹窗组件
|
||||
|
||||
export default {
|
||||
name: 'HeaderBar',
|
||||
components: {
|
||||
ChangePasswordDialog
|
||||
},
|
||||
props: ['devices'], // 接收父组件设备列表
|
||||
data() {
|
||||
return {
|
||||
@@ -55,7 +67,7 @@ export default {
|
||||
username: '',
|
||||
mobile: ''
|
||||
},
|
||||
|
||||
isChangePasswordDialogVisible: false // 控制修改密码弹窗的显示
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -111,10 +123,13 @@ export default {
|
||||
}
|
||||
|
||||
this.$emit('search-result', filteredDevices);
|
||||
},
|
||||
|
||||
// 显示修改密码弹窗
|
||||
showChangePasswordDialog() {
|
||||
this.isChangePasswordDialogVisible = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialogVisible" width="800px" center>
|
||||
<el-form :model="form" ref="form" label-width="70px">
|
||||
<el-row :gutter="20" class="form-row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模型编码">
|
||||
<el-input v-model="form.code" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模型名称">
|
||||
<el-input v-model="form.name" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 供应商 -->
|
||||
<el-row :gutter="20" class="form-row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应器">
|
||||
<el-select v-model="form.supplier" placeholder="请选择">
|
||||
<el-option label="openai" value="openai" />
|
||||
<el-option label="dify" value="dify" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span class="el-form-item__label" style="width: 70px;">设成默认</span>
|
||||
<el-switch v-model="form.isDefault" style="margin-right: 20px;" />
|
||||
<span class="el-form-item__label" style="width: 70px;">是否启用</span>
|
||||
<el-switch v-model="form.isEnable" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 文档 -->
|
||||
<el-row :gutter="20" class="form-row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文档地址">
|
||||
<el-input v-model="form.docUrl" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序号">
|
||||
<el-input-number v-model="form.sort" :min="1" :max="999" controls-position="right" placeholder="123"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-form-item label="备注" class="form-row">
|
||||
<el-input type="textarea" v-model="form.remark" :rows="2" placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="vertical-fields">
|
||||
<el-form-item label="接口地址">
|
||||
<el-input v-model="form.apiUrl" placeholder="请输入base_url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型名称">
|
||||
<el-input v-model="form.modelName" placeholder="请输入model_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密钥信息">
|
||||
<el-input v-model="form.apiKey" placeholder="请输入api_key" show-password/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModelConfigDialog",
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
configData: { type: Object, default: () => ({}) }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: this.visible,
|
||||
form: {
|
||||
code: "",
|
||||
name: "",
|
||||
supplier: "",
|
||||
isDefault: true,
|
||||
isEnable: true,
|
||||
docUrl: "",
|
||||
sort: 123,
|
||||
remark: "",
|
||||
apiUrl: "",
|
||||
modelName: "",
|
||||
apiKey: ""
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialogVisible(val) {
|
||||
this.$emit('update:visible', val);
|
||||
},
|
||||
visible(val) {
|
||||
this.dialogVisible = val;
|
||||
if (val) this.form = { ...this.form, ...this.configData };
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSave() {
|
||||
this.$emit("submit", this.form);
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
margin-top: -30px;
|
||||
text-align: center;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
.form-row {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vertical-fields {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
margin-top: -10px;
|
||||
text-align: center;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="visible" width="80%" @close="handleClose">
|
||||
<el-row class="main-container">
|
||||
<el-col :span="4">
|
||||
<el-menu class="model-menu" :default-active="activeModel" mode="vertical" @select="handleModelSelect">
|
||||
<el-menu-item index="EdgeTTS">EdgeTTS</el-menu-item>
|
||||
<el-menu-item index="DoubaoTTS">DoubaoTTS</el-menu-item>
|
||||
<el-menu-item index="TTS302AI">TTS302AI</el-menu-item>
|
||||
<el-menu-item index="CosyVoiceSiliconflow">CosyVoiceSiliconflow</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="20">
|
||||
<div class="search-operate">
|
||||
<el-input placeholder="请输入音色名称查询" v-model="searchQuery" style="width: 300px; margin-right: 10px;"/>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" plain @click="handleAddVoice">添加音色</el-button>
|
||||
<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="filteredTtsModels" style="width: 100%" border stripe header-row-class-name="table-header">
|
||||
<el-table-column label="音色编码" prop="voiceCode" width="150" align="center"></el-table-column>
|
||||
<el-table-column label="音色名称" prop="voiceName" width="180" align="center"></el-table-column>
|
||||
<el-table-column label="语言类型" prop="languageType" width="120" align="center"></el-table-column>
|
||||
<el-table-column label="备注" prop="remark" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="editVoice(scope.row)" style="color: #409EFF; margin-right: 15px;">修改</el-button>
|
||||
<el-button size="mini" type="text" @click="deleteVoice(scope.row)" style="color: #F56C6C;">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next" prev-text="<" next-text=">"/>
|
||||
</div>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="medium">关闭</el-button>
|
||||
<el-button type="primary" @click="handleImportExport" size="medium">导入导出配置</el-button>
|
||||
</div>
|
||||
<EditVoiceDialog :showDialog="editDialogVisible" :voiceData="editVoiceData" @update:showDialog="editDialogVisible = $event" @saveVoice="handleSaveEditedVoice"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EditVoiceDialog from "@/components/EditVoiceDialog.vue";
|
||||
export default {
|
||||
components: { EditVoiceDialog },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeModel: 'EdgeTTS',
|
||||
searchQuery: '',
|
||||
editDialogVisible: false,
|
||||
editVoiceData: {},
|
||||
ttsModels: [
|
||||
{ voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
|
||||
{ voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
|
||||
{ voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
|
||||
{ voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
|
||||
],
|
||||
currentPage: 1,
|
||||
pageSize: 4,
|
||||
total: 20
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTtsModels() {
|
||||
return this.ttsModels.filter(model =>
|
||||
model.voiceName.toLowerCase().includes(this.searchQuery.toLowerCase())
|
||||
);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit('update:visible', false);
|
||||
},
|
||||
handleModelSelect(index) {
|
||||
this.activeModel = index;
|
||||
// 可根据选中模型加载对应数据
|
||||
},
|
||||
handleSearch() {
|
||||
// 搜索
|
||||
},
|
||||
handleAddVoice() {
|
||||
// 添加音色
|
||||
},
|
||||
handleBatchDelete() {
|
||||
// 批量删除
|
||||
},
|
||||
editVoice(voice) {
|
||||
this.editVoiceData = { ...voice };
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
handleSaveEditedVoice(voiceForm) {
|
||||
const index = this.ttsModels.findIndex(item => item.voiceCode === voiceForm.voiceCode);
|
||||
if (index !== -1) {
|
||||
this.ttsModels.splice(index, 1, voiceForm);
|
||||
}
|
||||
},
|
||||
deleteVoice(voice) {
|
||||
// 删除
|
||||
},
|
||||
handleImportExport() {
|
||||
// 导入导出
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.model-menu {
|
||||
border-right: 1px solid #ebeef5;
|
||||
height: calc(100vh - 300px);
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.search-operate {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
padding: 20px 20px 0;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
::v-deep .table-header th {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border td, ::v-deep .el-table--border th {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination {
|
||||
padding: 10px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-prev, ::v-deep .el-pagination .btn-next {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-prev:hover, ::v-deep .el-pagination .btn-next:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-pager li {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-pager li:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-pager li.active {
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
border-color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
@@ -64,7 +64,29 @@ const routes = [
|
||||
component: function () {
|
||||
return import('../views/ota.vue')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 添加用户管理路由
|
||||
{
|
||||
path: '/user-management',
|
||||
name: 'UserManagement',
|
||||
meta: {
|
||||
menuCode: 'user',
|
||||
},
|
||||
component: function () {
|
||||
return import('../views/UserManagement.vue')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/model-config',
|
||||
name: 'ModelConfig',
|
||||
meta: {
|
||||
menuCode: 'model',
|
||||
},
|
||||
component: function () {
|
||||
return import('../views/ModelConfig.vue')
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<HeaderBar />
|
||||
<div class="model-container">
|
||||
<el-menu :default-active="activeTab" class="el-menu-vertical-demo" @select="handleMenuSelect">
|
||||
<el-menu-item index="vad">语音活动检测</el-menu-item>
|
||||
<el-menu-item index="asr">语音识别</el-menu-item>
|
||||
<el-menu-item index="llm">大语言模型</el-menu-item>
|
||||
<el-menu-item index="intent">意图识别</el-menu-item>
|
||||
<el-menu-item index="tts">语音合成</el-menu-item>
|
||||
<el-menu-item index="memory">记忆</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="content-container">
|
||||
<div class="import-export-btn">
|
||||
<el-button v-if="activeTab === 'tts'" type="primary" @click="ttsDialogVisible = true" style="margin-right: 10px;">
|
||||
模型设置
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleImportExport">导入导出配置</el-button>
|
||||
</div>
|
||||
<el-main style="padding: 20px; display: flex; flex-direction: column;">
|
||||
<el-card class="model-card" shadow="always">
|
||||
<div class="model-header">
|
||||
<h2>大语言模型 (LLM)</h2>
|
||||
<el-button type="primary" @click="addModel" class="add-btn">添加</el-button>
|
||||
</div>
|
||||
<div class="model-search-operate" style="margin-bottom: 20px;">
|
||||
<el-input
|
||||
placeholder="请输入模型名称查询"
|
||||
v-model="search"
|
||||
style="width: 300px; margin-right: 10px"
|
||||
/>
|
||||
<el-button @click="handleSearch">查询</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="modelList"
|
||||
style="width: 100%;"
|
||||
border
|
||||
stripe
|
||||
header-cell-class-name="header-cell"
|
||||
>
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column label="模型名称" prop="candidateName"></el-table-column>
|
||||
<el-table-column label="模型编码" prop="code"></el-table-column>
|
||||
<el-table-column label="提供商" prop="supplier"></el-table-column>
|
||||
<el-table-column label="是否启用">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isApplied" active-color="#409EFF" inactive-color="#C0CCDA"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="editModel(scope.row)"
|
||||
style="margin-right: 5px;"
|
||||
type="text"
|
||||
class="action-btn"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="deleteModel(scope.row)"
|
||||
class="action-btn"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<el-button @click="selectAll" class="footer-btn">全选</el-button>
|
||||
<el-button type="danger" @click="batchDelete" class="footer-btn">删除</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
:page-size="pageSize"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
©2025 xiaozhi-esp32-server
|
||||
</div>
|
||||
<ModelEditDialog :visible.sync="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
|
||||
<TtsModel :visible.sync="ttsDialogVisible" />
|
||||
<AddModelDialog :visible.sync="addDialogVisible" :modelType="activeTab" @confirm="handleAddConfirm"/>
|
||||
</el-main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderBar from "@/components/HeaderBar.vue";
|
||||
import ModelEditDialog from "@/components/ModelEditDialog.vue";
|
||||
import TtsModel from "@/components/TtsModel.vue";
|
||||
import AddModelDialog from "@/components/AddModelDialog.vue";
|
||||
|
||||
export default {
|
||||
components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'llm',
|
||||
search: '',
|
||||
editDialogVisible: false,
|
||||
editModelData: {},
|
||||
ttsDialogVisible: false,
|
||||
addDialogVisible: false, // 新增弹窗显示状态
|
||||
modelList: [
|
||||
{ code: 'DeepSeek', candidateName: '深度求索', isApplied: true, supplier: '硅基流动' },
|
||||
{ code: 'SmartAssist', candidateName: '智能助手', isApplied: false, supplier: '智脑科技' },
|
||||
{ code: 'CogEngine', candidateName: '认知引擎', isApplied: true, supplier: '云智科技' },
|
||||
],
|
||||
currentPage: 1,
|
||||
pageSize: 4,
|
||||
total: 20
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleMenuSelect(index) {
|
||||
this.activeTab = index;
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('查询：', this.search);
|
||||
},
|
||||
batchDelete() {
|
||||
console.log('批量删除');
|
||||
},
|
||||
// 修改addModel方法
|
||||
addModel() {
|
||||
this.addDialogVisible = true;
|
||||
},
|
||||
// 新增处理方法
|
||||
handleAddConfirm(formData) {
|
||||
// 这里处理添加模型的逻辑
|
||||
console.log('新增模型数据:', formData);
|
||||
// 模拟添加到列表
|
||||
this.modelList.unshift({
|
||||
code: formData.modelCode,
|
||||
candidateName: formData.modelName,
|
||||
supplier: formData.supplier,
|
||||
isApplied: formData.isEnabled
|
||||
});
|
||||
this.$message.success('模型添加成功');
|
||||
},
|
||||
editModel(model) {
|
||||
this.editModelData = {
|
||||
code: model.code,
|
||||
name: model.candidateName,
|
||||
supplier: model.supplier,
|
||||
};
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
deleteModel(model) {
|
||||
console.log('删除：', model);
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
this.currentPage = page;
|
||||
console.log('当前页码：', page);
|
||||
},
|
||||
handleImportExport() {
|
||||
console.log('导入导出');
|
||||
},
|
||||
handleModelSave(formData) {
|
||||
console.log('保存的模型数据：', formData);
|
||||
},
|
||||
selectAll() {
|
||||
console.log('全选');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.welcome {
|
||||
min-width: 900px;
|
||||
min-height: 506px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url("@/assets/home/background.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
-webkit-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
.model-container {
|
||||
display: flex;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo {
|
||||
width: 250px;
|
||||
margin-right: 20px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.model-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.model-search-operate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.model-search-operate > * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.el-table__header th {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.model-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.import-export-btn {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #979db1;
|
||||
margin-top: auto;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
margin-right: 830px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<HeaderBar />
|
||||
<el-main class="main" style="padding: 20px; display: flex; flex-direction: column;">
|
||||
<div class="top-area">
|
||||
<div class="page-title">用户管理</div>
|
||||
<div class="page-search">
|
||||
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
|
||||
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
|
||||
<!-- <el-button type="danger" @click="batchDelete">批量删除</el-button>
|
||||
<el-button type="danger" @click="batchDisable">批量禁用</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card class="user-card" shadow="never">
|
||||
<!-- <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
|
||||
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
|
||||
<el-button @click="handleSearch">查询</el-button>
|
||||
<el-button type="danger" @click="batchDelete">批量删除</el-button>
|
||||
<el-button type="danger" @click="batchDisable">批量禁用</el-button>
|
||||
</div> -->
|
||||
<el-table :data="userList" style="width: 100%;">
|
||||
<el-table-column label="选择"
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column label="用户Id" prop="user_id"></el-table-column>
|
||||
<el-table-column label="手机号码" prop="mobile"></el-table-column>
|
||||
<el-table-column label="设备数量" prop="device_count"></el-table-column>
|
||||
<el-table-column label="状态" prop="status"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
|
||||
<el-button size="mini" type="text"
|
||||
v-if="scope.row.status === '正常'"
|
||||
@click="disableUser(scope.row)">禁用</el-button>
|
||||
<el-button size="mini" type="text"
|
||||
v-if="scope.row.status === '禁用'"
|
||||
@click="restoreUser(scope.row)">恢复</el-button>
|
||||
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="table_bottom">
|
||||
<div class="ctrl_btn">
|
||||
<el-button size="mini" type="primary">全选</el-button>
|
||||
<el-button size="mini" type="success" icon="el-icon-circle-check">启用</el-button>
|
||||
<el-button size="mini" type="warning" icon="el-icon-circle-close">禁用</el-button>
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
:page-size="pageSize"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
|
||||
©2025 xiaozhi-esp32-server
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderBar from "@/components/HeaderBar.vue";
|
||||
import Api from '@/apis/api';
|
||||
import adminApi from '@/apis/module/admin';
|
||||
|
||||
|
||||
export default {
|
||||
components: { HeaderBar },
|
||||
data() {
|
||||
return {
|
||||
searchPhone: '',
|
||||
userList: [
|
||||
{ userId: '123456', phone: '13800138000', status: '正常', deviceCount: 10 },
|
||||
{ userId: '123456', phone: '13800138000', status: '正常', deviceCount: 9 },
|
||||
{ userId: '123456', phone: '13800138000', status: '正常', deviceCount: 7 },
|
||||
{ userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
|
||||
],
|
||||
currentPage: 1,
|
||||
pageSize: 4,
|
||||
total: 20
|
||||
};
|
||||
},
|
||||
created() {
|
||||
adminApi.getUserList(({data}) => {
|
||||
//mock偶尔会返回-1导致出错，又会返回两个list，所以这里只取第一个
|
||||
this.userList = data.data[0].list;
|
||||
console.log('用户列表：', this.userList);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
// 模拟搜索逻辑
|
||||
console.log('执行查询，搜索号码：', this.searchPhone);
|
||||
},
|
||||
batchDelete() {
|
||||
console.log('执行批量删除操作');
|
||||
},
|
||||
batchDisable() {
|
||||
console.log('执行批量禁用操作');
|
||||
},
|
||||
resetPassword(row) {
|
||||
console.log('重置用户密码，用户：', row);
|
||||
},
|
||||
disableUser(row) {
|
||||
row.status = '禁用';
|
||||
console.log('禁用用户：', row);
|
||||
},
|
||||
restoreUser(row) {
|
||||
row.status = '正常';
|
||||
console.log('恢复用户：', row);
|
||||
},
|
||||
deleteUser(row) {
|
||||
console.log('删除用户：', row);
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
this.currentPage = page;
|
||||
console.log('当前页码：', page);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
padding: 20px; display: flex; flex-direction: column;
|
||||
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
|
||||
}
|
||||
.top-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.page-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn-search {
|
||||
margin-left: 10px;
|
||||
background: linear-gradient(to right, #5778ff, #c793f3);
|
||||
width: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.welcome {
|
||||
min-width: 900px;
|
||||
min-height: 506px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url("@/assets/home/background.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
-webkit-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
.user-search-operate {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-search-operate > * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.el-table__header th {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
opacity: 0.9;
|
||||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table_bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
.ctrl_btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user