feat: 权限组创建改为双Transfer同时配置只读+写入
- 新建时不再二选一，上下两列Transfer同时配置查询权限和写入权限 - 自动生成「名称-只读」「名称-写入」两个权限组 - 编辑模式保持单组编辑不变 - 按钮显示将创建几个权限组
This commit is contained in:
logan committed
1 parent
128de64592
commit
40868c61bf
1 file changed
+158
-200
@@ -2,7 +2,6 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Plus, Search, Edit2, Trash2, Server, Users, ChevronRight, X,
|
||||
Eye, PenLine, ChevronLeft, ChevronRight as ChevRight,
|
||||
Database, UserPlus,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { instanceGroupApi, type InstanceGroup } from '@/api/instanceGroup';
|
||||
@@ -13,22 +12,8 @@ import { useActionPermission } from '@/hooks/useAuth';
|
||||
/* ───────── Constants ───────── */
|
||||
|
||||
const ACCESS_TYPES = [
|
||||
{
|
||||
value: 'readonly',
|
||||
label: '只读查看',
|
||||
desc: '关联只读/从库，用于查询数据',
|
||||
color: 'text-emerald-400',
|
||||
bg: 'bg-emerald-500/15',
|
||||
icon: Eye,
|
||||
},
|
||||
{
|
||||
value: 'write',
|
||||
label: '写入变更',
|
||||
desc: '关联读写/主库，用于数据变更工单',
|
||||
color: 'text-amber-400',
|
||||
bg: 'bg-amber-500/15',
|
||||
icon: PenLine,
|
||||
},
|
||||
{ value: 'readonly', label: '只读查看', desc: '关联只读/从库，用于查询数据', color: 'text-emerald-400', bg: 'bg-emerald-500/15', icon: Eye },
|
||||
{ value: 'write', label: '写入变更', desc: '关联读写/主库，用于数据变更工单', color: 'text-amber-400', bg: 'bg-amber-500/15', icon: PenLine },
|
||||
] as const;
|
||||
|
||||
const DB_TYPE_COLORS: Record<string, string> = {
|
||||
@@ -41,18 +26,13 @@ const DB_TYPE_COLORS: Record<string, string> = {
|
||||
|
||||
/* ───────── Transfer Component ───────── */
|
||||
|
||||
interface TransferItem {
|
||||
label: string;
|
||||
value: string;
|
||||
tag?: string;
|
||||
tagColor?: string;
|
||||
}
|
||||
interface TransferItem { label: string; value: string; tag?: string; tagColor?: string }
|
||||
|
||||
interface TransferProps {
|
||||
title: string;
|
||||
items: TransferItem[];
|
||||
selected: string[];
|
||||
onChange: (selected: string[]) => void;
|
||||
onChange: (v: string[]) => void;
|
||||
}
|
||||
|
||||
function Transfer({ title, items, selected, onChange }: TransferProps) {
|
||||
@@ -60,45 +40,36 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
|
||||
const [pendingAdd, setPendingAdd] = useState<Set<string>>(new Set());
|
||||
const [pendingRemove, setPendingRemove] = useState<Set<string>>(new Set());
|
||||
|
||||
const unselected = items.filter(
|
||||
i => !selected.includes(i.value) &&
|
||||
(i.label.toLowerCase().includes(search.toLowerCase()) || i.value.toLowerCase().includes(search.toLowerCase()))
|
||||
const unselected = items.filter(i =>
|
||||
!selected.includes(i.value) && (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.includes(search))
|
||||
);
|
||||
const selectedFiltered = items.filter(
|
||||
i => selected.includes(i.value) &&
|
||||
(i.label.toLowerCase().includes(search.toLowerCase()) || i.value.toLowerCase().includes(search.toLowerCase()))
|
||||
const selectedFiltered = items.filter(i =>
|
||||
selected.includes(i.value) && (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.includes(search))
|
||||
);
|
||||
|
||||
const addSelected = () => {
|
||||
onChange([...selected, ...pendingAdd]);
|
||||
setPendingAdd(new Set());
|
||||
};
|
||||
const removeSelected = () => {
|
||||
onChange(selected.filter(v => !pendingRemove.has(v)));
|
||||
setPendingRemove(new Set());
|
||||
};
|
||||
const toggleAdd = (v: string) => setPendingAdd(prev => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
|
||||
const toggleRemove = (v: string) => setPendingRemove(prev => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
|
||||
const addSelected = () => { onChange([...selected, ...pendingAdd]); setPendingAdd(new Set()); };
|
||||
const removeSelected = () => { onChange(selected.filter(v => !pendingRemove.has(v))); setPendingRemove(new Set()); };
|
||||
const toggleAdd = (v: string) => setPendingAdd(p => { const n = new Set(p); n.has(v) ? n.delete(v) : n.add(v); return n; });
|
||||
const toggleRemove = (v: string) => setPendingRemove(p => { const n = new Set(p); n.has(v) ? n.delete(v) : n.add(v); return n; });
|
||||
|
||||
const rowCls = (active: boolean, color: string) =>
|
||||
const row = (active: boolean, color: string) =>
|
||||
`flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-xs transition-colors ${active ? color : 'hover:bg-[var(--dg-bg-hover)]'}`;
|
||||
|
||||
return (
|
||||
<div className="flex gap-3 items-stretch">
|
||||
{/* Left: Available */}
|
||||
<div className="flex-1 border border-[var(--dg-border)] rounded-lg overflow-hidden">
|
||||
<div className="px-3 py-2 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
|
||||
<div className="px-3 py-1.5 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
|
||||
<span className="text-xs font-medium">可选实例</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{unselected.length} 项</span>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<input className="w-full px-2 py-1.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs focus:border-blue-400 focus:outline-none"
|
||||
<input className="w-full px-2 py-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs focus:border-blue-400 focus:outline-none"
|
||||
placeholder="搜索..." value={search} onChange={e => setSearch(e.target.value)} />
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto px-2 pb-2 space-y-0.5">
|
||||
{unselected.length === 0 && <div className="text-center py-4 text-xs text-[var(--dg-text-muted)]">无可用项</div>}
|
||||
<div className="max-h-40 overflow-y-auto px-2 pb-2 space-y-0.5">
|
||||
{unselected.length === 0 && <div className="text-center py-3 text-xs text-[var(--dg-text-muted)]">无可用项</div>}
|
||||
{unselected.map(item => (
|
||||
<label key={item.value} className={rowCls(pendingAdd.has(item.value), 'bg-blue-500/10 text-blue-400')}>
|
||||
<label key={item.value} className={row(pendingAdd.has(item.value), 'bg-blue-500/10 text-blue-400')}>
|
||||
<input type="checkbox" checked={pendingAdd.has(item.value)} onChange={() => toggleAdd(item.value)} className="rounded" />
|
||||
<Server className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
<span className="truncate">{item.label}</span>
|
||||
@@ -107,27 +78,19 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrows */}
|
||||
<div className="flex flex-col justify-center gap-2 py-6">
|
||||
<button onClick={addSelected} disabled={pendingAdd.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all">
|
||||
<ChevRight className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={removeSelected} disabled={pendingRemove.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="flex flex-col justify-center gap-2">
|
||||
<button onClick={addSelected} disabled={pendingAdd.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all"><ChevRight className="w-4 h-4" /></button>
|
||||
<button onClick={removeSelected} disabled={pendingRemove.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all"><ChevronLeft className="w-4 h-4" /></button>
|
||||
</div>
|
||||
|
||||
{/* Right: Selected */}
|
||||
<div className="flex-1 border border-[var(--dg-border)] rounded-lg overflow-hidden">
|
||||
<div className="px-3 py-2 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
|
||||
<div className="px-3 py-1.5 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
|
||||
<span className="text-xs font-medium">{title}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{selectedFiltered.length} 项</span>
|
||||
</div>
|
||||
<div className="max-h-56 overflow-y-auto px-2 py-2 space-y-0.5">
|
||||
{selectedFiltered.length === 0 && <div className="text-center py-8 text-xs text-[var(--dg-text-muted)]">请从左侧选择实例</div>}
|
||||
<div className="max-h-48 overflow-y-auto px-2 py-2 space-y-0.5">
|
||||
{selectedFiltered.length === 0 && <div className="text-center py-6 text-xs text-[var(--dg-text-muted)]">请从左侧选择实例</div>}
|
||||
{selectedFiltered.map(item => (
|
||||
<label key={item.value} className={rowCls(pendingRemove.has(item.value), 'bg-red-500/10 text-red-400')}>
|
||||
<label key={item.value} className={row(pendingRemove.has(item.value), 'bg-red-500/10 text-red-400')}>
|
||||
<input type="checkbox" checked={pendingRemove.has(item.value)} onChange={() => toggleRemove(item.value)} className="rounded" />
|
||||
<Server className="w-3 h-3 text-emerald-400 flex-shrink-0" />
|
||||
<span className="truncate">{item.label}</span>
|
||||
@@ -140,7 +103,7 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
|
||||
);
|
||||
}
|
||||
|
||||
/* ───────── Main Component ───────── */
|
||||
/* ───────── Main ───────── */
|
||||
|
||||
export default function InstanceGroupPage() {
|
||||
const [groups, setGroups] = useState<InstanceGroup[]>([]);
|
||||
@@ -152,18 +115,18 @@ export default function InstanceGroupPage() {
|
||||
const [showUserModal, setShowUserModal] = useState(false);
|
||||
const canManage = useActionPermission('instance-group.manage');
|
||||
|
||||
// Form state
|
||||
// Create form — dual transfer
|
||||
const [formName, setFormName] = useState('');
|
||||
const [formDesc, setFormDesc] = useState('');
|
||||
const [formAccessType, setFormAccessType] = useState<'readonly' | 'write'>('readonly');
|
||||
const [formIsActive, setFormIsActive] = useState(true);
|
||||
// Transfer: instance IDs as strings
|
||||
const [formInstanceIds, setFormInstanceIds] = useState<string[]>([]);
|
||||
const [readonlyInstanceIds, setReadonlyInstanceIds] = useState<string[]>([]);
|
||||
const [writeInstanceIds, setWriteInstanceIds] = useState<string[]>([]);
|
||||
|
||||
// Edit form — single group
|
||||
const [editAccessType, setEditAccessType] = useState<'readonly' | 'write'>('readonly');
|
||||
const [editInstanceIds, setEditInstanceIds] = useState<string[]>([]);
|
||||
|
||||
// All instances for transfer
|
||||
const [allInstances, setAllInstances] = useState<any[]>([]);
|
||||
|
||||
// User assignment
|
||||
const [allUsers, setAllUsers] = useState<any[]>([]);
|
||||
const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
|
||||
const [userSearch, setUserSearch] = useState('');
|
||||
@@ -171,41 +134,34 @@ export default function InstanceGroupPage() {
|
||||
const selectedGroup = groups.find(g => g.id === selectedId);
|
||||
|
||||
const fetchGroups = useCallback(async () => {
|
||||
try {
|
||||
const data = await instanceGroupApi.list();
|
||||
setGroups(data);
|
||||
} catch { /* */ } finally { setLoading(false); }
|
||||
try { setGroups(await instanceGroupApi.list()); } catch {} finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { fetchGroups(); }, [fetchGroups]);
|
||||
|
||||
// Load instances when modal opens
|
||||
useEffect(() => {
|
||||
if (showCreateModal || showEditModal) {
|
||||
instanceApi.list().then((res: any) => {
|
||||
const data = Array.isArray(res) ? res : (res?.items || []);
|
||||
setAllInstances(data);
|
||||
setAllInstances(Array.isArray(res) ? res : (res?.items || []));
|
||||
}).catch(() => {});
|
||||
}
|
||||
}, [showCreateModal, showEditModal]);
|
||||
|
||||
// Load users when user modal opens
|
||||
useEffect(() => {
|
||||
if (showUserModal) {
|
||||
userApi.list().then((data: any) => {
|
||||
const items = (data as any)?.items || data;
|
||||
userApi.list().then((d: any) => {
|
||||
const items = d?.items || d;
|
||||
setAllUsers(Array.isArray(items) ? items : []);
|
||||
}).catch(() => {});
|
||||
}
|
||||
}, [showUserModal]);
|
||||
|
||||
// Build transfer items from allInstances
|
||||
const transferItems = useMemo(() =>
|
||||
allInstances.map((inst: any) => ({
|
||||
label: `${inst.name} (${inst.host}:${inst.port})`,
|
||||
value: String(inst.id),
|
||||
tag: inst.db_type,
|
||||
tagColor: DB_TYPE_COLORS[inst.db_type] || '',
|
||||
allInstances.map((i: any) => ({
|
||||
label: `${i.name} (${i.host}:${i.port})`,
|
||||
value: String(i.id),
|
||||
tag: i.db_type,
|
||||
tagColor: DB_TYPE_COLORS[i.db_type] || '',
|
||||
})),
|
||||
[allInstances]
|
||||
);
|
||||
@@ -213,42 +169,48 @@ export default function InstanceGroupPage() {
|
||||
const filteredGroups = useMemo(() => groups.filter(g => !search || g.name.includes(search)), [groups, search]);
|
||||
const filteredUsers = useMemo(() => allUsers.filter(u => !userSearch || (u.display_name || u.username).toLowerCase().includes(userSearch.toLowerCase())), [allUsers, userSearch]);
|
||||
|
||||
const resetForm = () => {
|
||||
setFormName(''); setFormDesc(''); setFormAccessType('readonly');
|
||||
setFormIsActive(true); setFormInstanceIds([]);
|
||||
const resetCreateForm = () => {
|
||||
setFormName(''); setFormDesc(''); setFormIsActive(true);
|
||||
setReadonlyInstanceIds([]); setWriteInstanceIds([]);
|
||||
};
|
||||
|
||||
// Convert instance id strings to actual group assignment
|
||||
/* ── Create: one shot, two groups ── */
|
||||
const handleCreate = async () => {
|
||||
if (!formName.trim()) return;
|
||||
const group = await instanceGroupApi.create({
|
||||
name: formName,
|
||||
description: formDesc || undefined,
|
||||
access_type: formAccessType,
|
||||
is_active: formIsActive,
|
||||
db_type: 'all',
|
||||
} as any);
|
||||
// Assign instances to this group
|
||||
const ids = formInstanceIds.map(Number);
|
||||
if (ids.length > 0 && group.id) {
|
||||
await instanceGroupApi.assignInstances(group.id, ids);
|
||||
const base = formName.trim();
|
||||
const desc = formDesc.trim() || undefined;
|
||||
|
||||
// Create readonly group
|
||||
if (readonlyInstanceIds.length > 0) {
|
||||
const g = await instanceGroupApi.create({ name: `${base}-只读`, description: desc, access_type: 'readonly', is_active: formIsActive, db_type: 'all' } as any);
|
||||
await instanceGroupApi.assignInstances(g.id, readonlyInstanceIds.map(Number));
|
||||
}
|
||||
setShowCreateModal(false); resetForm(); fetchGroups();
|
||||
// Create write group
|
||||
if (writeInstanceIds.length > 0) {
|
||||
const g = await instanceGroupApi.create({ name: `${base}-写入`, description: desc, access_type: 'write', is_active: formIsActive, db_type: 'all' } as any);
|
||||
await instanceGroupApi.assignInstances(g.id, writeInstanceIds.map(Number));
|
||||
}
|
||||
setShowCreateModal(false); resetCreateForm(); fetchGroups();
|
||||
};
|
||||
|
||||
/* ── Edit: single group ── */
|
||||
const openEditModal = (group: InstanceGroup) => {
|
||||
setFormName(group.name.replace(/-只读$/, '').replace(/-写入$/, ''));
|
||||
setFormDesc(group.description || '');
|
||||
setFormIsActive(group.is_active);
|
||||
setEditAccessType((group as any).access_type === 'write' ? 'write' : 'readonly');
|
||||
setEditInstanceIds((group.instances || []).map((i: any) => String(i.id)));
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const handleEdit = async () => {
|
||||
if (!selectedId || !formName.trim()) return;
|
||||
await instanceGroupApi.update(selectedId, {
|
||||
name: formName,
|
||||
description: formDesc || undefined,
|
||||
access_type: formAccessType,
|
||||
is_active: formIsActive,
|
||||
db_type: 'all',
|
||||
name: formName, description: formDesc || undefined,
|
||||
access_type: editAccessType, is_active: formIsActive, db_type: 'all',
|
||||
} as any);
|
||||
// Reassign instances
|
||||
const ids = formInstanceIds.map(Number);
|
||||
await instanceGroupApi.assignInstances(selectedId, ids);
|
||||
setShowEditModal(false); resetForm(); fetchGroups();
|
||||
await instanceGroupApi.assignInstances(selectedId, editInstanceIds.map(Number));
|
||||
setShowEditModal(false); fetchGroups();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
@@ -258,22 +220,13 @@ export default function InstanceGroupPage() {
|
||||
fetchGroups();
|
||||
};
|
||||
|
||||
const openEditModal = (group: InstanceGroup) => {
|
||||
setFormName(group.name);
|
||||
setFormDesc(group.description || '');
|
||||
setFormAccessType(((group as any).access_type === 'write' ? 'write' : 'readonly'));
|
||||
setFormIsActive(group.is_active);
|
||||
setFormInstanceIds((group.instances || []).map((i: any) => String(i.id)));
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const handleAssignUsers = async () => {
|
||||
if (!selectedId || selectedUserIds.length === 0) return;
|
||||
await instanceGroupApi.assignUsers(selectedId, selectedUserIds);
|
||||
setShowUserModal(false); setSelectedUserIds([]); fetchGroups();
|
||||
};
|
||||
|
||||
const getAtConfig = (type: string) => ACCESS_TYPES.find(t => t.value === type) || ACCESS_TYPES[0];
|
||||
const getAt = (type: string) => ACCESS_TYPES.find(t => t.value === type) || ACCESS_TYPES[0];
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center h-64 text-[var(--dg-text-muted)]"><div className="w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mr-2" />加载中...</div>;
|
||||
|
||||
@@ -286,13 +239,13 @@ export default function InstanceGroupPage() {
|
||||
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">只读查看 → 查询数据 | 写入变更 → 数据变更工单</p>
|
||||
</div>
|
||||
{canManage && (
|
||||
<button onClick={() => { resetForm(); setShowCreateModal(true); }} className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 rounded-lg text-sm font-medium text-white hover:bg-blue-600 transition-colors">
|
||||
<Plus className="w-4 h-4" /> 新建权限组
|
||||
<button onClick={() => { resetCreateForm(); setShowCreateModal(true); }} className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 rounded-lg text-sm font-medium text-white hover:bg-blue-600 transition-colors">
|
||||
<Plus className="w-4 h-4" /> 新建权限策略
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 2 permission type cards */}
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{ACCESS_TYPES.map(at => {
|
||||
const count = groups.filter(g => (g as any).access_type === at.value).length;
|
||||
@@ -300,13 +253,8 @@ export default function InstanceGroupPage() {
|
||||
return (
|
||||
<Card key={at.value} className="dg-card">
|
||||
<CardContent className="p-4 flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl ${at.bg} flex items-center justify-center`}>
|
||||
<Icon className={`w-6 h-6 ${at.color}`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-lg font-bold">{at.label}</div>
|
||||
<div className="text-xs text-[var(--dg-text-muted)]">{at.desc}</div>
|
||||
</div>
|
||||
<div className={`w-12 h-12 rounded-xl ${at.bg} flex items-center justify-center`}><Icon className={`w-6 h-6 ${at.color}`} /></div>
|
||||
<div className="flex-1"><div className="text-lg font-bold">{at.label}</div><div className="text-xs text-[var(--dg-text-muted)]">{at.desc}</div></div>
|
||||
<div className="text-3xl font-bold text-[var(--dg-text-muted)]">{count}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -324,13 +272,13 @@ export default function InstanceGroupPage() {
|
||||
<div className="space-y-2 max-h-[calc(100vh-420px)] overflow-y-auto">
|
||||
{filteredGroups.length === 0 && <div className="text-center py-10 text-[var(--dg-text-muted)] text-sm">暂无权限组</div>}
|
||||
{filteredGroups.map(group => {
|
||||
const at = getAtConfig((group as any).access_type || 'readonly');
|
||||
const at = getAt((group as any).access_type || 'readonly');
|
||||
const Icon = at.icon;
|
||||
return (
|
||||
<div key={group.id} onClick={() => setSelectedId(group.id)} className={`p-3 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)]'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={`w-4 h-4 ${at.color}`} />
|
||||
<span className="font-medium text-sm">{group.name}</span>
|
||||
<span className="font-medium text-sm truncate">{group.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1.5 text-xs text-[var(--dg-text-muted)]">
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] ${at.bg} ${at.color}`}>{at.label}</span>
|
||||
@@ -347,7 +295,7 @@ export default function InstanceGroupPage() {
|
||||
<div className="flex-1 min-w-0">
|
||||
{selectedGroup ? (() => {
|
||||
const sg = selectedGroup;
|
||||
const at = getAtConfig((sg as any).access_type || 'readonly');
|
||||
const at = getAt((sg as any).access_type || 'readonly');
|
||||
const Icon = at.icon;
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -372,29 +320,23 @@ export default function InstanceGroupPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Related Instances */}
|
||||
<Card className="dg-card">
|
||||
<CardContent className="p-5">
|
||||
<h3 className="text-sm font-semibold flex items-center gap-2 mb-3"><Server className="w-4 h-4 text-[var(--dg-text-muted)]" />关联实例 ({sg.instances?.length || 0})</h3>
|
||||
{sg.instances && sg.instances.length > 0 ? (
|
||||
<div className="space-y-1.5">
|
||||
{sg.instances.map(inst => (
|
||||
<div key={inst.id} className="flex items-center justify-between px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${inst.status === 'connected' ? 'bg-green-400' : 'bg-[var(--dg-text-muted)]'}`} />
|
||||
<span className="text-sm">{inst.name}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{inst.host}:{inst.port}</span>
|
||||
</div>
|
||||
<span className={`px-1.5 py-0.5 text-[10px] rounded ${DB_TYPE_COLORS[inst.db_type] || ''}`}>{inst.db_type}</span>
|
||||
<div className="space-y-1.5">{sg.instances.map(inst => (
|
||||
<div key={inst.id} className="flex items-center justify-between px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${inst.status === 'connected' ? 'bg-green-400' : 'bg-[var(--dg-text-muted)]'}`} />
|
||||
<span className="text-sm">{inst.name}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{inst.host}:{inst.port}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className={`px-1.5 py-0.5 text-[10px] rounded ${DB_TYPE_COLORS[inst.db_type] || ''}`}>{inst.db_type}</span>
|
||||
</div>
|
||||
))}</div>
|
||||
) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联实例</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Related Users */}
|
||||
<Card className="dg-card">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
@@ -402,15 +344,13 @@ export default function InstanceGroupPage() {
|
||||
{canManage && <button onClick={() => { setSelectedUserIds([]); setShowUserModal(true); }} className="text-xs text-blue-400 hover:text-blue-300">添加用户</button>}
|
||||
</div>
|
||||
{sg.users && sg.users.length > 0 ? (
|
||||
<div className="space-y-1.5">
|
||||
{sg.users.map(u => (
|
||||
<div key={u.id} className="flex items-center gap-2.5 px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
|
||||
<div className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-400 flex items-center justify-center text-xs font-medium">{(u.display_name || u.username).charAt(0)}</div>
|
||||
<span className="text-sm">{u.display_name || u.username}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{u.role}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1.5">{sg.users.map(u => (
|
||||
<div key={u.id} className="flex items-center gap-2.5 px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
|
||||
<div className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-400 flex items-center justify-center text-xs font-medium">{(u.display_name || u.username).charAt(0)}</div>
|
||||
<span className="text-sm">{u.display_name || u.username}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{u.role}</span>
|
||||
</div>
|
||||
))}</div>
|
||||
) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联用户</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -425,69 +365,87 @@ export default function InstanceGroupPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
{(showCreateModal || showEditModal) && (
|
||||
{/* ═══════ Create Modal: dual transfer ═══════ */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="w-full max-w-2xl bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-semibold mb-5">{showCreateModal ? '新建权限组' : '编辑权限组'}</h3>
|
||||
<div className="w-full max-w-3xl bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-semibold mb-5">新建权限策略</h3>
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">名称 <span className="text-red-400">*</span></label>
|
||||
<input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formName} onChange={e => setFormName(e.target.value)} placeholder="如：生产只读、开发写入" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">策略名称 <span className="text-red-400">*</span></label>
|
||||
<input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formName} onChange={e => setFormName(e.target.value)} placeholder="如：生产环境、开发环境" />
|
||||
<p className="text-xs text-[var(--dg-text-muted)] mt-1">自动生成「名称-只读」和「名称-写入」两个权限组</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">描述</label>
|
||||
<input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">状态</label>
|
||||
<select className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formIsActive ? 'true' : 'false'} onChange={e => setFormIsActive(e.target.value === 'true')}>
|
||||
<option value="true">启用</option>
|
||||
<option value="false">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Access Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">权限类型</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{ACCESS_TYPES.map(at => {
|
||||
const Icon = at.icon;
|
||||
return (
|
||||
<button key={at.value} type="button" onClick={() => setFormAccessType(at.value as 'readonly' | 'write')}
|
||||
className={`p-4 rounded-lg text-left transition-all ${formAccessType === at.value ? at.bg + ' ring-1 ring-current ' + at.color : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]'}`}>
|
||||
<Icon className="w-5 h-5 mb-2" />
|
||||
<div className="text-sm font-medium">{at.label}</div>
|
||||
<div className="text-[11px] mt-1 opacity-70">{at.desc}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{/* Row 1: Readonly */}
|
||||
<div className={`rounded-xl p-4 border ${ACCESS_TYPES[0].bg} border-current ${ACCESS_TYPES[0].color.replace('text-', 'border-')}`}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Eye className="w-5 h-5" />
|
||||
<span className="font-medium">只读查看</span>
|
||||
<span className="text-xs opacity-70">— 查询数据的实例</span>
|
||||
</div>
|
||||
<Transfer title="只读实例" items={transferItems} selected={readonlyInstanceIds} onChange={setReadonlyInstanceIds} />
|
||||
</div>
|
||||
|
||||
{/* Transfer: select instances */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">关联实例</label>
|
||||
<Transfer
|
||||
title="已关联实例"
|
||||
items={transferItems}
|
||||
selected={formInstanceIds}
|
||||
onChange={setFormInstanceIds}
|
||||
/>
|
||||
{/* Row 2: Write */}
|
||||
<div className={`rounded-xl p-4 border ${ACCESS_TYPES[1].bg} border-current ${ACCESS_TYPES[1].color.replace('text-', 'border-')}`}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<PenLine className="w-5 h-5" />
|
||||
<span className="font-medium">写入变更</span>
|
||||
<span className="text-xs opacity-70">— 数据变更工单的实例</span>
|
||||
</div>
|
||||
<Transfer title="写入实例" items={transferItems} selected={writeInstanceIds} onChange={setWriteInstanceIds} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button onClick={() => { setShowCreateModal(false); setShowEditModal(false); resetForm(); }} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
|
||||
<button onClick={showCreateModal ? handleCreate : handleEdit} disabled={!formName.trim()} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 transition-colors">{showCreateModal ? '创建' : '保存'}</button>
|
||||
<button onClick={() => { setShowCreateModal(false); resetCreateForm(); }} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
|
||||
<button onClick={handleCreate} disabled={!formName.trim() || (readonlyInstanceIds.length === 0 && writeInstanceIds.length === 0)} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 transition-colors">
|
||||
创建{readonlyInstanceIds.length > 0 && writeInstanceIds.length > 0 ? ' 2 个权限组' : readonlyInstanceIds.length > 0 || writeInstanceIds.length > 0 ? ' 1 个权限组' : ''}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User Modal */}
|
||||
{/* ═══════ Edit Modal: single group ═══════ */}
|
||||
{showEditModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="w-full max-w-2xl bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-semibold mb-5">编辑权限组</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">名称</label>
|
||||
<input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formName} onChange={e => setFormName(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">类型</label>
|
||||
<div className={`px-3 py-2 rounded-lg text-sm ${getAt(editAccessType).bg} ${getAt(editAccessType).color}`}>
|
||||
{getAt(editAccessType).label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">关联实例</label>
|
||||
<Transfer title="已关联实例" items={transferItems} selected={editInstanceIds} onChange={setEditInstanceIds} />
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button onClick={() => setShowEditModal(false)} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
|
||||
<button onClick={handleEdit} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ═══════ User Modal ═══════ */}
|
||||
{showUserModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="w-full max-w-md bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
|
||||
Reference in new issue
Block a user