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

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

@@ -0,0 +1,111 @@
+import { defineComponent, createVNode, isVNode } from 'vue';
+import { connect, mapProps } from '@formily/vue';
+import { NSpace, NRadio, NRadioGroup, NCheckbox, NCheckboxGroup } from 'naive-ui';
+import '../../../index.js';
+import { useComplexOptions } from '../../hooks/useComplexOptions.js';
+import '../../utils/index.js';
+import { useAutographOptions } from '../../hooks/useFormRenderOptions.js';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { assignUpdateValue, createVisitedSetter } from '../../utils/schema.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function createComponent(name, Wrapper, Item) {
+  return defineComponent({
+    name,
+    props: {
+      value: {
+        type: [String, Number, Object]
+      },
+      options: {
+        type: Array,
+        default: () => []
+      },
+      autograph: {
+        type: String
+      },
+      lazyRequest: {
+        type: Boolean,
+        default: false
+      },
+      requestCache: {
+        type: Boolean,
+        default: true
+      },
+      wordbook: {
+        type: Object
+      },
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      onChange: {}
+    },
+    emits: ["update:value"],
+    setup(props, {
+      emit
+    }) {
+      const {
+        field
+      } = useFormField();
+      const {
+        renderComplexOption,
+        checkValueRef,
+        valueRef
+      } = useComplexOptions(props, emit);
+      const {
+        labelKey,
+        valueKey,
+        options
+      } = useAutographOptions(props, valueRef);
+      const {
+        injectValueBindKey,
+        injectValueValidate
+      } = useCommonInjection();
+      injectValueValidate(valueRef);
+      const key = injectValueBindKey(valueRef);
+      return () => {
+        return createVNode(Wrapper, {
+          "key": key.value,
+          "value": valueRef.value,
+          "onUpdate:value": ($event) => valueRef.value = $event,
+          "onClick": createVisitedSetter(field)
+        }, {
+          default: () => [createVNode(NSpace, {
+            "vertical": props.vertical,
+            "vertical-space": props.vertical
+          }, {
+            default: () => {
+              var _a;
+              return [(_a = options.value) == null ? void 0 : _a.map((option) => {
+                let _slot;
+                return createVNode(Item, {
+                  "key": option[valueKey.value],
+                  "value": option[valueKey.value],
+                  "disabled": option.disabled
+                }, _isSlot(_slot = renderComplexOption({
+                  value: checkValueRef.value,
+                  option,
+                  valueKey: valueKey.value,
+                  labelKey: labelKey.value
+                })) ? _slot : {
+                  default: () => [_slot]
+                });
+              })];
+            }
+          })]
+        });
+      };
+    }
+  });
+}
+const RADIO = connect(createComponent("FormRadio", NRadioGroup, NRadio), mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+const CHECKBOX = connect(createComponent("FormCheckbox", NCheckboxGroup, NCheckbox), mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { CHECKBOX, RADIO };

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

@@ -1,8 +1,31 @@
-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;
+import { AnyObject, Func } from '../../../../../es/shared/types';
+import { Path } from '@formily/path';
+import { FieldItem, FormOptionItem } from '../../../../../es/components/form-render';
+declare function setSpan(uuid: string, address: Path | string, span?: number): void;
+declare function getSpan(uuid: string, address: Path | string): number;
+declare function deleteSpan(uuid: string, address: Path | string): void;
+declare function clearSpan(uuid: string): void;
+export declare function useComplexOptions(props: {
+    options: AnyObject[];
+    value: unknown;
+}, emit: Func): {
+    renderComplexOption: ({ value, option, valueKey, labelKey }: {
+        value: unknown;
+        option: FormOptionItem;
+        valueKey: string;
+        labelKey: string;
+    }) => any[];
+    valueRef: import("vue").WritableComputedRef<unknown>;
+    hasComplexOption: import("vue").ComputedRef<boolean>;
+    checkValueRef: import("vue").Ref<any>;
 };
 export declare function useComplexOptionsSpan(): {
-    calcFieldItemSpan: (span: number) => number;
+    getSpan: typeof getSpan;
+    setSpan: typeof setSpan;
+    deleteSpan: typeof deleteSpan;
+    clearSpan: typeof clearSpan;
 };
+export declare function useComplexOptionsKey(): {
+    combineComplexOptionKey: (fieldList: FieldItem[], values: AnyObject) => AnyObject;
+};
+export {};

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

@@ -1,8 +1,7 @@
-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 { reactive, defineComponent, inject, computed, watch, onUnmounted, onMounted, createVNode, withModifiers, ref } from 'vue';
+import { checkInSetupEnv, jsonParse } from '../../../../shared/utils/index.js';
 import { RecursionField } from '@formily/vue';
-import { sumBy, property, noop, isArray } from 'lodash-es';
+import { sumBy, property, noop, isObject, isArray, isString, cloneDeep, isNumber } from 'lodash-es';
 import '../../index.js';
 import { InjectionFormUUID, InjectionBusinessCollector } from '../constants/index.js';
 import { useFormField } from './useFormField.js';
@@ -10,25 +9,27 @@ import { useFieldListAdaptor } from './useFieldListAdaptor.js';
 import { createObjSchema } from '../utils/schema.js';
 
 const spanMap = reactive(/* @__PURE__ */ new Map());
-function setSpan(uuid, field, span = 0) {
+function setSpan(uuid, address, span = 0) {
   spanMap.set(uuid, spanMap.get(uuid) || {});
   const spanObj = spanMap.get(uuid);
-  Reflect.set(spanObj, field.address.toString(), span);
+  spanObj[address + ""] = span;
 }
-function getSpan(uuid, field) {
+function getSpan(uuid, address) {
   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}.`))
+    if (k === address + "" || k.startsWith(`${address}.`))
       return res + v;
     return res;
   }, 0);
 }
-function deleteSpan(uuid, field) {
+function deleteSpan(uuid, address) {
   const spanObj = spanMap.get(uuid);
-  spanObj && Reflect.deleteProperty(spanObj, field.address.toString());
+  spanObj && Reflect.deleteProperty(spanObj, address + "");
+}
+function clearSpan(uuid) {
+  spanMap.delete(uuid);
 }
 const ChildSchemaField = defineComponent({
   props: {
@@ -50,39 +51,42 @@ const ChildSchemaField = defineComponent({
     const {
       schemaAdaptor
     } = useFieldListAdaptor(collector);
-    function assignConfig(field2) {
-      return Object.assign({}, field2, {
-        decoratorProps: {
-          ...field2.decoratorProps,
+    function assignConfig(schema2) {
+      return Object.assign(schema2, {
+        ["x-decorator-props"]: {
+          ...schema2["x-decorator-props"],
           labelPlacement: "left",
-          showFeedback: false
+          showFeedback: false,
+          showLabel: !!schema2.title
         },
-        componentProps: {
-          ...field2.componentProps,
+        ["x-component-props"]: {
+          ...schema2["x-component-props"],
           size: "small"
         }
       });
     }
     const schema = computed(() => {
-      return createObjSchema(schemaAdaptor(props.fields.map(assignConfig)));
+      const schemaProperty = schemaAdaptor(props.fields);
+      Object.values(schemaProperty).forEach(assignConfig);
+      return createObjSchema(schemaProperty);
     });
     const column = computed(() => {
       return sumBy(Object.values(schema.value.properties || []), property("x-decorator-props.span"));
     });
+    const fieldKey = computed(() => `${field.value.address.toString()}.${props.name}`);
     watch(column, (_column) => {
-      setSpan(uuid, field.value, _column);
+      setSpan(uuid, fieldKey.value, _column);
     }, {
       immediate: true
     });
     function getRecursionField() {
       const formModel = field.value.form;
-      const address = `${field.value.address.toString()}.${props.name}`;
-      return formModel.query(address).take();
+      return formModel.query(fieldKey.value).take();
     }
     onUnmounted(() => {
       const recursionField = getRecursionField();
       recursionField && (recursionField.display = "none");
-      deleteSpan(uuid, field.value);
+      deleteSpan(uuid, fieldKey.value);
     });
     onMounted(() => {
       const recursionField = getRecursionField();
@@ -94,7 +98,7 @@ const ChildSchemaField = defineComponent({
       "onClick": withModifiers(noop, ["stop"]),
       "class": "form-render__labelField",
       "style": {
-        "--column": getSpan(uuid, field.value)
+        "--column": getSpan(uuid, fieldKey.value)
       }
     }, [createVNode(RecursionField, {
       "name": props.name,
@@ -102,36 +106,120 @@ const ChildSchemaField = defineComponent({
     }, 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 isComplexOption(options) {
+  return options.some((option) => {
+    return isArray(option.childrenFields) && option.childrenFields.length;
+  });
+}
+function useComplexOptions(props, emit) {
+  checkInSetupEnv();
+  const {
+    fieldKey
+  } = useFormField();
+  const hasComplexOption = computed(() => isComplexOption(props.options));
+  function dangerousTypeTransform(value) {
+    if (isNumber(value))
+      return value + "";
+    return value;
+  }
+  const checkValueRef = ref();
+  const valueRef = computed({
+    get() {
+      return dangerousTypeTransform(hasComplexOption.value ? checkValueRef.value : props.value);
+    },
+    set(value) {
+      if (!hasComplexOption.value)
+        return emit("update:value", value);
+      if (!isObject(props.value))
+        return;
+      props.value[fieldKey.value] = value;
+      checkValueRef.value = value;
+    }
+  });
+  watch(checkValueRef, () => {
+    if (!hasComplexOption.value || !isObject(props.value))
+      return;
+    props.value[fieldKey.value] = checkValueRef.value;
+  });
+  watch([() => props.value, hasComplexOption], ([v, _has]) => {
+    if (!_has)
+      return;
+    if (isArray(v)) {
+      checkValueRef.value = v;
+      return emit("update:value", {
+        [fieldKey.value]: v
+      });
+    }
+    if (isString(v)) {
+      if (v.startsWith("{")) {
+        const result = cloneDeep(jsonParse(v));
+        checkValueRef.value = result[fieldKey.value];
+        return emit("update:value", result);
+      }
+      checkValueRef.value = v;
+      return emit("update:value", {
+        [fieldKey.value]: v
+      });
+    }
+    if (!isObject(v)) {
+      checkValueRef.value = void 0;
+      emit("update:value", {});
+    } else {
+      checkValueRef.value = v[fieldKey.value];
+    }
+  }, {
+    immediate: true
+  });
+  function valueMatcher(value, option, valueKey = "value") {
+    if (isArray(value) ? !value.includes(option[valueKey]) : value !== option[valueKey])
+      return;
+    return isArray(option.childrenFields) && option.childrenFields.length;
   }
-  function render(value, option) {
-    return valueMatcher(value, option) ? createVNode(ChildSchemaField, {
+  function renderComplexOption({
+    value,
+    option,
+    valueKey = "value",
+    labelKey = "label"
+  }) {
+    return [option[labelKey], hasComplexOption.value && valueMatcher(value, option, valueKey) ? createVNode(ChildSchemaField, {
       "fields": option.childrenFields,
-      "name": option[unref(valueKey)]
-    }, null) : null;
+      "name": option[valueKey]
+    }, null) : null];
   }
   return {
-    render
+    renderComplexOption,
+    valueRef,
+    hasComplexOption,
+    checkValueRef
   };
 }
 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 {
+    getSpan,
+    setSpan,
+    deleteSpan,
+    clearSpan
+  };
+}
+function useComplexOptionsKey() {
+  function combineComplexOptionKey(fieldList, values) {
+    const fieldMap = fieldList.reduce((res, field) => {
+      res[field.val_key] = field;
+      return res;
+    }, {});
+    return Object.entries(values).reduce((res, [k, v]) => {
+      const field = fieldMap[k];
+      if (isArray(field.option) && isComplexOption(field.option)) {
+        res[k] = JSON.stringify(v);
+      } else {
+        res[k] = v;
+      }
+      return res;
+    }, {});
   }
   return {
-    calcFieldItemSpan
+    combineComplexOptionKey
   };
 }
 
-export { useComplexOptions, useComplexOptionsSpan };
+export { useComplexOptions, useComplexOptionsKey, useComplexOptionsSpan };

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

@@ -77,18 +77,15 @@ function useFieldListAdaptor(collector) {
     } else if (item.autograph) {
       bindAutoGraphProps(schema, item);
     }
-    bindCommonProps(schema, item);
+    const multiple = item.multi_select === "0";
+    Object.assign(schema["x-component-props"], {
+      multiple,
+      options: item.option,
+      maxTagCount: parseNumberFromMaybeString(item.multi_select_value),
+      ...pick(item, ["lazyRequest", "requestCache"])
+    });
+    multiple && (schema.type = "array");
     return schema;
-    function bindCommonProps(schema2, item2) {
-      const multiple = item2.multi_select === "0";
-      Object.assign(schema2["x-component-props"], {
-        multiple,
-        options: item2.option,
-        maxTagCount: parseNumberFromMaybeString(item2.multi_select_value),
-        ...pick(item2, ["lazyRequest", "requestCache"])
-      });
-      multiple && (schema2.type = "array");
-    }
   };
   const createRadioSchema = (item) => {
     const schema = createStandardSchema(item);

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

@@ -0,0 +1,29 @@
+import { AnyObject } from '../../../../../es/shared/types';
+import { Form, IFieldState } from '@formily/core';
+import { Ref } from 'vue';
+import { FieldItem, FormItemDepsCollector, FormRenderProps } from '../../../../../es/components/form-render';
+export declare function useFormExposeEvent({ formModel, formRenderRef, formUUID, getFieldList, formItemDepsCollector }: {
+    formModel: Form;
+    formRenderRef: Ref<HTMLElement | undefined>;
+    formUUID: string;
+    getFieldList: () => FieldItem[];
+    formItemDepsCollector: FormItemDepsCollector;
+}): {
+    validate(path?: string): Promise<void>;
+    getFormValues(needCombineExtendKey?: boolean, needCombineOptionKey?: boolean): any;
+    setFormValues(values: AnyObject, needSplitExtendKey?: boolean): void;
+    setFieldState(path: string, handler: (field: IFieldState) => void): void;
+    resetFields(path?: string): Promise<void>;
+    queryWidget(key: string): Promise<{
+        widgetElement: HTMLInputElement | null | undefined;
+        widgetElementList: HTMLInputElement[];
+        decoratorElement: HTMLElement | null | undefined;
+    } | null>;
+};
+export declare function useFormDomEvent({ props, formRenderRef, formModel }: {
+    props: FormRenderProps;
+    formRenderRef: Ref<HTMLElement | undefined>;
+    formModel: Form;
+}): {
+    onKeydown: (event: KeyboardEvent) => void;
+};

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

@@ -0,0 +1,140 @@
+import { arrayed, findAncestor } from '../../../../shared/utils/index.js';
+import { isField } from '@formily/core';
+import { Path } from '@formily/path';
+import { isObject } from '@vue/shared';
+import { isArray, isFunction } from 'lodash-es';
+import { nextTick } from 'vue';
+import '../../index.js';
+import { FormItemLineBarDepKeyPrepend, NESTED_FORM_ITEM_TYPE } from '../constants/index.js';
+import { useComplexOptionsKey } from './useComplexOptions.js';
+import { queryDecorator, queryInput, findNextWidget } from '../utils/dom.js';
+import { validateMessageParser, combineExtendKey, splitExtendKey } from '../utils/index.js';
+import { getParentLinebar } from '../utils/schema.js';
+
+function useFormExposeEvent({
+  formModel,
+  formRenderRef,
+  formUUID,
+  getFieldList,
+  formItemDepsCollector
+}) {
+  async function queryWidget(key, wrapperElement, fieldList) {
+    if (!formRenderRef.value)
+      return createResult();
+    const decoratorElement = queryDecorator(key, wrapperElement, formUUID);
+    if (decoratorElement)
+      return createResult(decoratorElement);
+    const parentLinebarKey = getParentLinebar(key, fieldList);
+    if (!parentLinebarKey)
+      return createResult();
+    formItemDepsCollector.trigger(FormItemLineBarDepKeyPrepend + parentLinebarKey, true);
+    await nextTick();
+    return createResult(queryDecorator(key, wrapperElement, formUUID));
+    function createResult(decoratorElement2) {
+      return { decoratorElement: decoratorElement2, ...queryInput(decoratorElement2) };
+    }
+  }
+  const { combineComplexOptionKey } = useComplexOptionsKey();
+  return {
+    validate(path = "*") {
+      return formModel.validate(path).catch((err) => {
+        return Promise.reject(Array.isArray(err) ? err.reduce(errInfoNormalize, []) : err);
+      });
+      function errInfoNormalize(result, error) {
+        if (!isObject(error))
+          return result;
+        let hasChildMessage = false;
+        if (isArray(error.messages)) {
+          error.messages.forEach((message) => {
+            if (!isObject(message))
+              return;
+            result.push(...arrayed(message).map(bindEleInfo));
+            hasChildMessage = true;
+          });
+        }
+        !hasChildMessage && result.push(bindEleInfo(error));
+        return result;
+      }
+      function bindEleInfo(info) {
+        if (info.decoratorElement)
+          return info;
+        const pattern = formModel.query(info.path);
+        const title = pattern.get("title");
+        const messages = info.messages.map(
+          (message) => errMessageNormalize(message, pattern.get("decoratorProps"))
+        );
+        const decoratorElement = queryDecorator(info.path, formRenderRef.value, formUUID);
+        return { ...info, messages, title, decoratorElement, ...queryInput(info.decoratorElement) };
+      }
+      function errMessageNormalize(message, decoratorProps) {
+        if (!decoratorProps || !decoratorProps.fieldItem)
+          return message;
+        return validateMessageParser(message, decoratorProps.fieldItem);
+      }
+    },
+    getFormValues(needCombineExtendKey = true, needCombineOptionKey = true) {
+      let result = formModel.getFormState().values;
+      if (needCombineExtendKey)
+        result = combineExtendKey(getFieldList(), result);
+      if (needCombineOptionKey)
+        result = combineComplexOptionKey(getFieldList(), result);
+      return result;
+    },
+    setFormValues(values, needSplitExtendKey = true) {
+      if (needSplitExtendKey) {
+        values = splitExtendKey(getFieldList(), values);
+      }
+      formModel.setFieldState("*", (state) => {
+        if (!isField(state))
+          return;
+        state.value = Path.getIn(values, state.path);
+      });
+    },
+    setFieldState(path, handler) {
+      formModel.setFieldState(path, handler);
+    },
+    resetFields(path = "*") {
+      return formModel.reset(path);
+    },
+    async queryWidget(key) {
+      return formRenderRef.value ? await queryWidget(key, formRenderRef.value, getFieldList()) : null;
+    }
+  };
+}
+function useFormDomEvent({
+  props,
+  formRenderRef,
+  formModel
+}) {
+  function onKeydown(event) {
+    var _a;
+    if (!props.enterToNextWidget || !formRenderRef.value)
+      return;
+    const ancestorFormItem = findAncestor(
+      event.target,
+      (ele) => ele.classList.contains("form-render__formItem")
+    );
+    if (!ancestorFormItem)
+      return;
+    const selector = `.form-render__formItem${NESTED_FORM_ITEM_TYPE.map((type) => `:not([widget-type=${type}])`).join(
+      ""
+    )}`;
+    const formItemElements = Array.from(formRenderRef.value.querySelectorAll(selector));
+    const formItemIndex = formItemElements.findIndex((ele) => ele.id === ancestorFormItem.id);
+    if (!~formItemIndex)
+      return;
+    const { widget, field } = findNextWidget(formItemElements, formItemIndex, event.target);
+    if (!widget)
+      return;
+    const formItemInstance = field && formModel.query(field).take();
+    if (formItemInstance && isFunction(props.enterToNextWidget)) {
+      props.enterToNextWidget((_a = formItemInstance.decoratorProps) == null ? void 0 : _a.fieldItem) ? focus() : onKeydown({ target: widget });
+    }
+    function focus() {
+      widget == null ? void 0 : widget.focus();
+    }
+  }
+  return { onKeydown };
+}
+
+export { useFormDomEvent, useFormExposeEvent };

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

@@ -28,7 +28,7 @@ export declare type IdCardParseInfo = Record<'sex' | 'birthday', string> & AgeCo
 export declare type FormRenderExpose = {
     formModel: Form;
     validate(path?: string): Promise<unknown>;
-    getFormValues(needCombineExtendKey?: boolean): AnyObject;
+    getFormValues(needCombineExtendKey?: boolean, needCombineOptionKey?: boolean): AnyObject;
     setFormValues(values: AnyObject, needSplitExtendKey?: boolean): AnyObject;
     setFieldState(path: string, setter: (field: Field) => void): void;
     resetFields(path?: string): void;
@@ -76,6 +76,8 @@ export declare type FormRenderProps = Partial<{
     lifeCycle: FormRenderLifeCycle;
     businessFormatter: FormBusinessFormatter;
     requestInstance: RequestInstance;
+    enterToNextWidget: boolean | ((fieldItem: FieldItem) => boolean | void);
+    lowCodeReactions: FormLowCodeReactions.Config[];
 }>;
 export declare type FormBusinessFormatter = (payload: {
     fieldKey: string;

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}.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}
+.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));grid-template-columns:repeat(var(--column),auto)!important;margin-left:16px}.form-render__labelField .n-form-item{display:inline-grid}.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 .form-render__formItem .n-checkbox,.form-render .form-render__formItem .n-radio{align-items:center}.form-render .form-render__formItem .n-radio-input{left:auto;right:auto}.form-render .form-render__formItem .n-checkbox-group>.n-space:not([vertical-space=true]),.form-render .form-render__formItem .n-radio-group>.n-space:not([vertical-space=true]){align-items:center!important}.form-render .form-render__formItem .n-checkbox__label{align-items:center;display:inline-flex}