@hsu-react/ui 0.0.1

package/lib/components/Panel/ListPanel/_components/ToolBar/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Button = _interopRequireDefault(require("../../../../Button"));
+var _hsuUtils = require("hsu-utils");
+var _Icon = _interopRequireDefault(require("../../../../Icon"));
+var _react = _interopRequireDefault(require("react"));
+var _TabBar = _interopRequireDefault(require("../../../../TabBar"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _cssSupports = require("../../../../../utils/cssSupports");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ToolBar = props => {
+  const {
+    columns,
+    title,
+    tabBarProps,
+    buttonGroup,
+    tableTools = {},
+    setShowColumnMgt,
+    tips,
+    otherTool
+  } = props;
+  const {
+    columnMgt
+  } = tableTools;
+  const hasTitleTabBar = !!title || !!tips || !_hsuUtils.Equal.ValEqual(tabBarProps ?? {}, {});
+  const legacyHasSelector = (0, _cssSupports.isLegacyHasSelectorBrowser)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (!!title || !_hsuUtils.Equal.ValEqual(tabBarProps ?? {}, {}) || !!buttonGroup?.length || !_hsuUtils.Equal.ValEqual(tableTools ?? {}, {})) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(_indexModule.default.ToolBar, {
+        [_indexModule.default.legacyNoTitleTabBar]: legacyHasSelector && !hasTitleTabBar
+      }),
+      children: [hasTitleTabBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _indexModule.default.title_tabBar,
+        children: [(!!title || !!tips) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _indexModule.default.title,
+          children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: title
+          }), tips && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _indexModule.default.tips,
+            children: tips
+          })]
+        }), !_hsuUtils.Equal.ValEqual(tabBarProps ?? {}, {}) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBar.default, {
+          ...tabBarProps,
+          className: (0, _classnames.default)(_indexModule.default.tabBar, tabBarProps?.className)
+        })]
+      }), (!!buttonGroup?.length || !_hsuUtils.Equal.ValEqual(tableTools ?? {}, {})) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _indexModule.default.btns_tools,
+        children: [otherTool, !!buttonGroup?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _indexModule.default.buttonGroup,
+          children: buttonGroup?.map((button, idx) => {
+            const {
+              title,
+              children,
+              ...buttonProps
+            } = button;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default.Chakra, {
+              ...buttonProps,
+              children: title || children
+            }, idx);
+          })
+        }), !_hsuUtils.Equal.ValEqual(tableTools ?? {}, {}) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _indexModule.default.tableTools,
+          children: columnMgt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: "lets-icons:setting-line",
+            className: (0, _classnames.default)(_indexModule.default.toolItem, {
+              [_indexModule.default.disabled]: !columns?.filter(i => i.dataIndex)?.length
+            }),
+            onClick: () => {
+              if (columns?.filter(i => i.dataIndex)?.length) {
+                setShowColumnMgt?.(true);
+              }
+            }
+          })
+        })]
+      })]
+    })
+  });
+};
+var _default = exports.default = ToolBar;

package/lib/components/Panel/ListPanel/_components/ToolBar/index.module.less

