@creekjs/web-components 1.0.0

package/src/creek-icon/index.tsx

@@ -0,0 +1,34 @@
+import Icon, { createFromIconfontCN } from '@ant-design/icons';
+import type { GetProps } from 'antd';
+import { isEmpty } from 'lodash';
+import { useContext } from 'react';
+
+import { CreekConfigProvider, CreekConfigProviderProps } from '../creek-config-provider';
+
+type CustomIconComponentProps = GetProps<typeof Icon>;
+
+export type CreekIconProps = CustomIconComponentProps & {
+  iconFontCNs?: CreekConfigProviderProps['iconFontCNs'];
+  type?: string;
+  component?: CustomIconComponentProps['component'];
+};
+
+export const CreekIcon = (props: CreekIconProps) => {
+  const { iconFontCNs: iconFontCNsContext } = useContext(CreekConfigProvider.CreekConfigContext);
+  const { component, type, iconFontCNs, ...more } = props;
+
+  const _iconFontCNs = iconFontCNs || iconFontCNsContext;
+
+  if (component) {
+    return <Icon component={component} {...more} />;
+  }
+
+  if (type && !isEmpty(_iconFontCNs)) {
+    const IconFont = createFromIconfontCN({
+      scriptUrl: _iconFontCNs,
+    });
+    return <IconFont type={type} {...more} />;
+  }
+
+  return null;
+};

package/src/creek-keep-alive/index.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const CreekKeepAlive = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return <div>KeepAlive</div>;
+};

package/src/creek-layout/CollapseButton.tsx

@@ -0,0 +1,66 @@
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
+import { createStyles } from "antd-style";
+import { useEffect } from "react";
+import { create } from "zustand";
+
+export type CollapsedButtonProps = {
+  collapsed?: boolean;
+};
+
+export type CollapsedButtonStore = {
+  collapsed: boolean;
+  changeCollapsed: () => void;
+};
+
+const useStyles = createStyles(({ token }) => ({
+  buttonContainer: {
+    padding: token.padding,
+  },
+  iconContainer: {
+    width: "24px",
+    height: "24px",
+    background: "#f3f3f3",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+  },
+}));
+
+export const useCollapsedStore = create<CollapsedButtonStore>((set, get) => {
+  return {
+    collapsed: false,
+    changeCollapsed: () => {
+      const _collapsed = get().collapsed;
+      set({
+        collapsed: !_collapsed,
+      });
+    },
+  };
+});
+
+export const CollapsedButton = (props: CollapsedButtonProps) => {
+  const { collapsed: defaultCollapsed = false } = props;
+  const { styles } = useStyles();
+
+  const { collapsed, changeCollapsed } = useCollapsedStore.getState();
+
+  useEffect(() => {
+    if (defaultCollapsed !== collapsed) {
+      useCollapsedStore.setState({ collapsed: defaultCollapsed });
+    }
+  }, [defaultCollapsed]);
+
+  return (
+    <div
+      className={styles.buttonContainer}
+      onClick={() => {
+        changeCollapsed();
+      }}
+    >
+      <div className={styles.iconContainer}>
+        {collapsed ? <ArrowRightOutlined /> : <ArrowLeftOutlined />}
+      </div>
+    </div>
+  );
+};

package/src/creek-layout/Exception/NotFound.tsx

@@ -0,0 +1,12 @@
+import { Button, Result } from "antd";
+
+export const NotFound = () => {
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={<Button type="primary">Back Home</Button>}
+    />
+  );
+};

package/src/creek-layout/Exception/NotFoundPage.tsx

@@ -0,0 +1,4 @@
+import { NotFound } from "./NotFound";
+export default () => {
+  return <NotFound />;
+};

package/src/creek-layout/Exception/index.tsx

@@ -0,0 +1,10 @@
+export * from "./NotFound";
+
+export type ExceptionProps = {
+  children?: React.ReactNode;
+};
+
+export const Exception = (props: ExceptionProps) => {
+  const { children } = props;
+  return <div>{children}</div>;
+};

package/src/creek-layout/HeaderContent/FullScreen.tsx

