diff --git a/packages/view-design/src/components/custom-control-material/custom-control-material.tsx b/packages/view-design/src/components/custom-control-material/custom-control-material.tsx
index 11f18a6fa160550db26b0546e314abc62945a12e..2ab4ad3e68cdb5f596e621d9f61fb44919b98456 100644
--- a/packages/view-design/src/components/custom-control-material/custom-control-material.tsx
+++ b/packages/view-design/src/components/custom-control-material/custom-control-material.tsx
@@ -42,10 +42,11 @@ export default defineComponent({
       if (!app) {
         return;
       }
-      const service = await app.deService.getService(
-        props.context,
-        'viewdesign.pssyspfplugin',
+      const entity = await ibiz.hub.getAppDataEntity(
+        'PSSysPFPlugin',
+        props.context.srfappid,
       );
+      const service = await app.deService.getService(props.context, entity.id!);
       if (!service) {
         return;
       }
diff --git a/packages/view-design/src/index.ts b/packages/view-design/src/index.ts
index 59a145c30ce1fc0c0159987a54b23263b078f78a..6ea22deac1747e42f419cf6dd2776a9118f42a81 100644
--- a/packages/view-design/src/index.ts
+++ b/packages/view-design/src/index.ts
@@ -9,6 +9,7 @@ import Services from './service';
 import Editor from './editor';
 import PanelItems from './panel-items';
 import Components from './components';
+import MDDesign from './md-design';
 
 export default {
   install(app: App) {
@@ -19,5 +20,6 @@ export default {
     app.use(Editor);
     app.component('SketchRule', SketchRule);
     app.use(Components);
+    app.use(MDDesign);
   },
 };
diff --git a/packages/view-design/src/md-design/components/index.ts b/packages/view-design/src/md-design/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24b77dd3c6943d87b94d01a2b8c6d0e3e4a0f4a1
--- /dev/null
+++ b/packages/view-design/src/md-design/components/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import IBizMDDesignPreview from './md-design-preview/md-design-preview';
+
+export default {
+  install(app: App): void {
+    app.component('IBizMDDesignPreview', IBizMDDesignPreview);
+  },
+};
diff --git a/packages/view-design/src/md-design/components/md-design-preview/md-design-preview.scss b/packages/view-design/src/md-design/components/md-design-preview/md-design-preview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6f76dafe7b30047f4e707d15cdfc25ac9161bf17
--- /dev/null
+++ b/packages/view-design/src/md-design/components/md-design-preview/md-design-preview.scss
@@ -0,0 +1,3 @@
+@include b(md-design-preview) {
+  width: 100%;
+}
diff --git a/packages/view-design/src/md-design/components/md-design-preview/md-design-preview.tsx b/packages/view-design/src/md-design/components/md-design-preview/md-design-preview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc58735cfd3da2574e59ed3faf2cd15059ca64f9
--- /dev/null
+++ b/packages/view-design/src/md-design/components/md-design-preview/md-design-preview.tsx
@@ -0,0 +1,18 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { PropType, defineComponent } from 'vue';
+import './md-design-preview.scss';
+
+export default defineComponent({
+  name: 'IBizMDDesignPreview',
+  props: {
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+  },
+  setup() {
+    const ns = useNamespace('md-design-preview');
+    return { ns };
+  },
+  render() {
+    return <div class={this.ns.b()}>preview</div>;
+  },
+});
diff --git a/packages/view-design/src/md-design/entity/index.ts b/packages/view-design/src/md-design/entity/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bbd4c606fcddbb11d77acf52566ea024482c870c
--- /dev/null
+++ b/packages/view-design/src/md-design/entity/index.ts
@@ -0,0 +1 @@
+export { PSDEList } from './psdelist/psdelist';
diff --git a/packages/view-design/src/md-design/entity/psdelist/psdelist.ts b/packages/view-design/src/md-design/entity/psdelist/psdelist.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4972c9cf73e213538f6005cb2b668f00420c08a5
--- /dev/null
+++ b/packages/view-design/src/md-design/entity/psdelist/psdelist.ts
@@ -0,0 +1,13 @@
+import { AppDataEntity } from '@ibiz-template/runtime';
+
+export class PSDEList extends AppDataEntity {
+  get itemtype() {
+    return 'DELISTCONFIG';
+  }
+
+  clone(): PSDEList {
+    const entity = new PSDEList(this._entity, this._data);
+    entity.srfkey = this.srfkey;
+    return entity;
+  }
+}
diff --git a/packages/view-design/src/md-design/index.ts b/packages/view-design/src/md-design/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..924a523e61496238158e117ed74358ca0cc9da9c
--- /dev/null
+++ b/packages/view-design/src/md-design/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import Views from './views';
+import PanelItems from './panel-items';
+import Components from './components';
+
+export default {
+  install(app: App): void {
+    app.use(Views);
+    app.use(PanelItems);
+    app.use(Components);
+  },
+};
diff --git a/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.controller.ts b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2afe2102e12d333c3a9958e0bbd4f19a3a3422c9
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.controller.ts
@@ -0,0 +1,145 @@
+import {
+  IAppDEService,
+  UIActionUtil,
+  getUIActionById,
+} from '@ibiz-template/runtime';
+import {
+  IDETBGroupItem,
+  IDETBUIActionItem,
+  IDEToolbar,
+  IDEToolbarItem,
+} from '@ibiz/model-core';
+import { RuntimeError } from '@ibiz-template/core';
+import { PanelDesignMaterialAreaController } from '../../../panel';
+import { DEListDesignMaterialAreaState } from './de-list-design-material-area.state';
+
+export class DEListDesignMaterialAreaController extends PanelDesignMaterialAreaController {
+  /**
+   * 状态
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 19:11:45
+   * @type {DEListDesignMaterialAreaState}
+   */
+  declare state: DEListDesignMaterialAreaState;
+
+  /**
+   * 数据项服务
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 19:11:14
+   * @protected
+   * @type {IAppDEService}
+   */
+  protected dataItemService!: IAppDEService;
+
+  /**
+   * 列表逻辑服务
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 19:11:34
+   * @protected
+   * @type {IAppDEService}
+   */
+  protected listLogicService!: IAppDEService;
+
+  /**
+   * 创建状态
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 19:11:57
+   * @protected
+   * @return {*}  {DEListDesignMaterialAreaState}
+   */
+  protected createState(): DEListDesignMaterialAreaState {
+    return new DEListDesignMaterialAreaState(this.parent?.state);
+  }
+
+  /**
+   * 初始化基础资源
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 19:11:11
+   * @protected
+   * @return {*}  {Promise<void>}
+   */
+  protected async initBaseResource(): Promise<void> {
+    await super.initBaseResource();
+    const app = ibiz.hub.getApp(this.view.model.appId);
+    this.dataItemService = await app.deService.getService(
+      this.viewContext,
+      'mddesign.psdelistitem',
+    );
+    this.listLogicService = await app.deService.getService(
+      this.viewContext,
+      'mddesign.psdelistlogic',
+    );
+    this.state.dataItemActions = this.initChildActions('dataitem');
+    this.state.listLogicActions = this.initChildActions('ctrllogic');
+  }
+
+  /**
+   * 初始化子行为项
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 19:11:45
+   * @private
+   * @param {string} tag
+   * @return {*}  {IDEToolbarItem[]}
+   */
+  private initChildActions(tag: string): IDEToolbarItem[] {
+    const structureToolbar: IDEToolbar =
+      this.view.getPanelDesignMetaData().structure!;
+    const toolbarItems: IDEToolbarItem[] =
+      structureToolbar.detoolbarItems || [];
+    if (toolbarItems && toolbarItems.length > 0) {
+      const curToolbar = toolbarItems.find(item => {
+        return item.id === tag && item.itemType === 'ITEMS';
+      });
+      if (curToolbar) {
+        return (curToolbar as IDETBGroupItem).detoolbarItems || [];
+      }
+    }
+    return [];
+  }
+
+  /**
+   * 执行行为
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 20:11:35
+   * @param {MouseEvent} event
+   * @param {IDEToolbarItem} action
+   * @return {*}  {Promise<void>}
+   */
+  public async excuteAction(
+    event: MouseEvent,
+    action: IDEToolbarItem,
+  ): Promise<void> {
+    if (action.itemType === 'DEUIACTION') {
+      const actionId = (action as IDETBUIActionItem).uiactionId;
+      const uiAction = await getUIActionById(actionId!, action.appId);
+      if (!uiAction) {
+        throw new RuntimeError(
+          ibiz.i18n.t('runtime.controller.control.toolbar.noFound', {
+            actionId,
+          }),
+        );
+      }
+      const args = this.panel.getEventArgs();
+      await UIActionUtil.execAndResolved(
+        actionId!,
+        {
+          ...args,
+          data: [],
+          event,
+        },
+        action.appId,
+      );
+    }
+  }
+
+  protected async load(): Promise<void> {
+    // super.load();
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.provider.ts b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0e4e24d16ffb3d5c18a6b91661c8b45b1df4ea08
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.provider.ts
@@ -0,0 +1,21 @@
+import {
+  IPanelItemController,
+  IPanelItemProvider,
+  IPanelController,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { DEListDesignMaterialAreaController } from './de-list-design-material-area.controller';
+
+export class DEListDesignMaterialAreaProvider implements IPanelItemProvider {
+  component = 'IBizDEListDesignMaterialArea';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: IPanelController,
+    parent?: IPanelItemController,
+  ): Promise<DEListDesignMaterialAreaController> {
+    const c = new DEListDesignMaterialAreaController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.scss b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d21d8bf2a8e4c186c0513dea652e1c66e9aedbbb
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.scss
@@ -0,0 +1,24 @@
+@include b(de-list-design-material-area) {
+  width: 100%;
+  height: 100%;
+  border: 1px solid getCssVar(color, border);
+}
+
+@include b(de-list-design-material-area-caption) {
+  flex: 0 0 auto;
+  padding: 0 10px;
+  font-size: 18px;
+  line-height: 40px;
+  cursor: pointer;
+}
+
+@include b(de-list-design-material-area-container) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+@include b(de-list-design-material-area-content) {
+  flex: 1 1 0;
+  overflow: auto;
+}
diff --git a/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.state.ts b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab80feeb6038d569235e30336eace6a97ac53759
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.state.ts
@@ -0,0 +1,40 @@
+import { IDEToolbarItem } from '@ibiz/model-core';
+import { PanelDesignMaterialAreaState } from '../../../panel';
+
+export class DEListDesignMaterialAreaState extends PanelDesignMaterialAreaState {
+  /**
+   * 数据项
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 20:11:07
+   * @type {IData[]}
+   */
+  dataItems: IData[] = [];
+
+  /**
+   * 数据项行为
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 20:11:19
+   * @type {IDEToolbarItem[]}
+   */
+  dataItemActions: IDEToolbarItem[] = [];
+
+  /**
+   * 列表逻辑项
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 20:11:30
+   * @type {IData[]}
+   */
+  listLogicItems: IData[] = [];
+
+  /**
+   * 列表逻辑行为
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 20:11:42
+   * @type {IDEToolbarItem[]}
+   */
+  listLogicActions: IDEToolbarItem[] = [];
+}
diff --git a/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.tsx b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..11836b7d464cebfd93fc02210ec8bf9c01783a85
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/de-list-design-material-area.tsx
@@ -0,0 +1,132 @@
+import { PropType, defineComponent, ref } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IDEToolbarItem, IPanelItem } from '@ibiz/model-core';
+import { DEListDesignMaterialAreaController } from './de-list-design-material-area.controller';
+import './de-list-design-material-area.scss';
+
+export default defineComponent({
+  name: 'IBizDEListDesignMaterialArea',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelItem>,
+      required: true,
+    },
+    controller: {
+      type: DEListDesignMaterialAreaController,
+      required: true,
+    },
+  },
+  setup() {
+    const ns = useNamespace('de-list-design-material-area');
+
+    // 分割值
+    const splitValue = ref(0.5);
+
+    return {
+      ns,
+      splitValue,
+    };
+  },
+  render() {
+    const c = this.controller;
+    if (c.panelDesignMaterialPage?.state.activePage !== 'controls') {
+      return (
+        <div class={this.ns.b()}>
+          <iBizSplit
+            v-model={this.splitValue}
+            mode='vertical'
+            min='40px'
+            max='40px'
+          >
+            {{
+              top: () => {
+                return (
+                  <iBizDesignStructureTree
+                    items={c.state.treeData}
+                    isDefaultLayout={c.view.context.srfdefaultlayoutpanel}
+                    activeNode={c.state.activeItem}
+                    onNodeSelect={(data: IData) => {
+                      c.handleItemSelect(data.data);
+                    }}
+                    onNodeDrop={(
+                      draggingNode: IData,
+                      dropNode: IData,
+                      dropType: string,
+                    ) => {
+                      c.onNodeDrop(draggingNode, dropNode, dropType);
+                    }}
+                    onItemClick={(tag: string) => {
+                      c.handStructureTreeClick(tag);
+                    }}
+                    onTitleClick={() => {
+                      c.view.call('onActiveRoot');
+                    }}
+                  ></iBizDesignStructureTree>
+                );
+              },
+              bottom: () => {
+                return (
+                  <div class={this.ns.b('container')}>
+                    <div
+                      class={this.ns.b('caption')}
+                      onClick={() => {
+                        c.view.call('onActiveRoot');
+                      }}
+                    >
+                      {this.controller.view?.state?.data?.srfmajortext || ''}
+                    </div>
+                    <div class={this.ns.b('content')}>
+                      <iBizDesignCollapseList
+                        title='数据项'
+                        items={c.state.dataItems}
+                        actions={c.state.dataItemActions}
+                        activeItem={c.state.activeItem}
+                        onItemClick={(item: IData) => c.handleItemSelect(item)}
+                        onActionClick={({
+                          event,
+                          action,
+                        }: {
+                          event: MouseEvent;
+                          action: IDEToolbarItem;
+                        }) => c.excuteAction(event, action)}
+                        // onRemove={(item: IData) => c.removeViewRV(item)}
+                      ></iBizDesignCollapseList>
+                      <iBizDesignCollapseList
+                        title='列表逻辑'
+                        items={c.state.listLogicItems}
+                        actions={c.state.listLogicActions}
+                        activeItem={c.state.activeItem}
+                        onItemClick={(item: IData) => c.handleItemSelect(item)}
+                        onActionClick={({
+                          event,
+                          action,
+                        }: {
+                          event: MouseEvent;
+                          action: IDEToolbarItem;
+                        }) => c.excuteAction(event, action)}
+                        // onRemove={(item: IData) => c.removeViewLogic(item)}
+                      ></iBizDesignCollapseList>
+                    </div>
+                  </div>
+                );
+              },
+            }}
+          </iBizSplit>
+        </div>
+      );
+    }
+    return (
+      <div class={this.ns.b()}>
+        <iBizDesignMaterialPage
+          groups={this.controller.materialGroups}
+          activeGroups={
+            this.controller.panelDesignMaterialPage?.state.activeGroup
+          }
+          isCollapse={this.controller.panelDesignMaterialPage?.state.isCollapse}
+          context={this.controller.panel.context}
+          params={this.controller.panel.params}
+        ></iBizDesignMaterialPage>
+      </div>
+    );
+  },
+});
diff --git a/packages/view-design/src/md-design/panel-items/de-list-design-material-area/index.ts b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef1982bee090703e9b1202277f5e7d7f7f0fdb29
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/de-list-design-material-area/index.ts
@@ -0,0 +1,15 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import DEListDesignMaterialArea from './de-list-design-material-area';
+import { DEListDesignMaterialAreaProvider } from './de-list-design-material-area.provider';
+
+export default {
+  install(app: App): void {
+    // 注册组件
+    app.component('IBizDEListDesignMaterialArea', DEListDesignMaterialArea);
+    registerPanelItemProvider(
+      'RAWITEM_DE_LIST_DESIGN_MATERIAL_AREA',
+      () => new DEListDesignMaterialAreaProvider(),
+    );
+  },
+};
diff --git a/packages/view-design/src/md-design/panel-items/index.ts b/packages/view-design/src/md-design/panel-items/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1bf7d1cd90e59cae4d1d4b3f7e32e98f851c933d
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import DEListDesignMaterialArea from './de-list-design-material-area';
+import MDDesignPreviewSwitch from './md-design-preview-switch';
+import MDDesignContent from './md-design-content';
+
+export default {
+  install(app: App): void {
+    app.use(DEListDesignMaterialArea);
+    app.use(MDDesignPreviewSwitch);
+    app.use(MDDesignContent);
+  },
+};
diff --git a/packages/view-design/src/md-design/panel-items/md-design-content/index.ts b/packages/view-design/src/md-design/panel-items/md-design-content/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8928e0b11a839563afbbb1eade4724bc2a595635
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-content/index.ts
@@ -0,0 +1,15 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import MDDesignContent from './md-design-content';
+import { MDDesignContentProvider } from './md-design-content.provider';
+
+export default {
+  install(app: App): void {
+    // 注册组件
+    app.component('IBizMDDesignContent', MDDesignContent);
+    registerPanelItemProvider(
+      'RAWITEM_MD_DESIGN_CONTENT',
+      () => new MDDesignContentProvider(),
+    );
+  },
+};
diff --git a/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.controller.ts b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e345cbc56e4178ff6f1b92864b6adad9152e0ed5
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.controller.ts
@@ -0,0 +1,9 @@
+import { PanelDesignContentController } from '../../../panel-items/panel-design-content/panel-design-content.controller';
+import { MDDesignPreviewSwitchController } from '../md-design-preview-switch/md-design-preview-switch.controller';
+
+export class MDDesignContentController extends PanelDesignContentController {
+  get mdDesignPreviewSwitch(): MDDesignPreviewSwitchController | undefined {
+    return this.panel.panelItems
+      .md_design_preview_switch as MDDesignPreviewSwitchController;
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.provider.ts b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d408c8bb63cf97f67c3bf0672803f18718e05e4
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.provider.ts
@@ -0,0 +1,21 @@
+import {
+  IPanelItemController,
+  IPanelItemProvider,
+  IPanelController,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { MDDesignContentController } from './md-design-content.controller';
+
+export class MDDesignContentProvider implements IPanelItemProvider {
+  component = 'IBizMDDesignContent';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: IPanelController,
+    parent?: IPanelItemController,
+  ): Promise<MDDesignContentController> {
+    const c = new MDDesignContentController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.scss b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.scss
new file mode 100644
index 0000000000000000000000000000000000000000..67b3aab97b7f23b0f2631c45e5306c20c012db6c
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.scss
@@ -0,0 +1,195 @@
+/* stylelint-disable selector-class-pattern */
+@include b(md-design-content) {
+  --container-border-color: #d9d9d9;
+  --container-border-hover-color: orange;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 2px solid transparent;
+
+  @include m(mob) {
+    @include b(md-design-content-container) {
+      border: 10px solid black;
+      border-radius: 50px;
+    }
+
+    @include b(design-mb-ruler-content-wrapper) {
+      border-radius: 50px;
+    }
+  }
+
+  @include when(active) {
+    border-color: var(--container-border-hover-color);
+  }
+}
+
+@include b(md-design-content-container) {
+  display: flex;
+  flex: 1;
+  flex-flow: column nowrap;
+
+  @include e(bar) {
+    position: relative;
+    z-index: 2;
+    display: block;
+    width: 100%;
+    padding: 0.6rem 2.2rem;
+    fill: hsl(0deg 0% 49% / 30%);
+  }
+}
+
+@include b(md-design-content-tip-container) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 50px;
+  font-size: 30px;
+}
+
+@include b(md-design-content) {
+  @include m(light) {
+    --el-disabled-text-color: #{getCssVar(color, disabled, text)};
+
+    #{getCssVarName(color, disabled, text)}: rgba(
+      var(#{getCssVarName(grey, 9)}),
+      0.35
+    );
+
+    --el-disabled-bg-color: #{getCssVar(color, disabled, fill)};
+
+    #{getCssVarName(color, disabled, fill)}: rgba(
+      var(#{getCssVarName(grey, 8)}),
+      0.04
+    );
+
+    --el-disabled-border-color: #{getCssVar(color, disabled, border)};
+
+    #{getCssVarName(color, disabled, border)}: rgba(
+      var(#{getCssVarName(grey, 1)}),
+      1
+    );
+
+    --el-text-color-placeholder: #{getCssVar(color, text, 3)};
+
+    #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(grey, 4)}), 1);
+
+    --el-fill-color-light: #{getCssVar(color, bg, 2)};
+
+    #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(white)}), 1);
+
+    --el-border-color: #{getCssVar(color, border)};
+
+    #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(grey, 9)}), 0.1);
+
+    --el-font-size-base: #{getCssVar(font-size, regular)};
+
+    #{getCssVarName('font-size', 'regular')}: 14px;
+
+    --el-text-color-regular: #{getCssVar(color, text, 0)};
+
+    #{getCssVarName(color, text, 0)}: rgba(var(#{getCssVarName(grey, 9)}), 1);
+
+    --el-fill-color-blank: transparent;
+
+    #{getCssVarName(border, radius, small)}: 4px;
+
+    --el-border-radius-base: #{getCssVar(border, radius, small)};
+
+    #{getCssVarName(color, primary)}: rgba(
+      var(#{getCssVarName(blue, cyan, 4)}),
+      1
+    );
+    #{getCssVarName(color, primary, text)}: rgba(
+      var(#{getCssVarName(white)}),
+      1
+    );
+    #{getCssVarName(color, info)}: rgba(
+      var(#{getCssVarName(blue, cyan, 4)}),
+      1
+    );
+    #{getCssVarName(color, info, text)}: rgba(var(#{getCssVarName(white)}), 1);
+    #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 5)}), 1);
+    #{getCssVarName(color, success, text)}: rgba(
+      var(#{getCssVarName(white)}),
+      1
+    );
+    #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 5)}), 1);
+    #{getCssVarName(color, warning, text)}: rgba(
+      var(#{getCssVarName(white)}),
+      1
+    );
+    #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 5)}), 1);
+    #{getCssVarName(color, danger, text)}: rgba(
+      var(#{getCssVarName(white)}),
+      1
+    );
+
+    --el-border-color-light: #{getCssVar(color, border)};
+    --el-border: var(--el-border-width) var(--el-border-style)
+      var(--el-border-color);
+
+    #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(grey, 6)}), 1);
+    #{getCssVarName(editor, default, text-color)}: getCssVar(color, text, 2);
+    #{getCssVarName(editor, default, border-color)}: getCssVar(color, border);
+    #{getCssVarName(editor, hover, border-color)}: getCssVar(
+      color,
+      primary,
+      hover
+    );
+
+    --el-color-primary: #{getCssVar(color, primary)};
+
+    .el-button.el-button {
+      &.el-button {
+        --el-button-text-color: #{getCssVar(color, primary, text)};
+        --el-button-bg-color: #{getCssVar(color, primary)};
+      }
+
+      &.el-button--primary {
+        --el-button-text-color: #{getCssVar(color, primary, text)};
+        --el-button-bg-color: #{getCssVar(color, primary)};
+      }
+
+      &.el-button--info {
+        --el-button-text-color: var(--el-text-color-regular);
+        --el-button-bg-color: var(--el-fill-color-blank);
+        --el-button-hover-bg-color: var(--el-color-primary-light-9);
+        --el-button-hover-text-color: var(--el-color-primary);
+      }
+
+      &.el-button--success {
+        --el-button-text-color: #{getCssVar(color, success, text)};
+        --el-button-bg-color: #{getCssVar(color, success)};
+      }
+
+      &.el-button--warning {
+        --el-button-text-color: #{getCssVar(color, warning, text)};
+        --el-button-bg-color: #{getCssVar(color, warning)};
+      }
+
+      &.el-button--danger {
+        --el-button-text-color: #{getCssVar(color, danger, text)};
+        --el-button-bg-color: #{getCssVar(color, danger)};
+      }
+    }
+  }
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.state.ts b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c02ec3da1e97eb454335fa0ac2d71c8208d8df38
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.state.ts
@@ -0,0 +1,3 @@
+import { PanelDesignContentState } from '../../../panel-items/panel-design-content/panel-design-content.state';
+
+export class MDDesignContentState extends PanelDesignContentState {}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.tsx b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..861bcae8d6f3842d23abc14d07cf0d23ab81e56f
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-content/md-design-content.tsx
@@ -0,0 +1,157 @@
+import { PropType, defineComponent, onUnmounted, provide, ref } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IPanelItem } from '@ibiz/model-core';
+import { MDDesignContentController } from './md-design-content.controller';
+import './md-design-content.scss';
+import { PanelDesignContext } from '../../../utils';
+
+export default defineComponent({
+  name: 'IBizMDDesignContent',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelItem>,
+      required: true,
+    },
+    controller: {
+      type: MDDesignContentController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('md-design-content');
+    const shellNS = useNamespace('light-theme-shell');
+
+    // 主题
+    const theme = ref('light');
+    const panelDesignContext = new PanelDesignContext(props.controller);
+    provide('panelDesignContext', panelDesignContext);
+    // 是否激活
+    const active = ref(false);
+
+    // 处理选中数据变化
+    const handleSelectChange = (data?: IData | null) => {
+      if (data) {
+        active.value = data.id === props.controller.view.state.data?.srfkey;
+      } else {
+        active.value = false;
+      }
+    };
+
+    props.controller.view.select.on(handleSelectChange);
+
+    onUnmounted(() => {
+      props.controller.view.select.off(handleSelectChange);
+    });
+
+    return {
+      ns,
+      active,
+      shellNS,
+      theme,
+    };
+  },
+  render() {
+    const c = this.controller;
+
+    const previewSwitchState = c.mdDesignPreviewSwitch?.state || ({} as IData);
+
+    const isPreview = previewSwitchState.displayMode === 'preview';
+
+    const renderTip = () => {
+      return (
+        <div
+          class={this.ns.b('tip-container')}
+          style={{ display: isPreview ? 'none' : '' }}
+        >
+          {c.view.context.srfdefaultlayoutpanel
+            ? '暂无布局面板'
+            : '暂未支持默认布局面板预览'}
+        </div>
+      );
+    };
+
+    const renderMob = () => {
+      return (
+        <div class={this.ns.b('container')}>
+          <svg class={this.ns.be('container', 'bar')} viewBox='0 0 1384.3 40.3'>
+            <path
+              class='st0'
+              d='M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z'
+            ></path>
+            <circle class='st0' cx='1299' cy='20.2' r='20'></circle>
+            <path
+              class='st0'
+              d='M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z'
+            ></path>
+          </svg>
+          {c.view.context.pssysviewpanel ? (
+            <iBizDesignArea
+              context={this.controller.panel.context}
+              params={this.controller.panel.params}
+              data={this.controller.view.state.rootData}
+              v-show={!isPreview}
+            ></iBizDesignArea>
+          ) : (
+            renderTip()
+          )}
+          <iBizMDDesignPreview
+            context={c.panel.context}
+            params={c.panel.params}
+            v-show={isPreview}
+          ></iBizMDDesignPreview>
+        </div>
+      );
+    };
+
+    const renderWeb = () => {
+      return (
+        <div class={this.ns.b('container')}>
+          {c.view.context.pssysviewpanel ? (
+            <iBizDesignArea
+              context={this.controller.panel.context}
+              params={this.controller.panel.params}
+              data={this.controller.view.state.rootData}
+              v-show={!isPreview}
+            ></iBizDesignArea>
+          ) : (
+            renderTip()
+          )}
+          <iBizMDDesignPreview
+            context={c.panel.context}
+            params={c.panel.params}
+            v-show={isPreview}
+          ></iBizMDDesignPreview>
+        </div>
+      );
+    };
+
+    const viewportState = c.panelDesignViewportSetting?.state || ({} as IData);
+
+    const { type, width, height, transform, zoom } = viewportState;
+
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.ns.m(this.theme),
+          this.shellNS.b(),
+          this.ns.m(type),
+          this.ns.is('active', this.active),
+        ]}
+        onClick={e => {
+          e.stopPropagation();
+          c.view.call('onActiveRoot');
+        }}
+      >
+        <iBiz-design-mb-ruler
+          scale={zoom}
+          rectWidth={transform ? height : width}
+          rectHeight={transform ? width : height}
+          onScaleChange={(val: number) => c.handleScaleChange(val)}
+        >
+          {type === 'mob' ? renderMob() : renderWeb()}
+        </iBiz-design-mb-ruler>
+      </div>
+    );
+  },
+});
diff --git a/packages/view-design/src/md-design/panel-items/md-design-preview-switch/index.ts b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a6e64206c854da27aff1ba532a7a40751ee2406
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/index.ts
@@ -0,0 +1,15 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import MDDesignPreviewSwitch from './md-design-preview-switch';
+import { MDDesignPreviewSwitchProvider } from './md-design-preview-switch.provider';
+
+export default {
+  install(app: App): void {
+    // 注册组件
+    app.component('IBizMDDesignPreviewSwitch', MDDesignPreviewSwitch);
+    registerPanelItemProvider(
+      'RAWITEM_MD_DESIGN_PREVIEW_SWITCH',
+      () => new MDDesignPreviewSwitchProvider(),
+    );
+  },
+};
diff --git a/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.controller.ts b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..07995a892705a0ba1e97b605bc897854dd6992e8
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.controller.ts
@@ -0,0 +1,10 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { MDDesignPreviewSwitchState } from './md-design-preview-switch.state';
+
+export class MDDesignPreviewSwitchController extends PanelItemController {
+  declare state: MDDesignPreviewSwitchState;
+
+  protected createState(): MDDesignPreviewSwitchState {
+    return new MDDesignPreviewSwitchState(this.parent?.state);
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.provider.ts b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9255e2e873471241403c185665a3cc11f3189979
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.provider.ts
@@ -0,0 +1,21 @@
+import {
+  IPanelItemController,
+  IPanelItemProvider,
+  IPanelController,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { MDDesignPreviewSwitchController } from './md-design-preview-switch.controller';
+
+export class MDDesignPreviewSwitchProvider implements IPanelItemProvider {
+  component = 'IBizMDDesignPreviewSwitch';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: IPanelController,
+    parent?: IPanelItemController,
+  ): Promise<MDDesignPreviewSwitchController> {
+    const c = new MDDesignPreviewSwitchController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.scss b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.scss
new file mode 100644
index 0000000000000000000000000000000000000000..33359c6036506f83d31f9f59a936ee538e13799c
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.scss
@@ -0,0 +1,20 @@
+/* stylelint-disable selector-class-pattern */
+@include b(md-design-preview-switch) {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 0 10px;
+
+  --el-color-primary: var(#{getCssVarName(color, primary, light, active)});
+  --el-border-color-hover: var(#{getCssVarName(color, primary, light, active)});
+
+  .el-radio-button {
+    --el-radio-button-checked-bg-color: transparent;
+    --el-radio-button-checked-text-color: var(--el-color-primary);
+
+    .el-radio-button__inner {
+      padding: 4px 11px;
+      font-size: 14px;
+    }
+  }
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.state.ts b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67fbbb8183fe4be06d46c3b2e247e980a112e17e
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.state.ts
@@ -0,0 +1,12 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+export class MDDesignPreviewSwitchState extends PanelItemState {
+  /**
+   * 呈现模式
+   *
+   * @author zhanghengfeng
+   * @date 2024-11-12 20:11:06
+   * @type {('layout' | 'preview')}
+   */
+  displayMode: 'layout' | 'preview' = 'layout';
+}
diff --git a/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.tsx b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d69dd649d50927cf4ac5409a49f7199a97d6b4c6
--- /dev/null
+++ b/packages/view-design/src/md-design/panel-items/md-design-preview-switch/md-design-preview-switch.tsx
@@ -0,0 +1,40 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { PropType, defineComponent } from 'vue';
+import { IPanelItem } from '@ibiz/model-core';
+import { MDDesignPreviewSwitchController } from './md-design-preview-switch.controller';
+import './md-design-preview-switch.scss';
+
+export default defineComponent({
+  name: 'IBizMDDesignPreviewSwitch',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelItem>,
+      required: true,
+    },
+    controller: {
+      type: MDDesignPreviewSwitchController,
+      required: true,
+    },
+  },
+  setup() {
+    const ns = useNamespace('md-design-preview-switch');
+
+    return {
+      ns,
+    };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <el-radio-group v-model={this.controller.state.displayMode}>
+          <el-radio-button label='layout' size='small'>
+            项布局面板设计
+          </el-radio-button>
+          <el-radio-button label='preview' size='small'>
+            整体效果预览
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+    );
+  },
+});
diff --git a/packages/view-design/src/md-design/views/de-list-design/de-list-design.controller.ts b/packages/view-design/src/md-design/views/de-list-design/de-list-design.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecdc28436348413ae660e6fabb3e1eea3a7029bb
--- /dev/null
+++ b/packages/view-design/src/md-design/views/de-list-design/de-list-design.controller.ts
@@ -0,0 +1,20 @@
+import { PanelDesignBaseController } from '../../../panel';
+import { DEListDesignEngine } from './de-list-design.engine';
+import { DEListDesignEvent } from './interface/de-list-design.event';
+import { DEListDesignState } from './interface/de-list-design.state';
+
+export class DEListDesignController extends PanelDesignBaseController<
+  DEListDesignState,
+  DEListDesignEvent
+> {
+  /**
+   * 初始化引擎
+   *
+   * @author tony001
+   * @date 2024-09-24 18:09:51
+   * @protected
+   */
+  protected initEngines(): void {
+    this.engines.push(new DEListDesignEngine(this));
+  }
+}
diff --git a/packages/view-design/src/md-design/views/de-list-design/de-list-design.engine.ts b/packages/view-design/src/md-design/views/de-list-design/de-list-design.engine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..890fa7748d4ad10dfa1299712da880a64c6fc78c
--- /dev/null
+++ b/packages/view-design/src/md-design/views/de-list-design/de-list-design.engine.ts
@@ -0,0 +1,6 @@
+import { PanelDesignViewEngine } from '../../../panel';
+import { DEListDesignController } from './de-list-design.controller';
+
+export class DEListDesignEngine extends PanelDesignViewEngine {
+  protected declare view: DEListDesignController;
+}
diff --git a/packages/view-design/src/md-design/views/de-list-design/de-list-design.provider.ts b/packages/view-design/src/md-design/views/de-list-design/de-list-design.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3db61bd20bd33ede2baab8a9755bd6508d99f4f2
--- /dev/null
+++ b/packages/view-design/src/md-design/views/de-list-design/de-list-design.provider.ts
@@ -0,0 +1,17 @@
+import { CTX, IViewController, IViewProvider } from '@ibiz-template/runtime';
+import { IAppDECustomView } from '@ibiz/model-core';
+import { DEListDesignController } from './de-list-design.controller';
+
+export class DEListDesignProvider implements IViewProvider {
+  component: string = 'IBizView';
+
+  createController(
+    model: IAppDECustomView,
+    context: IContext,
+    params?: IParams,
+    ctx?: CTX,
+  ): IViewController {
+    const c = new DEListDesignController(model, context, params, ctx);
+    return c;
+  }
+}
diff --git a/packages/view-design/src/md-design/views/de-list-design/interface/de-list-design.event.ts b/packages/view-design/src/md-design/views/de-list-design/interface/de-list-design.event.ts
new file mode 100644
index 0000000000000000000000000000000000000000..950d7a14bc6cbb26967db97a95a79e2cec72bae5
--- /dev/null
+++ b/packages/view-design/src/md-design/views/de-list-design/interface/de-list-design.event.ts
@@ -0,0 +1,3 @@
+import { PanelDesignBaseEvent } from '../../../../panel';
+
+export interface DEListDesignEvent extends PanelDesignBaseEvent {}
diff --git a/packages/view-design/src/md-design/views/de-list-design/interface/de-list-design.state.ts b/packages/view-design/src/md-design/views/de-list-design/interface/de-list-design.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b01b8af49012dae10f9fdeca61d52be505bdae5b
--- /dev/null
+++ b/packages/view-design/src/md-design/views/de-list-design/interface/de-list-design.state.ts
@@ -0,0 +1,3 @@
+import { PanelDesignBaseState } from '../../../../panel';
+
+export interface DEListDesignState extends PanelDesignBaseState {}
diff --git a/packages/view-design/src/md-design/views/index.ts b/packages/view-design/src/md-design/views/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77f8ade2b96fd613ce36a4ebfba7f6b251458940
--- /dev/null
+++ b/packages/view-design/src/md-design/views/index.ts
@@ -0,0 +1,16 @@
+import { App } from 'vue';
+import { registerViewProvider } from '@ibiz-template/runtime';
+import { DEListDesignProvider } from './de-list-design/de-list-design.provider';
+
+export default {
+  install(_app: App): void {
+    registerViewProvider(
+      'VIEW_CUSTOM_DE_LIST_DESIGN_DESIGN',
+      () => new DEListDesignProvider(),
+    );
+    registerViewProvider(
+      'VIEW_CUSTOM_DE_LIST_DESIGN',
+      () => new DEListDesignProvider(),
+    );
+  },
+};