修改逻辑缺陷、样式 bug

Author: chenJJ-88

biome.json

@@ -24,8 +24,7 @@
         "rules": {
             "recommended": true,
             "correctness": {
-                "useHookAtTopLevel": "off",
-                "useExhaustiveDependencies": "off"
+                "useHookAtTopLevel": "off"
             },
             "suspicious": {
                 "noExplicitAny": "off"

package.json

@@ -33,10 +33,8 @@
     },
     "devDependencies": {
         "@biomejs/biome": "^2.4.15",
-        "tsup": "^8.5.1"
-    },
-    "dependencies": {
-        "react-is": "^19.2.6"
+        "tsup": "^8.5.1",
+        "typescript": "~5.8.3"
     },
     "packageManager": "pnpm@9.15.4"
 }

packages/editable-table/package.json

@@ -55,12 +55,12 @@
         "react-dom": "^18.3.1",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.2",
+        "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
         "jsdom": "^25.0.1",
-        "typescript": "~6.0.2",
+        "typescript": "~5.8.3",
         "vitest": "^3.1.1"
     }
 }

packages/editable-table/src/components/EditableTable/EditableTable.css

@@ -283,6 +283,11 @@
     opacity: 0.75;
 }
 
+.et-btn:focus-visible {
+    outline: 2px solid var(--et-btn-primary-bg);
+    outline-offset: 2px;
+}
+
 .et-btn-link + .et-btn-link {
     margin-left: 4px;
 }
@@ -356,3 +361,40 @@
 .et-scroll-right .et-header-cell.et-fixed-right {
     box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.08);
 }
+
+/* ===== 暗色模式 ===== */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --et-border-color: #3a3a3a;
+        --et-header-bg: #1f1f1f;
+        --et-header-color: #e0e0e0;
+        --et-row-hover-bg: #2a2a2a;
+        --et-row-stripe-bg: #1a1a1a;
+        --et-error-color: #ff6b6b;
+        --et-btn-primary-bg: #4096ff;
+        --et-btn-primary-color: #fff;
+        --et-btn-default-bg: #1f1f1f;
+        --et-btn-default-color: #e0e0e0;
+        --et-btn-default-border: #3a3a3a;
+    }
+
+    .et-wrapper {
+        color: #e0e0e0;
+    }
+
+    .et-cell.et-fixed {
+        background: #141414;
+    }
+
+    .et-row:nth-child(even) .et-cell.et-fixed {
+        background: var(--et-row-stripe-bg);
+    }
+
+    .et-row:hover .et-cell.et-fixed {
+        background: var(--et-row-hover-bg);
+    }
+
+    .et-empty {
+        color: #666;
+    }
+}

packages/editable-table/src/components/EditableTable/index.tsx

