fix: dialog responsive sizing + clarify console password field

- All dialogs use width="90%" + max-width for responsive layout
- Clarify "控制台密码" → "火山控制台密码" with explanation hint
  (not AirGate login, but Volcengine console login for the sub-account)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-03-20 12:53:06 +08:00
parent 5edf247a7f
commit 0280cff61f

View File

@ -93,7 +93,7 @@
</el-card> </el-card>
<!-- Allocate Dialog --> <!-- Allocate Dialog -->
<el-dialog v-model="allocateVisible" title="额度变更" width="480px"> <el-dialog v-model="allocateVisible" title="额度变更" width="90%" style="max-width: 520px;">
<div style="margin-bottom:16px; padding:12px; background:#f5f7fa; border-radius:8px;"> <div style="margin-bottom:16px; padding:12px; background:#f5f7fa; border-radius:8px;">
<div>用户: <b>{{ allocateUser?.username }}</b></div> <div>用户: <b>{{ allocateUser?.username }}</b></div>
<div>当前额度: ¥{{ Number(allocateUser?.allocated_quota || 0).toLocaleString() }}</div> <div>当前额度: ¥{{ Number(allocateUser?.allocated_quota || 0).toLocaleString() }}</div>
@ -133,7 +133,7 @@
</el-dialog> </el-dialog>
<!-- Config Dialog --> <!-- Config Dialog -->
<el-dialog v-model="configVisible" title="监控配置" width="520px"> <el-dialog v-model="configVisible" title="监控配置" width="90%" style="max-width: 560px;">
<el-form :model="configForm" label-width="140px"> <el-form :model="configForm" label-width="140px">
<el-form-item label="告警阶梯(%)"> <el-form-item label="告警阶梯(%)">
<div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;"> <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
@ -159,7 +159,7 @@
</el-dialog> </el-dialog>
<!-- Projects Dialog --> <!-- Projects Dialog -->
<el-dialog v-model="projectsDialogVisible" :title="`${projectsUser?.username} 关联项目`" width="680px"> <el-dialog v-model="projectsDialogVisible" :title="`${projectsUser?.username} 关联项目`" width="90%" style="max-width: 900px;">
<div style="margin-bottom:12px; display:flex; gap:8px; align-items:center;"> <div style="margin-bottom:12px; display:flex; gap:8px; align-items:center;">
<el-select v-model="projectToAdd" placeholder="选择火山项目" filterable style="flex:1;" <el-select v-model="projectToAdd" placeholder="选择火山项目" filterable style="flex:1;"
:loading="volcProjectsLoading"> :loading="volcProjectsLoading">
@ -203,7 +203,7 @@
</el-dialog> </el-dialog>
<!-- Quota History Dialog --> <!-- Quota History Dialog -->
<el-dialog v-model="historyVisible" :title="`${historyUser?.username} 额度划拨记录`" width="600px"> <el-dialog v-model="historyVisible" :title="`${historyUser?.username} 额度划拨记录`" width="90%" style="max-width: 800px;">
<el-table :data="quotaHistory" stripe v-loading="historyLoading" empty-text="暂无划拨记录"> <el-table :data="quotaHistory" stripe v-loading="historyLoading" empty-text="暂无划拨记录">
<el-table-column prop="created_at" label="时间" width="180"> <el-table-column prop="created_at" label="时间" width="180">
<template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template> <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
@ -224,7 +224,7 @@
</el-dialog> </el-dialog>
<!-- Policies Dialog --> <!-- Policies Dialog -->
<el-dialog v-model="policiesVisible" :title="`${policiesUser?.username} 权限策略`" width="650px"> <el-dialog v-model="policiesVisible" :title="`${policiesUser?.username} 权限策略`" width="90%" style="max-width: 850px;">
<div style="margin-bottom:12px; display:flex; gap:8px;"> <div style="margin-bottom:12px; display:flex; gap:8px;">
<el-select v-model="policyToAttach" placeholder="选择要附加的策略" filterable style="flex:1;"> <el-select v-model="policyToAttach" placeholder="选择要附加的策略" filterable style="flex:1;">
<el-option-group label="常用策略"> <el-option-group label="常用策略">
@ -250,7 +250,7 @@
</el-dialog> </el-dialog>
<!-- Create User Dialog --> <!-- Create User Dialog -->
<el-dialog v-model="showCreate" title="创建子账号" width="520px"> <el-dialog v-model="showCreate" title="创建子账号" width="90%" style="max-width: 580px;">
<el-alert type="warning" :closable="false" style="margin-bottom:16px;" <el-alert type="warning" :closable="false" style="margin-bottom:16px;"
description="创建后会在火山引擎生成 IAM 用户和 API 密钥。SecretKey 仅显示一次,请务必保存!" /> description="创建后会在火山引擎生成 IAM 用户和 API 密钥。SecretKey 仅显示一次,请务必保存!" />
<el-form :model="createForm" label-width="110px"> <el-form :model="createForm" label-width="110px">
@ -266,9 +266,12 @@
<el-form-item label="手机号"> <el-form-item label="手机号">
<el-input v-model="createForm.phone" placeholder="选填,如 +8618000000000" /> <el-input v-model="createForm.phone" placeholder="选填,如 +8618000000000" />
</el-form-item> </el-form-item>
<el-form-item label="控制台密码"> <el-form-item label="火山控制台密码">
<el-input v-model="createForm.password" type="password" show-password <el-input v-model="createForm.password" type="password" show-password
placeholder="选填,填了才开通控制台登录" /> placeholder="选填" />
<div style="font-size:12px;color:#999;margin-top:4px;">
火山引擎网页后台的登录密码不填则子账号无法登录火山网页后台仅能通过 API Key 使用服务
</div>
</el-form-item> </el-form-item>
<el-form-item label="关联项目"> <el-form-item label="关联项目">
<el-select v-model="createForm.project_name" placeholder="选填" filterable clearable <el-select v-model="createForm.project_name" placeholder="选填" filterable clearable
@ -285,7 +288,7 @@
</el-dialog> </el-dialog>
<!-- Secret Key Display Dialog --> <!-- Secret Key Display Dialog -->
<el-dialog v-model="showSecretKey" title="API 密钥已生成" width="520px" :close-on-click-modal="false"> <el-dialog v-model="showSecretKey" title="API 密钥已生成" width="90%" style="max-width: 580px;" :close-on-click-modal="false">
<el-alert type="error" :closable="false" style="margin-bottom:16px;" <el-alert type="error" :closable="false" style="margin-bottom:16px;"
description="SecretAccessKey 仅此一次显示!关闭后无法再次获取,请立即复制保存。" /> description="SecretAccessKey 仅此一次显示!关闭后无法再次获取,请立即复制保存。" />
<el-descriptions :column="1" border> <el-descriptions :column="1" border>