diff --git a/CHANGELOG.md b/CHANGELOG.md
index 391c77d2bec4d81b9d91dba95ff0cb6ffae9329d..8839be45e68a9ace6cbb6cfe3327198b426d6c5a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@
 
 ## [Unreleased]
 
+### Change
+
+- 工具栏新增popper模式
+- 支持视图数据看板视图
+
 ## [0.0.21] - 2024-09-25
 
 ### Change
diff --git a/src/control/toolbar/popper-toolbar/popper-toolbar.scss b/src/control/toolbar/popper-toolbar/popper-toolbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8211409c9567c5a5e15dcb07f742af6c6fc4d3c6
--- /dev/null
+++ b/src/control/toolbar/popper-toolbar/popper-toolbar.scss
@@ -0,0 +1,33 @@
+@include b(popper-toolbar) {
+    flex-direction: column;
+    @include e(item) {
+        margin: 0.25rem 0;
+    }
+    &.#{bem('control-toolbar')} {
+        position: fixed;
+        right: var(--van-back-top-right);
+        bottom: 130px;
+        height: auto;
+    }
+    .van-popover {
+        --van-popup-background: transparent;
+        --van-popover-light-background: transparent;
+        --van-popover-action-width: 80px;
+        max-height: unset;
+        .van-popover__content {
+            box-shadow: none;
+            overflow: visible;
+        }
+
+        .van-popover__content--horizontal .van-popover__action {
+            padding: 0 0.25rem;
+        }
+
+        .van-popover__content--vertical {
+            .van-popover__action {
+                margin: 0.25rem 0;
+                padding: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/control/toolbar/popper-toolbar/popper-toolbar.tsx b/src/control/toolbar/popper-toolbar/popper-toolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cb17f0250ce5e58ad01f2185639cdaa05cbfd411
--- /dev/null
+++ b/src/control/toolbar/popper-toolbar/popper-toolbar.tsx
@@ -0,0 +1,126 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { defineComponent, PropType, Ref, ref, VNode } from 'vue';
+import { IDETBGroupItem, IDEToolbar, IDEToolbarItem } from '@ibiz/model-core';
+import { IExtraButton, ToolbarController } from '@ibiz-template/runtime';
+import './popper-toolbar.scss';
+
+export const IBizPopperToolbar = defineComponent({
+  name: 'IBizPopperToolbar',
+  props: {
+    modelData: { type: Object as PropType<IDEToolbar>, required: true },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    controller: { type: Object as PropType<ToolbarController>, required: true },
+  },
+  setup(props, { slots }) {
+    const c = props.controller;
+    const ns = useNamespace(`popper-toolbar`);
+
+    const contentRef: Ref<IData | undefined> = ref();
+
+    // 列表绘制方向
+    let direction: 'vertical' | 'horizontal' = 'horizontal';
+
+    // 弹出方向
+    let placement: string = 'left';
+
+    if (c.controlParams) {
+      direction = c.controlParams.direction || 'horizontal';
+      placement = c.controlParams.placement || 'left';
+    }
+
+    // 点击事件
+    const handleClick = async (
+      item: IDEToolbarItem | IExtraButton,
+      event: MouseEvent,
+    ) => {
+      await c.onItemClick(item, event);
+    };
+
+    const renderToolbarItem = (item: IDEToolbarItem) => {
+      const itemId = item.id!;
+      if (['SEPERATOR', 'RAWITEM'].includes(item.itemType!)) {
+        ibiz.log.error(
+          ibiz.i18n.t('control.toolbar.noSupportType', {
+            itemType: item.itemType,
+          }),
+        );
+        return null;
+      }
+      if (item.itemType === 'ITEMS') {
+        return (
+          <div key={itemId} class={[ns.e('item'), ns.e('item-items')]}>
+            <van-popover
+              placement={placement}
+              actions-direction={direction}
+              teleport={contentRef.value?.$el}
+              actions={(item as IDETBGroupItem).detoolbarItems}
+              onSelect={(data: IDETBGroupItem, e: MouseEvent) => {
+                handleClick(data, e);
+              }}
+            >
+              {{
+                action: ({ action }: { action: IData }): VNode => {
+                  return <van-button round>{action.tooltip}</van-button>;
+                },
+                reference: (): VNode => {
+                  return <van-button round>{item.tooltip}</van-button>;
+                },
+              }}
+            </van-popover>
+          </div>
+        );
+      }
+      if (
+        item.itemType === 'DEUIACTION' &&
+        c.state.buttonsState[itemId]?.visible
+      ) {
+        return (
+          <div
+            key={itemId}
+            class={[
+              ns.e('item'),
+              ns.e('item-deuiaction'),
+              ns.is('disabled', c.state.buttonsState[itemId].disabled),
+            ]}
+          >
+            <van-button
+              title={item.tooltip}
+              type={'primary'}
+              round
+              loading={c.state.buttonsState[itemId].loading}
+              disabled={c.state.buttonsState[itemId].disabled}
+              onClick={(e: MouseEvent) => handleClick(item, e)}
+            >
+              {slots.btnContent!(item, c.state.viewMode)}
+            </van-button>
+          </div>
+        );
+      }
+
+      return null;
+    };
+
+    return {
+      c,
+      ns,
+      direction,
+      contentRef,
+      renderToolbarItem,
+    };
+  },
+  render() {
+    return (
+      <iBizControlBase
+        ref='contentRef'
+        controller={this.c}
+        class={[this.ns.b(), this.ns.m(this.direction)]}
+      >
+        {this.modelData.detoolbarItems?.map(item => {
+          const toolbarItemNode = this.renderToolbarItem(item);
+          return toolbarItemNode;
+        })}
+      </iBizControlBase>
+    );
+  },
+});
diff --git a/src/control/toolbar/toolbar.tsx b/src/control/toolbar/toolbar.tsx
index e214c7faa16227da5797a1d055d9bb68427ed447..a997d68c6b03c7605bbf9529fb5a2a5a3ce35ccb 100644
--- a/src/control/toolbar/toolbar.tsx
+++ b/src/control/toolbar/toolbar.tsx
@@ -7,6 +7,7 @@ import {
   IDEToolbarItem,
 } from '@ibiz/model-core';
 import { IExtraButton, ToolbarController } from '@ibiz-template/runtime';
+import { IBizPopperToolbar } from './popper-toolbar/popper-toolbar';
 import './toolbar.scss';
 
 const btnContent = (item: IDEToolbarItem | IExtraButton, viewMode: string) => {
@@ -61,6 +62,9 @@ export const ToolbarControl = defineComponent({
       case 'MOBBOTTOMMENU':
         position = 'bottom';
         break;
+      case 'USER':
+        position = 'popper';
+        break;
       default:
         break;
     }
@@ -171,6 +175,30 @@ export const ToolbarControl = defineComponent({
   render() {
     const { state } = this.c;
 
+    if (this.position === 'popper') {
+      return (
+        <IBizPopperToolbar
+          context={this.context}
+          params={this.params}
+          controller={this.c}
+          modelData={this.modelData}
+          class={[
+            this.ns.m(state.viewMode.toLowerCase()),
+            this.ns.b(this.position),
+          ]}
+        >
+          {{
+            btnContent: (
+              item: IDEToolbarItem | IExtraButton,
+              viewMode: string,
+            ) => {
+              return btnContent(item, viewMode);
+            },
+          }}
+        </IBizPopperToolbar>
+      );
+    }
+
     return (
       <iBizControlBase
         controller={this.c}
diff --git a/src/view-engine/index.ts b/src/view-engine/index.ts
index 2156d483ffc9c20dda10b19bd0e3562d7a5d3159..0732b2155f293cf9117703c4e65db70f2e0881b6 100644
--- a/src/view-engine/index.ts
+++ b/src/view-engine/index.ts
@@ -96,6 +96,14 @@ export const IBizViewEngine = {
       `VIEW_APPPORTALVIEW`,
       (c: IMobViewController) => new PortalViewEngine(c),
     );
+    ibiz.engine.register(
+      `VIEW_DEMOBPORTALVIEW`,
+      (c: IMobViewController) => new PortalViewEngine(c),
+    );
+    ibiz.engine.register(
+      `VIEW_DEMOBPORTALVIEW9`,
+      (c: IMobViewController) => new PortalViewEngine(c),
+    );
     ibiz.engine.register(
       `VIEW_DEMOBCUSTOMVIEW`,
       (c: IMobViewController) => new MobCustomViewEngine(c),
diff --git a/src/view/portal-view/index.ts b/src/view/portal-view/index.ts
index 71237ffb6f4e726b0e40f7fd9d5720f1f34582f4..794771cf4b757c31979ee2679953313901f0e050 100644
--- a/src/view/portal-view/index.ts
+++ b/src/view/portal-view/index.ts
@@ -10,9 +10,12 @@ export const IBizPortalView = withInstall(PortalView, function (v: App) {
     ViewType.APP_PORTAL_VIEW,
     () => new PortalViewProvider(),
   );
-  registerViewProvider(ViewType.DE_PORTAL_VIEW, () => new PortalViewProvider());
   registerViewProvider(
-    ViewType.DE_PORTAL_VIEW9,
+    ViewType.DE_MOB_PORTAL_VIEW,
+    () => new PortalViewProvider(),
+  );
+  registerViewProvider(
+    ViewType.DE_MOB_PORTAL_VIEW9,
     () => new PortalViewProvider(),
   );
 });