@@ -0,0 +1,83 @@
+.ToolBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  min-height: max-content;
+
+  .title_tabBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 10px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+      flex-wrap: wrap;
+
+      font-size: 14px;
+      font-weight: bold;
+
+      white-space: nowrap;
+      word-break: keep-all;
+
+      cursor: default;
+
+      .tips {
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+
+    .tabBar {
+      height: 32px;
+    }
+  }
+
+  &:not(:has(.title_tabBar)) {
+    .btns_tools {
+      width: 100%;
+    }
+  }
+
+  &.legacyNoTitleTabBar {
+    .btns_tools {
+      width: 100%;
+    }
+  }
+
+  .btns_tools {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+
+    .buttonGroup {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+    }
+
+    .tableTools {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+
+      .toolItem {
+        font-size: 16px;
+
+        opacity: 0.6;
+
+        cursor: pointer;
+
+        &.disabled {
+          opacity: 0.3;
+
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/lib/components/Panel/ListPanel/index.d.ts

@@ -0,0 +1,69 @@
+import { BreadcrumbProps } from "antd";
+import React, { ReactNode } from "react";
+import { SearchModeKeys, SearchModePropsMap } from "../../Search";
+import { TableProps } from "../../Table";
+import { ChakraButtonProps as BasicButtonProps } from "../../Button";
+import { TabBarProps } from "../../TabBar";
+import { TreeProps } from "../../Tree";
+import { ListModalPanelProps } from "./ListModalPanel";
+interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+    title?: ReactNode;
+    children?: ReactNode;
+}
+interface TableTools {
+    onTableRefresh?: () => void;
+    columnMgt?: IColumnMgt;
+}
+export interface ListPanelTabelProps extends Omit<TableProps, "title"> {
+    title?: string;
+    buttonGroup?: ButtonProps[];
+    tabBarProps?: TabBarProps;
+    tableTools?: TableTools;
+    tableContainerClassName?: string;
+    tips?: ReactNode;
+    otherTool?: ReactNode;
+}
+interface ColumnMgtDataSource {
+    hidden: boolean;
+    title: string;
+    dataIndex: string;
+    sort: number;
+    width?: number;
+    ellipsis?: boolean;
+}
+export interface IColumnMgt {
+    columnCount?: {
+        max?: number;
+        min?: number;
+    };
+    fixedDisplay?: string[];
+    fixedPosition?: string[];
+    onSelectionChange?: (selectedDataIndexes: string[], dataSource: Array<ColumnMgtDataSource>) => void;
+}
+export interface ListPanelProps<T extends SearchModeKeys = "Default"> {
+    className?: string;
+    wrapperClassName?: string;
+    headerTabBarProps?: TabBarProps;
+    headerTabBarContainerClassName?: string;
+    headerTabBarChildren?: ReactNode;
+    treeProps?: TreeProps;
+    searchProps?: SearchModePropsMap[T];
+    /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+    searchMode?: T;
+    tableProps?: ListPanelTabelProps;
+    hasPermi?: string[];
+    baseTreeBreadcrumb?: BreadcrumbProps["items"];
+    showTreeBreadcrumb?: boolean;
+    treeResize?: {
+        enabled?: boolean;
+        defaultWidth?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        minContentWidth?: number;
+    };
+}
+export interface ListPanelFC extends React.FC<ListPanelProps<SearchModeKeys>> {
+    Modal: React.FC<ListModalPanelProps<SearchModeKeys>>;
+}
+declare const ListPanel: ListPanelFC;
+export default ListPanel;

package/lib/components/Panel/ListPanel/index.js

@@ -0,0 +1,304 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("../../Search"));
+var _Table = _interopRequireDefault(require("../../Table"));
+var _TabBar = _interopRequireDefault(require("../../TabBar"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
+var _Tree = _interopRequireDefault(require("../../Tree"));
+var _ToolBar = _interopRequireDefault(require("./_components/ToolBar"));
+var _ColumnMgt = _interopRequireDefault(require("./_components/ColumnMgt"));
+var _ListModalPanel = _interopRequireDefault(require("./ListModalPanel"));
+var _hsuUtils = require("hsu-utils");
+var _cssSupports = require("../../../utils/cssSupports");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListPanel = props => {
+  const {
+    className,
+    wrapperClassName,
+    headerTabBarProps,
+    headerTabBarContainerClassName,
+    headerTabBarChildren,
+    treeProps = {},
+    searchProps,
+    searchMode = "Default",
+    tableProps = {},
+    hasPermi,
+    baseTreeBreadcrumb,
+    showTreeBreadcrumb = true,
+    treeResize = {}
+  } = props;
+  const {
+    enabled: treeResizeEnabled = true,
+    defaultWidth: treeDefaultWidth = 250,
+    minWidth: treeMinWidth = treeDefaultWidth,
+    maxWidth: treeMaxWidth,
+    minContentWidth: treeMinContentWidth = 520
+  } = treeResize;
+  const {
+    title,
+    buttonGroup,
+    className: tableClassName,
+    columns,
+    tabBarProps,
+    tableTools = {},
+    tableContainerClassName,
+    tips,
+    otherTool,
+    ...tableConfig
+  } = tableProps;
+  const {
+    className: treeClassName,
+    ...treeConfig
+  } = treeProps;
+  const hasTree = !!Object.keys(treeConfig).length;
+  const hasHeaderTabBar = !!headerTabBarProps?.tabGroup?.length;
+  const legacyHasSelector = (0, _cssSupports.isLegacyHasSelectorBrowser)();
+  const {
+    columnMgt
+  } = tableTools;
+  const {
+    permitted
+  } = (0, _usePermissions.default)(hasPermi);
+  const [_columns, setColumns] = (0, _react.useState)(columns);
+  const [showColumnMgt, setShowColumnMgt] = (0, _react.useState)(false);
+  const [treeWidth, setTreeWidth] = (0, _react.useState)(treeDefaultWidth);
+  const [treeBreadcrumb, setTreeBreadcrumb] = (0, _react.useState)(baseTreeBreadcrumb ? (0, _lodash.cloneDeep)(baseTreeBreadcrumb) : []);
+  const wrapperRef = (0, _react.useRef)(null);
+  const resizeStateRef = (0, _react.useRef)(null);
+  const [isTreeResizing, setIsTreeResizing] = (0, _react.useState)(false);
+  const [legacyHasSearch, setLegacyHasSearch] = (0, _react.useState)(true);
+  const getClampedTreeWidth = (0, _react.useCallback)(nextWidth => {
+    const wrapperWidth = wrapperRef.current?.clientWidth;
+    const maxWidthByContainer = typeof wrapperWidth === "number" && wrapperWidth > 0 ? Math.max(treeMinWidth, wrapperWidth - treeMinContentWidth) : Number.POSITIVE_INFINITY;
+    const finalMaxWidth = typeof treeMaxWidth === "number" ? Math.max(treeMinWidth, Math.min(treeMaxWidth, maxWidthByContainer)) : maxWidthByContainer;
+    return Math.min(Math.max(nextWidth, treeMinWidth), finalMaxWidth);
+  }, [treeMaxWidth, treeMinContentWidth, treeMinWidth]);
+  const handleTreeResize = (0, _react.useCallback)(event => {
+    if (!resizeStateRef.current) {
+      return;
+    }
+    const {
+      startX,
+      startWidth
+    } = resizeStateRef.current;
+    const deltaX = event.clientX - startX;
+    setTreeWidth(getClampedTreeWidth(startWidth + deltaX));
+  }, [getClampedTreeWidth]);
+  const stopTreeResize = (0, _react.useCallback)(() => {
+    resizeStateRef.current = null;
+    setIsTreeResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    window.removeEventListener("mousemove", handleTreeResize);
+    window.removeEventListener("mouseup", stopTreeResize);
+  }, [handleTreeResize]);
+  const startTreeResize = (0, _react.useCallback)(event => {
+    if (event.button !== 0 || !hasTree || !treeResizeEnabled) {
+      return;
+    }
+    event.preventDefault();
+    resizeStateRef.current = {
+      startX: event.clientX,
+      startWidth: treeWidth
+    };
+    setIsTreeResizing(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    window.addEventListener("mousemove", handleTreeResize);
+    window.addEventListener("mouseup", stopTreeResize);
+  }, [handleTreeResize, hasTree, stopTreeResize, treeResizeEnabled, treeWidth]);
+  (0, _react.useEffect)(() => {
+    if (columnMgt && columns?.length) {
+      const _columns = columns?.map(col => {
+        return {
+          ...col,
+          sort: !col?.dataIndex ? typeof col.sort === "number" ? col.sort : 999 : 0
+        };
+      });
+      setColumns(_columns);
+    } else {
+      setColumns(columns);
+    }
+  }, [columnMgt, columns]);
+  (0, _react.useEffect)(() => {
+    if (!hasTree) {
+      return;
+    }
+    setTreeWidth(getClampedTreeWidth(treeDefaultWidth));
+  }, [getClampedTreeWidth, hasTree, treeDefaultWidth]);
+  (0, _react.useEffect)(() => {
+    if (!hasTree || !treeResizeEnabled) {
+      return;
+    }
+    const onResize = () => {
+      setTreeWidth(prev => getClampedTreeWidth(prev));
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [getClampedTreeWidth, hasTree, treeResizeEnabled]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      stopTreeResize();
+    };
+  }, [stopTreeResize]);
+  (0, _react.useEffect)(() => {
+    if (!legacyHasSelector || !hasHeaderTabBar) {
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    if (!wrapper) {
+      return;
+    }
+    const updateLegacySearchState = () => {
+      setLegacyHasSearch(!!wrapper.querySelector(`.${_indexModule.default.search}`));
+    };
+    updateLegacySearchState();
+    if (typeof MutationObserver === "undefined") {
+      return;
+    }
+    const observer = new MutationObserver(updateLegacySearchState);
+    observer.observe(wrapper, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasHeaderTabBar, legacyHasSelector, searchMode, searchProps]);
+
+  // 根据 searchMode 渲染对应的 Search 组件
+  const SearchComponent = (0, _react.useMemo)(() => {
+    const searchClassName = (0, _classnames.default)(searchProps?.className, _indexModule.default.search);
+    switch (searchMode) {
+      case "Advanced":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.Advanced, {
+          baseWidth: 1670,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "Collapsible":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.Collapsible, {
+          baseWidth: 1670,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "WithFilter":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.WithFilter, {
+          baseWidth: 1670,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "WithMore":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.WithMore, {
+          baseWidth: 1670,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "Card":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.Card, {
+          ...searchProps,
+          className: searchClassName
+        });
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
+          baseWidth: 1670,
+          ...searchProps,
+          className: searchClassName
+        });
+    }
+  }, [searchMode, searchProps]);
+  if (!permitted) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: wrapperRef,
+      className: (0, _classnames.default)(_indexModule.default.ListPanelWrapper, wrapperClassName),
+      children: [hasTree && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _indexModule.default.treeWrapper,
+        style: {
+          width: `${treeWidth}px`
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tree.default, {
+          ...treeConfig,
+          className: (0, _classnames.default)(treeClassName, _indexModule.default.ListPanelTree),
+          onSelectPath: (path, selectedKeys) => {
+            treeConfig.onSelectPath?.(path, selectedKeys);
+            setTreeBreadcrumb([...(baseTreeBreadcrumb || []), ...(path?.map(item => {
+              return {
+                title: item.title
+              };
+            }) || [])]);
+          }
+        }), treeResizeEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(_indexModule.default.treeResizeHandle, {
+            [_indexModule.default.resizing]: isTreeResizing
+          }),
+          onMouseDown: startTreeResize,
+          onDoubleClick: () => setTreeWidth(getClampedTreeWidth(treeDefaultWidth))
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(_indexModule.default.ListPanel, className, {
+          [_indexModule.default.hasHeaderTabBar]: hasHeaderTabBar,
+          [_indexModule.default.legacyNoSearch]: legacyHasSelector && hasHeaderTabBar && !legacyHasSearch
+        }),
+        children: [hasTree && showTreeBreadcrumb && !!treeBreadcrumb?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, {
+          items: treeBreadcrumb
+        }), !!headerTabBarProps?.tabGroup?.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)(_indexModule.default.headerTabBarContainer, headerTabBarContainerClassName),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBar.default, {
+            ...headerTabBarProps,
+            className: (0, _classnames.default)(headerTabBarProps.className, _indexModule.default.headerTabBar)
+          }), headerTabBarChildren]
+        }), SearchComponent, !title && _hsuUtils.Equal.ValEqual(tabBarProps ?? {}, {}) && !buttonGroup?.length && _hsuUtils.Equal.ValEqual(tableTools ?? {}, {}) && tips && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _indexModule.default.tips,
+          children: tips
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)(_indexModule.default.tableContainer, tableContainerClassName),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, {
+            columns: columns,
+            title: title,
+            tabBarProps: tabBarProps,
+            buttonGroup: buttonGroup,
+            tableTools: tableTools,
+            setShowColumnMgt: setShowColumnMgt,
+            tips: tips,
+            otherTool: otherTool
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
+            className: `${_indexModule.default.table} ${tableClassName ?? ""}`,
+            scroll: true,
+            serialNumberColumn: true,
+            bordered: true,
+            fillPanel: true,
+            ...tableConfig,
+            columns: _columns
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnMgt.default, {
+      open: showColumnMgt,
+      onClose: () => setShowColumnMgt(false),
+      onOk: columns => setColumns((0, _lodash.cloneDeep)(columns)),
+      columns: _columns,
+      defaultColumns: columns,
+      onSelectionChange: columnMgt?.onSelectionChange,
+      ...columnMgt
+    })]
+  });
+};
+ListPanel.Modal = _ListModalPanel.default;
+var _default = exports.default = ListPanel;

