@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnCascader/BnCascaderPanel.vue

@@ -1,1331 +0,0 @@
-<!--
-  @Description: 级联选择面板（不含触发器），最多 6 级列展示
-  @Features:
-    - 单选 BnRadio / 多选轻量 checkbox；支持 labelInValue 返回完整对象路径
-    - 「选到最后一级」：多选勾选父级时批量选中所有叶子；单选开启后仅叶子可选
-    - 远程 tree 一次拉树 / lazy 按级懒加载（postFunc + pathUrl）
-    - 搜索：平铺展示完整路径；父级命中时展开其下所有叶子路径；子串 + 顺序模糊匹配
-    - 列虚拟滚动：单列选项数超过 virtualThreshold 时仅渲染可视区
-  @Usage:
-    本地树：v-model + :options="treeOptions"
-    远程 lazy：:post-func="post" path-url="/api" remote-mode="lazy" lazy-level-key="level"
-    远程 tree：:post-func="post" path-url="/api" remote-mode="tree"
-    多选 + 选到最后一级：multiple :check-to-last="true"
-  @modelValue 格式:
-    单选 labelInValue=false  → [1, 2, 3]
-    单选 labelInValue=true   → [{id:1, title:'...'}, ...]
-    多选 labelInValue=false  → [[1,2,3], [4,5,6]]
-    多选 labelInValue=true   → [[{id:1,...},...], [...]]
-  @Emits:
-    update:modelValue  选中值变化
-    change             选中值变化（与 update 同步触发）
-    close              单选选中有效值时触发，供 BnCascader 收起面板
-    changeCheckToLast  「选到最后一级」开关变化
-    loadOver           远程 tree 模式加载完成
-  @Slots:
-    top                工具栏右侧扩展区（搜索框之后），如多选清空按钮
-  @VERSION: 1.0
--->
-<template>
-  <div class="BnCascaderPanel" :class="{ 'BnCascaderPanel--disabled': disabled }">
-    <!-- 工具栏：选到最后一级开关 + 搜索 + top 插槽 -->
-    <div class="BnCascaderPanel-toolbar">
-      <template v-if="!hideCheckToLast">
-        <span class="BnCascaderPanel-toolbar-label">选到最后一级</span>
-        <el-switch v-model="checkToLastModel" :disabled="disabled" size="small"
-                   @change="handleCheckToLastChange"/>
-      </template>
-      <el-input
-          ref="searchInputRef"
-          v-model="searchKeyword"
-          class="BnCascaderPanel-search"
-          placeholder="搜索"
-          size="small"
-          clearable
-          :disabled="disabled"
-      />
-      <slot name="top"/>
-    </div>
-
-    <!-- 搜索模式：平铺展示完整路径；父级命中时展开其下所有叶子路径 -->
-    <div v-if="hasSearchKeyword" class="BnCascaderPanel-search-results">
-      <el-scrollbar :max-height="columnHeight">
-        <div
-            v-if="rootLoading"
-            class="BnCascaderPanel-column-status"
-        >加载中...</div>
-        <div
-            v-else-if="!searchFlatResults.length"
-            class="BnCascaderPanel-column-status"
-        >无匹配数据</div>
-        <template v-else>
-          <div
-              v-for="result in searchFlatResults"
-              :key="result.key"
-              class="BnCascaderPanel-item BnCascaderPanel-search-result-item"
-              :class="{
-                'BnCascaderPanel-item--active': isSearchResultSelected(result),
-                'BnCascaderPanel-item--disabled': disabled
-              }"
-              @click="handleSearchResultClick(result)"
-          >
-            <span
-                v-if="multiple"
-                class="BnCascaderPanel-item-check"
-                @click.stop="handleSearchResultCheckClick(result)"
-            >
-              <span
-                  class="BnCascaderPanel-check"
-                  :class="{
-                    'BnCascaderPanel-check--checked': isSearchResultSelected(result),
-                    'BnCascaderPanel-check--disabled': disabled
-                  }"
-              >
-                <span class="BnCascaderPanel-check-inner"/>
-              </span>
-            </span>
-            <span class="BnCascaderPanel-item-label" :title="result.label">{{ result.label }}</span>
-          </div>
-        </template>
-      </el-scrollbar>
-    </div>
-
-    <!-- 级联列：无搜索关键词时每列独立滚动，支持虚拟滚动 -->
-    <div v-else class="BnCascaderPanel-columns">
-      <el-scrollbar
-          v-for="(column, level) in displayColumns"
-          :key="level"
-          :max-height="columnHeight"
-          class="BnCascaderPanel-column"
-          @scroll="onColumnScroll(level, $event)"
-      >
-        <div class="BnCascaderPanel-column-inner" :style="getColumnInnerStyle(column, level)">
-          <div
-              v-for="item in getColumnVisibleItems(column, level)"
-              :key="getItemPathKey(item, level)"
-              v-memo="[isItemSelected(item, level), isItemActive(item, level), disabled, item.disabled, isItemLoading(item, level), checkToLastModel]"
-              class="BnCascaderPanel-item"
-              :class="{
-              'BnCascaderPanel-item--active': isItemActive(item, level),
-              'BnCascaderPanel-item--disabled': disabled || item.disabled
-            }"
-              @click="handleItemClick(item, level)"
-          >
-            <!-- 单选：checkToLast 开启且有子级时不展示 Radio，避免选中非叶子 -->
-            <span
-                v-if="!multiple && !(checkToLastModel && hasChildren(item, level))"
-                class="BnCascaderPanel-item-check"
-                @click.stop
-            >
-              <BnRadio
-                  v-model="val"
-                  :true-data="buildPathData(item, level)"
-                  :option-props="mergedOptionProps"
-                  :disabled="disabled || item.disabled"
-                  :is-checked="() => isItemSelected(item, level)"
-              />
-            </span>
-            <!-- 多选：轻量 checkbox，不绑定整表 v-model，避免大量选中时全量重渲染 -->
-            <span
-                v-else-if="multiple"
-                class="BnCascaderPanel-item-check"
-                @click.stop="handleCheckClick(item, level)"
-            >
-              <span
-                  class="BnCascaderPanel-check"
-                  :class="{
-                    'BnCascaderPanel-check--checked': isItemSelected(item, level),
-                    'BnCascaderPanel-check--disabled': disabled || item.disabled
-                  }"
-              >
-                <span class="BnCascaderPanel-check-inner"/>
-              </span>
-            </span>
-            <span class="BnCascaderPanel-item-label" :title="getItemLabel(item)">{{ getItemLabel(item) }}</span>
-            <!-- 有子级或加载中时展示箭头 / loading -->
-            <span
-                v-if="showExpandSuffix(item, level)"
-                class="BnCascaderPanel-item-suffix"
-                @click.stop="!isItemLoading(item, level) && handleExpand(item, level)"
-            >
-              <span v-if="isItemLoading(item, level)" class="BnCascaderPanel-item-loading"/>
-              <i v-else class="BnCascaderPanel-item-arrow bnUIcon bnUIcon-arrow"/>
-            </span>
-          </div>
-        </div>
-        <!-- 仅第一列展示空态 / 加载态 -->
-        <div v-if="level === 0 && (rootLoading || !filterColumnItems(column, level).length)" class="BnCascaderPanel-column-status">
-          {{ rootLoading ? '加载中...' : (hasSearchKeyword ? '无匹配数据' : '暂无数据') }}
-        </div>
-      </el-scrollbar>
-    </div>
-  </div>
-</template>
-
-<script>
-/**
- * 级联选择面板逻辑层
- * 调用层级：template 交互入口 → 至多一层业务方法 → 底层工具
- */
-import { cloneDeep, debounce, isEmpty, omit } from 'lodash';
-import { markRaw } from 'vue';
-import { joinPathLabels } from './cascaderDisplay.js';
-
-/** 最大级联层级 */
-const MAX_LEVEL = 6;
-/** 虚拟滚动单行高度（px），与样式 .BnCascaderPanel-item min-height 一致 */
-const ITEM_HEIGHT = 34;
-/** 虚拟滚动上下缓冲行数，减少快速滚动时的空白闪烁 */
-const VIRTUAL_BUFFER = 3;
-/** 选中路径 Set 键分隔符（控制字符，正常 id 不会包含） */
-const PATH_KEY_SEP = '\x1f';
-/** optionProps 默认字段映射 */
-const DEFAULT_OPTION_PROPS = { value: 'id', label: 'title', children: 'children' };
-
-export default {
-  name: 'BnCascaderPanel',
-
-  props: {
-    /** 绑定值，格式见文件头 @modelValue 说明 */
-    modelValue: {},
-    /** 本地级联选项树，默认 [{ id, title, children }] */
-    options: { type: Array, default: () => [] },
-    /** 是否多选 */
-    multiple: Boolean,
-    /** 选项字段映射，如 { value: 'id', label: 'title', children: 'children' } */
-    optionProps: { default: () => ({}) },
-    /** labelInValue 为 true 时，返回对象保留的字段列表 */
-    valueProps: { type: Array },
-    /** true 返回完整对象路径，false 返回 id 路径 */
-    labelInValue: { type: Boolean, default: true },
-    /** 是否禁用 */
-    disabled: { type: Boolean, default: false },
-    /** 「选到最后一级」：多选勾选父级选中所有叶子；单选开启后仅叶子可选 */
-    checkToLast: {default: false },
-    /** 是否隐藏面板内「选到最后一级」开关 */
-    hideCheckToLast: { type: Boolean, default: false },
-    /** 远程请求方法，签名 (url, data) => Promise */
-    postFunc: Function,
-    /** 远程请求附加参数 */
-    postData: { type: Object, default: () => ({}) },
-    /** 远程接口路径 */
-    pathUrl: { type: String, default: '' },
-    /** 远程模式：tree 一次拉树 / lazy 按级懒加载 */
-    remoteMode: { type: String, default: 'tree' },
-    /** lazy 模式请求体中的层级字段名 */
-    lazyLevelKey: { type: String, default: 'level' },
-    /** lazy 模式起始层级（默认 1，展开第一层后请求下一级为 2） */
-    lazyLevelStart: { type: Number, default: 1 },
-    /** lazy 模式叶子节点标识字段 */
-    leafKey: { type: String, default: 'leaf' },
-    /** 远程 tree 模式是否在 mounted 时自动初始化 */
-    isInitOptions: { type: Boolean, default: true },
-    /** 单列超过该数量启用虚拟滚动；0 禁用 */
-    virtualThreshold: { type: Number, default: 40 },
-    /** 面板每列最大高度（px） */
-    columnHeight: { type: Number, default: 300 }
-  },
-
-  emits: [
-    'update:modelValue',
-    'change',
-    'close',
-    'changeCheckToLast',
-    'loadOver' // 远程 tree 模式加载完成
-  ],
-
-  data() {
-    return {
-      /** 当前展开路径（value 数组），决定展示到第几列 */
-      expandPath: [],
-      /** 远程 tree 模式拉取的完整树 */
-      remoteOptions: [],
-      /** lazy 模式子级缓存：cacheKey → children[] */
-      lazyChildrenMap: {},
-      /** lazy 模式已加载标记：cacheKey → true */
-      lazyLoadedKeys: {},
-      /** 节点加载中标记：loadingKey → true */
-      loadingKeys: {},
-      /** 远程 tree 模式根级加载中 */
-      treeLoading: false,
-      /** 各列滚动位置，供虚拟滚动计算可视区 */
-      columnScrollTops: {},
-      /** 搜索关键词 */
-      searchKeyword: '',
-      /** 「选到最后一级」开关本地状态（与 checkToLast prop 同步） */
-      checkToLastModel:this.checkToLast || false
-    };
-  },
-
-  created() {
-    /** 搜索输入防抖，避免频繁遍历选项树 */
-    this.debouncedHandleSearchKeywordChange = debounce(this.handleSearchKeywordChange, 200);
-  },
-
-  watch: {
-    /** 单选时根据 modelValue 同步展开路径 */
-    modelValue: { handler: 'syncExpandPath', immediate: true },
-    options: 'syncExpandPath',
-    /** 远程配置变化时重新初始化 */
-    pathUrl: 'initRemote',
-    postFunc: 'initRemote',
-    remoteMode: 'initRemote',
-    postData:  { handler: 'initRemote', deep: true },
-    searchKeyword() { this.debouncedHandleSearchKeywordChange(); }
-  },
-
-  mounted() {
-    if (this.isInitOptions) {
-      this.initRemote();
-    }
-  },
-
-  computed: {
-    /** 是否为远程 lazy 按级加载模式 */
-    isLazyMode() {
-      return this.isRemoteLazy;
-    },
-    /** 是否配置了远程请求（pathUrl + postFunc） */
-    isRemote() {
-      return Boolean(this.pathUrl && this.postFunc);
-    },
-    /** 远程 tree：一次请求返回完整树 */
-    isRemoteTree() {
-      return this.isRemote && this.remoteMode === 'tree';
-    },
-    /** 远程 lazy：按级请求子节点 */
-    isRemoteLazy() {
-      return this.isRemote && this.remoteMode === 'lazy';
-    },
-    /** 第一列数据源：本地 options / 远程 tree / lazy 根级 */
-    rootOptions() {
-      if (this.isRemoteTree) {
-        return this.remoteOptions.length ? this.remoteOptions : this.options;
-      }
-      if (this.isRemoteLazy) {
-        return this.lazyChildrenMap.root ?? this.options;
-      }
-      return this.options || [];
-    },
-    /** 合并后的选项字段映射 */
-    mergedOptionProps() {
-      return { ...DEFAULT_OPTION_PROPS, ...this.optionProps };
-    },
-    /**
-     * v-model 代理：统一单选/多选、labelInValue 的空值形态
-     * 单选写入时同步 expandPath
-     */
-    val: {
-      get() {
-        if (this.multiple) {
-          return Array.isArray(this.modelValue) ? this.modelValue : [];
-        }
-        if (this.labelInValue && isEmpty(this.modelValue)) {
-          return null;
-        }
-        return this.modelValue;
-      },
-      set(v) {
-        let next = v;
-        if (!this.multiple) {
-          if (isEmpty(v)) {
-            next = this.labelInValue ? null : [];
-            this.expandPath = [];
-          } else {
-            this.expandPath = this.normalizePath(v);
-          }
-        }
-        this.emitValue(next);
-      }
-    },
-    /**
-     * 根据 expandPath 推导各列数据
-     * lazy 模式下子级未加载完成时不追加空列
-     */
-    displayColumns() {
-      const columns = [this.rootOptions];
-      let currentOptions = this.rootOptions;
-
-      for (let level = 0; level < this.expandPath.length && level < MAX_LEVEL - 1; level++) {
-        const activeItem = currentOptions.find(item => this.getItemValue(item) === this.expandPath[level]);
-        if (!activeItem || !this.hasChildren(activeItem, level)) {
-          break;
-        }
-        const children = this.getChildren(activeItem);
-        if (!children.length && this.isLazyMode && !this.isLazyLoaded(activeItem, level)) {
-          break;
-        }
-        columns.push(children);
-        currentOptions = children;
-      }
-
-      return columns.slice(0, MAX_LEVEL);
-    },
-    /** 第一列是否处于加载中（tree 根级 / lazy 根级） */
-    rootLoading() {
-      return this.treeLoading || Boolean(this.loadingKeys.root);
-    },
-    /** 是否有有效搜索关键词 */
-    hasSearchKeyword() {
-      return Boolean(this.searchKeyword.trim());
-    },
-    /**
-     * 搜索平铺结果：父级命中 → 其下所有叶子路径；否则仅展示命中的叶子/中间路径
-     */
-    searchFlatResults() {
-      if (!this.hasSearchKeyword || this.rootLoading) {
-        return [];
-      }
-      return this.buildSearchFlatResults(this.rootOptions);
-    },
-    /** 多选已选路径键集合，O(1) 判断选中态 */
-    selectedPathKeySet() {
-      if (!this.multiple || !Array.isArray(this.modelValue) || !this.modelValue.length) {
-        return new Set();
-      }
-      const set = new Set();
-      this.modelValue.forEach(path => {
-        const key = this.getPathKey(path);
-        if (key) {
-          set.add(key);
-        }
-      });
-      return set;
-    }
-  },
-
-  methods: {
-    // --- 虚拟滚动：padding 占位 + slice 可视区，避免大列表全量渲染 ---
-
-    /** 当前列是否启用虚拟滚动 */
-    shouldVirtualize(column) {
-      return this.virtualThreshold > 0 && column.length >= this.virtualThreshold;
-    },
-
-    /** 根据滚动位置计算当前列应渲染的 [start, end) 区间 */
-    getVirtualRange(column, level) {
-      const scrollTop = this.columnScrollTops[level] || 0;
-      const start = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - VIRTUAL_BUFFER);
-      const end = Math.min(column.length, Math.ceil((scrollTop + this.columnHeight) / ITEM_HEIGHT) + VIRTUAL_BUFFER);
-      return { start, end };
-    },
-
-    /**
-     * 按搜索关键词过滤当前列（禁用项不参与匹配展示）
-     * 仅第一列做关键词过滤；已展开子级列展示全部子项，避免点击非叶子匹配项后子级被滤空
-     */
-    filterColumnItems(column, level = 0) {
-      const keyword = this.searchKeyword.trim();
-      if (!keyword || !Array.isArray(column)) {
-        return column || [];
-      }
-      if (level > 0) {
-        return column.filter(item => !item.disabled);
-      }
-      return column.filter(item => !item.disabled && this.hasSearchMatch(item));
-    },
-
-    /** 当前列实际渲染的选项（过滤 + 虚拟滚动切片） */
-    getColumnVisibleItems(column, level) {
-      const filtered = this.filterColumnItems(column, level);
-      if (!this.shouldVirtualize(filtered)) {
-        return filtered;
-      }
-      const { start, end } = this.getVirtualRange(filtered, level);
-      return filtered.slice(start, end);
-    },
-
-    /** 虚拟滚动占位样式：用 padding 模拟未渲染行的总高度 */
-    getColumnInnerStyle(column, level) {
-      const filtered = this.filterColumnItems(column, level);
-      if (!this.shouldVirtualize(filtered)) {
-        return null;
-      }
-      const { start, end } = this.getVirtualRange(filtered, level);
-      return {
-        paddingTop: `${start * ITEM_HEIGHT}px`,
-        paddingBottom: `${(filtered.length - end) * ITEM_HEIGHT}px`
-      };
-    },
-
-    /** 记录列滚动位置，触发虚拟滚动重算 */
-    onColumnScroll(level, payload) {
-      const scrollTop = typeof payload === 'number' ? payload : payload?.scrollTop;
-      if (this.columnScrollTops[level] !== scrollTop) {
-        this.columnScrollTops = { ...this.columnScrollTops, [level]: scrollTop };
-      }
-    },
-
-    // --- 字段读取：统一通过 optionProps 取值 ---
-
-    /** 读取选项 value 字段 */
-    getItemValue(item) {
-      return item?.[this.mergedOptionProps.value];
-    },
-
-    /** 读取选项 label 字段 */
-    getItemLabel(item) {
-      return item?.[this.mergedOptionProps.label];
-    },
-
-    /**
-     * 获取节点子级：优先 lazy 缓存，其次节点 children 字段
-     * @param {Object|null} item 父节点，null 表示根级
-     */
-    getChildren(item) {
-      if (!item) {
-        return [];
-      }
-      const cacheKey = String(this.getItemValue(item));
-      return this.lazyChildrenMap[cacheKey] || item?.[this.mergedOptionProps.children] || [];
-    },
-
-    /** 按 valueProps 裁剪节点字段，或剔除 children 后返回 */
-    getValObj(node) {
-      if (this.valueProps?.length) {
-        const obj = {};
-        this.valueProps.forEach(key => { obj[key] = node[key]; });
-        return obj;
-      }
-      return omit(node, [this.mergedOptionProps.children]);
-    },
-
-    // --- 路径：value 路径 ↔ 节点路径 ↔ modelValue 格式转换 ---
-
-    /** 构建从根到当前项的 value 路径 */
-    buildPathValues(item, level) {
-      const prefix = level > 0 ? this.expandPath.slice(0, level) : [];
-      return [...prefix, this.getItemValue(item)];
-    },
-
-    /** 按 value 路径在已加载树中查找对应节点序列 */
-    buildPathNodes(pathValues) {
-      const nodes = [];
-      let currentOptions = this.rootOptions;
-      pathValues.forEach(value => {
-        const node = currentOptions.find(item => this.getItemValue(item) === value);
-        if (!node) {
-          return;
-        }
-        nodes.push(node);
-        currentOptions = this.getChildren(node);
-      });
-      return nodes;
-    },
-
-    /** 构建当前项对应的 modelValue 片段（单条路径） */
-    buildPathData(item, level) {
-      return this.pathValuesToModel(this.buildPathValues(item, level));
-    },
-
-    /** 将 modelValue 路径统一为 value 数组（labelInValue 时提取 value 字段） */
-    normalizePath(path) {
-      if (!Array.isArray(path) || !path.length) {
-        return [];
-      }
-      if (this.labelInValue) {
-        return path.map(item => (item && typeof item === 'object')
-            ? item[this.mergedOptionProps.value]
-            : item);
-      }
-      return [...path];
-    },
-
-    /** 路径唯一键，供 Set 索引 */
-    getPathKey(path) {
-      const values = this.normalizePath(path);
-      return values.length ? values.join(PATH_KEY_SEP) : '';
-    },
-
-    /** 当前节点路径唯一键 */
-    getItemPathKey(item, level) {
-      return this.buildPathValues(item, level).join(PATH_KEY_SEP);
-    },
-
-    /** 判断两条路径是否完全一致 */
-    isSamePath(pathA, pathB) {
-      const a = this.normalizePath(pathA);
-      const b = this.normalizePath(pathB);
-      return a.length === b.length && a.every((value, index) => value === b[index]);
-    },
-
-    /** 判断 path 是否以 prefixPathValues 为前缀（多选取消父级勾选时用） */
-    isPathUnderPrefix(path, prefixPathValues) {
-      const pathValues = this.normalizePath(path);
-      const prefix = this.normalizePath(prefixPathValues);
-      return prefix.length > 0
-          && pathValues.length >= prefix.length
-          && prefix.every((value, index) => pathValues[index] === value);
-    },
-
-    // --- 节点状态：叶子判断、展开箭头、选中态 ---
-
-    /** lazy 子级缓存 key；根级为 'root' */
-    getLazyCacheKey(item, level) {
-      return (level < 0 || !item) ? 'root' : String(this.getItemValue(item));
-    },
-
-    /** 节点加载中状态 key，用完整路径拼接避免冲突 */
-    getItemLoadingKey(item, level) {
-      return item ? this.buildPathValues(item, level).join('_') : 'root';
-    },
-
-    /** lazy 模式下该节点子级是否已请求完成 */
-    isLazyLoaded(item, level = 0) {
-      return Boolean(this.lazyLoadedKeys[this.getLazyCacheKey(item, level)]);
-    },
-
-    /** 节点是否正在请求子级 */
-    isItemLoading(item, level) {
-      return Boolean(this.loadingKeys[this.getItemLoadingKey(item, level)]);
-    },
-
-    /**
-     * 是否为叶子节点
-     * lazy 未加载完成时默认非叶子（保留展开箭头以触发加载）
-     */
-    isItemLeaf(item, level = 0) {
-      if (item[this.leafKey] === true || item.isLeaf === true) {
-        return true;
-      }
-      if (item[this.leafKey] === false || item.hasChildren === true) {
-        return false;
-      }
-      if (this.isLazyMode) {
-        if (this.isLazyLoaded(item, level)) {
-          return !this.getChildren(item).length;
-        }
-        return false;
-      }
-      return !this.getChildren(item).length;
-    },
-
-    /** 是否有子级可展开（含 lazy 未加载的占位展开） */
-    hasChildren(item, level = 0) {
-      if (this.isItemLeaf(item, level)) {
-        return false;
-      }
-      if (this.getChildren(item).length) {
-        return true;
-      }
-      return this.isLazyMode && !this.isLazyLoaded(item, level);
-    },
-
-    /** 是否展示右侧展开箭头或 loading */
-    showExpandSuffix(item, level) {
-      return this.isItemLoading(item, level) || this.hasChildren(item, level);
-    },
-
-    /** 当前项是否为该列高亮项（expandPath 对应位匹配） */
-    isItemActive(item, level) {
-      return this.expandPath[level] === this.getItemValue(item);
-    },
-
-    /** value 路径转为 modelValue 格式（labelInValue 时映射为对象数组） */
-    pathValuesToModel(pathValues) {
-      return this.labelInValue
-          ? this.buildPathNodes(pathValues).map(node => this.getValObj(node))
-          : pathValues;
-    },
-
-    /**
-     * 「选到最后一级」多选时，收集某节点下所有叶子路径
-     * @returns {Array} modelValue 格式的路径数组
-     */
-    getAllLeafPathsForItem(item, level) {
-      const basePathValues = this.buildPathValues(item, level);
-      const pathNodes = this.buildPathNodes(basePathValues);
-      if (!pathNodes.length || item.disabled) {
-        return [];
-      }
-
-      const targetNode = pathNodes[pathNodes.length - 1];
-      if (!this.hasChildren(targetNode, level)) {
-        return [this.pathValuesToModel(basePathValues)];
-      }
-
-      const leafPathValuesList = [];
-      const walk = (node, pathValues, depth) => {
-        if (depth >= MAX_LEVEL) {
-          leafPathValuesList.push([...pathValues]);
-          return;
-        }
-        const children = this.getChildren(node).filter(child => !child.disabled);
-        if (!children.length) {
-          leafPathValuesList.push([...pathValues]);
-          return;
-        }
-        children.forEach(child => {
-          walk(child, [...pathValues, this.getItemValue(child)], depth + 1);
-        });
-      };
-
-      this.getChildren(targetNode)
-          .filter(child => !child.disabled)
-          .forEach(child => walk(child, [...basePathValues, this.getItemValue(child)], level + 1));
-
-      return leafPathValuesList.map(pv => this.pathValuesToModel(pv));
-    },
-
-    /**
-     * 判断节点是否选中
-     * 多选 + checkToLast：父级需其下所有叶子均已选中才算选中
-     */
-    isItemSelected(item, level) {
-      if (isEmpty(this.val)) {
-        return false;
-      }
-      if (!this.multiple) {
-        return this.isSamePath(this.val, this.buildPathData(item, level));
-      }
-      const selectedKeys = this.selectedPathKeySet;
-      if (this.checkToLastModel && this.hasChildren(item, level)) {
-        const leafPaths = this.getAllLeafPathsForItem(item, level);
-        return leafPaths.length > 0
-            && leafPaths.every(path => selectedKeys.has(this.getPathKey(path)));
-      }
-      return selectedKeys.has(this.getItemPathKey(item, level));
-    },
-
-    /** 单选 checkToLast 开启时，有子级的节点不可直接选中 */
-    isItemSelectable(item, level) {
-      return !item.disabled
-          && (this.multiple || !this.checkToLastModel || !this.hasChildren(item, level));
-    },
-
-    // --- 搜索：平铺路径列表，父级命中时展开所有叶子 ---
-
-    /**
-     * 文本匹配：先子串包含，再按字符顺序模糊匹配（如 "fd" 匹配 "Feedback"）
-     */
-    matchSearchText(label, keyword) {
-      const text = String(label ?? '').toLowerCase();
-      const query = String(keyword ?? '').trim().toLowerCase();
-      if (!query) {
-        return true;
-      }
-      if (text.includes(query)) {
-        return true;
-      }
-      let queryIndex = 0;
-      for (let i = 0; i < text.length && queryIndex < query.length; i++) {
-        if (text[i] === query[queryIndex]) {
-          queryIndex += 1;
-        }
-      }
-      return queryIndex === query.length;
-    },
-
-    /** 节点自身或任一后代是否匹配搜索词（列模式筛选用） */
-    hasSearchMatch(node) {
-      if (this.matchSearchText(this.getItemLabel(node), this.searchKeyword)) {
-        return true;
-      }
-      return this.getChildren(node).some(child => this.hasSearchMatch(child));
-    },
-
-    /**
-     * 收集某节点下所有叶子 value 路径
-     * lazy 未加载子级时，将当前节点视为可选终点
-     */
-    collectLeafPathValuesList(node, pathValues, level) {
-      if (!node || node.disabled) {
-        return [];
-      }
-      if (!this.hasChildren(node, level)) {
-        return [[...pathValues]];
-      }
-      const children = this.getChildren(node).filter(child => !child.disabled);
-      if (!children.length) {
-        return [[...pathValues]];
-      }
-      const results = [];
-      children.forEach(child => {
-        results.push(
-            ...this.collectLeafPathValuesList(
-                child,
-                [...pathValues, this.getItemValue(child)],
-                level + 1
-            )
-        );
-      });
-      return results;
-    },
-
-    /**
-     * 构建搜索平铺结果
-     * 父级命中 → 其下所有叶子路径；未命中则继续向下查找
-     */
-    buildSearchFlatResults(nodes, parentPathValues = []) {
-      const keyword = this.searchKeyword.trim();
-      if (!keyword || !Array.isArray(nodes)) {
-        return [];
-      }
-
-      const results = [];
-      const seenKeys = new Set();
-      const appendPath = (pathValues) => {
-        const pathData = this.pathValuesToModel(pathValues);
-        const key = this.getPathKey(pathData);
-        if (!key || seenKeys.has(key)) {
-          return;
-        }
-        seenKeys.add(key);
-        results.push({
-          key,
-          pathValues,
-          pathData,
-          label: joinPathLabels(this.getPathDisplayLabels(pathValues))
-        });
-      };
-
-      nodes.forEach(node => {
-        if (node.disabled) {
-          return;
-        }
-        const pathValues = [...parentPathValues, this.getItemValue(node)];
-        const level = pathValues.length - 1;
-        const selfMatch = this.matchSearchText(this.getItemLabel(node), keyword);
-
-        if (selfMatch) {
-          this.collectLeafPathValuesList(node, pathValues, level).forEach(appendPath);
-          return;
-        }
-
-        const children = this.getChildren(node);
-        if (children.length) {
-          results.push(...this.buildSearchFlatResults(children, pathValues));
-        }
-      });
-
-      return results;
-    },
-
-    /** 搜索平铺项是否选中 */
-    isSearchResultSelected(result) {
-      if (isEmpty(this.val)) {
-        return false;
-      }
-      if (this.multiple) {
-        return this.selectedPathKeySet.has(result.key);
-      }
-      return this.isSamePath(this.val, result.pathData);
-    },
-
-    /** 点击搜索平铺项：单选直接选中，多选由 checkbox 处理 */
-    handleSearchResultClick(result) {
-      if (this.disabled) {
-        return;
-      }
-      if (this.multiple) {
-        return;
-      }
-      this.val = result.pathData;
-    },
-
-    /** 多选：点击搜索平铺项 checkbox 切换选中 */
-    handleSearchResultCheckClick(result) {
-      if (this.disabled) {
-        return;
-      }
-      this.toggleMultiplePath(result.pathData);
-    },
-
-    /** 多选切换单条路径选中态 */
-    toggleMultiplePath(pathData) {
-      const values = Array.isArray(this.val) ? [...this.val] : [];
-      const key = this.getPathKey(pathData);
-      const exists = values.some(value => this.getPathKey(value) === key);
-      this.val = exists
-          ? values.filter(value => this.getPathKey(value) !== key)
-          : [...values, pathData];
-    },
-
-    /** 搜索词变化：平铺模式下无需维护 expandPath */
-    handleSearchKeywordChange() {
-      const keyword = this.searchKeyword.trim();
-      if (!keyword) {
-        if (!this.multiple) {
-          this.syncExpandPath();
-        }
-        return;
-      }
-      this.expandPath = [];
-      this.columnScrollTops = {};
-    },
-
-    /** 供外部调用：聚焦搜索框 */
-    focusSearchInput() {
-      this.$nextTick(() => { this.$refs.searchInputRef?.focus?.(); });
-    },
-
-    /** 供外部调用：清空搜索 */
-    clearSearch() {
-      this.searchKeyword = '';
-    },
-
-    /** 单选时根据 modelValue 还原 expandPath */
-    syncExpandPath() {
-      if (this.multiple) {
-        return;
-      }
-      this.expandPath = isEmpty(this.modelValue) ? [] : [...this.normalizePath(this.modelValue)];
-    },
-
-    // --- 数据加载：远程 tree / lazy、选项规范化与缓存 ---
-
-    /** 规范化接口返回项，兼容 id → value 字段 */
-    normalizeOptions(list) {
-      const valueKey = this.mergedOptionProps.value;
-      return (list || []).map(item => {
-        const opt = { ...item };
-        if (!opt[valueKey] && item.id) {
-          opt[valueKey] = item.id;
-        }
-        return opt;
-      });
-    },
-
-    /** 写入 lazy 子级缓存（markRaw 避免 Vue 深度响应式化大数组） */
-    cacheLazyChildren(item, cacheKey, list) {
-      const cachedList = markRaw(list || []);
-      this.lazyChildrenMap = { ...this.lazyChildrenMap, [cacheKey]: cachedList };
-      this.lazyLoadedKeys = { ...this.lazyLoadedKeys, [cacheKey]: true };
-      if (item) {
-        item[this.mergedOptionProps.children] = cachedList;
-      }
-    },
-
-    /** 重置 lazy 缓存与列滚动状态 */
-    resetLazyState() {
-      this.lazyChildrenMap = {};
-      this.lazyLoadedKeys = {};
-      this.columnScrollTops = {};
-    },
-
-    /** 根据 remoteMode 初始化远程数据（tree 拉整树 / lazy 拉根级） */
-    initRemote() {
-      if (!this.pathUrl || !this.postFunc) {
-        return;
-      }
-      if (this.isRemoteTree) {
-        this.remoteOptions = [];
-        this.loadTreeOptions();
-        return;
-      }
-      if (this.isRemoteLazy) {
-        this.resetLazyState();
-        this.loadLazyChildren(null, -1);
-      }
-    },
-
-    /** 远程 tree 模式：一次请求完整树 */
-    loadTreeOptions() {
-      this.treeLoading = true;
-      this.postFunc(this.pathUrl, cloneDeep(this.postData)).then(res => {
-        this.treeLoading = false;
-        if (!res.code && res.data) {
-          const data = res.data;
-          this.remoteOptions = Array.isArray(data)
-              ? this.normalizeOptions(data)
-              : this.normalizeOptions(data?.results || []);
-        } else {
-          this.remoteOptions = [];
-        }
-        this.$emit('loadOver')
-      }).catch(() => {
-        this.treeLoading = false;
-        this.remoteOptions = [];
-      });
-    },
-
-    /**
-     * 远程 lazy 模式：按级加载子节点
-     * @param {Object|null} item 父节点，null 且 level=-1 表示加载根级
-     * @param {number} level 父节点所在列层级
-     */
-    loadLazyChildren(item, level) {
-      const cacheKey = this.getLazyCacheKey(item, level);
-      if (this.lazyLoadedKeys[cacheKey]) {
-        return Promise.resolve(this.lazyChildrenMap[cacheKey] || []);
-      }
-
-      const loadingKey = this.getItemLoadingKey(item, level);
-      this.loadingKeys = { ...this.loadingKeys, [loadingKey]: true };
-
-      const finish = (rawList) => {
-        this.loadingKeys = { ...this.loadingKeys, [loadingKey]: false };
-        const list = this.normalizeOptions(rawList);
-        this.cacheLazyChildren(item, cacheKey, list);
-        return list;
-      };
-
-      if (!this.postFunc || !this.pathUrl) {
-        this.loadingKeys = { ...this.loadingKeys, [loadingKey]: false };
-        return Promise.resolve([]);
-      }
-
-      const requestPostData = (() => {
-        const requestLevel = this.lazyLevelStart + level + 1;
-        const extra = cloneDeep(this.postData);
-        if (!item) {
-          return { ...extra, [this.lazyLevelKey]: requestLevel };
-        }
-        return { ...omit(item, [this.mergedOptionProps.children]), ...extra, [this.lazyLevelKey]: requestLevel };
-      })();
-
-      return this.postFunc(this.pathUrl, requestPostData).then(res => {
-        this.loadingKeys = { ...this.loadingKeys, [loadingKey]: false };
-        const list = (!res.code && res.data)
-            ? this.normalizeOptions(Array.isArray(res.data) ? res.data : (res.data?.results || []))
-            : [];
-        this.cacheLazyChildren(item, cacheKey, list);
-        return list;
-      }).catch(() => {
-        this.loadingKeys = { ...this.loadingKeys, [loadingKey]: false };
-        this.cacheLazyChildren(item, cacheKey, []);
-        return [];
-      });
-    },
-
-    // --- 交互入口：点击行 / 展开箭头 / 多选勾选 ---
-
-    /** 点击展开箭头：更新 expandPath 并在 lazy 模式下触发子级加载 */
-    handleExpand(item, level) {
-      if (this.disabled || item.disabled || !this.showExpandSuffix(item, level)) {
-        return;
-      }
-      this.expandPath = this.buildPathValues(item, level);
-      this.columnScrollTops = { ...this.columnScrollTops, [level + 1]: 0 };
-      if (this.isLazyMode && !this.isItemLeaf(item) && !this.isLazyLoaded(item, level)) {
-        this.loadLazyChildren(item, level);
-      }
-    },
-
-    /**
-     * 点击行：多选仅展开；单选有子级则展开，叶子则选中
-     */
-    handleItemClick(item, level) {
-      if (this.disabled || item.disabled) {
-        return;
-      }
-      if (this.multiple) {
-        if (this.showExpandSuffix(item, level)) {
-          this.handleExpand(item, level);
-        }
-        return;
-      }
-      if (this.hasChildren(item, level)) {
-        this.handleExpand(item, level);
-        return;
-      }
-      if (!this.isItemSelectable(item, level)) {
-        return;
-      }
-      this.expandPath = this.buildPathValues(item, level);
-      this.val = this.buildPathData(item, level);
-    },
-
-    /** 多选勾选框点击（阻止冒泡，避免触发行点击展开） */
-    handleCheckClick(item, level) {
-      if (this.disabled || item.disabled || !this.isItemSelectable(item, level)) {
-        return;
-      }
-      this.handleSelectMultiple(item, level);
-    },
-
-    /** 多选切换：支持 checkToLast 批量选中/取消叶子路径 */
-    handleSelectMultiple(item, level) {
-      const useLeafPaths = this.checkToLastModel && this.hasChildren(item, level);
-      const targetPaths = useLeafPaths
-          ? this.getAllLeafPathsForItem(item, level)
-          : [this.buildPathData(item, level)];
-      const values = Array.isArray(this.val) ? [...this.val] : [];
-      const selectedKeys = new Set(values.map(value => this.getPathKey(value)));
-      const allSelected = targetPaths.length > 0
-          && targetPaths.every(path => selectedKeys.has(this.getPathKey(path)));
-
-      if (allSelected) {
-        const parentPathValues = this.buildPathValues(item, level);
-        this.val = values.filter(value => !this.isPathUnderPrefix(value, parentPathValues));
-        return;
-      }
-
-      targetPaths.forEach(path => {
-        const key = this.getPathKey(path);
-        if (!selectedKeys.has(key)) {
-          selectedKeys.add(key);
-          values.push(path);
-        }
-      });
-      this.val = values;
-    },
-
-    /** 「选到最后一级」开关切换时清空选中值 */
-    handleCheckToLastChange(value) {
-      this.val = [];
-      this.$emit('changeCheckToLast', value);
-    },
-
-    /** 向外同步 v-model；单选选中有效值时触发 close 收起面板 */
-    emitValue(value) {
-      if (!this.multiple && !isEmpty(value)) {
-        this.$emit('close');
-      }
-      this.$emit('update:modelValue', value);
-      this.$emit('change', value);
-    },
-
-    /** labelInValue=false 时，按 value 路径从已加载选项树解析各级展示文案 */
-    getPathDisplayLabels(pathValues) {
-      if (!Array.isArray(pathValues) || !pathValues.length) {
-        return [];
-      }
-
-      const labels = [];
-      let currentOptions = this.rootOptions || [];
-
-      for (const value of pathValues) {
-        const node = currentOptions.find(item => this.getItemValue(item) === value);
-        if (!node) {
-          labels.push(String(value ?? ''));
-          break;
-        }
-        const label = this.getItemLabel(node);
-        labels.push(label != null && label !== '' ? label : String(value ?? ''));
-        currentOptions = this.getChildren(node);
-      }
-
-      return labels;
-    },
-
-    /** 将路径格式化为展示文本，供 BnCascader 触发器使用 */
-    getPathDisplayText(path, { separator = ' / ', showAllLevels = true } = {}) {
-      const pathValues = this.normalizePath(path);
-      return joinPathLabels(this.getPathDisplayLabels(pathValues), { separator, showAllLevels });
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-@import '../font/iconfont.css';
-
-.BnCascaderPanel {
-  display: inline-flex;
-  flex-direction: column;
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  overflow: hidden;
-
-  &--disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-}
-
-.BnCascaderPanel-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #e4e7ed;
-  background: #fafafa;
-
-  > :last-child:not(.BnCascaderPanel-search) {
-    margin-left: auto;
-  }
-}
-
-.BnCascaderPanel-toolbar-label {
-  font-size: 13px;
-  color: #606266;
-}
-
-.BnCascaderPanel-search {
-  flex: 1;
-  min-width: 120px;
-  max-width: 220px;
-
-  :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 1px #dcdfe6 inset;
-  }
-}
-
-.BnCascaderPanel-search-results {
-  min-width: 220px;
-  max-width: 400px;
-  width: 100%;
-}
-
-.BnCascaderPanel-search-result-item {
-  padding-right: 16px;
-}
-
-.BnCascaderPanel-columns {
-  display: inline-flex;
-}
-
-.BnCascaderPanel-column {
-  width: 220px;
-  flex-shrink: 0;
-  border-right: 1px solid #e4e7ed;
-
-  &:last-child {
-    border-right: none;
-  }
-}
-
-.BnCascaderPanel-column-inner {
-  overflow: hidden;
-}
-
-.BnCascaderPanel-item {
-  display: flex;
-  align-items: center;
-  min-height: 34px;
-  padding: 0 12px 0 8px;
-  cursor: pointer;
-  overflow: hidden;
-
-  &:hover {
-    background: #f5f7fa;
-  }
-
-  &--active {
-    background: #ecf5ff;
-
-    .BnCascaderPanel-item-label,
-    .BnCascaderPanel-item-arrow {
-      color: #409eff;
-    }
-
-    .BnCascaderPanel-item-label {
-      font-weight: 500;
-    }
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-}
-
-.BnCascaderPanel-item-check {
-  flex-shrink: 0;
-}
-
-.BnCascaderPanel-check {
-  box-sizing: content-box !important;
-  position: relative;
-  display: block;
-  width: 14px;
-  height: 14px;
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  transition: border-color 0.3s, background-color 0.3s;
-}
-
-.BnCascaderPanel-check-inner {
-  position: relative;
-  display: block;
-  width: 14px;
-  height: 14px;
-  background-color: #fff;
-  border-radius: 2px;
-  transition: background-color 0.3s;
-}
-
-.BnCascaderPanel-check-inner::after {
-  position: absolute;
-  top: 50%;
-  left: calc(50% - 3px);
-  width: 5px;
-  height: 8px;
-  border: 2px solid #fff;
-  border-top: 0;
-  border-left: 0;
-  transform: rotate(45deg) scale(0) translate(-50%, -50%);
-  opacity: 0;
-  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
-  content: "";
-}
-
-.BnCascaderPanel-check--checked {
-  border-color: #1890ff;
-  background-color: #1890ff;
-}
-
-.BnCascaderPanel-check--checked .BnCascaderPanel-check-inner {
-  background-color: #1890ff;
-}
-
-.BnCascaderPanel-check--checked .BnCascaderPanel-check-inner::after {
-  transform: rotate(45deg) scale(1) translate(-50%, -50%);
-  opacity: 1;
-  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-}
-
-.BnCascaderPanel-check--disabled {
-  cursor: not-allowed;
-  background-color: #f0f0f0 !important;
-  border-color: #ccc !important;
-}
-
-.BnCascaderPanel-check--disabled .BnCascaderPanel-check-inner {
-  background-color: #f0f0f0 !important;
-}
-
-.BnCascaderPanel-check--disabled.BnCascaderPanel-check--checked .BnCascaderPanel-check-inner::after {
-  border-color: #ccc !important;
-}
-
-.BnCascaderPanel-item-label {
-  flex: 1;
-  min-width: 0;
-  padding: 0 8px;
-  font-size: 14px;
-  color: #606266;
-  line-height: 34px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.BnCascaderPanel-item-suffix {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  margin-left: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.BnCascaderPanel-item-loading {
-  width: 12px;
-  height: 12px;
-  border: 2px solid #dcdfe6;
-  border-top-color: #409eff;
-  border-radius: 50%;
-  animation: BnCascaderPanel-spin 0.8s linear infinite;
-}
-
-@keyframes BnCascaderPanel-spin {
-  to { transform: rotate(360deg); }
-}
-
-.BnCascaderPanel-item-arrow {
-  font-size: 12px;
-  color: #c0c4cc;
-}
-
-.BnCascaderPanel-column-status {
-  padding: 20px 0;
-  text-align: center;
-  font-size: 12px;
-  color: #909399;
-}
-</style>