cnhis-design-vue 3.1.38-beta.5 → 3.1.38-beta.7

package/es/components/form-config/index.d.ts

@@ -1002,6 +1002,7 @@ declare const FormConfig: SFCWithInstall<import("vue").DefineComponent<{
                 keyword?: string | undefined;
                 disabled?: boolean | undefined;
                 children?: any[] | undefined;
+                childrenFields?: any[] | undefined;
             }[] | undefined;
             multi_select?: import("..").FormCommonState | undefined;
             multi_select_value?: string | number | undefined;

package/es/components/form-config/src/FormConfig.vue.d.ts

@@ -1003,6 +1003,7 @@ declare const _default: import("vue").DefineComponent<{
                 keyword?: string | undefined;
                 disabled?: boolean | undefined;
                 children?: any[] | undefined;
+                childrenFields?: any[] | undefined;
             }[] | undefined;
             multi_select?: import("../..").FormCommonState | undefined;
             multi_select_value?: string | number | undefined;

package/es/components/form-config/src/components/FormConfigEdit.vue.d.ts

@@ -71,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
             keyword?: string | undefined;
             disabled?: boolean | undefined;
             children?: any[] | undefined;
+            childrenFields?: any[] | undefined;
         }[] | undefined;
         multi_select?: import("../../../../../es/components/form-render").FormCommonState | undefined;
         multi_select_value?: string | number | undefined;

package/es/components/form-render/src/components/renderer/checkbox.js

@@ -1,12 +1,15 @@
-import { defineComponent, createVNode } from 'vue';
-import { useVModel } from '@vueuse/core';
-import '../../../index.js';
-import '../../utils/index.js';
+import { defineComponent, computed, ref, watch, createVNode } from 'vue';
+import { jsonParse } from '../../../../../shared/utils/index.js';
 import { connect, mapProps } from '@formily/vue';
+import { isArray, isObject, isString } from 'lodash-es';
 import { NCheckboxGroup, NSpace, NCheckbox } from 'naive-ui';
