refactor: 权限组简化为2组(readonly/write) + Transfer穿梭框选择数据库
- access_type 从3值(readonly/datachange/ddl)简化为2值(readonly/write) - readonly=只读查看(关联只读/从库用于查询) write=写入变更(关联主库用于工单) - 前端InstanceGroupPage重写: 2权限类型卡片+自定义Transfer穿梭框组件 - Transfer组件: 左侧可选数据库→右侧已授权数据库, 搜索/勾选/箭头移动 - role_permissions.py更新: 2值权限映射, get_accessible_instances按access_type过滤 - 后端schema/模型校验更新为readonly|write正则 - 15个测试全部通过
This commit is contained in:
logan committed
1 parent
8161bcf5b5
commit
4111e1eee8
6 files changed
+352
-316
No files matched your search
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Plus, Search, Edit2, Trash2, Server, Users, ChevronRight, X,
|
||||
Shield, Eye, PenLine, Hammer, Database,
|
||||
Eye, PenLine, ChevronLeft, ChevronRight as ChevRight,
|
||||
Database, UserPlus, XCircle,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { instanceGroupApi, type InstanceGroup } from '@/api/instanceGroup';
|
||||
@@ -14,43 +15,139 @@ import { useActionPermission } from '@/hooks/useAuth';
|
||||
const ACCESS_TYPES = [
|
||||
{
|
||||
value: 'readonly',
|
||||
label: '只读查询',
|
||||
desc: 'SELECT',
|
||||
color: 'bg-emerald-500/15 text-emerald-400',
|
||||
label: '只读查看',
|
||||
desc: '关联只读/从库 → 用于查询数据',
|
||||
color: 'text-emerald-400',
|
||||
bg: 'bg-emerald-500/15',
|
||||
icon: Eye,
|
||||
},
|
||||
{
|
||||
value: 'datachange',
|
||||
label: '数据变更',
|
||||
desc: 'INSERT / UPDATE / DELETE',
|
||||
color: 'bg-amber-500/15 text-amber-400',
|
||||
value: 'write',
|
||||
label: '写入变更',
|
||||
desc: '关联读写/主库 → 用于数据变更工单',
|
||||
color: 'text-amber-400',
|
||||
bg: 'bg-amber-500/15',
|
||||
icon: PenLine,
|
||||
},
|
||||
{
|
||||
value: 'ddl',
|
||||
label: 'DDL 变更',
|
||||
desc: 'CREATE / ALTER / DROP / INDEX',
|
||||
color: 'bg-red-500/15 text-red-400',
|
||||
icon: Hammer,
|
||||
},
|
||||
] as const;
|
||||
|
||||
const DB_TYPE_OPTIONS = [
|
||||
{ value: 'all', label: '全部类型' },
|
||||
{ value: 'mysql', label: 'MySQL' },
|
||||
{ value: 'pg', label: 'PostgreSQL' },
|
||||
{ value: 'redis', label: 'Redis' },
|
||||
{ value: 'mongo', label: 'MongoDB' },
|
||||
];
|
||||
|
||||
const DB_TYPE_COLORS: Record<string, string> = {
|
||||
mysql: 'bg-[rgba(0,117,143,0.15)] text-[#26a69a]',
|
||||
pg: 'bg-[rgba(51,103,145,0.15)] text-[#42a5f5]',
|
||||
redis: 'bg-[rgba(220,50,32,0.15)] text-[#ef5350]',
|
||||
mongo: 'bg-[rgba(71,162,72,0.15)] text-[#66bb6a]',
|
||||
all: 'bg-[rgba(148,163,184,0.15)] text-[var(--dg-text-secondary)]',
|
||||
};
|
||||
|
||||
/* ───────── Transfer Component ───────── */
|
||||
|
||||
interface TransferProps {
|
||||
title: string;
|
||||
items: { label: string; value: string; extra?: string }[];
|
||||
selected: string[];
|
||||
onChange: (selected: string[]) => void;
|
||||
}
|
||||
|
||||
function Transfer({ title, items, selected, onChange }: TransferProps) {
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const unselected = 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.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
const [pendingAdd, setPendingAdd] = useState<Set<string>>(new Set());
|
||||
const [pendingRemove, setPendingRemove] = useState<Set<string>>(new Set());
|
||||
|
||||
const addSelected = () => {
|
||||
const newSelected = [...selected, ...pendingAdd];
|
||||
onChange(newSelected);
|
||||
setPendingAdd(new Set());
|
||||
};
|
||||
|
||||
const removeSelected = () => {
|
||||
const newSelected = selected.filter(v => !pendingRemove.has(v));
|
||||
onChange(newSelected);
|
||||
setPendingRemove(new Set());
|
||||
};
|
||||
|
||||
const togglePendingAdd = (v: string) => {
|
||||
setPendingAdd(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(v)) next.delete(v); else next.add(v);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const togglePendingRemove = (v: string) => {
|
||||
setPendingRemove(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(v)) next.delete(v); else next.add(v);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
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">
|
||||
<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"
|
||||
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>}
|
||||
{unselected.map(item => (
|
||||
<label key={item.value} className={`flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-xs transition-colors ${pendingAdd.has(item.value) ? 'bg-blue-500/10 text-blue-400' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
|
||||
<input type="checkbox" checked={pendingAdd.has(item.value)} onChange={() => togglePendingAdd(item.value)} className="rounded" />
|
||||
<Database className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
<span>{item.label}</span>
|
||||
{item.extra && <span className="text-[var(--dg-text-muted)] ml-auto">{item.extra}</span>}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle: 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>
|
||||
|
||||
{/* 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">
|
||||
<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>}
|
||||
{selectedFiltered.map(item => (
|
||||
<label key={item.value} className={`flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-xs transition-colors ${pendingRemove.has(item.value) ? 'bg-red-500/10 text-red-400' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
|
||||
<input type="checkbox" checked={pendingRemove.has(item.value)} onChange={() => togglePendingRemove(item.value)} className="rounded" />
|
||||
<Database className="w-3 h-3 text-emerald-400 flex-shrink-0" />
|
||||
<span>{item.label}</span>
|
||||
{item.extra && <span className="text-[var(--dg-text-muted)] ml-auto">{item.extra}</span>}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ───────── Main Component ───────── */
|
||||
|
||||
export default function InstanceGroupPage() {
|
||||
@@ -60,102 +157,98 @@ export default function InstanceGroupPage() {
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showInstanceModal, setShowInstanceModal] = useState(false);
|
||||
const [showUserModal, setShowUserModal] = useState(false);
|
||||
const canManage = useActionPermission('instance-group.manage');
|
||||
|
||||
// Form state
|
||||
const [formName, setFormName] = useState('');
|
||||
const [formDesc, setFormDesc] = useState('');
|
||||
const [formDbType, setFormDbType] = useState('all');
|
||||
const [formAccessType, setFormAccessType] = useState('readonly');
|
||||
const [formAllowedDbs, setFormAllowedDbs] = useState('');
|
||||
const [formAccessType, setFormAccessType] = useState<'readonly' | 'write'>('readonly');
|
||||
const [formAllowedDbs, setFormAllowedDbs] = useState<string[]>([]);
|
||||
const [formIsActive, setFormIsActive] = useState(true);
|
||||
const [formInstanceIds, setFormInstanceIds] = useState<number[]>([]);
|
||||
|
||||
// Related data
|
||||
const [allInstances, setAllInstances] = useState<any[]>([]);
|
||||
// DB list for transfer
|
||||
const [allDatabases, setAllDatabases] = useState<{ label: string; value: string; extra?: string }[]>([]);
|
||||
const [loadingDbs, setLoadingDbs] = useState(false);
|
||||
|
||||
// User assignment
|
||||
const [allUsers, setAllUsers] = useState<any[]>([]);
|
||||
const [selectedInstanceIds, setSelectedInstanceIds] = useState<number[]>([]);
|
||||
const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
|
||||
const [instanceSearch, setInstanceSearch] = useState('');
|
||||
const [userSearch, setUserSearch] = useState('');
|
||||
|
||||
// Instance list for form
|
||||
const [allInstances, setAllInstances] = useState<any[]>([]);
|
||||
|
||||
const selectedGroup = groups.find(g => g.id === selectedId);
|
||||
|
||||
const fetchGroups = useCallback(async () => {
|
||||
try {
|
||||
const data = await instanceGroupApi.list();
|
||||
setGroups(data);
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} catch { /* */ } finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { fetchGroups(); }, [fetchGroups]);
|
||||
|
||||
// Load instances when modal opens
|
||||
useEffect(() => {
|
||||
if (showInstanceModal) {
|
||||
if (showCreateModal || showEditModal) {
|
||||
instanceApi.list().then(setAllInstances).catch(() => {});
|
||||
}
|
||||
}, [showCreateModal, showEditModal]);
|
||||
|
||||
// Load users when user modal opens
|
||||
useEffect(() => {
|
||||
if (showUserModal) {
|
||||
userApi.list().then((data: any) => {
|
||||
const items = (data as any)?.items || data;
|
||||
setAllUsers(Array.isArray(items) ? items : []);
|
||||
}).catch(() => {});
|
||||
}
|
||||
}, [showInstanceModal, showUserModal]);
|
||||
}, [showUserModal]);
|
||||
|
||||
const filteredGroups = useMemo(() => {
|
||||
return groups.filter(g => !search || g.name.includes(search) || (g.description || '').includes(search));
|
||||
}, [groups, search]);
|
||||
// Load databases for selected instances in form
|
||||
const loadDatabasesForInstances = useCallback(async (instanceIds: number[]) => {
|
||||
if (instanceIds.length === 0) { setAllDatabases([]); return; }
|
||||
setLoadingDbs(true);
|
||||
try {
|
||||
const inst = allInstances.find((i: any) => i.id === instanceIds[0]);
|
||||
if (!inst) { setAllDatabases([]); return; }
|
||||
const res = await instanceApi.listDatabases(inst.id);
|
||||
const dbs = (res as any)?.databases || res || [];
|
||||
setAllDatabases(dbs.map((d: string) => ({ label: d, value: d })));
|
||||
} catch { setAllDatabases([]); } finally { setLoadingDbs(false); }
|
||||
}, [allInstances]);
|
||||
|
||||
const filteredInstances = useMemo(() => {
|
||||
return allInstances.filter(inst => !instanceSearch || inst.name.toLowerCase().includes(instanceSearch.toLowerCase()) || inst.host.includes(instanceSearch));
|
||||
}, [allInstances, instanceSearch]);
|
||||
|
||||
const filteredUsers = useMemo(() => {
|
||||
return allUsers.filter(u => !userSearch || (u.display_name || u.username).toLowerCase().includes(userSearch.toLowerCase()));
|
||||
}, [allUsers, userSearch]);
|
||||
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('');
|
||||
setFormDbType('all');
|
||||
setFormAccessType('readonly');
|
||||
setFormAllowedDbs('');
|
||||
setFormIsActive(true);
|
||||
setFormName(''); setFormDesc(''); setFormAccessType('readonly');
|
||||
setFormAllowedDbs([]); setFormIsActive(true); setFormInstanceIds([]); setAllDatabases([]);
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!formName.trim()) return;
|
||||
await instanceGroupApi.create({
|
||||
name: formName,
|
||||
description: formDesc || undefined,
|
||||
db_type: formDbType,
|
||||
name: formName, description: formDesc || undefined,
|
||||
access_type: formAccessType,
|
||||
allowed_databases: formAllowedDbs ? formAllowedDbs.split(',').map(s => s.trim()).filter(Boolean) : [],
|
||||
is_active: formIsActive,
|
||||
allowed_databases: formAllowedDbs.length > 0 ? formAllowedDbs : undefined,
|
||||
is_active: formIsActive, db_type: 'all',
|
||||
} as any);
|
||||
setShowCreateModal(false);
|
||||
resetForm();
|
||||
fetchGroups();
|
||||
setShowCreateModal(false); resetForm(); fetchGroups();
|
||||
};
|
||||
|
||||
const handleEdit = async () => {
|
||||
if (!selectedId || !formName.trim()) return;
|
||||
await instanceGroupApi.update(selectedId, {
|
||||
name: formName,
|
||||
description: formDesc || undefined,
|
||||
db_type: formDbType,
|
||||
name: formName, description: formDesc || undefined,
|
||||
access_type: formAccessType,
|
||||
allowed_databases: formAllowedDbs ? formAllowedDbs.split(',').map(s => s.trim()).filter(Boolean) : [],
|
||||
is_active: formIsActive,
|
||||
allowed_databases: formAllowedDbs.length > 0 ? formAllowedDbs : undefined,
|
||||
is_active: formIsActive, db_type: 'all',
|
||||
} as any);
|
||||
setShowEditModal(false);
|
||||
resetForm();
|
||||
fetchGroups();
|
||||
setShowEditModal(false); resetForm(); fetchGroups();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
@@ -168,30 +261,23 @@ export default function InstanceGroupPage() {
|
||||
const openEditModal = (group: InstanceGroup) => {
|
||||
setFormName(group.name);
|
||||
setFormDesc(group.description || '');
|
||||
setFormDbType(group.db_type);
|
||||
setFormAccessType((group as any).access_type || 'readonly');
|
||||
setFormAllowedDbs(((group as any).allowed_databases || []).join(', '));
|
||||
setFormAccessType(((group as any).access_type === 'write' ? 'write' : 'readonly'));
|
||||
setFormAllowedDbs((group as any).allowed_databases || []);
|
||||
setFormIsActive(group.is_active);
|
||||
// Load instance IDs
|
||||
const instIds = (group.instances || []).map(i => i.id);
|
||||
setFormInstanceIds(instIds);
|
||||
if (instIds.length > 0) loadDatabasesForInstances(instIds);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const handleAssignInstances = async () => {
|
||||
if (!selectedId || selectedInstanceIds.length === 0) return;
|
||||
await instanceGroupApi.assignInstances(selectedId, selectedInstanceIds);
|
||||
setShowInstanceModal(false);
|
||||
setSelectedInstanceIds([]);
|
||||
fetchGroups();
|
||||
};
|
||||
|
||||
const handleAssignUsers = async () => {
|
||||
if (!selectedId || selectedUserIds.length === 0) return;
|
||||
await instanceGroupApi.assignUsers(selectedId, selectedUserIds);
|
||||
setShowUserModal(false);
|
||||
setSelectedUserIds([]);
|
||||
fetchGroups();
|
||||
setShowUserModal(false); setSelectedUserIds([]); fetchGroups();
|
||||
};
|
||||
|
||||
const getAccessTypeConfig = (type: string) => ACCESS_TYPES.find(t => t.value === type) || ACCESS_TYPES[0];
|
||||
const getAtConfig = (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>;
|
||||
|
||||
@@ -201,7 +287,7 @@ export default function InstanceGroupPage() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">数据库权限组</h1>
|
||||
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">按访问类型分组，关联数据源和用户</p>
|
||||
<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">
|
||||
@@ -210,21 +296,22 @@ export default function InstanceGroupPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* 2 permission type 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;
|
||||
const Icon = at.icon;
|
||||
return (
|
||||
<Card key={at.value} className="dg-card">
|
||||
<CardContent className="p-4 flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg ${at.color} flex items-center justify-center`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
<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>
|
||||
<div className="text-2xl font-bold">{count}</div>
|
||||
<div className="text-xs text-[var(--dg-text-muted)]">{at.label}权限组</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>
|
||||
);
|
||||
@@ -233,31 +320,26 @@ export default function InstanceGroupPage() {
|
||||
|
||||
<div className="flex gap-5">
|
||||
{/* Left list */}
|
||||
<div className="w-80 flex-shrink-0 space-y-3">
|
||||
<div className="w-72 flex-shrink-0 space-y-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
|
||||
<input className="w-full pl-10 pr-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none" placeholder="搜索权限组" value={search} onChange={e => setSearch(e.target.value)} />
|
||||
<input className="w-full pl-10 pr-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none" placeholder="搜索" value={search} onChange={e => setSearch(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2 max-h-[calc(100vh-380px)] overflow-y-auto">
|
||||
{filteredGroups.length === 0 && (
|
||||
<div className="text-center py-10 text-[var(--dg-text-muted)] text-sm">暂无权限组</div>
|
||||
)}
|
||||
<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 atConfig = getAccessTypeConfig((group as any).access_type || 'readonly');
|
||||
const ATIcon = atConfig.icon;
|
||||
const at = getAtConfig((group as any).access_type || 'readonly');
|
||||
const Icon = at.icon;
|
||||
return (
|
||||
<div key={group.id} onClick={() => 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)]'}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<ATIcon className={`w-4 h-4 ${atConfig.color.includes('emerald') ? 'text-emerald-400' : atConfig.color.includes('amber') ? 'text-amber-400' : 'text-red-400'}`} />
|
||||
<span className="font-medium text-sm">{group.name}</span>
|
||||
</div>
|
||||
{!group.is_active && <span className="text-[10px] px-1.5 py-0.5 rounded bg-red-500/15 text-red-400">禁用</span>}
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-2 text-xs text-[var(--dg-text-muted)]">
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] ${atConfig.color}`}>{atConfig.label}</span>
|
||||
<span className="flex items-center gap-1"><Server className="w-3 h-3" />{group.instance_count || 0}</span>
|
||||
<span className="flex items-center gap-1"><Users className="w-3 h-3" />{group.user_count || 0}</span>
|
||||
<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>
|
||||
<span><Database className="w-3 h-3 inline mr-0.5" />{((group as any).allowed_databases || []).length || '全部'}库</span>
|
||||
<span><Users className="w-3 h-3 inline mr-0.5" />{group.user_count || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -269,32 +351,22 @@ export default function InstanceGroupPage() {
|
||||
<div className="flex-1 min-w-0">
|
||||
{selectedGroup ? (() => {
|
||||
const sg = selectedGroup;
|
||||
const atConfig = getAccessTypeConfig((sg as any).access_type || 'readonly');
|
||||
const ATIcon = atConfig.icon;
|
||||
const at = getAtConfig((sg as any).access_type || 'readonly');
|
||||
const Icon = at.icon;
|
||||
const allowedDbs: string[] = (sg as any).allowed_databases || [];
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Info Card */}
|
||||
<Card className="dg-card">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<ATIcon className={`w-5 h-5 ${atConfig.color.includes('emerald') ? 'text-emerald-400' : atConfig.color.includes('amber') ? 'text-amber-400' : 'text-red-400'}`} />
|
||||
<Icon className={`w-5 h-5 ${at.color}`} />
|
||||
<h2 className="text-lg font-semibold">{sg.name}</h2>
|
||||
<span className={`px-2 py-0.5 text-xs rounded ${atConfig.color}`}>{atConfig.label}</span>
|
||||
<span className={`px-2 py-0.5 text-xs rounded ${DB_TYPE_COLORS[sg.db_type] || DB_TYPE_COLORS.all}`}>{DB_TYPE_OPTIONS.find(o => o.value === sg.db_type)?.label}</span>
|
||||
<span className={`px-2 py-0.5 text-xs rounded ${at.bg} ${at.color}`}>{at.label}</span>
|
||||
{!sg.is_active && <span className="px-2 py-0.5 text-xs rounded bg-red-500/15 text-red-400">禁用</span>}
|
||||
</div>
|
||||
{sg.description && <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{sg.description}</p>}
|
||||
<div className="text-xs text-[var(--dg-text-muted)] mt-2">
|
||||
允许操作: <code className="px-1.5 py-0.5 bg-[var(--dg-bg-tertiary)] rounded text-[var(--dg-text-primary)]">{atConfig.desc}</code>
|
||||
</div>
|
||||
{allowedDbs.length > 0 && (
|
||||
<div className="text-xs text-[var(--dg-text-muted)] mt-1.5">
|
||||
限定数据库: {allowedDbs.map(d => <span key={d} className="inline-block px-1.5 py-0.5 bg-[var(--dg-bg-tertiary)] rounded mr-1">{d}</span>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{canManage && (
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -306,33 +378,40 @@ export default function InstanceGroupPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Authorized databases */}
|
||||
<Card className="dg-card">
|
||||
<CardContent className="p-5">
|
||||
<h3 className="text-sm font-semibold flex items-center gap-2 mb-3"><Database className="w-4 h-4 text-[var(--dg-text-muted)]" />授权数据库 {allowedDbs.length > 0 ? `(${allowedDbs.length})` : '(全部)'}</h3>
|
||||
{allowedDbs.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{allowedDbs.map(db => <span key={db} className="px-2.5 py-1 text-xs bg-[var(--dg-bg-tertiary)] rounded-md">{db}</span>)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-[var(--dg-text-muted)]">已授权该数据源下所有数据库</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Related Instances */}
|
||||
<Card className="dg-card">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold flex items-center gap-2"><Server className="w-4 h-4 text-[var(--dg-text-muted)]" />关联数据源 ({sg.instances?.length || 0})</h3>
|
||||
{canManage && (
|
||||
<button onClick={() => { setSelectedInstanceIds([]); setShowInstanceModal(true); }} className="text-xs text-blue-400 hover:text-blue-300 transition-colors">添加</button>
|
||||
)}
|
||||
</div>
|
||||
{sg.instances && sg.instances.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<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 min-w-0">
|
||||
<span className={`w-2 h-2 rounded-full flex-shrink-0 ${inst.status === 'connected' ? 'bg-green-400' : 'bg-[var(--dg-text-muted)]'}`} />
|
||||
<span className="text-sm truncate">{inst.name}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] flex-shrink-0">{inst.host}:{inst.port}</span>
|
||||
<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>
|
||||
{canManage && (
|
||||
<button onClick={async () => { await instanceGroupApi.removeInstance(sg.id, inst.id); fetchGroups(); }} className="text-[var(--dg-text-muted)] hover:text-red-400 transition-colors flex-shrink-0"><X className="w-3.5 h-3.5" /></button>
|
||||
)}
|
||||
<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-center py-6 text-sm text-[var(--dg-text-muted)]">暂未关联数据源</div>
|
||||
)}
|
||||
) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联数据源</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -341,25 +420,19 @@ export default function InstanceGroupPage() {
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold flex items-center gap-2"><Users className="w-4 h-4 text-[var(--dg-text-muted)]" />关联用户 ({sg.users?.length || 0})</h3>
|
||||
{canManage && (
|
||||
<button onClick={() => { setSelectedUserIds([]); setShowUserModal(true); }} className="text-xs text-blue-400 hover:text-blue-300 transition-colors">添加</button>
|
||||
)}
|
||||
{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 justify-between px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<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 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-center py-6 text-sm text-[var(--dg-text-muted)]">暂未关联用户</div>
|
||||
)}
|
||||
) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联用户</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -376,23 +449,18 @@ export default function InstanceGroupPage() {
|
||||
{/* Create/Edit Modal */}
|
||||
{(showCreateModal || showEditModal) && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="w-full max-w-lg bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-semibold mb-4">{showCreateModal ? '新建权限组' : '编辑权限组'}</h3>
|
||||
<div className="space-y-4">
|
||||
<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="space-y-5">
|
||||
{/* Name */}
|
||||
<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>
|
||||
<label className="block text-sm font-medium mb-1.5">描述</label>
|
||||
<textarea 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 resize-none" rows={2} value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选描述" />
|
||||
<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">数据库类型</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={formDbType} onChange={e => setFormDbType(e.target.value)}>
|
||||
{DB_TYPE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
<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>
|
||||
@@ -402,71 +470,72 @@ export default function InstanceGroupPage() {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* Access Type — 3 cards */}
|
||||
|
||||
{/* Access Type — 2 cards */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">权限类型</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<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)}
|
||||
className={`p-3 rounded-lg text-center transition-colors ${formAccessType === at.value ? at.color + ' ring-1 ring-current' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]'}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 mx-auto mb-1" />
|
||||
<div className="text-xs font-medium">{at.label}</div>
|
||||
<div className="text-[10px] mt-0.5 opacity-70">{at.desc}</div>
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Allowed databases */}
|
||||
|
||||
{/* Select instance first */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1.5">限定数据库 <span className="text-[var(--dg-text-muted)] font-normal">（逗号分隔，留空=全部库）</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={formAllowedDbs} onChange={e => setFormAllowedDbs(e.target.value)} placeholder="shop_db, order_db, user_db" />
|
||||
<label className="block text-sm font-medium mb-2">关联数据源</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allInstances.map(inst => (
|
||||
<button key={inst.id} type="button" onClick={() => {
|
||||
const newIds = formInstanceIds.includes(inst.id)
|
||||
? formInstanceIds.filter(id => id !== inst.id)
|
||||
: [...formInstanceIds, inst.id];
|
||||
setFormInstanceIds(newIds);
|
||||
if (newIds.length > 0) loadDatabasesForInstances(newIds);
|
||||
else { setAllDatabases([]); setFormAllowedDbs([]); }
|
||||
}}
|
||||
className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${formInstanceIds.includes(inst.id) ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]'}`}>
|
||||
{inst.name}
|
||||
</button>
|
||||
))}
|
||||
{allInstances.length === 0 && <span className="text-xs text-[var(--dg-text-muted)]">暂无数据源</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transfer: database selection */}
|
||||
{formInstanceIds.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">授权数据库 <span className="text-[var(--dg-text-muted)] font-normal text-xs">（留空=全部库）</span></label>
|
||||
{loadingDbs ? (
|
||||
<div className="flex items-center justify-center py-8 text-sm text-[var(--dg-text-muted)]"><div className="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mr-2" />加载数据库列表...</div>
|
||||
) : (
|
||||
<Transfer
|
||||
title="已授权数据库"
|
||||
items={allDatabases}
|
||||
selected={formAllowedDbs}
|
||||
onChange={setFormAllowedDbs}
|
||||
/>
|
||||
)}
|
||||
</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 disabled:cursor-not-allowed transition-colors">{showCreateModal ? '创建' : '保存'}</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Instance Modal */}
|
||||
{showInstanceModal && (
|
||||
<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()}>
|
||||
<h3 className="text-lg font-semibold mb-4">关联数据源</h3>
|
||||
<div className="relative mb-3">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
|
||||
<input value={instanceSearch} onChange={e => setInstanceSearch(e.target.value)} placeholder="搜索实例..." className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
|
||||
</div>
|
||||
<div className="space-y-2 max-h-72 overflow-y-auto mb-4">
|
||||
{filteredInstances.length === 0 && <div className="text-center py-6 text-sm text-[var(--dg-text-muted)]">暂无可选实例</div>}
|
||||
{filteredInstances.map(inst => (
|
||||
<label key={inst.id} className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors ${selectedInstanceIds.includes(inst.id) ? 'bg-blue-500/10' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
|
||||
<input type="checkbox" checked={selectedInstanceIds.includes(inst.id)} onChange={e => setSelectedInstanceIds(e.target.checked ? [...selectedInstanceIds, inst.id] : selectedInstanceIds.filter(id => id !== inst.id))} className="rounded" />
|
||||
<div className="flex-1">
|
||||
<span className="text-sm">{inst.name}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] ml-2">{inst.host}:{inst.port}</span>
|
||||
</div>
|
||||
<span className={`px-1.5 py-0.5 text-[10px] rounded ${DB_TYPE_COLORS[inst.db_type] || DB_TYPE_COLORS.all}`}>{inst.db_type}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button onClick={() => setShowInstanceModal(false)} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
|
||||
<button onClick={handleAssignInstances} disabled={selectedInstanceIds.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">确认关联 ({selectedInstanceIds.length})</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User Modal */}
|
||||
{showUserModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
@@ -477,21 +546,18 @@ export default function InstanceGroupPage() {
|
||||
<input value={userSearch} onChange={e => setUserSearch(e.target.value)} placeholder="搜索用户..." className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
|
||||
</div>
|
||||
<div className="space-y-2 max-h-72 overflow-y-auto mb-4">
|
||||
{filteredUsers.length === 0 && <div className="text-center py-6 text-sm text-[var(--dg-text-muted)]">暂无可选用户</div>}
|
||||
{filteredUsers.map(u => (
|
||||
<label key={u.id} className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors ${selectedUserIds.includes(u.id) ? 'bg-blue-500/10' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
|
||||
<input type="checkbox" checked={selectedUserIds.includes(u.id)} onChange={e => setSelectedUserIds(e.target.checked ? [...selectedUserIds, u.id] : selectedUserIds.filter(id => id !== u.id))} className="rounded" />
|
||||
<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>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm">{u.display_name || u.username}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] ml-2">{u.role}</span>
|
||||
</div>
|
||||
<span className="text-sm">{u.display_name || u.username}</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{u.role}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button onClick={() => setShowUserModal(false)} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
|
||||
<button onClick={handleAssignUsers} disabled={selectedUserIds.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">确认关联 ({selectedUserIds.length})</button>
|
||||
<button onClick={() => setShowUserModal(false)} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)]">取消</button>
|
||||
<button onClick={handleAssignUsers} disabled={selectedUserIds.length === 0} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50">确认 ({selectedUserIds.length})</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user