From 97514c8ce273b2529942646b0202d356a417c1ea Mon Sep 17 00:00:00 2001
From: van <van333@foxmail.com>
Date: Fri, 10 Apr 2026 16:10:30 +0800
Subject: [PATCH] 1

---
 src/components/ListLayout/index.vue    | 32 +++++++++++++-
 src/views/system/jdorder/orderList.vue | 60 +++++++++++++++++++++++++-
 2 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/src/components/ListLayout/index.vue b/src/components/ListLayout/index.vue
index fb4f9c8..9fcd71a 100644
--- a/src/components/ListLayout/index.vue
+++ b/src/components/ListLayout/index.vue
@@ -39,13 +39,16 @@ export default {
   overflow: hidden;
 }
 
-/* 搜索区域 - 固定在顶部 */
+/* 搜索区域 - 固定在顶部；限制高度避免矮窗口下占满视口、表格不可见 */
 .search-section {
   flex-shrink: 0;
   background: #fff;
   padding: 20px;
   border-bottom: 1px solid #e4e7ed;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-height: min(520px, calc(100vh - 84px - 200px));
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 /* 表格区域 - 可滚动 */
@@ -71,6 +74,25 @@ export default {
   z-index: 10;
 }
 
+.search-section::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.search-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.search-section::-webkit-scrollbar-thumb {
+  background: #c0c0c0;
+  border-radius: 3px;
+}
+
+.search-section::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
 /* 表格区域滚动条样式 */
 .table-section::-webkit-scrollbar {
   width: 6px;
@@ -106,6 +128,14 @@ export default {
   padding: 10px 0;
 }
 
+/* 窗口高度较矮时：为表格多留垂直空间、收紧搜索区内边距 */
+@media (max-height: 720px) {
+  .list-layout .search-section {
+    padding: 12px 16px;
+    max-height: min(420px, calc(100vh - 84px - 160px));
+  }
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .list-layout {
diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue
index 59f0c71..c302341 100644
--- a/src/views/system/jdorder/orderList.vue
+++ b/src/views/system/jdorder/orderList.vue
@@ -63,7 +63,17 @@
                 </div>
               </div>
 
-              <div class="jd-filter-group jd-filter-group--status">
+              <div v-if="isDesktopFilterCompact" class="jd-filter-compact-toggle">
+                <el-button type="text" size="small" class="jd-filter-compact-toggle__btn" @click="showFollowUpFilters = !showFollowUpFilters">
+                  <i :class="showFollowUpFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+                  {{ showFollowUpFilters ? '收起跟进状态' : '展开跟进状态筛选' }}
+                </el-button>
+              </div>
+
+              <div
+                v-show="!isDesktopFilterCompact || showFollowUpFilters"
+                class="jd-filter-group jd-filter-group--status"
+              >
                 <div class="jd-filter-group-head">
                   <span class="jd-filter-group-title">跟进状态</span>
                 </div>
@@ -1198,11 +1208,19 @@ export default {
       // 列表加载后自动同步利润（防快速翻页乱序）
       syncAutoProfitSeq: 0,
       /** 移动端卡片：当前展开的订单 id（null 表示全部收起，同时只展开一条） */
-      mobileExpandedOrderId: null
+      mobileExpandedOrderId: null,
+      /** 视口高度（桌面端用于矮窗口下自动收起「跟进状态」筛选） */
+      viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 900,
+      /** 矮窗口下是否展开「跟进状态」分组（默认依视口在 mounted/resize 中更新） */
+      showFollowUpFilters: true
     }
   },
   computed: {
     ...mapGetters(['device']),
+    /** 桌面端且窗口高度较低：压缩筛选区，避免列表被挤出视口 */
+    isDesktopFilterCompact() {
+      return !this.isMobile && this.viewportHeight < 780
+    },
     isMobile() {
       // 只在移动端返回true，桌面端严格返回false
       if (this.device === 'mobile') {
@@ -1270,13 +1288,37 @@ export default {
     }
     window.addEventListener('message', this.handleOAuthMessage)
   },
+  mounted() {
+    this.viewportHeight = window.innerHeight
+    if (!this.isMobile && this.viewportHeight < 780) {
+      this.showFollowUpFilters = false
+    }
+    this._onJdFilterViewportResize = () => this.onJdFilterViewportResize()
+    window.addEventListener('resize', this._onJdFilterViewportResize, { passive: true })
+  },
   beforeDestroy() {
     // 移除消息监听器
     if (this.handleOAuthMessage) {
       window.removeEventListener('message', this.handleOAuthMessage)
     }
+    if (this._onJdFilterViewportResize) {
+      window.removeEventListener('resize', this._onJdFilterViewportResize)
+    }
   },
   methods: {
+    onJdFilterViewportResize() {
+      const prev = this.viewportHeight
+      const h = window.innerHeight
+      this.viewportHeight = h
+      if (this.isMobile) return
+      const nowCompact = h < 780
+      const wasCompact = prev < 780
+      if (nowCompact && !wasCompact) {
+        this.showFollowUpFilters = false
+      } else if (!nowCompact && wasCompact) {
+        this.showFollowUpFilters = true
+      }
+    },
     /** 凡系分销标识：历史 F 与 F-中文（如 F-王杰）等同 */
     isFanDistributionMark(mark) {
       if (mark == null || mark === '') return false
@@ -2989,6 +3031,20 @@ export default {
   flex-direction: column;
   gap: 0;
 }
+.jd-filter-compact-toggle {
+  width: 100%;
+  margin: 4px 0 2px;
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+.jd-filter-compact-toggle__btn {
+  padding: 4px 0;
+  color: var(--jd-accent);
+  font-size: 13px;
+}
+.jd-filter-compact-toggle__btn i {
+  margin-right: 4px;
+}
 .jd-order-filter-form ::v-deep .el-form-item {
   margin-right: 14px;
   margin-bottom: 12px;