diff --git a/packages/design-base/src/panel-items/design_operation/design_operation.controller.ts b/packages/design-base/src/panel-items/design_operation/design_operation.controller.ts
index d051019b0c90538db582c2ff5d7eae40fccb0258..9d1539e2a584c5be017edfac7d9edc1fa43da9fb 100644
--- a/packages/design-base/src/panel-items/design_operation/design_operation.controller.ts
+++ b/packages/design-base/src/panel-items/design_operation/design_operation.controller.ts
@@ -379,6 +379,14 @@ export class DesignOperationController extends PanelItemController<IPanelContain
    */
   protected async refresh(): Promise<void> {
     await this.load();
+    if (this.view.select.data?.id) {
+      const data = this.state.items.find(
+        item => item.srfkey === this.view.select.data?.id,
+      );
+      if (!data) {
+        this.panel.view.call('onActiveRoot');
+      }
+    }
   }
 
   /**
@@ -619,9 +627,9 @@ export class DesignOperationController extends PanelItemController<IPanelContain
           pData?.srfkey
         )
       ) {
-        data.srfpkey = pData.srfkey;
+        data[`p${this.itemEntity.codeName?.toLowerCase()}id`] = pData.srfkey;
       } else {
-        data.srfpkey = null;
+        data[`p${this.itemEntity.codeName?.toLowerCase()}id`] = null;
         data.srfpmajortext = null;
       }
       await this.itemService.update(this.panel.context, data);
diff --git a/packages/grid-design/src/entity/psdegrid-col/psdegrid-col.ts b/packages/grid-design/src/entity/psdegrid-col/psdegrid-col.ts
index f6180a3d4d0b68c5373e9a43a13a8d852ff0a0e0..3ba5f31623c5f6088549cb845fa1434e8ae68e2d 100644
--- a/packages/grid-design/src/entity/psdegrid-col/psdegrid-col.ts
+++ b/packages/grid-design/src/entity/psdegrid-col/psdegrid-col.ts
@@ -56,6 +56,16 @@ export class PSDEGridCol extends AppDataEntity {
     return itemname;
   }
 
+  //  @ts-expect-error
+  get srfordervalue(): number {
+    return this.ordervalue;
+  }
+
+  //  @ts-expect-error
+  set srfordervalue(value): number {
+    this.ordervalue = value;
+  }
+
   clone(): PSDEGridCol {
     const entity = new PSDEGridCol(this._entity, this._data);
     entity.srfkey = this.srfkey;
diff --git a/packages/grid-design/src/panel-items/grid_design_operation/grid_design_operation.controller.ts b/packages/grid-design/src/panel-items/grid_design_operation/grid_design_operation.controller.ts
index a235b564ccbdb471b632afb0dd7f7776b76a2589..01578594ab13a5f48adf702582a568e828497320 100644
--- a/packages/grid-design/src/panel-items/grid_design_operation/grid_design_operation.controller.ts
+++ b/packages/grid-design/src/panel-items/grid_design_operation/grid_design_operation.controller.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-plusplus */
-import { notNilEmpty } from 'qx-util';
+/* eslint-disable no-constant-condition */
+import { generateOrderValue, notNilEmpty } from 'qx-util';
 import {
   DesignOperationController,
   ITreeNode,
@@ -171,7 +172,13 @@ export class GridDesignOperationController extends DesignOperationController {
       }
       nStartIndex++;
     }
