@bit-sun/business-component 4.2.0-alpha.31 → 4.2.0-alpha.32-wyl

package/src/components/Business/BsSulaQueryTable/useRangeCopy.tsx

@@ -0,0 +1,520 @@
+import { useEffect, useRef } from 'react';
+import { message } from 'antd';
+import { writeClipboard } from './clipboard';
+import {
+  buildRangeCopy,
+  DATA_ROW_SELECTOR,
+  getIncludedCols,
+  resolveExcludeCols,
+} from './rangeCopy';
+import './rangeCopy.less';
+
+const CELL_SELECTOR = 'td.ant-table-cell';
+// 这些目标上不启动框选：可编辑控件、勾选列（保持原生点击行为）
+const IGNORE_TARGET_SELECTOR =
+  'input, textarea, select, [contenteditable="true"], .ant-table-selection-column';
+const DEFAULT_EXCLUDE_TITLES = ['操作'];
+// 指针进入容器边缘这个带宽内开始自动滚动，最多 24px/帧
+const EDGE_BAND = 36;
+const MAX_SCROLL_STEP = 24;
+
+export interface UseRangeCopyOptions {
+  /** 是否启用（默认 true）。虚拟滚动表只渲染可视行、DOM 取不到整段选区，应传 false */
+  enabled?: boolean;
+  /** 按表头文本排除的列，默认排除「操作」列；勾选列始终排除 */
+  excludeTitles?: string[];
+  /** 框选结束是否自动写入剪贴板（默认 true）；false 时仍支持框选后 Ctrl+C */
+  autoCopy?: boolean;
+}
+
+interface RangeState {
+  tbody: HTMLTableSectionElement;
+  /** 高亮层挂载点：表格的滚动容器，高亮层作为它的子节点随内容一起滚动，不会漂移 */
+  anchor: HTMLElement;
+  /** 最近的可滚动祖先（一般是 .ant-table-body），没有则退回窗口滚动 */
+  scroller: HTMLElement | null;
+  rows: HTMLTableRowElement[];
+  rowStart: number;
+  rowEnd: number;
+  colStart: number;
+  colEnd: number;
+  excludeCols: Set<number>;
+}
+
+/** 基准格：既是 Shift+点击 的基准，也是"按下但还没产生位移"的挂起状态 */
+interface AnchorState {
+  tbody: HTMLTableSectionElement;
+  anchor: HTMLElement;
+  scroller: HTMLElement | null;
+  rows: HTMLTableRowElement[];
+  rowIndex: number;
+  colIndex: number;
+  excludeCols: Set<number>;
+}
+
+/** 高亮层的定位祖先：优先表格的滚动容器 */
+const findAnchor = (tbody: HTMLTableSectionElement): HTMLElement | null =>
+  (tbody.closest('.ant-table-body') ||
+    tbody.closest('.ant-table-container') ||
+    tbody.closest('.ant-table')) as HTMLElement | null;
+
+/** 从 tbody 往上找最近的可滚动祖先（纵向或横向），找不到就退回窗口滚动 */
+const findScroller = (start: HTMLElement | null): HTMLElement | null => {
+  let node = start?.parentElement || null;
+  while (node && node !== document.body) {
+    const style = window.getComputedStyle(node);
+    const canY =
+      /auto|scroll/.test(style.overflowY) &&
+      node.scrollHeight > node.clientHeight + 1;
+    const canX =
+      /auto|scroll/.test(style.overflowX) &&
+      node.scrollWidth > node.clientWidth + 1;
+    if (canY || canX) return node;
+    node = node.parentElement;
+  }
+  return null;
+};
+
+const scrollerHasRoom = (
+  scroller: HTMLElement | null,
+  stepX: number,
+  stepY: number,
+) => {
+  if (!scroller) return false;
+  if (stepY > 0)
+    return (
+      scroller.scrollTop + scroller.clientHeight < scroller.scrollHeight - 1
+    );
+  if (stepY < 0) return scroller.scrollTop > 0;
+  if (stepX > 0)
+    return (
+      scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1
+    );
+  if (stepX < 0) return scroller.scrollLeft > 0;
+  return false;
+};
+
+/**
+ * 表格「Excel 式框选复制」。返回容器 ref，挂到表格容器上即可（BsSulaQueryTable 挂在 #bs-sula-query-table）。
+ * 实现要点：事件委托 + 单个挂进滚动容器的高亮层（随内容滚动，不依赖 scroll 事件补帧），
+ * 全程只用 ref、不改表格内任何单元格、不触发 React 重渲染。
+ */
+export const useRangeCopy = (options?: UseRangeCopyOptions) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // 选项只走 ref，避免因选项对象身份变化导致重新订阅
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const enabled = options?.enabled !== false;
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const container = containerRef.current;
+    if (!container) return undefined;
+
+    const overlay = document.createElement('div');
+    overlay.className = 'bs-range-copy__overlay';
+
+    // dragging：已识别为拖拽（选区已建立）；pressed：鼠标仍按在单元格上
+    let dragging = false;
+    let pressed = false;
+    let suppressClick = false;
+    let rafId = 0;
+    let autoScrollId = 0;
+    let pointerX = 0;
+    let pointerY = 0;
+    let stepX = 0;
+    let stepY = 0;
+    let range: RangeState | null = null;
+    let anchorState: AnchorState | null = null;
+
+    const hideOverlay = () => {
+      overlay.style.display = 'none';
+    };
+
+    const stopAutoScroll = () => {
+      if (autoScrollId) {
+        window.cancelAnimationFrame(autoScrollId);
+        autoScrollId = 0;
+      }
+      stepX = 0;
+      stepY = 0;
+    };
+
+    const clearRange = () => {
+      range = null;
+      anchorState = null;
+      dragging = false;
+      suppressClick = false;
+      stopAutoScroll();
+      hideOverlay();
+    };
+
+    const paintOverlay = () => {
+      rafId = 0;
+      const state = range;
+      if (!state) return;
+      const includedCols = getIncludedCols(
+        state.colStart,
+        state.colEnd,
+        state.excludeCols,
+      );
+      const from = Math.min(state.rowStart, state.rowEnd);
+      const to = Math.max(state.rowStart, state.rowEnd);
+      const startCell = includedCols.length
+        ? state.rows[from]?.cells[includedCols[0]]
+        : undefined;
+      const endCell = includedCols.length
+        ? state.rows[to]?.cells[includedCols[includedCols.length - 1]]
+        : undefined;
+      if (
+        !startCell ||
+        !endCell ||
+        !startCell.isConnected ||
+        !endCell.isConnected ||
+        !state.anchor.isConnected
+      ) {
+        clearRange();
+        return;
+      }
+      // 高亮层挂进滚动容器：内容滚动时由浏览器带着它一起移动，无需监听 scroll 补帧
+      if (overlay.parentElement !== state.anchor) {
+        state.anchor.appendChild(overlay);
+      }
+      const base = state.anchor.getBoundingClientRect();
+      const contentLeft =
+        base.left + state.anchor.clientLeft - state.anchor.scrollLeft;
+      const contentTop =
+        base.top + state.anchor.clientTop - state.anchor.scrollTop;
+      const a = startCell.getBoundingClientRect();
+      const b = endCell.getBoundingClientRect();
+      overlay.style.display = 'block';
+      overlay.style.left = `${Math.min(a.left, b.left) - contentLeft}px`;
+      overlay.style.top = `${Math.min(a.top, b.top) - contentTop}px`;
+      overlay.style.width = `${
+        Math.max(a.right, b.right) - Math.min(a.left, b.left)
+      }px`;
+      overlay.style.height = `${
+        Math.max(a.bottom, b.bottom) - Math.min(a.top, b.top)
+      }px`;
+    };
+
+    const schedulePaint = () => {
+      if (!rafId) rafId = window.requestAnimationFrame(paintOverlay);
+    };
+
+    const buildCurrentRange = () => {
+      if (!range) return null;
+      const { rows, rowStart, rowEnd, colStart, colEnd, excludeCols } = range;
+      const from = Math.min(rowStart, rowEnd);
+      const to = Math.max(rowStart, rowEnd);
+      return buildRangeCopy(
+        rows.slice(from, to + 1),
+        colStart,
+        colEnd,
+        excludeCols,
+      );
+    };
+
+    const copyRange = () => {
+      const result = buildCurrentRange();
+      if (!result) return;
+      if (!result.rowCount || !result.colCount) {
+        message.warning('所选区域没有可复制的内容');
+        return;
+      }
+      writeClipboard(result.text).then((ok) => {
+        if (ok) {
+          message.success(
+            `已复制 ${result.rowCount} 行 × ${result.colCount} 列`,
+          );
+        } else {
+          // 选区刻意保留：按 Ctrl+C 会走 copy 事件直接写 clipboardData，这条路径不受焦点/权限限制
+          message.error('复制失败，请按 Ctrl+C 重试');
+        }
+      });
+    };
+
+    /** 拖拽期间清掉浏览器自带选区：不靠 preventDefault，改用"事后清"保住原生单击语义 */
+    const clearNativeSelection = () => {
+      const selection = window.getSelection();
+      if (selection && !selection.isCollapsed) selection.removeAllRanges();
+    };
+
+    /** 按住期间数据格内图片的原生拖拽会吞掉 mousemove，只在那种情况下取消它 */
+    const handleDragStart = (e: DragEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!pressed || !target || target.tagName !== 'IMG') return;
+      if (target.closest?.(CELL_SELECTOR)) e.preventDefault();
+    };
+
+    const getCell = (target: EventTarget | null) => {
+      const el = target as HTMLElement | null;
+      return (el?.closest?.(CELL_SELECTOR) as HTMLTableCellElement) || null;
+    };
+
+    /** 把选区终点挪到某个单元格上（mousemove 与自动滚动共用） */
+    const applyCell = (cell: HTMLTableCellElement | null) => {
+      const state = range;
+      if (!state || !cell || !state.tbody.contains(cell)) return;
+      const row = cell.closest(DATA_ROW_SELECTOR) as HTMLTableRowElement | null;
+      if (!row) return;
+      const rowIndex = state.rows.indexOf(row);
+      if (rowIndex < 0) return;
+      if (rowIndex === state.rowEnd && cell.cellIndex === state.colEnd) return;
+      state.rowEnd = rowIndex;
+      state.colEnd = cell.cellIndex;
+      schedulePaint();
+    };
+
+    /** 内容滚过指针后，指针下那一格才是选区的当前终点（指针在容器外时钳制到容器内） */
+    const applyPointerCell = () => {
+      const state = range;
+      if (!state) return;
+      const base = (state.scroller || state.anchor).getBoundingClientRect();
+      const x = Math.min(Math.max(pointerX, base.left + 1), base.right - 1);
+      const y = Math.min(Math.max(pointerY, base.top + 1), base.bottom - 1);
+      applyCell(getCell(document.elementFromPoint(x, y)));
+    };
+
+    const edgeStep = (pos: number, min: number, max: number) => {
+      if (pos < min + EDGE_BAND) {
+        return -Math.ceil(
+          Math.min(1, (min + EDGE_BAND - pos) / EDGE_BAND) * MAX_SCROLL_STEP,
+        );
+      }
+      if (pos > max - EDGE_BAND) {
+        return Math.ceil(
+          Math.min(1, (pos - (max - EDGE_BAND)) / EDGE_BAND) * MAX_SCROLL_STEP,
+        );
+      }
+      return 0;
+    };
+
+    const autoScrollFrame = () => {
+      autoScrollId = 0;
+      const state = range;
+      if (!state || (!stepX && !stepY)) return;
+      if (stepY) {
+        if (scrollerHasRoom(state.scroller, 0, stepY)) {
+          state.scroller!.scrollTop += stepY;
+        } else {
+          window.scrollBy(0, stepY);
+        }
+      }
+      if (stepX) {
+        if (scrollerHasRoom(state.scroller, stepX, 0)) {
+          state.scroller!.scrollLeft += stepX;
+        } else {
+          window.scrollBy(stepX, 0);
+        }
+      }
+      applyPointerCell();
+      autoScrollId = window.requestAnimationFrame(autoScrollFrame);
+    };
+
+    /** 指针贴近容器边缘（或已在容器外）时启动/更新连续滚动 */
+    const updateAutoScroll = () => {
+      const state = range;
+      if (!state) {
+        stopAutoScroll();
+        return;
+      }
+      const rect = (state.scroller || state.anchor).getBoundingClientRect();
+      stepY = edgeStep(pointerY, rect.top, rect.bottom);
+      stepX = edgeStep(pointerX, rect.left, rect.right);
+      if (!stepX && !stepY) {
+        stopAutoScroll();
+        return;
+      }
+      if (!autoScrollId)
+        autoScrollId = window.requestAnimationFrame(autoScrollFrame);
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (e.button !== 0) return;
+      // 新的一次按下即作废旧标记：若上次拖拽在窗口外松开、没等到 click，避免吞掉后续点击
+      suppressClick = false;
+      const target = e.target as HTMLElement;
+      if (target.closest?.(IGNORE_TARGET_SELECTOR)) return;
+      const cell = getCell(e.target);
+      const row = cell?.closest(
+        DATA_ROW_SELECTOR,
+      ) as HTMLTableRowElement | null;
+      const tbody = cell?.closest('tbody') as HTMLTableSectionElement | null;
+      if (!cell || !row || !tbody) return;
+      const anchorEl = findAnchor(tbody);
+      if (!anchorEl) return;
+      const rows = Array.from(
+        tbody.querySelectorAll<HTMLTableRowElement>(DATA_ROW_SELECTOR),
+      );
+      const rowIndex = rows.indexOf(row);
+      if (rowIndex < 0) return;
+      // 刻意不做 preventDefault：单击的 focus/blur、原生划选、双击选词都保持原生行为；
+      // 拖拽被识别后才清掉浏览器原生选区（见 clearNativeSelection）
+      pressed = true;
+      pointerX = e.clientX;
+      pointerY = e.clientY;
+      // Shift+点击：以既有基准格为另一角直接框出矩形（无需拖拽），基准格保持不变；
+      // 基准格已随表格重渲染失效 / 属于另一张表时，按普通点击重新取基准
+      const base = anchorState;
+      if (
+        e.shiftKey &&
+        base &&
+        base.tbody === tbody &&
+        base.rows[base.rowIndex]?.isConnected
+      ) {
+        // 不置 dragging：mouseup 因此不会重复复制，仅由 suppressClick 吃掉随后的那次 click
+        suppressClick = true;
+        range = {
+          tbody,
+          anchor: anchorEl,
+          scroller: base.scroller,
+          rows: base.rows,
+          rowStart: base.rowIndex,
+          rowEnd: rowIndex,
+          colStart: base.colIndex,
+          colEnd: cell.cellIndex,
+          excludeCols: base.excludeCols,
+        };
+        schedulePaint();
+        if (optionsRef.current?.autoCopy ?? true) copyRange();
+        return;
+      }
+      // 普通按下：只记基准格，不建立选区（选区等"指针挪到别的单元格"后才建）
+      anchorState = {
+        tbody,
+        anchor: anchorEl,
+        scroller: findScroller(tbody),
+        rows,
+        rowIndex,
+        colIndex: cell.cellIndex,
+        excludeCols: resolveExcludeCols(
+          tbody,
+          optionsRef.current?.excludeTitles || DEFAULT_EXCLUDE_TITLES,
+        ),
+      };
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!pressed) return;
+      pointerX = e.clientX;
+      pointerY = e.clientY;
+      const cell = getCell(e.target);
+      if (!dragging) {
+        // 指针挪到别的单元格 = 拖拽意图：此刻才建立选区
+        const base = anchorState;
+        if (!cell || !base || !base.rows[base.rowIndex]?.isConnected) return;
+        const row = cell.closest(
+          DATA_ROW_SELECTOR,
+        ) as HTMLTableRowElement | null;
+        if (!row) return;
+        const rowIndex = base.rows.indexOf(row);
+        if (rowIndex < 0) return;
+        if (rowIndex === base.rowIndex && cell.cellIndex === base.colIndex)
+          return;
+        dragging = true;
+        range = {
+          tbody: base.tbody,
+          anchor: base.anchor,
+          scroller: base.scroller,
+          rows: base.rows,
+          rowStart: base.rowIndex,
+          rowEnd: rowIndex,
+          colStart: base.colIndex,
+          colEnd: cell.cellIndex,
+          excludeCols: base.excludeCols,
+        };
+      } else {
+        applyCell(cell);
+      }
+      clearNativeSelection();
+      schedulePaint();
+      updateAutoScroll();
+    };
+
+    const handleMouseUp = () => {
+      pressed = false;
+      // 普通单击（没升级成拖拽）什么都不做：click 保持原生，不复制、不抑制
+      if (!dragging) return;
+      dragging = false;
+      stopAutoScroll();
+      clearNativeSelection();
+      // 拖拽后的那一次 click 要拦掉，否则会误触发行点击勾选/跳详情
+      suppressClick = true;
+      if (optionsRef.current?.autoCopy ?? true) copyRange();
+      schedulePaint();
+    };
+
+    const handleClickCapture = (e: MouseEvent) => {
+      if (suppressClick) {
+        suppressClick = false;
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      // 点分页/工具栏/筛选图标时收起高亮，避免表格重渲染后残留
+      if (!getCell(e.target)) clearRange();
+    };
+
+    const handleCopy = (e: ClipboardEvent) => {
+      // range 只在"拖拽/Shift+点击"后才存在 ⇒ 单击不会留下可被劫持的选区
+      if (!range || !e.clipboardData) return;
+      const target = e.target as HTMLElement | null;
+      if (target?.closest?.('input, textarea, [contenteditable="true"]'))
+        return;
+      // 容器外还有一段非折叠选区（用户真正想复制的是那段文本）→ 一律放行浏览器默认复制
+      const selection = window.getSelection();
+      if (
+        selection &&
+        !selection.isCollapsed &&
+        selection.anchorNode &&
+        !container.contains(selection.anchorNode)
+      ) {
+        return;
+      }
+      const result = buildCurrentRange();
+      if (!result || !result.rowCount || !result.colCount) return;
+      e.clipboardData.setData('text/plain', result.text);
+      e.preventDefault();
+      message.success(`已复制 ${result.rowCount} 行 × ${result.colCount} 列`);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // clearRange 已一并重置 dragging / suppressClick
+      if (e.key === 'Escape') clearRange();
+    };
+
+    const handleBlur = () => {
+      // 拖拽中窗口失焦：取消本次框选动作，避免意料之外的剪贴板写入（保留已完成的选区）
+      pressed = false;
+      dragging = false;
+      suppressClick = false;
+      stopAutoScroll();
+    };
+
+    container.addEventListener('mousedown', handleMouseDown);
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('dragstart', handleDragStart);
+    container.addEventListener('click', handleClickCapture, true);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('copy', handleCopy);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('blur', handleBlur);
+
+    return () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+      stopAutoScroll();
+      container.removeEventListener('mousedown', handleMouseDown);
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('dragstart', handleDragStart);
+      container.removeEventListener('click', handleClickCapture, true);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('copy', handleCopy);
+      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('blur', handleBlur);
+      overlay.remove();
+    };
+  }, [enabled]);
+
+  return containerRef;
+};

