@tsingroc/tsingroc-components 3.13.4 → 3.14.1

package/src/components/Sidebar.tsx

@@ -0,0 +1,250 @@
+import {
+  BarChartOutlined,
+  LeftOutlined,
+  RightOutlined,
+  SwapOutlined,
+  TeamOutlined,
+} from "@ant-design/icons";
+import { Button, Flex, Layout, Menu, type MenuProps } from "antd";
+import { type CSSProperties, type Key, type ReactNode, useState } from "react";
+import { createStyles } from "antd-style";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { AuthCheck, AuthProvider } from "./Auth";
+import UserButton from "./UserButton";
+
+export type MenuItem = Required<MenuProps>["items"][number];
+
+const menuItem = (
+  label: ReactNode,
+  key: Key,
+  icon?: ReactNode,
+  children?: MenuItem[],
+): MenuItem => ({ key, icon, children, label });
+
+/** 默认菜单项配置，可以作为参考或默认值 */
+const DEFAULT_MENU_ITEMS: MenuItem[] = [
+  menuItem("数据看板", "data-board", <BarChartOutlined />, [
+    menuItem("宏观数据", "macro-data"),
+    menuItem("合约看板", "contract-overview"),
+    menuItem("数据复盘", "data-review"),
+  ]),
+  menuItem("交易管理", "trade-management", <SwapOutlined />, [
+    menuItem("日前交易", "day-ahead-trade"),
+    menuItem("现货交易", "spot-trade"),
+    menuItem("中长期交易", "long-term-trade"),
+  ]),
+  menuItem("合约管理", "customer-management", <TeamOutlined />, [
+    menuItem("客户总览", "customer-overview"),
+    menuItem("售电合约管理", "sales-contract"),
+    menuItem("供应商管理", "supplier-management"),
+    menuItem("购电合约管理", "purchase-contract"),
+  ]),
+];
+
+export interface SidebarProps extends MenuProps {
+  /**
+   * 侧边栏的宽度。
+   * @default 260
+   */
+  width?: number | string;
+  /**
+   * 是否启用伸缩功能。
+   * @default false
+   */
+  collapsible?: boolean;
+  /**
+   * 网站 logo 的 URL。
+   *
+   * 建议导入图片，然后填入导入得到的地址，而不要硬编码地址。
+   */
+  logo?: string;
+  /** 侧边栏的标题。*/
+  title?: string;
+  /**
+   * 侧边栏头部（logo 和标题部分）的高度。
+   * @default 116
+   */
+  headerHeight?: number | string;
+  /**
+   * 侧边栏的头部（logo 和标题部分）。设置了该属性时，
+   * {@linkcode SidebarProps.logo | logo}、
+   * {@linkcode SidebarProps.title | title} 和
+   * {@linkcode SidebarProps.headerHeight | headerHeight} 将失去作用。
+   * 参数 `collapsed` 表示侧边栏是否收起。
+   * 填 `null` 可以隐藏掉默认值（与 `undefined` 不同！）。
+   */
+  header?: ((collapsed: boolean) => ReactNode) | null;
+  /**
+   * 菜单项配置，默认与 TMS 系统的菜单相同。
+   *
+   * 该属性以及其余属性的用法可参考 [`Menu` 组件的文档][1]。
+   *
+   * [1]: https://ant-design.antgroup.com/components/menu-cn
+   */
+  items?: MenuItem[];
+  /** 当前选中的菜单项 key 数组。 */
+  selectedKeys?: string[];
+  /** 当前展开的子菜单 key 数组。 */
+  openKeys?: string[];
+  /** 菜单项被选中时的回调函数。 */
+  onSelect?: MenuProps["onSelect"];
+  /** 子菜单展开/收起时的回调函数。 */
+  onOpenChange?: MenuProps["onOpenChange"];
+  /**
+   * 侧边栏底部的额外内容。参数 `collapsed` 表示侧边栏是否收起。
+   * 默认情况下使用 {@linkcode UserButton} 组件。
+   * 填 `null` 可以隐藏掉默认值（与 `undefined` 不同！）。
+   * @default (collapsed) => <UserButton compact={collapsed} />
+   */
+  footer?: ((collapsed: boolean) => ReactNode) | null;
+  /** 额外的 `className`。*/
+  className?: string;
+  /** 额外的 CSS 样式。*/
+  style?: CSSProperties;
+}
+
+const useStyles = createStyles(
+  ({ token, css, cx, prefixCls }, collapsed: boolean) => {
+    const sidebarHeader = css`
+      margin-top: ${token.marginXXS}px;
+
+      > img {
+        width: 40%;
+      }
+
+      > h1 {
+        margin: ${collapsed ? 0 : token.marginXXS}px 0 0 0;
+        font-size: ${collapsed ? 0 : token.fontSize}px;
+        font-weight: normal;
+        line-height: 1;
+        transition:
+          margin-top ${token.motionDurationMid},
+          font-size ${token.motionDurationMid};
+      }
+    `;
+    const sidebarMenu = css`
+      flex-basis: 100%;
+      overflow-y: auto;
+    `;
+    const sidebarBtn = css`
+      position: absolute;
+      top: 75%;
+      right: 0;
+      transform: translate(50%, -50%);
+
+      font-size: ${token.sizeSM}px;
+
+      transition: opacity ${token.motionDurationMid};
+      opacity: 0%;
+    `;
+    const sidebar = css`
+      position: relative;
+      box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
+
+      > .${prefixCls}-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* 为了提高权重 */
+      & .${cx(sidebarBtn)} {
+        width: ${token.controlHeightXS}px;
+      }
+      & .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
+        border-inline-end: none;
+      }
+
+      &:hover .${cx(sidebarBtn)} {
+        opacity: 100%;
+      }
+    `;
+    return {
+      sidebar,
+      sidebarHeader,
+      sidebarMenu,
+      sidebarBtn,
+    };
+  },
+);
+
+/**
+ * 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
+ * 如果没有指定 {@linkcode SidebarProps.footer | footer} 属性，
+ * 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
+ * 才能正常显示边栏底部的用户信息按钮。
+ *
+ * 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。
+ *
+ * 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/layout-cn
+ * [2]: https://ant-design.antgroup.com/components/menu-cn
+ */
+function Sidebar(props: SidebarProps) {
+  const {
+    width = 260,
+    collapsible = false,
+    logo,
+    title,
+    headerHeight = 116,
+    header,
+    items = DEFAULT_MENU_ITEMS,
+    footer = (collapsed) => (
+      <UserButton
+        compact={collapsed}
+        style={{ marginBottom: token.paddingSM }}
+      />
+    ),
+    className,
+    style,
+    ...rest
+  } = props;
+
+  const [collapsed, setCollapsed] = useState(false);
+  const { cx, styles, theme: token } = useStyles(collapsed);
+
+  return (
+    <Layout.Sider
+      theme="light"
+      width={width}
+      collapsed={collapsible ? collapsed : false}
+      collapsible={collapsible}
+      trigger={null}
+      className={cx(styles.sidebar, className)}
+      style={style}
+    >
+      {header === null ? null : header ? (
+        header(collapsed)
+      ) : (
+        <Flex
+          vertical
+          align="center"
+          justify="center"
+          className={cx(styles.sidebarHeader)}
+          style={{ height: headerHeight }}
+        >
+          <img alt="logo" src={logo} />
+          <h1 style={{ color: token.colorText }}>{title}</h1>
+        </Flex>
+      )}
+      <Menu
+        mode="inline"
+        items={items}
+        inlineCollapsed={collapsible ? collapsed : false}
+        className={cx(styles.sidebarMenu)}
+        {...rest}
+      />
+      {footer === null ? null : footer?.(collapsed)}
+      {collapsible && (
+        <Button
+          className={cx(styles.sidebarBtn)}
+          icon={collapsed ? <RightOutlined /> : <LeftOutlined />}
+          onClick={() => setCollapsed(!collapsed)}
+        />
+      )}
+    </Layout.Sider>
+  );
+}
+
+export default Sidebar;

