feat: fix designer:entry ts errors

2025-12-14 21:12:53 +00:00 · 2023-03-14 18:56:46 +08:00 · 2023-03-14 18:56:46 +08:00 · 4d4a8a6d6f
commit 4d4a8a6d6f
parent 4433b2ee78
35 changed files with 533 additions and 502 deletions
--- a/docs/docs/specs/material-spec.md
+++ b/docs/docs/specs/material-spec.md
@ -833,11 +833,11 @@ props 数组下对象字段描述：
 | name       | 属性名                                                                                 | String            | type = 'field' 生效 |
 | defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
 | supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
-| condition | 配置当前 prop 是否展示 | (target: SettingTarget) => boolean; | - |
+| condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - |
 | setter     | 单个控件 (setter) 描述，搭建基础协议组件的描述对象，支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |
 | extraProps | 其他配置属性（不做流通要求）                                                           | Object            | 其他配置            |
-| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function            | (target: SettingTarget, value: any) => any;            |
-| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function            | (target: SettingTarget, value: any) => void;            |
+| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function            | (target: IPublicModelSettingField, value: any) => any;            |
+| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function            | (target: IPublicModelSettingField, value: any) => void;            |


 根据属性值类型 propType，确定对应控件类型 (setter) 。
@ -922,7 +922,7 @@ props 数组下对象字段描述：

 | 字段 | 用途 | 类型 | 备注 |
 | ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- |
-|initialChildren	| 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function	NodeData[] | ((target: SettingTarget) => NodeData[]);|
+|initialChildren	| 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function	NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);|
 |getResizingHandlers|	用于配置设计器中组件 resize 操作工具的样式和内容 |	Function|	(currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[];
 |callbacks|	配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 |	Callback|	-
 |callbacks.onNodeAdd|	在容器中拖入组件时触发的事件回调 |	Function|	(e: MouseEvent, currentNode: any) => any
@ -1098,7 +1098,7 @@ export interface Advanced {
  /**
   * 拖入容器时，自动带入 children 列表
   */
-  initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);
+  initialChildren?: NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);
  /**
   * @todo 待补充文档
   */
--- a/packages/designer/src/component-meta.ts
+++ b/packages/designer/src/component-meta.ts
@ -8,10 +8,11 @@ import {
  IPublicTypeTransformedComponentMetadata,
  IPublicTypeNestingFilter,
  IPublicTypeI18nData,
-  IPublicTypePluginConfig,
  IPublicTypeFieldConfig,
  IPublicModelComponentMeta,
  IPublicTypeAdvanced,
+  IPublicTypeDisposable,
+  IPublicTypeLiveTextEditingConfig,
 } from '@alilc/lowcode-types';
 import { deprecate, isRegExp, isTitleConfig, isNode } from '@alilc/lowcode-utils';
 import { computed, createModuleEventBus, IEventBus } from '@alilc/lowcode-editor-core';
