refactor: TicketCreatePage用SchemaSidebar替换手写浏览器+SqlEditor暴露insertText光标定位

- SqlEditor: 添加 forwardRef + useImperativeHandle 暴露 insertText 方法
  - 支持在光标位置插入文本并移动光标
- TicketCreatePage: 删除300+行手写表结构/Redis/索引浏览代码
  - 统一使用 SchemaSidebar 组件(与查询页一致)
  - handleSchemaInsert: 已选库插table名,未选库插db.table名
  - 清理未用 imports/icons/types/helpers (RedisKeyItem, formatBytes等)
  - 848行 → 435行
This commit is contained in:
logan committed 2026-05-28 21:34:59 +08:00
1 parent c6ef67adba
commit 7e26837c5f
2 files changed
+69 -461

No files matched your search

+23 -4
View File
@@ -1,4 +1,4 @@
import React, { useRef, useEffect, useCallback } from 'react';
import React, { useRef, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
import { EditorState, Compartment } from '@codemirror/state';
import type { Extension } from '@codemirror/state';
import { EditorView, keymap, lineNumbers, placeholder as cmPlaceholder } from '@codemirror/view';
@@ -259,7 +259,12 @@ export function formatSQL(input: string): string {
// SqlEditor component
// ---------------------------------------------------------------------------
const SqlEditor: React.FC<SqlEditorProps> = ({
export interface SqlEditorHandle {
/** Insert text at cursor position and move cursor after inserted text */
insertText: (text: string) => void;
}
const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(({
value,
onChange,
placeholder = 'Enter SQL query…',
@@ -268,7 +273,7 @@ const SqlEditor: React.FC<SqlEditorProps> = ({
readOnly = false,
onExecute,
schema,
}) => {
}, ref) => {
const containerRef = useRef<HTMLDivElement>(null);
const viewRef = useRef<EditorView | null>(null);
const langCompartmentRef = useRef(new Compartment());
@@ -276,6 +281,20 @@ const SqlEditor: React.FC<SqlEditorProps> = ({
const placeholderCompartmentRef = useRef(new Compartment());
const isExternalUpdateRef = useRef(false);
// Expose insertText to parent via ref
useImperativeHandle(ref, () => ({
insertText: (text: string) => {
const view = viewRef.current;
if (!view) return;
const pos = view.state.selection.main.head;
view.dispatch({
changes: { from: pos, insert: text },
selection: { anchor: pos + text.length },
});
view.focus();
},
}), []);
// Keep onChange in a stable ref so callbacks never go stale
const onChangeRef = useRef(onChange);
onChangeRef.current = onChange;
@@ -427,6 +446,6 @@ const SqlEditor: React.FC<SqlEditorProps> = ({
className="sql-editor-wrapper"
/>
);
};
});
export default SqlEditor;