diff --git a/src/control/data-view/data-view.tsx b/src/control/data-view/data-view.tsx
index 0947654cf3c698a0d95640f212b4c8254daf382d..083c652a96842c8b4a289b0638b7930cb57d359b 100644
--- a/src/control/data-view/data-view.tsx
+++ b/src/control/data-view/data-view.tsx
@@ -11,6 +11,17 @@ export const DataViewControl = defineComponent({
     modelData: { type: Object as PropType<IDEDataView>, required: true },
     context: { type: Object as PropType<IContext>, required: true },
     params: { type: Object as PropType<IParams>, default: () => ({}) },
+
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdctrlActiveMode: { type: Number, default: 2 },
+    singleSelect: { type: Boolean, default: true },
   },
   setup() {
     const c = useControlController(
diff --git a/src/control/exp-bar/data-view-exp-bar/data-view-exp-bar.provider.ts b/src/control/exp-bar/data-view-exp-bar/data-view-exp-bar.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..845dd2c0ee203bb6feb54a0d45a893110d76f7b4
--- /dev/null
+++ b/src/control/exp-bar/data-view-exp-bar/data-view-exp-bar.provider.ts
@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 卡片导航栏适配器
+ *
+ * @author zk
+ * @date 2023-05-29 02:05:26
+ * @export
+ * @class DataViewExpBarProvider
+ * @implements {IControlProvider}
+ */
+export class DataViewExpBarProvider implements IControlProvider {
+  component: string = 'IBizDataViewExpBarControl';
+}
diff --git a/src/control/exp-bar/data-view-exp-bar/data-view-exp-bar.scss b/src/control/exp-bar/data-view-exp-bar/data-view-exp-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b2e0ebff6972ccd7bda50f999c03dc247eee7e13
--- /dev/null
+++ b/src/control/exp-bar/data-view-exp-bar/data-view-exp-bar.scss
@@ -0,0 +1,4 @@
+@include b(control-dataviewexpbar) {
+  height: 100%;
+  overflow-y: scroll;
+}
diff --git a/src/control/exp-bar/data-view-exp-bar/data-view-view-exp-bar.tsx b/src/control/exp-bar/data-view-exp-bar/data-view-view-exp-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..db942e2e6933da28c90b107edc0ed94d76f3b1d3
--- /dev/null
+++ b/src/control/exp-bar/data-view-exp-bar/data-view-view-exp-bar.tsx
@@ -0,0 +1,42 @@
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { defineComponent, PropType } from 'vue';
+import { IDataViewExpBar, IDEDataView } from '@ibiz/model-core';
+import './data-view-exp-bar.scss';
+import IBizDataViewControl from '../../data-view';
+import { ExpBarControlController } from '../exp-bar.controller';
+
+export const DataViewExpBarControl = defineComponent({
+  name: 'IBizDataViewExpBarControl',
+  props: {
+    modelData: { type: Object as PropType<IDataViewExpBar>, required: true },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    srfnav: { type: String, required: false }
+  },
+  setup() {
+    const c = useControlController((...args) => new ExpBarControlController(...args));
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+    return {
+      c,
+      ns,
+    };
+  },
+  render() {
+    const { isCreated } = this.c.state;
+    const { XDataModel } = this.c;
+    return (
+      <iBizControlBase controller={this.c}>
+        {
+          XDataModel && isCreated && <IBizDataViewControl
+            context={this.c.context}
+            params={this.c.params}
+            modelData={this.c.XDataModel as IDEDataView}
+            singleSelect={true}
+            mdctrlActiveMode={1}
+          >
+          </IBizDataViewControl>
+        }
+      </iBizControlBase>
+    );
+  },
+});
diff --git a/src/control/exp-bar/data-view-exp-bar/index.ts b/src/control/exp-bar/data-view-exp-bar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..863d72dc50fc9a5c852c097ab4b683ac700e62ab
--- /dev/null
+++ b/src/control/exp-bar/data-view-exp-bar/index.ts
@@ -0,0 +1,18 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { DataViewExpBarControl } from './data-view-view-exp-bar';
+import { DataViewExpBarProvider } from './data-view-exp-bar.provider';
+
+export const IBizDataViewExpBarControl = withInstall(
+  DataViewExpBarControl,
+  function (v: App) {
+    v.component(DataViewExpBarControl.name, DataViewExpBarControl);
+    registerControlProvider(
+      ControlType.DATA_VIEW_EXPBAR,
+      () => new DataViewExpBarProvider(),
+    );
+  },
+);
+
+export default IBizDataViewExpBarControl;
diff --git a/src/control/exp-bar/exp-bar.controller.ts b/src/control/exp-bar/exp-bar.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..438185249a7743e4c627866c4cce270dd10b1668
--- /dev/null
+++ b/src/control/exp-bar/exp-bar.controller.ts
@@ -0,0 +1,308 @@
+import {
+  IControl,
+  IDEGrid,
+  IDER1N,
+  IExpBar,
+  IDETree,
+  IDEList,
+  IDEDataView,
+  IAppView,
+  INavigatable,
+  IDETreeNode,
+} from '@ibiz/model-core';
+import {
+  IExpBarControlController,
+  IExpBarControlState,
+  IGridController,
+  calcDeCodeNameById,
+  calcNavParams,
+  ControlController,
+  IExpBarControlEvent,
+  IDataViewControlController,
+  IListController,
+  LoadEvent,
+  ITreeController,
+} from '@ibiz-template/runtime';
+import { ViewLayoutPanelController } from '../panel';
+import { NavPosController } from '../../panel-component/nav-pos';
+
+/**
+ * 导航部件控制器
+ *
+ * @author zk
+ * @date 2023-05-29 04:05:46
+ * @export
+ * @class ExpBarControlController
+ * @extends {ControlController<T, S, E>}
+ * @implements {IExpBarControlController<T, S, E>}
+ * @template T
+ * @template S
+ * @template E
+ */
+export class ExpBarControlController<
+    T extends IExpBar = IExpBar,
+    S extends IExpBarControlState = IExpBarControlState,
+    E extends IExpBarControlEvent = IExpBarControlEvent,
+  >
+  extends ControlController<T, S, E>
+  implements IExpBarControlController<T, S, E>
+{
+  /**
+   * 导航占位控制器
+   *
+   * @readonly
+   * @type {(NavPosController | undefined)}
+   * @memberof TabExpPanelController
+   */
+  get navPos(): NavPosController | undefined {
+    return this.layoutPanel.panelItems.nav_pos as NavPosController;
+  }
+
+  /**
+   * 当前路由视图的层级
+   *
+   * @readonly
+   * @type {(number | undefined)}
+   * @memberof NavPosController
+   */
+  get routeDepth(): number | undefined {
+    return this.view.modal.routeDepth;
+  }
+
+  /**
+   * 布局面板控制器
+   *
+   * @type {ViewLayoutPanelController}
+   * @memberof TabExpPanelController
+   */
+  layoutPanel!: ViewLayoutPanelController;
+
+  /**
+   * 多数据部件类型
+   *
+   * @author zk
+   * @date 2023-05-29 08:05:30
+   * @type {string}
+   * @memberof ExpBarControlController
+   */
+  xDataType!: string;
+
+  /**
+   * 加载
+   *
+   * @author zk
+   * @date 2023-05-29 05:05:17
+   * @return {*}  {Promise<IData[]>}
+   * @memberof ExpBarControlController
+   */
+  async load(): Promise<IData[]> {
+    return (await this.xDataController?.load({ isInitialLoad: true })) || [];
+  }
+
+  /**
+   * 多数据部件控制器
+   *
+   * @author zk
+   * @date 2023-05-29 03:05:07
+   * @readonly
+   * @type {IGridController}
+   * @memberof ExpBarControlController
+   */
+  get xDataController():
+    | IGridController
+    | IDataViewControlController
+    | IListController
+    | ITreeController
+    | undefined {
+    const controller = this.view.getController(this.model.xdataControlName!);
+    switch (this.model.controlType) {
+      case 'GRIDEXPBAR':
+        return controller as IGridController;
+      case 'DATAVIEWEXPBAR':
+        return controller as IDataViewControlController;
+      case 'LISTEXPBAR':
+        return controller as IListController;
+      case 'TREEEXPBAR':
+        // 暂未实现
+        return controller as ITreeController;
+      default:
+        return undefined;
+    }
+  }
+
+  /**
+   * 多数据部件模型
+   *
+   * @author zk
+   * @date 2023-05-29 03:05:15
+   * @readonly
+   * @type {(IDEGrid | null)}
+   * @memberof ExpBarControlController
+   */
+  get XDataModel(): IDEGrid | IDEList | IDEDataView | IDETree | undefined {
+    const control: IDEGrid | IDETree | IDEList | IDEDataView | undefined =
+      this.model.controls?.find((item: IControl) => {
+        return item.name === this.model.xdataControlName;
+      });
+    return control;
+  }
+
+  /**
+   * 创建完成
+   *
+   * @author zk
+   * @date 2023-05-29 10:05:22
+   * @protected
+   * @return {*}  {Promise<void>}
+   * @memberof ExpBarControlController
+   */
+  protected async doCreated(): Promise<void> {
+    await super.doCreated();
+    this.layoutPanel = this.view.getController(
+      'layoutpanel',
+    ) as ViewLayoutPanelController;
+  }
+
+  /**
+   * 组件挂载
+   *
+   * @author zk
+   * @date 2023-05-29 09:05:55
+   * @protected
+   * @return {*}  {Promise<void>}
+   * @memberof ExpBarControlController
+   */
+  protected async doMounted(): Promise<void> {
+    super.doMounted();
+    this.xDataController?.evt.on('onActive', event => {
+      this.xDataActive(event.data);
+    });
+    this.xDataController?.evt.on('onLoadSuccess', event => {
+      this.xDataLoadSuccess(event);
+    });
+  }
+
+  /**
+   * 多数据部件加载成功 设置默认选中
+   *
+   * @author zk
+   * @date 2023-05-30 04:05:40
+   * @memberof ExpBarControlController
+   */
+  xDataLoadSuccess(event: LoadEvent) {
+    if (!event.isInitialLoad) {
+      // 只处理默认第一次加载
+      return;
+    }
+    // 设置默认选中
+    if (this.state.srfnav && this.routeDepth) {
+      const selectItem = this.xDataController?.state.items.find(
+        item => item.srfkey === this.state.srfnav,
+      );
+      if (selectItem) {
+        this.xDataController?.setActive(selectItem);
+        this.xDataController?.setSelection([selectItem]);
+      }
+    } else if (
+      this.xDataController &&
+      this.xDataController.state.items.length > 0
+    ) {
+      this.xDataController.setActive(this.xDataController.state.items[0]);
+      this.xDataController.setSelection([this.xDataController.state.items[0]]);
+    }
+  }
+
+  /**
+   * 多数据激活
+   *
+   * @author zk
+   * @date 2023-05-29 03:05:36
+   * @param {IData} data
+   * @memberof ExpBarControlController
+   */
+  async xDataActive(data: IData[]) {
+    this.openNavPosView(data);
+  }
+
+  /**
+   * 解析参数
+   *
+   * @author zk
+   * @date 2023-05-29 04:05:52
+   * @param {IDETabViewPanel} tabViewPanel
+   * @return {*}
+   * @memberof ExpBarControlController
+   */
+  prepareParams(
+    XDataModel: IDEGrid | IDEList | IDEDataView | IDETreeNode,
+    data: IData[],
+  ) {
+    const {
+      navDER,
+      navFilter,
+      navigateContexts,
+      navigateParams,
+      appDataEntityId,
+    } = XDataModel;
+    const model = {
+      deName: appDataEntityId ? calcDeCodeNameById(appDataEntityId) : undefined,
+      navFilter,
+      pickupDEFName: (navDER as IDER1N)?.pickupDEFName,
+      navContexts: navigateContexts,
+      navParams: navigateParams,
+    };
+    const _data = data.length > 0 ? data[0] : {};
+    const originParams = {
+      context: this.context,
+      params: this.params,
+      data: _data,
+    };
+    const { resultContext, resultParams } = calcNavParams(model, originParams);
+    // 合并SrfNav
+    const context = Object.assign(this.context.clone(), resultContext, {
+      currentSrfNav: _data.srfkey,
+    });
+    const params = { ...this.params, ...resultParams };
+    return { context, params };
+  }
+
+  /**
+   * 计算导航视图
+   *
+   * @author zk
+   * @date 2023-05-30 03:05:19
+   * @return {*}  {Promise<IAppView>}
+   * @memberof ExpBarControlController
+   */
+  public async calcViewModel(): Promise<IAppView> {
+    if (
+      this.XDataModel?.controlType === 'GRID' ||
+      this.XDataModel?.controlType === 'DATAVIEW' ||
+      this.XDataModel?.controlType === 'LIST'
+    ) {
+      return ibiz.hub.getAppView(
+        (this.XDataModel as INavigatable).navAppViewId!,
+      );
+    }
+    throw new Error('多节点视图由子类实现');
+  }
+
+  /**
+   * 打开导航占位视图
+   *
+   * @param {IParams} data
+   * @memberof ExpBarControlController
+   */
+  async openNavPosView(data: IData[]) {
+    if (this.XDataModel) {
+      const viewModel = await this.calcViewModel();
+      const { context, params } = this.prepareParams(this.XDataModel, data);
+      this.navPos?.openView({
+        key: viewModel.codeName!.toLowerCase(),
+        context,
+        params,
+        viewModel,
+      });
+    }
+  }
+}
diff --git a/src/control/exp-bar/grid-exp-bar/grid-exp-bar.provider.ts b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc7e46ffb226503ee924e3adba68246c85b0192a
--- /dev/null
+++ b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.provider.ts
@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 表格导航栏适配器
+ *
+ * @author zk
+ * @date 2023-05-29 02:05:26
+ * @export
+ * @class GridExpBarProvider
+ * @implements {IControlProvider}
+ */
+export class GridExpBarProvider implements IControlProvider {
+  component: string = 'IBizGridExpBarControl';
+}
diff --git a/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..993deabdbe7cac3268394e20e68a379e4b4ac2ad
--- /dev/null
+++ b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss
@@ -0,0 +1,4 @@
+@include b(control-gridexpbar) {
+  height: 100%;
+  overflow-y: scroll;
+}
diff --git a/src/control/exp-bar/grid-exp-bar/grid-exp-bar.tsx b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..26e8d9c4dcf280c2424e2db7866a73037d42e9fe
--- /dev/null
+++ b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.tsx
@@ -0,0 +1,42 @@
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { defineComponent, PropType } from 'vue';
+import { IDEGrid, IGridExpBar } from '@ibiz/model-core';
+import './grid-exp-bar.scss';
+import IBizGridControl from '../../grid/grid';
+import { ExpBarControlController } from '../exp-bar.controller';
+
+export const GridExpBarControl = defineComponent({
+  name: 'IBizGridExpBarControl',
+  props: {
+    modelData: { type: Object as PropType<IGridExpBar>, required: true },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    srfnav: { type: String, required: false }
+  },
+  setup() {
+    const c = useControlController((...args) => new ExpBarControlController(...args));
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+
+    return {
+      c,
+      ns,
+    };
+  },
+  render() {
+    const { isCreated } = this.c.state;
+    const { XDataModel } = this.c;
+    return (
+      <iBizControlBase controller={this.c}>
+        {
+          XDataModel && isCreated && <IBizGridControl
+            context={this.c.context}
+            params={this.c.params}
+            modelData={this.c.XDataModel as IDEGrid}
+            singleSelect={true}
+            mdctrlActiveMode={1}>
+          </IBizGridControl>
+        }
+      </iBizControlBase>
+    );
+  },
+});
diff --git a/src/control/exp-bar/grid-exp-bar/index.ts b/src/control/exp-bar/grid-exp-bar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d44ff73e7f16d615905872d69aba7190a2f466d
--- /dev/null
+++ b/src/control/exp-bar/grid-exp-bar/index.ts
@@ -0,0 +1,18 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { GridExpBarControl } from './grid-exp-bar';
+import { GridExpBarProvider } from './grid-exp-bar.provider';
+
+export const IBizGridExpBarControl = withInstall(
+  GridExpBarControl,
+  function (v: App) {
+    v.component(GridExpBarControl.name, GridExpBarControl);
+    registerControlProvider(
+      ControlType.GRID_EXPBAR,
+      () => new GridExpBarProvider(),
+    );
+  },
+);
+
+export default IBizGridExpBarControl;
diff --git a/src/control/exp-bar/list-exp-bar/index.ts b/src/control/exp-bar/list-exp-bar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a054e29ff69467735c65fd5f0452981ceac6cf09
--- /dev/null
+++ b/src/control/exp-bar/list-exp-bar/index.ts
@@ -0,0 +1,20 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { ListExpBarControl } from './list-exp-bar';
+import { ListExpBarProvider } from './list-exp-bar.provider';
+
+export * from './list-exp-bar.provider';
+
+export const IBizListExpBarControl = withInstall(
+  ListExpBarControl,
+  function (v: App) {
+    v.component(ListExpBarControl.name, ListExpBarControl);
+    registerControlProvider(
+      ControlType.LIST_EXPBAR,
+      () => new ListExpBarProvider(),
+    );
+  },
+);
+
+export default IBizListExpBarControl;
diff --git a/src/control/exp-bar/list-exp-bar/list-exp-bar.provider.ts b/src/control/exp-bar/list-exp-bar/list-exp-bar.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d79955bf848165dd7e4562bef8ff309d4f48e665
--- /dev/null
+++ b/src/control/exp-bar/list-exp-bar/list-exp-bar.provider.ts
@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 列表导航栏适配器
+ *
+ * @author zk
+ * @date 2023-05-29 02:05:26
+ * @export
+ * @class ListExpBarProvider
+ * @implements {IControlProvider}
+ */
+export class ListExpBarProvider implements IControlProvider {
+  component: string = 'IBizListExpBarControl';
+}
diff --git a/src/control/exp-bar/list-exp-bar/list-exp-bar.scss b/src/control/exp-bar/list-exp-bar/list-exp-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e0d4a0f235cc2c7a864d4d29d5e77c9cd7a23f5d
--- /dev/null
+++ b/src/control/exp-bar/list-exp-bar/list-exp-bar.scss
@@ -0,0 +1,4 @@
+@include b(control-listexpbar) {
+  height: 100%;
+  overflow-y: scroll;
+}
diff --git a/src/control/exp-bar/list-exp-bar/list-exp-bar.tsx b/src/control/exp-bar/list-exp-bar/list-exp-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..be156903142cc3d325f26b9192c58dfaa373de44
--- /dev/null
+++ b/src/control/exp-bar/list-exp-bar/list-exp-bar.tsx
@@ -0,0 +1,41 @@
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { defineComponent, PropType } from 'vue';
+import { IDEList, IListExpBar } from '@ibiz/model-core';
+import './list-exp-bar.scss';
+import { ExpBarControlController } from '../exp-bar.controller';
+import IBizListControl from '../../list';
+
+export const ListExpBarControl = defineComponent({
+  name: 'IBizListExpBarControl',
+  props: {
+    modelData: { type: Object as PropType<IListExpBar>, required: true },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    srfnav: { type: String, required: false }
+  },
+  setup() {
+    const c = useControlController((...args) => new ExpBarControlController(...args));
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+    return {
+      c,
+      ns
+    };
+  },
+  render() {
+    const { isCreated } = this.c.state;
+    const { XDataModel } = this.c;
+    return (
+      <iBizControlBase controller={this.c}>
+        {
+          XDataModel && isCreated && <IBizListControl
+            context={this.c.context}
+            params={this.c.params}
+            modelData={this.c.XDataModel as IDEList}
+            singleSelect={true}
+            mdctrlActiveMode={1}>
+          </IBizListControl>
+        }
+      </iBizControlBase>
+    );
+  },
+});
diff --git a/src/control/index.ts b/src/control/index.ts
index 600ece18ac0359c78ff88a89896ca2747407b9b4..6f91f295d45d48500e73a293f1101c3be6303240 100644
--- a/src/control/index.ts
+++ b/src/control/index.ts
@@ -9,3 +9,6 @@ export * from './data-view';
 export * from './tree';
 export * from './pickup-view-panel';
 export * from './tab-exp-panel';
+export * from './exp-bar/list-exp-bar';
+export * from './exp-bar/grid-exp-bar';
+export * from './exp-bar/data-view-exp-bar';
diff --git a/src/index.ts b/src/index.ts
index 619c06fd0871ff6d9824bf5cb959ca41991eb5f1..5bbd5ce90e4a3c6c1bcb5d4ba2b4473d38841a71 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,6 +15,9 @@ import {
   IBizTreeControl,
   IBizPickupViewPanelControl,
   IBizTabExpPanelControl,
+  IBizListExpBarControl,
+  IBizGridExpBarControl,
+  IBizDataViewExpBarControl,
 } from './control';
 import IBizEditor from './editor';
 import { IBizView } from './view';
@@ -41,6 +44,9 @@ export default {
     v.use(IBizToolbarControl);
     v.use(IBizViewLayoutPanelControl);
     v.use(IBizFormControl);
+    v.use(IBizListExpBarControl);
+    v.use(IBizDataViewExpBarControl);
+    v.use(IBizGridExpBarControl);
     v.use(IBizSearchFormControl);
     v.use(IBizEditFormControl);
     v.use(IBizCaptionBarControl);
diff --git a/src/view-engine/data-view-exp-view.engine.ts b/src/view-engine/data-view-exp-view.engine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa2e8b43ac9d98bb99b84e78c4ad9643f479d0af
--- /dev/null
+++ b/src/view-engine/data-view-exp-view.engine.ts
@@ -0,0 +1,47 @@
+import { IAppDEDataViewExplorerView } from '@ibiz/model-core';
+
+import {
+  IDataViewExpViewState,
+  IDataViewExpViewEvent,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { ExpViewEngine } from './exp-view.engine';
+/**
+ * 卡片导航视图引擎
+ *
+ * @author zk
+ * @date 2023-05-30 09:05:54
+ * @export
+ * @class DataViewExpViewEngine
+ * @extends {ExpViewEngine}
+ */
+export class DataViewExpViewEngine extends ExpViewEngine {
+  /**
+   * 视图泛型
+   *
+   * @author zk
+   * @date 2023-05-30 10:05:59
+   * @protected
+   * @type {ViewController<IAppDEDataViewExplorerView,IDataViewExpViewState,IDataViewExpViewEvent
+   *   >}
+   * @memberof DataViewExpViewEngine
+   */
+  protected declare view: ViewController<
+    IAppDEDataViewExplorerView,
+    IDataViewExpViewState,
+    IDataViewExpViewEvent
+  >;
+
+  /**
+   * 卡片导航视图导航栏部件名称
+   *
+   * @author zk
+   * @date 2023-05-30 06:05:53
+   * @readonly
+   * @type {string}
+   * @memberof DataViewExpViewEngine
+   */
+  get expBarName(): string {
+    return 'dataviewexpbar';
+  }
+}
diff --git a/src/view-engine/exp-view.engine.ts b/src/view-engine/exp-view.engine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46b5c741750978426d60a6db349043cdfe15a541
--- /dev/null
+++ b/src/view-engine/exp-view.engine.ts
@@ -0,0 +1,89 @@
+import {
+  ViewController,
+  IExpBarControlController,
+  ViewEngineBase,
+  IExpViewState,
+  IExpViewEvent,
+} from '@ibiz-template/runtime';
+import {
+  IAppDEDataViewExplorerView,
+  IAppDEGridExplorerView,
+  IAppDEListExplorerView,
+} from '@ibiz/model-core';
+/**
+ * 导航视图引擎基类
+ *
+ * @author zk
+ * @date 2023-05-30 06:05:44
+ * @export
+ * @class ExpViewEngine
+ * @extends {ViewEngineBase}
+ */
+export class ExpViewEngine extends ViewEngineBase {
+  protected declare view: ViewController<
+    | IAppDEGridExplorerView
+    | IAppDEDataViewExplorerView
+    | IAppDEListExplorerView,
+    IExpViewState,
+    IExpViewEvent
+  >;
+
+  /**
+   * 导航栏部件名称
+   *
+   * @author zk
+   * @date 2023-05-30 06:05:34
+   * @readonly
+   * @type {string}
+   * @memberof ExpViewEngine
+   */
+  get expBarName(): string {
+    throw Error('子类实现');
+  }
+
+  /**
+   * 表格导航栏部件控制器
+   *
+   * @author zk
+   * @date 2023-05-29 04:05:32
+   * @readonly
+   * @memberof GridExpViewEngine
+   */
+  get expBar(): IExpBarControlController {
+    return this.view.getController(this.expBarName) as IExpBarControlController;
+  }
+
+  /**
+   * 组件创建
+   *
+   * @author zk
+   * @date 2023-05-29 04:05:56
+   * @memberof GridExpViewEngine
+   */
+  async doCreated() {
+    super.doCreated();
+    const { childNames } = this.view;
+    childNames.push(this.expBarName);
+    if (!this.view.slotProps[this.expBarName]) {
+      this.view.slotProps[this.expBarName] = {};
+    }
+    this.view.slotProps[this.expBarName].srfnav = this.view.state.srfnav;
+  }
+
+  /**
+   *  组件挂载
+   *
+   * @author zk
+   * @date 2023-05-29 04:05:42
+   * @return {*}  {Promise<void>}
+   * @memberof GridExpViewEngine
+   */
+  async doMounted(): Promise<void> {
+    await super.doMounted();
+    const { model } = this.view;
+    // 默认加载
+    if (model.loadDefault) {
+      this.expBar.load();
+    }
+  }
+}
diff --git a/src/view-engine/grid-exp-view.engine.ts b/src/view-engine/grid-exp-view.engine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c870ce22ee6d73a1c55f7ee7a6e82251334f6096
--- /dev/null
+++ b/src/view-engine/grid-exp-view.engine.ts
@@ -0,0 +1,46 @@
+import {
+  IGridExpViewEvent,
+  IGridExpViewState,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { IAppDEGridExplorerView } from '@ibiz/model-core';
+import { ExpViewEngine } from './exp-view.engine';
+/**
+ * 表格导航视图引擎
+ *
+ * @author zk
+ * @date 2023-05-30 09:05:54
+ * @export
+ * @class GridExpViewEngine
+ * @extends {ExpViewEngine}
+ */
+export class GridExpViewEngine extends ExpViewEngine {
+  /**
+   * 视图泛型
+   *
+   * @author zk
+   * @date 2023-05-30 10:05:59
+   * @protected
+   * @type {ViewController<IAppDEGridExplorerView,IGridExpViewState,IGridExpViewEvent
+   *   >}
+   * @memberof GridExpViewEngine
+   */
+  protected declare view: ViewController<
+    IAppDEGridExplorerView,
+    IGridExpViewState,
+    IGridExpViewEvent
+  >;
+
+  /**
+   * 表格导航栏部件名称
+   *
+   * @author zk
+   * @date 2023-05-30 06:05:21
+   * @readonly
+   * @type {string}
+   * @memberof GridExpViewEngine
+   */
+  get expBarName(): string {
+    return 'gridexpbar';
+  }
+}
diff --git a/src/view-engine/index.ts b/src/view-engine/index.ts
index 9292cb11015c4c96aaecce73cdd71d9ad5b54792..ffcad48b68657da49a4f97566c72b2cf5548c26d 100644
--- a/src/view-engine/index.ts
+++ b/src/view-engine/index.ts
@@ -11,6 +11,9 @@ import { PickupViewEngine } from './pickup-view.engine';
 import { MPickupViewEngine } from './mpickup-view-engine';
 import { TreeViewEngine } from './tree-view.engine';
 import { TabExpViewEngine } from './tab-exp-view.engine';
+import { GridExpViewEngine } from './grid-exp-view.engine';
+import { ListExpViewEngine } from './list-exp-view.engine';
+import { DataViewExpViewEngine } from './data-view-exp-view.engine';
 
 export * from './grid-view.engine';
 export * from './index-view.engine';
@@ -68,5 +71,17 @@ export const IBizViewEngine = {
       'VIEW_TabExpView',
       (c: IViewController) => new TabExpViewEngine(c),
     );
+    ibiz.engine.register(
+      'VIEW_GridExpView',
+      (c: IViewController) => new GridExpViewEngine(c),
+    );
+    ibiz.engine.register(
+      'VIEW_ListExpView',
+      (c: IViewController) => new ListExpViewEngine(c),
+    );
+    ibiz.engine.register(
+      'VIEW_DataViewExpView',
+      (c: IViewController) => new DataViewExpViewEngine(c),
+    );
   },
 };
diff --git a/src/view-engine/list-exp-view.engine.ts b/src/view-engine/list-exp-view.engine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efd55e69c25e00ede5e6e93ee3a724f532c9bee2
--- /dev/null
+++ b/src/view-engine/list-exp-view.engine.ts
@@ -0,0 +1,46 @@
+import {
+  IListExpViewEvent,
+  IListExpViewState,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { IAppDEListExplorerView } from '@ibiz/model-core';
+import { ExpViewEngine } from './exp-view.engine';
+/**
+ * 列表导航视图引擎
+ *
+ * @author zk
+ * @date 2023-05-30 09:05:09
+ * @export
+ * @class ListExpViewEngine
+ * @extends {ExpViewEngine}
+ */
+export class ListExpViewEngine extends ExpViewEngine {
+  /**
+   * 视图泛型
+   *
+   * @author zk
+   * @date 2023-05-30 10:05:59
+   * @protected
+   * @type {ViewController<IAppDEListExplorerView,IListExpViewState,IListExpViewEvent
+   *   >}
+   * @memberof ListExpViewEngine
+   */
+  protected declare view: ViewController<
+    IAppDEListExplorerView,
+    IListExpViewState,
+    IListExpViewEvent
+  >;
+
+  /**
+   * 列表导航栏部件名称
+   *
+   * @author zk
+   * @date 2023-05-30 06:05:21
+   * @readonly
+   * @type {string}
+   * @memberof ListExpViewEngine
+   */
+  get expBarName(): string {
+    return 'listexpbar';
+  }
+}