cnhis-design-vue 3.1.14-beta.1 → 3.1.14-beta.10

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

@@ -1,9 +1,9 @@
-import { defineComponent, inject, computed, ref, createVNode } from 'vue';
+import { defineComponent, inject, computed, createVNode } from 'vue';
 import { isVoidField } from '@formily/core';
 import { connect, mapProps } from '@formily/vue';
-import { FileTrayFull, FileTray } from '@vicons/ionicons5';
 import { isBoolean } from 'lodash-es';
-import { NFormItem, NPopover, NIcon, NInput } from 'naive-ui';
+import { NFormItem } from 'naive-ui';
+import AnnotationEdit from '../../../../../packages/annotation-edit';
 import { InjectionAnnotation } from '../../../../../packages/form-render/src/constants';
 
 const script = defineComponent({
@@ -27,96 +27,12 @@ const script = defineComponent({
         };
       }
     });
-    function renderTextarea() {
-      return createVNode(NInput, {
-        "type": "textarea",
-        "value": annotationContent.value,
-        "onUpdate:value": ($event) => annotationContent.value = $event
-      }, null);
-    }
-    const __showPopper = ref(false);
-    const showPopper = computed({
-      get() {
-        return __showPopper.value;
-      },
-      async set(value) {
-        __showPopper.value = value;
-        if (!value && isEdit.value) {
-          await new Promise((resolve) => setTimeout(resolve, 200));
-          isEdit.value = false;
-        }
-      }
-    });
-    const isEdit = ref(false);
-    let clickTimer;
-    function iconClick() {
-      clearTimeout(clickTimer);
-      if (showPopper.value && isEdit.value) {
-        showPopper.value = false;
-        return;
-      }
-      clickTimer = setTimeout(() => {
-        if (!annotationContent.value) {
-          isEdit.value = showPopper.value = true;
-        }
-      }, 200);
-    }
-    function iconDbClick() {
-      clearTimeout(clickTimer);
-      if (!annotationContent.value)
-        return;
-      showPopper.value = true;
-      isEdit.value = true;
-    }
-    function iconMouseenter() {
-      if (!annotationContent.value)
-        return;
-      showPopper.value = true;
-    }
-    function iconMouseleave() {
-      if (!annotationContent.value || isEdit.value)
-        return;
-      showPopper.value = false;
-    }
     function renderAnnotation() {
-      return createVNode("section", {
-        "class": ["form-render__formItemLabel--annotation", {
-          "is-active": !!annotationContent.value
-        }],
-        "style": {
-          "--icon-right": "-5"
-        },
-        "form-item-hover-show": !annotationContent.value && !isEdit.value
-      }, [createVNode(NPopover, {
-        "style": {
-          maxWidth: "200px",
-          wordBreak: "break-all"
-        },
-        "show": showPopper.value,
-        "onUpdate:show": ($event) => showPopper.value = $event,
-        "trigger": "manual",
-        "duration": 100
-      }, {
-        default: renderDefault,
-        trigger: renderTrigger
-      })]);
-      function renderText() {
-        return createVNode("span", null, [annotationContent.value]);
-      }
-      function renderDefault() {
-        return createVNode("div", null, [isEdit.value ? renderTextarea() : renderText()]);
-      }
-      function renderTrigger() {
-        return createVNode("div", {
-          "class": "form-render__formItemLabel--icon",
-          "onMouseleave": iconMouseleave,
-          "onMouseenter": iconMouseenter,
-          "onDblclick": iconDbClick,
-          "onClick": iconClick
-        }, [createVNode(NIcon, {
-          "component": annotationContent.value ? FileTrayFull : FileTray
-        }, null)]);
-      }
+      return createVNode(AnnotationEdit, {
+        "class": "form-render__formItemLabel--annotation",
+        "modelValue": annotationContent.value,
+        "onUpdate:modelValue": ($event) => annotationContent.value = $event
+      }, null);
     }
     const showAnnotation = computed(() => {
       return annotation.value && (!isBoolean(props.annotation) || props.annotation);

package/es/packages/form-render/src/components/renderer/input.js

@@ -1,5 +1,5 @@
-import { defineComponent, computed, createVNode, Fragment } from 'vue';
-import { createSlot, assignUpdateValue } from '../../utils/index.js';
+import { defineComponent, createVNode } from 'vue';
+import { createInputSlot, assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NInput } from 'naive-ui';
 
@@ -13,21 +13,10 @@ const script = defineComponent({
       type: String
     }
   },
-  setup(props, {
-    attrs
-  }) {
-    const _slots = computed(() => {
-      const res = {};
-      if (props.prefix) {
-        res.prefix = () => createVNode(Fragment, null, [createSlot(props.prefix, props).default()]);
-      }
-      if (props.suffix) {
-        res.suffix = () => createVNode(Fragment, null, [createSlot(props.suffix, props).default()]);
-      }
-      return res;
-    });
+  setup(props) {
+    const _slots = createInputSlot(props);
     return () => {
-      return createVNode(NInput, attrs, _slots.value);
+      return createVNode(NInput, null, _slots.value);
     };
   }
 });

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

@@ -1,5 +1,17 @@
 export declare const INPUT_NUMBER: import("vue").DefineComponent<{
     onChange: {};
+    prefix: {
+        type: StringConstructor;
+    };
+    suffix: {
+        type: StringConstructor;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onChange: {};
+    prefix: {
+        type: StringConstructor;
+    };
+    suffix: {
+        type: StringConstructor;
+    };
 }>>, {}>;

package/es/packages/form-render/src/components/renderer/inputNumber.js

@@ -1,15 +1,22 @@
 import { defineComponent, createVNode } from 'vue';
-import { assignUpdateValue } from '../../utils/index.js';
+import { createInputSlot, assignUpdateValue } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
 import { NInputNumber } from 'naive-ui';
 
 const script = defineComponent({
   props: {
-    onChange: {}
+    onChange: {},
+    prefix: {
+      type: String
+    },
+    suffix: {
+      type: String
+    }
   },
-  setup(_) {
+  setup(props) {
+    const _slots = createInputSlot(props);
     return () => {
-      return createVNode(NInputNumber, null, null);
+      return createVNode(NInputNumber, null, _slots.value);
     };
   }
 });

package/es/packages/form-render/src/components/renderer/select.js

@@ -2,7 +2,7 @@ import { defineComponent, ref, inject, computed, watch, nextTick, createVNode }
 import { isField } from '@formily/core';
 import { cloneDeep } from 'lodash-es';
 import { InjectAsyncQueue, InjectionFormItemDepsCollector, InjectionChangeContextCollector } from '../../constants/index.js';
-import { assignUpdateValue, formRenderLog, generateUrlParams } from '../../utils/index.js';
+import { assignUpdateValue, formRenderLog, traverseDependKey } from '../../utils/index.js';
 import { isObject } from '@vueuse/core';
 import { connect, mapProps } from '@formily/vue';
 import { NSelect } from 'naive-ui';
@@ -65,9 +65,16 @@ const script = defineComponent({
         remoteOptions.value = null;
       }
       function createParams(config2, field2) {
+        const _params = {};
+        traverseDependKey(config2.dependKey, (dependKey, valueKey2) => {
+          const _field = field2.query(dependKey).take();
+          if (isField(_field)) {
+            _params[valueKey2] = _field.value;
+          }
+        });
         return {
           ...config2,
-          params: Object.assign({}, config2.params, generateUrlParams(field2, config2.dependKey))
+          params: Object.assign({}, config2.params, _params)
         };
       }
     }

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

@@ -1,2 +1,15 @@
-export declare const TEXT: (props: any) => JSX.Element;
-export declare const BUTTON: (props: any) => JSX.Element;
+export declare const TEXT: {
+    (props: any): JSX.Element;
+    props: {
+        content: {};
+        fieldItem: {};
+    };
+};
+export declare const BUTTON: {
+    (props: any): JSX.Element;
+    props: {
+        onClick: {};
+        fieldItem: {};
+        content: {};
+    };
+};

package/es/packages/form-render/src/components/renderer/simpleComponent.js

@@ -1,12 +1,9 @@
-import { createVNode, mergeProps, isVNode } from 'vue';
+import { createVNode } from 'vue';
 import { connect, mapProps } from '@formily/vue';
 import { isFunction } from 'lodash-es';
 import { NButton } from 'naive-ui';
 import { createSlot } from '../../../../../packages/form-render/src/utils';
 
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 function createPropFor(props) {
   return (property) => {
     var _a;
@@ -14,9 +11,12 @@ function createPropFor(props) {
   };
 }
 const textScript = (props) => {
-  var _a, _b, _c;
-  const propFor = createPropFor(props);
-  return createVNode("div", (_a = propFor("componentProps")) != null ? _a : {}, [(_c = (_b = createSlot(props.content, props)).default) == null ? void 0 : _c.call(_b)]);
+  var _a, _b;
+  return createVNode("div", null, [(_b = (_a = createSlot(props.content, props)).default) == null ? void 0 : _b.call(_a)]);
+};
+textScript.props = {
+  content: {},
+  fieldItem: {}
 };
 const TEXT = connect(textScript, mapProps((props) => {
   var _a;
@@ -26,19 +26,20 @@ const TEXT = connect(textScript, mapProps((props) => {
   };
 }));
 const buttonScript = (props) => {
-  var _a;
-  let _slot;
   const propFor = createPropFor(props);
   function onClick() {
-    var _a2;
-    const cb = propFor("onClick") || ((_a2 = propFor("componentProps")) == null ? void 0 : _a2.onClick);
+    var _a;
+    const cb = propFor("onClick") || ((_a = propFor("componentProps")) == null ? void 0 : _a.onClick);
     return () => isFunction(cb) && cb(props.fieldItem);
   }
-  return createVNode(NButton, mergeProps((_a = propFor("componentProps")) != null ? _a : {}, {
+  return createVNode(NButton, {
     "onClick": onClick()
-  }), _isSlot(_slot = createSlot(props.content, props)) ? _slot : {
-    default: () => [_slot]
-  });
+  }, createSlot(props.content, props));
+};
+buttonScript.props = {
+  onClick: {},
+  fieldItem: {},
+  content: {}
 };
 const BUTTON = connect(buttonScript, mapProps((props) => {
   var _a;

package/es/packages/form-render/src/hooks/useAnchor.d.ts

@@ -3,7 +3,7 @@ import { ISchema } from '@formily/json-schema/esm/types';
 import { FormItemDepsCollector } from '../../../../../es/packages/form-render';
 export declare function useAnchor(props: Readonly<AnyObject>, collector: FormItemDepsCollector): {
     currentAnchor: import("vue").WritableComputedRef<string>;
-    onScroll: () => Promise<void>;
+    onScroll: () => void;
     formHeight: import("vue").ComputedRef<any>;
     anchorIdList: import("vue").Ref<{
         name: string;

package/es/packages/form-render/src/hooks/useAnchor.js

@@ -3,7 +3,7 @@ import { useDebounceFn } from '@vueuse/core';
 import { isNumber } from 'lodash-es';
 import { ref, computed, watch, nextTick } from 'vue';
 import { FormItemLineBarDepKeyPrepend } from '../../../../packages/form-render/src/constants';
-import { traverseSchema, createLinebarId } from '../../../../packages/form-render/src/utils';
+import { createLinebarId, traverseSchema } from '../../../../packages/form-render/src/utils';
 
 function useAnchor(props, collector) {
   const __currentAnchor = ref("");
@@ -44,13 +44,13 @@ function useAnchor(props, collector) {
       scrollLock = false;
     }
   }
-  const onScroll = useDebounceFn(async function() {
+  const onScroll = useDebounceFn(function() {
     var _a;
     if (scrollLock || !scrollbarRef.value)
       return;
     const { scrollTop, clientHeight } = scrollbarRef.value;
     const result = anchorIdList.value.find((anchor) => {
-      const node = scrollbarRef.value.querySelector(`#${anchor.name}`);
+      const node = scrollbarRef.value.querySelector(`#${createLinebarId(anchor.name)}`);
       if (!node)
         return;
       return node.offsetTop >= scrollTop || node.offsetTop < scrollTop && node.clientHeight + node.offsetTop > scrollTop + clientHeight;

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

@@ -1,7 +1,7 @@
 import { isObject } from '@vueuse/core';
-import { isArray, pick } from 'lodash-es';
+import { pick } from 'lodash-es';
 import { useFormValidator, useTypeNormalize } from '../../../../packages/form-render';
-import { createLinebarId, arrayed, transformDateFormat } from '../utils/index.js';
+import { fieldKeyEscape, arrayed, createLinebarId, transformDateFormat } from '../utils/index.js';
 
 function useFieldListAdaptor(collector, uuid) {
   const { createValidatorSchema } = useFormValidator();
@@ -108,7 +108,9 @@ function useFieldListAdaptor(collector, uuid) {
     Object.assign(schema["x-component-props"], {
       precision: decimal_length || (validate == null ? void 0 : validate.decimal_length),
       max: validate == null ? void 0 : validate.max_value,
-      min: validate == null ? void 0 : validate.min_value
+      min: validate == null ? void 0 : validate.min_value,
+      prefix: item.prefix,
+      suffix: item.suffix
     });
     return schema;
   };
@@ -174,13 +176,15 @@ function useFieldListAdaptor(collector, uuid) {
     return creator(item);
   };
   const createWidgetCombinationSchema = (item) => {
+    if (!item.suffixConfig)
+      return createWidgetSchema(item);
     const suffixList = arrayed(item.suffixConfig);
     const fieldList = [{ ...item, suffixConfig: void 0 }].concat(suffixList.map((suffix) => {
       return { ...suffix, is_show: item.is_show, alias: " " };
     }));
     return {
       type: "void",
-      name: fieldList.map((f) => f.val_key).join("-"),
+      name: fieldKeyEscape(fieldList),
       title: item.alias || item.name,
       "x-component": "INPUT_GROUP",
       "x-component-props": { span: item.elem_width },
@@ -211,8 +215,8 @@ function useFieldListAdaptor(collector, uuid) {
       return schema;
     }
     function createFieldName(fieldItem) {
-      if (isArray(fieldItem.suffixConfig)) {
-        return [fieldItem.val_key, fieldItem.suffixConfig.map((f) => f.val_key)].join("-");
+      if (fieldItem.suffixConfig) {
+        return fieldKeyEscape([fieldItem, ...arrayed(fieldItem.suffixConfig)]);
       }
       return fieldItem.val_key;
     }

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

@@ -64,11 +64,12 @@ export declare type FieldItem = {
     urlConfig: Partial<{
         url: string;
         method: 'post' | 'get' | 'put' | 'patch' | 'delete';
-        dependKey: string | string[];
+        dependKey: string | string[] | Record<string, string>;
         params: AnyObject;
         nameKey: string;
         valueKey: string;
     }>;
+    suffixConfig: FieldItem[] | FieldItem;
     fieldType: 'string' | 'object' | 'array' | 'number' | 'void' | 'boolean' | 'datetime';
     content: string | FormRenderer | Record<string, FormRenderer>;
     properties: FieldItem[];

package/es/packages/form-render/src/utils/index.d.ts

@@ -1,7 +1,7 @@
 import { AnyObject, ArrayAble } from '../../../../../es/src/types';
 import { ISchema } from '@formily/json-schema/esm/types';
 import { GeneralField } from '@formily/core';
-import { InjectionKey, VNode } from 'vue';
+import { FunctionalComponent, InjectionKey, VNode } from 'vue';
 import { AgeContext, FieldItem, IdCardParseInfo } from '../types';
 export declare function formRenderLog(message: string, type?: keyof Console): void;
 export declare function arrayed<T>(maybeArray: T): T extends Array<any> ? T : [T];
@@ -14,7 +14,12 @@ export declare function isMobile(mobile: string): boolean;
 export declare function parseBirthday(birthday: string): AgeContext;
 export declare function parseIdCard(idCardNo: string): IdCardParseInfo;
 export declare function injectOrProvide<T>(key: InjectionKey<T>, creator: () => T): T;
-export declare function generateUrlParams(field: GeneralField, dependKeys?: string | string[]): AnyObject;
+export declare function traverseDependKey(dependKeys: ArrayAble<string> | Record<string, string> | ArrayAble<{
+    paramName: string;
+    paramValue: string;
+}>, handler: {
+    (dependKey: string, valueKey: string): void;
+}): void;
 export declare function traverseSchema(schema: ISchema, handler: (_s: ISchema) => void): void;
 export declare function uuidGenerator(): string;
 export declare function createSlot(renderer: unknown, props: any): Record<string, () => ArrayAble<VNode>> | {
@@ -27,3 +32,5 @@ export declare function queryInput(decoratorElement?: HTMLElement | null): {
 };
 export declare function getParentLinebar(key: string, fieldList: FieldItem[]): string | null;
 export declare function createLinebarId(id: string): string;
+export declare function fieldKeyEscape(fieldList: FieldItem[]): string;
+export declare function createInputSlot(props: AnyObject): import("vue").ComputedRef<Record<string, FunctionalComponent<{}, {}>>>;

package/es/packages/form-render/src/utils/index.js

@@ -1,11 +1,11 @@
-import { isObject, isFunction } from 'lodash-es';
+import { inject, provide, computed, createVNode, Fragment } from 'vue';
+import { isArray, isObject, isString, isFunction } from 'lodash-es';
 import { FIELD_SEX_VALUE } from '../constants/index.js';
 import { isField } from '@formily/core';
 import differenceInDays from '../../../../node_modules/date-fns/esm/differenceInDays/index.js';
 import differenceInMonths from '../../../../node_modules/date-fns/esm/differenceInMonths/index.js';
 import differenceInYears from '../../../../node_modules/date-fns/esm/differenceInYears/index.js';
 import '../../../../node_modules/date-fns/esm/parse/_lib/parsers/index.js';
-import { inject, provide } from 'vue';
 
 function formRenderLog(message, type = "log") {
   console[type](`[FormRender]: ${message}`);
@@ -16,7 +16,9 @@ function arrayed(maybeArray) {
   return [maybeArray];
 }
 function assignUpdateValue(props, field) {
-  const _props = { ...props };
+  const _props = {
+    ...props
+  };
   if (isField(field)) {
     Object.assign(_props, {
       "onUpdate:value"(value) {
@@ -69,17 +71,29 @@ function injectOrProvide(key, creator) {
   }
   return injected;
 }
-function generateUrlParams(field, dependKeys) {
-  const result = {};
-  if (dependKeys) {
-    arrayed(dependKeys).forEach((dependKey) => {
-      const _field = field.query(dependKey).take();
-      if (isField(_field)) {
-        result[dependKey] = _field.value;
-      }
-    });
+function traverseDependKey(dependKeys, handler) {
+  if (!dependKeys)
+    return;
+  Object.entries(createDependKeyMap()).forEach(([dependKey, valueKey]) => {
+    handler(dependKey, valueKey);
+  });
+  function createDependKeyMap() {
+    let result = {};
+    if (isArray(dependKeys)) {
+      dependKeys.forEach((k) => {
+        if (isObject(k)) {
+          result[k.paramName] = k.paramValue;
+        } else {
+          result[k] = k;
+        }
+      });
+    } else if (isObject(dependKeys)) {
+      result = dependKeys;
+    } else if (isString(dependKeys)) {
+      result[dependKeys] = dependKeys;
+    }
+    return result;
   }
-  return result;
 }
 function traverseSchema(schema, handler) {
   handler(schema);
@@ -139,5 +153,20 @@ function getParentLinebar(key, fieldList) {
 function createLinebarId(id) {
   return `id-${id}`;
 }
+function fieldKeyEscape(fieldList) {
+  return fieldList.map((f) => f.val_key).join("-").replace(/[.]/g, "_");
+}
+function createInputSlot(props) {
+  return computed(() => {
+    const res = {};
+    if (props.prefix) {
+      res.prefix = () => createVNode(Fragment, null, [createSlot(props.prefix, props).default()]);
+    }
+    if (props.suffix) {
+      res.suffix = () => createVNode(Fragment, null, [createSlot(props.suffix, props).default()]);
+    }
+    return res;
+  });
+}
 
-export { arrayed, assignUpdateValue, createLinebarId, createSlot, formRenderLog, generateUrlParams, getParentLinebar, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, queryDecorator, queryInput, transformDateFormat, traverseSchema, uuidGenerator };
+export { arrayed, assignUpdateValue, createInputSlot, createLinebarId, createSlot, fieldKeyEscape, formRenderLog, getParentLinebar, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, queryDecorator, queryInput, transformDateFormat, traverseDependKey, traverseSchema, uuidGenerator };

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

@@ -1,3 +1,18 @@
+.annotation-edit {
+  cursor: pointer;
+  color: #0067ee;
+  font-size: 16px;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+}
+.annotation-edit.is-active {
+  color: rgba(255, 152, 40);
+}
+.annotation-edit__icon {
+  display: inline-flex;
+  align-items: center;
+}
 .form-render__wrapper {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
@@ -21,24 +36,11 @@
 .form-render__formItemLabel--text.has-annotation {
   margin-right: 15px;
 }
-.form-render__formItemLabel--icon {
-  display: inline-flex;
-  align-items: center;
-}
 .form-render__formItemLabel--annotation {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: calc(var(--icon-right) * 1px);
-  cursor: pointer;
-  color: #0067ee;
-  font-size: 16px;
-  user-select: none;
-  display: inline-flex;
-  align-items: center;
-}
-.form-render__formItemLabel--annotation.is-active {
-  color: rgba(255, 152, 40);
 }
 .form-render__linebar {
   grid-column: span var(--column) / span var(--column);
@@ -132,9 +134,9 @@
 .form-render .n-form-item-label {
   display: inline-flex;
 }
-.form-render .n-form-item-label [form-item-hover-show='true'] {
+.form-render .n-form-item-label [annotation-hover-show='true'] {
   visibility: hidden;
 }
-.form-render .n-form-item-label:hover [form-item-hover-show='true'] {
+.form-render .n-form-item-label:hover [annotation-hover-show='true'] {
   visibility: visible;
 }

package/es/packages/index.css

@@ -18,7 +18,7 @@
   margin-top: 6px;
 }
 .big-table-filter-wrap .sort-item {
-  line-height: 32px;
+  height: 32px;
   padding: 0 13px;
   display: flex;
   align-items: center;
@@ -97,7 +97,7 @@
 }
 .big-table-filter-wrap .checkbox-btn-wrap {
   display: flex;
-  padding: 9px 10px 19px 14px;
+  padding: 9px 10px 9px 14px;
 }
 .big-table-filter-wrap .checkbox-btn-wrap .checkbox-btn {
   width: 56px;
@@ -131,6 +131,16 @@
   width: 25px;
   height: 20px;
 }
+.big-table__separate {
+  padding: 4px;
+}
+.big-table__separatePlaceholder {
+  display: inline-block;
+  visibility: hidden;
+  max-width: 0;
+  word-break: keep-all;
+  width: 0;
+}
 body > .vxe-table--tooltip-wrapper {
   display: none !important;
 }
@@ -139,6 +149,9 @@ body > .vxe-table--tooltip-wrapper {
   /* 行内表单样式 */
   /* 行内表单样式 */
 }
+.custom-big-table .n-input {
+  width: fit-content;
+}
 .custom-big-table .img-wrap {
   padding: 2px 0;
   line-height: 1;
@@ -2643,6 +2656,21 @@ body > .vxe-table--tooltip-wrapper {
   font-size: 14px;
   text-decoration: none !important;
 }
+.annotation-edit {
+  cursor: pointer;
+  color: #0067ee;
+  font-size: 16px;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+}
+.annotation-edit.is-active {
+  color: rgba(255, 152, 40);
+}
+.annotation-edit__icon {
+  display: inline-flex;
+  align-items: center;
+}
 .form-render__wrapper {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
@@ -2666,24 +2694,11 @@ body > .vxe-table--tooltip-wrapper {
 .form-render__formItemLabel--text.has-annotation {
   margin-right: 15px;
 }
-.form-render__formItemLabel--icon {
-  display: inline-flex;
-  align-items: center;
-}
 .form-render__formItemLabel--annotation {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: calc(var(--icon-right) * 1px);
-  cursor: pointer;
-  color: #0067ee;
-  font-size: 16px;
-  user-select: none;
-  display: inline-flex;
-  align-items: center;
-}
-.form-render__formItemLabel--annotation.is-active {
-  color: rgba(255, 152, 40);
 }
 .form-render__linebar {
   grid-column: span var(--column) / span var(--column);
@@ -2777,10 +2792,10 @@ body > .vxe-table--tooltip-wrapper {
 .form-render .n-form-item-label {
   display: inline-flex;
 }
-.form-render .n-form-item-label [form-item-hover-show='true'] {
+.form-render .n-form-item-label [annotation-hover-show='true'] {
   visibility: hidden;
 }
-.form-render .n-form-item-label:hover [form-item-hover-show='true'] {
+.form-render .n-form-item-label:hover [annotation-hover-show='true'] {
   visibility: visible;
 }
 .c-fabric-chart-popup-tip,