使用React js完成web前端

chusql-web/frontend/src/components/layout/SchemaDialog.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { schemaSql } from '../../core/changeSql';
+import { columnTypeLabels, zhCN } from '../../i18n/zh-CN';
+import { useChangeStore } from '../../store/changeStore';
+import type { ColumnMeta, SchemaChange, TableMeta } from '../../types';
+import { Modal } from '../common/Modal';
+import styles from '../grid/grid.module.css';
+
+// 建表、删表与索引对话框：结构变更一律暂存，提交时才下发。
+export type SchemaAction = { kind: 'create' } | { kind: 'drop' | 'indexes'; table: TableMeta };
+const identifier = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+// 列类型的中文名，未知类型原样显示。
+function typeLabel(type: string): string {
+  return columnTypeLabels[type] ?? type;
+}
+
+export function SchemaDialog({ action, onClose, onChanged }: {
+  action: SchemaAction; onClose: () => void; onChanged: (message: string) => void;
+}) {
+  const [name, setName] = useState('');
+  const [columns, setColumns] = useState<Array<Pick<ColumnMeta, 'name' | 'type'>>>([{ name: 'id', type: 'int' }, { name: '', type: 'str' }]);
+  const [error, setError] = useState('');
+  const stageSchema = useChangeStore((state) => state.stageSchema);
+  const schemas = useChangeStore((state) => state.changes.schemas);
+  const target = action.kind === 'create' ? undefined : action.table;
+  const stagedIndex = new Map<string, boolean>();
+  for (const change of schemas.values()) {
+    if (change.table !== target?.name) continue;
+    if (change.op === 'createIndex') stagedIndex.set(change.column, true);
+    else if (change.op === 'dropIndex') stagedIndex.set(change.column, false);
+  }
+  const stage = (change: SchemaChange) => { stageSchema(change); onChanged(zhCN.stagedMessage(schemaSql(change))); };
+  const create = () => {
+    if (!identifier.test(name) || columns.some((column) => !identifier.test(column.name))) return setError(zhCN.invalidIdentifier);
+    if (new Set(columns.map((column) => column.name)).size !== columns.length) return setError(zhCN.duplicateColumns);
+    stage({ op: 'createTable', table: name, columns });
+    onClose();
+  };
+  const drop = () => {
+    if (!target) return;
+    stage({ op: 'dropTable', table: target.name });
+    onClose();
+  };
+  const changeIndex = (column: string, indexed: boolean) => {
+    if (!target) return;
+    stage(indexed
+      ? { op: 'dropIndex', table: target.name, column }
+      : { op: 'createIndex', table: target.name, column });
+  };
+  const title = action.kind === 'create' ? zhCN.newTableTitle : `${action.kind === 'drop' ? zhCN.dropTableTitle : zhCN.indexManagerTitle} · ${target?.name}`;
+  return <Modal title={title} onClose={onClose} footer={<><button onClick={onClose}>{action.kind === 'indexes' ? zhCN.done : zhCN.cancel}</button>{action.kind === 'create' && <button className={styles.primaryButton} onClick={create}>{zhCN.createTable}</button>}{action.kind === 'drop' && <button className={styles.dangerButton} onClick={drop}>{zhCN.dropTablePermanently}</button>}</>}>
+    {action.kind === 'create' ? <div className={styles.formFields}>
+      <label>{zhCN.tableName}<input autoFocus aria-label={zhCN.tableName} value={name} onChange={(event) => setName(event.target.value)} /></label>
+      <p>{zhCN.createTableHint}</p>
+      {columns.map((column, index) => <div className={styles.columnDefinition} key={index}><input aria-label={zhCN.columnName(index + 1)} value={column.name} disabled={index === 0} onChange={(event) => setColumns(columns.map((item, i) => i === index ? { ...item, name: event.target.value } : item))} /><select aria-label={zhCN.columnType(index + 1)} value={column.type} disabled={index === 0} onChange={(event) => setColumns(columns.map((item, i) => i === index ? { ...item, type: event.target.value as ColumnMeta['type'] } : item))}><option value="int">{zhCN.typeInt}</option><option value="str">{zhCN.typeStr}</option><option value="bool">{zhCN.typeBool}</option></select><button disabled={index === 0} aria-label={zhCN.removeColumn(index + 1)} onClick={() => setColumns(columns.filter((_, i) => i !== index))}>{zhCN.remove}</button></div>)}
+      <button onClick={() => setColumns([...columns, { name: '', type: 'str' }])}>{zhCN.addColumn}</button>
+    </div> : action.kind === 'drop' ? <>
+      <p>{zhCN.dropTableHint(target?.name ?? '', target?.rowCount ?? 0)}</p>
+    </> : <>
+      <p>{zhCN.indexHint}</p>
+      <ul className={styles.indexList}>{target?.columns.map((column) => {
+        const indexed = stagedIndex.get(column.name) ?? Boolean(column.indexed);
+        return <li key={column.name}><span>{column.name} <small>{typeLabel(column.type)}</small></span><span>{column.primaryKey || column.name === 'id' ? zhCN.builtinIndex : indexed ? zhCN.uniqueIndex : zhCN.noIndex}</span><button disabled={column.name === 'id' || (!indexed && column.type !== 'int')} onClick={() => changeIndex(column.name, indexed)}>{indexed ? zhCN.deleteIndex : zhCN.createIndex}</button></li>;
+      })}</ul>
+    </>}
+    {error && <p role="alert">{error}</p>}
+  </Modal>;
+}