@creekjs/web-components 1.0.5 → 1.0.6

package/src/creek-layout/index.tsx

@@ -1,36 +1,68 @@
 import { ProLayout, ProLayoutProps } from '@ant-design/pro-components';
 import { useMemoizedFn } from 'ahooks';
 import { theme } from 'antd';
+import _ from 'lodash';
+
 import classnames from 'classnames';
 
-import { FullScreen, UserInfo } from './ActionRender';
+import { useT } from '@creekjs/i18n/react';
+
+import { CreekKeepAlive, CreekKeepAliveProps } from '../creek-keep-alive';
+import { CreekLocaleButton } from '../creek-locale-button';
+import { GlobalScrollbarStyle } from '../creek-style/scrollbar';
+import { FullScreen, LayoutSettings } from './ActionRender';
 import { CollapsedButton, useCollapsedStore } from './CollapseButton';
 import { Exception } from './Exception';
+import { useLayoutSettingsStore } from './useLayoutSettingsStore';
 
 export type LayoutProps = ProLayoutProps & {
   runtimeConfig: ProLayoutProps;
   userConfig?: ProLayoutProps;
   navigate?: (path?: string | number) => void;
   showFullScreen?: boolean;
-  userInfo?: {
-    name?: React.ReactNode;
-    avatar?: string;
-    menu?: any;
-  };
+  showLocaleButton?: boolean;
+  showSettingsButton?: boolean;
   initialInfo?: {
     initialState: any;
     loading: boolean;
     setInitialState: () => void;
   };
+  keepAlive?: boolean | CreekKeepAliveProps;
+  extraActions?: React.ReactNode[];
+};
+
+const MenuName = ({ name, path }: { name: string; path?: string }) => {
+  const t = useT();
+  const key = !path || path === '/' ? 'menu.home' : `menu${path.replace(/\//g, '.')}`;
+  return <>{t(key, name)}</>;
 };
 
 export const CreekLayout = (props: LayoutProps) => {
-  const { route, userConfig, runtimeConfig, children, location, navigate, showFullScreen, userInfo, ...more } = props;
+  const { route, userConfig, runtimeConfig, children, location, navigate, showFullScreen, showLocaleButton = true, showSettingsButton = true, keepAlive = true, extraActions = [], ...more } = props;
 
   const { useToken } = theme;
   const { token } = useToken();
 
   const { collapsed } = useCollapsedStore();
+  const settingsStore = useLayoutSettingsStore();
+
+  const actualShowFullScreen = settingsStore.showFullScreen ?? showFullScreen ?? false;
+  const actualShowLocaleButton = settingsStore.showLocaleButton ?? showLocaleButton ?? true;
+  const colorPrimary = settingsStore.colorPrimary || token.colorPrimary;
+  const actualKeepAlive = settingsStore.keepAlive ?? keepAlive ?? true;
+
+  const menuDataRender = useMemoizedFn((menuData: any[]) => {
+    const mapMenu = (items: any[]): any[] => {
+      return items.map((item) => {
+        return {
+          ...item,
+          name: <MenuName name={item.name} path={item.path} />,
+          children: item.children ? mapMenu(item.children) : undefined,
+        };
+      });
+    };
+    return mapMenu(menuData);
+  });
 
   const menuItemRender: ProLayoutProps['menuItemRender'] = useMemoizedFn((itemProps, defaultDom) => {
     return (
@@ -46,41 +78,73 @@ export const CreekLayout = (props: LayoutProps) => {
     );
   });
 
-  const actions: React.ReactNode[] = [];
-  if (showFullScreen) {
+  const getTabTitle = useMemoizedFn((pathname: string) => {
+    const findTitle = (routes: any[]): string | React.ReactNode | undefined => {
+      for (const r of routes) {
+        if (r.path === pathname) return r.name || r.title;
+        if (r.children) {
+          const found = findTitle(r.children);
+          if (found) return found;
+        }
+      }
+      return undefined;
+    };
+    return findTitle(route?.routes || []) || pathname;
+  });
+
+  const actions: React.ReactNode[] = [...extraActions];
+
+  if (actualShowFullScreen) {
     actions.push(<FullScreen key="full-screen" />);
   }
-  if (userInfo) {
-    actions.push(<UserInfo key="user-info" {...userInfo} />);
+
+  if (actualShowLocaleButton) {
+    actions.push(<CreekLocaleButton key="locale-button" />);
   }
 
-  return (
+  if (showSettingsButton) {
+    actions.push(
+      <LayoutSettings
+        key="settings"
+        defaultShowFullScreen={showFullScreen}
+        defaultShowLocaleButton={showLocaleButton}
+        defaultKeepAlive={_.isBoolean(keepAlive) ? keepAlive : true}
+      />
+    );
+  }
+
+  const keepAliveProps = _.isBoolean(keepAlive) ? {} : keepAlive;
+
+  const _userConfig = { ...userConfig, ...runtimeConfig };
+
+  const layoutContent = (
     <ProLayout
-      className={classnames('creek-layout-container', userConfig?.className)}
+      className={classnames('creek-layout-container', _userConfig?.className)}
       route={route}
-      title={userConfig?.title}
-      siderWidth={212}
+      title={_userConfig?.title}
+      siderWidth={200}
       location={location}
+      menuDataRender={menuDataRender}
       menuItemRender={menuItemRender}
       actionsRender={() => actions}
       token={{
         header: {
           colorBgHeader: '#fff',
           colorHeaderTitle: 'rgba(0, 0, 0, 0.80);',
-          colorTextMenuSelected: token.colorPrimary,
+          colorTextMenuSelected: colorPrimary,
           heightLayoutHeader: 48,
         },
         sider: {
           colorMenuBackground: '#f7f8fa',
           colorBgMenuItemSelected: 'transparent',
-          colorTextMenuActive: token.colorPrimary,
-          colorTextMenuSelected: token.colorPrimary,
-          colorTextMenuItemHover: token.colorPrimary,
+          colorTextMenuActive: colorPrimary,
+          colorTextMenuSelected: colorPrimary,
+          colorTextMenuItemHover: colorPrimary,
           colorTextMenu: '#333',
         },
         pageContainer: {
-          paddingBlockPageContainerContent: token.padding,
-          paddingInlinePageContainerContent: token.padding,
+          paddingBlockPageContainerContent: 0,
+          paddingInlinePageContainerContent: 0,
           colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);',
         },
       }}
@@ -92,9 +156,12 @@ export const CreekLayout = (props: LayoutProps) => {
       }}
       {...more}
     >
-      <Exception>{children}</Exception>
+      <GlobalScrollbarStyle />
+      <Exception>{actualKeepAlive ? <CreekKeepAlive getTabTitle={getTabTitle} {...keepAliveProps} /> : children}</Exception>
     </ProLayout>
   );
+
+  return layoutContent;
 };
 
 export * from './Exception';

package/src/creek-layout/useLayoutSettingsStore.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type LayoutSettingsStore = {
+  colorPrimary?: string;
+  showFullScreen?: boolean;
+  showLocaleButton?: boolean;
+  keepAlive?: boolean;
+  setSettings: (settings: Partial<LayoutSettingsStore>) => void;
+};
+
+export const useLayoutSettingsStore = create<LayoutSettingsStore>()(
+  persist(
+    (set) => ({
+      colorPrimary: undefined,
+      showFullScreen: true,
+      showLocaleButton: true,
+      keepAlive: true,
+      setSettings: (settings) => set((state) => ({ ...state, ...settings })),
+    }),
+    {
+      name: 'creek-layout-settings',
+    }
+  )
+);

package/src/creek-locale-button/index.tsx

@@ -0,0 +1,42 @@
+import { GlobalOutlined } from '@ant-design/icons';
+import { Dropdown, Space, Typography } from 'antd';
+
+import { useT } from '@creekjs/i18n/react';
+
+import { useAppLocale } from '../creek-config-provider';
+
+export const CreekLocaleButton = () => {
+  const t = useT();
+
+  const { locale, changeLocale } = useAppLocale();
+
+  const items = [
+    {
+      key: 'zh-CN',
+      label: t('creek-locale-button.index.jianTiZhongWen', '简体中文'),
+      disabled: locale === 'zh-CN',
+    },
+    {
+      key: 'en-US',
+      label: 'English',
+      disabled: locale === 'en-US',
+    },
+  ];
+
+  const currentLabel = items.find((item) => item.key === locale)?.label || 'Language';
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        onClick: (e) => changeLocale(e.key),
+      }}
+      placement="bottomRight"
+    >
+      <Space size="small" align="center">
+        <GlobalOutlined />
+        <Typography.Text>{currentLabel}</Typography.Text>
+      </Space>
+    </Dropdown>
+  );
+};

