From 2022225aeb3d9d69598bb6edc516077e86a37c2b Mon Sep 17 00:00:00 2001
From: lijisanxiong <1518062161@qq.com>
Date: Thu, 16 Jan 2025 21:24:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=8D=A0?=
 =?UTF-8?q?=E4=BD=8D=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  4 +++
 .../nav-pos-index/nav-pos-index.controller.ts |  5 +++-
 .../nav-tabs/nav-tabs.controller.ts           |  6 ++--
 src/panel-component/nav-tabs/nav-tabs.scss    | 28 ++++++++++++++++++-
 .../nav-tabs/nav-tabs.state.ts                |  2 ++
 src/panel-component/nav-tabs/nav-tabs.tsx     | 10 ++++++-
 6 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 954dbcfac..f5162e79f 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 12c109943..8f2aae1df 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 34d7cebf8..2424fba87 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 2a3af41a7..d1f04b52c 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 b3034028b..b3a9f45e7 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 927d577ee..bb382d97f 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>
                       );
                     },
                   }}
-- 
Gitee