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

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@tsingroc/tsingroc-components",
-  "version": "4.8.0",
+  "version": "5.0.0-alpha.10",
   "author": "",
   "license": "ISC",
   "description": "",
   "keywords": [],
   "type": "module",
-  "main": "dist/index.js",
+  "main": "src/index.ts",
   "sideEffects": [
     "**/*.css"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./echarts": "./dist/echarts/index.js",
-    "./echarts/gl": "./dist/echarts/gl.js"
+    ".": "./src/index.ts",
+    "./echarts": "./src/echarts/index.ts",
+    "./echarts/gl": "./src/echarts/gl.ts",
+    "./utils/*": "./src/utils/*.ts"
   },
   "files": [
-    "dist",
     "src"
   ],
   "scripts": {
@@ -25,14 +25,14 @@
     "lint": "eslint .",
     "format": "prettier . -w && eslint . --fix",
     "build": "tsc -b --force && copyfiles -u 1 src/**/*.d.ts dist",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "tsc -b --force",
     "docs:build": "rspress build",
     "docs:preview": "rspress preview"
   },
   "dependencies": {
     "casdoor-js-sdk": "^0.16.0",
     "dayjs": "^1.11.18",
-    "deck.gl": "^9.1.14",
+    "deck.gl": "^9.2.2",
     "geotiff": "^2.1.3",
     "jwt-decode": "^4.0.0",
     "react-icons": "^5.5.0",
@@ -41,40 +41,41 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "^6.0.0",
-    "antd": "^5.27.1",
+    "antd": "^5.27.5",
     "antd-style": "^3.7.1",
     "echarts": "^5.6.0 || ^6.0.0",
     "echarts-for-react": "^3.0.2",
     "echarts-gl": "^2.0.9",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.0.0",
-    "@eslint/js": "^9.21.0",
+    "@ant-design/icons": "^6.1.0",
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "@eslint/js": "^9.38.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@rspress/plugin-preview": "2.0.0-beta.2",
-    "@types/node": "^22.18.0",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
-    "antd": "^5.27.1",
+    "@rspress/core": "^2.0.0-beta.34",
+    "@rspress/plugin-preview": "^2.0.0-beta.34",
+    "@types/node": "^22.18.11",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "antd": "^5.27.5",
     "antd-style": "^3.7.1",
     "copyfiles": "^2.4.1",
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.4",
     "echarts-gl": "^2.0.9",
-    "eslint": "^9.34.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.3.0",
+    "eslint": "^9.38.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "globals": "^16.4.0",
     "prettier": "^3.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "rspress": "2.0.0-beta.2",
-    "typedoc": "^0.28.12",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.41.0"
+    "typedoc": "^0.28.14",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.1"
   },
   "overrides": {
     "echarts-gl": {

package/src/components/Auth.tsx

@@ -544,7 +544,12 @@ export function AuthCheck(props: AuthCheckProps): ReactNode {
     if (effectDone.current) return;
     effectDone.current = true;
     if (!auth.userInfo) {
-      auth.validate().catch(props.onFail ?? (() => auth.login(location.href)));
+      auth.validate().catch(
+        props.onFail ??
+          (() => {
+            auth.login(location.href);
+          }),
+      );
     }
     // 这个副作用只在首次渲染时执行
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/AutoResizedECharts.tsx

@@ -0,0 +1,70 @@
+import {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type ComponentType,
+} from "react";
+
+import { debugAssert } from "../utils/debug";
+import type { EChartsHOCType, EChartsProps, EChartsRef } from "./ECharts";
+import EChartsInstance from "./ECharts";
+
+/**
+ * 为 ECharts 增加自适应容器尺寸的能力。
+ *
+ * 该组件通常需要添加类似 `width: 100%; height: 100%;` 的 CSS 属性，或者放在 Flex/Grid
+ * 容器中。
+ *
+ * 为了保证图像能正常缩小，如果使用 Flex，请务必设置 flex 方向上的
+ * `min-width`/`min-height`；在 Grid 中则需要确保 ECharts 所在的行/列的宽度设置为
+ * `minmax(..., ...fr)` 而不可直接使用 `fr`。不这么做会导致图像只能放大而无法缩小。
+ */
+export const withAutoResize: EChartsHOCType =
+  <Props extends EChartsProps>(ECharts: ComponentType<Props>) =>
+  (props: Props) => {
+    "use memo";
+    const { ref: outerRef, ...rest } = props;
+
+    const ref = useRef<EChartsRef>(null);
+    useImperativeHandle(outerRef, () => {
+      debugAssert(ref.current, "ref should be connected");
+      return ref.current;
+    }, []);
+
+    useEffect(() => {
+      let firstFire = true;
+      const observer = new ResizeObserver(() => {
+        // 首次触发时不调整大小，以免打断动画
+        if (firstFire) {
+          firstFire = false;
+        } else {
+          debugAssert(
+            ref.current,
+            "observer event should only be triggered when ref is connected",
+          );
+          ref.current.instance?.resize();
+        }
+      });
+      debugAssert(ref.current, "effect should run after ref is connected");
+      observer.observe(ref.current.container);
+      return () => observer.disconnect();
+    }, []);
+
+    // @ts-expect-error 严格来说 { ref, ...rest } 不一定就是 Props，
+    // 因为 Props 可能是一个类，而 { ref, ...rest } 显然不是这个类的实例。
+    // 理想情况下，我们应该规定 Props 必须不能是类。
+    // 然而，TypeScript 的类型系统没有办法编码这样的约束。
+    // 由于 React 组件的属性对象实际上通常不会是一个类的实例，
+    // 否则这个组件会无法使用 JSX 语法实例化，因此这里可以忽略类型错误。
+    return <ECharts ref={ref} {...rest} />;
+  };
+
+/**
+ * 预置了自适应容器尺寸能力的 ECharts 组件。
+ *
+ * @see {@linkcode withAutoResize}
+ */
+const AutoResizedECharts = Object.assign(withAutoResize(EChartsInstance), {
+  displayName: "AutoResizedECharts",
+});
+export default AutoResizedECharts;

package/src/components/ConnectedECharts.tsx

@@ -0,0 +1,62 @@
+import * as echarts from "echarts/core";
+import {
+  createContext,
+  use,
+  useId,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+
+import AutoResizedECharts, { type withAutoResize } from "./AutoResizedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { EChartsHOCType, EChartsProps } from "./ECharts";
+
+const EChartsConnectorContext = createContext<string>("default");
+
+/**
+ * 为 {@linkcode ConnectedECharts}/{@linkcode withConnector | withConnector(ECharts)}
+ * 提供联动上下文，只有同一个上下文内的 ECharts 会联动。
+ */
+export function EChartsConnector({ children }: { children: ReactNode }) {
+  const group = useId();
+  return (
+    <EChartsConnectorContext.Provider value={group}>
+      {children}
+    </EChartsConnectorContext.Provider>
+  );
+}
+
+/**
+ * 为 ECharts 增加联动能力。所有添加了该能力的 ECharts 都会相互联动。
+ *
+ * 可以使用 {@linkcode EChartsConnector} 将同一个页面上的 ECharts
+ * 划分为多个组，不同组的 ECharts 不会联动。也可以使用 `group` 属性手动指定联动组。
+ */
+export const withConnector: EChartsHOCType<{ group?: string }> =
+  <Props extends EChartsProps>(ECharts: ComponentType<Props>) =>
+  (props: Props & { group?: string }) => {
+    "use memo";
+    const contextGroup = use(EChartsConnectorContext);
+    const { onInit, group = contextGroup, ...rest } = props;
+    return (
+      // @ts-expect-error 见 ./AutoResizedECharts.tsx
+      <ECharts
+        onInit={(instance) => {
+          instance.group = group;
+          echarts.connect(group);
+          return onInit?.(instance);
+        }}
+        {...rest}
+      />
+    );
+  };
+
+/**
+ * 预置了联动和自适应容器尺寸能力的 ECharts。
+ *
+ * @see {@linkcode withConnector}
+ * @see {@linkcode withAutoResize}
+ */
+const ConnectedECharts = Object.assign(withConnector(AutoResizedECharts), {
+  displayName: "ConnectedECharts",
+});
+export default ConnectedECharts;

package/src/components/ECharts.tsx

@@ -0,0 +1,206 @@
+import type { EChartsOption } from "echarts";
+import type {
+  EChartsCoreOption,
+  EChartsInitOpts,
+  ECharts as EChartsInstance,
+  SetOptionOpts,
+} from "echarts/core";
+import * as echarts from "echarts/core";
+import {
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useRef,
+  type ComponentType,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from "react";
+
+import { debugAssert } from "../utils/debug";
+
+export interface EChartsProps<Option extends EChartsCoreOption = EChartsOption>
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * 用于命令式操作 ECharts 容器和实例的 ref。
+   *
+   * 注意 effect 首次执行时 ECharts 实例尚未被创建。如果需要在 ECharts
+   * 实例上添加事件监听器或者执行其它的初始化操作，请使用 {@linkcode onInit}。
+   */
+  ref?: Ref<EChartsRef>;
+  /** 主题。 @default "default" */
+  theme?: string | Record<string, any> | null;
+  /**
+   * 初始化实例时的选项。
+   *
+   * 修改该属性会导致 ECharts 实例被销毁并重新创建，因此建议不要频繁修改该属性，并且推荐使用
+   * React Compiler 或者 useMemo 将该属性记忆化。
+   */
+  initOpts?: EChartsInitOpts;
+  /** 配置对象。 */
+  option?: Option;
+  /**
+   * 更新 {@linkcode option} 时的选项。其中的 {@linkcode SetOptionOpts.silent | silent}
+   * 选项也会在更新 {@linkcode theme} 时使用。
+   *
+   * 注意该属性变化后只会从下一次 option 更新开始生效。
+   */
+  setOptionOpts?: SetOptionOpts;
+  /**
+   * 初始化实例（`echarts.init()`）后执行的回调。如果返回函数，则会在销毁实例（`instance.dispose()`）之前调用。
+   *
+   * 推荐在这个回调中为 ECharts 实例添加事件监听器。
+   */
+  onInit?: (instance: EChartsInstance) => void | undefined | (() => void);
+  /** option 更新（`instance.setOption()`）后执行的回调。注意如果设置了 {@linkcode lazyUpdate}，那么这个回调大概率没什么用。 */
+  onSetOption?: (instance: EChartsInstance) => void;
+}
+
+export interface EChartsRef {
+  /** 容纳 ECharts 画布的 div 容器。 */
+  container: HTMLDivElement;
+  /** ECharts 实例。注意该实例在 ref 连接时尚未创建，如果要在实例创建时执行代码请使用 {@linkcode EChartsProps.onInit | onInit} 属性。 */
+  instance?: EChartsInstance;
+}
+
+/** 用于 HOC 的返回值。 */
+export type EChartsComponentType<Extra> = <
+  Option extends EChartsCoreOption = EChartsOption,
+>(
+  props: EChartsProps<Option> & Extra,
+) => ReactNode;
+
+/** 用于方便定义 HOC。 */
+export interface EChartsHOCType<Extra = {}> {
+  <PrevExtra>(
+    ECharts: EChartsComponentType<PrevExtra>,
+  ): EChartsComponentType<PrevExtra & Extra>;
+  <Props extends EChartsProps>(
+    ECharts: (props: Props) => ReactNode,
+  ): (props: Props & Extra) => ReactNode;
+  <Props extends EChartsProps>(
+    ECharts: ComponentType<Props>,
+  ): ComponentType<Props & Extra>;
+}
+
+/**
+ * ECharts 的 React 封装，支持 `theme`、`opts` 等初始化参数和 `option` 配置的响应式更新。
+ */
+const ECharts: EChartsComponentType<{}> = <
+  Option extends EChartsCoreOption = EChartsOption,
+>(
+  props: EChartsProps<Option>,
+) => {
+  const {
+    ref: outerRef,
+    theme,
+    initOpts: opts,
+    option,
+    setOptionOpts,
+    onInit,
+    onSetOption,
+    ...rest
+  } = props;
+
+  const ref = useRef<EChartsRef>(null);
+  useForwardEChartsRef(outerRef, ref);
+
+  // theme 变化时，设置 theme
+  const setTheme = useEffectEvent(
+    (theme: string | Record<string, any> | null | undefined) => {
+      debugAssert(ref.current, "effect should run after ref is connected");
+      ref.current.instance?.setTheme(theme ?? "default", {
+        silent: setOptionOpts?.silent,
+      });
+    },
+  );
+  // 没必要判断是否首次运行，因为首次运行时 ref.current?.instance 必定为 undefined
+  useEffect(() => setTheme(theme), [theme]);
+
+  // option 变化时，设置 option
+  const setOption = useEffectEvent(
+    (option: Option, isInit: boolean = false) => {
+      debugAssert(ref.current, "effect should run after ref is connected");
+      const { instance } = ref.current;
+      if (instance) {
+        instance.setOption(option, {
+          ...setOptionOpts,
+          // 在实例创建时，由于我们已经处在一个 animation frame，没必要再等待下一个 animation frame
+          lazyUpdate: !isInit && setOptionOpts?.lazyUpdate,
+        });
+        onSetOption?.(instance);
+      }
+    },
+  );
+  // 同理，没必要判断是否首次运行
+  useEffect(() => option && setOption(option), [option]);
+
+  // opts 变化时，重新创建实例
+  const onDisposeRef = useRef<() => void>(null);
+  const init = useEffectEvent((opts: EChartsInitOpts | undefined) => {
+    debugAssert(ref.current, "effect should run after ref is connected");
+    const { container, instance: existingInstance } = ref.current;
+    // 严格模式下由于 effect 被执行两次，第二次执行时 instance 已经创建，故应该跳过
+    if (existingInstance) return;
+    const instance = echarts.init(container, theme, opts);
+    ref.current = { container, instance };
+    onDisposeRef.current = onInit?.(instance) ?? null;
+    if (option) {
+      setOption(option, true);
+    }
+  });
+  const dispose = useEffectEvent(() => {
+    if (ref.current) {
+      const { container, instance } = ref.current;
+      if (instance) {
+        onDisposeRef.current?.();
+        instance.dispose();
+        ref.current = { container };
+      }
+    }
+  });
+  useEffect(() => {
+    // 将实例创建延迟到下一个 animation frame 以确保首次渲染尺寸正确
+    const animationFrame = requestAnimationFrame(() => init(opts));
+    return () => {
+      cancelAnimationFrame(animationFrame);
+      dispose();
+    };
+  }, [opts]);
+
+  return (
+    <div
+      ref={(container) => {
+        if (container === null) {
+          ref.current = null;
+        } else {
+          ref.current = { container };
+        }
+      }}
+      {...rest}
+    />
+  );
+};
+export default ECharts;
+
+// React Compiler 无法处理 getter
+function useForwardEChartsRef(
+  outerRef: Ref<EChartsRef> | undefined,
+  innerRef: RefObject<EChartsRef | null>,
+) {
+  useImperativeHandle(outerRef, () => {
+    debugAssert(innerRef.current, "ref should be connected");
+    return {
+      get container() {
+        debugAssert(innerRef.current, "ref should be connected");
+        return innerRef.current.container;
+      },
+      get instance() {
+        debugAssert(innerRef.current, "ref should be connected");
+        return innerRef.current.instance;
+      },
+    };
+    // oxlint-disable-next-line exhaustive-deps
+  }, []);
+}

package/src/components/LeftAlignedECharts.tsx

@@ -0,0 +1,190 @@
+import type { ECharts } from "echarts/core";
+import {
+  createContext,
+  use,
+  useEffect,
+  useEffectEvent,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import type { Element, ElementProps, Group } from "zrender";
+
+import { debugAssert } from "../utils/debug";
+import type { withAutoResize } from "./AutoResizedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
+import ConnectedECharts, { type withConnector } from "./ConnectedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { EChartsHOCType, EChartsProps, EChartsRef } from "./ECharts";
+
+interface LeftAlignContext {
+  maxLabelsWidth: number;
+  register: (id: string, size: number) => void;
+  unregister: (id: string) => void;
+}
+
+const LeftAlignContext = createContext<LeftAlignContext | null>(null);
+
+/**
+ * 为 {@linkcode LeftAlignedECharts} 和
+ * {@linkcode withLeftAlign | withLeftAlign(ECharts)}
+ * 提供对齐上下文。
+ */
+export function EChartsLeftAligner({ children }: { children: ReactNode }) {
+  const [labelsWidthMap, setLabelsWidthMap] = useState(
+    new Map<string, number>(),
+  );
+  return (
+    <LeftAlignContext.Provider
+      value={{
+        maxLabelsWidth: Math.max(...labelsWidthMap.values()),
+        register: (id, size) =>
+          setLabelsWidthMap((map) => new Map(map).set(id, size)),
+        unregister: (id) =>
+          setLabelsWidthMap(
+            (map) => ((map = new Map(map)), map.delete(id), map),
+          ),
+      }}
+    >
+      {children}
+    </LeftAlignContext.Provider>
+  );
+}
+
+function findLabelsGroup<T extends ElementProps>(
+  element: Element<T>,
+): Group | undefined {
+  if (element.isGroup) {
+    const group = element as Group;
+    if (group.children().every((el) => el.type === "text")) {
+      return group;
+    } else {
+      for (const child of group.children()) {
+        const found = findLabelsGroup(child);
+        if (found) {
+          return found;
+        }
+      }
+    }
+  }
+}
+
+function getLabelsWidth(instance: ECharts) {
+  const yAxis = instance
+    .getZr()
+    .storage.getRoots()
+    .find(
+      (it: unknown) =>
+        (it as { __ecComponentInfo: { mainType: string } }).__ecComponentInfo
+          .mainType === "yAxis",
+    );
+  if (!yAxis) {
+    return undefined;
+  }
+  const labelsGroup = findLabelsGroup(yAxis as unknown as Element);
+  if (!labelsGroup) {
+    return undefined;
+  }
+  // 不知道为什么，直接在 labelsGroup 上使用 getBoundingRect 测量到的宽度有时是错误的
+  const childrenWidths = labelsGroup
+    .children()
+    .map((it) => it.getBoundingRect().width);
+  return Math.max(...childrenWidths);
+}
+
+/**
+ * 为 ECharts 添加与其它 ECharts 纵轴左对齐的能力。
+ *
+ * 使用该组件时必须满足下列限制：
+ *
+ * - 必须包裹在 {@linkcode EChartsLeftAligner} 内，否则会立即抛出错误。
+ * - 图像所在的容器本身必须已经左对齐。
+ * - 图像中必须包含且仅包含一个 grid 坐标系。
+ *   如果图像不包含 grid，那么该组件不会产生任何效果。
+ *   如果图像包含多个 grid，那么该组件只会对齐其中一个 grid，且无法保证是哪一个。
+ * - grid 必须有且仅有一个纵轴，并且在左侧，不满足这一条件的影响同上一条。
+ * - grid 坐标系必须被设置为 `{ containLabel: true }` 或者
+ *   `{ outerBoundsMode: "same", outerBoundsContain: "axisLabel" }`。
+ *   这也是组件库内的 `echarts.grid()` 的默认设置。
+ *   如果你不这么设置，而是使用 `left` 和 `bottom` 来手动对齐轴线，那就没必要使用这个组件，强行使用可能导致布局异常。
+ * - grid 坐标系的 `left` 属性会被该组件覆盖，最终效果总是会使得纵轴标签最宽的坐标系的标签紧贴容器左边缘（即 `left === 0`）。
+ * - 左对齐时原本的过渡动画会被打断。
+ */
+export const withLeftAlign: EChartsHOCType =
+  <Props extends EChartsProps>(ECharts: ComponentType<Props>) =>
+  (props: Props) => {
+    "use memo";
+    const { ref: outerRef, option, onSetOption, ...rest } = props;
+
+    const ref = useRef<EChartsRef>(null);
+    useImperativeHandle(outerRef, () => {
+      debugAssert(ref.current, "ref should be connected");
+      return ref.current;
+    }, []);
+
+    const context = use(LeftAlignContext);
+    if (!context) {
+      throw new Error(
+        "LeftAlignedECharts or withLeftAlign(ECharts) must be wrapped inside an EChartsLeftAligner!",
+      );
+    }
+    const { maxLabelsWidth, register, unregister } = context;
+    const id = useId();
+    const [labelsWidth, setLabelsWidth] = useState<number | undefined>();
+
+    // 布局变化时，测量并报告最新的 labelsWidth 值
+    const reportLayoutChange = useEffectEvent((instance: ECharts) => {
+      const labelsWidth = getLabelsWidth(instance);
+      if (labelsWidth !== undefined) {
+        setLabelsWidth(labelsWidth);
+        register(id, labelsWidth);
+      }
+    });
+
+    // 卸载时，注销自身
+    const dispose = useEffectEvent(() => unregister(id));
+    useEffect(() => dispose, []);
+
+    return (
+      // @ts-expect-error 见 ./AutoResizedECharts.tsx
+      <ECharts
+        ref={ref}
+        option={
+          option === undefined ||
+          option.grid === undefined ||
+          labelsWidth === undefined ||
+          Number.isNaN(labelsWidth) ||
+          labelsWidth >= maxLabelsWidth
+            ? option
+            : {
+                ...option,
+                grid: (Array.isArray(option.grid)
+                  ? option.grid
+                  : [option.grid]
+                ).map((it) => ({
+                  ...it,
+                  left: maxLabelsWidth - labelsWidth,
+                })),
+              }
+        }
+        onSetOption={(instance) => {
+          reportLayoutChange(instance);
+          return onSetOption?.(instance);
+        }}
+        {...rest}
+      />
+    );
+  };
+
+/**
+ * 预置了纵轴左对齐、联动和自适应容器尺寸能力的 ECharts 组件。
+ *
+ * @see {@linkcode withLeftAlign}
+ * @see {@linkcode withConnector}
+ * @see {@linkcode withAutoResize}
+ */
+const LeftAlignedECharts = Object.assign(withLeftAlign(ConnectedECharts), {
+  displayName: "ConnectedECharts",
+});
+export default LeftAlignedECharts;

package/src/components/Sidebar.tsx

@@ -220,7 +220,8 @@ const useStyles = createStyles(
       top: 75%;
       right: 0;
       transform: translate(50%, -50%);
-
+      width: 32px;
+      height: 32px;
       font-size: ${token.sizeSM}px;
 
       transition: opacity ${token.motionDurationMid};
@@ -234,12 +235,6 @@ const useStyles = createStyles(
         display: flex;
         flex-direction: column;
       }
-
-      /* 为了提高权重 */
-      & .${cx(sidebarBtn)} {
-        width: 32px;
-        height: 32px;
-      }
       & .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
         border-inline-end: none;
       }

package/src/deckgl/TiandituLayer.ts

@@ -45,7 +45,7 @@ const renderSubLayers: TileLayerProps["renderSubLayers"] = (props) => {
   return new BitmapLayer({
     ...props,
     data: undefined,
-    image: props.data,
+    image: props.data as string | null,
     bounds: [
       boundingBox[0][0],
       boundingBox[0][1],