@tsingroc/tsingroc-components 3.14.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsingroc/tsingroc-components",
-  "version": "3.14.1",
+  "version": "4.1.0",
   "author": "",
   "license": "ISC",
   "description": "",
@@ -38,7 +38,7 @@
     "jwt-decode": "^4.0.0",
     "react-icons": "^5.5.0",
     "rollup-plugin-worker-factory": "^0.5.7",
-    "weatherlayers-gl": "^2025.5.1"
+    "weatherlayers-gl": "^2025.7.1"
   },
   "peerDependencies": {
     "@ant-design/icons": "^6.0.0",
@@ -53,29 +53,29 @@
   "devDependencies": {
     "@ant-design/icons": "^6.0.0",
     "@eslint/js": "^9.21.0",
-    "@rsbuild/core": "^1.3.21",
-    "@rsbuild/plugin-react": "^1.3.1",
+    "@rsbuild/core": "^1.4.3",
+    "@rsbuild/plugin-react": "^1.3.3",
     "@rspress/plugin-preview": "2.0.0-beta.2",
-    "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/node": "^22.16.0",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "antd": "^5.25.2",
+    "antd": "^5.26.3",
     "antd-style": "^3.7.1",
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.2",
     "echarts-gl": "^2.0.9",
-    "eslint": "^9.27.0",
+    "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.1.0",
-    "prettier": "^3.5.3",
+    "globals": "^16.3.0",
+    "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "rspress": "2.0.0-beta.2",
-    "typedoc": "^0.28.4",
+    "typedoc": "^0.28.7",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.35.1"
   },
   "prettier": {
     "trailingComma": "all"

package/src/components/Auth.tsx

@@ -11,7 +11,11 @@ import { jwtDecode, type JwtPayload } from "jwt-decode";
 import Sdk from "casdoor-js-sdk";
 import type { SdkConfig } from "casdoor-js-sdk/lib/esm/sdk";
 
-export interface AccessTokenPayload extends JwtPayload {
+export type AccessTokenPayload =
+  | CasdoorAccessTokenPayload
+  | LocalAccessTokenPayload;
+
+interface CasdoorAccessTokenPayload extends JwtPayload {
   /**
    * Token 的发布者。见 [JWT 标准][1]。
    *
@@ -67,7 +71,44 @@ export interface AccessTokenPayload extends JwtPayload {
   scope: "profile";
 }
 
-export interface UserInfo {
+interface LocalAccessTokenPayload extends JwtPayload {
+  /** Token 的过期时间（Unix 时间戳）。*/
+  exp: number;
+  /** Token 的生效时间（Unix 时间戳）。*/
+  nbf: number;
+  /** Token 的签发时间（Unix 时间戳）。*/
+  iat: number;
+  /** 用户信息 */
+  User: {
+    /** 注册时间。*/
+    createTime: string;
+    /** 用户的 UUID。*/
+    id?: string;
+    /** 用户名。*/
+    username?: string;
+    /** 是否已删除。*/
+    deleted?: boolean;
+    /** 用户的角色。*/
+    role: {
+      /** 角色的 UUID。*/
+      id: string;
+      /** 角色名。*/
+      name: string;
+      /** 角色的显示名。*/
+      display_name: string;
+      /** 角色拥有的权限。*/
+      functions: string[];
+      /** 角色的优先级。*/
+      priority: number;
+    };
+    /** 用户的角色的 UUID。*/
+    roleId: string;
+  };
+}
+
+export type UserInfo = CasdoorUserInfo | LocalUserInfo;
+
+interface CasdoorUserInfo {
   /**
    * Token 的发布者。见 [JWT 标准][1]。
    *
@@ -106,27 +147,40 @@ export interface UserInfo {
   roles: string[];
 }
 
-interface User {
-  /** 用户的个人信息，未经过 {@linkcode AuthCheck} 验证时为空。*/
-  userInfo?: UserInfo;
-  /** Access Token，未登录时为空。*/
-  accessToken?: string;
-  /** 解码后的 Access Token，未登录时为空。这里也会有一些用户的个人信息。*/
-  decodedAccessToken?: AccessTokenPayload;
+interface LocalUserInfo {
+  /** 注册时间。*/
+  createTime?: string;
+  /** 用户的 UUID。*/
+  id?: string;
+  /** 用户名。*/
+  username?: string;
+  /** 用户的角色。*/
+  roles: string[];
 }
 
-export interface Auth extends User {
-  /** 全局的 Casdoor SDK 对象。*/
-  sdk: Sdk;
+export type Auth = CasdoorAuth | LocalAuth;
+
+interface CommonAuth {
   /**
-   * 跳转到登录。
+   * 当前使用的登录机制。
+   *
+   * - `"casdoor"`：基于 Casdoor 的登录系统。
+   * - `"local"`：场站端使用的内网登录系统。
+   */
+  mode: "casdoor" | "local";
+  /**
+   * 跳转到登录页面。
    *
    * 参数 `redirect` 可以填入登录完成后要跳转到的地址。如果省略，那么跳转目标将由
    * {@linkcode AuthCallback} 的 {@linkcode AuthCallbackProps.onRedirect | onRedirect}
    * 属性决定，默认为跳转到主页。
    */
   login(redirect?: string): void;
-  /** 从登录页面返回时应该调用的回调。当登录状态无效时会**抛出异常**。*/
+  /**
+   * 从登录页面返回时应该调用的回调。当登录状态无效时会**抛出异常**。
+   *
+   * 当 {@linkcode mode | mode === "local"} 时，该函数无效。
+   */
   callback(): Promise<void>;
   /** 在线检查用户是否登录。用户未登录时会**抛出异常**。*/
   validate(): Promise<void>;
@@ -145,8 +199,198 @@ export interface Auth extends User {
     resource: RequestInfo | URL,
     options?: RequestInit,
   ): Promise<Response>;
+  /** 用户的个人信息，未经过 {@linkcode AuthCheck} 验证时为空。*/
+  userInfo?: UserInfo;
+  /** Access Token，未登录时为空。*/
+  accessToken?: string;
+  /** 解码后的 Access Token，未登录时为空。这里也会有一些用户的个人信息。*/
+  decodedAccessToken?: AccessTokenPayload;
+}
+
+export interface CasdoorAuth extends CommonAuth {
+  mode: "casdoor";
+  /** 全局的 Casdoor SDK 对象。*/
+  sdk: Sdk;
+  userInfo?: CasdoorUserInfo;
+  decodedAccessToken?: CasdoorAccessTokenPayload;
+}
+
+export interface LocalAuth extends CommonAuth {
+  mode: "local";
+  /**
+   * 在登录页面需要通过该函数调用登录 API。
+   *
+   * 账号或密码错误时会**抛出异常**。
+   */
+  localLogin(username: string, password: string): Promise<void>;
+  userInfo?: LocalUserInfo;
+  decodedAccessToken?: LocalAccessTokenPayload;
+}
+
+type User = Pick<CommonAuth, "userInfo" | "accessToken" | "decodedAccessToken">;
+type CasdoorUser = Pick<
+  CasdoorAuth,
+  "userInfo" | "accessToken" | "decodedAccessToken"
+>;
+type LocalUser = Pick<
+  LocalAuth,
+  "userInfo" | "accessToken" | "decodedAccessToken"
+>;
+
+const commonAuth = (
+  user: User,
+  setUser: (user: User) => void,
+): Pick<CommonAuth, "logout" | "fetchWithAuth"> => ({
+  async logout(redirect) {
+    localStorage.removeItem("access_token");
+    setUser({});
+    if (redirect) {
+      location.href = redirect;
+    }
+  },
+  async fetchWithAuth(resource, options) {
+    const token = user.accessToken;
+    if (!token) {
+      throw new Error("未登录时无法使用 fetchWithAuth");
+    }
+    return await fetch(resource, {
+      ...options,
+      headers: {
+        Authorization: `Bearer ${token}`,
+        ...options?.headers,
+      },
+    });
+  },
+});
+
+function casdoorAuth(
+  user: User,
+  setUser: (user: User) => void,
+  sdkConfig: SdkConfig,
+  signinOrigin?: string,
+  signinPath?: string,
+): CasdoorAuth {
+  const sdk = new Sdk(sdkConfig);
+  return {
+    mode: "casdoor",
+    sdk,
+    login(redirect?: string) {
+      location.href = sdk.getSigninUrl();
+      if (redirect) {
+        sessionStorage.setItem("login_redirect", redirect);
+      }
+    },
+    async callback() {
+      // sdk 的类型声明有误
+      const resp = (await sdk.signin(
+        signinOrigin ?? location.origin,
+        signinPath,
+      )) as unknown as { token?: string };
+      const token = resp.token;
+      if (!token) {
+        throw new Error("登录 API 返回了异常的结果：" + JSON.stringify(resp));
+      }
+      localStorage.setItem("access_token", token);
+      setUser({
+        accessToken: token,
+        get decodedAccessToken() {
+          return jwtDecode<AccessTokenPayload>(token);
+        },
+      });
+    },
+    async validate() {
+      const token = user.accessToken;
+      if (!token) {
+        throw new Error("未登录！");
+      }
+      // sdk 的类型声明有误
+      const resp = (await sdk.getUserInfo(token)) as unknown as
+        | UserInfo
+        | { status: "error" };
+      if ("status" in resp) {
+        localStorage.removeItem("access_token");
+        setUser({});
+        throw new Error("登陆状态无效！");
+      } else {
+        setUser({ ...user, userInfo: resp });
+      }
+    },
+    ...commonAuth(user, setUser),
+    ...(user as CasdoorUser),
+  };
 }
 
+const localAuth = (
+  user: User,
+  setUser: (user: User) => void,
+  loginPage: string,
+  signinOrigin?: string,
+  signinPath?: string,
+): LocalAuth => ({
+  mode: "local",
+  login(redirect) {
+    location.href = loginPage;
+    if (redirect) {
+      sessionStorage.setItem("login_redirect", redirect);
+    }
+  },
+  async localLogin(username, password) {
+    const resp = await fetch(
+      new URL(signinPath ?? "/api/signin", signinOrigin ?? location.origin),
+      {
+        method: "post",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      },
+    );
+    if (resp.status !== 200) {
+      throw new Error("账号或密码错误！");
+    }
+    const json = await resp.json();
+    const token = json.token;
+    if (typeof token !== "string") {
+      throw new Error("登录 API 返回了异常的结果：" + JSON.stringify(json));
+    }
+    localStorage.setItem("access_token", token);
+    setUser({
+      accessToken: token,
+      get decodedAccessToken() {
+        return jwtDecode<AccessTokenPayload>(token);
+      },
+    });
+    const redirect = sessionStorage.getItem("login_redirect");
+    sessionStorage.removeItem("login_redirect");
+    location.href = redirect ?? "/";
+  },
+  async callback() {},
+  async validate() {
+    const token = user.accessToken;
+    if (!token) {
+      throw new Error("未登录！");
+    }
+    const resp = await fetch(
+      new URL("/api/userInfo", signinOrigin ?? location.origin),
+      { headers: { Authorization: `Bearer ${token}` } },
+    );
+    try {
+      if (resp.status !== 200) {
+        throw new Error("登陆状态无效！");
+      }
+      const json = await resp.json();
+      if (!json.data) {
+        throw new Error("登陆状态无效！");
+      }
+      setUser({ ...user, userInfo: json.data });
+    } catch (err) {
+      localStorage.removeItem("access_token");
+      setUser({});
+      throw err;
+    }
+  },
+  ...commonAuth(user, setUser),
+  ...(user as LocalUser),
+});
+
 const AuthContext = createContext<Auth | undefined>(undefined);
 
 /**
@@ -163,12 +407,23 @@ export function useAuth(user: string = "useAuth") {
 }
 
 export interface AuthProviderProps {
+  /**
+   * 要使用的登录机制。
+   *
+   * - `"casdoor"`：基于 Casdoor 的登录系统。
+   * - `"local"`：场站端使用的内网登录系统。
+   *
+   * @default "casdoor"
+   */
+  mode?: "casdoor" | "local";
   /**
    * 用于初始化 Casdoor SDK 的配置对象。
    * {@linkcode SdkConfig.redirectPath | sdkConfig.redirectPath} 应该指向一个包含
    * {@linkcode AuthCallback} 组件的路径。
    */
-  sdkConfig: SdkConfig;
+  sdkConfig?: SdkConfig;
+  /** {@linkcode mode | mode: "local"} 时，登录页面的路径。*/
+  loginPage?: string;
   /**
    * 登录 API 的源点，末尾不带 `/`。
    * @default location.origin
@@ -210,73 +465,37 @@ export function AuthProvider(props: AuthProviderProps): ReactNode {
     }
   });
   const auth = useMemo<Auth>(() => {
-    const sdk = new Sdk(props.sdkConfig);
-    return {
-      sdk,
-      login(redirect) {
-        location.href = sdk.getSigninUrl();
-        if (redirect) {
-          sessionStorage.setItem("login_redirect", redirect);
-        }
-      },
-      async callback() {
-        // sdk 的类型声明有误
-        const resp = (await sdk.signin(
-          props.signinOrigin ?? location.origin,
-          props.signinPath,
-        )) as unknown as { token?: string };
-        const token = resp.token;
-        if (!token) {
-          throw new Error("登录 API 返回了异常的结果：" + JSON.stringify(resp));
-        }
-        localStorage.setItem("access_token", token);
-        setUser({
-          accessToken: token,
-          get decodedAccessToken() {
-            return jwtDecode<AccessTokenPayload>(token);
-          },
-        });
-      },
-      async validate() {
-        const token = user.accessToken;
-        if (!token) {
-          throw new Error("未登录！");
-        }
-        // sdk 的类型声明有误
-        const resp = (await sdk.getUserInfo(token)) as unknown as
-          | UserInfo
-          | { status: "error" };
-        if ("status" in resp) {
-          localStorage.removeItem("access_token");
-          setUser({});
-          throw new Error("登陆状态无效！");
-        } else {
-          setUser({ ...user, userInfo: resp });
-        }
-      },
-      logout(redirect) {
-        localStorage.removeItem("access_token");
-        setUser({});
-        if (redirect) {
-          location.href = redirect;
-        }
-      },
-      async fetchWithAuth(resource, options) {
-        const token = user.accessToken;
-        if (!token) {
-          throw new Error("未登录时无法使用 fetchWithAuth");
-        }
-        return await fetch(resource, {
-          ...options,
-          headers: {
-            Authorization: `Bearer ${token}`,
-            ...options?.headers,
-          },
-        });
-      },
-      ...user,
-    };
-  }, [props.sdkConfig, props.signinOrigin, props.signinPath, user]);
+    if ((props.mode ?? "casdoor") === "casdoor") {
+      if (!props.sdkConfig) {
+        throw new Error(`设置了 mode === "casdoor"，却没有设置 sdkConfig！`);
+      }
+      return casdoorAuth(
+        user,
+        setUser,
+        props.sdkConfig,
+        props.signinOrigin,
+        props.signinPath,
+      );
+    } else {
+      if (!props.loginPage) {
+        throw new Error(`设置了 mode === "local"，却没有设置 loginPage！`);
+      }
+      return localAuth(
+        user,
+        setUser,
+        props.loginPage,
+        props.signinOrigin,
+        props.signinPath,
+      );
+    }
+  }, [
+    props.mode,
+    props.sdkConfig,
+    props.loginPage,
+    props.signinOrigin,
+    props.signinPath,
+    user,
+  ]);
   return (
     <AuthContext.Provider value={auth}>{props.children}</AuthContext.Provider>
   );

package/src/components/Sidebar.tsx

@@ -104,70 +104,6 @@ export interface SidebarProps extends MenuProps {
   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} 属性，
@@ -202,6 +138,11 @@ function Sidebar(props: SidebarProps) {
   } = props;
 
   const [collapsed, setCollapsed] = useState(false);
+  // 默认展开到 selectedKeys
+  const [openKeys, setOpenKeys] = useState<string[]>(
+    () =>
+      rest.selectedKeys?.flatMap((key) => findKeyPath(items, key) ?? []) ?? [],
+  );
   const { cx, styles, theme: token } = useStyles(collapsed);
 
   return (
@@ -232,6 +173,8 @@ function Sidebar(props: SidebarProps) {
         mode="inline"
         items={items}
         inlineCollapsed={collapsible ? collapsed : false}
+        openKeys={openKeys}
+        onOpenChange={(openKeys) => setOpenKeys(openKeys)}
         className={cx(styles.sidebarMenu)}
         {...rest}
       />
@@ -248,3 +191,85 @@ function Sidebar(props: SidebarProps) {
 }
 
 export default Sidebar;
+
+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,
+    };
+  },
+);
+
+function findKeyPath(items: MenuItem[], key: string): string[] | null {
+  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 as string, ...childrenResult];
+      }
+    }
+  }
+  return null;
+}