@@ -193,15 +193,18 @@ function EditableTable<T extends object = Record<string, unknown>>(
                 const updatedRow = { ...currentRow, [dataIndex]: value };
                 const linkedResult = col.onFieldChange(value, updatedRow);
                 if (linkedResult instanceof Promise) {
+                    // 捕获当前行的 rowKey，避免异步期间行增删导致 rowIndex 错位
+                    const rowId = String(currentRow[rowKey]);
                     linkedResult.then((updates) => {
-                        if (updates) {
-                            setData((prev) => {
-                                const next = [...prev];
-                                next[rowIndex] = { ...next[rowIndex], ...updates };
-                                onChange?.(next);
-                                return next;
-                            });
-                        }
+                        if (!updates) return;
+                        setData((prev) => {
+                            const idx = prev.findIndex((r) => String(r[rowKey]) === rowId);
+                            if (idx === -1) return prev;
+                            const next = [...prev];
+                            next[idx] = { ...next[idx], ...updates };
+                            onChange?.(next);
+                            return next;
+                        });
                     });
                 } else if (linkedResult) {
                     setData((prev) => {
@@ -228,7 +231,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
                 }
             }
         },
-        [columns, onChange, validateTrigger],
+        [columns, onChange, validateTrigger, rowKey],
     );
 
     const handleSubmit = useCallback(() => {
@@ -277,19 +280,16 @@ function EditableTable<T extends object = Record<string, unknown>>(
 
     const handleCancelEdit = useCallback(
         (id: string) => {
+            const rowIndex = data.findIndex((r) => String(r[rowKey]) === id);
             const original = originalDataRef.current.get(id);
-            if (original) {
-                const rowIndex = data.findIndex((r) => String(r[rowKey]) === id);
-                if (rowIndex !== -1) {
-                    setData((prev) => {
-                        const n = [...prev];
-                        n[rowIndex] = original;
-                        return n;
-                    });
-                }
-                originalDataRef.current.delete(id);
+            if (original && rowIndex !== -1) {
+                setData((prev) => {
+                    const n = [...prev];
+                    n[rowIndex] = original;
+                    return n;
+                });
             }
-            const rowIndex = data.findIndex((r) => String(r[rowKey]) === id);
+            originalDataRef.current.delete(id);
             if (rowIndex !== -1) {
                 setErrors((prev) => {
                     const n: Record<string, string> = {};
@@ -326,7 +326,9 @@ function EditableTable<T extends object = Record<string, unknown>>(
             ? opsWidthProp != null
                 ? typeof opsWidthProp === 'number'
                     ? `${opsWidthProp}px`
-                    : opsWidthProp
+                    : /^\d+$/.test(opsWidthProp)
+                        ? `${opsWidthProp}px`
+                        : opsWidthProp
                 : '120px'
             : undefined;
 
@@ -343,7 +345,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
 
     // ===== 列固定偏移量 =====
     const fixedOffsets = useMemo(() => {
-        const offsets: { left?: number; right?: number }[] = new Array(columns.length).fill({});
+        const offsets: { left?: number; right?: number }[] = Array.from({ length: columns.length }, () => ({}));
         const widths = columns.map((col) => (typeof col.width === 'number' ? col.width : 150));
 
         // 从左往右累计 left fixed

packages/fast-editable-table/package.json

@@ -60,10 +60,10 @@
         "@formily/reactive": "^2.3.1",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
-        "typescript": "^5.6.0",
+        "typescript": "~5.8.3",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.2",
+        "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.6.1",
         "jsdom": "^25.0.1",
         "vitest": "^3.1.1"

packages/fast-editable-table/src/FormilyEditableTable.tsx

@@ -135,10 +135,11 @@ const FormilyEditableTableInner: React.FC<Omit<IFormilyEditableTableProps, 'name
     // 添加行
     const add = React.useCallback(async () => {
         if (validateBeforeAdd && form) {
+            const arrayPath = field.address.toString();
             try {
-                const arrayPath = field.address.toString();
                 await form.validate(`${arrayPath}.*`);
             } catch {
+                // 校验未通过，阻止添加；错误已由 Formily 渲染到各字段
                 return;
             }
         }

packages/fast-editable-table/src/FormilyEditableTableField.tsx

@@ -2,9 +2,12 @@ import { Field } from '@formily/react';
 import * as React from 'react';
 import type { IFormilyEditableTableFieldProps } from './types';
 
+const CHECKED_DISPLAY_NAMES = new Set(['Switch', 'InternalSwitch', 'Checkbox', 'InternalCheckbox']);
+
 function isCheckedType(v: any): boolean {
-    if (v == null || typeof v !== 'object') return false;
-    return !!v.__ANT_SWITCH || !!v.__ANT_CHECKBOX;
+    if (v == null || typeof v !== 'function') return false;
+    const name: string = v.displayName || v.name || '';
+    return CHECKED_DISPLAY_NAMES.has(name);
 }
 
 /**
@@ -42,7 +45,12 @@ export const FormilyEditableTableField: React.FC<IFormilyEditableTableFieldProps
                 }
 
                 if (children == null || !React.isValidElement(children)) {
-                    return <>{children}</>;
+                    return (
+                        <div className="fet-field" data-has-error={!!error || undefined}>
+                            {children}
+                            {error && <div className="fet-error">{error}</div>}
+                        </div>
+                    );
                 }
 
                 const injectProps: Record<string, any> = {

pnpm-workspace.yaml

@@ -2,8 +2,3 @@ packages:
   - 'packages/*'
 allowBuilds:
   esbuild: true
-overrides:
-  react: "^18.3.1"
-  react-dom: "^18.3.1"
-  "@types/react": "^18.3.0"
-  "@types/react-dom": "^18.3.0"