@tsingroc/tsingroc-components 5.0.0-alpha.10 → 5.0.0-alpha.12

package/dist/components/Sidebar.d.ts

@@ -0,0 +1,79 @@
+import { type MenuProps } from "antd";
+import { type CSSProperties, type ReactNode } from "react";
+export type MenuItem = Required<MenuProps>["items"][number];
+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;
+}
+/**
+ * 出自 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
+ */
+declare function Sidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export default Sidebar;

package/dist/components/Sidebar.js

@@ -0,0 +1,178 @@
+import { Button, Flex, Layout, Menu } from "antd";
+import { createStyles } from "antd-style";
+import { useState } from "react";
+import { BarChartOutlined, LeftOutlined, RightOutlined, SwapOutlined, TeamOutlined } from "@ant-design/icons";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { AuthCheck, AuthProvider } from "./Auth";
+import UserButton from "./UserButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const menuItem = (label, key, icon, children) => ({
+  key,
+  icon,
+  children,
+  label
+});
+
+/** 默认菜单项配置，可以作为参考或默认值 */
+const DEFAULT_MENU_ITEMS = [menuItem("数据看板", "data-board", /*#__PURE__*/_jsx(BarChartOutlined, {}), [menuItem("宏观数据", "macro-data"), menuItem("合约看板", "contract-overview"), menuItem("数据复盘", "data-review")]), menuItem("交易管理", "trade-management", /*#__PURE__*/_jsx(SwapOutlined, {}), [menuItem("日前交易", "day-ahead-trade"), menuItem("现货交易", "spot-trade"), menuItem("中长期交易", "long-term-trade")]), menuItem("合约管理", "customer-management", /*#__PURE__*/_jsx(TeamOutlined, {}), [menuItem("客户总览", "customer-overview"), menuItem("售电合约管理", "sales-contract"), menuItem("供应商管理", "supplier-management"), menuItem("购电合约管理", "purchase-contract")])];
+/**
+ * 出自 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) {
+  const {
+    width = 260,
+    collapsible = false,
+    logo,
+    title,
+    headerHeight = 116,
+    header,
+    items = DEFAULT_MENU_ITEMS,
+    footer = collapsed => /*#__PURE__*/_jsx(UserButton, {
+      compact: collapsed,
+      style: {
+        marginBottom: token.paddingSM
+      }
+    }),
+    className,
+    style,
+    ...rest
+  } = props;
+  const [collapsed_0, setCollapsed] = useState(false);
+  // 默认展开到 selectedKeys
+  const [openKeys, setOpenKeys] = useState(() => rest.selectedKeys?.flatMap(key => findKeyPath(items, key) ?? []) ?? []);
+  const {
+    cx,
+    styles,
+    theme: token
+  } = useStyles(collapsed_0);
+  return /*#__PURE__*/_jsxs(Layout.Sider, {
+    theme: "light",
+    width: width,
+    collapsed: collapsible ? collapsed_0 : false,
+    collapsible: collapsible,
+    trigger: null,
+    className: cx(styles.sidebar, className),
+    style: style,
+    children: [header === null ? null : header ? header(collapsed_0) : /*#__PURE__*/_jsxs(Flex, {
+      vertical: true,
+      align: "center",
+      justify: "center",
+      className: cx(styles.sidebarHeader),
+      style: {
+        height: headerHeight
+      },
+      children: [/*#__PURE__*/_jsx("img", {
+        alt: "logo",
+        src: logo
+      }), /*#__PURE__*/_jsx("h1", {
+        style: {
+          color: token.colorText
+        },
+        children: title
+      })]
+    }), /*#__PURE__*/_jsx(Menu, {
+      mode: "inline",
+      items: items,
+      inlineCollapsed: collapsible ? collapsed_0 : false,
+      openKeys: openKeys,
+      onOpenChange: openKeys_0 => setOpenKeys(openKeys_0),
+      className: cx(styles.sidebarMenu),
+      ...rest
+    }), footer === null ? null : footer(collapsed_0), collapsible && /*#__PURE__*/_jsx(Button, {
+      className: cx(styles.sidebarBtn),
+      icon: collapsed_0 ? /*#__PURE__*/_jsx(RightOutlined, {}) : /*#__PURE__*/_jsx(LeftOutlined, {}),
+      onClick: () => setCollapsed(!collapsed_0)
+    })]
+  });
+}
+export default Sidebar;
+const useStyles = createStyles(({
+  token,
+  css,
+  cx,
+  prefixCls
+}, collapsed) => {
+  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%);
+      width: 32px;
+      height: 32px;
+      font-size: ${token.sizeSM}px;
+
+      transition: opacity ${token.motionDurationMid};
+      opacity: 100%;
+    `;
+  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(sidebarMenu)}.${cx(sidebarMenu)} {
+        border-inline-end: none;
+      }
+
+      &:hover .${cx(sidebarBtn)} {
+        opacity: 100%;
+      }
+    `;
+  return {
+    sidebar,
+    sidebarHeader,
+    sidebarMenu,
+    sidebarBtn
+  };
+});
+function findKeyPath(items, key) {
+  for (const item of items) {
+    if (!item) {
+      continue;
+    }
+    if (item.key === key) {
+      return [];
+    }
+    if ("children" in item) {
+      const childrenResult = findKeyPath(item.children ?? [], key);
+      if (childrenResult) {
+        return [item.key, ...childrenResult];
+      }
+    }
+  }
+  return null;
+}