@@ -0,0 +1,46 @@
+import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
+import { useFullscreen, useMemoizedFn } from "ahooks";
+import { Tooltip } from "antd";
+import { create } from "zustand";
+
+export type FullScreenStore = {
+  isFullScreen: boolean;
+  changeFullScreen: () => void;
+};
+
+export const useFullScreenStore = create<FullScreenStore>((set, get) => {
+  return {
+    isFullScreen: false,
+    changeFullScreen: () => {
+      const _isFullScreen = get().isFullScreen;
+      set({
+        isFullScreen: !_isFullScreen,
+      });
+    },
+  };
+});
+
+export const FullScreen = () => {
+  const [, { toggleFullscreen }] = useFullscreen(document.body);
+
+  const { isFullScreen, changeFullScreen } = useFullScreenStore.getState();
+
+  const handleFullScreen = useMemoizedFn(() => {
+    toggleFullscreen();
+    changeFullScreen();
+  });
+
+  return (
+    <>
+      {isFullScreen ? (
+        <Tooltip title="退出全屏" placement="top">
+          <FullscreenExitOutlined onClick={handleFullScreen} />
+        </Tooltip>
+      ) : (
+        <Tooltip title="全屏" placement="top">
+          <FullscreenOutlined onClick={handleFullScreen} />
+        </Tooltip>
+      )}
+    </>
+  );
+};

package/src/creek-layout/HeaderContent/UserInfo.tsx

@@ -0,0 +1,54 @@
+import { LogoutOutlined } from "@ant-design/icons";
+import { Avatar, Dropdown, DropDownProps, Space } from "antd";
+import { createStyles } from "antd-style";
+
+const useStyles = createStyles(({ token }) => ({
+  avatarContainer: {
+    backgroundColor: token.colorPrimary,
+    width: 24,
+    height: 24,
+  },
+  userInfoDropdownOverlay: {
+    ".ant-dropdown-menu": {
+      padding: "8px 0",
+    },
+    ".ant-dropdown-menu-item": {
+      ".ant-dropdown-menu-item-icon": {
+        fontSize: "18px",
+        marginRight: "8px",
+      },
+    },
+  },
+}));
+
+export const UserInfo = () => {
+  const { styles } = useStyles();
+
+  const userInfoMenu: DropDownProps["menu"] = {
+    items: [
+      {
+        key: "logout",
+        label: (
+          <Space size={8}>
+            <LogoutOutlined />
+            <span>退出登录</span>
+          </Space>
+        ),
+        onClick: () => {},
+      },
+    ],
+  };
+  return (
+    <Dropdown
+      arrow
+      placement="bottom"
+      overlayClassName={styles.userInfoDropdownOverlay}
+      menu={userInfoMenu}
+    >
+      <Space size={4} align="center">
+        <Avatar className={styles.avatarContainer}>C</Avatar>
+        <span>Creek</span>
+      </Space>
+    </Dropdown>
+  );
+};

package/src/creek-layout/HeaderContent/index.tsx

@@ -0,0 +1,27 @@
+import { Divider, Flex, Space } from 'antd';
+import { createStyles } from 'antd-style';
+
+import { FullScreen } from './FullScreen';
+import { UserInfo } from './UserInfo';
+
+const useStyles = createStyles(({}) => ({
+  headerContentContainer: {
+    color: '#fff',
+  },
+  dividerContainer: {
+    backgroundColor: '#9b9999',
+  },
+}));
+
+export const HeaderContent = () => {
+  const { styles } = useStyles();
+  return (
+    <Flex justify="space-between" className={styles.headerContentContainer}>
+      <span />
+      <Space split={<Divider type="vertical" className={styles.dividerContainer} />}>
+        <FullScreen />
+        <UserInfo />
+      </Space>
+    </Flex>
+  );
+};

package/src/creek-layout/index.tsx