package/src/components/TsingrocDatePicker.tsx

@@ -0,0 +1,103 @@
+import {
+  type DatePickerProps as AntdDatePickerProps,
+  Button,
+  type ButtonProps,
+  DatePicker,
+  Space,
+} from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import type { Dayjs } from "dayjs";
+import type { SpaceCompactProps } from "antd/es/space/Compact";
+import { useState } from "react";
+
+export interface DatePickerProps extends Omit<SpaceCompactProps, "onChange"> {
+  value?: Dayjs;
+  onChange?: (value: Dayjs) => void;
+  /**
+   * 日期的单位。
+   * @default "month"
+   */
+  dataType?: "day" | "week" | "month" | "year";
+  /**
+   * 是否禁用。
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 左右按钮的 `props`，见 [Ant Design 的 `Button` API][1]。
+   *
+   * [1]: https://ant-design.antgroup.com/components/button-cn#api
+   */
+  buttonProps?: ButtonProps;
+  /**
+   * 日期选择器的 `props`，见 [Ant Design 的 `DatePicker` API][1]。
+   *
+   * [1]: https://ant-design.antgroup.com/components/date-picker-cn#api
+   */
+  pickerProps?: AntdDatePickerProps;
+}
+
+/**
+ * 支持快速跳转的日/周/月/年选择器。
+ *
+ * 除了文档中列出的属性外，该组件会将其它属性传递给 [Ant Design 的 `Space.Compact` 组件][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/space-cn#spacecompact
+ */
+function TsingrocDatePicker(props: DatePickerProps) {
+  const {
+    value,
+    onChange: propsOnChange,
+    dataType = "month",
+    disabled,
+    buttonProps,
+    pickerProps,
+    ...rest
+  } = props;
+  const [dateValue, setDateValue] =
+    value === undefined
+      ? // eslint-disable-next-line react-hooks/rules-of-hooks
+        useState<Dayjs | undefined>(undefined)
+      : [value, () => {}];
+  /**
+   * 快速增减一定时间，如果当前未选择日期则无效。
+   * @param delta 增减的时间量，按传入的时间单位 `dataType` 计算
+   */
+  const quickSwitch = (delta: number) => {
+    if (!dateValue) return;
+    const temp = dateValue.add(delta, dataType);
+    setDateValue(temp);
+    propsOnChange?.(temp);
+  };
+  const onChange = (value: Dayjs) => {
+    setDateValue(value);
+    propsOnChange?.(value);
+  };
+  return (
+    <Space.Compact {...rest}>
+      <Button
+        onClick={() => quickSwitch(-1)}
+        icon={<LeftOutlined />}
+        disabled={disabled}
+        className={props.className}
+        {...buttonProps}
+      />
+      <DatePicker
+        picker={dataType == "day" ? "date" : dataType}
+        value={dateValue}
+        onChange={onChange}
+        disabled={disabled}
+        className={props.className}
+        {...pickerProps}
+      />
+      <Button
+        onClick={() => quickSwitch(+1)}
+        icon={<RightOutlined />}
+        disabled={disabled}
+        {...buttonProps}
+      />
+    </Space.Compact>
+  );
+}
+
+export default TsingrocDatePicker;