@ -59,9 +60,11 @@ export function buildFilter(rule?: string | string[] | RegExp | IPublicTypeNesti
 export interface IComponentMeta extends IPublicModelComponentMeta<INode> {
  prototype?: any;

+  get rootSelector(): string | undefined;
+
  setMetadata(metadata: IPublicTypeComponentMetadata): void;

-  get rootSelector(): string | undefined;
+  onMetadataChange(fn: (args: any) => void): IPublicTypeDisposable;
 }

 export class ComponentMeta implements IComponentMeta {
@ -120,7 +123,7 @@ export class ComponentMeta implements IComponentMeta {
    return config?.combined || config?.props || [];
  }

-  private _liveTextEditing?: IPublicTypePluginConfig[];
+  private _liveTextEditing?: IPublicTypeLiveTextEditingConfig[];

  get liveTextEditing() {
    return this._liveTextEditing;
@ -357,7 +360,7 @@ export class ComponentMeta implements IComponentMeta {
    return true;
  }

-  onMetadataChange(fn: (args: any) => void): () => void {
+  onMetadataChange(fn: (args: any) => void): IPublicTypeDisposable {
    this.emitter.on('metadata_change', fn);
    return () => {
      this.emitter.removeListener('metadata_change', fn);
--- a/packages/designer/src/designer/designer.ts
+++ b/packages/designer/src/designer/designer.ts
@ -140,7 +140,7 @@ export class Designer implements IDesigner {

  @obx.ref private _simulatorComponent?: ComponentType<any>;

-  @obx.ref private _simulatorProps?: object | ((project: Project) => object);
+  @obx.ref private _simulatorProps?: Record<string, any> | ((project: Project) => object);

  @obx.ref private _suspensed = false;

--- a/packages/designer/src/designer/setting/index.ts
+++ b/packages/designer/src/designer/setting/index.ts
@ -1,3 +1,4 @@
 export * from './setting-field';
 export * from './setting-top-entry';
-export * from './setting-entry';
+export * from './setting-entry-type';
+export * from './setting-prop-entry';
--- a/packages/designer/src/designer/setting/setting-entry-type.ts
+++ b/packages/designer/src/designer/setting/setting-entry-type.ts
@ -0,0 +1,45 @@
+import { IPublicApiSetters, IPublicModelEditor } from '@alilc/lowcode-types';
+import { IDesigner } from '../designer';
+import { INode } from '../../document';
+import { ISettingField } from './setting-field';
+
+export interface ISettingEntry {
+  readonly designer: IDesigner | undefined;
+
+  readonly id: string;
+
+  /**
+   * 同样类型的节点
+   */
+  readonly isSameComponent: boolean;
+
+  /**
+   * 一个
+   */
+  readonly isSingle: boolean;
+
+  /**
+   * 多个
+   */
+  readonly isMultiple: boolean;
+
+  /**
+   * 编辑器引用
+   */
+  readonly editor: IPublicModelEditor;
+
+  readonly setters: IPublicApiSetters;
+
+  /**
+   * 取得子项
+   */
+  get: (propName: string | number) => ISettingField | null;
+
+  readonly nodes: INode[];
+
+  // @todo 补充 node 定义
+  /**
+   * 获取 node 中的第一项
+   */
+  getNode: () => any;
+}
--- a/packages/designer/src/designer/setting/setting-entry.ts
+++ b/packages/designer/src/designer/setting/setting-entry.ts
@ -1,26 +0,0 @@
-import { IBaseModelSettingEntry, IPublicModelSettingPropEntry, IPublicTypeSetValueOptions } from '@alilc/lowcode-types';
-import { IComponentMeta } from '../../component-meta';
-import { IDesigner } from '../designer';
-import { INode } from '../../document';
-
-export interface ISettingEntry extends IBaseModelSettingEntry<
-  INode,
-  IComponentMeta,
-  ISettingEntry
-> {
-  readonly designer: IDesigner;
-
-  readonly isGroup: boolean;
-
-  readonly id: string;
-
-  get name(): string | number | undefined;
-
-  internalToShellPropEntry(): IPublicModelSettingPropEntry;
-
-  valueChange(options: IPublicTypeSetValueOptions): void;
-
-  get valueState(): number;
-
-  clearValue(): void;
-}
--- a/packages/designer/src/designer/setting/setting-field.ts
+++ b/packages/designer/src/designer/setting/setting-field.ts
@ -7,14 +7,18 @@ import {
  IPublicTypeFieldConfig,
  IPublicTypeCustomView,
  IPublicTypeSetValueOptions,
+  IPublicTypeDisposable,
+  IPublicModelSettingField,
+  IBaseModelSettingField,
 } from '@alilc/lowcode-types';
 import { Transducer } from './utils';
-import { SettingPropEntry } from './setting-prop-entry';
-import { ISettingEntry } from './setting-entry';
+import { ISettingPropEntry, SettingPropEntry } from './setting-prop-entry';
 import { computed, obx, makeObservable, action, untracked, intl } from '@alilc/lowcode-editor-core';
 import { cloneDeep, isCustomView, isDynamicSetter } from '@alilc/lowcode-utils';
+import { ISettingTopEntry } from './setting-top-entry';
+import { IComponentMeta, INode } from '@alilc/lowcode-designer';

-function getSettingFieldCollectorKey(parent: ISettingEntry, config: IPublicTypeFieldConfig) {
+function getSettingFieldCollectorKey(parent: ISettingTopEntry | ISettingField, config: IPublicTypeFieldConfig) {
  let cur = parent;
  const path = [config.name];
  while (cur !== parent.top) {
@ -26,11 +30,18 @@ function getSettingFieldCollectorKey(parent: ISettingEntry, config: IPublicTypeF
  return path.join('.');
 }

-export interface ISettingField extends Omit<ISettingEntry, 'setValue'> {
+export interface ISettingField extends ISettingPropEntry, Omit<IBaseModelSettingField<
+ISettingTopEntry,
+ISettingField,
+IComponentMeta,
+INode
+>, 'setValue' | 'key' | 'node'> {
  get items(): Array<ISettingField | IPublicTypeCustomView>;

  get title(): string | ReactNode | undefined;

+  readonly isSettingField: true;
+
  purge(): void;

  extraProps: IPublicTypeFieldExtraProps;
@ -41,6 +52,10 @@ export interface ISettingField extends Omit<ISettingEntry, 'setValue'> {

  readonly isRequired: boolean;

+  readonly isGroup: boolean;
+
+  get valueState(): number;
+
  setExpanded(value: boolean): void;

  setValue(
@ -49,6 +64,16 @@ export interface ISettingField extends Omit<ISettingEntry, 'setValue'> {
    force?: boolean,
    extraOptions?: IPublicTypeSetValueOptions,
  ): void;
+
+  clearValue(): void;
+
+  valueChange(options: IPublicTypeSetValueOptions): void;
+
+  createField(config: IPublicTypeFieldConfig): ISettingField;
+
+  onEffect(action: () => void): IPublicTypeDisposable;
+
+  internalToShell(): IPublicModelSettingField;
 }

 export class SettingField extends SettingPropEntry implements ISettingField {
@ -62,7 +87,7 @@ export class SettingField extends SettingPropEntry implements ISettingField {

  private hotValue: any;

-  parent: ISettingEntry;
+  parent: ISettingTopEntry | ISettingField;

  extraProps: IPublicTypeFieldExtraProps;

@ -82,7 +107,7 @@ export class SettingField extends SettingPropEntry implements ISettingField {
  private _items: Array<ISettingField | IPublicTypeCustomView> = [];

  constructor(
-    parent: ISettingEntry,
+    parent: ISettingTopEntry | ISettingField,
    config: IPublicTypeFieldConfig,
    private settingFieldCollector?: (name: string | number, field: ISettingField) => void,
  ) {
@ -118,8 +143,8 @@ export class SettingField extends SettingPropEntry implements ISettingField {
    }
    if (isDynamicSetter(this._setter)) {
      return untracked(() => {
-        const shellThis = this.internalToShellPropEntry();
-        return (this._setter as IPublicTypeDynamicSetter)?.call(shellThis, shellThis);
+        const shellThis = this.internalToShell();
+        return (this._setter as IPublicTypeDynamicSetter)?.call(shellThis, shellThis!);
      });
    }
    return this._setter;
@ -266,8 +291,13 @@ export class SettingField extends SettingPropEntry implements ISettingField {
    this.valueChange(options);
  }

-  onEffect(action: () => void): () => void {
-    return this.designer.autorun(action, true);
+  onEffect(action: () => void): IPublicTypeDisposable {
+    return this.designer!.autorun(action, true);
+  }
+
+
+  internalToShell() {
+    return this.designer!.shellModelFactory.createSettingField(this);
  }
 }

--- a/packages/designer/src/designer/setting/setting-prop-entry.ts
+++ b/packages/designer/src/designer/setting/setting-prop-entry.ts
@ -1,13 +1,44 @@
 import { obx, computed, makeObservable, runInAction, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core';
-import { GlobalEvent, IPublicApiSetters, IPublicModelEditor, IPublicTypeSetValueOptions } from '@alilc/lowcode-types';
-import { uniqueId, isJSExpression, isSettingField } from '@alilc/lowcode-utils';
-import { ISettingEntry } from './setting-entry';
+import { GlobalEvent, IPublicApiSetters, IPublicModelEditor, IPublicModelSettingField, IPublicTypeFieldExtraProps, IPublicTypeSetValueOptions } from '@alilc/lowcode-types';
+import { uniqueId, isJSExpression } from '@alilc/lowcode-utils';
+import { ISettingEntry } from './setting-entry-type';
 import { INode } from '../../document';
 import { IComponentMeta } from '../../component-meta';
 import { IDesigner } from '../designer';
-import { ISettingField } from './setting-field';
+import { ISettingTopEntry } from './setting-top-entry';
+import { ISettingField, isSettingField } from './setting-field';

-export class SettingPropEntry implements ISettingEntry {
+export interface ISettingPropEntry extends ISettingEntry {
+  get props(): ISettingTopEntry;
+
+  readonly isGroup: boolean;
+
+  get name(): string | number | undefined;
+
+  valueChange(options: IPublicTypeSetValueOptions): void;
+
+  getKey(): string | number | undefined;
+
+  setKey(key: string | number): void;
+
+  getDefaultValue(): any;
+
+  setUseVariable(flag: boolean): void;
+
+  getProps(): ISettingTopEntry;
+
+  isUseVariable(): boolean;
+
+  getMockOrValue(): any;
+
+  remove(): void;
+
+  setValue(val: any, isHotValue?: boolean, force?: boolean, extraOptions?: IPublicTypeSetValueOptions): void;
+
+  internalToShell(): IPublicModelSettingField;
+}
+
+export class SettingPropEntry implements ISettingPropEntry {
  // === static properties ===
  readonly editor: IPublicModelEditor;

@ -23,9 +54,9 @@ export class SettingPropEntry implements ISettingEntry {

  readonly componentMeta: IComponentMeta | null;

-  readonly designer: IDesigner;
+  readonly designer: IDesigner | undefined;

-  readonly top: ISettingEntry;
+  readonly top: ISettingTopEntry;

  readonly isGroup: boolean;

@ -50,9 +81,9 @@ export class SettingPropEntry implements ISettingEntry {
    return path;
  }

-  extraProps: any = {};
+  extraProps: IPublicTypeFieldExtraProps = {};

-  constructor(readonly parent: ISettingEntry | ISettingField, name: string | number | undefined, type?: 'field' | 'group') {
+  constructor(readonly parent: ISettingTopEntry | ISettingField, name: string | number | undefined, type?: 'field' | 'group') {
    makeObservable(this);
    if (type == null) {
      const c = typeof name === 'string' ? name.slice(0, 1) : '';
@ -126,7 +157,7 @@ export class SettingPropEntry implements ISettingEntry {
      if (this.type !== 'field') {
        const { getValue } = this.extraProps;
        return getValue
-          ? getValue(this.internalToShellPropEntry(), undefined) === undefined
+          ? getValue(this.internalToShell()!, undefined) === undefined
            ? 0
            : 1
          : 0;
@ -165,7 +196,7 @@ export class SettingPropEntry implements ISettingEntry {
    }
    const { getValue } = this.extraProps;
    try {
-      return getValue ? getValue(this.internalToShellPropEntry(), val) : val;
+      return getValue ? getValue(this.internalToShell()!, val) : val;
    } catch (e) {
      console.warn(e);
      return val;
@ -184,7 +215,7 @@ export class SettingPropEntry implements ISettingEntry {
    const { setValue } = this.extraProps;
    if (setValue && !extraOptions?.disableMutator) {
      try {
-        setValue(this.internalToShellPropEntry(), val);
+        setValue(this.internalToShell()!, val);
      } catch (e) {
        /* istanbul ignore next */
        console.warn(e);
@ -207,7 +238,7 @@ export class SettingPropEntry implements ISettingEntry {
    const { setValue } = this.extraProps;
    if (setValue) {
      try {
-        setValue(this.internalToShellPropEntry(), undefined);
+        setValue(this.internalToShell()!, undefined);
      } catch (e) {
        /* istanbul ignore next */
        console.warn(e);
@ -363,7 +394,7 @@ export class SettingPropEntry implements ISettingEntry {
    return v;
  }

-  internalToShellPropEntry() {
-    return this.designer.shellModelFactory.createSettingPropEntry(this);
+  internalToShell(): IPublicModelSettingField {
+    return this.designer!.shellModelFactory.createSettingField(this);;
  }
 }
--- a/packages/designer/src/designer/setting/setting-top-entry.ts
+++ b/packages/designer/src/designer/setting/setting-top-entry.ts
@ -1,11 +1,10 @@
-import { IPublicTypeCustomView, IPublicModelEditor } from '@alilc/lowcode-types';
+import { IPublicTypeCustomView, IPublicModelEditor, IPublicModelSettingTopEntry } from '@alilc/lowcode-types';
 import { isCustomView } from '@alilc/lowcode-utils';
 import { computed, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core';
-import { ISettingEntry } from './setting-entry';
-import { SettingField } from './setting-field';
-import { SettingPropEntry } from './setting-prop-entry';
+import { ISettingEntry } from './setting-entry-type';
+import { ISettingField, SettingField } from './setting-field';
 import { INode } from '../../document';
-import { ComponentMeta } from '../../component-meta';
+import { IComponentMeta } from '../../component-meta';
 import { IDesigner } from '../designer';
 import { Setters } from '@alilc/lowcode-shell';

@ -16,8 +15,25 @@ function generateSessionId(nodes: INode[]) {
    .join(',');
 }

-export interface ISettingTopEntry extends ISettingEntry {
+export interface ISettingTopEntry extends ISettingEntry, IPublicModelSettingTopEntry<
+  INode,
+  ISettingField
+> {
  purge(): void;
+
+  items: Array<ISettingField | IPublicTypeCustomView>;
+
+  readonly top: ISettingTopEntry;
+
+  readonly parent: ISettingTopEntry;
+
+  readonly path: never[];
+
+  componentMeta: IComponentMeta | null;
+
+  getExtraPropValue(propName: string): void;
+
+  setExtraPropValue(propName: string, value: any): void;
 }

 export class SettingTopEntry implements ISettingTopEntry {
@ -25,11 +41,11 @@ export class SettingTopEntry implements ISettingTopEntry {

  private _items: Array<SettingField | IPublicTypeCustomView> = [];

-  private _componentMeta: ComponentMeta | null = null;
+  private _componentMeta: IComponentMeta | null = null;

  private _isSame = true;

-  private _settingFieldMap: { [prop: string]: SettingField } = {};
+  private _settingFieldMap: { [prop: string]: ISettingField } = {};

  readonly path = [];

@ -122,8 +138,8 @@ export class SettingTopEntry implements ISettingTopEntry {

  private setupItems() {
    if (this.componentMeta) {
-      const settingFieldMap: { [prop: string]: SettingField } = {};
-      const settingFieldCollector = (name: string | number, field: SettingField) => {
+      const settingFieldMap: { [prop: string]: ISettingField } = {};
+      const settingFieldCollector = (name: string | number, field: ISettingField) => {
        settingFieldMap[name] = field;
      };
      this._items = this.componentMeta.configure.map((item) => {
@ -160,34 +176,34 @@ export class SettingTopEntry implements ISettingTopEntry {
  /**
   * 获取子项
   */
-  get(propName: string | number): SettingPropEntry | null {
+  get(propName: string | number): ISettingField | null {
    if (!propName) return null;
-    return this._settingFieldMap[propName] || (new SettingPropEntry(this, propName));
+    return this._settingFieldMap[propName] || (new SettingField(this, { name: propName }));
  }

  /**
   * 设置子级属性值
   */
-  setPropValue(propName: string, value: any) {
+  setPropValue(propName: string | number, value: any) {
    this.nodes.forEach((node) => {
-      node.setPropValue(propName, value);
+      node.setPropValue(propName.toString(), value);
    });
  }

  /**
   * 清除已设置值
   */
-  clearPropValue(propName: string) {
+  clearPropValue(propName: string | number) {
    this.nodes.forEach((node) => {
-      node.clearPropValue(propName);
+      node.clearPropValue(propName.toString());
    });
  }

  /**
   * 获取子级属性值
   */
-  getPropValue(propName: string): any {
-    return this.first.getProp(propName, true)?.getValue();
+  getPropValue(propName: string | number): any {
+    return this.first.getProp(propName.toString(), true)?.getValue();
  }

  /**
--- a/packages/designer/src/document/node/node.ts
+++ b/packages/designer/src/document/node/node.ts
@ -153,6 +153,12 @@ export interface IBaseNode<Schema extends IPublicTypeNodeSchema = IPublicTypeNod
  getVisible(): boolean;

  getChildren(): INodeChildren | null;
+
+  clearPropValue(path: string): void;
+
+  setProps(props?: IPublicTypePropsMap | IPublicTypePropsList | Props | null): void;
+
+  mergeProps(props: IPublicTypePropsMap): void;
 }

 /**
@ -203,7 +209,7 @@ export interface IBaseNode<Schema extends IPublicTypeNodeSchema = IPublicTypeNod
 *  isLocked
 *  hidden
 */
-export class Node<Schema extends IPublicTypeNodeSchema = IPublicTypeNodeSchema> implements INode {
+export class Node<Schema extends IPublicTypeNodeSchema = IPublicTypeNodeSchema> implements IBaseNode {
  private emitter: IEventBus;

  /**
@ -427,18 +433,24 @@ export class Node<Schema extends IPublicTypeNodeSchema = IPublicTypeNodeSchema>
    });
  }

-  private initialChildren(children: any): IPublicTypeNodeData[] {
+  private initialChildren(children: IPublicTypeNodeData | IPublicTypeNodeData[] | undefined): IPublicTypeNodeData[] {
    // FIXME! this is dirty code
    if (children == null) {
      const { initialChildren } = this.componentMeta.advanced;
      if (initialChildren) {
        if (typeof initialChildren === 'function') {
-          return initialChildren(this as any) || [];
+          return initialChildren(this.internalToShellNode()!) || [];
        }
        return initialChildren;
      }
    }
-    return children || [];
+    if (Array.isArray(children)) {
+      return children;
+    } else if (children) {
+      return [children];
+    } else {
+      return [];
+    }
  }

  isContainer(): boolean {
@ -900,12 +912,12 @@ export class Node<Schema extends IPublicTypeNodeSchema = IPublicTypeNodeSchema>
        (subNode: INode) => {
          subNode.remove(true, true);
        },
-        (iterable, idx) => (iterable as NodeChildren).get(idx),
+        (iterable, idx) => (iterable as INodeChildren).get(idx),
      );
    }
    if (this.isParental()) {
      this.props.import(props, extras);
-      (this._children as NodeChildren).import(children, checkId);
+      this._children?.import(children, checkId);
    } else {
      this.props
        .get('children', true)!
--- a/packages/designer/tests/designer/setting/setting-field.test.ts
+++ b/packages/designer/tests/designer/setting/setting-field.test.ts
@ -104,7 +104,7 @@ describe('setting-field 测试', () => {

      // group 类型的 field
      const groupField = settingEntry.get('groupkgzzeo41') as SettingField;
-      expect(groupField.items).toBeUndefined();
+      expect(groupField.items).toEqual([]);

      // 有子节点的 field
      const objField = settingEntry.get('obj') as SettingField;
--- a/packages/editor-skeleton/src/components/field/index.ts
+++ b/packages/editor-skeleton/src/components/field/index.ts
@ -14,7 +14,7 @@ export interface FieldProps {
  [extra: string]: any;
 }

-export function createField(props: FieldProps, children: ReactNode, type?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry') {
+export function createField(props: FieldProps, children: ReactNode, type?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry'): ReactNode {
  if (type === 'popup') {
    return createElement(PopupField, props, children);
  }
--- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx
+++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx
@ -3,7 +3,7 @@ import { shallowIntl, observer, obx, engineConfig, runInAction, globalContext }
 import { createContent, isJSSlot, isSetterConfig } from '@alilc/lowcode-utils';
 import { Skeleton, Stage } from '@alilc/lowcode-editor-skeleton';
 import { IPublicTypeCustomView } from '@alilc/lowcode-types';
-import { SettingField, SettingTopEntry, ISettingEntry, IComponentMeta, ISettingField, isSettingField } from '@alilc/lowcode-designer';
+import { ISettingEntry, IComponentMeta, ISettingField, isSettingField, ISettingTopEntry } from '@alilc/lowcode-designer';
 import { createField } from '../field';
 import PopupService, { PopupPipe } from '../popup';
 import { SkeletonContext } from '../../context';
@ -80,7 +80,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
    const { extraProps } = this.field;
    const { condition } = extraProps;
    try {
-      return typeof condition === 'function' ? condition(this.field.internalToShellPropEntry()) !== false : true;
+      return typeof condition === 'function' ? condition(this.field.internalToShell()) !== false : true;
    } catch (error) {
      console.error('exception when condition (hidden) is excuted', error);
    }
@ -111,7 +111,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
      if (setter.props) {
        setterProps = setter.props;
        if (typeof setterProps === 'function') {
-          setterProps = setterProps(this.field.internalToShellPropEntry());
+          setterProps = setterProps(this.field.internalToShell());
        }
      }
      if (setter.initialValue != null) {
@ -177,7 +177,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
    }
    // 当前 field 没有 value 值时，将 initialValue 写入 field
    // 之所以用 initialValue，而不是 defaultValue 是为了保持跟 props.onInitial 的逻辑一致
-    const _initialValue = typeof initialValue === 'function' ? initialValue(this.field.internalToShellPropEntry()) : initialValue;
+    const _initialValue = typeof initialValue === 'function' ? initialValue(this.field.internalToShell()) : initialValue;
    this.field.setValue(_initialValue);
  }

@ -225,9 +225,9 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
        forceInline: extraProps.forceInline,
        key: field.id,
        // === injection
-        prop: field.internalToShellPropEntry(), // for compatible vision
+        prop: field.internalToShell(), // for compatible vision
        selected: field.top?.getNode()?.internalToShellNode(),
-        field: field.internalToShellPropEntry(),
+        field: field.internalToShell(),
        // === IO
        value, // reaction point
        initialValue,
@ -244,7 +244,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
          if (initialValue == null) {
            return;
          }
-          const value = typeof initialValue === 'function' ? initialValue(field.internalToShellPropEntry()) : initialValue;
+          const value = typeof initialValue === 'function' ? initialValue(field.internalToShell()) : initialValue;
          this.setState({
            // eslint-disable-next-line react/no-unused-state
            value,
@ -303,7 +303,7 @@ class SettingGroupView extends Component<SettingGroupViewProps> {
    const { field } = this.props;
    const { extraProps } = field;
    const { condition, display } = extraProps;
-    const visible = field.isSingle && typeof condition === 'function' ? condition(field.internalToShellPropEntry()) !== false : true;
+    const visible = field.isSingle && typeof condition === 'function' ? condition(field.internalToShell()) !== false : true;

    if (!visible) {
      return null;
@ -340,7 +340,7 @@ export function createSettingFieldView(item: ISettingField | IPublicTypeCustomVi
 }

 export type SettingsPaneProps = {
-  target: SettingTopEntry | SettingField;
+  target: ISettingTopEntry | ISettingField;
  usePopup?: boolean;
 };

--- a/packages/editor-skeleton/src/transducers/addon-combine.ts
+++ b/packages/editor-skeleton/src/transducers/addon-combine.ts
@ -1,7 +1,7 @@
 import {
  IPublicTypeTransformedComponentMetadata,
  IPublicTypeFieldConfig,
-  IPublicModelSettingTarget,
+  IPublicModelSettingField,
 } from '@alilc/lowcode-types';
 import { IconSlot } from '../icons/slot';
 import { getConvertedExtraKey } from '@alilc/lowcode-designer';
@ -214,11 +214,11 @@ export default function (
              definition: eventsDefinition,
            },
          },
-          getValue(field: IPublicModelSettingTarget, val?: any[]) {
+          getValue(field: IPublicModelSettingField, val?: any[]) {
            return val;
          },

-          setValue(field: IPublicModelSettingTarget, eventData) {
+          setValue(field: IPublicModelSettingField, eventData) {
            const { eventDataList, eventList } = eventData;
            Array.isArray(eventList) &&
              eventList.map((item) => {
--- a/packages/engine/src/modules/shell-model-factory.ts
+++ b/packages/engine/src/modules/shell-model-factory.ts
@ -1,18 +1,19 @@
 import {
  INode,
-  SettingField as InnerSettingField,
+  ISettingField,
 } from '@alilc/lowcode-designer';
-import { IShellModelFactory, IPublicModelNode, IPublicModelSettingPropEntry } from '@alilc/lowcode-types';
+import { IShellModelFactory, IPublicModelNode } from '@alilc/lowcode-types';
+import { IPublicModelSettingField } from '../../../types/src/shell/model/setting-field';
 import {
  Node,
-  SettingPropEntry,
+  SettingField,
 } from '@alilc/lowcode-shell';
 class ShellModelFactory implements IShellModelFactory {
  createNode(node: INode | null | undefined): IPublicModelNode | null {
    return Node.create(node);
  }
-  createSettingPropEntry(prop: InnerSettingField): IPublicModelSettingPropEntry {
-    return SettingPropEntry.create(prop);
+  createSettingField(prop: ISettingField): IPublicModelSettingField {
+    return SettingField.create(prop);
  }
 }
 export const shellModelFactory = new ShellModelFactory();
--- a/packages/engine/src/modules/symbols.ts
+++ b/packages/engine/src/modules/symbols.ts
@ -6,7 +6,7 @@ import {
  designerSymbol,
  skeletonSymbol,
  editorSymbol,
-  settingPropEntrySymbol,
+  settingFieldSymbol,
  settingTopEntrySymbol,
  designerCabinSymbol,
  propSymbol,
@ -21,7 +21,7 @@ export default {
  skeletonSymbol,
  editorSymbol,
  designerSymbol,
-  settingPropEntrySymbol,
+  settingPropEntrySymbol: settingFieldSymbol,
  settingTopEntrySymbol,
  designerCabinSymbol,
  propSymbol,
--- a/packages/shell/src/index.ts
+++ b/packages/shell/src/index.ts
@ -7,10 +7,10 @@ import {
  Prop,
  Selection,
  Dragon,
-  SettingPropEntry,
  SettingTopEntry,
  Clipboard,
  Config,
+  SettingField,
 } from './model';
 import {
  Project,
@ -51,7 +51,7 @@ export {
  Setters,
  Hotkey,
  Skeleton,
-  SettingPropEntry,
+  SettingField as SettingPropEntry,
  SettingTopEntry,
  Dragon,
  Common,
@ -63,4 +63,5 @@ export {
  Clipboard,
  SimulatorHost,
  Config,
+  SettingField,
 };
--- a/packages/shell/src/model/index.ts
+++ b/packages/shell/src/model/index.ts
@ -12,8 +12,8 @@ export * from './node';
 export * from './prop';
 export * from './props';
 export * from './selection';
-export * from './setting-prop-entry';
 export * from './setting-top-entry';
+export * from './setting-field';
 export * from './resource';
 export * from './active-tracker';
 export * from './plugin-instance';
--- a/packages/shell/src/model/props.ts
+++ b/packages/shell/src/model/props.ts
@ -28,7 +28,7 @@ export class Props implements IPublicModelProps {
  /**
   * 返回当前 props 的路径
   */
-  get path(): any[] {
+  get path(): string[] {
    return this[propsSymbol].path;
  }

--- a/packages/shell/src/model/setting-prop-entry.ts
+++ b/packages/shell/src/model/setting-prop-entry.ts
@ -1,144 +1,149 @@
-import { SettingField, ISettingEntry } from '@alilc/lowcode-designer';
+import { ISettingField, isSettingField } from '@alilc/lowcode-designer';
 import {
  IPublicTypeCompositeValue,
  IPublicTypeFieldConfig,
  IPublicTypeCustomView,
-  IPublicModelSettingPropEntry,
  IPublicTypeSetterType,
  IPublicTypeFieldExtraProps,
  IPublicModelSettingTopEntry,
  IPublicModelNode,
  IPublicModelComponentMeta,
  IPublicTypeSetValueOptions,
+  IPublicModelSettingField,
+  IPublicTypeDisposable,
 } from '@alilc/lowcode-types';
-import { settingPropEntrySymbol } from '../symbols';
+import { settingFieldSymbol } from '../symbols';
 import { Node as ShellNode } from './node';
-import { SettingTopEntry as ShellSettingTopEntry } from './setting-top-entry';
+import { SettingTopEntry, SettingTopEntry as ShellSettingTopEntry } from './setting-top-entry';
 import { ComponentMeta as ShellComponentMeta } from './component-meta';
 import { isCustomView } from '@alilc/lowcode-utils';

-export class SettingPropEntry implements IPublicModelSettingPropEntry {
-  private readonly [settingPropEntrySymbol]: SettingField;
+export class SettingField implements IPublicModelSettingField {
+  private readonly [settingFieldSymbol]: ISettingField;

-  constructor(prop: SettingField) {
-    this[settingPropEntrySymbol] = prop;
+  constructor(prop: ISettingField) {
+    this[settingFieldSymbol] = prop;
  }

-  static create(prop: SettingField): IPublicModelSettingPropEntry {
-    return new SettingPropEntry(prop);
+  static create(prop: ISettingField): IPublicModelSettingField {
+    return new SettingField(prop);
  }

  /**
   * 获取设置属性的 isGroup
   */
  get isGroup(): boolean {
-    return this[settingPropEntrySymbol].isGroup;
+    return this[settingFieldSymbol].isGroup;
  }

  /**
   * 获取设置属性的 id
   */
  get id(): string {
-    return this[settingPropEntrySymbol].id;
+    return this[settingFieldSymbol].id;
  }

  /**
   * 获取设置属性的 name
   */
-  get name(): string | number {
-    return this[settingPropEntrySymbol].name;
+  get name(): string | number | undefined {
+    return this[settingFieldSymbol].name;
  }

  /**
   * 获取设置属性的 key
   */
-  get key(): string | number {
-    return this[settingPropEntrySymbol].getKey();
+  get key(): string | number | undefined {
+    return this[settingFieldSymbol].getKey();
  }

  /**
   * 获取设置属性的 path
   */
  get path(): any[] {
-    return this[settingPropEntrySymbol].path;
+    return this[settingFieldSymbol].path;
  }

  /**
   * 获取设置属性的 title
   */
  get title(): any {
-    return this[settingPropEntrySymbol].title;
+    return this[settingFieldSymbol].title;
  }

  /**
   * 获取设置属性的 setter
   */
  get setter(): IPublicTypeSetterType | null {
-    return this[settingPropEntrySymbol].setter;
+    return this[settingFieldSymbol].setter;
  }

  /**
   * 获取设置属性的 expanded
   */
  get expanded(): boolean {
-    return this[settingPropEntrySymbol].expanded;
+    return this[settingFieldSymbol].expanded;
  }

  /**
   * 获取设置属性的 extraProps
   */
  get extraProps(): IPublicTypeFieldExtraProps {
-    return this[settingPropEntrySymbol].extraProps;
+    return this[settingFieldSymbol].extraProps;
  }

  get props(): IPublicModelSettingTopEntry {
-    return ShellSettingTopEntry.create(this[settingPropEntrySymbol].props);
+    return ShellSettingTopEntry.create(this[settingFieldSymbol].props);
  }

  /**
   * 获取设置属性对应的节点实例
   */
  get node(): IPublicModelNode | null {
-    return ShellNode.create(this[settingPropEntrySymbol].getNode());
+    return ShellNode.create(this[settingFieldSymbol].getNode());
  }

  /**
   * 获取设置属性的父设置属性
   */
-  get parent(): IPublicModelSettingPropEntry {
-    return SettingPropEntry.create(this[settingPropEntrySymbol].parent as any);
+  get parent(): IPublicModelSettingField | IPublicModelSettingTopEntry {
+    if (isSettingField(this[settingFieldSymbol].parent)) {
+      return SettingField.create(this[settingFieldSymbol].parent);
+    }
+
+    return SettingTopEntry.create(this[settingFieldSymbol].parent);
  }

  /**
   * 获取顶级设置属性
   */
  get top(): IPublicModelSettingTopEntry {
-    return ShellSettingTopEntry.create(this[settingPropEntrySymbol].top);
+    return ShellSettingTopEntry.create(this[settingFieldSymbol].top);
  }

  /**
   * 是否是 SettingField 实例
   */
  get isSettingField(): boolean {
-    return this[settingPropEntrySymbol].isSettingField;
+    return this[settingFieldSymbol].isSettingField;
  }

  /**
   * componentMeta
   */
  get componentMeta(): IPublicModelComponentMeta | null {
-    return ShellComponentMeta.create(this[settingPropEntrySymbol].componentMeta);
+    return ShellComponentMeta.create(this[settingFieldSymbol].componentMeta);
  }

  /**
   * 获取设置属性的 items
   */
-  get items(): Array<IPublicModelSettingPropEntry | IPublicTypeCustomView> {
-    return this[settingPropEntrySymbol].items?.map((item) => {
+  get items(): Array<IPublicModelSettingField | IPublicTypeCustomView> {
+    return this[settingFieldSymbol].items?.map((item) => {
      if (isCustomView(item)) {
        return item;
      }
-      return item.internalToShellPropEntry();
+      return item.internalToShell();
    });
  }

@ -147,7 +152,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param key
   */
  setKey(key: string | number): void {
-    this[settingPropEntrySymbol].setKey(key);
+    this[settingFieldSymbol].setKey(key);
  }

  /**
@ -169,7 +174,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param val 值
   */
  setValue(val: IPublicTypeCompositeValue, extraOptions?: IPublicTypeSetValueOptions): void {
-    this[settingPropEntrySymbol].setValue(val, false, false, extraOptions);
+    this[settingFieldSymbol].setValue(val, false, false, extraOptions);
  }

  /**
@ -178,7 +183,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param value 值
   */
  setPropValue(propName: string | number, value: any): void {
-    this[settingPropEntrySymbol].setPropValue(propName, value);
+    this[settingFieldSymbol].setPropValue(propName, value);
  }

  /**
@ -186,7 +191,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param propName
   */
  clearPropValue(propName: string | number): void {
-    this[settingPropEntrySymbol].clearPropValue(propName);
+    this[settingFieldSymbol].clearPropValue(propName);
  }

  /**
@ -194,7 +199,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @returns
   */
  getDefaultValue(): any {
-    return this[settingPropEntrySymbol].getDefaultValue();
+    return this[settingFieldSymbol].getDefaultValue();
  }

  /**
@ -202,7 +207,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @returns
   */
  getValue(): any {
-    return this[settingPropEntrySymbol].getValue();
+    return this[settingFieldSymbol].getValue();
  }

  /**
@ -211,21 +216,21 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @returns
   */
  getPropValue(propName: string | number): any {
-    return this[settingPropEntrySymbol].getPropValue(propName);
+    return this[settingFieldSymbol].getPropValue(propName);
  }

  /**
   * 获取顶层附属属性值
   */
  getExtraPropValue(propName: string): any {
-    return this[settingPropEntrySymbol].getExtraPropValue(propName);
+    return this[settingFieldSymbol].getExtraPropValue(propName);
  }

  /**
   * 设置顶层附属属性值
   */
  setExtraPropValue(propName: string, value: any): void {
-    this[settingPropEntrySymbol].setExtraPropValue(propName, value);
+    this[settingFieldSymbol].setExtraPropValue(propName, value);
  }

  /**
@ -233,7 +238,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @returns
   */
  getProps(): IPublicModelSettingTopEntry {
-    return ShellSettingTopEntry.create(this[settingPropEntrySymbol].getProps() as ISettingEntry);
+    return ShellSettingTopEntry.create(this[settingFieldSymbol].getProps());
  }

  /**
@ -241,7 +246,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @returns
   */
  isUseVariable(): boolean {
-    return this[settingPropEntrySymbol].isUseVariable();
+    return this[settingFieldSymbol].isUseVariable();
  }

  /**
@ -249,7 +254,7 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param flag
   */
  setUseVariable(flag: boolean): void {
-    this[settingPropEntrySymbol].setUseVariable(flag);
+    this[settingFieldSymbol].setUseVariable(flag);
  }

  /**
@ -257,8 +262,8 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param config
   * @returns
   */
-  createField(config: IPublicTypeFieldConfig): IPublicModelSettingPropEntry {
-    return SettingPropEntry.create(this[settingPropEntrySymbol].createField(config));
+  createField(config: IPublicTypeFieldConfig): IPublicModelSettingField {
+    return SettingField.create(this[settingFieldSymbol].createField(config));
  }

  /**
@ -266,21 +271,21 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @returns
   */
  getMockOrValue(): any {
-    return this[settingPropEntrySymbol].getMockOrValue();
+    return this[settingFieldSymbol].getMockOrValue();
  }

  /**
   * 销毁当前 field 实例
   */
  purge(): void {
-    this[settingPropEntrySymbol].purge();
+    this[settingFieldSymbol].purge();
  }

  /**
   * 移除当前 field 实例
   */
  remove(): void {
-    this[settingPropEntrySymbol].remove();
+    this[settingFieldSymbol].remove();
  }

  /**
@ -288,15 +293,15 @@ export class SettingPropEntry implements IPublicModelSettingPropEntry {
   * @param action
   * @returns
   */
-  onEffect(action: () => void): () => void {
-    return this[settingPropEntrySymbol].onEffect(action);
+  onEffect(action: () => void): IPublicTypeDisposable {
+    return this[settingFieldSymbol].onEffect(action);
  }

  /**
   * 返回 shell 模型，兼容某些场景下 field 已经是 shell field 了
   * @returns
   */
-  internalToShellPropEntry() {
+  internalToShellField() {
    return this;
  }
 }
--- a/packages/shell/src/model/setting-top-entry.ts
+++ b/packages/shell/src/model/setting-top-entry.ts
@ -1,17 +1,17 @@
-import { ISettingEntry } from '@alilc/lowcode-designer';
+import { ISettingTopEntry } from '@alilc/lowcode-designer';
 import { settingTopEntrySymbol } from '../symbols';
 import { Node as ShellNode } from './node';
-import { SettingPropEntry as ShellSettingPropEntry } from './setting-prop-entry';
-import { IPublicModelSettingTopEntry, IPublicModelNode, IPublicModelSettingPropEntry } from '@alilc/lowcode-types';
+import { IPublicModelSettingTopEntry, IPublicModelNode, IPublicModelSettingField } from '@alilc/lowcode-types';
+import { SettingField } from './setting-field';

 export class SettingTopEntry implements IPublicModelSettingTopEntry {
-  private readonly [settingTopEntrySymbol]: ISettingEntry;
+  private readonly [settingTopEntrySymbol]: ISettingTopEntry;

-  constructor(prop: ISettingEntry) {
+  constructor(prop: ISettingTopEntry) {
    this[settingTopEntrySymbol] = prop;
  }

-  static create(prop: ISettingEntry): IPublicModelSettingTopEntry {
+  static create(prop: ISettingTopEntry): IPublicModelSettingTopEntry {
    return new SettingTopEntry(prop);
  }

@ -27,8 +27,8 @@ export class SettingTopEntry implements IPublicModelSettingTopEntry {
   * @param propName
   * @returns
   */
-  get(propName: string | number): IPublicModelSettingPropEntry {
-    return ShellSettingPropEntry.create(this[settingTopEntrySymbol].get(propName) as any);
+  get(propName: string | number): IPublicModelSettingField {
+    return SettingField.create(this[settingTopEntrySymbol].get(propName)!);
  }

  /**
@ -55,4 +55,8 @@ export class SettingTopEntry implements IPublicModelSettingTopEntry {
  setPropValue(propName: string | number, value: any): void {
    this[settingTopEntrySymbol].setPropValue(propName, value);
  }
+
+  clearPropValue(propName: string | number) {
+    this[settingTopEntrySymbol].clearPropValue(propName);
+  }
 }
--- a/packages/shell/src/symbols.ts
+++ b/packages/shell/src/symbols.ts
@ -10,7 +10,7 @@ export const nodeSymbol = Symbol('node');
 export const modalNodesManagerSymbol = Symbol('modalNodesManager');
 export const nodeChildrenSymbol = Symbol('nodeChildren');
 export const propSymbol = Symbol('prop');
-export const settingPropEntrySymbol = Symbol('settingPropEntry');
+export const settingFieldSymbol = Symbol('settingField');
 export const settingTopEntrySymbol = Symbol('settingTopEntry');
 export const propsSymbol = Symbol('props');
 export const detectingSymbol = Symbol('detecting');
--- a/packages/types/src/shell-model-factory.ts
+++ b/packages/types/src/shell-model-factory.ts
@ -1,8 +1,9 @@
-import { IPublicModelSettingPropEntry, IPublicModelNode } from './shell';
+import { IPublicModelNode, IPublicModelSettingField } from './shell';

 export interface IShellModelFactory {
  // TODO: 需要给 innerNode 提供一个 interface 并用在这里
  createNode(node: any | null | undefined): IPublicModelNode | null;
  // TODO: 需要给 InnerSettingField 提供一个 interface 并用在这里
-  createSettingPropEntry(prop: any): IPublicModelSettingPropEntry;
+
+  createSettingField(prop: any): IPublicModelSettingField;
 }
--- a/packages/types/src/shell/model/index.ts
+++ b/packages/types/src/shell/model/index.ts
@ -29,5 +29,4 @@ export * from './plugin-instance';
 export * from './sensor';
 export * from './resource';
 export * from './clipboard';
-export * from './setting-entry';
 export * from './setting-field';
--- a/packages/types/src/shell/model/props.ts
+++ b/packages/types/src/shell/model/props.ts
@ -1,5 +1,5 @@
 import { IPublicTypeCompositeValue } from '../type';
-import { IPublicModelNode } from './';
+import { IPublicModelNode, IPublicModelProp } from './';

 export interface IBaseModelProps<
  Prop
@ -86,4 +86,4 @@ export interface IBaseModelProps<

 }

-export type IPublicModelProps = IBaseModelProps<IPublicModelProps>;
+export interface IPublicModelProps extends IBaseModelProps<IPublicModelProp> {};
--- a/packages/types/src/shell/model/setting-entry.ts
+++ b/packages/types/src/shell/model/setting-entry.ts
@ -1,20 +0,0 @@
-import { IPublicModelComponentMeta } from "./component-meta";
-import { IPublicModelNode } from "./node";
-import { IBaseModelSettingTarget } from "./setting-target";
-
-export interface IBaseModelSettingEntry<
-  Node,
-  ComponentMeta,
-  SettingEntry
-> extends IBaseModelSettingTarget<
-  SettingEntry
-> {
-  readonly nodes: Node[];
-  readonly componentMeta: ComponentMeta | null;
-}
-
-export interface IPublicModelSettingEntry extends IBaseModelSettingEntry<
-  IPublicModelNode,
-  IPublicModelComponentMeta,
-  IPublicModelSettingEntry
-> {}
--- a/packages/types/src/shell/model/setting-field.ts
+++ b/packages/types/src/shell/model/setting-field.ts
@ -1,5 +1,198 @@
-import { IPublicModelSettingEntry } from "./setting-entry";
+import { IPublicTypeCustomView, IPublicTypeCompositeValue, IPublicTypeSetterType, IPublicTypeSetValueOptions, IPublicTypeFieldConfig, IPublicTypeFieldExtraProps, IPublicTypeDisposable } from '../type';
+import { IPublicModelNode, IPublicModelComponentMeta, IPublicModelSettingTopEntry } from './';

-export interface IPublicModelSettingField extends IPublicModelSettingEntry {
+export interface IBaseModelSettingField<
+  SettingTopEntry,
+  SettingField,
+  ComponentMeta,
+  Node
+> {
+
+  /**
+   * 获取设置属性的 isGroup
+   */
+  get isGroup(): boolean;
+
+  /**
+   * 获取设置属性的 id
+   */
+  get id(): string;
+
+  /**
+   * 获取设置属性的 name
+   */
+  get name(): string | number | undefined;
+
+  /**
+   * 获取设置属性的 key
+   */
+  get key(): string | number | undefined;
+
+  /**
+   * 获取设置属性的 path
+   */
+  get path(): any[];
+
+  /**
+   * 获取设置属性的 title
+   */
+  get title(): any;
+
+  /**
+   * 获取设置属性的 setter
+   */
+  get setter(): IPublicTypeSetterType | null;
+
+  /**
+   * 获取设置属性的 expanded
+   */
+  get expanded(): boolean;
+
+  /**
+   * 获取设置属性的 extraProps
+   */
+  get extraProps(): IPublicTypeFieldExtraProps;
+
+  get props(): SettingTopEntry;
+
+  /**
+   * 获取设置属性对应的节点实例
+   */
+  get node(): Node | null;
+
+  /**
+   * 获取设置属性的父设置属性
+   */
+  readonly parent: SettingTopEntry | SettingField;
+
+  /**
+   * 获取顶级设置属性
+   */
+  get top(): SettingTopEntry;
+
+  /**
+   * 是否是 SettingField 实例
+   */
+  get isSettingField(): boolean;
+
+  /**
+   * componentMeta
+   */
+  get componentMeta(): ComponentMeta | null;
+
+  /**
+   * 获取设置属性的 items
+   */
+  get items(): Array<SettingField | IPublicTypeCustomView>;
+
+  /**
+   * 设置 key 值
+   * @param key
+   */
+  setKey(key: string | number): void;
+
+  /**
+   * 设置值
+   * @param val 值
+   */
+  setValue(val: IPublicTypeCompositeValue, extraOptions?: IPublicTypeSetValueOptions): void;
+
+  /**
+   * 设置子级属性值
+   * @param propName 子属性名
+   * @param value 值
+   */
+  setPropValue(propName: string | number, value: any): void;
+
+  /**
+   * 清空指定属性值
+   * @param propName
+   */
+  clearPropValue(propName: string | number): void;
+
+  /**
+   * 获取配置的默认值
+   * @returns
+   */
+  getDefaultValue(): any;
+
+  /**
+   * 获取值
+   * @returns
+   */
+  getValue(): any;
+
+  /**
+   * 获取子级属性值
+   * @param propName 子属性名
+   * @returns
+   */
+  getPropValue(propName: string | number): any;
+
+  /**
+   * 获取顶层附属属性值
+   */
+  getExtraPropValue(propName: string): any;
+
+  /**
+   * 设置顶层附属属性值
+   */
+  setExtraPropValue(propName: string, value: any): void;
+
+  /**
+   * 获取设置属性集
+   * @returns
+   */
+  getProps(): SettingTopEntry;
+
+  /**
+   * 是否绑定了变量
+   * @returns
+   */
+  isUseVariable(): boolean;
+
+  /**
+   * 设置绑定变量
+   * @param flag
+   */
+  setUseVariable(flag: boolean): void;
+
+  /**
+   * 创建一个设置 field 实例
+   * @param config
+   * @returns
+   */
+  createField(config: IPublicTypeFieldConfig): SettingField;
+
+  /**
+   * 获取值，当为变量时，返回 mock
+   * @returns
+   */
+  getMockOrValue(): any;
+
+  /**
+   * 销毁当前 field 实例
+   */
+  purge(): void;
+
+  /**
+   * 移除当前 field 实例
+   */
+  remove(): void;
+
+  /**
+   * 设置 autorun
+   * @param action
+   * @returns
+   */
+  onEffect(action: () => void): IPublicTypeDisposable;
+}
+
+export interface IPublicModelSettingField extends IBaseModelSettingField<
+  IPublicModelSettingTopEntry,
+  IPublicModelSettingField,
+  IPublicModelComponentMeta,
+  IPublicModelNode
+> {

 }
--- a/packages/types/src/shell/model/setting-prop-entry.ts
+++ b/packages/types/src/shell/model/setting-prop-entry.ts
@ -1,184 +1,6 @@
-import { IPublicTypeCustomView, IPublicTypeCompositeValue, IPublicTypeSetterType, IPublicTypeSetValueOptions, IPublicTypeFieldConfig, IPublicTypeFieldExtraProps } from '../type';
-import { IPublicModelNode, IPublicModelComponentMeta, IPublicModelSettingTopEntry } from './';
+import { IPublicModelSettingField } from './';

-export interface IPublicModelSettingPropEntry {
-
-  /**
-   * 获取设置属性的 isGroup
-   */
-  get isGroup(): boolean;
-
-  /**
-   * 获取设置属性的 id
-   */
-  get id(): string;
-
-  /**
-   * 获取设置属性的 name
-   */
-  get name(): string | number;
-
-  /**
-   * 获取设置属性的 key
-   */
-  get key(): string | number;
-
-  /**
-   * 获取设置属性的 path
-   */
-  get path(): any[];
-
-  /**
-   * 获取设置属性的 title
-   */
-  get title(): any;
-
-  /**
-   * 获取设置属性的 setter
-   */
-  get setter(): IPublicTypeSetterType | null;
-
-  /**
-   * 获取设置属性的 expanded
-   */
-  get expanded(): boolean;
-
-  /**
-   * 获取设置属性的 extraProps
-   */
-  get extraProps(): IPublicTypeFieldExtraProps;
-
-  get props(): IPublicModelSettingTopEntry;
-
-  /**
-   * 获取设置属性对应的节点实例
-   */
-  get node(): IPublicModelNode | null;
-
-  /**
-   * 获取设置属性的父设置属性
-   */
-  get parent(): IPublicModelSettingPropEntry;
-
-  /**
-   * 获取顶级设置属性
-   */
-  get top(): IPublicModelSettingTopEntry;
-
-  /**
-   * 是否是 SettingField 实例
-   */
-  get isSettingField(): boolean;
-
-  /**
-   * componentMeta
-   */
-  get componentMeta(): IPublicModelComponentMeta | null;
-
-  /**
-   * 获取设置属性的 items
-   */
-  get items(): Array<IPublicModelSettingPropEntry | IPublicTypeCustomView>;
-
-  /**
-   * 设置 key 值
-   * @param key
-   */
-  setKey(key: string | number): void;
-
-  /**
-   * 设置值
-   * @param val 值
-   */
-  setValue(val: IPublicTypeCompositeValue, extraOptions?: IPublicTypeSetValueOptions): void;
-
-  /**
-   * 设置子级属性值
-   * @param propName 子属性名
-   * @param value 值
-   */
-  setPropValue(propName: string | number, value: any): void;
-
-  /**
-   * 清空指定属性值
-   * @param propName
-   */
-  clearPropValue(propName: string | number): void;
-
-  /**
-   * 获取配置的默认值
-   * @returns
-   */
-  getDefaultValue(): any;
-
-  /**
-   * 获取值
-   * @returns
-   */
-  getValue(): any;
-
-  /**
-   * 获取子级属性值
-   * @param propName 子属性名
-   * @returns
-   */
-  getPropValue(propName: string | number): any;
-
-  /**
-   * 获取顶层附属属性值
-   */
-  getExtraPropValue(propName: string): any;
-
-  /**
-   * 设置顶层附属属性值
-   */
-  setExtraPropValue(propName: string, value: any): void;
-
-  /**
-   * 获取设置属性集
-   * @returns
-   */
-  getProps(): IPublicModelSettingTopEntry;
-
-  /**
-   * 是否绑定了变量
-   * @returns
-   */
-  isUseVariable(): boolean;
-
-  /**
-   * 设置绑定变量
-   * @param flag
-   */
-  setUseVariable(flag: boolean): void;
-
-  /**
-   * 创建一个设置 field 实例
-   * @param config
-   * @returns
-   */
-  createField(config: IPublicTypeFieldConfig): IPublicModelSettingPropEntry;
-
-  /**
-   * 获取值，当为变量时，返回 mock
-   * @returns
-   */
-  getMockOrValue(): any;
-
-  /**
-   * 销毁当前 field 实例
-   */
-  purge(): void;
-
-  /**
-   * 移除当前 field 实例
-   */
-  remove(): void;
-
-  /**
-   * 设置 autorun
-   * @param action
-   * @returns
-   */
-  onEffect(action: () => void): () => void;
-}
+/**
+ * @deprecated please use IPublicModelSettingField
+ */
+export type IPublicModelSettingPropEntry  = IPublicModelSettingField
--- a/packages/types/src/shell/model/setting-target.ts
+++ b/packages/types/src/shell/model/setting-target.ts
@ -1,101 +1,6 @@
-import { IPublicApiSetters } from '../api';
-import { IPublicModelEditor } from './';
+import { IPublicModelSettingField } from './';

-export interface IBaseModelSettingTarget<
-  SettingTarget
-> {
-
-  /**
-   * 同样类型的节点
-   */
-  readonly isSameComponent: boolean;
-
-  /**
-   * 一个
-   */
-  readonly isSingle: boolean;
-
-  /**
-   * 多个
-   */
-  readonly isMultiple: boolean;
-
-  /**
-   * 编辑器引用
-   */
-  readonly editor: IPublicModelEditor;
-
-  readonly setters: IPublicApiSetters;
-
-  /**
-   * 访问路径
-   */
-  readonly path: Array<string| number>;
-
-  /**
-   * 顶端
-   */
-  readonly top: SettingTarget;
-
-  /**
-   * 父级
-   */
-  readonly parent: SettingTarget;
-
-  /**
-   * 获取当前值
-   */
-  getValue: () => any;
-
-  /**
-   * 设置当前值
-   */
-  setValue: (value: any) => void;
-
-  /**
-   * 取得子项
-   */
-  get: (propName: string | number) => SettingTarget | null;
-
-  /**
-   * 取得子项
-   */
-  getProps?: () => SettingTarget;
-
-  /**
-   * 获取子项属性值
-   */
-  getPropValue: (propName: string | number) => any;
-
-  /**
-   * 设置子项属性值
-   */
-  setPropValue: (propName: string | number, value: any) => void;
-
-  /**
-   * 清除已设置值
-   */
-  clearPropValue: (propName: string | number) => void;
-
-  /**
-   * 获取顶层附属属性值
-   */
-  getExtraPropValue: (propName: string) => any;
-
-  /**
-   * 设置顶层附属属性值
-   */
-  setExtraPropValue: (propName: string, value: any) => void;
-
-  // @todo 补充 node 定义
-  /**
-   * 获取 node 中的第一项
-   */
-  getNode: () => any;
-}
-
-export interface IPublicModelSettingTarget extends IBaseModelSettingTarget<
-  IPublicModelSettingTarget
-> {
-
-}
+/**
+ * @deprecated please use IPublicModelSettingField
+ */
+export type IPublicModelSettingTarget = IPublicModelSettingField;
--- a/packages/types/src/shell/model/setting-top-entry.ts
+++ b/packages/types/src/shell/model/setting-top-entry.ts
@ -1,18 +1,21 @@
-import { IPublicModelNode, IPublicModelSettingPropEntry } from './';
+import { IPublicModelNode, IPublicModelSettingField } from './';

-export interface IPublicModelSettingTopEntry {
+export interface IPublicModelSettingTopEntry<
+  Node = IPublicModelNode,
+  SettingField = IPublicModelSettingField
+> {

  /**
   * 返回所属的节点实例
   */
-  get node(): IPublicModelNode | null;
+  get node(): Node | null;

  /**
   * 获取子级属性对象
   * @param propName
   * @returns
   */
-  get(propName: string | number): IPublicModelSettingPropEntry;
+  get(propName: string | number): SettingField | null;

  /**
   * 获取指定 propName 的值
@ -27,4 +30,10 @@ export interface IPublicModelSettingTopEntry {
   * @param value
   */
  setPropValue(propName: string | number, value: any): void;
+
+  /**
+   * 清除指定 propName 的值
+   * @param propName
+   */
+  clearPropValue(propName: string | number): void;
 }
--- a/packages/types/src/shell/type/advanced.ts
+++ b/packages/types/src/shell/type/advanced.ts
@ -1,6 +1,6 @@
 import { ComponentType, ReactElement } from 'react';
 import { IPublicTypeNodeData, IPublicTypeSnippet, IPublicTypeInitialItem, IPublicTypeFilterItem, IPublicTypeAutorunItem, IPublicTypeCallbacks, IPublicTypeLiveTextEditingConfig } from './';
-import { IPublicModelSettingTarget } from '../model';
+import { IPublicModelNode, IPublicModelSettingField } from '../model';

 /**
 * 高级特性配置
@ -17,7 +17,7 @@ export interface IPublicTypeAdvanced {
  /**
   * 拖入容器时，自动带入 children 列表
   */
-  initialChildren?: IPublicTypeNodeData[] | ((target: IPublicModelSettingTarget) => IPublicTypeNodeData[]);
+  initialChildren?: IPublicTypeNodeData[] | ((target: IPublicModelNode) => IPublicTypeNodeData[]);

  /**
   * 样式 及 位置，handle 上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式
--- a/packages/types/src/shell/type/dynamic-props.ts
+++ b/packages/types/src/shell/type/dynamic-props.ts
@ -1,3 +1,3 @@
-import { IPublicModelSettingTarget } from '../model/setting-target';
+import { IPublicModelSettingField } from '../model';

-export type IPublicTypeDynamicProps = (target: IPublicModelSettingTarget) => Record<string, unknown>;
+export type IPublicTypeDynamicProps = (target: IPublicModelSettingField) => Record<string, unknown>;
--- a/packages/types/src/shell/type/field-extra-props.ts
+++ b/packages/types/src/shell/type/field-extra-props.ts
@ -1,4 +1,4 @@
-import { IPublicModelSettingPropEntry, IPublicModelSettingTarget } from '../model';
+import { IPublicModelSettingField } from '../model';
 import { IPublicTypeLiveTextEditingConfig } from './';

 /**
@ -19,28 +19,28 @@ export interface IPublicTypeFieldExtraProps {
  /**
   * get value for field
   */
-  getValue?: (target: IPublicModelSettingPropEntry, fieldValue: any) => any;
+  getValue?: (target: IPublicModelSettingField, fieldValue: any) => any;

  /**
   * set value for field
   */
-  setValue?: (target: IPublicModelSettingPropEntry, value: any) => void;
+  setValue?: (target: IPublicModelSettingField, value: any) => void;

  /**
   * the field conditional show, is not set always true
   * @default undefined
   */
-  condition?: (target: IPublicModelSettingPropEntry) => boolean;
+  condition?: (target: IPublicModelSettingField) => boolean;

  /**
   * autorun when something change
   */
-  autorun?: (target: IPublicModelSettingTarget) => void;
+  autorun?: (target: IPublicModelSettingField) => void;

  /**
   * is this field is a virtual field that not save to schema
   */
-  virtual?: (target: IPublicModelSettingTarget) => boolean;
+  virtual?: (target: IPublicModelSettingField) => boolean;

  /**
   * default collapsed when display accordion
--- a/packages/types/src/shell/type/metadata.ts
+++ b/packages/types/src/shell/type/metadata.ts
@ -1,5 +1,5 @@
 import { IPublicTypePropType, IPublicTypeComponentAction } from './';
-import { IPublicModelNode, IPublicModelProp, IPublicModelSettingTarget } from '../model';
+import { IPublicModelNode, IPublicModelProp, IPublicModelSettingField } from '../model';

 /**
 * 嵌套控制函数
@ -93,11 +93,11 @@ export interface IPublicTypeComponentConfigure {

 export interface IPublicTypeInitialItem {
  name: string;
-  initial: (target: IPublicModelSettingTarget, currentValue: any) => any;
+  initial: (target: IPublicModelSettingField, currentValue: any) => any;
 }
 export interface IPublicTypeFilterItem {
  name: string;
-  filter: (target: IPublicModelSettingTarget | null, currentValue: any) => any;
+  filter: (target: IPublicModelSettingField | null, currentValue: any) => any;
 }
 export interface IPublicTypeAutorunItem {
  name: string;
--- a/packages/types/src/shell/type/setter-config.ts
+++ b/packages/types/src/shell/type/setter-config.ts
@ -1,5 +1,4 @@
-import { IPublicModelSettingTarget } from '../model/setting-target';
-import { IPublicTypeCustomView, IPublicTypeCompositeValue, IPublicTypeTitleContent } from '..';
+import { IPublicTypeCustomView, IPublicTypeCompositeValue, IPublicTypeTitleContent, IPublicModelSettingField } from '..';
 import { IPublicTypeDynamicProps } from './dynamic-props';

 /**
@ -37,7 +36,7 @@ export interface IPublicTypeSetterConfig {
   *
   * @todo initialValue 可能要和 defaultValue 二选一
   */
-  initialValue?: any | ((target: IPublicModelSettingTarget) => any);
+  initialValue?: any | ((target: IPublicModelSettingField) => any);

  defaultValue?: any;

@ -51,7 +50,7 @@ export interface IPublicTypeSetterConfig {
  /**
   * 给 MixedSetter 用于判断优先选中哪个
   */
-  condition?: (target: IPublicModelSettingTarget) => boolean;
+  condition?: (target: IPublicModelSettingField) => boolean;

  /**
   * 给 MixedSetter，切换值时声明类型