package/lib/components/Panel/ListPanel/index.module.less

@@ -0,0 +1,134 @@
+.ListPanelWrapper {
+  display: flex;
+  column-gap: 10px;
+
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+
+  overflow: hidden;
+}
+
+.treeWrapper {
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0px;
+  height: 100%;
+}
+
+.ListPanelTree {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+
+.treeResizeHandle {
+  position: absolute;
+  top: 0px;
+  right: -5px;
+  z-index: 2;
+
+  width: 10px;
+  height: 100%;
+
+  cursor: col-resize;
+
+  &::before {
+    content: "";
+
+    position: absolute;
+    top: 0px;
+    left: 4px;
+
+    width: 2px;
+    height: 100%;
+
+    background: transparent;
+    border-radius: 1px;
+
+    transition: background 0.2s;
+  }
+
+  &:hover {
+    &::before {
+      background: rgba(24, 144, 255, 0.45);
+    }
+  }
+}
+
+.resizing {
+  &::before {
+    background: #1890ff;
+  }
+}
+
+.ListPanel {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  min-width: 0px;
+  height: 100%;
+
+  .tips {
+    width: 100%;
+
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .tableContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    width: 100%;
+    min-height: 0px;
+    padding: 14px 16px;
+
+    background: var(--cf-surface);
+
+    // CF 风格：描边白卡片 + 小圆角，去投影
+    border-radius: 8px;
+    border: 1px solid var(--cf-border);
+    box-shadow: none;
+  }
+
+  .headerTabBarContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 10px;
+
+    padding: 10px;
+
+    background: var(--cf-subtle);
+
+    border-radius: 8px 8px 0px 0px;
+    border: 1px solid var(--cf-border);
+  }
+
+  &.hasHeaderTabBar {
+    .search {
+      padding: 10px;
+      margin-top: -10px;
+
+      border-radius: 0px 0px 8px 8px;
+    }
+
+    &:not(:has(.search)) {
+      .headerTabBarContainer {
+        border-radius: 8px;
+      }
+    }
+
+    &.legacyNoSearch {
+      .headerTabBarContainer {
+        border-radius: 8px;
+      }
+    }
+  }
+}

package/lib/components/Panel/index.d.ts

@@ -0,0 +1,11 @@
+import { IframePanelProps } from "./IframePanel";
+import { ListPanelFC } from "./ListPanel";
+import { DefaultPanelProps } from "./DefaultPanel";
+import React from "react";
+interface PanelType {
+    List: ListPanelFC;
+    Iframe: React.FC<IframePanelProps>;
+    Default: React.FC<DefaultPanelProps>;
+}
+declare const Panel: PanelType;
+export default Panel;