@tsingroc/tsingroc-components 5.0.0-alpha.21 → 5.0.0-alpha.22

package/dist/components/Sidebar.js

@@ -1,11 +1,10 @@
+import { BarChartOutlined, LeftOutlined, RightOutlined, SwapOutlined, TeamOutlined } from "@ant-design/icons";
 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";
+// eslint-disable-line @typescript-eslint/no-unused-vars
+// eslint-disable-line @typescript-eslint/no-unused-vars
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const menuItem = (label, key, icon, children) => ({
   key,
@@ -19,7 +18,7 @@ const DEFAULT_MENU_ITEMS = [menuItem("数据看板", "data-board", /*#__PURE__*/
 /**
  * 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
  * 如果没有指定 {@linkcode SidebarProps.footer | footer} 属性，
- * 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
+ * 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode LoginCheck} 验证后
  * 才能正常显示边栏底部的用户信息按钮。
  *
  * 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。

package/dist/components/TsingrocDatePicker.d.ts

@@ -1,4 +1,4 @@
-import { type DatePickerProps as AntdDatePickerProps, type ButtonProps } from "antd";
+import { type ButtonProps, type DatePickerProps as AntdDatePickerProps } from "antd";
 import type { SpaceCompactProps } from "antd/es/space/Compact";
 import type { Dayjs } from "dayjs";
 export interface DatePickerProps extends Omit<SpaceCompactProps, "onChange"> {
@@ -25,7 +25,7 @@ export interface DatePickerProps extends Omit<SpaceCompactProps, "onChange"> {
      *
      * [1]: https://ant-design.antgroup.com/components/date-picker-cn#api
      */
-    pickerProps?: AntdDatePickerProps;
+    pickerProps?: AntdDatePickerProps<Dayjs, false>;
 }
 /**
  * 支持快速跳转的日/周/月/年选择器。

package/dist/components/TsingrocDatePicker.js

@@ -1,6 +1,6 @@
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 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";
 /**
  * 支持快速跳转的日/周/月/年选择器。
@@ -19,9 +19,9 @@ function TsingrocDatePicker(props) {
     pickerProps,
     ...rest
   } = props;
-  const [dateValue, setDateValue] = value === undefined ?
+  const [dateValue, setDateValue] = value === undefined
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  useState(undefined) : [value, () => {}];
+  ? useState(undefined) : [value, () => {}];
   /**
    * 快速增减一定时间，如果当前未选择日期则无效。
    * @param delta 增减的时间量，按传入的时间单位 `dataType` 计算
@@ -33,6 +33,7 @@ function TsingrocDatePicker(props) {
     propsOnChange?.(temp);
   };
   const onChange = value => {
+    if (!value) return;
     setDateValue(value);
     propsOnChange?.(value);
   };
@@ -45,15 +46,13 @@ function TsingrocDatePicker(props) {
       className: props.className,
       ...buttonProps
     }), /*#__PURE__*/_jsx(DatePicker, {
-      picker: dataType == "day" ? "date" : dataType,
+      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
-    , {
+    }), /*#__PURE__*/_jsx(Button, {
       onClick: () => quickSwitch(+1),
       icon: /*#__PURE__*/_jsx(RightOutlined, {}),
       disabled: disabled,

package/dist/components/UserButton.d.ts

@@ -31,7 +31,7 @@ export interface UserButtonProps extends ButtonProps {
 }
 /**
  * 显示用户信息的按钮，点击弹出登出或跳转到账户页的菜单。
- * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后，
+ * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode LoginCheck} 验证后，
  * 才能正常显示用户信息，否则只会显示占位数据。
  *
  * 除了文档中列出的属性以外，该组件会把额外的属性传递给内部的 [`Button`][1] 组件。

package/dist/components/UserButton.js

@@ -1,14 +1,13 @@
-import { Avatar, Button, Dropdown, theme } from "antd";
 import { DownOutlined, LogoutOutlined, UpOutlined, UserOutlined } from "@ant-design/icons";
-import { AuthCheck,
+import { Avatar, Button, Dropdown, theme } from "antd";
+import { useSyncExternalStore } from "react";
 // eslint-disable-line @typescript-eslint/no-unused-vars
-AuthProvider,
+import { useSessionStoreInternal } from "./auth/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} 验证后，
+ * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode LoginCheck} 验证后，
  * 才能正常显示用户信息，否则只会显示占位数据。
  *
  * 除了文档中列出的属性以外，该组件会把额外的属性传递给内部的 [`Button`][1] 组件。
@@ -19,23 +18,30 @@ function UserButton(props) {
   const {
     token
   } = theme.useToken();
-  const auth = useAuth("UserButton");
+  const sessionStore = useSessionStoreInternal("UserButton");
+  const session = useSyncExternalStore(onChange => {
+    sessionStore.addEventListener(onChange);
+    return () => sessionStore.addEventListener(onChange);
+  }, () => sessionStore.session);
+  if (!session) {
+    throw new Error("UserButton 只有在用户登录后才能使用，请确保只在 LoginCheck 内部使用 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,
+    onOpenProfile,
     onLogout = () => {
-      auth.logout();
+      sessionStore.clear();
       location.href = "/";
     },
     dropdownProps,
+    style,
+    styles,
     ...rest
   } = props;
+  const resolvedStyles = typeof styles === "function" ? styles({
+    props
+  }) : styles;
   return /*#__PURE__*/_jsx(Dropdown, {
     trigger: ["click"],
     placement: layout === "sidebar" ? "topLeft" : "bottomRight",
@@ -70,15 +76,14 @@ function UserButton(props) {
       type: "text",
       icon: /*#__PURE__*/_jsx(Avatar, {
         alt: "\u5934\u50CF",
-        src: auth.mode === "casdoor" ? auth.userInfo?.picture : undefined,
+        src: session.userInfo.picture,
         icon: /*#__PURE__*/_jsx(UserOutlined, {})
       }),
-      ...rest,
       styles: {
         icon: {
           display: "inline-flex",
           alignItems: "center",
-          ...rest.styles?.icon
+          ...resolvedStyles?.icon
         }
       },
       style: {
@@ -89,14 +94,15 @@ function UserButton(props) {
         } : {
           paddingBlock: token.padding + token.paddingXS
         }),
-        ...rest.style
+        ...style
       },
+      ...rest,
       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) ?? "平台用户"
+          children: session.userInfo.name
         }), layout === "sidebar" ? /*#__PURE__*/_jsx(UpOutlined, {}) : /*#__PURE__*/_jsx(DownOutlined, {})]
       })
     })

