GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-06-28 01:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(table-designer): 修复索引编辑丢失与勾选异常 (#302)

Browse Source 
## 问题描述


问题1：设计表中修改索引时，当前实现采用“先删除旧索引，再创建新索引”的流程。当新索引创建过程中出现异常时，旧索引已经被删除，最终会导致原有索引丢失。见https://github.com/Syngnat/GoNavi/issues/300
问题2：自测时发现

索引列表还存在选择交互异常：

- 只有一条索引被选中时，checkbox 偶发无法取消
- “修改”按钮会因选中状态异常而偶发不可用
- checkbox 与整行点击在某些情况下表现不一致


## 问题原因
### 1. 索引编辑失败后丢失原索引
索引修改流程是拆成两条 DDL 顺序执行：
1. 删除旧索引
2. 创建新索引
执行层没有事务保护，也没有失败补偿逻辑。
因此当第 1 步成功、第 2 步失败时，原索引会被直接删掉。

### 2. 索引勾选状态异常
索引表存在两套同时修改选中状态的交互：
- checkbox 自己维护一套 toggle
- 整行点击也维护一套 toggle
两套逻辑共同修改 `selectedIndexKeys`，会导致事件命中时出现互相抵消，从而出现：
- checkbox 偶发点不动
- 单选状态不稳定
- “修改”按钮偶发不可用

## 修复方案
### 1. 增加索引编辑失败恢复机制
- 抽出统一的 DDL 顺序执行逻辑，明确拿到失败语句位置
- 修改索引时，若旧索引删除成功但新索引创建失败，则自动尝试按旧定义恢复原索引
- 若无法恢复，则给出明确错误提示
- 同时增加“无实际变更”判断，避免无意义执行破坏性 DDL
### 2. 统一索引选择交互入口
- 将索引选中状态收敛到单一的 `toggleIndexSelection` 入口
- checkbox 区域改为只走同一套状态切换逻辑
- 阻断 checkbox 区域事件冒泡，避免和整行点击双重触发
- 消除重复选中与单选取消不稳定问题
### 3. 补充单元测试
新增针对索引相关 helper 的单元测试，覆盖：
- 索引行到编辑表单的归一化
- 无变更编辑识别
- 选择切换不重复
- 单选场景下反复点击可稳定选中/取消
- 仅在“删除旧索引成功、创建新索引失败”时触发恢复判断

## 验证效果
### 已验证
- 修改索引时，若新索引创建失败，会尝试恢复原索引
- 单条索引选中后，可稳定通过 checkbox 取消选中
- 多选/取消后，单选状态仍然稳定
- “修改”按钮随单选状态稳定启用/禁用

### 单元测试
执行命令：

```bash
npm test -- src/components/tableDesignerIndexUtils.test.ts
```

## 回归执行结果：

### 问题1
- 索引bug#300_上报问题现象
<img width="1119" height="433" alt="索引bug#300_上报问题现象"
src="https://github.com/user-attachments/assets/61831c2f-5840-4d0d-ab71-d6c82d0db63e"
/>

- 索引bug#300_修复效果截图
<img width="1500" height="460" alt="索引bug#300_修复效果截图"
src="https://github.com/user-attachments/assets/277fd339-9bc4-4cfb-9e0f-d2365e334cdd"
/>

### 问题2
- 索引修改前端事件问题现象截图，有时看着是正常的，实则是两套前端事件冲突

<img width="324" height="283" alt="索引修改前端事件问题"
src="https://github.com/user-attachments/assets/849c362c-4ce3-46b6-9a33-f7348be9c581"
/>

<img width="491" height="348" alt="索引修改前端事件问题2_有时看着是正常的"
src="https://github.com/user-attachments/assets/855a1ed7-1365-44cc-a2f9-6993c3d761e0"
/>

<img width="707" height="406" alt="索引修改前端事件问题3_checkbox事件冲突"
src="https://github.com/user-attachments/assets/3c5fc75f-9eb2-470e-8b0c-976b8eaf5a94"
/>

- 索引修改前端事件问题修复效果
<img width="2308" height="792" alt="索引修改前端事件问题修复效果"
src="https://github.com/user-attachments/assets/f22e8145-58fd-4ba1-9d29-e81a879af64d"
/>

### 影响范围说明
本次修改影响设计表中的“索引”页签交互与索引编辑执行流程，主要包括：
- 索引修改
- 索引单选/多选
- “修改”按钮启用状态
- 索引失败后的恢复处理
不影响：
- 普通表结构保存流程
- 外键维护逻辑
- 触发器维护逻辑
- 非索引相关页面交互

### 风险说明
- 索引恢复依赖旧索引定义能正确还原为创建 SQL
- 当前修复已覆盖前端交互和失败补偿逻辑，但不同数据库方言下仍建议结合实际库型回归验证一次索引修改流程
This commit is contained in:
Syngnat
2026-03-26 12:16:45 +08:00
committed by GitHub
parent 82369b4070 ecc8ff1197
commit 93446e060e
3 changed files with 282 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
frontend/src/components/TableDesigner.tsx
View File

@@ -8,6 +8,7 @@ import Editor, { loader } from '@monaco-editor/react';
import { TabData, ColumnDefinition, IndexDefinition, ForeignKeyDefinition, TriggerDefinition } from '../types';
import { useStore } from '../store';
import { DBGetColumns, DBGetIndexes, DBQuery, DBGetForeignKeys, DBGetTriggers, DBShowCreateTable } from '../../wailsjs/go/app/App';
import { hasIndexFormChanged, normalizeIndexFormFromRow, shouldRestoreOriginalIndex, toggleIndexSelection as getNextIndexSelection, type IndexDisplaySnapshot } from './tableDesignerIndexUtils';
interface EditableColumn extends ColumnDefinition {
_key: string;
@@ -48,6 +49,13 @@ interface ForeignKeyFormState {
refColumnNames: string[];
}
interface SchemaExecutionResult {
ok: boolean;
message?: string;
failedStatementIndex?: number;
statementCount: number;
}
// 通用兜底类型列表
const COMMON_TYPES = [
{ value: 'int' },
@@ -1511,11 +1519,10 @@ ${selectedTrigger.statement}`;
}
};
const executeSchemaSql = async (sql: string, successMessage: string): Promise<boolean> => {
const executeSchemaStatements = async (sqlText: string): Promise<SchemaExecutionResult> => {
const conn = connections.find(c => c.id === tab.connectionId);
if (!conn) {
message.error('未找到连接');
return false;
return { ok: false, message: '未找到连接', statementCount: 0 };
}
const config = {
...conn.config,
@@ -1525,20 +1532,68 @@ ${selectedTrigger.statement}`;
useSSH: conn.config.useSSH || false,
ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
};
const statements = sqlText.split(/;\s*\n/).map(s => s.trim()).filter(Boolean);
for (let i = 0; i < statements.length; i++) {
let stmt = statements[i];
if (!stmt.endsWith(';')) stmt += ';';
const res = await DBQuery(config as any, tab.dbName || '', stmt);
if (!res.success) {
const prefix = statements.length > 1 ? `第 ${i + 1}/${statements.length} 条语句执行失败: ` : '执行失败: ';
return {
ok: false,
message: prefix + res.message,
failedStatementIndex: i,
statementCount: statements.length,
};
}
}
return { ok: true, statementCount: statements.length };
};
const buildIndexFormFromRow = (row: IndexDisplayRow): IndexFormState => {
return normalizeIndexFormFromRow(
row as IndexDisplaySnapshot,
getIndexKindOptions().map(item => item.value as IndexKind),
);
};
const executeIndexEditSql = async (dropSql: string, addSql: string, previousIndex: IndexDisplayRow): Promise<boolean> => {
const result = await executeSchemaStatements(`${dropSql}\n${addSql}`);
if (result.ok) {
message.success('索引修改成功');
await fetchData();
return true;
}
const oldCreateSql = buildIndexCreateSql(buildIndexFormFromRow(previousIndex));
if (!oldCreateSql) {
message.error((result.message || '执行失败') + '；且无法自动恢复原索引，请尽快检查');
await fetchData();
return false;
}
if (!shouldRestoreOriginalIndex(result)) {
message.error(result.message || '执行失败');
return false;
}
const restoreResult = await executeSchemaStatements(oldCreateSql);
if (restoreResult.ok) {
message.error((result.message || '执行失败') + '；已自动恢复原索引');
} else {
message.error((result.message || '执行失败') + `；恢复原索引失败: ${restoreResult.message || '未知错误'}`);
}
await fetchData();
return false;
};
const executeSchemaSql = async (sql: string, successMessage: string): Promise<boolean> => {
try {
// 多条 DDL 语句（如 DROP INDEX + CREATE INDEX）需要逐条执行，
// 因为 Go MySQL 驱动默认不支持多语句 Exec。
const statements = sql.split(/;\s*\n/).map(s => s.trim()).filter(Boolean);
for (let i = 0; i < statements.length; i++) {
let stmt = statements[i];
if (!stmt.endsWith(';')) stmt += ';';
const res = await DBQuery(config as any, tab.dbName || '', stmt);
if (!res.success) {
const prefix = statements.length > 1 ? `第 ${i + 1}/${statements.length} 条语句执行失败: ` : '执行失败: ';
message.error(prefix + res.message);
if (i > 0) await fetchData();
return false;
}
const result = await executeSchemaStatements(sql);
if (!result.ok) {
message.error(result.message || '执行失败');
if ((result.failedStatementIndex ?? 0) > 0) await fetchData();
return false;
}
message.success(successMessage);
await fetchData();
@@ -1633,32 +1688,7 @@ END;`;
return;
}
setIndexModalMode('edit');
const selectedName = String(selectedIndex.name || '').trim();
const selectedNameUpper = selectedName.toUpperCase();
const selectedTypeUpper = String(selectedIndex.indexType || '').trim().toUpperCase();
let kind: IndexKind = 'NORMAL';
if (selectedNameUpper === 'PRIMARY') {
kind = 'PRIMARY';
} else if (selectedTypeUpper === 'FULLTEXT') {
kind = 'FULLTEXT';
} else if (selectedTypeUpper === 'SPATIAL') {
kind = 'SPATIAL';
} else if (selectedIndex.nonUnique === 0) {
kind = 'UNIQUE';
}
const supportedKinds = new Set(getIndexKindOptions().map(item => item.value));
if (!supportedKinds.has(kind)) {
kind = selectedIndex.nonUnique === 0 ? 'UNIQUE' : 'NORMAL';
}
setIndexForm({
name: kind === 'PRIMARY' ? 'PRIMARY' : selectedName,
columnNames: [...selectedIndex.columnNames],
kind,
indexType: kind === 'NORMAL' || kind === 'UNIQUE'
? (selectedTypeUpper || 'DEFAULT')
: 'DEFAULT',
});
setIndexForm(buildIndexFormFromRow(selectedIndex));
setIsIndexModalOpen(true);
};
@@ -1817,13 +1847,32 @@ END;`;
let sql = addSql;
if (indexModalMode === 'edit' && selectedIndex) {
const previousForm = buildIndexFormFromRow(selectedIndex);
const nextForm: IndexFormState = {
name: indexForm.kind === 'PRIMARY' ? 'PRIMARY' : nextName,
columnNames: [...indexForm.columnNames],
kind: indexForm.kind,
indexType: indexForm.kind === 'NORMAL' || indexForm.kind === 'UNIQUE'
? (String(indexForm.indexType || '').trim().toUpperCase() || 'DEFAULT')
: 'DEFAULT',
};
if (!hasIndexFormChanged(previousForm, nextForm)) {
setIndexSaving(false);
message.info('没有检测到索引变更');
return;
}
const dropSql = buildIndexDropSql(selectedIndex.name);
if (!dropSql) {
setIndexSaving(false);
message.warning('当前数据库暂不支持删除该索引');
return;
}
sql = `${dropSql}\n${addSql}`;
const ok = await executeIndexEditSql(dropSql, addSql, selectedIndex);
setIndexSaving(false);
if (ok) {
setIsIndexModalOpen(false);
}
return;
}
const ok = await executeSchemaSql(sql, indexModalMode === 'create' ? '索引新增成功' : '索引修改成功');
@@ -2270,12 +2319,16 @@ END;`;
const allIndexKeys = groupedIndexes.map(idx => idx.key);
const isAllSelected = allIndexKeys.length > 0 && selectedIndexKeys.length === allIndexKeys.length;
const isIndeterminate = selectedIndexKeys.length > 0 && selectedIndexKeys.length < allIndexKeys.length;
const toggleIndexSelection = (key: string, checked?: boolean) => {
setSelectedIndexKeys(prev => getNextIndexSelection(prev, key, checked));
};
const selectColumn = {
title: () => (
<Checkbox
checked={isAllSelected}
indeterminate={isIndeterminate}
onClick={(e) => e.stopPropagation()}
onChange={(e) => {
setSelectedIndexKeys(e.target.checked ? allIndexKeys : []);
}}
@@ -2286,18 +2339,19 @@ END;`;
key: '_select',
width: 48,
render: (_: any, record: any) => (
<Checkbox
checked={selectedIndexKeys.includes(record.key)}
onChange={(e) => {
<span
onClick={(e) => {
e.stopPropagation();
setSelectedIndexKeys(prev =>
e.target.checked
? [...prev, record.key]
: prev.filter(k => k !== record.key)
);
toggleIndexSelection(record.key);
}}
style={{ margin: 0 }}
/>
style={{ display: 'inline-flex' }}
>
<Checkbox
checked={selectedIndexKeys.includes(record.key)}
onChange={() => undefined}
style={{ margin: 0, pointerEvents: 'none' }}
/>
</span>
),
};
@@ -2593,11 +2647,7 @@ END;`;
}}
onRow={(record) => ({
onClick: () => {
setSelectedIndexKeys(prev =>
prev.includes(record.key)
? prev.filter(k => k !== record.key)
: [...prev, record.key]
);
toggleIndexSelection(record.key);
},
style: { cursor: 'pointer' }
})}
@@ -2897,7 +2947,7 @@ END;`;
/>
</Space>
<div style={{ color: '#888', fontSize: 12 }}>
修改索引会执行“先删除旧索引，再创建新索引”。
修改索引时若新索引创建失败，系统会尝试自动恢复原索引。
</div>
</Space>
</Modal>

95
frontend/src/components/tableDesignerIndexUtils.test.ts Normal file
View File

@@ -0,0 +1,95 @@
import { describe, expect, it } from 'vitest';
import {
hasIndexFormChanged,
normalizeIndexFormFromRow,
shouldRestoreOriginalIndex,
toggleIndexSelection,
type IndexDisplaySnapshot,
type IndexFormSnapshot,
} from './tableDesignerIndexUtils';
describe('tableDesignerIndexUtils', () => {
it('normalizes index rows for edit form reuse', () => {
const row: IndexDisplaySnapshot = {
key: 'idx_user_name',
name: 'idx_user_name',
indexType: 'btree',
nonUnique: 0,
columnNames: ['name'],
};
expect(normalizeIndexFormFromRow(row, ['NORMAL', 'UNIQUE', 'PRIMARY', 'FULLTEXT', 'SPATIAL'])).toEqual({
name: 'idx_user_name',
columnNames: ['name'],
kind: 'UNIQUE',
indexType: 'BTREE',
});
});
it('detects no-op index edits as unchanged', () => {
const previousForm: IndexFormSnapshot = {
name: 'idx_user_name',
columnNames: ['name'],
kind: 'UNIQUE',
indexType: 'BTREE',
};
const nextForm: IndexFormSnapshot = {
name: 'idx_user_name',
columnNames: ['name'],
kind: 'UNIQUE',
indexType: 'BTREE',
};
expect(hasIndexFormChanged(previousForm, nextForm)).toBe(false);
});
it('marks edits as changed when index columns differ', () => {
const previousForm: IndexFormSnapshot = {
name: 'idx_user_name',
columnNames: ['name'],
kind: 'NORMAL',
indexType: 'DEFAULT',
};
const nextForm: IndexFormSnapshot = {
name: 'idx_user_name',
columnNames: ['name', 'email'],
kind: 'NORMAL',
indexType: 'DEFAULT',
};
expect(hasIndexFormChanged(previousForm, nextForm)).toBe(true);
});
it('toggles selected index keys without duplicates', () => {
expect(toggleIndexSelection([], 'idx_user_name', true)).toEqual(['idx_user_name']);
expect(toggleIndexSelection(['idx_user_name'], 'idx_user_name', true)).toEqual(['idx_user_name']);
expect(toggleIndexSelection(['idx_user_name'], 'idx_user_name')).toEqual([]);
});
it('keeps single-selection toggles stable across repeated clicks', () => {
let selected = toggleIndexSelection([], 'idx_user_name');
expect(selected).toEqual(['idx_user_name']);
selected = toggleIndexSelection(selected, 'idx_user_name');
expect(selected).toEqual([]);
selected = toggleIndexSelection(selected, 'idx_user_name');
expect(selected).toEqual(['idx_user_name']);
selected = toggleIndexSelection(selected, 'idx_user_email');
expect(selected).toEqual(['idx_user_name', 'idx_user_email']);
selected = toggleIndexSelection(selected, 'idx_user_email');
expect(selected).toEqual(['idx_user_name']);
selected = toggleIndexSelection(selected, 'idx_user_name');
expect(selected).toEqual([]);
});
it('only restores original index when create step fails after drop step', () => {
expect(shouldRestoreOriginalIndex({ failedStatementIndex: 1 })).toBe(true);
expect(shouldRestoreOriginalIndex({ failedStatementIndex: 0 })).toBe(false);
expect(shouldRestoreOriginalIndex({})).toBe(false);
});
});

78
frontend/src/components/tableDesignerIndexUtils.ts Normal file
View File

@@ -0,0 +1,78 @@
export type IndexKind = 'NORMAL' | 'UNIQUE' | 'PRIMARY' | 'FULLTEXT' | 'SPATIAL';
export interface IndexDisplaySnapshot {
key: string;
name: string;
indexType: string;
nonUnique: number;
columnNames: string[];
}
export interface IndexFormSnapshot {
name: string;
columnNames: string[];
kind: IndexKind;
indexType: string;
}
export interface SchemaExecutionSnapshot {
failedStatementIndex?: number;
}
export const normalizeIndexFormFromRow = (
row: IndexDisplaySnapshot,
supportedKinds: IndexKind[],
): IndexFormSnapshot => {
const selectedName = String(row.name || '').trim();
const selectedNameUpper = selectedName.toUpperCase();
const selectedTypeUpper = String(row.indexType || '').trim().toUpperCase();
let kind: IndexKind = 'NORMAL';
if (selectedNameUpper === 'PRIMARY') {
kind = 'PRIMARY';
} else if (selectedTypeUpper === 'FULLTEXT') {
kind = 'FULLTEXT';
} else if (selectedTypeUpper === 'SPATIAL') {
kind = 'SPATIAL';
} else if (row.nonUnique === 0) {
kind = 'UNIQUE';
}
if (!supportedKinds.includes(kind)) {
kind = row.nonUnique === 0 ? 'UNIQUE' : 'NORMAL';
}
return {
name: kind === 'PRIMARY' ? 'PRIMARY' : selectedName,
columnNames: [...row.columnNames],
kind,
indexType: kind === 'NORMAL' || kind === 'UNIQUE'
? (selectedTypeUpper || 'DEFAULT')
: 'DEFAULT',
};
};
export const hasIndexFormChanged = (
previousForm: IndexFormSnapshot,
nextForm: IndexFormSnapshot,
): boolean => {
if (previousForm.name !== nextForm.name) return true;
if (previousForm.kind !== nextForm.kind) return true;
if (previousForm.indexType !== nextForm.indexType) return true;
if (previousForm.columnNames.length !== nextForm.columnNames.length) return true;
return previousForm.columnNames.some((col, idx) => col !== nextForm.columnNames[idx]);
};
export const toggleIndexSelection = (
selectedKeys: string[],
key: string,
checked?: boolean,
): string[] => {
const exists = selectedKeys.includes(key);
const nextChecked = checked ?? !exists;
if (nextChecked) {
return exists ? selectedKeys : [...selectedKeys, key];
}
return selectedKeys.filter((item) => item !== key);
};
export const shouldRestoreOriginalIndex = (result: SchemaExecutionSnapshot): boolean => (
(result.failedStatementIndex ?? -1) > 0
);