@@ -0,0 +1,98 @@
+import { ProLayout, ProLayoutProps } from "@ant-design/pro-components";
+import { useMemoizedFn } from "ahooks";
+import { theme } from "antd";
+import classnames from "classnames";
+
+import { CollapsedButton, useCollapsedStore } from "./CollapseButton";
+import { Exception } from "./Exception";
+import { HeaderContent } from "./HeaderContent";
+
+export type LayoutProps = ProLayoutProps & {
+  runtimeConfig: ProLayoutProps;
+  userConfig?: ProLayoutProps;
+  navigate?: (path?: string | number) => void;
+  initialInfo?: {
+    initialState: any;
+    loading: boolean;
+    setInitialState: () => void;
+  };
+};
+
+export const CreekLayout = (props: LayoutProps) => {
+  const {
+    route,
+    userConfig,
+    runtimeConfig,
+    children,
+    location,
+    navigate,
+    ...more
+  } = props;
+
+  const { useToken } = theme;
+  const { token } = useToken();
+
+  const { collapsed } = useCollapsedStore();
+
+  const menuItemRender: ProLayoutProps["menuItemRender"] = useMemoizedFn(
+    (itemProps, defaultDom) => {
+      return (
+        <span
+          onClick={() => {
+            if (navigate) {
+              navigate(itemProps.path);
+            }
+          }}
+        >
+          {defaultDom}
+        </span>
+      );
+    }
+  );
+
+  return (
+    <ProLayout
+      className={classnames("creek-layout-container", userConfig?.className)}
+      layout="mix"
+      route={route}
+      title={userConfig?.title}
+      siderWidth={212}
+      location={location}
+      menuItemRender={menuItemRender}
+      headerContentRender={() => {
+        return <HeaderContent />;
+      }}
+      token={{
+        header: {
+          colorBgHeader: "#2c2c2c",
+          colorHeaderTitle: "#fff",
+          colorTextMenuSelected: "#fff",
+          heightLayoutHeader: 48,
+        },
+        sider: {
+          colorMenuBackground: "#fff",
+          colorBgMenuItemSelected: "transparent",
+          colorTextMenuActive: token.colorPrimary,
+          colorTextMenuSelected: token.colorPrimary,
+          colorTextMenuItemHover: token.colorPrimary,
+          colorTextMenu: "#333",
+        },
+        pageContainer: {
+          paddingBlockPageContainerContent: 0,
+          paddingInlinePageContainerContent: 0,
+        },
+      }}
+      fixSiderbar
+      fixedHeader
+      collapsed={collapsed}
+      collapsedButtonRender={(collapsed) => {
+        return <CollapsedButton collapsed={collapsed} />;
+      }}
+      {...more}
+    >
+      <Exception>{children}</Exception>
+    </ProLayout>
+  );
+};
+
+export * from "./Exception";

package/src/creek-loading/index.tsx

@@ -0,0 +1,35 @@
+import { Spin } from 'antd';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export class Loading {
+  private static container: HTMLDivElement | null = null;
+  private static root: ReturnType<typeof createRoot> | null = null;
+
+  private static createContainer() {
+    if (this.container) return this.container;
+
+    this.container = document.createElement('div');
+    document.body.appendChild(this.container);
+    this.root = createRoot(this.container);
+    return this.container;
+  }
+
+  static open(config?: React.ComponentProps<typeof Spin>) {
+    this.createContainer();
+
+    this.root?.render(<Spin {...config} fullscreen></Spin>);
+  }
+
+  static close() {
+    if (this.root) {
+      this.root.unmount();
+
+      if (this.container) {
+        document.body.removeChild(this.container);
+        this.container = null;
+        this.root = null;
+      }
+    }
+  }
+}

package/src/creek-search/CreekSearch.tsx

@@ -0,0 +1,59 @@
+import { ParamsType, ProColumnType } from '@ant-design/pro-components';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
+
+import { CreekSearchProvider } from './CreekSearchContext';
+import { CreekFilterDisplay } from './CreekSearchFilterDisplay';
+import { CreekSearchInput } from './CreekSearchInput';
+
+const useStyles = createStyles(
+  (
+    { token, prefixCls },
+    props: {
+      justify: 'start' | 'end';
+    },
+  ) => {
+    return {
+      creekSearchContainer: {
+        padding: '20px 20px 0 20px',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: props.justify === 'end' ? 'flex-end' : 'flex-start',
+      },
+
+      creekSearchContainerEnd: {
+        [`& .${prefixCls}-tag`]: {
+          marginInlineEnd: 0,
+        },
+      },
+
+      creekSearchFilterDisplay: {
+        marginTop: '10px',
+      },
+    };
+  },
+);
+
+export type CreekSearchProps<T> = {
+  columns: ProColumnType<T>[];
+  onSubmit?: (values: Record<string, any>) => void;
+  justify?: 'start' | 'end';
+};
+
+export const CreekSearch = <T extends ParamsType>(props: CreekSearchProps<T>) => {
+  const { columns = [], onSubmit, justify = 'start' } = props;
+
+  const { styles } = useStyles({
+    justify,
+  });
+
+  return (
+    <CreekSearchProvider columns={columns} onSubmit={onSubmit}>
+      <div className={classnames(styles.creekSearchContainer, justify === 'end' && styles.creekSearchContainerEnd)}>
+        <CreekSearchInput />
+        <CreekFilterDisplay className={styles.creekSearchFilterDisplay} />
+      </div>
+    </CreekSearchProvider>
+  );
+};