package/dist/components/WeatherMap.js

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { Button, Flex, Slider, Spin, theme } from "antd";
 import { createStyles } from "antd-style";
 import dayjs from "dayjs";
-import DeckGL from "deck.gl";
+import { DeckGL } from "deck.gl";
 import { useMemo, useState } from "react";
 import { MdDewPoint, MdThermostat } from "react-icons/md";
 import { WiBarometer, WiCloudy, WiHumidity, WiRain, WiStrongWind } from "react-icons/wi";

package/dist/components/auth/AuthProvider.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import type { AuthService } from "./AuthService";
+import { SessionStore, type Session, type SessionStoreOptions } from "./SessionStore";
+export type AuthProviderProps = TokenBasedAuthProviderProps | GenericAuthProviderProps;
+export interface TokenBasedAuthProviderProps extends SessionStoreOptions {
+    service: AuthService<string, unknown>;
+    fetcherMiddleware?: boolean;
+    children: ReactNode;
+}
+export interface GenericAuthProviderProps extends SessionStoreOptions {
+    service: AuthService<unknown, unknown>;
+    fetcherMiddleware?: boolean;
+    persistent: false;
+    children: ReactNode;
+}
+export declare function AuthProvider(props: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSessionStoreInternal(user: string): SessionStore;
+export declare const useSessionStore: () => SessionStore;
+export declare function useSessionInternal(user: string, allowNull?: false): Session;
+export declare function useSessionInternal(user: string, allowNull: true): Session | null;
+export interface UseSessionOptions {
+    /** 当未登录或已登出时是否抛出异常。 @default true */
+    allowNull?: boolean;
+}
+export interface UseSessionNonNullableOptions extends UseSessionOptions {
+    allowNull?: false;
+}
+export declare function useSession(options?: UseSessionNonNullableOptions): Session;
+export declare function useSession(options?: UseSessionOptions): Session | null;

package/dist/components/auth/AuthProvider.js

@@ -0,0 +1,138 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, use, useState, useSyncExternalStore } from "react";
+import { FetcherWithAuth } from "./Fetcher";
+import { SessionStore } from "./SessionStore";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AuthContext = /*#__PURE__*/createContext(null);
+export function AuthProvider(props) {
+  const $ = _c(14);
+  let children;
+  let rest;
+  let service;
+  let t0;
+  if ($[0] !== props) {
+    ({
+      service,
+      fetcherMiddleware: t0,
+      children,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = children;
+    $[2] = rest;
+    $[3] = service;
+    $[4] = t0;
+  } else {
+    children = $[1];
+    rest = $[2];
+    service = $[3];
+    t0 = $[4];
+  }
+  const fetcherMiddleware = t0 === undefined ? true : t0;
+  let t1;
+  if ($[5] !== rest || $[6] !== service) {
+    t1 = () => new SessionStore(service, rest);
+    $[5] = rest;
+    $[6] = service;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const [sessionStore] = useState(t1);
+  let t2;
+  if ($[8] !== children || $[9] !== fetcherMiddleware) {
+    t2 = fetcherMiddleware ? /*#__PURE__*/_jsx(FetcherWithAuth, {
+      children: children
+    }) : children;
+    $[8] = children;
+    $[9] = fetcherMiddleware;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== sessionStore || $[12] !== t2) {
+    t3 = /*#__PURE__*/_jsx(AuthContext, {
+      value: sessionStore,
+      children: t2
+    });
+    $[11] = sessionStore;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return t3;
+}
+export function useSessionStoreInternal(user) {
+  const sessionStore = use(AuthContext);
+  if (!sessionStore) {
+    throw new Error(user + " 只有在 AuthProvider 内部才能使用");
+  }
+  return sessionStore;
+}
+export const useSessionStore =
+//
+useSessionStoreInternal.bind(undefined, "useSessionStore");
+export function useSessionInternal(user, t0) {
+  const $ = _c(4);
+  const allowNull = t0 === undefined ? false : t0;
+  const sessionStore = useSessionStoreInternal(user);
+  let t1;
+  if ($[0] !== sessionStore) {
+    t1 = onChange => {
+      sessionStore.addEventListener(onChange);
+      return () => sessionStore.addEventListener(onChange);
+    };
+    $[0] = sessionStore;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== sessionStore.session) {
+    t2 = () => sessionStore.session;
+    $[2] = sessionStore.session;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const session = useSyncExternalStore(t1, t2);
+  if (!(allowNull || session)) {
+    throw new Error(`当前用户未登录！请确保只在 LoginCheck 内部使用 ${user}。`);
+  }
+  return session;
+}
+export function useSession(t0) {
+  const $ = _c(4);
+  const options = t0 === undefined ? {} : t0;
+  const {
+    allowNull: t1
+  } = options;
+  const allowNull = t1 === undefined ? false : t1;
+  const sessionStore = useSessionStoreInternal("useSession");
+  let t2;
+  if ($[0] !== sessionStore) {
+    t2 = onChange => {
+      sessionStore.addEventListener(onChange);
+      return () => sessionStore.addEventListener(onChange);
+    };
+    $[0] = sessionStore;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== sessionStore.session) {
+    t3 = () => sessionStore.session;
+    $[2] = sessionStore.session;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const session = useSyncExternalStore(t2, t3);
+  if (!(allowNull || session)) {
+    throw new Error("\u5F53\u524D\u7528\u6237\u672A\u767B\u5F55\uFF0C\u65E0\u6CD5\u83B7\u53D6\u4F1A\u8BDD\u3002\u8BF7\u786E\u4FDD\u53EA\u5728 LoginCheck \u5185\u90E8\u4F7F\u7528 useSession\uFF0C\u6216\u8005\u5C06 allowNull \u8BBE\u4E3A true\u3002");
+  }
+  return session;
+}

package/dist/components/auth/AuthService.d.ts

@@ -0,0 +1,30 @@
+import type { Fetcher } from "./Fetcher";
+/**
+ * 鉴权操作的抽象接口。
+ *
+ * 对于实现者来说，需要注意实现该接口的类自身不应该保存会话状态。
+ */
+export interface AuthService<State = unknown, RawUserInfo = unknown> {
+    /**
+     * 获取一个新会话，返回会话状态。
+     *
+     * 在不同实现中，这个函数不一定是登录，也有可能是向父页面获取 token 等其他操作。
+     * 某些实现返回的 Promise 可能永远都不会 resolve（例如跳转到了登录页面）。
+     */
+    getSession(): Promise<State>;
+    /** 在线验证会话状态是否有效。有效时返回 `RawUserInfo`，无效时抛出异常。 */
+    validate(state: State): Promise<RawUserInfo>;
+    /** 使会话立即失效。很多实现不提供该操作。 */
+    endSession?(state: State): Promise<void>;
+    /** 创建使用会话状态鉴权的 fetcher 中间件，可搭配 {@linkcode FetcherMiddleware} 使用。 */
+    fetcherMiddleware(state: State): (fetcher: Fetcher) => Fetcher;
+    /** 从特定于实现的 `RawUserInfo` 中提取出格式统一的通用信息。 */
+    parseUserInfo(info: RawUserInfo): UserInfo;
+}
+/** 格式统一的通用个人信息。 */
+export interface UserInfo {
+    /** 用户的显示名 */
+    name: string;
+    /** 用户的头像 URL */
+    picture?: string;
+}

package/dist/components/auth/AuthService.js

@@ -0,0 +1 @@
+export {};

package/dist/components/auth/CasdoorAuth.d.ts

@@ -0,0 +1,135 @@
+import type { SdkConfig } from "casdoor-js-sdk/lib/esm/sdk";
+import type { JwtPayload } from "jwt-decode";
+import { type ReactNode } from "react";
+import type { AuthService, UserInfo } from "./AuthService";
+import { fetcherWithBearerToken } from "./Fetcher";
+export interface CasdoorAuthServiceOptions {
+    config: SdkConfig;
+    signinOrigin?: string;
+    signinPath?: string | undefined;
+}
+export declare class CasdoorAuthService implements AuthService<string, CasdoorUserInfo> {
+    #private;
+    constructor(options: CasdoorAuthServiceOptions);
+    getSession(): Promise<string>;
+    validate(token: string): Promise<CasdoorUserInfo>;
+    /**
+     * CasdoorAuthService 的特有函数。
+     * 使用 CasdoorAuthService 时，需要在项目中设置一个回调页面。
+     * 当用户完成登录，跳转到回调页面时，可调用此函数获取 access token。
+     * 若用户不经过登录流程进入回调页面，或者后端发生错误，则会抛出异常。
+     */
+    callback(): Promise<string>;
+    fetcherMiddleware: typeof fetcherWithBearerToken;
+    parseUserInfo(info: CasdoorUserInfo): UserInfo;
+}
+export interface CasdoorTokenPayload extends JwtPayload {
+    /**
+     * Token 的发布者。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    iss: string;
+    /**
+     * Token 的主题。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    sub: string;
+    /**
+     * Token 的目标应用 ID。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    aud: string[];
+    /**
+     * 使用 Token 的应用 ID。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    azp: string;
+    /**
+     * Token 的唯一标识符。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    jti: string;
+    /** Token 的过期时间（Unix 时间戳）。*/
+    exp: number;
+    /** Token 的生效时间（Unix 时间戳）。*/
+    nbf: number;
+    /** Token 的签发时间（Unix 时间戳）。*/
+    iat: number;
+    /** 用户的登录名。*/
+    name: string;
+    /** 用户的 UUID。*/
+    id: string;
+    /** 用户的显示名。*/
+    displayName: string;
+    /** 用户的头像 URL。*/
+    avatar: string;
+    /** 用户的邮件地址。*/
+    email: string;
+    /** 用户的手机号。*/
+    phone: string;
+    owner: "tsingroc";
+    tokenType: "access-token";
+    scope: "profile";
+}
+export interface CasdoorUserInfo {
+    /**
+     * Token 的发布者。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    iss: string;
+    /**
+     * Token 的主题。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    sub: string;
+    /**
+     * Token 的目标应用 ID。见 [JWT 标准][1]。
+     *
+     * [1]: https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+     */
+    aud: string;
+    /** 用户的全名（显示名）。*/
+    name: string;
+    /** 短用户名（登录名）。*/
+    prefered_username?: string;
+    /** 用户的邮件地址。*/
+    email?: string;
+    /** 用户的邮件地址是否已确认。*/
+    email_verified?: boolean;
+    /** 用户的手机号。*/
+    phone?: string;
+    /** 用户的头像 URL。*/
+    picture: string;
+    /** 用户的地址。*/
+    address?: string;
+    /** 用户所属的用户组。*/
+    groups: string[];
+    /** 用户的角色。*/
+    roles: string[];
+}
+export interface CasdoorCallbackProps {
+    onSuccess?: () => void;
+    onError?: (err: unknown) => void;
+    success?: ReactNode;
+    error?: ReactNode;
+    /**
+     * 跳转前显示的内容。
+     * @default "正在跳转……"
+     */
+    children?: ReactNode;
+}
+export declare function CasdoorCallback(props: CasdoorCallbackProps): string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+export interface CasdoorRoleCheckProps {
+    required: string[];
+    forbidden?: string[];
+    error?: ReactNode;
+    children: ReactNode;
+}
+export declare function CasdoorRoleCheck(props: CasdoorRoleCheckProps): ReactNode;