package/src/components/Business/SearchSelect/BusinessUtils.tsx

@@ -6,7 +6,7 @@ import { handleTextOverflow, tableColumnsImage, handleTooltip } from '@/componen
 import { getSkuImg } from '@/utils/TableUtils';
 import { getEmployeeCode, getCurrentTargetBgId } from '@/utils/LocalstorageUtils';
 import { Image } from 'antd';
-import { isBoolean } from 'lodash';
+import { isBoolean, uniqBy } from 'lodash';
 
 const hasDictSharingType =  getDictionarySource('UC000013')?.length;
 const sharingTypeDataList = hasDictSharingType && getDictionarySource('UC000013') || sharingType
@@ -399,6 +399,48 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
           },
         }
       } },
+      { name: 'qp-productFirstLevel-in', type: 'select', label: '一级产品线', isProductLine: true, field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        } },
+      { name: 'qp-productSecondLevel-in', type: 'select', label: '二级产品线', isProductLine: true, field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        } },
+      { name: 'qp-productThirdLevel-in', type: 'select', label: '三级产品线', isProductLine: true, field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        } },
       // { name: 'qp-eancode-in', label: '商品条码', field: {
       //   type: 'multipleQueryInput',
       //   props: {
@@ -479,10 +521,38 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
         currentPage: 1,
         'qp-labelType-eq': 1,
       },getQueryHeadersItem(queryHeaderParams,'qp-itemLabelId-in')),
