@jetlinks-web/components 3.2.1 → 3.2.2

package/es/EditTable/CellRender.js

@@ -1,3 +1,9 @@
+function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) {
+    return lhs;
+}
+else {
+    return rhsFn();
+} }
 function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
     const op = ops[i];
     const fn = ops[i + 1];
@@ -15,10 +21,15 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
     }
 } return value; }
 /* Analyzed bindings: {} */
-import { defineComponent, h, shallowRef, } from 'vue';
+import { defineComponent, h, shallowRef, markRaw } from 'vue';
 /**
- * CellRender - 优化的单元格渲染组件
- * 使用 shallowRef 和手动更新检查来避免不必要的重渲染
+ * CellRender - 高性能单元格渲染组件
+ *
+ * 优化点：
+ * 1. 使用 shallowRef 避免深度响应式
+ * 2. 缓存渲染结果，避免不必要的重渲染
+ * 3. 使用 markRaw 标记渲染结果，避免被 Vue 代理
+ * 4. 智能对比 record 的 key 变化
  */
 const __sfc_main__ = defineComponent({
     name: "CellRender",
@@ -35,43 +46,63 @@ const __sfc_main__ = defineComponent({
         index: {
             type: Number,
             required: true
+        },
+        // 可选：指定用于对比的 key 字段
+        rowKey: {
+            type: String,
+            default: 'id'
         }
     },
     setup(props) {
         // 使用 shallowRef 避免深度响应式
         const cachedResult = shallowRef(null);
-        const lastValue = shallowRef(undefined);
-        const lastRecordId = shallowRef(undefined);
-        // 手动检查是否需要重新渲染
-        const shouldUpdate = () => {
-            // 检查 value 是否变化
-            if (props.value !== lastValue.value) {
-                return true;
-            }
-            // 检查 record 的关键属性是否变化（假设有 id 或 key）
-            const currentRecordId = _optionalChain([(props.record), 'optionalAccess', _ => _.id]) || _optionalChain([(props.record), 'optionalAccess', _2 => _2.key]);
-            if (currentRecordId !== lastRecordId.value) {
-                return true;
+        // 缓存上次渲染的关键信息
+        let lastValue = Symbol('initial');
+        let lastRecordKey = Symbol('initial');
+        let lastIndex = -1;
+        // 获取 record 的唯一标识
+        const getRecordKey = (record) => {
+            return _nullishCoalesce(_nullishCoalesce(_optionalChain([record, 'optionalAccess', _ => _[props.rowKey]]), () => (_optionalChain([record, 'optionalAccess', _2 => _2.key]))), () => (_optionalChain([record, 'optionalAccess', _3 => _3.__dataIndex])));
+        };
+        // 检查是否需要重新渲染
+        const shouldRerender = () => {
+            const currentRecordKey = getRecordKey(props.record);
+            // 快速检查：index 和 key 都没变，value 也没变
+            if (lastIndex === props.index &&
+                lastRecordKey === currentRecordKey &&
+                lastValue === props.value) {
+                return false;
             }
-            return false;
+            return true;
         };
-        // 执行渲染函数
-        const render = () => {
-            if (shouldUpdate() || cachedResult.value === null) {
-                lastValue.value = props.value;
-                lastRecordId.value = _optionalChain([(props.record), 'optionalAccess', _3 => _3.id]) || _optionalChain([(props.record), 'optionalAccess', _4 => _4.key]);
-                try {
-                    cachedResult.value = props.renderFn(props.value, props.record, props.index);
-                }
-                catch (error) {
+        // 执行渲染
+        const doRender = () => {
+            if (!shouldRerender() && cachedResult.value !== null) {
+                return cachedResult.value;
+            }
+            // 更新缓存的对比值
+            lastValue = props.value;
+            lastRecordKey = getRecordKey(props.record);
+            lastIndex = props.index;
+            try {
+                const result = props.renderFn(props.value, props.record, props.index);
+                // 使用 markRaw 避免渲染结果被代理
+                cachedResult.value = result != null ? markRaw({ node: result }) : null;
+            }
+            catch (error) {
+                if (import.meta.env.DEV) {
                     console.error('[CellRender] Render error:', error);
-                    cachedResult.value = null;
                 }
+                cachedResult.value = null;
             }
             return cachedResult.value;
         };
         return () => {
-            return h('div', { class: 'cell-render-wrapper' }, [render()]);
+            const result = doRender();
+            return h('div', {
+                class: 'cell-render-wrapper',
+                style: { display: 'contents' } // 避免额外的 DOM 层级影响布局
+            }, _nullishCoalesce(_optionalChain([result, 'optionalAccess', _4 => _4.node]), () => (null)));
         };
     }
 });

package/es/EditTable/EditTable.js

@@ -454,21 +454,26 @@ const __sfc_main__ = _defineComponent({
                 ]),
                 _createElementVNode("div", _hoisted_2, [
                     _createElementVNode("div", _hoisted_3, [
-                        _createVNode(_unref(VirtualTable), _mergeProps(props, {
+                        _createVNode(_unref(VirtualTable), _mergeProps({
+                            ref_key: "virtualTableRef",
+                            ref: virtualTableRef
+                        }, props, {
                             "data-source": bodyDataSource.value,
                             columns: newColumns.value,
                             scroll: scroll.value,
                             pagination: false,
                             virtual: {
                                 itemHeight: props.cellHeight,
-                                overscan: 1,
+                                overscan: 5,
                                 threshold: props.height / props.cellHeight
                             }
                         }), {
-                            bodyCell: _withCtx(({ column, record }) => [
+                            bodyCell: _withCtx(({ column, record, index }) => [
                                 _renderSlot(_ctx.$slots, column.dataIndex, {
                                     column: column,
-                                    record: record
+                                    record: record,
+                                    index: record.__dataIndex,
+                                    visibleIndex: index
                                 })
                             ]),
                             _: 3 /* FORWARDED */

package/es/EditTable/FormItem.js

@@ -17,16 +17,15 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
 /* Analyzed bindings: {
   "onBeforeUnmount": "setup-const",
   "computed": "setup-const",
-  "reactive": "setup-const",
+  "shallowReactive": "setup-const",
   "watch": "setup-const",
   "provide": "setup-const",
   "toRaw": "setup-const",
-  "nextTick": "setup-const",
   "onMounted": "setup-const",
+  "shallowRef": "setup-const",
+  "ref": "setup-const",
   "get": "setup-maybe-ref",
   "isArray": "setup-maybe-ref",
-  "set": "setup-maybe-ref",
-  "cloneDeep": "setup-maybe-ref",
   "useProvideFormItemContext": "setup-maybe-ref",
   "Schema": "setup-maybe-ref",
   "useInjectError": "setup-maybe-ref",
@@ -39,27 +38,30 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "prefixCls": "setup-ref",
   "wrapSSR": "setup-maybe-ref",
   "hashId": "setup-maybe-ref",
+  "visible": "setup-ref",
   "context": "setup-maybe-ref",
   "globalErrorMessage": "setup-maybe-ref",
   "hideTimer": "setup-let",
-  "cachedFieldPath": "setup-let",
-  "cachedName": "setup-let",
+  "cachedSchema": "setup-let",
+  "cachedRulesHash": "setup-let",
   "fieldPath": "setup-ref",
   "eventKey": "setup-ref",
-  "fieldId": "setup-ref",
   "fieldName": "setup-ref",
   "rowIndex": "setup-ref",
   "fieldValue": "setup-ref",
-  "errorMap": "setup-reactive-const",
+  "errorState": "setup-maybe-ref",
   "popContainer": "setup-const",
   "removeTimer": "setup-const",
   "showErrorTip": "setup-const",
   "hideErrorTip": "setup-const",
   "getFieldRules": "setup-const",
+  "getSchema": "setup-const",
   "validateField": "setup-const",
   "validateRules": "setup-const",
   "onFieldBlur": "setup-const",
   "onFieldChange": "setup-const",
+  "currentEventKey": "setup-ref",
+  "fieldId": "setup-ref",
   "isRegistered": "setup-let",
   "registerField": "setup-const",
   "name": "props",
@@ -67,11 +69,11 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "rules": "props"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, unref as _unref, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, Fragment as _Fragment } from "vue";
+import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, Fragment as _Fragment, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { style: { "color": "#1d2129" } };
 const _hoisted_2 = ["id"];
-import { onBeforeUnmount, computed, reactive, watch, provide, toRaw, nextTick, onMounted } from "vue";
-import { get, isArray, } from 'lodash-es';
+import { onBeforeUnmount, computed, shallowReactive, watch, provide, toRaw, onMounted, shallowRef, ref } from "vue";
+import { get, isArray } from 'lodash-es';
 import { useProvideFormItemContext } from 'ant-design-vue/lib/form/FormItemContext';
 import Schema from 'async-validator';
 import { useInjectError, useInjectForm } from "./hooks";
@@ -93,34 +95,21 @@ const __sfc_main__ = _defineComponent({
         const emit = __emit;
         const prefixCls = computed(() => 'jetlinks-edit-table');
         const [wrapSSR, hashId] = genEditTableStyle(prefixCls);
+        const visible = ref(false);
         const context = useInjectForm();
         const globalErrorMessage = useInjectError();
         let hideTimer = null;
-        // 缓存字段路径，避免频繁的数组操作
-        let cachedFieldPath = null;
-        let cachedName = undefined;
-        // 计算字段路径
+        // 缓存 Schema 实例，避免重复创建
+        let cachedSchema = null;
+        let cachedRulesHash = null;
+        // 计算字段路径 - 简化逻辑
         const fieldPath = computed(() => {
             if (!props.name)
                 return [];
-            // 如果 name 没变，返回缓存
-            if (cachedName === props.name && cachedFieldPath) {
-                return cachedFieldPath;
-            }
-            cachedName = props.name;
-            cachedFieldPath = isArray(props.name) ? props.name : [props.name];
-            return cachedFieldPath;
+            return isArray(props.name) ? props.name : [props.name];
         });
-        // 事件key，用于标识字段 - 使用简单字符串拼接
+        // 事件key - 使用 shallowRef 优化
         const eventKey = computed(() => fieldPath.value.join('-'));
-        // 字段ID
-        const fieldId = computed(() => {
-            const path = fieldPath.value;
-            if (path.length === 0)
-                return '';
-            const [index, ...extra] = path;
-            return `${index}-${extra.join('.')}`;
-        });
         // 字段名（最后一个路径部分）
         const fieldName = computed(() => {
             const path = fieldPath.value;
@@ -131,7 +120,7 @@ const __sfc_main__ = _defineComponent({
             const path = fieldPath.value;
             return path.length > 0 ? Number(path[0]) : 0;
         });
-        // 字段值 - 优化：避免不必要的 get 调用
+        // 字段值 - 优化访问路径
         const fieldValue = computed(() => {
             if (!_optionalChain([context, 'access', _2 => _2.dataSource, 'optionalAccess', _3 => _3.value]) || !props.name)
                 return undefined;
@@ -149,35 +138,33 @@ const __sfc_main__ = _defineComponent({
             // 深层路径：使用 lodash.get
             return get(dataSource, props.name);
         });
-        // 错误状态
-        const errorMap = reactive({
+        // 错误状态 - 使用 shallowReactive 减少响应式开销
+        const errorState = shallowReactive({
             message: '',
             visible: false
         });
         // 向下提供错误状态
-        provide(TABLE_FORM_ITEM_ERROR, errorMap);
-        const popContainer = (e) => {
-            return e;
-        };
+        provide(TABLE_FORM_ITEM_ERROR, errorState);
+        const popContainer = (e) => e;
         const removeTimer = () => {
             if (hideTimer) {
-                window.clearTimeout(hideTimer);
+                clearTimeout(hideTimer);
                 hideTimer = null;
             }
         };
         const showErrorTip = (msg) => {
             removeTimer();
-            errorMap.message = msg;
-            errorMap.visible = true;
+            errorState.message = msg;
+            errorState.visible = true;
         };
         const hideErrorTip = () => {
-            errorMap.visible = false;
+            errorState.visible = false;
             removeTimer();
             hideTimer = setTimeout(() => {
-                errorMap.message = '';
+                errorState.message = '';
             }, 300);
         };
-        // 获取当前字段的校验规则
+        // 获取当前字段的校验规则 - 缓存规则
         const getFieldRules = () => {
             // 优先使用 props.rules
             if (props.rules && props.rules.length > 0) {
@@ -196,24 +183,41 @@ const __sfc_main__ = _defineComponent({
             }
             return [];
         };
+        // 获取或创建 Schema 实例
+        const getSchema = () => {
+            const rules = getFieldRules();
+            if (!rules || rules.length === 0) {
+                cachedSchema = null;
+                cachedRulesHash = null;
+                return null;
+            }
+            // 简单的规则哈希检查
+            const rulesHash = JSON.stringify(rules);
+            if (cachedRulesHash === rulesHash && cachedSchema) {
+                return cachedSchema;
+            }
+            // 创建新的 Schema
+            const descriptor = {
+                [fieldName.value]: rules
+            };
+            cachedSchema = new Schema(descriptor);
+            cachedRulesHash = rulesHash;
+            return cachedSchema;
+        };
         // 使用 async-validator 执行校验
         const validateField = () => {
             return new Promise((resolve, reject) => {
-                const rules = getFieldRules();
-                if (!rules || rules.length === 0) {
+                const schema = getSchema();
+                if (!schema) {
                     hideErrorTip();
                     _optionalChain([context, 'access', _6 => _6.removeFieldError, 'optionalCall', _7 => _7(eventKey.value)]);
                     resolve();
                     return;
                 }
-                const descriptor = {
-                    [fieldName.value]: rules
-                };
-                const validator = new Schema(descriptor);
                 const data = {
                     [fieldName.value]: toRaw(fieldValue.value)
                 };
-                validator.validate(data, { firstFields: true }, (errors) => {
+                schema.validate(data, { firstFields: true }, (errors) => {
                     if (errors && errors.length > 0) {
                         const errorMsg = errors[0].message || '校验失败';
                         showErrorTip(errorMsg);
@@ -244,9 +248,9 @@ const __sfc_main__ = _defineComponent({
                     }
                     else {
                         removeTimer();
-                        errorMap.message = _optionalChain([error, 'access', _18 => _18[0], 'optionalAccess', _19 => _19.message]) || errorMap.message;
-                        errorMap.visible = !!error.length;
-                        _optionalChain([context, 'access', _20 => _20.addFieldError, 'optionalCall', _21 => _21(eventKey.value, errorMap.message)]);
+                        errorState.message = _optionalChain([error, 'access', _18 => _18[0], 'optionalAccess', _19 => _19.message]) || errorState.message;
+                        errorState.visible = !!error.length;
+                        _optionalChain([context, 'access', _20 => _20.addFieldError, 'optionalCall', _21 => _21(eventKey.value, errorState.message)]);
                     }
                 });
                 return promise;
@@ -255,24 +259,36 @@ const __sfc_main__ = _defineComponent({
             return validateField();
         };
         const onFieldBlur = () => {
-            // 改为失焦时校验，减少实时校验的性能开销
+            // 失焦时校验，减少实时校验的性能开销
             validateRules();
         };
         const onFieldChange = () => {
-            // 只触发 change 事件，不进行校验
-            // validateRules() // 移到 onBlur
             emit('change');
         };
-        // 监听全局错误变化 - 精确监听单个字段，避免深度遍历
-        watch(() => _optionalChain([globalErrorMessage, 'optionalAccess', _22 => _22.value, 'optionalAccess', _23 => _23[eventKey.value]]), (errorMsg) => {
+        // 监听全局错误变化 - 使用精确的 key 监听
+        const currentEventKey = shallowRef('');
+        watch(() => eventKey.value, (newKey) => {
+            currentEventKey.value = newKey;
+        }, { immediate: true });
+        watch(() => {
+            const key = currentEventKey.value;
+            return key ? _optionalChain([globalErrorMessage, 'optionalAccess', _22 => _22.value, 'optionalAccess', _23 => _23[key]]) : undefined;
+        }, (errorMsg) => {
             if (errorMsg) {
                 showErrorTip(errorMsg);
             }
-            else {
+            else if (errorState.visible) {
                 hideErrorTip();
             }
         }, { immediate: true });
-        // 注册到 ant-design-vue form context
+        // 注册到 ant-design-vue form context - 延迟计算
+        const fieldId = computed(() => {
+            const path = fieldPath.value;
+            if (path.length === 0)
+                return '';
+            const [index, ...extra] = path;
+            return `${index}-${extra.join('.')}`;
+        });
         useProvideFormItemContext({
             id: fieldId,
             onFieldChange,
@@ -280,11 +296,10 @@ const __sfc_main__ = _defineComponent({
         }, computed(() => {
             return get(_optionalChain([context, 'access', _24 => _24.dataSource, 'optionalAccess', _25 => _25.value]), props.name);
         }));
-        // 注册字段到父组件 - 使用字段池复用，减少创建/销毁开销
+        // 注册字段到父组件 - 使用字段池复用
         let isRegistered = false;
         const registerField = () => {
             if (props.name && !isRegistered) {
-                // 使用字段池获取或创建字段信息
                 const fieldInfo = fieldPool.acquire(eventKey.value, {
                     fieldName: fieldName.value,
                     eventKey: eventKey.value,
@@ -296,20 +311,20 @@ const __sfc_main__ = _defineComponent({
                 isRegistered = true;
             }
         };
-        // 延迟注册，避免虚拟滚动时的同步阻塞
+        // 延迟注册，使用 queueMicrotask 替代 nextTick，性能更好
         onMounted(() => {
-            nextTick(() => {
-                registerField();
-            });
+            queueMicrotask(registerField);
         });
         onBeforeUnmount(() => {
-            hideErrorTip();
+            removeTimer();
             if (isRegistered) {
                 _optionalChain([context, 'access', _28 => _28.removeField, 'optionalCall', _29 => _29(eventKey.value)]);
-                // 释放字段到池中，而不是销毁
                 fieldPool.release(eventKey.value);
                 isRegistered = false;
             }
+            // 清理缓存
+            cachedSchema = null;
+            cachedRulesHash = null;
         });
         // 暴露方法
         __expose({
@@ -321,32 +336,31 @@ const __sfc_main__ = _defineComponent({
         return (_ctx, _cache) => {
             const _component_a_tooltip = _resolveComponent("a-tooltip");
             return (_openBlock(), _createElementBlock(_Fragment, null, [
-                (errorMap.visible)
+                (_unref(errorState).visible)
                     ? (_openBlock(), _createBlock(_component_a_tooltip, {
                         key: 0,
                         color: "#ffffff",
                         "get-popup-container": popContainer,
                         arrowPointAtCenter: true,
-                        open: ""
+                        open: visible.value,
+                        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => ((visible).value = $event)),
+                        onOpenChange: _cache[1] || (_cache[1] = (v) => visible.value = v)
                     }, {
                         title: _withCtx(() => [
-                            _createElementVNode("span", _hoisted_1, _toDisplayString(errorMap.message), 1 /* TEXT */)
+                            _createElementVNode("span", _hoisted_1, _toDisplayString(_unref(errorState).message), 1 /* TEXT */)
                         ]),
                         default: _withCtx(() => [
-                            (errorMap.visible)
-                                ? (_openBlock(), _createElementBlock("div", {
-                                    key: 0,
-                                    class: _normalizeClass(['jetlinks-table-form-error-target', _unref(hashId), 'hashId'])
-                                }, null, 2 /* CLASS */))
-                                : _createCommentVNode("v-if", true)
+                            _createElementVNode("div", {
+                                class: _normalizeClass(['jetlinks-table-form-error-target', _unref(hashId), 'hashId'])
+                            }, null, 2 /* CLASS */)
                         ]),
                         _: 1 /* STABLE */
-                    }))
+                    }, 8 /* PROPS */, ["open"]))
                     : _createCommentVNode("v-if", true),
                 _createElementVNode("div", {
                     id: eventKey.value,
                     style: { "position": "relative" },
-                    class: _normalizeClass({ 'jetlinks-edit-table-form-has-error': errorMap.message, [_unref(hashId)]: true })
+                    class: _normalizeClass({ 'jetlinks-edit-table-form-has-error': _unref(errorState).message, [_unref(hashId)]: true })
                 }, [
                     _renderSlot(_ctx.$slots, "default")
                 ], 10 /* CLASS, PROPS */, _hoisted_2)