ui: clarify global vs project-level policies in frontend

- Rename "权限策略" to "全局权限策略" in dropdown menu
- Add info banner explaining global vs project-level in both dialogs
- Disable already-attached policies in global dropdown (grey out)
- Show policy type as tag (系统/自定义) in global policies table

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-03-28 22:25:29 +08:00
parent 4e62f3f32e
commit a2a822a889

View File

@ -82,7 +82,7 @@
<el-dropdown-item @click="toggleVolcLogin(row)"> <el-dropdown-item @click="toggleVolcLogin(row)">
{{ row.volc_login_allowed ? '🔓 关闭火山登录' : '🔒 开启火山登录' }} {{ row.volc_login_allowed ? '🔓 关闭火山登录' : '🔒 开启火山登录' }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item @click="openPolicies(row)">权限策略</el-dropdown-item> <el-dropdown-item @click="openPolicies(row)">全局权限策略</el-dropdown-item>
<el-dropdown-item @click="openQuotaHistory(row)">划拨记录</el-dropdown-item> <el-dropdown-item @click="openQuotaHistory(row)">划拨记录</el-dropdown-item>
<el-dropdown-item @click="openSetLogin(row)">登录密码</el-dropdown-item> <el-dropdown-item @click="openSetLogin(row)">登录密码</el-dropdown-item>
<el-dropdown-item v-if="row.status === 'active'" divided <el-dropdown-item v-if="row.status === 'active'" divided
@ -221,11 +221,13 @@
<!-- Project Policies Dialog --> <!-- Project Policies Dialog -->
<el-dialog v-model="projectPolicyVisible" <el-dialog v-model="projectPolicyVisible"
:title="`${projectPolicyProject?.project_name} 项目授权`" :title="`${projectPolicyProject?.project_name} 项目授权`"
width="90%" style="max-width: 550px;"> width="90%" style="max-width: 550px;">
<p style="margin-bottom:12px; color:#606266; font-size:13px;"> <el-alert type="info" :closable="false" style="margin-bottom:12px;">
子账号 <strong>{{ projectsUser?.username }}</strong> 在此项目下的权限 <template #title>
</p> 以下权限仅在 <strong>{{ projectPolicyProject?.project_name }}</strong> 项目范围内生效不影响其他项目
</template>
</el-alert>
<el-checkbox-group v-model="projectPolicySelected"> <el-checkbox-group v-model="projectPolicySelected">
<div style="display:flex; flex-direction:column; gap:8px;"> <div style="display:flex; flex-direction:column; gap:8px;">
<el-checkbox label="ArkFullAccess">方舟/Seedance 完整权限</el-checkbox> <el-checkbox label="ArkFullAccess">方舟/Seedance 完整权限</el-checkbox>
@ -282,25 +284,33 @@
</el-table> </el-table>
</el-dialog> </el-dialog>
<!-- Policies Dialog --> <!-- Policies Dialog (Global) -->
<el-dialog v-model="policiesVisible" :title="`${policiesUser?.username} 权限策略`" width="90%" style="max-width: 850px;"> <el-dialog v-model="policiesVisible" :title="`${policiesUser?.username} 全局权限策略`" width="90%" style="max-width: 850px;">
<el-alert type="info" :closable="false" style="margin-bottom:12px;">
<template #title>
<strong>全局策略</strong>对所有项目生效如需限定到某个项目请在项目管理 授权中设置项目级策略
</template>
</el-alert>
<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="常用策略">
<el-option value="ArkFullAccess" label="ArkFullAccess方舟/Seedance 完整权限)" /> <el-option v-for="opt in globalPolicyOptions" :key="opt.value"
<el-option value="ArkExperienceAccess" label="ArkExperienceAccess方舟体验权限" /> :value="opt.value" :label="opt.label"
<el-option value="ArkReadOnlyAccess" label="ArkReadOnlyAccess方舟只读" /> :disabled="policies.some(p => p.PolicyName === opt.value)" />
<el-option value="TOSFullAccess" label="TOSFullAccess对象存储完整权限" />
<el-option value="TOSReadOnlyAccess" label="TOSReadOnlyAccess对象存储只读" />
<el-option value="AccessKeySelfManageAccess" label="AccessKeySelfManageAccess自管理密钥" />
</el-option-group> </el-option-group>
</el-select> </el-select>
<el-button type="primary" @click="handleAttachPolicy" :disabled="!policyToAttach">附加</el-button> <el-button type="primary" @click="handleAttachPolicy" :disabled="!policyToAttach">附加</el-button>
</div> </div>
<el-table :data="policies" stripe v-loading="policiesLoading" empty-text="暂无策略"> <el-table :data="policies" stripe v-loading="policiesLoading" empty-text="暂无策略">
<el-table-column prop="PolicyName" label="策略名" /> <el-table-column prop="PolicyName" label="策略名" min-width="200" />
<el-table-column prop="PolicyType" label="类型" width="80" /> <el-table-column prop="PolicyType" label="类型" width="80">
<el-table-column prop="Description" label="说明" /> <template #default="{ row }">
<el-tag :type="row.PolicyType === 'Custom' ? 'warning' : 'info'" size="small">
{{ row.PolicyType === 'Custom' ? '自定义' : '系统' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="Description" label="说明" min-width="200" />
<el-table-column label="操作" width="80"> <el-table-column label="操作" width="80">
<template #default="{ row }"> <template #default="{ row }">
<el-button size="small" type="danger" text @click="handleDetachPolicy(row)">移除</el-button> <el-button size="small" type="danger" text @click="handleDetachPolicy(row)">移除</el-button>
@ -478,6 +488,16 @@ async function handleEnable(row) {
} }
} }
// Global policy options
const globalPolicyOptions = [
{ value: 'ArkFullAccess', label: 'ArkFullAccess方舟/Seedance 完整权限)' },
{ value: 'ArkExperienceAccess', label: 'ArkExperienceAccess方舟体验权限' },
{ value: 'ArkReadOnlyAccess', label: 'ArkReadOnlyAccess方舟只读' },
{ value: 'TOSFullAccess', label: 'TOSFullAccess对象存储完整权限' },
{ value: 'TOSReadOnlyAccess', label: 'TOSReadOnlyAccess对象存储只读' },
{ value: 'AccessKeySelfManageAccess', label: 'AccessKeySelfManageAccess自管理密钥' },
]
// Toggle Volcengine console login // Toggle Volcengine console login
async function toggleVolcLogin(row) { async function toggleVolcLogin(row) {
const action = row.volc_login_allowed ? '关闭' : '开启' const action = row.volc_login_allowed ? '关闭' : '开启'