feat: SchemaSidebar字段/索引tab切换+选库自动展开+singleDb过滤+表单击展开
- SchemaSidebar: 展开表后显示字段/索引两个tab,可切换查看 - 新增 tableIndexes state + IndexInfo import - 选库后自动调用 handleExpandDb 加载表(修复之前无表bug) - singleDb 模式下只显示当前选中库 - 表按钮交互改为: 单击展开/折叠, Alt+点击插入表名 - 菜单重组为工作台/管理/系统三段式 - TicketCreatePage 数据库必选(非Redis不自动选)
This commit is contained in:
1 parent
a95a341370
commit
e81eed288c
4 files changed
+169
-95
No files matched your search
@@ -3,7 +3,7 @@ import {
|
|||||||
ChevronDown, ChevronRight, Database, Table2, Columns3,
|
ChevronDown, ChevronRight, Database, Table2, Columns3,
|
||||||
KeyRound, Search, Loader2, FolderOpen, Server,
|
KeyRound, Search, Loader2, FolderOpen, Server,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { instanceDetailApi, type TableMeta, type ColumnInfo } from '@/api/instanceDetail';
|
import { instanceDetailApi, type TableMeta, type ColumnInfo, type IndexInfo } from '@/api/instanceDetail';
|
||||||
import { redisApi } from '@/api/redis';
|
import { redisApi } from '@/api/redis';
|
||||||
|
|
||||||
/* ------------------------------------------------------------------ */
|
/* ------------------------------------------------------------------ */
|
||||||
@@ -15,6 +15,9 @@ interface Props {
|
|||||||
database: string;
|
database: string;
|
||||||
dbType: string;
|
dbType: string;
|
||||||
onInsert: (text: string) => void;
|
onInsert: (text: string) => void;
|
||||||
|
onDatabaseChange?: (db: string) => void;
|
||||||
|
/** 为 true 时只显示当前选中的库,不允许切换(数据变更场景防误操作) */
|
||||||
|
singleDb?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RedisKeyItem {
|
interface RedisKeyItem {
|
||||||
@@ -190,7 +193,7 @@ function formatTTL(ttl: number): string {
|
|||||||
/* COMPONENT */
|
/* COMPONENT */
|
||||||
/* ================================================================== */
|
/* ================================================================== */
|
||||||
|
|
||||||
export default function SchemaSidebar({ instanceId, database, dbType, onInsert }: Props) {
|
export default function SchemaSidebar({ instanceId, database, dbType, onInsert, onDatabaseChange, singleDb }: Props) {
|
||||||
const isMySQL = dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql';
|
const isMySQL = dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql';
|
||||||
const isRedis = dbType === 'redis';
|
const isRedis = dbType === 'redis';
|
||||||
|
|
||||||
@@ -201,7 +204,9 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
const [dbNodes, setDbNodes] = useState<Record<string, DbNode>>({});
|
const [dbNodes, setDbNodes] = useState<Record<string, DbNode>>({});
|
||||||
const [expandedTable, setExpandedTable] = useState<string | null>(null);
|
const [expandedTable, setExpandedTable] = useState<string | null>(null);
|
||||||
const [tableColumns, setTableColumns] = useState<ColumnInfo[]>([]);
|
const [tableColumns, setTableColumns] = useState<ColumnInfo[]>([]);
|
||||||
|
const [tableIndexes, setTableIndexes] = useState<IndexInfo[]>([]);
|
||||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||||
|
const [detailTab, setDetailTab] = useState<'columns' | 'indexes'>('columns');
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
|
|
||||||
// -- Redis State --
|
// -- Redis State --
|
||||||
@@ -237,10 +242,10 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
.finally(() => setLoadingDbs(false));
|
.finally(() => setLoadingDbs(false));
|
||||||
}, [instanceId, isMySQL]);
|
}, [instanceId, isMySQL]);
|
||||||
|
|
||||||
// 当 database prop 变化时自动展开
|
// 当 database prop 变化时自动展开并加载表
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (database && databases.includes(database) && expandedDb !== database) {
|
if (database && databases.includes(database) && expandedDb !== database) {
|
||||||
setExpandedDb(database);
|
handleExpandDb(database);
|
||||||
}
|
}
|
||||||
}, [database, databases]);
|
}, [database, databases]);
|
||||||
|
|
||||||
@@ -278,10 +283,13 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
if (expandedTable === key) { setExpandedTable(null); return; }
|
if (expandedTable === key) { setExpandedTable(null); return; }
|
||||||
setExpandedTable(key);
|
setExpandedTable(key);
|
||||||
setTableColumns([]);
|
setTableColumns([]);
|
||||||
|
setTableIndexes([]);
|
||||||
|
setDetailTab('columns');
|
||||||
setLoadingColumns(true);
|
setLoadingColumns(true);
|
||||||
try {
|
try {
|
||||||
const detail = await instanceDetailApi.getTableDetail(Number(instanceId), dbName, tableName);
|
const detail = await instanceDetailApi.getTableDetail(Number(instanceId), dbName, tableName);
|
||||||
setTableColumns(detail?.columns || []);
|
setTableColumns(detail?.columns || []);
|
||||||
|
setTableIndexes(detail?.indexes || []);
|
||||||
} catch { /* ignore */ }
|
} catch { /* ignore */ }
|
||||||
finally { setLoadingColumns(false); }
|
finally { setLoadingColumns(false); }
|
||||||
}, [expandedTable, instanceId]);
|
}, [expandedTable, instanceId]);
|
||||||
@@ -330,13 +338,10 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
/* ---------------------------------------------------------------- */
|
/* ---------------------------------------------------------------- */
|
||||||
|
|
||||||
const filteredDatabases = databases.filter(dbName => {
|
const filteredDatabases = databases.filter(dbName => {
|
||||||
// 如果已选目标数据库,只显示该库
|
if (singleDb && database && dbName !== database) return false;
|
||||||
if (database && dbName !== database) return false;
|
|
||||||
if (!search) return true;
|
if (!search) return true;
|
||||||
const kw = search.toLowerCase();
|
const kw = search.toLowerCase();
|
||||||
// 库名匹配
|
|
||||||
if (dbName.toLowerCase().includes(kw)) return true;
|
if (dbName.toLowerCase().includes(kw)) return true;
|
||||||
// 该库下的表名匹配
|
|
||||||
const node = dbNodes[dbName];
|
const node = dbNodes[dbName];
|
||||||
if (node?.loaded) {
|
if (node?.loaded) {
|
||||||
return node.tables.some(t => t.name.toLowerCase().includes(kw));
|
return node.tables.some(t => t.name.toLowerCase().includes(kw));
|
||||||
@@ -450,7 +455,10 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
<div key={dbName}>
|
<div key={dbName}>
|
||||||
{/* Level 1: Database */}
|
{/* Level 1: Database */}
|
||||||
<button
|
<button
|
||||||
onClick={() => handleExpandDb(dbName)}
|
onClick={() => {
|
||||||
|
handleExpandDb(dbName);
|
||||||
|
if (onDatabaseChange && dbName !== database) onDatabaseChange(dbName);
|
||||||
|
}}
|
||||||
className={`flex items-center gap-1.5 w-full px-2 py-1.5 text-xs hover:bg-[var(--dg-bg-hover)] transition-colors ${
|
className={`flex items-center gap-1.5 w-full px-2 py-1.5 text-xs hover:bg-[var(--dg-bg-hover)] transition-colors ${
|
||||||
isActive ? 'text-blue-400' : ''
|
isActive ? 'text-blue-400' : ''
|
||||||
}`}
|
}`}
|
||||||
@@ -488,19 +496,19 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
return (
|
return (
|
||||||
<div key={t.name}>
|
<div key={t.name}>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleExpandTable(dbName, t.name)}
|
onClick={(e) => {
|
||||||
|
if (e.altKey) { onInsert(`${dbName}.${t.name}`); }
|
||||||
|
else { handleExpandTable(dbName, t.name); }
|
||||||
|
}}
|
||||||
className="flex items-center gap-1.5 w-full px-2 py-1 text-[11px] hover:bg-[var(--dg-bg-hover)] transition-colors group"
|
className="flex items-center gap-1.5 w-full px-2 py-1 text-[11px] hover:bg-[var(--dg-bg-hover)] transition-colors group"
|
||||||
|
title={`单击展开/折叠 · Alt+点击插入表名`}
|
||||||
>
|
>
|
||||||
{isTableExpanded
|
{isTableExpanded
|
||||||
? <ChevronDown className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
|
? <ChevronDown className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||||
: <ChevronRight className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
|
: <ChevronRight className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||||
}
|
}
|
||||||
<Table2 className="w-2.5 h-2.5 text-blue-400 flex-shrink-0" />
|
<Table2 className="w-2.5 h-2.5 text-blue-400 flex-shrink-0" />
|
||||||
<span
|
<span className="font-mono truncate flex-1 text-left hover:text-blue-400 transition-colors">
|
||||||
className="font-mono truncate flex-1 text-left hover:text-blue-400 transition-colors"
|
|
||||||
onClick={(e) => { e.stopPropagation(); onInsert(`${dbName}.${t.name}`); }}
|
|
||||||
title="点击插入 库名.表名"
|
|
||||||
>
|
|
||||||
{t.name}
|
{t.name}
|
||||||
</span>
|
</span>
|
||||||
{t.rows !== undefined && (
|
{t.rows !== undefined && (
|
||||||
@@ -508,7 +516,7 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Level 3: Columns */}
|
{/* Level 3: Columns & Indexes */}
|
||||||
{isTableExpanded && (
|
{isTableExpanded && (
|
||||||
<div className="ml-4 border-l border-[var(--dg-border-light)]">
|
<div className="ml-4 border-l border-[var(--dg-border-light)]">
|
||||||
{loadingColumns ? (
|
{loadingColumns ? (
|
||||||
@@ -516,19 +524,77 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
|||||||
<Loader2 className="w-2.5 h-2.5 animate-spin" /> ...
|
<Loader2 className="w-2.5 h-2.5 animate-spin" /> ...
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
tableColumns.map(col => (
|
<>
|
||||||
<button
|
{/* 字段/索引 Tab */}
|
||||||
key={col.Field}
|
<div className="flex border-b border-[var(--dg-border-light)]">
|
||||||
onClick={() => onInsert(`${t.name}.${col.Field}`)}
|
<button
|
||||||
className="flex items-center gap-1.5 w-full px-2 py-0.5 text-[10px] hover:bg-[var(--dg-bg-hover)] transition-colors"
|
onClick={() => setDetailTab('columns')}
|
||||||
title={`${col.Type} ${col.Null === 'NO' ? 'NOT NULL' : ''}`}
|
className={`flex-1 px-2 py-1 text-[10px] font-medium border-b-2 transition-all ${
|
||||||
>
|
detailTab === 'columns'
|
||||||
<Columns3 className="w-2 h-2 text-[var(--dg-text-muted)] flex-shrink-0" />
|
? 'text-blue-400 border-blue-400'
|
||||||
<span className="font-mono text-[var(--dg-text-secondary)] hover:text-blue-400 truncate">{col.Field}</span>
|
: 'text-[var(--dg-text-muted)] border-transparent hover:text-[var(--dg-text-secondary)]'
|
||||||
<span className="text-[8px] text-[var(--dg-text-muted)] ml-auto flex-shrink-0">{col.Type}</span>
|
}`}
|
||||||
{col.Key === 'PRI' && <span className="text-[7px] px-0.5 bg-yellow-500/10 text-yellow-400 rounded flex-shrink-0">PK</span>}
|
>
|
||||||
</button>
|
<Columns3 className="w-2.5 h-2.5 inline mr-0.5" />
|
||||||
))
|
字段 ({tableColumns.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDetailTab('indexes')}
|
||||||
|
className={`flex-1 px-2 py-1 text-[10px] font-medium border-b-2 transition-all ${
|
||||||
|
detailTab === 'indexes'
|
||||||
|
? 'text-blue-400 border-blue-400'
|
||||||
|
: 'text-[var(--dg-text-muted)] border-transparent hover:text-[var(--dg-text-secondary)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<KeyRound className="w-2.5 h-2.5 inline mr-0.5" />
|
||||||
|
索引 ({tableIndexes.length})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 字段列表 */}
|
||||||
|
{detailTab === 'columns' && tableColumns.map(col => (
|
||||||
|
<button
|
||||||
|
key={col.Field}
|
||||||
|
onClick={() => onInsert(`${t.name}.${col.Field}`)}
|
||||||
|
className="flex items-center gap-1.5 w-full px-2 py-0.5 text-[10px] hover:bg-[var(--dg-bg-hover)] transition-colors"
|
||||||
|
title={`${col.Type} ${col.Null === 'NO' ? 'NOT NULL' : ''}`}
|
||||||
|
>
|
||||||
|
<Columns3 className="w-2 h-2 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||||
|
<span className="font-mono text-[var(--dg-text-secondary)] hover:text-blue-400 truncate">{col.Field}</span>
|
||||||
|
<span className="text-[8px] text-[var(--dg-text-muted)] ml-auto flex-shrink-0">{col.Type}</span>
|
||||||
|
{col.Key === 'PRI' && <span className="text-[7px] px-0.5 bg-yellow-500/10 text-yellow-400 rounded flex-shrink-0">PK</span>}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* 索引列表 */}
|
||||||
|
{detailTab === 'indexes' && (
|
||||||
|
tableIndexes.length === 0 ? (
|
||||||
|
<div className="px-3 py-1.5 text-[10px] text-[var(--dg-text-muted)]">无索引</div>
|
||||||
|
) : (
|
||||||
|
Object.entries(
|
||||||
|
tableIndexes.reduce((acc, idx) => {
|
||||||
|
if (!acc[idx.Key_name]) acc[idx.Key_name] = [];
|
||||||
|
acc[idx.Key_name].push(idx);
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, IndexInfo[]>)
|
||||||
|
).map(([keyName, cols]) => (
|
||||||
|
<div key={keyName} className="px-2 py-1">
|
||||||
|
<div className="flex items-center gap-1 text-[10px]">
|
||||||
|
<KeyRound className="w-2 h-2 flex-shrink-0" style={{ color: cols[0].Non_unique ? 'var(--dg-text-muted)' : '#facc15' }} />
|
||||||
|
<span className="font-mono text-[var(--dg-text-secondary)] truncate">{keyName}</span>
|
||||||
|
{!cols[0].Non_unique && <span className="text-[7px] px-0.5 bg-yellow-500/10 text-yellow-400 rounded flex-shrink-0">UNI</span>}
|
||||||
|
<span className="text-[8px] text-[var(--dg-text-muted)] ml-auto flex-shrink-0">{cols[0].Index_type}</span>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 flex flex-wrap gap-x-2">
|
||||||
|
{cols.sort((a, b) => a.Seq_in_index - b.Seq_in_index).map(c => (
|
||||||
|
<span key={c.Column_name} className="text-[9px] font-mono text-[var(--dg-text-muted)]">{c.Column_name}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,19 +1,22 @@
|
|||||||
export const menuSections = [
|
export const menuSections = [
|
||||||
{ id: 'overview', label: '概览' },
|
{ id: 'workspace', label: '工作台' },
|
||||||
{ id: 'data', label: '数据源' },
|
{ id: 'admin', label: '管理' },
|
||||||
{ id: 'ticket', label: '工单' },
|
|
||||||
{ id: 'permission', label: '权限' },
|
|
||||||
{ id: 'system', label: '系统' },
|
{ id: 'system', label: '系统' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const menuItems = [
|
export const menuItems = [
|
||||||
{ id: 'dashboard', label: '仪表盘', icon: 'LayoutDashboard', section: 'overview', roles: ['admin', 'dba', 'developer', 'auditor'], permission: 'dashboard.view' },
|
// 工作台 — 日常操作
|
||||||
{ id: 'instances', label: '数据源', icon: 'Database', section: 'data', roles: ['admin', 'dba'], permission: 'instances.manage' },
|
{ id: 'dashboard', label: '仪表盘', icon: 'LayoutDashboard', section: 'workspace', roles: ['admin', 'dba', 'developer', 'auditor'], permission: 'dashboard.view' },
|
||||||
{ id: 'queries', label: '查询数据', icon: 'Code2', section: 'data', roles: ['admin', 'dba', 'developer'], permission: 'queries.execute' },
|
{ id: 'queries', label: '查询数据', icon: 'Code2', section: 'workspace', roles: ['admin', 'dba', 'developer'], permission: 'queries.execute' },
|
||||||
{ id: 'tickets', label: '数据变更', icon: 'FileEdit', section: 'ticket', roles: ['admin', 'dba', 'developer', 'auditor'], permission: 'tickets.manage' },
|
{ id: 'tickets', label: '数据变更', icon: 'FileEdit', section: 'workspace', roles: ['admin', 'dba', 'developer', 'auditor'], permission: 'tickets.manage' },
|
||||||
{ id: 'users', label: '用户管理', icon: 'Users', section: 'permission', roles: ['admin'], permission: 'users.manage' },
|
|
||||||
{ id: 'roles', label: '角色权限', icon: 'ShieldCheck', section: 'permission', roles: ['admin'], permission: 'roles.manage' },
|
// 管理 — 数据源 + 权限
|
||||||
{ id: 'instance-groups', label: '权限组', icon: 'FolderLock', section: 'permission', roles: ['admin'], permission: 'instance-groups.manage' },
|
{ id: 'instances', label: '数据源', icon: 'Database', section: 'admin', roles: ['admin', 'dba'], permission: 'instances.manage' },
|
||||||
|
{ id: 'users', label: '用户管理', icon: 'Users', section: 'admin', roles: ['admin'], permission: 'users.manage' },
|
||||||
|
{ id: 'roles', label: '角色权限', icon: 'ShieldCheck', section: 'admin', roles: ['admin'], permission: 'roles.manage' },
|
||||||
|
{ id: 'instance-groups', label: '权限组', icon: 'FolderLock', section: 'admin', roles: ['admin'], permission: 'instance-groups.manage' },
|
||||||
|
|
||||||
|
// 系统
|
||||||
{ id: 'workflow', label: '审批流程', icon: 'GitBranch', section: 'system', roles: ['admin', 'dba'], permission: 'workflow.manage' },
|
{ id: 'workflow', label: '审批流程', icon: 'GitBranch', section: 'system', roles: ['admin', 'dba'], permission: 'workflow.manage' },
|
||||||
{ id: 'audit-logs', label: '审计日志', icon: 'ScrollText', section: 'system', roles: ['admin', 'dba'], permission: 'audit-logs.view' },
|
{ id: 'audit-logs', label: '审计日志', icon: 'ScrollText', section: 'system', roles: ['admin', 'dba'], permission: 'audit-logs.view' },
|
||||||
{ id: 'auto-task', label: '自动任务', icon: 'Timer', section: 'system', roles: ['admin'], permission: 'auto-task.manage' },
|
{ id: 'auto-task', label: '自动任务', icon: 'Timer', section: 'system', roles: ['admin'], permission: 'auto-task.manage' },
|
||||||
|
|||||||
@@ -443,7 +443,9 @@ export default function QueriesPage() {
|
|||||||
onInsert={(text) => {
|
onInsert={(text) => {
|
||||||
const sep = dbType === 'redis' ? (sql.trim() ? '\n' : '') : (sql.trim() ? ' ' : '');
|
const sep = dbType === 'redis' ? (sql.trim() ? '\n' : '') : (sql.trim() ? ' ' : '');
|
||||||
setSql(prev => prev + sep + text + (dbType === 'redis' ? '' : ' '));
|
setSql(prev => prev + sep + text + (dbType === 'redis' ? '' : ' '));
|
||||||
}} />
|
}}
|
||||||
|
onDatabaseChange={setDatabase}
|
||||||
|
singleDb={!!database} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ export default function TicketCreatePage() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!instanceId) { setDatabases([]); setDatabase(''); return; }
|
if (!instanceId) { setDatabases([]); setDatabase(''); return; }
|
||||||
setDatabase(''); setDatabases([]); setTables([]);
|
setDatabase(''); setDatabases([]);
|
||||||
const inst = instances.find(i => i.id === Number(instanceId));
|
const inst = instances.find(i => i.id === Number(instanceId));
|
||||||
if (!inst) return;
|
if (!inst) return;
|
||||||
setLoadingDatabases(true);
|
setLoadingDatabases(true);
|
||||||
@@ -115,8 +115,8 @@ export default function TicketCreatePage() {
|
|||||||
const data = (res as { databases?: string[] })?.databases || (res as string[]) || [];
|
const data = (res as { databases?: string[] })?.databases || (res as string[]) || [];
|
||||||
const list = Array.isArray(data) ? data as string[] : [];
|
const list = Array.isArray(data) ? data as string[] : [];
|
||||||
setDatabases(list);
|
setDatabases(list);
|
||||||
if (list.length > 0) {
|
if (inst.db_type === 'redis') {
|
||||||
setDatabase(inst.db_type === 'redis' ? 'db0' : String(list[0]));
|
setDatabase('db0');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => setDatabases([]))
|
.catch(() => setDatabases([]))
|
||||||
@@ -290,7 +290,7 @@ export default function TicketCreatePage() {
|
|||||||
) : databases.length > 0 ? (
|
) : databases.length > 0 ? (
|
||||||
<select value={database} onChange={(e) => setDatabase(e.target.value)} disabled={loadingDatabases}
|
<select value={database} onChange={(e) => setDatabase(e.target.value)} disabled={loadingDatabases}
|
||||||
className="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 min-w-[150px] disabled:opacity-50">
|
className="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 min-w-[150px] disabled:opacity-50">
|
||||||
<option value="">{loadingDatabases ? '加载中...' : '选择数据库'}</option>
|
<option value="">{loadingDatabases ? '加载中...' : '选择数据库 *'}</option>
|
||||||
{databases.map((db) => <option key={db} value={db}>{db}</option>)}
|
{databases.map((db) => <option key={db} value={db}>{db}</option>)}
|
||||||
</select>
|
</select>
|
||||||
) : (
|
) : (
|
||||||
@@ -350,59 +350,71 @@ export default function TicketCreatePage() {
|
|||||||
{showBrowser && instanceId && (
|
{showBrowser && instanceId && (
|
||||||
<div className="w-[280px] shrink-0">
|
<div className="w-[280px] shrink-0">
|
||||||
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
|
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
|
||||||
onInsert={handleSchemaInsert} />
|
onInsert={handleSchemaInsert} singleDb />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* SQL 编辑器 */}
|
{/* SQL 编辑器卡片 */}
|
||||||
<div className="flex-1 min-w-0 flex flex-col">
|
<div className="flex-1 min-w-0 flex flex-col">
|
||||||
<div className={`dg-card overflow-hidden flex flex-col`}>
|
<div className="dg-card overflow-hidden flex flex-col">
|
||||||
|
{/* 编辑器顶栏:标题 + SQL检测按钮 */}
|
||||||
|
<div className="flex items-center justify-between px-3 py-2 bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
|
||||||
|
<span className="text-xs font-medium text-[var(--dg-text-muted)]">SQL 变更语句</span>
|
||||||
|
<button onClick={handleValidate}
|
||||||
|
disabled={validating || !sqlContent.trim() || !instanceId || !database}
|
||||||
|
className="flex items-center gap-1 px-2.5 py-1 text-xs font-medium text-blue-400 bg-blue-500/10 rounded-md hover:bg-blue-500/20 transition-colors disabled:opacity-30">
|
||||||
|
{validating ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Shield className="w-3.5 h-3.5" />}
|
||||||
|
SQL 检测
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<SqlEditor ref={editorRef} value={sqlContent} onChange={handleSqlChange} language="sql"
|
<SqlEditor ref={editorRef} value={sqlContent} onChange={handleSqlChange} language="sql"
|
||||||
height="320px"
|
height="320px"
|
||||||
placeholder="请输入 SQL 变更语句,支持多条 SQL(以分号分隔)..." />
|
placeholder="请输入 SQL 变更语句,支持多条 SQL(以分号分隔)..." />
|
||||||
<div className="flex items-center justify-between px-3 py-1.5 bg-[var(--dg-bg-tertiary)] border-t border-[var(--dg-border)] text-[11px] text-[var(--dg-text-muted)]">
|
{/* 编辑器底栏 */}
|
||||||
<span>
|
<div className="flex items-center justify-between px-3 py-1.5 bg-[var(--dg-bg-tertiary)] border-t border-[var(--dg-border)] text-[11px] text-[var(--dg-text-muted)]">
|
||||||
{sqlContent.trim() ? sqlContent.trim().split(/;\s*/).filter(Boolean).length + ' 条语句 · ' : ''}
|
<span>
|
||||||
{sqlContent.length} 字符
|
{sqlContent.trim() ? sqlContent.trim().split(/;\s*/).filter(Boolean).length + ' 条语句 · ' : ''}
|
||||||
</span>
|
{sqlContent.length} 字符
|
||||||
<div className="flex items-center gap-2">
|
</span>
|
||||||
{validated && <span className="flex items-center gap-1 text-green-400"><Check className="w-3 h-3" />检测通过</span>}
|
<div className="flex items-center gap-2">
|
||||||
<span>Ctrl+Enter 格式化</span>
|
{validated && <span className="flex items-center gap-1 text-green-400"><Check className="w-3 h-3" />检测通过</span>}
|
||||||
|
<span>Ctrl+Enter 格式化</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ====== 审核结果 ====== */}
|
{/* 审核结果(紧跟编辑器) */}
|
||||||
{auditResult && (
|
{auditResult && (
|
||||||
<div className="bg-[var(--dg-bg-secondary)] rounded-lg p-4 space-y-3">
|
<div className="mt-3 bg-[var(--dg-bg-secondary)] rounded-lg p-4 space-y-3">
|
||||||
<div className="flex items-center gap-3 text-xs">
|
<div className="flex items-center gap-3 text-xs">
|
||||||
<span className="font-semibold flex items-center gap-1.5">
|
<span className="font-semibold flex items-center gap-1.5">
|
||||||
<Shield className="w-3.5 h-3.5 text-blue-400" /> 审核结果
|
<Shield className="w-3.5 h-3.5 text-blue-400" /> 审核结果
|
||||||
</span>
|
</span>
|
||||||
{errorCount > 0 && <span className="text-red-400 font-medium">{errorCount} 错误</span>}
|
{errorCount > 0 && <span className="text-red-400 font-medium">{errorCount} 错误</span>}
|
||||||
{warnCount > 0 && <span className="text-amber-400 font-medium">{warnCount} 警告</span>}
|
{warnCount > 0 && <span className="text-amber-400 font-medium">{warnCount} 警告</span>}
|
||||||
{infoCount > 0 && <span className="text-blue-400 font-medium">{infoCount} 提示</span>}
|
{infoCount > 0 && <span className="text-blue-400 font-medium">{infoCount} 提示</span>}
|
||||||
{errorCount === 0 && warnCount === 0 && infoCount === 0 && (
|
{errorCount === 0 && warnCount === 0 && infoCount === 0 && (
|
||||||
<span className="text-green-400 font-medium flex items-center gap-1"><Check className="w-3.5 h-3.5" /> 通过</span>
|
<span className="text-green-400 font-medium flex items-center gap-1"><Check className="w-3.5 h-3.5" /> 通过</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{auditResult.findings.length > 0 && (
|
{auditResult.findings.length > 0 && (
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
{auditResult.findings.map((f, idx) => (
|
{auditResult.findings.map((f, idx) => (
|
||||||
<div key={idx} className={'flex items-center gap-2 px-3 py-2 rounded-lg text-xs ' + (LEVEL_COLOR[f.level] || '')}>
|
<div key={idx} className={'flex items-center gap-2 px-3 py-2 rounded-lg text-xs ' + (LEVEL_COLOR[f.level] || '')}>
|
||||||
<AlertTriangle className="w-3.5 h-3.5 shrink-0" />
|
<AlertTriangle className="w-3.5 h-3.5 shrink-0" />
|
||||||
<span className="font-medium">{LEVEL_LABEL[f.level] || f.level}</span>
|
<span className="font-medium">{LEVEL_LABEL[f.level] || f.level}</span>
|
||||||
<span className="opacity-60">·</span>
|
<span className="opacity-60">·</span>
|
||||||
<span className="font-mono opacity-80">{f.rule}</span>
|
<span className="font-mono opacity-80">{f.rule}</span>
|
||||||
<span className="opacity-60">—</span>
|
<span className="opacity-60">—</span>
|
||||||
<span className="flex-1">{f.message}</span>
|
<span className="flex-1">{f.message}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{/* ====== 变更原因 ====== */}
|
{/* ====== 变更原因 ====== */}
|
||||||
<div>
|
<div>
|
||||||
@@ -414,17 +426,8 @@ export default function TicketCreatePage() {
|
|||||||
placeholder="请描述变更原因、影响范围、回滚方案等" />
|
placeholder="请描述变更原因、影响范围、回滚方案等" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ====== 底部操作栏 ====== */}
|
{/* ====== 提交审批 ====== */}
|
||||||
<div className="flex items-center justify-end gap-3 pt-2">
|
<div className="flex items-center justify-end">
|
||||||
{/* SQL 检测 */}
|
|
||||||
<button onClick={handleValidate}
|
|
||||||
disabled={validating || !sqlContent.trim() || !instanceId || !database}
|
|
||||||
className="flex items-center gap-1.5 px-5 py-2.5 text-sm font-medium border rounded-lg transition-all disabled:opacity-30 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]">
|
|
||||||
{validating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Shield className="w-4 h-4" />}
|
|
||||||
SQL 检测
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* 提交审批 */}
|
|
||||||
<button onClick={handleSubmit}
|
<button onClick={handleSubmit}
|
||||||
disabled={submitting || !validated}
|
disabled={submitting || !validated}
|
||||||
className="flex items-center gap-1.5 px-6 py-2.5 text-sm font-medium bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-white hover:opacity-90 disabled:opacity-40 transition-all">
|
className="flex items-center gap-1.5 px-6 py-2.5 text-sm font-medium bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-white hover:opacity-90 disabled:opacity-40 transition-all">
|
||||||
|
|||||||
Reference in new issue
Block a user