diff --git a/CHANGELOG.md b/CHANGELOG.md
index 954dbcfacff71061ca94108110cea271c802a43d..f5162e79f5960eaa5aa8c37436c7473366bfc9e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- 标签页占位支持显示视图图标
+
 ### Fixed
 
 - 修复容器大小变化后，地图没有重新渲染异常
diff --git a/src/panel-component/nav-pos-index/nav-pos-index.controller.ts b/src/panel-component/nav-pos-index/nav-pos-index.controller.ts
index 12c1099431b11bd72087398b164c2e49d1efd29d..8f2aae1dfadf2f4b9bc9719585f360884c517b01 100644
--- a/src/panel-component/nav-pos-index/nav-pos-index.controller.ts
+++ b/src/panel-component/nav-pos-index/nav-pos-index.controller.ts
@@ -243,7 +243,10 @@ export class NavPosIndexController extends PanelItemController<IPanelRawItem> {
     const { view } = event;
     const key = this.state.currentKey; // 缓存一下当前的key，后面每次都是用它
     if (this.navTabs) {
-      this.navTabs.updateViewInfo(key, { caption: view.model.caption });
+      this.navTabs.updateViewInfo(key, {
+        caption: view.model.caption,
+        sysImage: view.model.sysImage,
+      });
       // 监听这个视图的事件
       view.evt.on('onViewInfoChange', ({ caption, dataInfo }) => {
         this.navTabs!.updateViewInfo(key, { caption, dataInfo });
diff --git a/src/panel-component/nav-tabs/nav-tabs.controller.ts b/src/panel-component/nav-tabs/nav-tabs.controller.ts
index 34d7cebf836f3c9f06e29bed253ecfc640737236..2424fba87fb8cb9bf51b9417a16e15e51d22d913 100644
--- a/src/panel-component/nav-tabs/nav-tabs.controller.ts
+++ b/src/panel-component/nav-tabs/nav-tabs.controller.ts
@@ -1,5 +1,5 @@
 import { PanelItemController } from '@ibiz-template/runtime';
-import { IPanelRawItem } from '@ibiz/model-core';
+import { IPanelRawItem, ISysImage } from '@ibiz/model-core';
 import { isNil, reject } from 'ramda';
 import { nextTick } from 'vue';
 import { NavPosIndexController } from '../nav-pos-index';
@@ -66,11 +66,11 @@ export class NavTabsController extends PanelItemController<IPanelRawItem> {
    * @author lxm
    * @date 2023-05-09 01:40:34
    * @param {string} key
-   * @param {{ caption?: string; dataInfo?: string }} info
+   * @param {{ caption?: string; dataInfo?: string; sysImage?: ISysImage }} info
    */
   updateViewInfo(
     key: string,
-    info: { caption?: string; dataInfo?: string },
+    info: { caption?: string; dataInfo?: string; sysImage?: ISysImage },
   ): void {
     const findItem = this.findTabItem(key);
     if (findItem) {
diff --git a/src/panel-component/nav-tabs/nav-tabs.scss b/src/panel-component/nav-tabs/nav-tabs.scss
index 2a3af41a78e4e26238eaf621e84e0f28d436e559..d1f04b52c7b4818b4ca83e183b614936899c2486 100644
--- a/src/panel-component/nav-tabs/nav-tabs.scss
+++ b/src/panel-component/nav-tabs/nav-tabs.scss
@@ -33,11 +33,29 @@ $nav-tabs-item: (
     width: getCssVar('nav-tabs', 'left-width');
       
     @include m('caption'){
-      max-width: 300px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    @include m('content') {
+      display: flex;
+      align-items: center;
+      max-width: 300px;
+
+      &>img.#{bem('icon')} {
+        max-width: getCssVar('width-icon', 'medium');
+      }
+    }
+
+    @include m('icon') {
+      display: flex;
+      align-items: center;
+      &+.#{bem('nav-tabs', 'left', 'caption')} {
+        flex: 1;
+        margin-left: getCssVar(spacing, extra-tight);
+      }
+    }
     
     .el-tabs {
       width: 100%;
@@ -72,6 +90,10 @@ $nav-tabs-item: (
             .is-icon-close {
               color: getCssVar('nav-tabs-item', 'hover-color');
             }
+
+            svg {
+              fill: getCssVar('nav-tabs-item', 'hover-color');
+            }
           }
 
           &.is-active {
@@ -83,6 +105,10 @@ $nav-tabs-item: (
             .is-icon-close {
               color: getCssVar('color', 'white');
             }
+            
+            svg {
+              fill: getCssVar('color', 'white');
+            }
           }
 
           &.is-closable {
diff --git a/src/panel-component/nav-tabs/nav-tabs.state.ts b/src/panel-component/nav-tabs/nav-tabs.state.ts
index b3034028bea26e0dff1a2511d0db30583329764f..b3a9f45e7f728de9e292ee4a3874a8badb9c1494 100644
--- a/src/panel-component/nav-tabs/nav-tabs.state.ts
+++ b/src/panel-component/nav-tabs/nav-tabs.state.ts
@@ -1,9 +1,11 @@
 import { PanelItemState } from '@ibiz-template/runtime';
+import { ISysImage } from '@ibiz/model-core';
 
 export interface TabMsg {
   key: string;
   caption?: string;
   dataInfo?: string;
+  sysImage?: ISysImage;
 }
 
 /**
diff --git a/src/panel-component/nav-tabs/nav-tabs.tsx b/src/panel-component/nav-tabs/nav-tabs.tsx
index 927d577ee5e72be54c55899e2820b3cef0003702..bb382d97f2c9e240eca02f71110abf200ac02bce 100644
--- a/src/panel-component/nav-tabs/nav-tabs.tsx
+++ b/src/panel-component/nav-tabs/nav-tabs.tsx
@@ -97,7 +97,15 @@ export const NavTabs = defineComponent({
                   {{
                     label: (): VNode => {
                       return (
-                        <div class={this.ns.em('left', 'caption')}>{label}</div>
+                        <div class={this.ns.em('left', 'content')}>
+                          <iBizIcon
+                            class={this.ns.em('left', 'icon')}
+                            icon={msg.sysImage}
+                          />
+                          <div class={this.ns.em('left', 'caption')}>
+                            {label}
+                          </div>
+                        </div>
                       );
                     },
                   }}