node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/components/AuthContext.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import type { SessionUser } from '@/auth';
+
+/**
+ * 客户端权限上下文。
+ *
+ * 权限集合由服务端 layout 一次性算好并传下来（见 (admin)/layout.tsx），
+ * 前端的按钮显隐只是「体验优化」，真正的拦截永远在接口层（requirePerm）。
+ * 所以这里不需要额外的网络请求，纯内存判断即可。
+ *
+ * 注意：不要在这个文件里 import '@/lib/rbac' —— 那个模块引了 next/server，
+ * 会污染客户端产物。超管标识在此本地判断即可。
+ */
+
+const PERM_SUPER = '*';
+
+export type AuthValue = {
+  user: SessionUser | null;
+  perms: string[];
+};
+
+type AuthContextType = {
+  user: SessionUser | null;
+  perms: string[];
+  /** 任一命中即可；不传 code 表示「登录即可」 */
+  hasPerm: (code?: string | string[]) => boolean;
+  /** 必须全部命中 */
+  hasAll: (codes: string[]) => boolean;
+};
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  perms: [],
+  hasPerm: () => false,
+  hasAll: () => false,
+});
+
+export function AuthProvider({ value, children }: { value: AuthValue; children: ReactNode }) {
+  const ctx = useMemo<AuthContextType>(() => {
+    const user = value.user;
+    const perms = value.perms ?? [];
+    const isSuper = Boolean(user?.isSuper) || perms.includes(PERM_SUPER);
+
+    const hasPerm = (code?: string | string[]) => {
+      if (!user) return false;
+      if (!code) return true;
+      if (isSuper) return true;
+      const need = Array.isArray(code) ? code : [code];
+      return need.some((c) => perms.includes(c));
+    };
+
+    const hasAll = (codes: string[]) => {
+      if (!user) return false;
+      if (isSuper) return true;
+      return codes.every((c) => perms.includes(c));
+    };
+
+    return { user, perms, hasPerm, hasAll };
+  }, [value]);
+
+  return <AuthContext.Provider value={ctx}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextType {
+  return useContext(AuthContext);
+}
+
+/** 权限包裹组件：无权限时渲染 fallback（默认什么都不渲染） */
+export function Can({
+  perm,
+  fallback = null,
+  children,
+}: {
+  perm?: string | string[];
+  fallback?: ReactNode;
+  children: ReactNode;
+}) {
+  const { hasPerm } = useAuth();
+  return <>{hasPerm(perm) ? children : fallback}</>;
+}

package/resources/src/components/DataTable.tsx

@@ -0,0 +1,459 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState, type Key, type ReactNode } from 'react';
+import {
+  App,
+  Button,
+  Checkbox,
+  DatePicker,
+  Dropdown,
+  Form,
+  Input,
+  Select,
+  Space,
+  Table,
+  Tooltip,
+} from 'antd';
+import type { ColumnsType, ColumnType } from 'antd/es/table';
+import {
+  DeleteOutlined,
+  DownOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import { errText } from '@/lib/err-text';
+import { SkeletonTable, flashTableRow } from '@/components/feedback';
+import { MILITARY } from '@/lib/theme';
+
+/**
+ * 通用 CRUD 表格。
+ *
+ * 模板里 5 个列表页（用户/角色/日志/员工…）长得几乎一样，
+ * 差别只在「列定义 + 搜索项 + 顶部按钮」。把这四样做成 props，
+ * 新增一个业务列表页就从「复制 200 行再改」变成「写 30 行配置」。
+ *
+ * 约定：后端列表接口统一返回 pageResult 形状 { code, data: { list, total, page, pageSize } }。
+ */
+
+export type SearchField = {
+  name: string;
+  label: string;
+  type?: 'text' | 'select' | 'dateRange';
+  options?: { label: string; value: string | number }[];
+  placeholder?: string;
+};
+
+export type DataTableProps<T extends object> = {
+  /** 列表接口地址，例如 /api/users */
+  api: string;
+  columns: ColumnsType<T>;
+  rowKey?: string;
+  searchFields?: SearchField[];
+  /** 顶部右侧自定义按钮区 */
+  toolbar?: ReactNode;
+  /** 固定附加查询参数（如列表按模块过滤） */
+  extraQuery?: Record<string, unknown>;
+  /** 提供后展示「导出 Excel」按钮，走 /api/export */
+  exportable?: { filename: string; module: string };
+  /** 提供后展示「新增」按钮 */
+  canAdd?: boolean;
+  onAdd?: () => void;
+  addText?: string;
+  /** 开启行选择（批量删除） */
+  selectable?: boolean;
+  onBatchDelete?: (keys: Key[]) => Promise<void> | void;
+  /** 父组件增删改成功后自增这个值即可让表格重新拉数据 */
+  refreshKey?: number;
+  /**
+   * 数据刷新后要「闪一下」的行，回答的是「刚才改的是哪一行」。
+   * 传 { key, tick }：tick 每次自增，同一行连续触发也能重播动画。
+   * 只在数据真的重新拉回来之后才闪，避免闪到还没更新的旧行上。
+   */
+  highlightRow?: { key: string | number; tick: number } | null;
+  scrollX?: number;
+  defaultPageSize?: number;
+};
+
+type PageData<T> = { list: T[]; total: number; page: number; pageSize: number };
+
+/** 统一走 lib/err-text：后端业务失败也是 HTTP 200 + message，不能只看 axios 的错误 */
+function errMsg(e: unknown): string {
+  return errText(e, '加载失败');
+}
+
+/** 触发浏览器下载，用完及时 revoke，避免内存泄漏 */
+function downloadBlob(data: Blob, filename: string) {
+  const url = window.URL.createObjectURL(data);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.URL.revokeObjectURL(url);
+}
+
+/** 取列的稳定标识：key 优先，其次 dataIndex，最后用下标 */
+function colKey<T extends object>(col: ColumnType<T>, index: number): string {
+  const k = col.key ?? (Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : col.dataIndex);
+  return k === undefined || k === null ? `col-${index}` : String(k);
+}
+
+export default function DataTable<T extends object>({
+  api,
+  columns,
+  rowKey = 'id',
+  searchFields,
+  toolbar,
+  extraQuery,
+  exportable,
+  canAdd,
+  onAdd,
+  addText = '新增',
+  selectable,
+  onBatchDelete,
+  refreshKey = 0,
+  highlightRow,
+  scrollX,
+  defaultPageSize = 10,
+}: DataTableProps<T>) {
+  const { message, modal } = App.useApp();
+  const [form] = Form.useForm();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [keyword, setKeyword] = useState('');
+  const [filters, setFilters] = useState<Record<string, unknown>>({});
+  const [sort, setSort] = useState<{ sortField: string; sortOrder: 'ascend' | 'descend' } | null>(null);
+  const [selectedKeys, setSelectedKeys] = useState<Key[]>([]);
+  const [hiddenCols, setHiddenCols] = useState<string[]>([]);
+  const [searchOpen, setSearchOpen] = useState(true);
+  /** 导出 Excel 可能要几秒（几千行 + 服务端 Workbook），按钮必须自己转圈 */
+  const [exporting, setExporting] = useState(false);
+  /** 批量删除：确认弹窗关掉之后表格还在等，按钮上要接着转 */
+  const [deleting, setDeleting] = useState(false);
+
+  /**
+   * 深链接：`/xxx?kw=张三` 自动把关键词填进筛选框。
+   * 全局搜索（Ctrl K）点"数据"结果就是跳到这种地址 ——
+   * 有了它，任何用 DataTable 的列表页都不用手写接收逻辑。
+   * 放在 effect 里而不是 useState 初始值：避免 SSR 读不到 window 造成水合不一致。
+   * ★ 表单里那个输入框是 Form.Item 自己管的，必须同时 setFieldValue，
+   *   否则会出现"列表已过滤、输入框却是空的"这种看不懂的状态。
+   */
+  useEffect(() => {
+    const kw = new URLSearchParams(window.location.search).get('kw');
+    if (kw) {
+      setKeyword(kw);
+      form.setFieldValue('keyword', kw);
+    }
+  }, [form]);
+
+  const params = useMemo(() => {
+    const p: Record<string, unknown> = { page, pageSize, ...extraQuery };
+    if (keyword.trim()) p.keyword = keyword.trim();
+    if (sort) Object.assign(p, sort);
+    for (const [k, v] of Object.entries(filters)) {
+      if (v !== undefined && v !== null && v !== '') p[k] = v;
+    }
+    return p;
+  }, [page, pageSize, keyword, sort, filters, extraQuery]);
+
+  // queryKey 用 JSON 串而不是对象：对象每次渲染都是新引用，会让 react-query 疯狂重拉
+  const paramsKey = JSON.stringify(params);
+
+  const query = useQuery({
+    queryKey: [api, paramsKey, refreshKey],
+    queryFn: async (): Promise<PageData<T>> => {
+      const { data } = await axios.get(api, { params });
+      if (!data || data.code !== 0) throw new Error(data?.message || '加载失败');
+      return data.data as PageData<T>;
+    },
+    placeholderData: keepPreviousData,
+  });
+
+  useEffect(() => {
+    if (query.isError) message.error(errMsg(query.error));
+  }, [query.isError, query.error, message]);
+
+  /**
+   * 「改的是这一行」的高亮。
+   *
+   * 时序是这里唯一需要小心的地方：
+   *   页面保存成功 → 设 highlightRow + refreshKey 自增 → 重新请求 → 数据换新。
+   * 如果在 highlightRow 一变就去找行，闪的是**旧数据那一行**，
+   * 等新数据回来时动画已经过半，看着像闪错了对象。
+   * 所以这里等 dataUpdatedAt 变了（数据真的落地）再找 DOM。
+   */
+  const flashTarget = useRef<{ key: string | number; tick: number } | null>(null);
+  const flashedTick = useRef(-1);
+
+  useEffect(() => {
+    flashTarget.current = highlightRow ?? null;
+  }, [highlightRow]);
+
+  useEffect(() => {
+    const target = flashTarget.current;
+    if (!target || flashedTick.current === target.tick) return;
+
+    // 60ms 让 antd 把新的 tbody 提交到 DOM；找不到行就留着下次数据变化再试
+    const timer = window.setTimeout(() => {
+      if (flashTableRow(target.key, target.tick)) flashedTick.current = target.tick;
+    }, 60);
+    return () => window.clearTimeout(timer);
+  }, [query.dataUpdatedAt]);
+
+  const onSearch = (values: Record<string, unknown>) => {
+    const next: Record<string, unknown> = {};
+    for (const f of searchFields ?? []) {
+      const v = values[f.name];
+      if (f.type === 'dateRange') {
+        if (Array.isArray(v) && v[0] && v[1]) {
+          next.startDate = dayjs(v[0]).format('YYYY-MM-DD');
+          next.endDate = dayjs(v[1]).format('YYYY-MM-DD');
+        }
+      } else if (v !== undefined && v !== null && v !== '') {
+        next[f.name] = v;
+      }
+    }
+    setKeyword(String(values.keyword ?? '').trim());
+    setFilters(next);
+    setPage(1);
+    setSelectedKeys([]);
+  };
+
+  const onReset = () => {
+    form.resetFields();
+    setKeyword('');
+    setFilters({});
+    setSort(null);
+    setPage(1);
+    setSelectedKeys([]);
+  };
+
+  const handleExport = async () => {
+    if (!exportable || exporting) return;
+    setExporting(true);
+    try {
+      const res = await axios.get('/api/export', {
+        // module 必须放在最后：列表自身的筛选参数里也可能有 module 字段（日志页），
+        // 被它覆盖掉的话后端就分发不到对应模块了
+        params: { ...params, page: undefined, pageSize: undefined, module: exportable.module },
+        responseType: 'blob',
+      });
+      const ct = String(res.headers['content-type'] || '');
+      // 失败时后端返回的是 JSON（HTTP 仍是 200），要当错误处理而不是当文件下载
+      if (ct.includes('application/json')) {
+        const text = await (res.data as Blob).text();
+        const j = JSON.parse(text) as { message?: string };
+        throw new Error(j.message || '导出失败');
+      }
+      downloadBlob(res.data as Blob, exportable.filename);
+      message.success('导出成功');
+    } catch (e) {
+      message.error(`导出失败：${errMsg(e)}`);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const doBatchDelete = () => {
+    if (!onBatchDelete) return;
+    modal.confirm({
+      title: '确认删除',
+      content: `已选中 ${selectedKeys.length} 条记录，删除后不可恢复，是否继续？`,
+      okText: '删除',
+      okButtonProps: { danger: true },
+      cancelText: '取消',
+      onOk: async () => {
+        if (deleting) return;
+        setDeleting(true);
+        try {
+          await onBatchDelete(selectedKeys);
+          setSelectedKeys([]);
+        } finally {
+          setDeleting(false);
+        }
+      },
+    });
+  };
+
+  const visibleColumns = useMemo(
+    () => columns.filter((c, i) => !hiddenCols.includes(colKey(c, i))),
+    [columns, hiddenCols]
+  );
+
+  const showBatch = Boolean(selectable && onBatchDelete && selectedKeys.length > 0);
+
+  return (
+    <div>
+      <Form
+        form={form}
+        layout="inline"
+        onFinish={onSearch}
+        style={{ rowGap: 12, marginBottom: 12, display: searchOpen ? undefined : 'none' }}
+      >
+        <Form.Item name="keyword" label="关键字" style={{ marginBottom: 12 }}>
+          <Input
+            allowClear
+            placeholder="输入关键字"
+            style={{ width: 180 }}
+            onPressEnter={() => form.submit()}
+          />
+        </Form.Item>
+        {(searchFields ?? []).map((f) => (
+          <Form.Item key={f.name} name={f.name} label={f.label} style={{ marginBottom: 12 }}>
+            {f.type === 'select' ? (
+              <Select
+                allowClear
+                placeholder={f.placeholder ?? `请选择${f.label}`}
+                options={f.options}
+                style={{ width: 160 }}
+              />
+            ) : f.type === 'dateRange' ? (
+              <DatePicker.RangePicker allowClear />
+            ) : (
+              <Input
+                allowClear
+                placeholder={f.placeholder ?? `请输入${f.label}`}
+                style={{ width: 160 }}
+                onPressEnter={() => form.submit()}
+              />
+            )}
+          </Form.Item>
+        ))}
+        <Form.Item style={{ marginBottom: 12 }}>
+          <Space>
+            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+              查询
+            </Button>
+            <Button onClick={onReset}>重置</Button>
+          </Space>
+        </Form.Item>
+      </Form>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+        {searchFields?.length ? (
+          <Button type="text" onClick={() => setSearchOpen((v) => !v)} icon={<DownOutlined rotate={searchOpen ? 180 : 0} />}>
+            {searchOpen ? '收起筛选' : '展开筛选'}
+          </Button>
+        ) : null}
+        {toolbar}
+        {showBatch ? (
+          <Button danger icon={<DeleteOutlined />} loading={deleting} onClick={doBatchDelete}>
+            批量删除 ({selectedKeys.length})
+          </Button>
+        ) : null}
+        {exportable ? (
+          <Button icon={<UploadOutlined />} loading={exporting} onClick={handleExport}>
+            导出 Excel
+          </Button>
+        ) : null}
+        <Tooltip title="刷新">
+          {/* 首屏已经有骨架在表达"在加载"，这里再转一圈就是重复信息；
+              只在"已有数据、正在刷新"时才让按钮转 */}
+          <Button
+            icon={<ReloadOutlined />}
+            loading={query.isFetching && !query.isLoading}
+            onClick={() => query.refetch()}
+          />
+        </Tooltip>
+        <Dropdown
+          trigger={['click']}
+          popupRender={() => (
+            <div
+              style={{
+                background: MILITARY.card,
+                borderRadius: 8,
+                boxShadow: MILITARY.shadowSm,
+                padding: 12,
+                maxHeight: 320,
+                overflow: 'auto',
+              }}
+            >
+              {columns.map((c, i) => {
+                const k = colKey(c, i);
+                return (
+                  <div key={k} style={{ padding: '4px 0' }}>
+                    <Checkbox
+                      checked={!hiddenCols.includes(k)}
+                      onChange={(e) =>
+                        setHiddenCols((prev) =>
+                          e.target.checked ? prev.filter((x) => x !== k) : [...prev, k]
+                        )
+                      }
+                    >
+                      {String(c.title ?? k)}
+                    </Checkbox>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        >
+          <Button icon={<SettingOutlined />}>列设置</Button>
+        </Dropdown>
+        {canAdd ? (
+          <Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
+            {addText}
+          </Button>
+        ) : null}
+      </div>
+
+      {/*
+        首屏用骨架而不是「空表格 + 转圈」：
+        表格骨架的形状和真表格一致，数据填进来时高度不跳，用户也不会以为"没数据"。
+        只在**首次**加载（还没有任何数据）时走这条；
+        翻页/筛选时 query.data 有旧值（keepPreviousData），继续走 Table 的蒙层。
+      */}
+      {query.isLoading && !query.data ? (
+        <SkeletonTable
+          rows={Math.min(pageSize, 10)}
+          // 列太多时骨架会挤成一堆细条，收敛到 3~6 列更像真实表格
+          cols={Math.min(Math.max(visibleColumns.length, 3), 6)}
+          // 连分页条一起占位，数据回来时底部不跳
+          pagination
+        />
+      ) : (
+        <Table<T>
+          rowKey={rowKey}
+          columns={visibleColumns}
+          dataSource={query.data?.list ?? []}
+          // delay: 200ms 内返回的刷新看不到转圈，避免点一下筛就闪一片
+          loading={{ spinning: query.isFetching, delay: 200 }}
+          size="middle"
+          scroll={scrollX ? { x: scrollX } : undefined}
+          rowSelection={
+            selectable
+              ? { selectedRowKeys: selectedKeys, onChange: (keys) => setSelectedKeys(keys) }
+              : undefined
+          }
+          pagination={{
+            current: page,
+            pageSize,
+            total: query.data?.total ?? 0,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (t) => `共 ${t} 条`,
+          }}
+          onChange={(pg, _f, sorter) => {
+            setPage(pg.current ?? 1);
+            setPageSize(pg.pageSize ?? defaultPageSize);
+            const s = Array.isArray(sorter) ? sorter[0] : sorter;
+            if (s?.field && s.order) {
+              setSort({ sortField: String(s.field), sortOrder: s.order });
+            } else {
+              setSort(null);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/resources/src/components/EChart.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+import { init, use as registerECharts, type ECharts, type EChartsCoreOption } from 'echarts/core';
+import { BarChart, LineChart, PieChart, GraphChart } from 'echarts/charts';
+import {
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  TransformComponent,
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { FONT_STACK } from '@/lib/appearance';
+import { useSkinInk } from '@/components/appearance/AppearanceProvider';
+
+/**
+ * 按需引入 echarts。
+ *
+ * 直接 `import * as echarts from 'echarts'` 会把全部图表类型（地图、K线、关系图…）
+ * 打进产物，动辄 1MB+。这里只 use 模板真正用到的柱/线/饼 + 基础组件，
+ * 首屏 JS 体积能小一大截 —— 内网机器上打开速度差别是肉眼可见的。
+ */
+// 注意：echarts 的注册函数就叫 use，直接 import 会被 eslint 的 rules-of-hooks 误判成 React Hook，
+// 所以这里重命名成 registerECharts（不能叫 useXxx，否则同样会被当成 Hook）。
+registerECharts([
+  BarChart,
+  GraphChart,
+  LineChart,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  DatasetComponent,
+  TransformComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+]);
+
+export type EChartProps = {
+  option: EChartsCoreOption;
+  height?: number | string;
+  loading?: boolean;
+  /** 图表事件，如 { click: (params) => {...} }；图谱节点点击靠它 */
+  onEvents?: Record<string, (params: unknown) => void>;
+  /**
+   * 图表实例就绪/销毁回调。
+   *
+   * 用来做「不重建 option 的高亮切换」：力导布局只要 setOption 就会重新跑模拟，
+   * 高亮必须走 dispatchAction，否则鼠标一悬停整张图就重新布局。
+   */
+  onChart?: (chart: ECharts | null) => void;
+};
+
+export default function EChart({ option, height = 320, loading, onEvents, onChart }: EChartProps) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<ECharts | null>(null);
+  /**
+   * 图表文字颜色也跟着皮肤走。
+   *
+   * canvas 不认 CSS 变量，而坐标轴标签、图例、系列数值这些东西又没有单独的
+   * token 可以继承（它们默认是深灰 #333，在深色皮肤上基本看不见）。
+   * 所以在这里统一兜一层根级 textStyle：页面 option 自己写的优先级更高，
+   * 没写的都自动拿到当前皮肤的文字色 —— 新页面画图不用再关心主题。
+   */
+  const ink = useSkinInk();
+  const themedOption = useMemo(() => {
+    const opt = option as Record<string, unknown>;
+    return {
+      backgroundColor: 'transparent',
+      ...opt,
+      textStyle: { color: ink.text2, fontFamily: FONT_STACK, ...(opt.textStyle as object | undefined) },
+    } as EChartsCoreOption;
+  }, [option, ink]);
+
+  // onEvents / onChart 内联函数每次渲染都是新引用，用 ref 持握最新值，避免反复 on/off
+  const eventsRef = useRef(onEvents);
+  eventsRef.current = onEvents;
+  const onChartRef = useRef(onChart);
+  onChartRef.current = onChart;
+
+  // 初始化只做一次：echarts 实例很重，随 option 重建会造成明显的闪烁
+  useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const chart = init(el);
+    chartRef.current = chart;
+    onChartRef.current?.(chart);
+
+    // 注册外部事件（如图谱的节点点击），卸载时统一 off 掉
+    const registered = Object.entries(eventsRef.current ?? {}).map(([name]) => {
+      const wrapped = (params: unknown) => eventsRef.current?.[name]?.(params);
+      chart.on(name, wrapped);
+      return { name, wrapped };
+    });
+
+    // 容器宽度由 antd 栅格决定，窗口缩放时柱状图必须跟着变，否则会溢出或被裁切
+    const ro = new ResizeObserver(() => chart.resize());
+    ro.observe(el);
+
+    return () => {
+      for (const { name, wrapped } of registered) chart.off(name, wrapped);
+      ro.disconnect();
+      chart.dispose();
+      chartRef.current = null;
+      onChartRef.current?.(null);
+    };
+  }, []);
+
+  useEffect(() => {
+    // notMerge=true：新 option 与旧 option 完全替换，避免切换筛选条件时残留旧系列
+    chartRef.current?.setOption(themedOption, true);
+  }, [themedOption]);
+
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    if (loading)
+      chart.showLoading({
+        text: '加载中…',
+        color: ink.primary,
+        textColor: ink.text2,
+        maskColor: 'transparent',
+      });
+    else chart.hideLoading();
+  }, [loading, ink]);
+
+  return (
+    <div
+      ref={elRef}
+      style={{ width: '100%', height: typeof height === 'number' ? `${height}px` : height }}
+    />
+  );
+}