✨ feat: l2过程跟踪

klp-ui/src/components/KLPUI/KLPList/index.vue

@@ -1,35 +1,103 @@
 <template>
   <div class="klp-list-container">
-    <!-- 列表加载状态 -->
+    <!-- 列表加载状态（Element UI Vue2 支持 v-loading 指令） -->
     <div v-loading="loading" class="list-loading-wrapper">
-      <!-- 列表项渲染 -->
+      <!-- 列表项渲染（分两行布局） -->
       <div 
         v-for="(item, index) in listData" 
         :key="item[listKey] || index" 
         class="klp-list-item"
-        :class="{ 'active': isSelected(item) }"
-        @click.stop="handleItemClick(item)" 
+        :class="{ 'active': isSelected(item) }" 
+        @click.stop="handleItemClick(item)"
       >
-        <!-- 列表标题区域 - 文字溢出省略+Tooltip -->
-        <div class="klp-list-title">
-          <span class="title-label">{{ titleLabel }}：</span>
-          <el-tooltip 
-            :content="item[titleField]" 
-            placement="top"
-            :disabled="!isContentOverflow(item)"
-            effect="light"
-          >
-            <span class="title-value">{{ item[titleField] }}</span>
-          </el-tooltip>
-        </div>  
+        <!-- 核心内容区：分两行展示6个信息位 -->
+        <div class="klp-list-content">
+          <!-- 第一行：主标题 + 副标题 + 状态（info1~info3） -->
+          <div class="klp-list-row klp-list-row1" :style="{ gap: `${rowGap}px` }">
+            <!-- 信息位1：主标题（保留原Tooltip溢出检测） -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info1', item)">
+              <slot name="info1" :item="item" :isSelected="isSelected(item)">
+                <!-- Vue2 作用域插槽后备内容需用 template + slot-scope 包裹 -->
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info1Label">{{ info1Label }}：</span>
+                  <el-tooltip 
+                    :content="item[info1Field]" 
+                    placement="top" 
+                    :disabled="!isContentOverflow(item, 'info1')"
+                    effect="light"
+                  >
+                    <span class="info-value info-value--primary">{{ item[info1Field] }}</span>
+                  </el-tooltip>
+                </template>
+              </slot>
+            </div>
 
-        <!-- 右侧操作按钮组 -->
+            <!-- 信息位2：副标题 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info2', item)">
+              <slot name="info2" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info2Label">{{ info2Label }}：</span>
+                  <span class="info-value">{{ item[info2Field] }}</span>
+                </template>
+              </slot>
+            </div>
+
+            <!-- 信息位3：状态（常用插槽自定义，如标签） -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info3', item)">
+              <slot name="info3" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info3Label">{{ info3Label }}：</span>
+                  <span class="info-value">{{ item[info3Field] }}</span>
+                </template>
+              </slot>
+            </div>
+          </div>
+
+          <!-- 第二行：时间 + 数量 + 备注（info4~info6） -->
+          <div class="klp-list-row klp-list-row2" :style="{ gap: `${rowGap}px`, marginBottom: `${rowMarginBottom}px` }">
+            <!-- 信息位4：时间 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info4', item)">
+              <slot name="info4" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info4Label">{{ info4Label }}：</span>
+                  <span class="info-value">{{ item[info4Field] }}</span>
+                </template>
+              </slot>
+            </div>
+
+            <!-- 信息位5：数量/金额 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info5', item)">
+              <slot name="info5" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info5Label">{{ info5Label }}：</span>
+                  <span class="info-value">{{ item[info5Field] }}</span>
+                </template>
+              </slot>
+            </div>
+
+            <!-- 信息位6：备注 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info6', item)">
+              <slot name="info6" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info6Label">{{ info6Label }}：</span>
+                  <span class="info-value">{{ item[info6Field] }}</span>
+                </template>
+              </slot>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧操作按钮组（位置不变） -->
         <div class="klp-list-actions">
-          <slot name="actions" :item="item" :isSelected="isSelected(item)"></slot>
+          <slot name="actions" :item="item" :isSelected="isSelected(item)">
+            <template slot-scope="{ item, isSelected }">
+              <!-- 操作栏后备内容（若父组件未提供则显示空） -->
+            </template>
+          </slot>
         </div>
       </div>
 
-      <!-- 空状态提示 -->
+      <!-- 空状态提示（Vue2 需显式注册 ElEmpty 组件） -->
       <div v-if="listData.length === 0 && !loading" class="klp-list-empty">
         <el-empty description="暂无数据" />
       </div>
@@ -38,37 +106,26 @@
 </template>
 
 <script>
