SDU棋界精灵——web管理员端设计
如图，登陆注册界面、智能体管理、前往论坛界面同用户端是相同的逻辑和界面。在上一篇csdn博客已经介绍过，本次博客介绍管理员端的模型配置页面、用户管理页面、参数管理页面、OTA管理页面（用户端没有）的实现逻辑和方法。
一、模型配置页面
1. 功能概述
模型配置页面主要用于管理智能体设备的语言模型及相关参数，包括：
-
模型选择：从预定义或动态获取的语言模型列表中选择合适的模型。
-
参数调整：设置模型运行时的关键参数（如温度、最大生成长度等）。
-
配置保存：将用户设置的模型参数持久化到后端，并支持设备重启生效。
2. 实现过程与思路
2.1 动态加载模型列表
-
API 设计：
后端需提供接口 /api/v1/models，返回可用语言模型列表：
{
"code": 0,
"data": {
"models": [
{ "id": "qwen-realtime", "name": "Qwen 实时", "description": "低延迟实时模型" },
{ "id": "gpt-3.5", "name": "GPT-3.5", "description": "通用生成模型" }
]
}
}
-
前端实现：
在 user.js 中扩展API方法，并在 home.vue 中调用：
// user.js
getLanguageModels(callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/models`)
.method('GET')
.success((res) => callback(res))
.send();
}
// home.vue
methods: {
fetchLanguageModels() {
Api.user.getLanguageModels(({ data }) => {
if (data.code === 0) {
this.options = data.models.map(model => ({
value: model.id,
label: model.name
}));
}
});
}
}
2.2 表单绑定与参数调整
-
表单结构：
使用 el-select 绑定模型ID，el-slider 或 el-input-number 绑定参数：
-
数据初始化：
从设备详情接口中加载已配置的模型参数：
// 获取设备详情时初始化表单
getDeviceDetail(deviceId) {
Api.device.getDetail(deviceId, ({ data }) => {
this.form = {
model_id: data.model_id,
temperature: data.temperature || 0.7,
max_length: data.max_length || 512
};
});
}
2.3 配置保存与生效
-
API 设计：
提交配置至 /api/v1/device/{deviceId}/model-config，请求体示例：
{
"model_id": "qwen-realtime",
"temperature": 0.5,
"max_length": 1024
}
-
前端提交逻辑：
点击“保存配置”按钮时校验并调用接口：
saveModelConfig() {
if (!this.form.model_id) {
this.$message.warning('请选择语言模型');
return;
}
Api.device.saveModelConfig(this.deviceId, this.form, ({ data }) => {
if (data.code === 0) {
this.$message.success('配置已保存，请重启设备生效');
}
});
}
3. 关键技术点
-
动态数据驱动
-
通过API动态加载模型列表，避免硬编码，支持后端灵活扩展模型类型。
-
使用 v-for 渲染下拉选项，确保界面与数据同步更新。
-
-
表单验证与反馈
-
对必填字段（如模型ID）进行非空校验，防止无效提交。
-
参数范围校验（如温度值限制在0-1之间），通过Element UI组件内置功能实现。
-
-
用户体验优化
-
实时提示：在滑动条旁显示当前值（show-input属性）。
-
配置预览：展示模型描述信息（需后端返回description字段）：
-
-
异常处理：
-
未选择模型：提示“请选择语言模型”。
-
接口超时：通过 httpRequest.js 的自动重试机制（reAjaxFun）保障提交可靠性。
-
二、用户管理界面
1.功能概述
用户管理界面主要面向系统管理员，提供对注册用户的全面管理功能，包括：
-
用户列表展示：查看所有用户的基本信息（用户名、手机号、角色、状态等）。
-
用户信息编辑：修改用户角色、禁用/启用账户。
-
用户删除：安全移除无效或违规账户。
-
密码重置：管理员强制重置用户密码。
-
权限控制：确保仅管理员可访问管理功能。
2. 实现过程与思路
2.1 用户列表展示
-
API 设计：
后端提供 /api/v1/admin/users 接口，支持分页、搜索和排序：
//（GET /api/v1/admin/users?page=1&size=10&search=admin）
{
"code": 0,
"data":