+import '../../../index.js';
+import { useComplexOptions } from '../../hooks/useComplexOptions.js';
+import '../../utils/index.js';
 import { useAutographOptions } from '../../hooks/useFormRenderOptions.js';
 import { assignUpdateValue } from '../../utils/schema.js';
 import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const script = defineComponent({
   name: "FormCheckbox",
@@ -40,7 +43,58 @@ const script = defineComponent({
   setup(props, {
     emit
   }) {
-    const valueRef = useVModel(props, "value", emit);
+    const hasComplexOption = computed(() => {
+      return props.options.some((option) => {
+        return isArray(option.childrenFields) && option.childrenFields.length;
+      });
+    });
+    const {
+      fieldKey
+    } = useFormField();
+    const checkValue = ref([]);
+    const valueRef = computed({
+      get() {
+        return hasComplexOption.value ? checkValue.value : props.value;
+      },
+      set(value) {
+        if (!hasComplexOption.value)
+          return emit("update:value", value);
+        if (!isObject(props.value))
+          return;
+        props.value[fieldKey.value] = value;
+        checkValue.value = value;
+      }
+    });
+    watch(checkValue, () => {
+      if (!hasComplexOption.value || !isObject(props.value))
+        return;
+      props.value[fieldKey.value] = checkValue.value;
+    }, {
+      deep: true
+    });
+    watch([() => props.value, hasComplexOption], ([v, _has]) => {
+      if (!_has)
+        return;
+      if (isString(v)) {
+        const result = jsonParse(v);
+        checkValue.value = result[fieldKey.value];
+        return emit("update:value", result);
+      }
+      if (isArray(v)) {
+        checkValue.value = v;
+        return emit("update:value", {
+          [fieldKey.value]: v
+        });
+      }
+      if (!isObject(v)) {
+        checkValue.value = [];
+        emit("update:value", {});
+      } else {
+        checkValue.value = v[fieldKey.value];
+      }
+    }, {
+      immediate: true
+    });
     const {
       labelKey,
       valueKey,
@@ -50,26 +104,31 @@ const script = defineComponent({
       injectValueBindKey
     } = useCommonInjection();
     const key = injectValueBindKey(valueRef);
-    return () => createVNode(NCheckboxGroup, {
-      "key": key.value,
-      "value": valueRef.value,
-      "onUpdate:value": ($event) => valueRef.value = $event
-    }, {
-      default: () => [createVNode(NSpace, {
-        "vertical": props.vertical
+    const {
+      render: renderComplexOption
+    } = useComplexOptions(valueKey);
+    return () => {
+      return createVNode(NCheckboxGroup, {
+        "key": key.value,
+        "value": checkValue.value,
+        "onUpdate:value": ($event) => checkValue.value = $event
       }, {
-        default: () => {
-          var _a;
-          return [(_a = options.value) == null ? void 0 : _a.map((option) => createVNode(NCheckbox, {
-            "key": option[valueKey.value],
-            "value": option[valueKey.value],
-            "disabled": option.disabled
-          }, {
-            default: () => [option[labelKey.value]]
-          }))];
-        }
-      })]
-    });
+        default: () => [createVNode(NSpace, {
+          "vertical": props.vertical
+        }, {
+          default: () => {
+            var _a;
+            return [(_a = options.value) == null ? void 0 : _a.map((option) => createVNode(NCheckbox, {
+              "key": option[valueKey.value],
+              "value": option[valueKey.value],
+              "disabled": option.disabled
+            }, {
+              default: () => [hasComplexOption.value ? [option[labelKey.value], renderComplexOption(checkValue.value, option)] : option[labelKey.value]]
+            }))];
+          }
+        })]
+      });
+    };
   }
 });
 const CHECKBOX = connect(script, mapProps({

package/es/components/form-render/src/components/renderer/combination.d.ts

@@ -1,5 +1,5 @@
-import { FieldItem } from '../../../../../../es/components/form-render';
 import { PropType } from 'vue';
+import { FieldItem } from '../../../../../../es/components/form-render';
 export declare const COMBINATION: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;

package/es/components/form-render/src/components/renderer/combination.js

@@ -1,12 +1,13 @@
 import { defineComponent, ref, computed, watch, inject, createVNode } from 'vue';
 import { isObjectField } from '@formily/core';
+import { RecursionField, connect } from '@formily/vue';
+import { AddCircleOutline, RemoveCircle } from '@vicons/ionicons5';
 import { isNumber, isArray, range } from 'lodash-es';
-import '../../../index.js';
-import { useField, RecursionField, connect } from '@formily/vue';
 import { NButton, NIcon } from 'naive-ui';
+import '../../../index.js';
 import { InjectionBusinessCollector } from '../../constants/index.js';
 import '../../utils/index.js';
-import { AddCircleOutline, RemoveCircle } from '@vicons/ionicons5';
+import { useFormField } from '../../hooks/useFormField.js';
 import { useFieldListAdaptor } from '../../hooks/useFieldListAdaptor.js';
 import { createObjSchema } from '../../utils/schema.js';
 
@@ -36,7 +37,10 @@ const script = defineComponent({
   },
   emits: ["update:value"],
   setup(props) {
-    const field = useField();
+    const {
+      field,
+      fieldKey
+    } = useFormField();
     const currentGroupNum = ref(1);
     const maxGroupNum = computed(() => {
       if (!isNumber(props.maxGroupNum))
@@ -60,7 +64,7 @@ const script = defineComponent({
         currentGroupNum.value--;
         await field.value.remove(idx);
       } else {
-        const currentField = field.value.query(`${field.value.path.toString()}.${idx}`).take();
+        const currentField = field.value.query(`${fieldKey.value}.${idx}`).take();
         if (!currentField || !isObjectField(currentField))
           return;
         await currentField.reset();

package/es/components/form-render/src/components/renderer/formItem.d.ts

@@ -2,14 +2,22 @@ export declare const FORM_ITEM: import("vue").DefineComponent<{
     label: StringConstructor;
     propertyKey: StringConstructor;
     remark: StringConstructor;
-    span: NumberConstructor;
+    span: {
+        type: NumberConstructor;
+        default: number;
+    };
     annotation: {};
     fieldItem: {};
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: StringConstructor;
     propertyKey: StringConstructor;
     remark: StringConstructor;
-    span: NumberConstructor;
+    span: {
+        type: NumberConstructor;
+        default: number;
+    };
     annotation: {};
     fieldItem: {};
-}>>, {}>;
+}>>, {
+    span: number;
+}>;

package/es/components/form-render/src/components/renderer/formItem.js

@@ -1,22 +1,27 @@
 import { defineComponent, inject, computed, createVNode, mergeProps } from 'vue';
 import { arrayed, widthAppend } from '../../../../../shared/utils/index.js';
 import { isVoidField } from '@formily/core';
-import { useField, connect, mapProps } from '@formily/vue';
+import { connect, mapProps } from '@formily/vue';
 import { isString } from 'lodash-es';
 import { NFormItem } from 'naive-ui';
 import Annotation from '../../../../annotation-edit/index.js';
 import '../../../index.js';
 import TooltipMessage from '../tooltipMessage.vue.js';
 import { InjectionAnnotation, InjectionFormUUID } from '../../constants/index.js';
+import { useComplexOptionsSpan } from '../../hooks/useComplexOptions.js';
 import { dotEscape } from '../../utils/schema.js';
 import { validateMessageParser } from '../../utils/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const script = defineComponent({
   props: {
     label: String,
     propertyKey: String,
     remark: String,
-    span: Number,
+    span: {
+      type: Number,
+      default: 6
+    },
     annotation: {},
     fieldItem: {}
   },
@@ -47,10 +52,13 @@ const script = defineComponent({
       return annotation.value && props.annotation !== false;
     });
     const needRenderLabel = computed(() => props.label && props.label !== " ");
-    const field = useField();
+    const {
+      field,
+      fieldKey
+    } = useFormField();
     const uuid = inject(InjectionFormUUID);
     const id = computed(() => {
-      return dotEscape(`${uuid}-${field.value.path.toString()}`);
+      return dotEscape(`${uuid}-${fieldKey.value}`);
     });
     const marginRight = computed(() => {
       let result = 0;
@@ -74,22 +82,22 @@ const script = defineComponent({
         "message": props.remark
       }, null)]) : null, showAnnotation.value ? renderAnnotation() : null]) : null]) : null;
     }
-    return () => {
-      var _a;
-      return createVNode(NFormItem, mergeProps({
-        "class": "form-render__formItem",
-        "style": {
-          "--form-item-column": ((_a = props.span) != null ? _a : 3) * 2
-        }
-      }, {
-        id: id.value,
-        "widget-type": field.value.componentType,
-        "form-field": field.value.path.toString()
-      }), {
-        ...slots,
-        label: renderLabel
-      });
-    };
+    const {
+      calcFieldItemSpan
+    } = useComplexOptionsSpan();
+    return () => createVNode(NFormItem, mergeProps({
+      "class": "form-render__formItem",
+      "style": {
+        "--form-item-column": calcFieldItemSpan(props.span)
+      }
+    }, {
+      id: id.value,
+      "widget-type": field.value.componentType,
+      "form-field": fieldKey.value
+    }), {
+      ...slots,
+      label: renderLabel
+    });
   }
 });
 const FORM_ITEM = connect(script, mapProps({

package/es/components/form-render/src/hooks/useComplexOptions.d.ts

@@ -0,0 +1,8 @@
+import { MaybeRef } from '@vueuse/core';
+import { FormOptionItem } from '../../../../../es/components/form-render';
+export declare function useComplexOptions(valueKey: MaybeRef<string>): {
+    render: (value: unknown, option: FormOptionItem) => JSX.Element | null;
+};
+export declare function useComplexOptionsSpan(): {
+    calcFieldItemSpan: (span: number) => number;
+};

package/es/components/form-render/src/hooks/useComplexOptions.js

@@ -0,0 +1,137 @@
+import { reactive, defineComponent, inject, computed, watch, onUnmounted, onMounted, createVNode, withModifiers, unref } from 'vue';
+import { checkInSetupEnv } from '../../../../shared/utils/index.js';
+import { isField } from '@formily/core';
+import { RecursionField } from '@formily/vue';
+import { sumBy, property, noop, isArray } from 'lodash-es';
+import '../../index.js';
+import { InjectionFormUUID, InjectionBusinessCollector } from '../constants/index.js';
+import { useFormField } from './useFormField.js';
+import { useFieldListAdaptor } from './useFieldListAdaptor.js';
+import { createObjSchema } from '../utils/schema.js';
+
+const spanMap = reactive(/* @__PURE__ */ new Map());
+function setSpan(uuid, field, span = 0) {
+  spanMap.set(uuid, spanMap.get(uuid) || {});
+  const spanObj = spanMap.get(uuid);
+  Reflect.set(spanObj, field.address.toString(), span);
+}
+function getSpan(uuid, field) {
+  const spanObj = spanMap.get(uuid);
+  if (!spanObj)
+    return 0;
+  const fieldKey = field.address.toString();
+  return Object.entries(spanObj).reduce((res, [k, v]) => {
+    if (k === fieldKey || k.startsWith(`${fieldKey}.`))
+      return res + v;
+    return res;
+  }, 0);
+}
+function deleteSpan(uuid, field) {
+  const spanObj = spanMap.get(uuid);
+  spanObj && Reflect.deleteProperty(spanObj, field.address.toString());
+}
+const ChildSchemaField = defineComponent({
+  props: {
+    fields: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const uuid = inject(InjectionFormUUID);
+    const {
+      field
+    } = useFormField();
+    const collector = inject(InjectionBusinessCollector);
+    const {
+      schemaAdaptor
+    } = useFieldListAdaptor(collector);
+    function assignConfig(field2) {
+      return Object.assign({}, field2, {
+        decoratorProps: {
+          ...field2.decoratorProps,
+          labelPlacement: "left",
+          showFeedback: false
+        },
+        componentProps: {
+          ...field2.componentProps,
+          size: "small"
+        }
+      });
+    }
+    const schema = computed(() => {
+      return createObjSchema(schemaAdaptor(props.fields.map(assignConfig)));
+    });
+    const column = computed(() => {
+      return sumBy(Object.values(schema.value.properties || []), property("x-decorator-props.span"));
+    });
+    watch(column, (_column) => {
+      setSpan(uuid, field.value, _column);
+    }, {
+      immediate: true
+    });
+    function getRecursionField() {
+      const formModel = field.value.form;
+      const address = `${field.value.address.toString()}.${props.name}`;
+      return formModel.query(address).take();
+    }
+    onUnmounted(() => {
+      const recursionField = getRecursionField();
+      recursionField && (recursionField.display = "none");
+      deleteSpan(uuid, field.value);
+    });
+    onMounted(() => {
+      const recursionField = getRecursionField();
+      if (!recursionField)
+        return;
+      recursionField.display = "visible";
+    });
+    return () => createVNode("section", {
+      "onClick": withModifiers(noop, ["stop"]),
+      "class": "form-render__labelField",
+      "style": {
+        "--column": getSpan(uuid, field.value)
+      }
+    }, [createVNode(RecursionField, {
+      "name": props.name,
+      "schema": schema.value
+    }, null)]);
+  }
+});
+function useComplexOptions(valueKey) {
+  function valueMatcher(value, option) {
+    if (isArray(value))
+      return value.includes(option[unref(valueKey)]);
+    return value === option[unref(valueKey)] && isArray(option.childrenFields) && option.childrenFields.length;
+  }
+  function render(value, option) {
+    return valueMatcher(value, option) ? createVNode(ChildSchemaField, {
+      "fields": option.childrenFields,
+      "name": option[unref(valueKey)]
+    }, null) : null;
+  }
+  return {
+    render
+  };
+}
+function useComplexOptionsSpan() {
+  checkInSetupEnv();
+  const uuid = inject(InjectionFormUUID);
+  const {
+    field
+  } = useFormField();
+  function calcFieldItemSpan(span) {
+    if (!isField(field.value))
+      return span;
+    return getSpan(uuid, field.value) + span;
+  }
+  return {
+    calcFieldItemSpan
+  };
+}
+
+export { useComplexOptions, useComplexOptionsSpan };

package/es/components/form-render/src/hooks/useFieldListAdaptor.js

@@ -49,7 +49,7 @@ function useFieldListAdaptor(collector) {
         "x-decorator": "FORM_ITEM",
         "x-decorator-props": {
           fieldItem: deepOmit(item, ["reactions"]),
-          span: item.elem_width,
+          span: (item.elem_width || 3) * 2,
           showLabel: item.hide_title !== "1",
           remark: item.remark,
           propertyKey: item.val_key,
@@ -255,7 +255,7 @@ function useFieldListAdaptor(collector) {
       name: fieldKeyEscape(fieldList),
       title: item.alias || item.name,
       "x-component": "INPUT_GROUP",
-      "x-component-props": { span: item.elem_width },
+      "x-component-props": { span: (item.elem_width || 3) * 2 },
       properties: schemaAdaptor(fieldList)
     };
   };

package/es/components/form-render/src/hooks/useFormField.d.ts

@@ -1,5 +1,6 @@
-export declare function useFormField(): {
-    field: import("vue").Ref<import("@formily/core").GeneralField>;
+import { GeneralField } from '@formily/core';
+export declare function useFormField<T extends GeneralField>(): {
+    field: import("vue").Ref<T>;
     title: import("vue").ComputedRef<any>;
     fieldKey: import("vue").ComputedRef<string>;
 };

package/es/components/form-render/src/hooks/useFormRenderOptions.js

@@ -1,7 +1,7 @@
-import { jsonParse } from '../../../../shared/utils/index.js';
+import { checkInSetupEnv, jsonParse } from '../../../../shared/utils/index.js';
 import { useDebounceFn } from '@vueuse/core';
 import { isString, isEqual, omit, isFunction } from 'lodash-es';
-import { computed, inject, getCurrentInstance, ref, watch } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import '../../index.js';
 import { InjectionAsyncQueue, InjectionFormItemDepsCollector } from '../constants/index.js';
 import { createUrlConfigParams, formRenderLog, optionMatcherWithKeyword } from '../utils/index.js';
@@ -115,8 +115,7 @@ function useRecommendOptions(props, options, emit, valueKey) {
   };
 }
 function useUrlConfigOptions(props, valueRef) {
-  if (!getCurrentInstance())
-    throw new Error("can't use this hook out of setup environment");
+  checkInSetupEnv();
   const asyncQueue = inject(InjectionAsyncQueue);
   const labelKey = computed(() => {
     var _a, _b;
@@ -174,8 +173,7 @@ function useUrlConfigOptions(props, valueRef) {
   return { labelKey, valueKey, options, fetchData };
 }
 function useAutographOptions(props, valueRef) {
-  if (!getCurrentInstance())
-    throw new Error("can't use this hook out of setup environment");
+  checkInSetupEnv();
   const asyncQueue = inject(InjectionAsyncQueue);
   const labelKey = computed(() => {
     var _a, _b, _c;

package/es/components/form-render/src/types/fieldItem.d.ts

@@ -22,12 +22,13 @@ export declare type ValidateItem = Partial<{
     regular_error_tip: string;
     [key: string]: any;
 }>;
-interface OptionItem {
+export interface FormOptionItem {
     text: string;
     value: any;
     keyword?: string;
     disabled?: boolean;
-    children?: OptionItem[];
+    children?: FormOptionItem[];
+    childrenFields?: FieldItem[];
 }
 interface FormRendererPayload {
     clearable: boolean;
@@ -139,7 +140,7 @@ export declare type FieldItem = {
     hide_title: FormCommonState;
     placeholder: string;
     validate: ValidateItem;
-    option: OptionItem[];
+    option: FormOptionItem[];
     /**
      * 是否开启多选('0'表示开启, 值是反的)
      */

package/es/components/form-render/src/utils/schema.d.ts

@@ -20,64 +20,5 @@ export declare function assignValueBindKey(props: AnyObject, field: GeneralField
 export declare function assignClearBindVisited(props: AnyObject, field: GeneralField): {
     [x: string]: any;
 };
-export declare function createObjSchema(properties: Record<string, ISchema>): {
-    type: string;
-    properties: Record<string, import("@formily/json-schema/esm/types").Stringify<{
-        [key: symbol]: any;
-        [key: `x-${string}`]: any;
-        [key: `x-${number}`]: any;
-        version?: string | undefined;
-        name?: import("@formily/json-schema/esm/types").SchemaKey | undefined;
-        title?: any;
-        description?: any;
-        default?: any;
-        readOnly?: boolean | undefined;
-        writeOnly?: boolean | undefined;
-        type?: import("@formily/json-schema/esm/types").SchemaTypes | undefined;
-        enum?: import("@formily/json-schema/esm/types").SchemaEnum<any> | undefined;
-        const?: any;
-        multipleOf?: number | undefined;
-        maximum?: number | undefined;
-        exclusiveMaximum?: number | undefined;
-        minimum?: number | undefined;
-        exclusiveMinimum?: number | undefined;
-        maxLength?: number | undefined;
-        minLength?: number | undefined;
-        pattern?: string | RegExp | undefined;
-        maxItems?: number | undefined;
-        minItems?: number | undefined;
-        uniqueItems?: boolean | undefined;
-        maxProperties?: number | undefined;
-        minProperties?: number | undefined;
-        required?: string | boolean | string[] | undefined;
-        format?: string | undefined;
-        $ref?: string | undefined;
-        $namespace?: string | undefined;
-        definitions?: import("@formily/json-schema/esm/types").SchemaProperties<any, any, any, any, any, any, any, any> | undefined;
-        properties?: import("@formily/json-schema/esm/types").SchemaProperties<any, any, any, any, any, any, any, any> | undefined;
-        items?: import("@formily/json-schema/esm/types").SchemaItems<any, any, any, any, any, any, any, any> | undefined;
-        additionalItems?: import("@formily/json-schema/esm/types").Stringify<any> | undefined;
-        patternProperties?: import("@formily/json-schema/esm/types").SchemaProperties<any, any, any, any, any, any, any, any> | undefined;
-        additionalProperties?: import("@formily/json-schema/esm/types").Stringify<any> | undefined;
-        "x-value"?: any;
-        "x-index"?: number | undefined;
-        "x-pattern"?: any;
-        "x-display"?: any;
-        "x-validator"?: any;
-        "x-decorator"?: any;
-        "x-decorator-props"?: any;
-        "x-component"?: any;
-        "x-component-props"?: any;
-        "x-reactions"?: import("@formily/json-schema/esm/types").SchemaReactions<any> | undefined;
-        "x-content"?: any;
-        "x-data"?: any;
-        "x-visible"?: boolean | undefined;
-        "x-hidden"?: boolean | undefined;
-        "x-disabled"?: boolean | undefined;
-        "x-editable"?: boolean | undefined;
-        "x-read-only"?: boolean | undefined;
-        "x-read-pretty"?: boolean | undefined;
-        "x-compile-omitted"?: string[] | undefined;
-    }>>;
-};
+export declare function createObjSchema(properties: Record<string, ISchema>): ISchema;
 export declare function createVisitedSetter(field: Ref<GeneralField>, callback?: Func): (...args: unknown[]) => any;

package/es/components/form-render/style/index.css

@@ -1 +1 @@
-.annotation-edit{align-items:center;color:#0067ee;cursor:pointer;display:inline-flex;font-size:16px;user-select:none}.annotation-edit.is-active{color:#ff9828}.annotation-edit__icon{align-items:center;display:inline-flex}.annotation-edit__textarea{min-width:200px}.annotation-edit__footer{align-items:center;display:flex;flex-wrap:nowrap;gap:8px;justify-content:space-between;opacity:.5}.annotation-edit__footer>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.annotation-edit__footer>div:first-of-type{min-width:30%}.recommend-search__menu{min-height:100px}.recommend-search__menuRecommendList{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.recommend-search__menuRecommendList .n-tag{cursor:pointer}.recommend-search__recentRecommend{margin-bottom:8px}.recommend-search__recentRecommend>header{align-items:center;color:rgba(0,0,0,.4);display:flex;justify-content:space-between}.recommend-search__recentRecommend>header .n-icon:hover{color:rgba(0,0,0,.6);cursor:pointer}.recommend-search__commonRecommend{margin-bottom:8px}.recommend-search__commonRecommend>header{align-items:center;color:rgba(0,0,0,.4);display:flex;justify-content:space-between}.recommend-search__commonRecommend>header .n-icon:hover{color:rgba(0,0,0,.6);cursor:pointer}.recommend-search__option{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:32px;justify-content:space-between;padding:0 8px}.recommend-search__optionText{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recommend-search__option.is-active{color:var(--n-color)!important}.recommend-search__option.is-active .n-icon{font-size:20px}.recommend-search__option:hover{background:rgba(0,0,0,.03)}.recommend-search__optionContainer{margin:-8px -10px}.recommend-search__empty{align-items:center;color:rgba(0,0,0,.3);display:flex;height:100px;justify-content:center}.search-cascader__menuWrapper{display:flex;flex-wrap:nowrap;margin:-8px -14px}.search-cascader__input input{cursor:pointer!important}.search-cascader__option{align-items:center;border-radius:4px;box-sizing:border-box;display:flex;height:32px;justify-content:space-between;padding:0 8px 0 16px;width:100%}.search-cascader__option--active{background:#f8f8f8}.search-cascader__option:hover{background:#f5f5f5;cursor:pointer}.search-cascader__optionWrapper{background:#fff;height:256px;overflow-x:auto;width:calc(var(--menu-width)*1px)}.search-cascader__optionWrapper:not(:last-of-type){border:solid #e5e5e5;border-width:0 1px 0 0}.search-cascader__optionText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.search-cascader__option svg{color:#bfbfbf;flex-shrink:0;font-size:12px;width:20px}.search-cascader__option svg.rotate{animation:rotate 1s linear infinite}.search-cascader__emptyWrapper{align-items:center;background:#fff;box-sizing:border-box;display:flex;height:300px;justify-content:center;padding:16px;width:100%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.form-render__wrapper{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr));max-height:var(--form-height);overflow-y:auto;position:relative}.form-render__formItem{grid-column:span min(var(--column),var(--form-item-column)) /span min(var(--column),var(--form-item-column))}.form-render__formItem .n-date-picker,.form-render__formItem .n-input-number{width:100%}.form-render__formItemLabel{align-items:center;display:inline-flex;justify-content:space-between;position:relative}.form-render__formItemLabel--operation{align-items:center;display:flex;gap:2px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.form-render__formItemLabel--tooltip{font-size:0;line-height:1;width:16px}.form-render__formItemLabel--text{white-space:nowrap}.form-render__formItem .n-form-item-label{display:inline-flex}.form-render__formItem .n-form-item-label [annotation-hover-show=true]{visibility:hidden}.form-render__formItem .n-form-item-label:hover [annotation-hover-show=true]{visibility:visible}.form-render__linebar{grid-column:span min(var(--column),var(--column)) /span min(var(--column),var(--column))}.form-render__linebarHeader{align-items:center;background:#f2f2f2;border-radius:4px;cursor:pointer;display:flex;font-size:14px;font-weight:500;height:32px;justify-content:space-between;margin-bottom:8px;padding:0 16px}.form-render__linebarHeader>svg{color:rgba(33,33,33,.4);width:14px}.form-render__linebarHeaderTitle{align-items:center;display:flex;gap:4px;vertical-align:middle}.form-render__linebarHeaderTitle svg{height:16px;transform:translateY(-1px)}.form-render__linebarItem{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr))}.form-render__linebreaks{grid-column:span min(var(--column),var(--form-item-column)) /span min(var(--column),var(--form-item-column))}.form-render__inputGroup{align-items:flex-start;display:flex;grid-column:span min(var(--column),var(--column)) /span min(var(--column),var(--column))}.form-render__inputGroup>div{flex:1}.form-render__inputGroup>div:not(:last-of-type) .n-base-selection__border,.form-render__inputGroup>div:not(:last-of-type) .n-input__border{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.form-render__inputGroup>div:last-of-type .n-base-selection__border,.form-render__inputGroup>div:last-of-type .n-input__border{border-bottom-left-radius:0;border-top-left-radius:0}.form-render__inputGroup .n-form-item--left-labelled:not(:first-of-type)>label{display:none}.form-render__combination{width:100%}.form-render__combinationHeader{display:flex;gap:12px}.form-render__combinationHeader>h3{font-size:16px;font-weight:700;margin:0;padding:0}.form-render__combinationHeader .n-button__icon{font-size:14px;margin:0 2px 0 0}.form-render__combinationHeaderText{font-size:16px;font-weight:500}.form-render__combinationClose{font-size:16px;height:14px;position:absolute;right:5px;top:5px;width:14px}.form-render__combinationContentJson{position:relative}.form-render__combinationContent{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr));position:relative}.form-render__complex{width:100%}.form-render__complexContent--grid{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr))}.form-render__complexContent--flex{display:flex!important;gap:0 8px}.form-render__selectMenu .n-scrollbar-rail__scrollbar{display:none!important}.form-render__selectMenu .n-virtual-list::-webkit-scrollbar,.form-render__selectMenu .n-virtual-list::-webkit-scrollbar-thumb{display:unset!important;height:6px;width:6px}.form-render__selectMenu .n-virtual-list::-webkit-scrollbar-thumb{background:#bfbfbf;border-radius:4px}.form-render__selectMenu .v-vl-items{min-width:100%;width:max-content}.form-render__selectOption .n-base-select-option__content{overflow:visible!important;text-overflow:unset!important;word-break:keep-all!important}
+.annotation-edit{align-items:center;color:#0067ee;cursor:pointer;display:inline-flex;font-size:16px;user-select:none}.annotation-edit.is-active{color:#ff9828}.annotation-edit__icon{align-items:center;display:inline-flex}.annotation-edit__textarea{min-width:200px}.annotation-edit__footer{align-items:center;display:flex;flex-wrap:nowrap;gap:8px;justify-content:space-between;opacity:.5}.annotation-edit__footer>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.annotation-edit__footer>div:first-of-type{min-width:30%}.recommend-search__menu{min-height:100px}.recommend-search__menuRecommendList{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.recommend-search__menuRecommendList .n-tag{cursor:pointer}.recommend-search__recentRecommend{margin-bottom:8px}.recommend-search__recentRecommend>header{align-items:center;color:rgba(0,0,0,.4);display:flex;justify-content:space-between}.recommend-search__recentRecommend>header .n-icon:hover{color:rgba(0,0,0,.6);cursor:pointer}.recommend-search__commonRecommend{margin-bottom:8px}.recommend-search__commonRecommend>header{align-items:center;color:rgba(0,0,0,.4);display:flex;justify-content:space-between}.recommend-search__commonRecommend>header .n-icon:hover{color:rgba(0,0,0,.6);cursor:pointer}.recommend-search__option{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:32px;justify-content:space-between;padding:0 8px}.recommend-search__optionText{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recommend-search__option.is-active{color:var(--n-color)!important}.recommend-search__option.is-active .n-icon{font-size:20px}.recommend-search__option:hover{background:rgba(0,0,0,.03)}.recommend-search__optionContainer{margin:-8px -10px}.recommend-search__empty{align-items:center;color:rgba(0,0,0,.3);display:flex;height:100px;justify-content:center}.search-cascader__menuWrapper{display:flex;flex-wrap:nowrap;margin:-8px -14px}.search-cascader__input input{cursor:pointer!important}.search-cascader__option{align-items:center;border-radius:4px;box-sizing:border-box;display:flex;height:32px;justify-content:space-between;padding:0 8px 0 16px;width:100%}.search-cascader__option--active{background:#f8f8f8}.search-cascader__option:hover{background:#f5f5f5;cursor:pointer}.search-cascader__optionWrapper{background:#fff;height:256px;overflow-x:auto;width:calc(var(--menu-width)*1px)}.search-cascader__optionWrapper:not(:last-of-type){border:solid #e5e5e5;border-width:0 1px 0 0}.search-cascader__optionText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.search-cascader__option svg{color:#bfbfbf;flex-shrink:0;font-size:12px;width:20px}.search-cascader__option svg.rotate{animation:rotate 1s linear infinite}.search-cascader__emptyWrapper{align-items:center;background:#fff;box-sizing:border-box;display:flex;height:300px;justify-content:center;padding:16px;width:100%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.form-render__wrapper{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr));max-height:var(--form-height);overflow-y:auto;position:relative}.form-render__formItem{grid-column:span min(var(--column),var(--form-item-column)) /span min(var(--column),var(--form-item-column))}.form-render__formItem .n-date-picker,.form-render__formItem .n-input-number{width:100%}.form-render__formItemLabel{align-items:center;display:inline-flex;justify-content:space-between;position:relative}.form-render__formItemLabel--operation{align-items:center;display:flex;gap:2px;position:absolute;right:0;top:50%;transform:translateY(-50%)}.form-render__formItemLabel--tooltip{font-size:0;line-height:1;width:16px}.form-render__formItemLabel--text{white-space:nowrap}.form-render__formItem .n-form-item-label{display:inline-flex}.form-render__formItem .n-form-item-label [annotation-hover-show=true]{visibility:hidden}.form-render__formItem .n-form-item-label:hover [annotation-hover-show=true]{visibility:visible}.form-render__linebar{grid-column:span min(var(--column),var(--column)) /span min(var(--column),var(--column))}.form-render__linebarHeader{align-items:center;background:#f2f2f2;border-radius:4px;cursor:pointer;display:flex;font-size:14px;font-weight:500;height:32px;justify-content:space-between;margin-bottom:8px;padding:0 16px}.form-render__linebarHeader>svg{color:rgba(33,33,33,.4);width:14px}.form-render__linebarHeaderTitle{align-items:center;display:flex;gap:4px;vertical-align:middle}.form-render__linebarHeaderTitle svg{height:16px;transform:translateY(-1px)}.form-render__linebarItem{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr))}.form-render__linebreaks{grid-column:span min(var(--column),var(--form-item-column)) /span min(var(--column),var(--form-item-column))}.form-render__inputGroup{align-items:flex-start;display:flex;grid-column:span min(var(--column),var(--column)) /span min(var(--column),var(--column))}.form-render__inputGroup>div{flex:1}.form-render__inputGroup>div:not(:last-of-type) .n-base-selection__border,.form-render__inputGroup>div:not(:last-of-type) .n-input__border{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.form-render__inputGroup>div:last-of-type .n-base-selection__border,.form-render__inputGroup>div:last-of-type .n-input__border{border-bottom-left-radius:0;border-top-left-radius:0}.form-render__inputGroup .n-form-item--left-labelled:not(:first-of-type)>label{display:none}.form-render__combination{width:100%}.form-render__combinationHeader{display:flex;gap:12px}.form-render__combinationHeader>h3{font-size:16px;font-weight:700;margin:0;padding:0}.form-render__combinationHeader .n-button__icon{font-size:14px;margin:0 2px 0 0}.form-render__combinationHeaderText{font-size:16px;font-weight:500}.form-render__combinationClose{font-size:16px;height:14px;position:absolute;right:5px;top:5px;width:14px}.form-render__combinationContentJson{position:relative}.form-render__combinationContent{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr));position:relative}.form-render__complex{width:100%}.form-render__complexContent--grid{align-items:start;display:grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr))}.form-render__complexContent--flex{display:flex!important;gap:0 8px}.form-render__selectMenu .n-scrollbar-rail__scrollbar{display:none!important}.form-render__selectMenu .n-virtual-list::-webkit-scrollbar,.form-render__selectMenu .n-virtual-list::-webkit-scrollbar-thumb{display:unset!important;height:6px;width:6px}.form-render__selectMenu .n-virtual-list::-webkit-scrollbar-thumb{background:#bfbfbf;border-radius:4px}.form-render__selectMenu .v-vl-items{min-width:100%;width:max-content}.form-render__selectOption .n-base-select-option__content{overflow:visible!important;text-overflow:unset!important;word-break:keep-all!important}.form-render__labelField{align-items:start;display:grid!important;display:inline-grid!important;gap:0 16px;grid-template-columns:repeat(var(--column),minmax(0,1fr));margin-left:16px}.form-render__labelField label.n-form-item-label.n-form-item-label--left-mark{align-items:center}.form-render__labelField .n-checkbox[aria-checked=false] .n-checkbox-box{background-color:transparent}.form-render__labelField .n-checkbox[aria-checked=false] .n-checkbox-icon .check-icon{opacity:0}.form-render__labelField .n-checkbox[aria-checked=false] .n-checkbox-box__border{border:var(--n-border)}.form-render .n-form-item--left-labelled.form-render__formItem .n-checkbox{align-items:center}.form-render .n-form-item--left-labelled.form-render__formItem .n-checkbox-group>.n-space{align-items:center!important;flex-wrap:nowrap!important}.form-render .n-form-item--left-labelled.form-render__formItem .n-checkbox__label{align-items:center;display:inline-flex}