+      loadSelectSource(`${prefixUrl.formSelectFix}/item/propertyValue/getPropertyValueNoPagerByCode`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'qp-propertyCode-eq': 'productFirstLevel',
+      },{}),
+      loadSelectSource(`${prefixUrl.formSelectFix}/item/propertyValue/getPropertyValueNoPagerByCode`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'qp-propertyCode-eq': 'productSecondLevel',
+      },{}),
+      loadSelectSource(`${prefixUrl.formSelectFix}/item/propertyValue/getPropertyValueNoPagerByCode`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'qp-propertyCode-eq': 'productThirdLevel',
+      },{}),
     ]).then((x: any)=>{
-      formatSource(x,0, 3, tableSearchForm,['id','name'])
-      formatTreeDataSource(x,1, 4, tableSearchForm)
-      formatSource(x,2, 6, tableSearchForm,['id','name'])
+      // 一、二、三级产品线：展示用 value、查询条件用 value（并按 value 去重）
+      formatSource(x,3, 3, tableSearchForm,['value','value'])
+      formatSource(x,4, 4, tableSearchForm,['value','value'])
+      formatSource(x,5, 5, tableSearchForm,['value','value'])
+      // 产品线按 value 去重，并缓存每个产品线的 propertyId，用于查询时构造 properties body(propertyParams)
+      [3,4,5].forEach((idx: any, i: number) => {
+        const field = tableSearchForm[idx];
+        if (field?.initialSource?.length) {
+          field.initialSource = uniqBy(field.initialSource, 'value');
+        }
+        const first = x[3 + i]?.data?.items?.[0];
+        if (field && first) field.propertyId = first.propertyId;
+      });
+      formatSource(x,0, 6, tableSearchForm,['id','name'])
+      formatTreeDataSource(x,1, 7, tableSearchForm)
+      formatSource(x,2, 8, tableSearchForm,['id','name'])
     })
     modalTableProps = {
       modalTableTitle: '选择SKU',
@@ -548,6 +618,8 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
           defaultSort: 4,
         },
       ],