+// Vue2 需显式引入 Element UI 组件
+import { ElTooltip, ElEmpty } from 'element-ui';
+
 export default {
   name: "KLPList",
-  components: {},
+  // 注册引入的 Element 组件
+  components: { ElTooltip, ElEmpty },
   props: {
+    // ---------------------- 原有核心Props（保留） ----------------------
     /** 列表数据源（必传） */
     listData: {
       type: Array,
       required: true,
       default: () => []
     },
-
-    /** 列表项唯一标识字段（必传，如orderId、id） */
+    /** 列表项唯一标识字段（必传） */
     listKey: {
       type: String,
       required: true
     },
-
-    /** 列表标题前置标签（如"订单编号："） */
-    titleLabel: {
-      type: String,
-      required: true,
-      default: "标题"
-    },
-
-    /** 列表项标题对应的字段名（如orderCode、name） */
-    titleField: {
-      type: String,
-      required: true,
-      default: "title"
-    },
-
     /** 列表加载状态 */
     loading: {
       type: Boolean,
@@ -76,67 +133,128 @@ export default {
       default: false
     },
 
-    /** 标题最大宽度占容器的百分比（0-100），控制文字溢出 */
-    titleMaxPercent: {
+    // ---------------------- 新增：6个信息位配置 ----------------------
+    // 信息位1（主标题，兼容原titleField）
+    info1Field: {
+      type: String,
+      required: false,
+      default: "title" // 默认对应原titleField
+    },
+    info1Label: {
+      type: String,
+      required: false,
+      default: "" // 兼容原titleLabel
+    },
+    // 信息位2（副标题）
+    info2Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info2Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位3（状态）
+    info3Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info3Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位4（时间）
+    info4Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info4Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位5（数量/金额）
+    info5Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info5Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位6（备注）
+    info6Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info6Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+
+    // ---------------------- 新增：样式控制Props ----------------------
+    /** 每行内部信息位的间距（px） */
+    rowGap: {
       type: Number,
       required: false,
-      default: 80 // 默认占容器80%宽度
+      default: 16 // 默认间距16px
+    },
+    /** 两行之间的垂直间距（px） */
+    rowMarginBottom: {
+      type: Number,
+      required: false,
+      default: 4 // 默认4px
+    },
+    /** 主标题最大宽度占内容区的百分比（控制溢出） */
+    info1MaxPercent: {
+      type: Number,
+      required: false,
+      default: 60 // 主标题占比下调，给其他信息位留空间
     }
   },
   data() {
     return {
-      // 内部管理选中状态：存储当前选中项的唯一键值（单选中）
-      selectedKey: null,
-      // 文字溢出检测临时元素（避免重复创建）
-      overflowCheckElements: {},
-      // 容器宽度缓存
-      containerWidth: 0
+      selectedKey: null, // 选中状态（不变）
+      overflowCheckElements: {}, // 溢出检测临时元素（不变）
+      containerWidth: 0 // 容器宽度缓存（不变）
     };
   },
   methods: {
-    /**
-     * 判断当前列表项是否被选中
-     * @param {Object} item - 列表项数据
-     * @returns {Boolean} 选中状态
-     */
+    // ---------------------- 原有核心方法（保留+微调） ----------------------
+    /** 判断列表项是否选中（不变） */
     isSelected(item) {
       const itemKey = item[this.listKey];
       return this.selectedKey === itemKey;
     },
 
-    /**
-     * 列表项点击事件：切换选中状态（单选中逻辑）
-     * @param {Object} item - 点击的列表项数据
-     */
+    /** 列表项点击事件（不变） */
     handleItemClick(item) {
-      const itemKey = item[this.listKey]; 
-      // 单选中逻辑：点击已选中项取消选中，点击未选中项切换选中（取消其他项）
-      // this.selectedKey = this.selectedKey === itemKey ? null : itemKey;
+      const itemKey = item[this.listKey];
       this.selectedKey = itemKey;
-      
-      // 向父组件触发事件：传递当前选中项（null表示无选中）
       const selectedItem = this.selectedKey ? item : null;
       this.$emit("item-click", selectedItem, item);
     },
 
-    /**
-     * 清空选中状态（支持父组件通过ref调用）
-     */
+    /** 清空选中状态（不变） */
     clearSelection() {
       this.selectedKey = null;
-      // 触发清空选中事件
       this.$emit("selection-cleared");
     },
 
-    /**
-     * 主动设置选中项（支持父组件通过ref调用）
-     * @param {String/Number} targetKey - 要选中项的唯一键值
-     */
+    /** 主动设置选中项（不变） */
     setSelection(targetKey) {
       const isExist = this.listData.some(item => item[this.listKey] === targetKey);
       if (isExist) {
         this.selectedKey = targetKey;
-        // 触发选中事件
         const selectedItem = this.listData.find(item => item[this.listKey] === targetKey);
         this.$emit("item-click", selectedItem);
       } else {
@@ -145,31 +263,58 @@ export default {
       }
     },
 
+    // ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
     /**
-     * 判断文字是否溢出（控制Tooltip显示/隐藏）
+     * 判断信息位是否需要显示（插槽存在 或 字段有值）
+     * @param {String} infoKey - 信息位标识（info1~info6）
      * @param {Object} item - 列表项数据
+     * @returns {Boolean} 是否显示
+     */
+    showInfoItem(infoKey, item) {
+      // 前置容错：避免item为undefined导致报错
+      if (!item) return false;
+
+      // Vue2 作用域插槽判断：$scopedSlots 中插槽以函数形式存在
+      const hasSlot = typeof this.$scopedSlots[infoKey] === 'function';
+      if (hasSlot) return true;
+
+      // 2. 无插槽时，判断字段配置是否存在 + 字段值是否有效
+      const field = this[`${infoKey}Field`];
+      // 容错：字段未配置（如没传info1Field）则不显示
+      if (!field) return false;
+      // 字段值有效判断（排除 undefined/null/空字符串）
+      return item[field] !== undefined && item[field] !== null && item[field] !== "";
+    },
+
+    /**
+     * 信息位1（主标题）溢出检测（适配新字段）
+     * @param {Object} item - 列表项数据
+     * @param {String} infoKey - 信息位标识（仅info1需要）
      * @returns {Boolean} 是否溢出
      */
-    isContentOverflow(item) {
+    isContentOverflow(item, infoKey) {
       const itemKey = item[this.listKey];
-      const content = item[this.titleField] || "";
+      const field = this[`${infoKey}Field`];
+      const content = item[field] || "";
 
-      // 内容为空时不显示Tooltip
-      if (!content) return false;
+      // 内容为空或无字段时不显示Tooltip
+      if (!content || !field) return false;
 
-       // 获取容器宽度并增加存在性检查
-      const container = this.$el.querySelector('.klp-list-container');
-      if (!container) return false; // 容器不存在时直接返回
-      this.containerWidth = container.clientWidth;
-      
-      // 计算标题内容最大可用宽度（减去标签和边距）
-      const labelWidth = this.$el.querySelector('.title-label')?.offsetWidth || 60;
-      const availableWidth = (this.containerWidth * this.titleMaxPercent / 100) - labelWidth - 20;
+      // 获取内容区宽度（原容器宽度改为内容区宽度）
+      // 注意：listData.indexOf(item) 可能因重复项导致索引错误，建议确保listData唯一
+      const itemIndex = this.listData.indexOf(item);
+      const contentEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .klp-list-content`);
+      if (!contentEl) return false;
+      const contentWidth = contentEl.clientWidth;
 
-      // 创建临时元素测量文字实际宽度（复用元素避免性能问题）
+      // 计算信息位1的最大可用宽度（减去标签宽度）
+      const labelEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .info-label`);
+      const labelWidth = labelEl ? labelEl.offsetWidth : 40;
+      const maxWidth = (contentWidth * this.info1MaxPercent) / 100 - labelWidth - 12;
+
+      // 复用临时元素检测宽度（不变）
       if (!this.overflowCheckElements[itemKey]) {
         const tempEl = document.createElement("span");
-        // 复制title-value的样式（确保测量准确）
         tempEl.style.cssText = `
           visibility: hidden;
           position: absolute;
@@ -183,26 +328,21 @@ export default {
         this.overflowCheckElements[itemKey] = tempEl;
       }
 
-      // 比较文字实际宽度与可用宽度
       const tempEl = this.overflowCheckElements[itemKey];
-      return tempEl.offsetWidth > availableWidth;
+      return tempEl.offsetWidth > maxWidth;
     },
 
-    /**
-     * 监听容器宽度变化
-     */
+    /** 窗口 resize 重新计算（不变） */
     handleResize() {
-      // 宽度变化时重新计算溢出状态
       this.$forceUpdate();
     }
   },
   watch: {
-    /** 列表数据变化时，重置选中状态和溢出检测元素 */
+    /** 列表数据变化时清理临时元素（不变） */
     listData: {
       deep: true,
       handler() {
         this.clearSelection();
-        // 清理临时测量元素
         Object.values(this.overflowCheckElements).forEach(el => {
           document.body.removeChild(el);
         });
@@ -210,112 +350,139 @@ export default {
       }
     },
 
-    /** 标题最大百分比变化时，重新计算溢出 */
-    titleMaxPercent() {
+    /** 主标题占比变化时重新计算溢出（适配新prop） */
+    info1MaxPercent() {
       this.$forceUpdate();
     }
   },
   mounted() {
+    // 初始化内容区宽度（适配新结构）
     this.$nextTick(() => {
-    const container = this.$el.querySelector('.klp-list-container');
-      // 增加存在性检查
-      this.containerWidth = container ? container.clientWidth : 0;
+      const contentEl = this.$el.querySelector('.klp-list-content');
+      this.containerWidth = contentEl ? contentEl.clientWidth : 0;
     });
-    
-    // 监听窗口大小变化
     window.addEventListener('resize', this.handleResize);
   },
+  // Vue2 销毁钩子：beforeDestroy（Vue3为onBeforeUnmount）
   beforeDestroy() {
-    // 清理临时元素
+    // 清理临时元素和事件监听（不变）
     Object.values(this.overflowCheckElements).forEach(el => {
       document.body.removeChild(el);
     });
-    
-    // 移除事件监听
     window.removeEventListener('resize', this.handleResize);
   }
 };
 </script>
 
 <style scoped>
-/* 列表容器基础样式 */
+/* 列表容器（不变） */
 .klp-list-container {
   max-height: calc(100vh - 220px);
   overflow-y: auto;
   padding-right: 8px;
   margin-top: 10px;
-  width: 100%; /* 确保容器宽度正确计算 */
+  width: 100%;
   box-sizing: border-box;
 }
 
-/* 加载状态容器（避免加载时容器塌陷） */
+/* 加载容器（不变） */
 .list-loading-wrapper {
   min-height: 100px;
 }
 
-/* 列表项样式 */
+/* 列表项：改为上下两行+右侧操作的布局 */
 .klp-list-item {
-  padding: 6px 8px;
-  margin-bottom: 6px;
-  border-bottom: 1px solid #111;
+  padding: 10px 12px;
+  /* 增加内边距，适配两行 */
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f5f7fa;
+  /* 弱化底边框，突出选中态 */
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
+  align-items: flex-start;
+  /* 顶部对齐，避免操作区下移 */
   justify-content: space-between;
-  align-items: center;
   box-sizing: border-box;
-  width: 100%; /* 确保列表项占满容器宽度 */
+  width: 100%;
+  background-color: #fafafa;
+  /* 未选中时浅背景，区分选中态 */
 }
 
-/* 列表项选中状态（左侧高亮边框+背景色） */
+/* 列表项选中状态（不变） */
 .klp-list-item.active {
   border-left: 3px solid #2bf;
-  /* background-color: #fff; */
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  /* 增加轻微阴影，突出选中项 */
 }
 
-/* 列表标题区域（占满中间空间，让操作按钮靠右） */
-.klp-list-title {
+/* 内容区：包裹两行信息位，占满剩余空间 */
+.klp-list-content {
+  flex: 1;
+  min-width: 0;
+  /* 关键：允许内容区缩小，避免溢出 */
+  display: flex;
+  flex-direction: column;
+}
+
+/* 行容器：控制单行信息位布局 */
+.klp-list-row {
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0; /* 关键：允许flex项缩小到内容尺寸以下 */
-  overflow: hidden; /* 确保内容不会超出容器 */
+  flex-wrap: nowrap;
+  /* 禁止换行，溢出省略 */
+  overflow: hidden;
+  /* 隐藏超出行的内容 */
 }
 
-/* 标题前置标签样式 */
-.klp-list-title .title-label {
-  color: #111;
-  margin-right: 6px;
-  font-size: 13px;
-  white-space: nowrap; /* 标签不换行 */
-  flex-shrink: 0; /* 标签不缩小 */
+/* 信息位容器：单个信息的最小单元 */
+.klp-list-info-item {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  /* 禁止信息位内部换行 */
 }
 
-/* 标题内容样式（溢出省略） */
-.klp-list-title .title-value {
-  color: #111;
-  font-weight: 500;
+/* 信息位标签：次要文字，颜色偏浅 */
+.info-label {
+  color: #606266;
+  font-size: 12px;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+/* 信息位值：默认样式 */
+.info-value {
+  color: #303133;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 溢出显示省略号 */
+}
+
+/* 主标题（info1）值：加粗突出 */
+.info-value--primary {
   font-size: 14px;
-  white-space: nowrap; /* 禁止换行 */
-  overflow: hidden; /* 超出部分隐藏 */
-  text-overflow: ellipsis; /* 超出部分显示省略号 */
-  flex: 1; /* 占据剩余空间 */
-  min-width: 0; /* 关键：允许内容区域缩小 */
+  font-weight: 500;
 }
 
-/* 操作按钮组（按钮间距控制） */
+/* 右侧操作区（不变，增加顶部对齐） */
 .klp-list-actions {
   display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0; /* 操作区不缩小 */
-  margin-left: 8px;
+  align-items: flex-start;
+  /* 与内容区顶部对齐 */
+  gap: 6px;
+  flex-shrink: 0;
+  margin-left: 12px;
+  padding-top: 2px;
+  /* 微调垂直位置 */
 }
 
-/* 空状态样式（居中显示） */
+/* 空状态（不变） */
 .klp-list-empty {
   padding: 40px 0;
   text-align: center;
 }
-</style>
-    
+</style>