package/dist/components/TsingrocDatePicker.d.ts

@@ -0,0 +1,38 @@
+import { type DatePickerProps as AntdDatePickerProps, type ButtonProps } from "antd";
+import type { SpaceCompactProps } from "antd/es/space/Compact";
+import type { Dayjs } from "dayjs";
+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
+ */
+declare function TsingrocDatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export default TsingrocDatePicker;

package/dist/components/TsingrocDatePicker.js

@@ -0,0 +1,64 @@
+import { Button, DatePicker, Space } from "antd";
+import { useState } from "react";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 支持快速跳转的日/周/月/年选择器。
+ *
+ * 除了文档中列出的属性外，该组件会将其它属性传递给 [Ant Design 的 `Space.Compact` 组件][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/space-cn#spacecompact
+ */
+function TsingrocDatePicker(props) {
+  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(undefined) : [value, () => {}];
+  /**
+   * 快速增减一定时间，如果当前未选择日期则无效。
+   * @param delta 增减的时间量，按传入的时间单位 `dataType` 计算
+   */
+  const quickSwitch = delta => {
+    if (!dateValue) return;
+    const temp = dateValue.add(delta, dataType);
+    setDateValue(temp);
+    propsOnChange?.(temp);
+  };
+  const onChange = value => {
+    setDateValue(value);
+    propsOnChange?.(value);
+  };
+  return /*#__PURE__*/_jsxs(Space.Compact, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: () => quickSwitch(-1),
+      icon: /*#__PURE__*/_jsx(LeftOutlined, {}),
+      disabled: disabled,
+      className: props.className,
+      ...buttonProps
+    }), /*#__PURE__*/_jsx(DatePicker, {
+      picker: dataType == "day" ? "date" : dataType,
+      value: dateValue,
+      onChange: onChange,
+      disabled: disabled,
+      className: props.className,
+      ...pickerProps
+    }), /*#__PURE__*/_jsx(Button
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-conversion
+    , {
+      onClick: () => quickSwitch(+1),
+      icon: /*#__PURE__*/_jsx(RightOutlined, {}),
+      disabled: disabled,
+      ...buttonProps
+    })]
+  });
+}
+export default TsingrocDatePicker;

package/dist/components/TsingrocTheme.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface TsingrocThemeProps {
+    /** 是否开启黑暗模式。*/
+    dark?: boolean;
+    /** 是否开启紧凑模式。*/
+    compact?: boolean;
+    /** 主题覆盖的页面内容。*/
+    children: ReactNode;
+}
+/**
+ * 清鹏智能的公共 Ant Design 主题，会影响内部的所有 Ant Design 组件的样式。
+ * 请将该组件放置在整个 React 项目的顶层。
+ */
+declare function TsingrocTheme(props: TsingrocThemeProps): import("react/jsx-runtime").JSX.Element;
+export default TsingrocTheme;

package/dist/components/TsingrocTheme.js

