+
+
+ setFormName(e.target.value)} placeholder="权限组名称" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {PERMISSION_CATEGORIES.map(cat => {
+ var allChecked = cat.items.every(i => formPermissions.includes(i.code));
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+
+ if (loading) return 加载中...
;
+
+ return (
+
+
+
+
实例权限组
+
管理实例访问权限,按组分配用户和操作权限
+
+ {canManage && (
+
+ )}
+
+
+ {/* 统计卡片 */}
+
+ {[
+ { label: '权限组总数', value: groups.length, color: 'text-blue-400', bg: 'bg-blue-400/10' },
+ { label: '活跃权限组', value: groups.filter(g => g.is_active).length, color: 'text-green-400', bg: 'bg-green-400/10' },
+ { label: '关联实例数', value: groups.reduce((sum, g) => sum + (g.instance_count || 0), 0), color: 'text-purple-400', bg: 'bg-purple-400/10' },
+ { label: '关联用户数', value: groups.reduce((sum, g) => sum + (g.user_count || 0), 0), color: 'text-orange-400', bg: 'bg-orange-400/10' },
+ ].map((s, i) => (
+
+
+
+ {[Server, Server, Users, Users][i] && (() => { var Icon = [Server, Server, Users, Users][i]; return ; })()}
+
+
+
{s.value}
+
{s.label}
+
+
+
+ ))}
+
+
+
+ {/* 左侧列表 */}
+
+
+
+ setSearch(e.target.value)} />
+
+
+ {filteredGroups.length === 0 && (
+
暂无权限组
+ )}
+ {filteredGroups.map(group => (
+
setSelectedId(group.id)} className={`p-3.5 rounded-lg cursor-pointer transition-colors ${selectedId === group.id ? 'bg-blue-500/10 border border-blue-500/30' : 'bg-[var(--dg-bg-secondary)] border border-transparent hover:bg-[var(--dg-bg-hover)]'}`}>
+
+
+ {group.name}
+ {DB_TYPE_OPTIONS.find(o => o.value === group.db_type)?.label || group.db_type}
+
+ {!group.is_active &&
禁用}
+
+ {group.description &&
{group.description}
}
+
+ {group.instance_count || 0} 实例
+ {group.user_count || 0} 用户
+ {(group.permissions || []).length} 权限
+
+
+ ))}
+
+
+
+ {/* 右侧详情 */}
+
+ {selectedGroup ? (() => {
+ var sg = selectedGroup!;
+ return (
+
+
+
+
+
+
+
{sg.name}
+ {DB_TYPE_OPTIONS.find(o => o.value === sg.db_type)?.label}
+ {sg.is_active ? '启用' : '禁用'}
+
+ {sg.description &&
{sg.description}
}
+
+ {canManage && (
+
+
+
+
+ )}
+
+ {/* 权限标签 */}
+ {sg.permissions && sg.permissions.length > 0 && (
+
+
已配置权限
+
+ {sg.permissions.map(p => {
+ var parts = p.split(':');
+ return {parts[0]} · {parts[1]};
+ })}
+
+
+ )}
+
+
+
+ {/* 关联实例 */}
+
+
+
+
关联实例 ({sg.instances?.length || 0})
+ {canManage && (
+
+ )}
+
+ {sg.instances && sg.instances.length > 0 ? (
+
+ {sg.instances.map(inst => (
+
+
+
+ {inst.name}
+ {inst.host}:{inst.port}
+
+ {canManage && (
+
+ )}
+
+ ))}
+
+ ) : (
+ 暂未关联实例
+ )}
+
+
+
+ {/* 关联用户 */}
+
+
+
+
关联用户 ({sg.users?.length || 0})
+ {canManage && (
+
+ )}
+
+ {sg.users && sg.users.length > 0 ? (
+
+ {sg.users.map(u => (
+
+
+
{(u.display_name || u.username).charAt(0)}
+
{u.display_name || u.username}
+
{u.role}
+
+
+ ))}
+
+ ) : (
+ 暂未关联用户
+ )}
+
+
+
+ );
+ })() : (
+
+ )}
+
+
+
+ {/* 创建弹框 */}
+ {showCreateModal && (
+
{ setShowCreateModal(false); resetForm(); }}>
+
e.stopPropagation()}>
+
新建权限组
+ {renderGroupForm(handleCreate, '创建')}
+
+
+ )}
+
+ {/* 编辑弹框 */}
+ {showEditModal && (
+
{ setShowEditModal(false); resetForm(); }}>
+
e.stopPropagation()}>
+
编辑权限组
+ {renderGroupForm(handleEdit, '保存')}
+
+
+ )}
+
+ {/* 关联实例弹框 */}
+ {showInstanceModal && (
+
setShowInstanceModal(false)}>
+
e.stopPropagation()}>
+
关联实例
+
+ {allInstances.length === 0 &&
暂无可选实例
}
+ {allInstances.map(inst => (
+
+ ))}
+
+
+
+
+
+
+
+ )}
+
+ {/* 关联用户弹框 */}
+ {showUserModal && (
+
setShowUserModal(false)}>
+
e.stopPropagation()}>
+
关联用户
+
+ {allUsers.length === 0 &&
暂无可选用户
}
+ {allUsers.map(u => (
+
+ ))}
+
+
+
+
+
+
+
+ )}
+
+ );
+}