init

2025-10-10 16:47:38 +08:00
commit 3db2ccf591
1160 changed files with 157697 additions and 0 deletions
--- a/apps/l3/src/components/KLPUI/KLPList/index.vue
+++ b/apps/l3/src/components/KLPUI/KLPList/index.vue
@@ -0,0 +1,488 @@
+<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)"
+      >
+        <!-- 核心内容区：分两行展示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)">
+            <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>
+    </div>
+  </div>
+</template>
+
+<script>
+// Vue2 需显式引入 Element UI 组件
+import { ElTooltip, ElEmpty } from 'element-ui';
+
+export default {
+  name: "KLPList",
+  // 注册引入的 Element 组件
+  components: { ElTooltip, ElEmpty },
+  props: {
+    // ---------------------- 原有核心Props（保留） ----------------------
+    /** 列表数据源（必传） */
+    listData: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    /** 列表项唯一标识字段（必传） */
+    listKey: {
+      type: String,
+      required: true
+    },
+    /** 列表加载状态 */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    // ---------------------- 新增：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: 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 // 容器宽度缓存（不变）
+    };
+  },
+  methods: {
+    // ---------------------- 原有核心方法（保留+微调） ----------------------
+    /** 判断列表项是否选中（不变） */
+    isSelected(item) {
+      const itemKey = item[this.listKey];
+      return this.selectedKey === itemKey;
+    },
+
+    /** 列表项点击事件（不变） */
+    handleItemClick(item) {
+      const itemKey = item[this.listKey];
+      this.selectedKey = itemKey;
+      const selectedItem = this.selectedKey ? item : null;
+      this.$emit("item-click", selectedItem, item);
+    },
+
+    /** 清空选中状态（不变） */
+    clearSelection() {
+      this.selectedKey = null;
+      this.$emit("selection-cleared");
+    },
+
+    /** 主动设置选中项（不变） */
+    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 {
+        this.selectedKey = null;
+        console.warn(`列表中不存在key为${targetKey}的项`);
+      }
+    },
+
+    // ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
+    /**
+     * 判断信息位是否需要显示（插槽存在 或 字段有值）
+     * @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, infoKey) {
+      const itemKey = item[this.listKey];
+      const field = this[`${infoKey}Field`];
+      const content = item[field] || "";
+
+      // 内容为空或无字段时不显示Tooltip
+      if (!content || !field) return false;
+
+      // 获取内容区宽度（原容器宽度改为内容区宽度）
+      // 注意：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");
+        tempEl.style.cssText = `
+          visibility: hidden;
+          position: absolute;
+          white-space: nowrap;
+          font-size: 14px;
+          font-weight: 500;
+          color: #303133;
+        `;
+        tempEl.textContent = content;
+        document.body.appendChild(tempEl);
+        this.overflowCheckElements[itemKey] = tempEl;
+      }
+
+      const tempEl = this.overflowCheckElements[itemKey];
+      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);
+        });
+        this.overflowCheckElements = {};
+      }
+    },
+
+    /** 主标题占比变化时重新计算溢出（适配新prop） */
+    info1MaxPercent() {
+      this.$forceUpdate();
+    }
+  },
+  mounted() {
+    // 初始化内容区宽度（适配新结构）
+    this.$nextTick(() => {
+      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%;
+  box-sizing: border-box;
+}
+
+/* 加载容器（不变） */
+.list-loading-wrapper {
+  min-height: 100px;
+}
+
+/* 列表项：改为上下两行+右侧操作的布局 */
+.klp-list-item {
+  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;
+  box-sizing: border-box;
+  width: 100%;
+  background-color: #fafafa;
+  /* 未选中时浅背景，区分选中态 */
+}
+
+/* 列表项选中状态（不变） */
+.klp-list-item.active {
+  border-left: 3px solid #2bf;
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  /* 增加轻微阴影，突出选中项 */
+}
+
+/* 内容区：包裹两行信息位，占满剩余空间 */
+.klp-list-content {
+  flex: 1;
+  min-width: 0;
+  /* 关键：允许内容区缩小，避免溢出 */
+  display: flex;
+  flex-direction: column;
+}
+
+/* 行容器：控制单行信息位布局 */
+.klp-list-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  /* 禁止换行，溢出省略 */
+  overflow: hidden;
+  /* 隐藏超出行的内容 */
+}
+
+/* 信息位容器：单个信息的最小单元 */
+.klp-list-info-item {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  /* 禁止信息位内部换行 */
+}
+
+/* 信息位标签：次要文字，颜色偏浅 */
+.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;
+  font-weight: 500;
+}
+
+/* 右侧操作区（不变，增加顶部对齐） */
+.klp-list-actions {
+  display: flex;
+  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>
--- a/apps/l3/src/components/KLPUI/KLPTable/ColumnRender.vue
+++ b/apps/l3/src/components/KLPUI/KLPTable/ColumnRender.vue
@@ -0,0 +1,23 @@
+<script>
+  export default {
+    name: 'ColumnRender',
+    functional: true,
+    props: {
+      column: {
+        type: Object,
+        required: true
+      },
+      render: {
+        type: Function,
+        required: true
+      },
+      data: {
+        type: Object,
+        required: true
+      }
+    },
+    render(h, { props }) {
+      return props.render(h, props.data);
+    }
+  }
+</script>
--- a/apps/l3/src/components/KLPUI/KLPTable/index.vue
+++ b/apps/l3/src/components/KLPUI/KLPTable/index.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="my-table-container">
+    <!-- 扩展层：可后续统一添加（如加载动画、导出按钮等） -->
+    <div v-if="loading" class="table-loading">
+      <el-loading-spinner></el-loading-spinner>
+      <p class="loading-text">{{ loadingText || "加载中..." }}</p>
+    </div>
+
+    <!-- 原生 Table 核心：透传 props/事件/插槽 -->
+    <el-table
+      :ref="tableRef"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :class="['my-table', customClass]"
+    >
+      <!-- 1. 透传“列定义插槽”（原生 columns 中通过 slot 自定义的表头/单元格） -->
+      <template
+        v-for="(column, index) in $attrs.columns || []"
+        v-slot:[`header-${column.prop}`]="scope"
+      >
+        <!-- 调用业务层定义的表头插槽 -->
+        <slot :name="`header-${column.prop}`" v-bind="scope"></slot>
+      </template>
+      <template
+        v-for="(column, index) in $attrs.columns || []"
+        v-slot:[column.prop]="scope"
+      >
+        <!-- 调用业务层定义的单元格插槽 -->
+        <slot :name="column.prop" v-bind="scope"></slot>
+      </template>
+
+      <!-- 2. 透传原生内置插槽（如 empty 空数据插槽、append 底部插槽等） -->
+      <template v-slot:empty="scope">
+        <slot name="empty" v-bind="scope"></slot>
+      </template>
+      <template v-slot:append="scope">
+        <slot name="append" v-bind="scope"></slot>
+      </template>
+
+      <!-- 3. 透传“自定义列”插槽（业务层直接用 <el-table-column> 嵌套的情况） -->
+      <slot v-bind:tableRef="tableRef"></slot>
+
+      <el-table-column
+        v-if="selectionColumn"
+        type="selection"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-if="indexColumn"
+        type="index"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-for="(column, index) in customColumns"
+        v-bind="column"
+        :width="column.width"
+        :prop="column.prop"
+        :align="column.align"
+        :label="column.label"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :show-overflow-tooltip="column.showOverflowTooltip"
+        :sortable="column.sortable"
+      >
+          <template v-slot="scope">
+            <ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
+            <Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
+            <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
+    <slot name="pagination"></slot>
+  </div>
+</template>
+
+<script>
+import ColumnRender from './ColumnRender.vue';  
+import Eclipse from './renderer/eclipse.vue';
+
+export default {
+  name: "KLPTable", // 组件名，便于调试和文档生成 
+  components: {
+    ColumnRender,
+    Eclipse
+  },
+  props: {
+    // 1. 扩展 props：新增原生 Table 没有的属性（如加载状态）
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingText: {
+      type: String,
+      default: "加载中..."
+    },
+    // 2. 兼容原生 class 用法（原生 el-table 支持 class 属性，此处显式接收避免 $attrs 冲突）
+    customClass: {
+      type: String,
+      default: ""
+    },
+    customColumns: {
+      type: Array,
+      default: () => []
+    },
+    selectionColumn: {
+      type: Boolean,
+      default: false
+    },
+    indexColumn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      tableRef: "myTableRef" // 表格 ref，便于后续通过 ref 调用原生方法
+    };
+  },
+  methods: {
+    // 核心方法：净化scope，移除可能导致循环引用的属性
+    sanitizeScope(scope) {
+      if (!scope) return {};
+      // 只保留安全的属性（根据实际需求调整）
+      const { row, column, $index, store } = scope;
+      // 深拷贝避免引用传递，同时过滤循环引用
+      return this.deepClone({ row, column, $index, store });
+    },
+    // 安全的深拷贝方法（避免JSON.parse/stringify无法处理的类型）
+    deepClone(obj) {
+      if (obj === null || typeof obj !== "object") return obj;
+      if (obj instanceof Date) return new Date(obj);
+      if (obj instanceof RegExp) return new RegExp(obj);
+      
+      // 避免处理Vue实例（通常带有循环引用）
+      if (obj._isVue) return { _isVue: true };
+
+      const clone = Array.isArray(obj) ? [] : {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clone[key] = this.deepClone(obj[key]);
+        }
+      }
+      return clone;
+    },
+    // 3. 透传原生 Table 实例方法（如 clearSelection、doLayout 等）
+    // 业务层可通过 this.$refs.myTable.xxx() 调用原生方法
+    getTableInstance() {
+      return this.$refs[this.tableRef];
+    },
+    // 示例：透传原生 clearSelection 方法
+    clearSelection() {
+      const table = this.getTableInstance();
+      if (table && table.clearSelection) {
+        table.clearSelection();
+      }
+    },
+    // 可根据需要扩展更多原生方法（如 toggleRowSelection、sort 等）
+    toggleRowSelection(row, selected) {
+      const table = this.getTableInstance();
+      if (table && table.toggleRowSelection) {
+        table.toggleRowSelection(row, selected);
+      }
+    }
+  },
+  mounted() {
+    // 扩展点：后续可统一添加初始化逻辑（如权限控制、默认排序等）
+    console.log("MyTable 初始化完成，原生实例：", this.getTableInstance());
+  }
+};
+</script>
+
+<style scoped>
+.my-table-container {
+  width: 100%;
+  position: relative;
+}
+
+/* 扩展样式：加载状态遮罩（后续可统一调整） */
+.table-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.loading-text {
+  margin-top: 12px;
+  color: #666;
+  font-size: 14px;
+}
+
+/* 原生 Table 样式兼容：避免封装层影响原生样式 */
+.my-table {
+  width: 100%;
+}
+</style>
--- a/apps/l3/src/components/KLPUI/KLPTable/renderer/eclipse.vue
+++ b/apps/l3/src/components/KLPUI/KLPTable/renderer/eclipse.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="eclipse-container">
+    <el-tooltip :content="text" placement="top" :disabled="text.length < 10">
+      <span class="eclipse">{{ text }}</span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Eclipse',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style>
+.eclipse-container {
+  position: relative; /* 为tooltip提供定位参考 */
+  display: inline-block; /* 确保容器只占内容宽度 */
+}
+
+.eclipse {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block; /* 确保元素有明确的尺寸 */
+  max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
+}
+</style>