package/src/creek-page-container/index.tsx

@@ -0,0 +1,32 @@
+import { PageContainer, PageContainerProps } from '@ant-design/pro-components';
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+import classnames from 'classnames';
+
+const useStyles = createStyles(({ token }) => ({
+  container: {
+    padding: token.padding,
+  },
+}));
+
+export type CreekPageContainerProps = PageContainerProps;
+
+export const CreekPageContainer: React.FC<CreekPageContainerProps> = (props) => {
+  const { header, className, children, ...rest } = props;
+  const { styles } = useStyles();
+
+  return (
+    <PageContainer
+      header={{
+        title: null, // 默认没有标题
+        breadcrumb: {}, // 保留面包屑配置能力
+        ...header, // 允许外部覆盖
+      }}
+      className={classnames(styles.container, className)}
+      {...rest}
+    >
+      {children}
+    </PageContainer>
+  );
+};

package/src/creek-style/index.ts

@@ -0,0 +1 @@
+export * from './scrollbar';

package/src/creek-style/scrollbar.ts

@@ -0,0 +1,29 @@
+import { createGlobalStyle } from 'antd-style';
+
+export const GlobalScrollbarStyle = createGlobalStyle(({ theme: token }) => {
+  return {
+    '*': {
+      scrollbarWidth: 'auto',
+      scrollbarColor: `${token.colorFillSecondary} transparent !important`,
+    },
+    /* Webkit (Chrome, Safari, Edge) 滚动条样式 */
+    '& *::-webkit-scrollbar': {
+      width: '6px !important',
+      height: '6px !important',
+      backgroundColor: 'transparent !important',
+    },
+
+    '& *::-webkit-scrollbar-thumb': {
+      backgroundColor: `${token.colorFillSecondary} !important`,
+      borderRadius: '3px !important',
+      transition: 'all 0.3s',
+      '&:hover': {
+        backgroundColor: `${token.colorFill} !important`,
+      },
+    },
+
+    '& *::-webkit-scrollbar-track': {
+      backgroundColor: 'transparent !important',
+    },
+  };
+});

