@tsingroc/tsingroc-components 3.14.0 → 3.14.1

package/dist/components/TsingrocTheme.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConfigProvider, theme } from "antd";
 import dayjs from "dayjs";
-import zhCN from "antd/locale/zh_CN";
+import zhCN from "antd/es/locale/zh_CN";
 import "dayjs/locale/zh-cn";
 /**
  * 清鹏智能的公共 Ant Design 主题，会影响内部的所有 Ant Design 组件的样式。

package/dist/components/TsingrocTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsingrocTheme.js","sourceRoot":"","sources":["../../src/components/TsingrocTheme.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,oBAAoB,CAAC;AAS5B;;;GAGG;AACH,SAAS,aAAa,CAAC,KAAyB;IAC9C,sBAAsB;IACtB,kDAAkD;IAClD,YAAY;IACZ,oeAAoe;IACpe,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE;YACL,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB;YACpE,KAAK,EAAE,KAAK,CAAC,IAAI;gBACf,CAAC,CAAC;oBACE,YAAY,EAAE,SAAS;oBACvB,SAAS,EAAE,SAAS;oBACpB,YAAY,EAAE,SAAS;iBACxB;gBACH,CAAC,CAAC;oBACE,YAAY,EAAE,SAAS;oBACvB,SAAS,EAAE,SAAS;oBACpB,YAAY,EAAE,SAAS;iBACxB;SACN,YAEA,KAAK,CAAC,QAAQ,GACA,CAClB,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TsingrocTheme.js","sourceRoot":"","sources":["../../src/components/TsingrocTheme.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,sBAAsB,CAAC;AACxC,OAAO,oBAAoB,CAAC;AAS5B;;;GAGG;AACH,SAAS,aAAa,CAAC,KAAyB;IAC9C,sBAAsB;IACtB,kDAAkD;IAClD,YAAY;IACZ,oeAAoe;IACpe,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE;YACL,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB;YACpE,KAAK,EAAE,KAAK,CAAC,IAAI;gBACf,CAAC,CAAC;oBACE,YAAY,EAAE,SAAS;oBACvB,SAAS,EAAE,SAAS;oBACpB,YAAY,EAAE,SAAS;iBACxB;gBACH,CAAC,CAAC;oBACE,YAAY,EAAE,SAAS;oBACvB,SAAS,EAAE,SAAS;oBACpB,YAAY,EAAE,SAAS;iBACxB;SACN,YAEA,KAAK,CAAC,QAAQ,GACA,CAClB,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@tsingroc/tsingroc-components",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "author": "",
   "license": "ISC",
   "description": "",
   "keywords": [],
   "type": "module",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
@@ -17,7 +16,8 @@
     "./echarts/gl": "./dist/echarts/gl.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/Auth.tsx

@@ -0,0 +1,389 @@
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+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 {
+  /**
+   * 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 UserInfo {
+  /**
+   * 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[];
+}
+
+interface User {
+  /** 用户的个人信息，未经过 {@linkcode AuthCheck} 验证时为空。*/
+  userInfo?: UserInfo;
+  /** Access Token，未登录时为空。*/
+  accessToken?: string;
+  /** 解码后的 Access Token，未登录时为空。这里也会有一些用户的个人信息。*/
+  decodedAccessToken?: AccessTokenPayload;
+}
+
+export interface Auth extends User {
+  /** 全局的 Casdoor SDK 对象。*/
+  sdk: Sdk;
+  /**
+   * 跳转到登录。
+   *
+   * 参数 `redirect` 可以填入登录完成后要跳转到的地址。如果省略，那么跳转目标将由
+   * {@linkcode AuthCallback} 的 {@linkcode AuthCallbackProps.onRedirect | onRedirect}
+   * 属性决定，默认为跳转到主页。
+   */
+  login(redirect?: string): void;
+  /** 从登录页面返回时应该调用的回调。当登录状态无效时会**抛出异常**。*/
+  callback(): Promise<void>;
+  /** 在线检查用户是否登录。用户未登录时会**抛出异常**。*/
+  validate(): Promise<void>;
+  /**
+   * 登出。
+   *
+   * 参数 `redirect` 可以填入登出后跳转到的地址。如果省略，默认为**不做任何跳转**。
+   * 你也可以在登出后手动加一行跳转操作，比如使用 React Router 的 `navigate`。
+   */
+  logout(redirect?: string): void;
+  /**
+   * 以当前用户的 access token 作为 bearer token 发起请求。
+   * 用法与正常的 {@linkcode fetch} 完全一致。未登录时，返回的 Promise 会立即失败。
+   */
+  fetchWithAuth(
+    resource: RequestInfo | URL,
+    options?: RequestInit,
+  ): Promise<Response>;
+}
+
+const AuthContext = createContext<Auth | undefined>(undefined);
+
+/**
+ * 获取登录鉴权相关的工具函数和全局状态。必须在 {@linkcode AuthProvider} 内部才能使用。
+ *
+ * 参数 `user` 仅供组件库内部使用，编写项目代码时可以忽略。
+ */
+export function useAuth(user: string = "useAuth") {
+  const auth = useContext(AuthContext);
+  if (auth === undefined) {
+    throw new Error(user + " 必须在 AuthProvider 内部使用！");
+  }
+  return auth;
+}
+
+export interface AuthProviderProps {
+  /**
+   * 用于初始化 Casdoor SDK 的配置对象。
+   * {@linkcode SdkConfig.redirectPath | sdkConfig.redirectPath} 应该指向一个包含
+   * {@linkcode AuthCallback} 组件的路径。
+   */
+  sdkConfig: SdkConfig;
+  /**
+   * 登录 API 的源点，末尾不带 `/`。
+   * @default location.origin
+   */
+  signinOrigin?: string;
+  /**
+   * 登陆 API 的路径。
+   * @default "/api/signin"
+   */
+  signinPath?: string;
+  /** 需要管理登录状态的内容。*/
+  children: ReactNode;
+}
+
+/**
+ * 为包裹的内容提供登陆状态管理服务，通常应该包裹在整个 App 组件外部。
+ *
+ * 使用时至少需要提供 {@linkcode AuthProviderProps.sdkConfig | sdkConfig} 和
+ * {@linkcode AuthProviderProps.signinOrigin | signinOrigin} 两个属性。
+ * 其中，{@linkcode SdkConfig.redirectPath | sdkConfig.redirectPath} 应该指向一个包含
+ * {@linkcode AuthCallback} 组件的路径。
+ *
+ * 在 {@linkcode AuthProvider} 的内部，
+ * 可以使用 {@linkcode useAuth} 来获取登录鉴权相关的工具函数和全局状态，
+ * 也可以使用 {@linkcode AuthCheck} 来确保某个页面或内容只有已登录用户可以访问。
+ */
+export function AuthProvider(props: AuthProviderProps): ReactNode {
+  const [user, setUser] = useState<User>(() => {
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      return {};
+    } else {
+      return {
+        accessToken: token,
+        get decodedAccessToken() {
+          return jwtDecode<AccessTokenPayload>(token);
+        },
+      };
+    }
+  });
+  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]);
+  return (
+    <AuthContext.Provider value={auth}>{props.children}</AuthContext.Provider>
+  );
+}
+
+export interface AuthCheckProps {
+  /**
+   * 用户必须拥有的角色。用户必须拥有这里列出的所有角色才能访问被保护的内容。
+   * 如果省略，则只需要登录即可访问。
+   */
+  roles?: string[];
+  /**
+   * 在检查过程中时向用户显示的加载界面。
+   * @default "正在登录……"
+   */
+  loading?: ReactNode;
+  /**
+   * 当用户未登录或登录状态验证失败时的回调。默认会跳转到登录。
+   * @default () => auth.login(location.href) // auth = useAuth()
+   */
+  onFail?: (err: unknown) => void;
+  /**
+   * 用户已登录，但不满足权限要求时显示的内容。
+   * @default "您无权访问此页面！"
+   */
+  forbidden?: ReactNode;
+  /** 用户登录后显示的内容。*/
+  children: ReactNode;
+}
+
+/**
+ * 在线检查用户是否登录、是否满足权限要求。
+ * 未登录的用户会被跳转到登录，不满足权限要求的用户会见到警告信息，只有检验通过的用户才能访问内部的内容。
+ *
+ * 该组件必须在 {@linkcode AuthProvider} 内部才能使用。
+ */
+export function AuthCheck(props: AuthCheckProps): ReactNode {
+  const auth = useAuth("AuthCheck");
+  const userInfo = auth.userInfo;
+  // 用于确保在 Strict Mode 下副作用也只执行一次
+  const effectDone = useRef(false);
+  useEffect(() => {
+    if (effectDone.current) return;
+    effectDone.current = true;
+    if (!auth.userInfo) {
+      auth.validate().catch(props.onFail ?? (() => auth.login(location.href)));
+    }
+    // 这个副作用只在首次渲染时执行
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (userInfo) {
+    if ((props.roles ?? []).every((role) => userInfo.roles.includes(role))) {
+      return props.children;
+    } else {
+      return props.forbidden ?? "您无权访问此页面！";
+    }
+  } else {
+    return props.loading ?? "正在登录……";
+  }
+}
+
+export interface AuthCallbackProps {
+  /**
+   * 跳转时的回调。传入的 `redirect` 参数就是 {@linkcode Auth.login | login} 函数的参数。
+   * @default (redirect) => { location.href = redirect ?? "/"; }
+   */
+  onRedirect?: (redirect?: string) => void;
+  /**
+   * 发生错误时显示的内容。
+   * @default (err) => err.toString()
+   */
+  error?: (err: unknown) => ReactNode;
+  /**
+   * 跳转前显示的内容。
+   * @default "正在跳转……"
+   */
+  children?: ReactNode;
+}
+
+/**
+ * 从登录页面返回到的回调页面。
+ *
+ * 该组件必须在 {@linkcode AuthProvider} 内部才能使用。
+ */
+export function AuthCallback(props: AuthCallbackProps): ReactNode {
+  const auth = useAuth("AuthCallback");
+  const [error, setError] = useState<unknown>();
+  // 用于确保在 Strict Mode 下副作用也只执行一次
+  const effectDone = useRef(false);
+  useEffect(() => {
+    if (effectDone.current) return;
+    effectDone.current = true;
+    const redirect = sessionStorage.getItem("login_redirect");
+    sessionStorage.removeItem("login_redirect");
+    auth.callback().then(() => {
+      if (props.onRedirect) {
+        props.onRedirect(redirect ?? undefined);
+      } else {
+        location.href = redirect ?? "/";
+      }
+    }, setError);
+    // 这个副作用只在首次渲染时执行
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (error) {
+    return props.error ? props.error(error) : (error as object).toString();
+  } else {
+    return props.children ?? "正在跳转……";
+  }
+}

package/src/components/Calendar.tsx

@@ -0,0 +1,182 @@
+import dayjs, { type Dayjs } from "dayjs";
+import { createStyles } from "antd-style";
+import localeData from "dayjs/plugin/localeData";
+import { useState } from "react";
+
+export interface CalendarProps
+  extends Omit<React.HTMLAttributes<HTMLTableElement>, "onChange"> {
+  /**
+   * 当前显示的月份。
+   *
+   * 注意：传入的月份的时区会决定整个日历所用的时区。
+   */
+  month: Dayjs;
+  /** 当前选中的日期。*/
+  selected?: Dayjs;
+  /** 选中日期更改时的回调函数。*/
+  onChange?: (selected: Dayjs) => void;
+  /**
+   * 无论一个月需要占用多少周，都总是显示 6 周。
+   * @default false
+   */
+  alwaysSixWeeks?: boolean;
+  /**
+   * 淡化第一周和最后几周不属于本月的日期。
+   * @default true
+   */
+  fadeAdjacentDays?: boolean;
+  /**
+   * 表头单元格的属性，详见 [MDN][1]。可以通过设置这里的 `children` 来自定义表头内容。
+   *
+   * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+   */
+  thProps?: (
+    /**
+     * 范围 0-6，表示一周的第几天
+     *
+     * 注意：这个数字的含义会受到地区设置的影响！请使用 `dayjs.weekdays()` 获取每一天的名称。
+     */
+    weekday: number,
+  ) => React.HTMLAttributes<HTMLTableCellElement>;
+  /**
+   * 日期单元格的属性，详见 [MDN][1]。可以通过设置这里的 `children` 来自定义单元格内容。
+   *
+   * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+   */
+  tdProps?: (
+    date: Dayjs,
+    selected: boolean,
+  ) => React.HTMLAttributes<HTMLTableCellElement>;
+}
+
+dayjs.extend(localeData);
+
+const useStyles = createStyles(({ token, css, cx }) => {
+  const calendarFade = css`
+    color: ${token.colorTextDisabled};
+  `;
+  const calendarSelected = css`
+    background: ${token.colorPrimaryBg};
+    color: ${token.colorPrimary};
+  `;
+  const calendar = css`
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    font-family: ${token.fontFamily};
+    font-size: ${token.fontSize}px;
+    line-height: ${token.lineHeight};
+    user-select: none;
+
+    > thead > tr > th {
+      box-sizing: border-box;
+      height: ${token.fontSize * token.lineHeight + token.paddingXXS * 2}px;
+      padding: ${token.paddingXXS}px;
+      font-weight: normal;
+    }
+
+    > tbody > tr > td {
+      box-sizing: border-box;
+      width: calc(100% / 7);
+      border: 1px solid ${token.colorBorder};
+      padding: ${token.paddingXXS}px;
+      vertical-align: bottom;
+      transition:
+        background ease ${token.motionDurationFast},
+        color ease ${token.motionDurationFast};
+
+      &:hover:not(.${cx(calendarSelected)}) {
+        background: ${token.colorBgTextHover};
+      }
+    }
+  `;
+  return {
+    calendar,
+    calendarFade,
+    calendarSelected,
+  };
+});
+
+/**
+ * 一个日历组件。
+ *
+ * 除了文档列出的属性之外，也接受所有 [HTML Table 元素][1] 接受的属性。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ */
+function Calendar(props: CalendarProps) {
+  const {
+    month,
+    selected: propsSelected,
+    onChange,
+    alwaysSixWeeks,
+    fadeAdjacentDays = true,
+    thProps,
+    tdProps,
+    className,
+    ...rest
+  } = props;
+  const { cx, styles } = useStyles();
+
+  const [selected, setSelected] =
+    propsSelected === undefined
+      ? // eslint-disable-next-line react-hooks/rules-of-hooks
+        useState<Dayjs | undefined>()
+      : [propsSelected, () => {}];
+
+  const monthStart = month.startOf("month");
+  const calendarStart = monthStart.startOf("week");
+  const monthEnd = month.endOf("month");
+  const minWeeks = Math.ceil(monthEnd.diff(calendarStart, "week", true));
+  const weekdays = [...dayjs.weekdaysShort()];
+  // 按地区设置调整一周的第一天
+  weekdays.splice(0, 0, ...weekdays.splice(calendarStart.day()));
+  return (
+    <table {...rest} className={cx(styles.calendar, className)}>
+      <thead>
+        <tr>
+          {weekdays.map((name, weekday) => (
+            <th key={weekday} children={name} {...thProps?.(weekday)} />
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {Array.from({ length: alwaysSixWeeks ? 6 : minWeeks }, (_, week) => (
+          <tr key={week}>
+            {Array(7)
+              .fill(null)
+              .map((_, weekday) => {
+                const date = calendarStart.add(week * 7 + weekday, "day");
+                const fade =
+                  fadeAdjacentDays && date.month() != monthStart.month();
+                const isSelected =
+                  Math.floor(selected?.diff(date, "day", true) ?? NaN) === 0;
+                const { className, ...props } = tdProps?.(date, false) ?? {};
+                return (
+                  <td
+                    key={weekday}
+                    children={date.date()}
+                    onClick={() => {
+                      setSelected(date);
+                      onChange?.(date);
+                    }}
+                    {...props}
+                    className={cx(
+                      {
+                        [styles.calendarFade]: fade,
+                        [styles.calendarSelected]: isSelected,
+                      },
+                      className,
+                    )}
+                  />
+                );
+              })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default Calendar;

package/src/components/CircularProgress.tsx

@@ -0,0 +1,38 @@
+import { Progress, type ProgressProps } from "antd";
+import type { ProgressGradient } from "antd/es/progress/progress";
+
+export interface CircularProgressProps
+  extends ProgressProps,
+    React.RefAttributes<HTMLDivElement> {
+  /** 进度百分比，范围是 0-100。*/
+  progress?: number;
+  /**
+   * 进度条已完成部分的颜色。
+   * @default "#34A9D4"
+   */
+  color?: string | string[] | ProgressGradient;
+}
+
+/**
+ * 环形进度条。
+ *
+ * 本组件基于 [Ant Design 的 `Progress`][1] 自定义而来。
+ * 因此，除了文档中列出的属性以外，也兼容 `Progress` 的所有属性。
+ *
+ * [1]: https://ant-design.antgroup.com/components/progress-cn
+ */
+function CircularProgress(props: CircularProgressProps) {
+  return (
+    <Progress
+      type="circle"
+      percent={props.progress}
+      strokeLinecap="butt"
+      strokeWidth={9}
+      strokeColor={props.color ?? "#34A9D4"}
+      trailColor="#22405A"
+      {...props}
+    />
+  );
+}
+
+export default CircularProgress;