hrz
7a260ee143
* 统一管理后台弹框更舒展 把 CustomDialog 默认宽度从 600 加到 720，正文给到至少 360 的高度， 默认弹框就不再显得局促。参数编辑弹框也跟着加宽。智能体历史版 本那条列表、对比和恢复预览都给到至少 420 的最小高度，避免内容 少时框太矮看起来小气。其他像添加智能体、绑定设备这些原本就合适 的弹框没动。 * 弹框外观统一收口 原本几个弹框长得参差不齐：标题字号、按钮文案、留白高度各管各的。这次把新建智能体、新建设备、改模型、改参数这几个弹框接到同一个底座上，按钮统一成「确定」「取消」，输入框字号高度对齐，遮罩背景加了模糊，弹框太高就内部滚动，四个弹框看起来一个模子 * 修复弹框关掉后再点不开 之前几个弹框改用新底座的时候，关闭那一路少了一段转发：父页面用双向绑定来收弹框关闭的信号，子页面应该再把关闭事件抛上去告诉父页面。这一段被删了，下次再点添加按钮时父页面那边状态没复位，弹框就拉不开来。现在把这段补回去。 * 弹框宽度和高度统一收口 同一批弹框的尺寸还是各管各的：模型配置里改参数那个是跟着窗口大小按比例伸缩，历史提示词的源编辑弹框是 900 像素，参数管理里又是 720 像素，智能体变更详情那个上下还留了一大块空白。这次收到同一个共用底子上：宽度都对齐到 720 像素，弹框默认上下贴齐屏幕边、内容多时中间滚动，变更详情那个高度撑到接近屏幕顶到底。 * 管理后台弹框按大小分类统一外观 管理后台里的弹框按大小分成两类来收口。占整页的大弹框（历史版本、变更详情、模型修改、模型参数修正等）撑满整个浏览器高度，下面不再留白；小弹框（添加智能体、添加设备、知识库、字典、角色模板等）改成对齐屏幕正中，不再顶在屏幕上沿。修改模型那条弹框也加宽到 960，左右留白加大到 40，跟历史版本对齐，看起来更舒展。 * 大弹框上下留白收口到十像素并按三档统一宽度 大弹框上下各留十像素让边框和圆角清晰可见。宽度按用途分三档：表单 960、含代码 1080、表格 80% 加宽度上限。供应器、上下文供应器、音色克隆都改 960；TTS 从 90% 改 80%；角色模板从 1200 改 1080；缓存查看从 70% 改 80%。新增模板的大文本框改成自适应高度。 * 弹框样式与文案收口处理 AddDeviceDialog 确认后关闭弹框；CustomDialog 去掉 :global 与紧邻选择器，合并 el-dialog__body 样式块；删除未使用的 --dialog-form/--dialog-code；AddWisdomBodyDialog 的 cancel/handleClose 委托到同一个实现；多语言文案同步去冒号与双点。 * 弹框遮罩样式移到全局作用域 scoped 块里的 ::v-deep .v-modal 打不到 body 层的遮罩，改在 global.scss 用全局选择器。 * 弹框 wrapper 居中样式移到全局作用域 scoped 块里的 ::v-deep .el-dialog__wrapper 同样打不到 element-ui 自渲染的 wrapper，跟 .v-modal 一起挪到 global.scss。 * 弹框提交状态异常收口 设备激活码错误路径不再卡 loading；Provider 与固件弹框补 loading 兜底。 * 弹框视觉异常收口 首页删除确认弹框 wrapper 居中；历史版本弹框去掉内层多余滚动条。 * 设备 API 链式返回修复 bindDevice 等方法补上 return，让 .fail() 兜底回调能正常注册到请求对象上。 * 设备 API 错误回调参数补全 device.js 六个方法加 failCallback 参数；user.js login 网络重试补 failCallback；AddDeviceDialog 改四参数签名。 * 设备状态 API 失败回调引用修复 getDeviceStatus 的 .fail() 块把函数体内 callback(res) 改成与签名一致的 if (failCallback) failCallback(err)，避免业务错误时抛 ReferenceError。
102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template>
|
|
<CustomDialog
|
|
:title="$t('addAgentDialog.title')"
|
|
:visible.sync="visible"
|
|
width="420px"
|
|
@confirm="confirm"
|
|
@cancel="cancel"
|
|
@close="handleClose"
|
|
:confirmText="$t('addAgentDialog.confirm')"
|
|
:cancelText="$t('addAgentDialog.cancel')"
|
|
@open="handleOpen"
|
|
>
|
|
<div class="add-agent-body">
|
|
<div class="add-agent-label">
|
|
<span class="required">*</span>
|
|
{{ $t('addAgentDialog.agentName') }}
|
|
</div>
|
|
<el-input
|
|
maxLength="64"
|
|
ref="inputRef"
|
|
:placeholder="$t('addAgentDialog.placeholder')"
|
|
v-model="wisdomBodyName"
|
|
class="add-agent-input"
|
|
@keyup.enter.native="confirm"
|
|
/>
|
|
</div>
|
|
</CustomDialog>
|
|
</template>
|
|
|
|
<script>
|
|
import Api from '@/apis/api';
|
|
import CustomDialog from './CustomDialog.vue';
|
|
|
|
export default {
|
|
name: 'AddWisdomBodyDialog',
|
|
components: { CustomDialog },
|
|
props: {
|
|
visible: { type: Boolean, required: true }
|
|
},
|
|
data() {
|
|
return {
|
|
wisdomBodyName: ""
|
|
}
|
|
},
|
|
methods: {
|
|
handleOpen() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.inputRef && this.$refs.inputRef.focus) {
|
|
this.$refs.inputRef.focus();
|
|
}
|
|
});
|
|
},
|
|
confirm() {
|
|
if (!this.wisdomBodyName.trim()) {
|
|
this.$message.error(this.$t('addAgentDialog.nameRequired'));
|
|
return;
|
|
}
|
|
Api.agent.addAgent(this.wisdomBodyName, (res) => {
|
|
this.$message.success({
|
|
message: this.$t('addAgentDialog.addSuccess'),
|
|
showClose: true
|
|
});
|
|
this.$emit('confirm', res);
|
|
this.$emit('update:visible', false);
|
|
this.wisdomBodyName = "";
|
|
});
|
|
},
|
|
cancel() {
|
|
this.wisdomBodyName = "";
|
|
this.$emit('update:visible', false);
|
|
},
|
|
handleClose() {
|
|
this.cancel();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.add-agent-body {
|
|
padding: 6px 4px 4px;
|
|
}
|
|
|
|
.add-agent-label {
|
|
font-size: 14px;
|
|
color: #475569;
|
|
text-align: left;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.add-agent-label .required {
|
|
color: #f56c6c;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.add-agent-input ::v-deep(.el-input__inner) {
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
border-color: #e2e8f0;
|
|
font-size: 14px;
|
|
}
|
|
</style> |