package/src/creek-table/SearchTable.tsx

@@ -1,106 +1,159 @@
 import { ParamsType, ProTable } from '@ant-design/pro-components';
-import { theme } from 'antd';
+import { useSafeState } from 'ahooks';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
-import _ from 'lodash';
 import { useRef } from 'react';
 
-import { useAutoWidthColumns, useTableScrollHeight } from './hooks';
-import { TableOptionRender } from './TableOptionRender';
-import { toolBarRender } from './toolBarRender';
+import { GlobalScrollbarStyle } from '../creek-style';
+import { useAutoWidthColumns, useEllipsisColumns, useIndexColumn, useResizableColumns, useTableOptions, useTableScrollHeight } from './hooks';
+
 import { CreekTableProps } from './type';
 
-const useStyles = createStyles(({ css, token }, { scrollY, prefixCls }: { scrollY?: number | string; prefixCls: string }) => {
+export type SearchTableStyleOptions = {
+  prefixCls?: string;
+  scrollY?: number;
+  tableContainerHeight?: number;
+  tableHeight?: number;
+  bordered?: boolean;
+  hasHeaderTitle?: boolean;
+  hasScroll?: boolean;
+};
+
+const useStyles = createStyles(({ token }, options: SearchTableStyleOptions) => {
+  const { prefixCls = 'ant', scrollY, tableHeight, bordered, hasHeaderTitle, tableContainerHeight, hasScroll } = options;
   return {
-    'creek-table-container': css`
-      .${prefixCls}-table-body {
-        overflow-y: auto !important;
-        min-height: ${typeof scrollY === 'number' ? `${scrollY}px` : (scrollY ?? 'auto')};
-
-        /* Firefox 滚动条样式 */
-        scrollbar-width: thin;
-        scrollbar-color: ${token.colorFillSecondary} transparent;
-      }
-
-      /* Webkit (Chrome, Safari, Edge) 滚动条样式 */
-      & *::-webkit-scrollbar {
-        width: 6px !important;
-        height: 6px !important;
-        background-color: transparent !important;
-      }
-
-      & *::-webkit-scrollbar-thumb {
-        background-color: ${token.colorFillSecondary} !important;
-        border-radius: 3px !important;
-        transition: all 0.3s;
-      }
-
-      & *::-webkit-scrollbar-thumb:hover {
-        background-color: ${token.colorFill} !important;
-      }
-
-      & *::-webkit-scrollbar-track {
-        background-color: transparent !important;
-      }
-
-      .${prefixCls}-pagination {
-        .${prefixCls}-pagination-total-text {
-          flex: 1;
-        }
-      }
-    `,
+    'creek-table-container': {
+      overflow: 'hidden',
+      position: 'relative',
+      height: tableHeight ? `${tableHeight}px` : 'auto',
+      backgroundColor: token.colorBgContainer,
+      [`.${prefixCls}-table`]: {
+        minHeight: `${tableContainerHeight}px`,
+      },
+      [`.${prefixCls}-table-container`]: {
+        borderBottom: 'none',
+        overflow: 'hidden'
+      },
+     
+      [`.${prefixCls}-table-header`]: {
+        borderRight: (bordered && hasScroll) ? `1px solid ${token.colorBorderSecondary}` : 'none',
+      },
+      [`.${prefixCls}-table-body`]: {
+        overflowY: 'auto',
+        maxHeight: `${scrollY}px`,
+        borderRight: (bordered && hasScroll) ? `1px solid ${token.colorBorderSecondary}` : 'none',
+      },
+      // 兼容非 scroll.y 模式下的 table 容器
+      [`.${prefixCls}-table-content`]: {
+        overflowY: 'hidden',
+        maxHeight: scrollY ? `${scrollY}px` : undefined,
+      },
+
+      [`.${prefixCls}-table-cell-scrollbar`]: {
+        boxShadow: bordered ? 'none!important' : 'inherit',
+        borderInlineEnd: bordered ? `none!important` : 'none',
+        display: hasScroll ? 'table-cell' : 'none',
+        width: hasScroll ? 'initial' : '0px!important',
+        minWidth: hasScroll ? 'initial' : '0px!important',
+        maxWidth: hasScroll ? 'initial' : '0px!important',
+        padding: hasScroll ? 'initial' : '0px!important',
+        margin: hasScroll ? 'initial' : '0px!important',
+      },
+
+      [`.${prefixCls}-pagination`]: {
+        [`.${prefixCls}-pagination-total-text`]: {
+          flex: 1,
+        },
+      },
+      [`.${prefixCls}-pro-table-search`]: {
+        marginBlockEnd: 0,
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
+      },
+
+      [`.${prefixCls}-pro-query-filter-container`]: {
+        [`.${prefixCls}-pro-query-filter`]: {
+          padding: token.paddingXS,
+        },
+      },
+
+      // 如果没有 headerTitle，toolbar 展示在 headerTitle 的区域
+      [`.${prefixCls}-pro-table-list-toolbar-right`]: !hasHeaderTitle
+        ? {
+            flex: 1,
+          }
+        : {},
+      [`.${prefixCls}-pro-table-list-toolbar-setting-items`]: !hasHeaderTitle
+        ? {
+            marginLeft: 'auto',
+          }
+        : {},
+    },
   };
 });
 
 // 独立的 ProTable 组件
 export const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {
-  const { columns, prefixCls = 'ant', autoAddFilterForColumn = true, className, optionsRender, tableViewRender, pagination, pageFixedBottom = true, pageFixedBottomConfig, ...restProps } = props;
+  const {
+    columns,
+    prefixCls = 'ant',
+    className,
+    optionsRender,
+    tableViewRender,
+    pagination,
+    pageFixedBottom = true,
+    pageFixedBottomConfig,
+    resizable = true,
+    bordered = true,
+    options,
+    size,
+    headerTitle,
+    showIndex = true,
+    ...restProps
+  } = props;
 
   const proTableRef = useRef<HTMLDivElement>(null);
 
-  const { token } = theme.useToken();
+  // 状态提升：管理列宽调整状态，以便 useAutoWidthColumns 能感知到
+  const [resizedWidths, setResizedWidths] = useSafeState<Record<string, number>>({});
+
+  // 使用自定义 Hook 管理 options 和 size
+  const { finalOptions, tableSize, finalOptionsRender } = useTableOptions<T, U, ValueType>(options, size, optionsRender);
+
+  const columnsWithIndex = useIndexColumn<T, ValueType>(columns, showIndex);
 
-  // // 使用自定义 hook 处理工具栏的自适应功能
-  // const { shouldCollapse } = useAdaptiveToolBar({
-  //   containerRef: proTableRef,
-  //   prefixCls,
-  // });ƒ
+  // 处理 columns，默认开启 ellipsis
+  const processedColumns = useEllipsisColumns(columnsWithIndex);
 
-  const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns(columns, proTableRef);
+  const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns<T, ValueType>(processedColumns, proTableRef, resizedWidths, bordered, tableSize);
 
-  const scrollY = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, token.paddingContentVerticalLG, pageFixedBottomConfig?.bottomFix || token.padding);
+  const { columns: resizableColumns, components } = useResizableColumns<T, ValueType>(adaptiveColumns, resizable, resizedWidths, setResizedWidths, proTableRef);
 
-  const { styles } = useStyles({ scrollY, prefixCls });
+  const { scrollY, tableHeight, tableContainerHeight, hasScroll } = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, pageFixedBottomConfig?.bottomFix);
+
+  const { styles } = useStyles({ scrollY, tableHeight, prefixCls, bordered, hasHeaderTitle: !!headerTitle, tableContainerHeight, hasScroll });
 
-  console.log('scrollY', scrollY);
 
   return (
     <div ref={proTableRef}>
+      <GlobalScrollbarStyle />
+      {/* 自定义滚动条 */}
       <ProTable<T, U, ValueType>
-        {...props}
+        components={components}
+        headerTitle={headerTitle}
+        options={finalOptions}
+        optionsRender={finalOptionsRender}
+        size={tableSize}
+        {...restProps}
         className={classnames(styles['creek-table-container'], className)}
-        columns={adaptiveColumns}
+        columns={resizableColumns}
+        bordered={bordered}
         scroll={{
-          x: totalWidth,
-          y: scrollY ?? restProps.scroll?.y,
+          y: hasScroll ? scrollY || restProps.scroll?.y : undefined,
+          x: totalWidth ?? restProps.scroll?.x,
         }}
         toolbar={{
           ...restProps.toolbar,
         }}
-        optionsRender={(defaultProps, dom) => {
-          return _.isFunction(optionsRender)
-            ? optionsRender(defaultProps, dom)
-            : restProps?.options
-              ? [<TableOptionRender key="option" defaultDom={dom} importConfig={restProps?.options?.importConfig} exportConfig={restProps?.options?.exportConfig} />]
-              : [];
-        }}
-        toolBarRender={(...args) => {
-          return toolBarRender({ shouldCollapse: false, restProps, args });
-        }}
-        // 在表格内容区上方显示筛选条件
-        tableViewRender={(defaultProps, defaultDom) => {
-          return _.isFunction(tableViewRender) ? <>{tableViewRender(defaultProps, defaultDom)}</> : defaultDom;
-        }}
       />
     </div>
   );

package/src/creek-table/components/DensityIcon.tsx

@@ -0,0 +1,63 @@
+import { ColumnHeightOutlined } from '@ant-design/icons';
+import { ProTableProps } from '@ant-design/pro-components';
+import { Dropdown, MenuProps, Tooltip } from 'antd';
+import React from 'react';
+
+import { useT } from '@/utils/i18n';
+
+export type SizeType = ProTableProps<any, any>['size'];
+
+interface DensityIconProps {
+  tableSize: SizeType;
+  setTableSize: (size: SizeType) => void;
+}
+
+export const DensityIcon: React.FC<DensityIconProps> = ({ tableSize, setTableSize }) => {
+  const t = useT();
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'large',
+      label: t('creek-table.components.DensityIcon.kuanSong', '宽松'),
+      onClick: () => setTableSize('large'),
+    },
+    {
+      key: 'middle',
+      label: t('creek-table.components.DensityIcon.zhongDeng', '中等'),
+      onClick: () => setTableSize('middle'),
+    },
+    {
+      key: 'small',
+      label: t('creek-table.components.DensityIcon.jinCou', '紧凑'),
+      onClick: () => setTableSize('small'),
+    },
+  ];
+
+  const getTitle = () => {
+    switch (tableSize) {
+      case 'large':
+        return t('creek-table.components.DensityIcon.biaoGeMiDu(KuanSong)', '表格密度 (宽松)');
+      case 'middle':
+        return t('creek-table.components.DensityIcon.biaoGeMiDu(ZhongDeng)', '表格密度 (中等)');
+      case 'small':
+        return t('creek-table.components.DensityIcon.biaoGeMiDu(JinCou)', '表格密度 (紧凑)');
+      default:
+        return t('creek-table.components.DensityIcon.biaoGeMiDu', '表格密度');
+    }
+  };
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        selectedKeys: [tableSize || 'large'],
+        selectable: true,
+      }}
+      trigger={['click']}
+    >
+      <Tooltip title={getTitle()}>
+        <ColumnHeightOutlined style={{ fontSize: 16, cursor: 'pointer' }} />
+      </Tooltip>
+    </Dropdown>
+  );
+};