package/src/components/TsingrocTheme.tsx

@@ -0,0 +1,47 @@
+import { ConfigProvider, theme } from "antd";
+import dayjs from "dayjs";
+import type { ReactNode } from "react";
+import zhCN from "antd/es/locale/zh_CN";
+import "dayjs/locale/zh-cn";
+
+export interface TsingrocThemeProps {
+  /** 是否开启黑暗模式。*/
+  dark?: boolean;
+  /** 主题覆盖的页面内容。*/
+  children: ReactNode;
+}
+
+/**
+ * 清鹏智能的公共 Ant Design 主题，会影响内部的所有 Ant Design 组件的样式。
+ * 请将该组件放置在整个 React 项目的顶层。
+ */
+function TsingrocTheme(props: TsingrocThemeProps) {
+  // Ant Design 主题编辑器链接：
+  // https://ant-design.antgroup.com/theme-editor-cn
+  // 色板设计工具链接：
+  // https://huetone.ardov.me/?palette=N4IgdghgtgpiBcICiAPaAHANjABABQmwBcjcBjAe3QE8QAaEACwFcYBnBAbVElgRDwBLMAGt6ISpgoAnDvE4gAxADMADDAAmygCzjFmjTGUBOPRuMAjAIww4DRWTIAOMjF32yAJgBs3jU70Lb20AVjJvPWMYTwsIdyUnAGZVVScIQNCYCwD7CDJki0S9J21ExKdTe29EmN89bW1PVW0I%2B0SQq2NE1qVPbStGkJAAXQBfOh5oOEQAQTAiABFxSRk5BX1vHWVlQIgYVW3IqzIIQ6rLKzOlbVVjTZ37K28AdmerxVuQp3M9J9f3xLOKI5JR-N4PUEhELaCAaX7QqzPOyQmohCy-KyeaFDR5WKwQTxkEajYYMIgUMDsLggAAyqnENKsDM8DKKDBp8RpONpPUA3HKADIzAE5B4gWPQW3IW8QWbJACxZDAWTIV9LGQA
+  dayjs.locale("zh-cn");
+  return (
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        algorithm: props.dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+        token: props.dark
+          ? {
+              colorPrimary: "#9b5efd",
+              colorInfo: "#9b5efd",
+              colorSuccess: "#1ac489",
+            }
+          : {
+              colorPrimary: "#5200d7",
+              colorInfo: "#5200d7",
+              colorSuccess: "#1ac489",
+            },
+      }}
+    >
+      {props.children}
+    </ConfigProvider>
+  );
+}
+
+export default TsingrocTheme;