+    const maxValue = Math.max(
+      ...this.state.items.map(col => col.ordervalue || 0),
+      generateOrderValue(0),
+    );
+    const ordervalue = maxValue + generateOrderValue(0);
     const temoGridCol: IData = {
+      ordervalue,
       psdegridcolname,
       gridcoltype: data.itemtype,
       [`p${this.itemEntity.codeName?.toLowerCase()}id`]: Object.is(
@@ -196,8 +203,14 @@ export class GridDesignOperationController extends DesignOperationController {
    */
   protected async handleAddField(items: IData[], parent: IData): Promise<void> {
     // 设置默认值
-    const cols = items.map(data => {
+    const maxValue = Math.max(
+      ...this.state.items.map(col => col.ordervalue || 0),
+      generateOrderValue(0),
+    );
+    const cols = items.map((data, i) => {
+      const ordervalue = maxValue + generateOrderValue(i);
       const temoGridCol: IData = {
+        ordervalue,
         psdegridcolname: data.psdefieldname?.toLowerCase(),
         psdefname: data.psdefieldname?.toLowerCase(),
         psdefid: data.psdefieldid,
diff --git a/packages/toolbar-design/src/components/index.ts b/packages/toolbar-design/src/components/index.ts
index 7988c0807a237ec67ab23ba6f4174b9cd58493cc..52b0f1e5c0df19d63759bf46f1c7870f157bc512 100644
--- a/packages/toolbar-design/src/components/index.ts
+++ b/packages/toolbar-design/src/components/index.ts
@@ -1,8 +1,10 @@
 import { App } from 'vue';
 import IBizToolbarShell from './toolbar-shell/toolbar-shell';
+import IBizToolbarDesignPopover from './toolbar-design-popover/toolbar-design-popover';
 
 export default {
   install(app: App) {
     app.component('IBizToolbarShell', IBizToolbarShell);
+    app.component('IBizToolbarDesignPopover', IBizToolbarDesignPopover);
   },
 };
diff --git a/packages/toolbar-design/src/components/toolbar-design-popover/toolbar-design-popover.scss b/packages/toolbar-design/src/components/toolbar-design-popover/toolbar-design-popover.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8c7b1033481b7002ccd9471e757cd281f0d15581
--- /dev/null
+++ b/packages/toolbar-design/src/components/toolbar-design-popover/toolbar-design-popover.scss
@@ -0,0 +1,46 @@
+@include b(toolbar-design-popover) {
+  padding: 5px;
+}
+
+@include b(toolbar-design-popover-header) {
+  padding: 3px 6px;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.5;
+  border-bottom: 1px solid getCssVar(color, text, 1);
+}
+
+@include b(toolbar-design-popover-item) {
+  display: flex;
+  padding: 3px 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  cursor: pointer;
+
+  @include e(icon) {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+    font-size: 16px;
+  }
+
+  @include e(text) {
+    flex: 1 1 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    color: getCssVar(color, primary, text);
+    background-color: getCssVar(color, primary);
+  }
+}
+
+@include b(toolbar-design-popover-info) {
+  padding: 3px 6px;
+  font-size: 14px;
+  line-height: 1.5;
+}
diff --git a/packages/toolbar-design/src/components/toolbar-design-popover/toolbar-design-popover.tsx b/packages/toolbar-design/src/components/toolbar-design-popover/toolbar-design-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c79696be03e18cf7e1b2aeac81eaf3d3c3ed18b9
--- /dev/null
+++ b/packages/toolbar-design/src/components/toolbar-design-popover/toolbar-design-popover.tsx
@@ -0,0 +1,54 @@
+import { PropType, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './toolbar-design-popover.scss';
+
+export default defineComponent({
+  name: 'IBizToolbarDesignPopover',
+  props: {
+    items: {
+      type: Array as PropType<IData[]>,
+      default: () => [],
+    },
+  },
+  setup(_props, { emit }) {
+    const ns = useNamespace('toolbar-design-popover');
+
+    const handleClick = (item: IData) => {
+      emit('item-click', item);
+    };
+
+    return {
+      ns,
+      handleClick,
+    };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <div class={this.ns.b('header')}>新建</div>
+        <div class={this.ns.b('content')}>
+          {this.items.length > 0 ? (
+            this.items.map(item => {
+              return (
+                <div
+                  class={this.ns.b('item')}
+                  title={item.text}
+                  onClick={() => this.handleClick(item)}
+                >
+                  {item.icon ? (
+                    <div class={this.ns.be('item', 'icon')}>
+                      <ion-icon name={item.icon}></ion-icon>
+                    </div>
+                  ) : null}
+                  <div class={this.ns.be('item', 'text')}>{item.text}</div>
+                </div>
+              );
+            })
+          ) : (
+            <div class={this.ns.b('info')}>暂未提供新建功能</div>
+          )}
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/packages/toolbar-design/src/entity/psdetbitem/psdetbitem.ts b/packages/toolbar-design/src/entity/psdetbitem/psdetbitem.ts
index 5857ee21a0a9269ba27dd8b40dad28743f383434..f2b3b5a59ad8d20299a030117e96142c02b84a98 100644
--- a/packages/toolbar-design/src/entity/psdetbitem/psdetbitem.ts
+++ b/packages/toolbar-design/src/entity/psdetbitem/psdetbitem.ts
@@ -41,6 +41,16 @@ export class PSDETBItem extends AppDataEntity {
     return this.psdetbitemname;
   }
 
+  //  @ts-expect-error
+  get srfordervalue(): number {
+    return this.ordervalue;
+  }
+
+  //  @ts-expect-error
+  set srfordervalue(value): number {
+    this.ordervalue = value;
+  }
+
   clone(): PSDETBItem {
     const entity = new PSDETBItem(this._entity, this._data);
     entity.srfkey = this.srfkey;
diff --git a/packages/toolbar-design/src/index.ts b/packages/toolbar-design/src/index.ts
index 851d445368cb458e5d3a262f40bc50682bf2b46e..fb36acc1b3bde7ef9934f90ea16c53a9a2369a9f 100644
--- a/packages/toolbar-design/src/index.ts
+++ b/packages/toolbar-design/src/index.ts
@@ -16,5 +16,6 @@ export default {
     app.use(Services);
     app.use(Components);
     app.use(PanelItems);
+    app.use(Components);
   },
 };
diff --git a/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.controller.ts b/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.controller.ts
index f1a3eab5b875a76fdc0add54422d64008c296d5e..354431a71b819c2b528fe93d350a39843eaf961e 100644
--- a/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.controller.ts
+++ b/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.controller.ts
@@ -1,3 +1,96 @@
+/* eslint-disable no-constant-condition */
 import { DesignOperationController } from '@ibiz-template-plugin/design-base';
+import { generateOrderValue, notNilEmpty } from 'qx-util';
 
-export class ToolBarDesignOperationController extends DesignOperationController {}
+export class ToolBarDesignOperationController extends DesignOperationController {
+  /**
+   * 打开新建项
+   *
+   * @author zhanghengfeng
+   * @date 2024-09-11 16:09:21
+   * @protected
+   * @param {MouseEvent} e
+   * @param {IData} data
+   * @return {*}  {Promise<void>}
+   */
+  protected async createItem(e: MouseEvent, data: IData): Promise<void> {
+    const el = e.target as HTMLElement;
+    if (!el) {
+      return;
+    }
+    const popover = ibiz.overlay.createPopover(
+      'IBizToolbarDesignPopover',
+      {
+        items: this.newItems,
+        onItemClick: (item: IData) => {
+          popover.dismiss();
+          this.handleAddItem(item.data, data);
+        },
+      },
+      {
+        placement: 'right',
+        autoClose: true,
+        width: '200px',
+        noArrow: true,
+      },
+    );
+    await popover.present(el);
+  }
+
+  /**
+   * 处理项添加
+   *
+   * @author zhanghengfeng
+   * @date 2024-09-11 16:09:42
+   * @protected
+   * @param {IData} data
+   * @param {IData} [parent]
+   * @return {*}  {Promise<void>}
+   */
+  protected async handleAddItem(data: IData, parent?: IData): Promise<void> {
+    let nStartIndex = 1;
+    let strRootName: string = data.itemtype || '';
+    if (!strRootName) {
+      return;
+    }
+    strRootName = strRootName.toLowerCase();
+    let psdetbitemname = '';
+    const detailMap: Map<string, IData> = new Map();
+    const detailMap2: Map<string, IData> = new Map();
+    this.state.items.forEach(item => {
+      if (notNilEmpty(item.psdetbitemname)) {
+        detailMap.set(item.psdetbitemname.toLowerCase(), item);
+      }
+      if (notNilEmpty(item.psdetbitemid)) {
+        detailMap2.set(item.psdetbitemid.toLowerCase(), item);
+      }
+    });
+    while (true) {
+      const strDefaultName = `${strRootName}${
+        nStartIndex === 0 ? '' : nStartIndex
+      }`;
+      if (!detailMap.has(strDefaultName) && !detailMap2.has(strDefaultName)) {
+        psdetbitemname = strDefaultName;
+        break;
+      }
+      nStartIndex += 1;
+    }
+    const maxValue = Math.max(
+      ...this.state.items.map(col => col.ordervalue || 0),
+      generateOrderValue(0),
+    );
+    const ordervalue = maxValue + generateOrderValue(0);
+    const item: IData = {
+      psdetbitemname,
+      tbitemtype: data.itemtype,
+      ordervalue,
+      [`p${this.itemEntity.codeName?.toLowerCase()}id`]: Object.is(
+        parent?.itemtype,
+        'DETOOLBAR',
+      )
+        ? undefined
+        : parent?.srfkey,
+    };
+    await this.create([item]);
+  }
+}
diff --git a/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.scss b/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.scss
index 546c1670b66fc78cb6abcf88bebf7862d0d501e3..7603aab5895a18671b535f480ff28fe863d2f313 100644
--- a/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.scss
+++ b/packages/toolbar-design/src/panel-items/toolbar_design_operation/toolbar_design_operation.scss
@@ -1,5 +1,7 @@
 /* stylelint-disable block-no-empty */
 @include b(toolbar_design_operation) {
-    width: 100%;
-    height: 100%;
-}
\ No newline at end of file
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid getCssVar(color, border);
+  border-left: 1px solid getCssVar(color, border);
+}