wl-design-mobile 0.8.19 → 0.8.21

package/list/lambo-list.vue

@@ -1,413 +1,412 @@
-<template>
-  <div :class="{ 'card-mode': card }">
-    <div class="top-btn-div">
-      <div class="opt-btn-div">
-        <slot name="opt"></slot>
-      </div>
-      <div class="filter-btn-div">
-        <slot name="filter"></slot>
-      </div>
-    </div>
-    <div class="tab-btn-div">
-      <div class="tabs-btn-div">
-        <slot name="tabs"></slot>
-      </div>
-    </div>
-    <div ref="listBox" :style="listBoxStyle" class="custom-list"
-         :class="{ 'scrolled': scrolled && card,
-                   'sb-classic': card && classicScrollbar > 0 }" @scroll="onListScroll">
-      <!-- 卡片模式滚动边界: 卡片滑到顶部被裁切时, 浮现顶部投影提示层级 -->
-      <div class="card-top-boundary"></div>
-      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-        <van-list v-model="loading" :finished="finished" :finished-text="finishedTxt" :offset="200" @load="onLoad"
-                  :error.sync="error" :error-text="errorText" :immediate-check="false">
-          <div v-for="(item, index) in list" :key="index" class="list-item">
-            <div class="card-item">
-              <slot name="head" v-bind:item="item"></slot>
-              <slot name="content" v-bind:item="item"></slot>
-              <slot name="footer" v-bind:item="item"></slot>
-            </div>
-          </div>
-        </van-list>
-      </van-pull-refresh>
-    </div>
-  </div>
-</template>
-<script>
-import {axios} from "../util/axios/index"
-import {Toast} from "vant"
-
-export default {
-  name: "LamboList",
-  components: {},
-  props: {
-    heightRatio: {
-      type: Number,
-      default: 0.5,
-    },
-    url: {
-      type: String
-    },
-    searchParams: {
-      type: Object
-    },
-    testMode: false,
-    /* 卡片分组模式: 灰底 + 独立白卡片。移动端统一使用卡片模式, 默认开启;
-       需要旧的扁平分割线模式时显式传 :card="false" */
-    card: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      finished: false,
-      finishedTxt: "",
-      pageNum: 1, // 当前页数
-      pageSize: 10, // 每页数据条数
-      listHeight: '100vh',
-      refreshing: false,
-      offset: 0,
-      limit: 10,
-      list: [],
-      error:false,
-      errorText:'',
-      scrolled: false, // 列表是否已离开顶部(控制滚动边界阴影)
-      classicScrollbar: 0, // 占布局的传统滚动条宽度(桌面通常6px, 真机悬浮为0)
-      currentRequestId: 0 // 当前请求标识符
-    };
-  },
-  mounted() {
-    this.getListHeight();
-    this.detectClassicScrollbar();
-  },
-  computed: {
-    listBoxStyle() {
-      const style = {height: this.listHeight};
-      // 传统滚动条会吃掉内容宽度, 把右侧 padding 收小 (8 - 滚动条宽),
-      // 使滚动条落在 8px 右缝隙内, 卡片左右仍对称; 真机滚动条悬浮时不处理
-      if (this.card && this.classicScrollbar > 0) {
-        style.paddingRight = `${Math.max(0, 8 - this.classicScrollbar)}px`;
-      }
-      return style;
-    }
-  },
-  watch: {
-    // 模式切换后滚动条相关规则可能变化, 重新测量占宽
-    card() {
-      this.$nextTick(this.detectClassicScrollbar);
-    },
-    searchParams: {
-      handler: function (val, oldVal) {
-        console.log("searchParams -- val,oldVal:", {val, oldVal})
-        console.log("searchParams -- val===oldVal:", val === oldVal)
-        //查询时重置页码和请求标识符
-        this.pageNum = 1
-        this.offset = 0
-        this.limit = 10
-        this.list = []
-        this.currentRequestId = 0 // 重置请求标识符
-        this.resetScrollTop()
-
-        this.onLoad()
-      },
-      deep: true
-    },
-  },
-  methods: {
-    onLoad() {
-      if (this.refreshing) {
-        this.list = [];
-        this.refreshing = false;
-      }
-      this.loading = true
-      const requestId = ++this.currentRequestId;
-      if (this.testMode === true) {
-        console.log("lambo-list -- onLoad -- loadData:", this.pageNum)
-        setTimeout(() => {
-          // 检查是否是最新的请求
-          if (requestId !== this.currentRequestId) {
-            return;
-          }
-          console.log('this.searchParams',this.searchParams)
-          let arr = [
-            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
-            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
-          ]
-          this.list.push(...arr)
-          this.finished = false
-          this.loading = false
-          this.offset = this.pageNum * 10
-          this.pageNum++;
-          // 手动触发list-change事件
-          this.$emit('list-change', this.list);
-        }, 1000);  // 暂停1秒
-
-      }else{
-        let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
-        axios.get(this.url, {params}).then(res => {
-          // 检查是否是最新的请求
-          if (requestId !== this.currentRequestId) {
-            return;
-          }
-          console.log("lambo-list -- onLoad -- loadData:", res)
-          if (res && res.code === 1) {
-            let pageData = res.data
-            if (pageData && pageData.rows.length > 0) {
-
-              for (let item of pageData.rows) {
-                if (this.list.length < pageData.total) {
-                  this.list.push(item)
-                  this.finished = false
-                } else {
-                  this.finished = true // 数据加载完毕
-                }
-              }
-              this.offset = this.pageNum * 10
-              this.pageNum++;
-              this.finishedTxt = "没有更多了"
-              // 手动触发list-change事件
-              this.$emit('list-change', this.list);
-            } else {
-              this.finished = true; // 数据加载完毕
-              // 手动触发list-change事件
-              this.$emit('list-change', this.list);
-            }
-
-          } else {
-            console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
-            Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
-            this.error = true;
-            this.errorText = '请求失败\n'+res.data
-          }
-          this.loading = false; // 加载状态结束
-        }).catch(err => {
-          // 检查是否是最新的请求
-          if (requestId !== this.currentRequestId) {
-            return;
-          }
-          console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
-          Toast.fail("查询[" + this.url + "]数据异常")
-          this.error = true;
-          this.errorText = '请求失败\n'+err
-          this.loading = false; // 加载状态结束
-        })
-      }
-    },
-    getListHeight() {
-      const windowHeight = window.innerHeight;
-      this.listHeight = `${windowHeight * this.heightRatio}px`;
-    },
-    detectClassicScrollbar() {
-      // 临时强制显示滚动条, 测量其是否占布局(不依赖列表当前是否溢出)
-      const box = this.$refs.listBox;
-      const prevOverflow = box.style.overflowY;
-      box.style.overflowY = 'scroll';
-      this.classicScrollbar = box.offsetWidth - box.clientWidth;
-      box.style.overflowY = prevOverflow;
-    },
-    onListScroll(e) {
-      // 扁平模式下, 列表离开顶部时在滚动容器上缘浮现阴影提示滚动边界
-      this.scrolled = e.target.scrollTop > 0
-    },
-    resetScrollTop() {
-      // 重新查询/下拉刷新时回到顶部; 赋值会触发 scroll 事件同步 scrolled
-      if (this.$refs.listBox) {
-        this.$refs.listBox.scrollTop = 0
-      }
-    },
-    onRefresh() {
-      console.log("lambo-init-list -- onRefresh")
-
-      this.finished = false
-      this.pageNum = 1
-      this.offset = 0
-      this.limit = 10
-      this.currentRequestId = 0 // 重置请求标识符
-      this.resetScrollTop()
-
-      this.loading = true
-      this.onLoad()
-    }
-  },
-  beforeDestroy() {
-    this.pageNum = 1
-    this.offset = 0
-    this.limit = 10
-    this.list = []
-  }
-};
-</script>
-<style scoped>
-@import "../styles/index.less";
-
-/* 滚动条: 统一窄至 3px、淡灰色, 尽量不抢眼(两种模式共用) */
-::-webkit-scrollbar {
-  width: 3px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background-color: rgba(0, 0, 0, 0.18);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.custom-list {
-  overflow-y: auto;
-  background-color: var(--scl-white-1);
-  padding: 0 8px 0 14px;
-  margin-top: -6px;
-}
-
-/* 卡片模式滚动边界: sticky 钉在容器顶部不随内容滚动, 卡片被裁切时
-   用一段顶部投影暗示卡片是从白色按钮区下方滑过; 静止在顶部时完全透明 */
-.card-top-boundary {
-  display: none;
-}
-
-.card-mode .card-top-boundary {
-  display: block;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  height: 8px;
-  margin-bottom: -8px;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0));
-  opacity: 0;
-  transition: opacity 0.2s;
-  pointer-events: none;
-}
-
-.card-mode .custom-list.scrolled .card-top-boundary {
-  opacity: 1;
-}
-
-.list-item {
-  border-bottom: 1px solid var(--scl-gray-5);
-}
-
-.card-item {
-  padding: 10px 0 0 0;
-  background-color: var(--scl-white-1);
-}
-
-.top-btn-div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  align-content: flex-start;
-  background-color: var(--scl-white-1);
-}
-
-.tab-btn-div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  align-content: flex-start;
-  width: auto;
-  background-color: var(--scl-white-1);
-}
-
-.opt-btn-div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  align-content: flex-start;
-  flex: 1;
-  margin: 10px 10px 10px 14px;
-}
-
-.filter-btn-div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  align-content: flex-end;
-  width: 100px;
-  margin: 10px 14px 10px 10px;
-}
-
-.tabs-btn-div {
-  width: -webkit-fill-available;
-
-}
-
-/* 控制 .filter-btn-div 内的元素的左边距为 6px */
-.filter-btn-div > * {
-  margin-left: 6px;
-}
-
-/* 控制 .opt-btn-div 内的元素的右边距为 6px */
-.opt-btn-div > * {
-  margin-right: 6px;
-}
-
-/* ===== 卡片分组模式(card=true): 露出页面灰底, 每项为独立白卡片, 靠灰色缝隙分组 ===== */
-.card-mode .custom-list {
-  background-color: transparent;
-  /* 卡片距屏幕 8px, 卡片内边距 6px, 文字合计 14px 与上方按钮对齐 */
-  padding: 0 8px;
-  /* 收回默认的 -6px, 第一张卡片与标题间距和卡间缝隙保持一致 */
-  margin-top: 0;
-}
-
-/* Firefox 不识别 ::-webkit-scrollbar, 仅对它启用细滚动条;
-   切不可直接写 scrollbar-width: thin —— Chrome 中该标准属性会覆盖
-   ::-webkit-scrollbar 的 6px, 而 thin 桌面实际渲染为 11px, 导致右缝错位 */
-@supports not selector(::-webkit-scrollbar) {
-  .custom-list {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
-  }
-}
-
-.card-mode .list-item {
-  margin: 8px 0;
-  border-bottom: none;
-  border-radius: 6px;
-  background-color: var(--scl-white-1);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-}
-
-.card-mode .card-item {
-  /* 卡片内容距卡片边缘 6px(上下左右统一) */
-  padding: 6px;
-}
-
-/* 无按钮组时, 末位信息行自带的 8px 下边距收回, 由卡片 padding 统一兜底;
-   有按钮组时最后一行不是 last-child, 到按钮的 8px 间距自然保留。
-   slot 内容不带本组件 scope, 用 /deep/ 穿透。
-   注意: 无操作按钮时应在业务侧 v-if 掉整个按钮组, 不要留空组 */
-.card-mode .card-item /deep/ > :last-child .title-tb {
-  margin-bottom: 0;
-}
-
-/* 按钮组自带 0 14px 内边距, 卡片内收回, 与信息行左对齐 */
-.card-mode .card-item /deep/ .button-group {
-  padding: 0;
-}
-</style>
+<template>
+  <div :class="{ 'card-mode': card }">
+    <div class="top-btn-div">
+      <div class="opt-btn-div">
+        <slot name="opt"></slot>
+      </div>
+      <div class="filter-btn-div">
+        <slot name="filter"></slot>
+      </div>
+    </div>
+    <div class="tab-btn-div">
+      <div class="tabs-btn-div">
+        <slot name="tabs"></slot>
+      </div>
+    </div>
+    <div ref="listBox" :style="listBoxStyle" class="custom-list"
+         :class="{ 'scrolled': scrolled && card,
+                   'sb-classic': card && classicScrollbar > 0 }" @scroll="onListScroll">
+      <!-- 卡片模式滚动边界: 卡片滑到顶部被裁切时, 浮现顶部投影提示层级 -->
+      <div class="card-top-boundary"></div>
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list v-model="loading" :finished="finished" :finished-text="finishedTxt" :offset="200" @load="onLoad"
+                  :error.sync="error" :error-text="errorText" :immediate-check="false">
+          <div v-for="(item, index) in list" :key="index" class="list-item">
+            <div class="card-item">
+              <slot name="head" v-bind:item="item"></slot>
+              <slot name="content" v-bind:item="item"></slot>
+              <slot name="footer" v-bind:item="item"></slot>
+            </div>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+<script>
+import {axios} from "../util/axios/index"
+import {Toast} from "vant"
+
+export default {
+  name: "LamboList",
+  components: {},
+  props: {
+    heightRatio: {
+      type: Number,
+      default: 0.5,
+    },
+    url: {
+      type: String
+    },
+    searchParams: {
+      type: Object
+    },
+    testMode: false,
+    /* 卡片分组模式: 灰底 + 独立白卡片(默认扁平分割线模式, 保持向后兼容) */
+    card: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      finished: false,
+      finishedTxt: "",
+      pageNum: 1, // 当前页数
+      pageSize: 10, // 每页数据条数
+      listHeight: '100vh',
+      refreshing: false,
+      offset: 0,
+      limit: 10,
+      list: [],
+      error:false,
+      errorText:'',
+      scrolled: false, // 列表是否已离开顶部(控制滚动边界阴影)
+      classicScrollbar: 0, // 占布局的传统滚动条宽度(桌面通常6px, 真机悬浮为0)
+      currentRequestId: 0 // 当前请求标识符
+    };
+  },
+  mounted() {
+    this.getListHeight();
+    this.detectClassicScrollbar();
+  },
+  computed: {
+    listBoxStyle() {
+      const style = {height: this.listHeight};
+      // 传统滚动条会吃掉内容宽度, 把右侧 padding 收小 (8 - 滚动条宽),
+      // 使滚动条落在 8px 右缝隙内, 卡片左右仍对称; 真机滚动条悬浮时不处理
+      if (this.card && this.classicScrollbar > 0) {
+        style.paddingRight = `${Math.max(0, 8 - this.classicScrollbar)}px`;
+      }
+      return style;
+    }
+  },
+  watch: {
+    // 模式切换后滚动条相关规则可能变化, 重新测量占宽
+    card() {
+      this.$nextTick(this.detectClassicScrollbar);
+    },
+    searchParams: {
+      handler: function (val, oldVal) {
+        console.log("searchParams -- val,oldVal:", {val, oldVal})
+        console.log("searchParams -- val===oldVal:", val === oldVal)
+        //查询时重置页码和请求标识符
+        this.pageNum = 1
+        this.offset = 0
+        this.limit = 10
+        this.list = []
+        this.currentRequestId = 0 // 重置请求标识符
+        this.resetScrollTop()
+
+        this.onLoad()
+      },
+      deep: true
+    },
+  },
+  methods: {
+    onLoad() {
+      if (this.refreshing) {
+        this.list = [];
+        this.refreshing = false;
+      }
+      this.loading = true
+      const requestId = ++this.currentRequestId;
+      if (this.testMode === true) {
+        console.log("lambo-list -- onLoad -- loadData:", this.pageNum)
+        setTimeout(() => {
+          // 检查是否是最新的请求
+          if (requestId !== this.currentRequestId) {
+            return;
+          }
+          console.log('this.searchParams',this.searchParams)
+          let arr = [
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "XX工作"},
+            {title: "XX市XXXX酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "XX工作"},
+          ]
+          this.list.push(...arr)
+          this.finished = false
+          this.loading = false
+          this.offset = this.pageNum * 10
+          this.pageNum++;
+          // 手动触发list-change事件
+          this.$emit('list-change', this.list);
+        }, 1000);  // 暂停1秒
+
+      }else{
+        let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
+        axios.get(this.url, {params}).then(res => {
+          // 检查是否是最新的请求
+          if (requestId !== this.currentRequestId) {
+            return;
+          }
+          console.log("lambo-list -- onLoad -- loadData:", res)
+          if (res && res.code === 1) {
+            let pageData = res.data
+            if (pageData && pageData.rows.length > 0) {
+
+              for (let item of pageData.rows) {
+                if (this.list.length < pageData.total) {
+                  this.list.push(item)
+                  this.finished = false
+                } else {
+                  this.finished = true // 数据加载完毕
+                }
+              }
+              this.offset = this.pageNum * 10
+              this.pageNum++;
+              this.finishedTxt = "没有更多了"
+              // 手动触发list-change事件
+              this.$emit('list-change', this.list);
+            } else {
+              this.finished = true; // 数据加载完毕
+              // 手动触发list-change事件
+              this.$emit('list-change', this.list);
+            }
+
+          } else {
+            console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
+            Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
+            this.error = true;
+            this.errorText = '请求失败\n'+res.data
+          }
+          this.loading = false; // 加载状态结束
+        }).catch(err => {
+          // 检查是否是最新的请求
+          if (requestId !== this.currentRequestId) {
+            return;
+          }
+          console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
+          Toast.fail("查询[" + this.url + "]数据异常")
+          this.error = true;
+          this.errorText = '请求失败\n'+err
+          this.loading = false; // 加载状态结束
+        })
+      }
+    },
+    getListHeight() {
+      const windowHeight = window.innerHeight;
+      this.listHeight = `${windowHeight * this.heightRatio}px`;
+    },
+    detectClassicScrollbar() {
+      // 临时强制显示滚动条, 测量其是否占布局(不依赖列表当前是否溢出)
+      const box = this.$refs.listBox;
+      const prevOverflow = box.style.overflowY;
+      box.style.overflowY = 'scroll';
+      this.classicScrollbar = box.offsetWidth - box.clientWidth;
+      box.style.overflowY = prevOverflow;
+    },
+    onListScroll(e) {
+      // 扁平模式下, 列表离开顶部时在滚动容器上缘浮现阴影提示滚动边界
+      this.scrolled = e.target.scrollTop > 0
+    },
+    resetScrollTop() {
+      // 重新查询/下拉刷新时回到顶部; 赋值会触发 scroll 事件同步 scrolled
+      if (this.$refs.listBox) {
+        this.$refs.listBox.scrollTop = 0
+      }
+    },
+    onRefresh() {
+      console.log("lambo-init-list -- onRefresh")
+
+      this.finished = false
+      this.pageNum = 1
+      this.offset = 0
+      this.limit = 10
+      this.currentRequestId = 0 // 重置请求标识符
+      this.resetScrollTop()
+
+      this.loading = true
+      this.onLoad()
+    }
+  },
+  beforeDestroy() {
+    this.pageNum = 1
+    this.offset = 0
+    this.limit = 10
+    this.list = []
+  }
+};
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+/* 滚动条: 统一窄至 3px、淡灰色, 尽量不抢眼(两种模式共用) */
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0.18);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.custom-list {
+  overflow-y: auto;
+  background-color: var(--scl-white-1);
+  padding: 0 8px 0 14px;
+  margin-top: -6px;
+}
+
+/* 卡片模式滚动边界: sticky 钉在容器顶部不随内容滚动, 卡片被裁切时
+   用一段顶部投影暗示卡片是从白色按钮区下方滑过; 静止在顶部时完全透明 */
+.card-top-boundary {
+  display: none;
+}
+
+.card-mode .card-top-boundary {
+  display: block;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: 8px;
+  margin-bottom: -8px;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0));
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+}
+
+.card-mode .custom-list.scrolled .card-top-boundary {
+  opacity: 1;
+}
+
+.list-item {
+  border-bottom: 1px solid var(--scl-gray-5);
+}
+
+.card-item {
+  padding: 10px 0 0 0;
+  background-color: var(--scl-white-1);
+}
+
+.top-btn-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  background-color: var(--scl-white-1);
+}
+
+.tab-btn-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  width: auto;
+  background-color: var(--scl-white-1);
+}
+
+.opt-btn-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  flex: 1;
+  margin: 10px 10px 10px 14px;
+}
+
+.filter-btn-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: flex-end;
+  width: 100px;
+  margin: 10px 14px 10px 10px;
+}
+
+.tabs-btn-div {
+  width: -webkit-fill-available;
+
+}
+
+/* 控制 .filter-btn-div 内的元素的左边距为 6px */
+.filter-btn-div > * {
+  margin-left: 6px;
+}
+
+/* 控制 .opt-btn-div 内的元素的右边距为 6px */
+.opt-btn-div > * {
+  margin-right: 6px;
+}
+
+/* ===== 卡片分组模式(card=true): 露出页面灰底, 每项为独立白卡片, 靠灰色缝隙分组 ===== */
+.card-mode .custom-list {
+  background-color: transparent;
+  /* 卡片距屏幕 8px, 卡片内边距 6px, 文字合计 14px 与上方按钮对齐 */
+  padding: 0 8px;
+  /* 收回默认的 -6px, 第一张卡片与标题间距和卡间缝隙保持一致 */
+  margin-top: 0;
+}
+
+/* Firefox 不识别 ::-webkit-scrollbar, 仅对它启用细滚动条;
+   切不可直接写 scrollbar-width: thin —— Chrome 中该标准属性会覆盖
+   ::-webkit-scrollbar 的 6px, 而 thin 桌面实际渲染为 11px, 导致右缝错位 */
+@supports not selector(::-webkit-scrollbar) {
+  .custom-list {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
+  }
+}
+
+.card-mode .list-item {
+  margin: 8px 0;
+  border-bottom: none;
+  border-radius: 6px;
+  background-color: var(--scl-white-1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.card-mode .card-item {
+  /* 卡片内容距卡片边缘 6px(上下左右统一) */
+  padding: 6px;
+}
+
+/* 无按钮组时, 末位信息行自带的 8px 下边距收回, 由卡片 padding 统一兜底;
+   有按钮组时最后一行不是 last-child, 到按钮的 8px 间距自然保留。
+   slot 内容不带本组件 scope, 用 /deep/ 穿透。
+   注意: 无操作按钮时应在业务侧 v-if 掉整个按钮组, 不要留空组 */
+.card-mode .card-item /deep/ > :last-child .title-tb {
+  margin-bottom: 0;
+}
+
+/* 按钮组自带 0 14px 内边距, 卡片内收回, 与信息行左对齐 */
+.card-mode .card-item /deep/ .button-group {
+  padding: 0;
+}
+</style>