@hsu-react/ui 0.0.8 → 0.0.9

package/src/components/Panel/ListPanel/ListModalPanel/index.tsx

@@ -1,233 +1,261 @@
-import React, { ReactNode, useEffect, useMemo, useState } from "react";
-import Search, {
-  SearchModeKeys,
-  SearchModePropsMap,
-} from "../../../Search";
-import Table, { ColumnsType, TableProps } from "../../../Table";
-
-import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
-import { TabBarProps } from "../../../TabBar";
-import classNames from "classnames";
-import { cloneDeep } from "lodash";
-import styles from "./index.module.scss";
-import usePermissions from "../../../../hooks/usePermissions";
-import Modal, { ModalProps } from "../../../Modal";
-import ToolBar from "../_components/ToolBar";
-import ColumnMgt from "../_components/ColumnMgt";
-
-interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
-  title?: ReactNode;
-  children?: ReactNode;
-}
-
-interface TableTools {
-  onTableRefresh?: () => void;
-  columnMgt?: IColumnMgt;
-}
-
-export interface ListModalPanelTabelProps 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 ListModalPanelProps<
-  T extends SearchModeKeys = "Default",
-> extends ModalProps {
-  modalClassName?: string;
-  className?: string;
-  searchProps?: SearchModePropsMap[T];
-  /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
-  searchMode?: T;
-  tableProps?: ListModalPanelTabelProps;
-  hasPermi?: string[];
-  extraContent?: ReactNode;
-}
-
-const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>> = (
-  props,
-) => {
-  const {
-    modalClassName,
-    className,
-    searchProps,
-    searchMode = "Default",
-    tableProps = {},
-    hasPermi,
-    extraContent,
-    ...modalConfig
-  } = props;
-  const {
-    title,
-    buttonGroup,
-    className: tableClassName,
-    columns,
-    tabBarProps,
-    tableTools = {},
-    tableContainerClassName,
-    tips,
-    otherTool,
-    ...tableConfig
-  } = tableProps;
-  const { columnMgt } = tableTools;
-  const { permitted } = usePermissions(hasPermi);
-  const [_columns, setColumns] = useState<ColumnsType | undefined>(columns);
-  const [showColumnMgt, setShowColumnMgt] = useState<boolean>(false);
-
-  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]);
-
-  // 根据 searchMode 渲染对应的 Search 组件
-  const SearchComponent = useMemo(() => {
-    const searchClassName = classNames(searchProps?.className, styles.search);
-
-    switch (searchMode) {
-      case "Advanced":
-        return (
-          <Search.Advanced
-            baseWidth={1400}
-            {...(searchProps as SearchModePropsMap["Advanced"])}
-            className={searchClassName}
-          />
-        );
-      case "Collapsible":
-        return (
-          <Search.Collapsible
-            baseWidth={1400}
-            {...(searchProps as SearchModePropsMap["Collapsible"])}
-            className={searchClassName}
-          />
-        );
-      case "WithFilter":
-        return (
-          <Search.WithFilter
-            baseWidth={1400}
-            {...(searchProps as SearchModePropsMap["WithFilter"])}
-            className={searchClassName}
-          />
-        );
-      case "WithMore":
-        return (
-          <Search.WithMore
-            baseWidth={1400}
-            {...(searchProps as SearchModePropsMap["WithMore"])}
-            className={searchClassName}
-          />
-        );
-      case "Card":
-        return (
-          <Search.Card
-            {...(searchProps as SearchModePropsMap["Card"])}
-            className={searchClassName}
-          />
-        );
-      default:
-        return (
-          <Search
-            baseWidth={1400}
-            {...(searchProps as SearchModePropsMap["Default"])}
-            className={searchClassName}
-          />
-        );
-    }
-  }, [searchMode, searchProps]);
-
-  if (!permitted) {
-    return null;
-  }
-
-  return (
-    <>
-      <Modal
-        width={1400}
-        className={classNames(modalClassName)}
-        {...modalConfig}
-      >
-        <div className={classNames(styles.ListModalPanel, className)}>
-          {extraContent}
-          {SearchComponent}
-          <div
-            className={classNames(
-              styles.tableContainer,
-              tableContainerClassName,
-            )}
-          >
-            <ToolBar
-              columns={columns}
-              title={title}
-              tabBarProps={tabBarProps}
-              buttonGroup={buttonGroup}
-              tableTools={tableTools}
-              setShowColumnMgt={setShowColumnMgt}
-              tips={tips}
-              otherTool={otherTool}
-            />
-            <Table
-              className={`${styles.table} ${tableClassName ?? ""}`}
-              {...{
-                scroll: true,
-                serialNumberColumn: true,
-                bordered: true,
-                ...tableConfig,
-                columns: _columns,
-              }}
-            />
-          </div>
-        </div>
-      </Modal>
-      <ColumnMgt
-        open={showColumnMgt}
-        onClose={() => setShowColumnMgt(false)}
-        onOk={(columns) => setColumns(cloneDeep(columns))}
-        columns={_columns}
-        defaultColumns={columns}
-        onSelectionChange={columnMgt?.onSelectionChange}
-        {...columnMgt}
-      />
-    </>
-  );
-};
-
-export default ListModalPanel;
+import React, { ReactNode, useEffect, useMemo, useState } from "react";
+import Search, {
+  SearchModeKeys,
+  SearchModePropsMap,
+} from "../../../Search";
+import Table, { ColumnsType, TableProps } from "../../../Table";
+
+import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
+import { TabBarProps } from "../../../TabBar";
+import {
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+} from "@ant-design/icons";
+import classNames from "classnames";
+import { cloneDeep } from "lodash";
+import styles from "./index.module.scss";
+import usePermissions from "../../../../hooks/usePermissions";
+import Modal, { ModalProps } from "../../../Modal";
+import ToolBar from "../_components/ToolBar";
+import ColumnMgt from "../_components/ColumnMgt";
+
+interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+interface TableTools {
+  onTableRefresh?: () => void;
+  columnMgt?: IColumnMgt;
+}
+
+export interface ListModalPanelTabelProps 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 ListModalPanelProps<
+  T extends SearchModeKeys = "Default",
+> extends ModalProps {
+  modalClassName?: string;
+  className?: string;
+  searchProps?: SearchModePropsMap[T];
+  /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+  searchMode?: T;
+  tableProps?: ListModalPanelTabelProps;
+  hasPermi?: string[];
+  extraContent?: ReactNode;
+}
+
+const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>> = (
+  props,
+) => {
+  const {
+    modalClassName,
+    className,
+    searchProps,
+    searchMode = "Default",
+    tableProps = {},
+    hasPermi,
+    extraContent,
+    ...modalConfig
+  } = props;
+  const {
+    title,
+    buttonGroup,
+    className: tableClassName,
+    columns,
+    tabBarProps,
+    tableTools = {},
+    tableContainerClassName,
+    tips,
+    otherTool,
+    ...tableConfig
+  } = tableProps;
+  const { columnMgt } = tableTools;
+  const { permitted } = usePermissions(hasPermi);
+  const [_columns, setColumns] = useState<ColumnsType | undefined>(columns);
+  const [showColumnMgt, setShowColumnMgt] = useState<boolean>(false);
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (modalConfig.open) {
+      setIsFullscreen(false);
+    }
+  }, [modalConfig.open]);
+
+  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]);
+
+  // 根据 searchMode 渲染对应的 Search 组件
+  const SearchComponent = useMemo(() => {
+    const searchClassName = classNames(searchProps?.className, styles.search);
+
+    switch (searchMode) {
+      case "Advanced":
+        return (
+          <Search.Advanced
+            baseWidth={1400}
+            {...(searchProps as SearchModePropsMap["Advanced"])}
+            className={searchClassName}
+          />
+        );
+      case "Collapsible":
+        return (
+          <Search.Collapsible
+            baseWidth={1400}
+            {...(searchProps as SearchModePropsMap["Collapsible"])}
+            className={searchClassName}
+          />
+        );
+      case "WithFilter":
+        return (
+          <Search.WithFilter
+            baseWidth={1400}
+            {...(searchProps as SearchModePropsMap["WithFilter"])}
+            className={searchClassName}
+          />
+        );
+      case "WithMore":
+        return (
+          <Search.WithMore
+            baseWidth={1400}
+            {...(searchProps as SearchModePropsMap["WithMore"])}
+            className={searchClassName}
+          />
+        );
+      case "Card":
+        return (
+          <Search.Card
+            {...(searchProps as SearchModePropsMap["Card"])}
+            className={searchClassName}
+          />
+        );
+      default:
+        return (
+          <Search
+            baseWidth={1400}
+            {...(searchProps as SearchModePropsMap["Default"])}
+            className={searchClassName}
+          />
+        );
+    }
+  }, [searchMode, searchProps]);
+
+  if (!permitted) {
+    return null;
+  }
+
+  return (
+    <>
+      <Modal
+        {...modalConfig}
+        width={isFullscreen ? "100vw" : (modalConfig.width ?? 1400)}
+        {...(isFullscreen ? { full: true } : {})}
+        className={classNames(styles.modal, modalClassName, {
+          [styles.fullscreen]: isFullscreen,
+        })}
+        titleButtonGroup={[
+          {
+            type: "text",
+            icon: isFullscreen ? (
+              <FullscreenExitOutlined />
+            ) : (
+              <FullscreenOutlined />
+            ),
+            title: isFullscreen ? "退出全屏" : "全屏",
+            onClick: () => setIsFullscreen((v) => !v),
+          },
+          ...(modalConfig.titleButtonGroup ?? []),
+        ]}
+      >
+        <div className={classNames(styles.ListModalPanel, className)}>
+          {extraContent}
+          {SearchComponent}
+          <div
+            className={classNames(
+              styles.tableContainer,
+              tableContainerClassName,
+            )}
+          >
+            <ToolBar
+              columns={columns}
+              title={title}
+              tabBarProps={tabBarProps}
+              buttonGroup={buttonGroup}
+              tableTools={tableTools}
+              setShowColumnMgt={setShowColumnMgt}
+              tips={tips}
+              otherTool={otherTool}
+            />
+            <Table
+              className={`${styles.table} ${tableClassName ?? ""}`}
+              {...{
+                scroll: true,
+                serialNumberColumn: true,
+                bordered: true,
+                fillPanel: true,
+                ...tableConfig,
+                columns: _columns,
+              }}
+            />
+          </div>
+        </div>
+      </Modal>
+      <ColumnMgt
+        open={showColumnMgt}
+        onClose={() => setShowColumnMgt(false)}
+        onOk={(columns) => setColumns(cloneDeep(columns))}
+        columns={_columns}
+        defaultColumns={columns}
+        onSelectionChange={columnMgt?.onSelectionChange}
+        {...columnMgt}
+      />
+    </>
+  );
+};
+
+export default ListModalPanel;

package/src/components/Panel/ListPanel/index.module.scss

@@ -87,7 +87,7 @@
 
     width: 100%;
     min-height: 0px;
-    padding: 14px 16px;
+    padding: 10px;
 
     background: var(--cf-surface);
 
@@ -102,23 +102,22 @@
     align-items: center;
     justify-content: space-between;
     column-gap: 10px;
+  }
 
-    padding: 10px;
+  // 页面级页签：无底色容器，页签拆成独立圆角块、块间留空；
+  // margin/radius 需 !important 压过 TabBar 内部的连体分段样式（负 margin + 首尾切角）
+  .headerTabBar {
+    column-gap: 4px;
 
-    background: var(--cf-subtle);
+    > div {
+      margin-left: 0 !important;
+      border-radius: 6px !important;
 
-    border-radius: 8px 8px 0px 0px;
-    border: 1px solid var(--cf-border);
+      background: var(--cf-surface);
+    }
   }
 
   &.hasHeaderTabBar {
-    .search {
-      padding: 10px;
-      margin-top: -10px;
-
-      border-radius: 0px 0px 8px 8px;
-    }
-
     &:not(:has(.search)) {
       .headerTabBarContainer {
         border-radius: 8px;