package/src/components/UserButton.tsx

@@ -0,0 +1,152 @@
+import {
+  Avatar,
+  Button,
+  type ButtonProps,
+  Dropdown,
+  type DropdownProps,
+  theme,
+} from "antd";
+import {
+  DownOutlined,
+  LogoutOutlined,
+  UpOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import type { Account } from "casdoor-js-sdk/lib/esm/sdk";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { AuthCheck, AuthProvider, useAuth } from "./Auth";
+
+export interface UserButtonProps extends ButtonProps {
+  /**
+   * 是否显示为缩小形态（只显示头像）。
+   * @default false
+   */
+  compact?: boolean;
+  /**
+   * 使用边栏布局还是顶栏布局。
+   * @default "sidebar"
+   */
+  layout?: "sidebar" | "header";
+  /** 点击“账户”时的操作。若省略，默认通过 Casdoor SDK 获取用户主页链接并跳转。*/
+  onOpenProfile?: () => void;
+  /**
+   * 点击“登出”时的操作。默认先登出，然后跳转到主页。
+   *
+   * @default
+   * () => {
+   *   auth.logout(); // auth = useAuth()
+   *   location.href = "/";
+   * }
+   */
+  onLogout?: () => void;
+  /**
+   * 下拉菜单的属性，见 [Ant Design 文档][1]。你可以在这里覆盖弹出菜单的内容和样式。
+   *
+   * [1]: https://ant-design.antgroup.com/components/dropdown-cn
+   */
+  dropdownProps?: DropdownProps;
+}
+
+/**
+ * 显示用户信息的按钮，点击弹出登出或跳转到账户页的菜单。
+ * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后，
+ * 才能正常显示用户信息，否则只会显示占位数据。
+ *
+ * 除了文档中列出的属性以外，该组件会把额外的属性传递给内部的 [`Button`][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/button-cn
+ */
+function UserButton(props: UserButtonProps) {
+  const { token } = theme.useToken();
+  const auth = useAuth("UserButton");
+  const userInfo = auth.userInfo;
+  const {
+    compact,
+    layout = "sidebar",
+    onOpenProfile = () => {
+      const account =
+        auth.accessToken === undefined
+          ? undefined
+          : { accessToken: auth.accessToken };
+      location.href = auth.sdk.getMyProfileUrl(
+        account as Account,
+        location.href,
+      );
+    },
+    onLogout = () => {
+      auth.logout();
+      location.href = "/";
+    },
+    dropdownProps,
+    ...rest
+  } = props;
+  return (
+    <Dropdown
+      trigger={["click"]}
+      placement={layout === "sidebar" ? "topLeft" : "bottomRight"}
+      {...dropdownProps}
+      menu={{
+        items: [
+          {
+            key: "profile",
+            label: <>账户</>, // 如果使用字符串，在缩小时会被裁剪，即使宽度足够
+            icon: <UserOutlined />,
+            title: "", // 若不设置，在缩小时总是会显示工具提示，即使宽度足够
+            onClick: onOpenProfile,
+          },
+          {
+            key: "logout",
+            icon: <LogoutOutlined />,
+            label: <>登出</>,
+            title: "",
+            onClick: onLogout,
+          },
+        ],
+        ...dropdownProps?.menu,
+        style: {
+          minWidth: "100%",
+          ...dropdownProps?.menu?.style,
+        },
+      }}
+    >
+      <Button
+        type="text"
+        icon={
+          <Avatar alt="头像" src={userInfo?.picture} icon={<UserOutlined />} />
+        }
+        {...rest}
+        styles={{
+          icon: {
+            display: "inline-flex",
+            alignItems: "center",
+            ...rest.styles?.icon,
+          },
+        }}
+        style={{
+          margin: token.marginXXS,
+          ...(layout === "sidebar"
+            ? {
+                width: "auto",
+                padding: token.paddingXXS,
+              }
+            : {
+                paddingBlock: token.padding + token.paddingXS,
+              }),
+          ...rest.style,
+        }}
+      >
+        {!compact && (
+          <>
+            <span style={{ marginRight: token.marginXXS }}>
+              {userInfo?.name ?? userInfo?.prefered_username ?? "平台用户"}
+            </span>
+            {layout === "sidebar" ? <UpOutlined /> : <DownOutlined />}
+          </>
+        )}
+      </Button>
+    </Dropdown>
+  );
+}
+
+export default UserButton;

package/src/components/VerticalColorLegend.tsx

@@ -0,0 +1,73 @@
+import type { HTMLAttributes } from "react";
+import { theme } from "antd";
+
+export interface VerticalColorLegendProps
+  extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  palette: [number, [number, number, number]][];
+}
+
+function VerticalColorLegend(props: VerticalColorLegendProps) {
+  const { title, palette, ...rest } = props;
+  const { token } = theme.useToken();
+  const max = palette.at(-1)![0];
+  const min = palette[0][0];
+  const range = max - min;
+  return (
+    <div
+      {...rest}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        userSelect: "none",
+        fontSize: token.fontSizeSM,
+        color: token.colorText,
+        textShadow:
+          "-1px -1px white, 0px -1px white, 1px -1px white, 1px 0px white, " +
+          "1px 1px white, 0px 1px white, -1px 1px white, -1px 0px white",
+        ...rest.style,
+      }}
+    >
+      <div style={{ fontWeight: "bold" }}>{title}</div>
+      <div
+        style={{
+          display: "flex",
+          flexBasis: "100%",
+          alignItems: "stretch",
+          gap: token.paddingXXS,
+          paddingBlock: "0.5em",
+        }}
+      >
+        <div
+          style={{
+            width: 24,
+            background: `linear-gradient(
+              to top,
+              ${palette
+                .map(
+                  ([value, color]) =>
+                    `rgb(${color.join(", ")}) ${((value - min) / range) * 100}%`,
+                )
+                .join(", ")}
+            )`,
+          }}
+        />
+        <div style={{ lineHeight: 0, verticalAlign: "middle" }}>
+          {palette.map(([value], i) => (
+            <div
+              key={i}
+              style={{
+                position: "relative",
+                top: ((max - value) / range) * 100 + "%",
+              }}
+            >
+              {value.toFixed(1)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default VerticalColorLegend;