@@ -0,0 +1,72 @@
+import { c as _c } from "react/compiler-runtime";
+import { ConfigProvider, theme } from "antd";
+import antdZhCN from "antd/es/locale/zh_CN";
+import dayjs from "dayjs";
+import dayjsZhCN from "dayjs/locale/zh-cn";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 清鹏智能的公共 Ant Design 主题，会影响内部的所有 Ant Design 组件的样式。
+ * 请将该组件放置在整个 React 项目的顶层。
+ */
+function TsingrocTheme(props) {
+  const $ = _c(11);
+  dayjs.locale(dayjsZhCN);
+  let algorithm;
+  if ($[0] !== props.compact || $[1] !== props.dark) {
+    algorithm = [];
+    if (props.compact) {
+      algorithm.push(theme.compactAlgorithm);
+    }
+    if (props.dark) {
+      algorithm.push(theme.darkAlgorithm);
+    }
+    $[0] = props.compact;
+    $[1] = props.dark;
+    $[2] = algorithm;
+  } else {
+    algorithm = $[2];
+  }
+  let t0;
+  if ($[3] !== props.dark) {
+    t0 = props.dark ? {
+      colorPrimary: "#9b5efd",
+      colorInfo: "#9b5efd",
+      colorSuccess: "#1ac489"
+    } : {
+      colorPrimary: "#5200d7",
+      colorInfo: "#5200d7",
+      colorSuccess: "#1ac489"
+    };
+    $[3] = props.dark;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== algorithm || $[6] !== t0) {
+    t1 = {
+      algorithm,
+      token: t0
+    };
+    $[5] = algorithm;
+    $[6] = t0;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== props.children || $[9] !== t1) {
+    t2 = /*#__PURE__*/_jsx(ConfigProvider, {
+      locale: antdZhCN,
+      theme: t1,
+      children: props.children
+    });
+    $[8] = props.children;
+    $[9] = t1;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+}
+export default TsingrocTheme;

package/dist/components/UserButton.d.ts

@@ -0,0 +1,42 @@
+import { type ButtonProps, type DropdownProps } from "antd";
+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
+ */
+declare function UserButton(props: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export default UserButton;

package/dist/components/UserButton.js

@@ -0,0 +1,105 @@
+import { Avatar, Button, Dropdown, theme } from "antd";
+import { DownOutlined, LogoutOutlined, UpOutlined, UserOutlined } from "@ant-design/icons";
+import { AuthCheck,
+// eslint-disable-line @typescript-eslint/no-unused-vars
+AuthProvider,
+// eslint-disable-line @typescript-eslint/no-unused-vars
+useAuth } from "./Auth";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 显示用户信息的按钮，点击弹出登出或跳转到账户页的菜单。
+ * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后，
+ * 才能正常显示用户信息，否则只会显示占位数据。
+ *
+ * 除了文档中列出的属性以外，该组件会把额外的属性传递给内部的 [`Button`][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/button-cn
+ */
+function UserButton(props) {
+  const {
+    token
+  } = theme.useToken();
+  const auth = useAuth("UserButton");
+  const {
+    compact,
+    layout = "sidebar",
+    onOpenProfile = auth.mode === "casdoor" ? () => {
+      const account = auth.accessToken === undefined ? undefined : {
+        accessToken: auth.accessToken
+      };
+      location.href = auth.sdk.getMyProfileUrl(account, location.href);
+    } : undefined,
+    onLogout = () => {
+      auth.logout();
+      location.href = "/";
+    },
+    dropdownProps,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(Dropdown, {
+    trigger: ["click"],
+    placement: layout === "sidebar" ? "topLeft" : "bottomRight",
+    ...dropdownProps,
+    menu: {
+      items: [onOpenProfile ? {
+        key: "profile",
+        label: /*#__PURE__*/_jsx(_Fragment, {
+          children: "\u8D26\u6237"
+        }),
+        // 如果使用字符串，在缩小时会被裁剪，即使宽度足够
+        icon: /*#__PURE__*/_jsx(UserOutlined, {}),
+        title: "",
+        // 若不设置，在缩小时总是会显示工具提示，即使宽度足够
+        onClick: onOpenProfile
+      } : null, {
+        key: "logout",
+        icon: /*#__PURE__*/_jsx(LogoutOutlined, {}),
+        label: /*#__PURE__*/_jsx(_Fragment, {
+          children: "\u9000\u51FA\u767B\u5F55"
+        }),
+        title: "",
+        onClick: onLogout
+      }],
+      ...dropdownProps?.menu,
+      style: {
+        minWidth: "100%",
+        ...dropdownProps?.menu?.style
+      }
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      type: "text",
+      icon: /*#__PURE__*/_jsx(Avatar, {
+        alt: "\u5934\u50CF",
+        src: auth.mode === "casdoor" ? auth.userInfo?.picture : undefined,
+        icon: /*#__PURE__*/_jsx(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
+      },
+      children: !compact && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          style: {
+            marginRight: token.marginXXS
+          },
+          children: (auth.mode === "casdoor" ? auth.userInfo?.name ?? auth.userInfo?.prefered_username : auth.userInfo?.displayName ?? auth.userInfo?.username) ?? "平台用户"
+        }), layout === "sidebar" ? /*#__PURE__*/_jsx(UpOutlined, {}) : /*#__PURE__*/_jsx(DownOutlined, {})]
+      })
+    })
+  });
+}
+export default UserButton;

package/dist/components/VerticalColorLegend.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+export interface VerticalColorLegendProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    palette: [number, [number, number, number]][];
+}
+declare function VerticalColorLegend(props: VerticalColorLegendProps): import("react/jsx-runtime").JSX.Element;
+export default VerticalColorLegend;