+      // 布局：查询按钮在右侧、查询结果与已选区域上下布局（仅 SKU 选择器启用）
+      layoutMode: 'topBottom',
       ...modalTableBusProps
     }
   }

package/src/components/Functional/SearchSelect/index.less

@@ -154,6 +154,16 @@
     }
   }
 
+  // 布局：上下结构 (layoutMode: 'topBottom') - 弹窗更贴近顶部、body 更高，给表格区域更多展示空间
+  &_modal_wrapper_topBottom {
+    .ant-modal {
+      top: 40px;
+    }
+    .ant-modal-body {
+      height: calc(100vh - 200px);
+    }
+  }
+
   &_wrapper {
     position: relative;
     font-size: 14px;
@@ -314,6 +324,61 @@
         border-color: @primary-color;
       }
     }
+
+    // 布局：查询按钮在右侧 (layoutMode: 'topBottom')
+    &_topForm {
+      .select_list_columns_topBottom {
+        .search_select_button_right {
+          display: flex;
+          justify-content: flex-end;
+          align-items: flex-start;
+          padding-right: 10px;
+        }
+      }
+    }
+
+    // 布局：上下三部分结构 (layoutMode: 'topBottom') - wrapper 撑满 modal body，查询条件/结果/已选 纵向分区
+    &.search_select_wrapper_topBottom {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+
+      .search_select_wrapper_topForm {
+        flex: none;
+      }
+    }
+
+    // 布局：查询结果与已选区域上下布局 (layoutMode: 'topBottom')
+    &_bottomTable_topBottom {
+      flex: 1;
+      min-height: 0;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: stretch;
+      overflow: hidden;
+    }
+
+    // 上下布局的子区域：结果区/已选区，类名与 JSX 中 search_select_wrapper_bottomTable_stackTop/stackBottom 一一对应
+    &_bottomTable_stackTop,
+    &_bottomTable_stackBottom {
+      width: 100%;
+      background: #fff;
+      // 防止表格内容溢出所在区域（表格内部滚动高度由 renderShowTable 实测计算）
+      overflow: hidden;
+    }
+
+    &_bottomTable_stackTop {
+      flex: 1;
+      min-height: 0;
+      margin-bottom: 12px;
+    }
+
+    &_bottomTable_stackBottom {
+      flex: none;
+      // 已选区固定高度：随窗口高度在 200~320px 之间自适应，保证结果区始终有空间展示数据
+      height: clamp(200px, 28vh, 320px);
+    }
   }
 }