From 1344a0ef1d26ebcc2874d58574e7f805a44ef464 Mon Sep 17 00:00:00 2001
From: "jlj05024111@163.com" <jlj05024111@163.com>
Date: Thu, 14 Aug 2025 21:06:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddrtab=E6=B5=81?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=B5=8C=E5=A5=97drtab=E6=B5=81=E5=BC=8F?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=97=B6=E6=A0=B7=E5=BC=8F=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E5=88=9D=E5=A7=8B=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  4 ++++
 src/control/drtab/flow-drtab.scss             |  8 +++----
 src/control/drtab/flow-drtab.tsx              | 22 ++++++++++++++-----
 .../panel-tab-panel/panel-tab-panel.tsx       |  2 +-
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a19ada47..fc7d7b83 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+## Fixed
+
+- 修复drtab流布局嵌套drtab流式布局时样式异常以及初始导航栏定位异常问题
+
 ## [0.7.41-alpha.18] - 2025-08-14
 
 ### Added
diff --git a/src/control/drtab/flow-drtab.scss b/src/control/drtab/flow-drtab.scss
index beb05b77..aac2a81b 100644
--- a/src/control/drtab/flow-drtab.scss
+++ b/src/control/drtab/flow-drtab.scss
@@ -124,8 +124,8 @@
             flex-direction: row;
             overflow: auto;
 
-            @include e('container') {
-                --navbarwidth: 200;
+            >.#{bem(flow-drtab,container)}{
+                --navbarwidth: 200px;
 
                 flex: 1 0;
                 width: calc(100% - var(--navbarwidth) - (2 * getCssVar(spacing, base)));
@@ -148,8 +148,8 @@
             flex-direction: row-reverse;
             overflow: auto;
 
-            @include e('container') {
-                --navbarwidth: 200;
+            >.#{bem(flow-drtab,container)}{
+                --navbarwidth: 200px;
 
                 flex: 1 0;
                 width: calc(100% - var(--navbarwidth) - (2 * getCssVar(spacing, base)));
diff --git a/src/control/drtab/flow-drtab.tsx b/src/control/drtab/flow-drtab.tsx
index 7aa21f5b..d897767c 100644
--- a/src/control/drtab/flow-drtab.tsx
+++ b/src/control/drtab/flow-drtab.tsx
@@ -163,9 +163,6 @@ export const FlowDrtab = defineComponent({
     // 创建 Intersection Observer 对象,用来观察滚动元素
     const observer = new IntersectionObserver(
       (entries: IntersectionObserverEntry[]) => {
-        if (allVisibleViews.value !== completedViews.value) {
-          return;
-        }
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             // 当元素进入视口时执行的操作
@@ -194,6 +191,14 @@ export const FlowDrtab = defineComponent({
             }
           }
         });
+        visibleViews.sort((a: string, b: string) => {
+          const aIndex = allNavTags.value?.findIndex(tag => tag === a);
+          const bIndex = allNavTags.value?.findIndex(tag => tag === b);
+          return aIndex - bIndex;
+        });
+        if (allVisibleViews.value !== completedViews.value || !c.enableAnchor) {
+          return;
+        }
         computeSelectItem();
       },
     );
@@ -211,7 +216,11 @@ export const FlowDrtab = defineComponent({
       if (el) {
         observer.observe(el);
       }
-      if (completedViews.value === allVisibleViews.value && props.activeTab) {
+      if (
+        completedViews.value === allVisibleViews.value &&
+        props.activeTab &&
+        props.activeTab.tag !== props.drtabpages[0].id
+      ) {
         nextTick(() => {
           scrollToTarget();
         });
@@ -226,7 +235,10 @@ export const FlowDrtab = defineComponent({
             return page.id === newVal.tag;
           });
           navtag.value = `${target?.appViewId}_${newVal.tag}`;
-          scrollToTarget();
+          if (newVal.tag !== props.drtabpages[0].id) {
+            // 不是第一个才滚动
+            scrollToTarget();
+          }
         }
       },
       {
diff --git a/src/panel-component/panel-tab-panel/panel-tab-panel.tsx b/src/panel-component/panel-tab-panel/panel-tab-panel.tsx
index 27c817fc..07986cf6 100644
--- a/src/panel-component/panel-tab-panel/panel-tab-panel.tsx
+++ b/src/panel-component/panel-tab-panel/panel-tab-panel.tsx
@@ -83,7 +83,7 @@ export const PanelTabPanel = defineComponent({
               name={c.model.id}
               lazy
             >
-              {slot}
+              {this.state.activeTab === c.model.id && slot}
             </el-tab-pane>
           );
         })}
-- 
Gitee