@ant-design/agentic-ui 2.30.30 → 2.30.33

package/dist/MarkdownRenderer/useStreaming.js

@@ -46,6 +46,21 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -58,6 +73,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import { useCallback, useEffect, useRef, useState } from "react";
+import { INITIAL_FENCE_STATE, updateFenceStateForLine } from "./streaming/fenceTracker";
 /**
  * 流式 token 缓存类型。
  * 在流式场景中，部分 Markdown token（link、image、table 等）可能处于未闭合状态，
@@ -265,7 +281,9 @@ var getInitialCache = function getInitialCache() {
         pending: '',
         token: "text",
         processedLength: 0,
-        completeMarkdown: ''
+        completeMarkdown: '',
+        fenceState: _object_spread({}, INITIAL_FENCE_STATE),
+        currentLine: ''
     };
 };
 var getStreamingOutput = function getStreamingOutput(cache) {
@@ -273,36 +291,6 @@ var getStreamingOutput = function getStreamingOutput(cache) {
     if (cache.pending) return STREAMING_LOADING_PLACEHOLDER;
     return '';
 };
-var isInCodeBlock = function isInCodeBlock(text) {
-    var isFinalChunk = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    var lines = text.split('\n');
-    var inFenced = false;
-    var fenceChar = '';
-    var fenceLen = 0;
-    for(var i = 0; i < lines.length; i++){
-        var line = lines[i].endsWith('\r') ? lines[i].slice(0, -1) : lines[i];
-        var match = line.match(/^(`{3,}|~{3,})(.*)$/);
-        if (match) {
-            var fence = match[1];
-            var after = match[2];
-            var char = fence[0];
-            var len = fence.length;
-            if (!inFenced) {
-                inFenced = true;
-                fenceChar = char;
-                fenceLen = len;
-            } else {
-                var isValidEnd = char === fenceChar && len >= fenceLen && /^\s*$/.test(after);
-                if (isValidEnd && (isFinalChunk || i < lines.length - 1)) {
-                    inFenced = false;
-                    fenceChar = '';
-                    fenceLen = 0;
-                }
-            }
-        }
-    }
-    return inFenced;
-};
 /** 流式 token 缓存——暂缓不完整的 link/image/table 等，避免 parser 错误解析 */ export var useStreaming = function useStreaming(input, enabled) {
     var _useState = _sliced_to_array(useState(''), 2), output = _useState[0], setOutput = _useState[1];
     var cacheRef = useRef(getInitialCache());
@@ -319,22 +307,36 @@ var isInCodeBlock = function isInCodeBlock(text) {
         var cache = cacheRef.current;
         var chunk = text.slice(cache.processedLength);
         if (!chunk) return;
+        // 非前缀重置后重建围栏状态（全量兜底，仅此处 O(n)）
+        if (cache.processedLength === 0 && text.length > 0) {
+            var existingText = cache.completeMarkdown + cache.pending;
+            if (existingText.length === 0) {
+                cache.fenceState = _object_spread({}, INITIAL_FENCE_STATE);
+                cache.currentLine = '';
+            }
+        }
         cache.processedLength += chunk.length;
-        var wasInCodeBlock = isInCodeBlock(cache.completeMarkdown + cache.pending);
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
             for(var _iterator = chunk[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                 var char = _step.value;
                 cache.pending += char;
-                var inCodeBlock = isInCodeBlock(cache.completeMarkdown + cache.pending);
-                if (inCodeBlock) {
-                    wasInCodeBlock = true;
-                    continue;
-                }
-                if (wasInCodeBlock) {
-                    wasInCodeBlock = false;
-                    commitCache(cache);
-                    continue;
+                if (char === '\n') {
+                    var prevInFenced = cache.fenceState.inFenced;
+                    cache.fenceState = updateFenceStateForLine(cache.fenceState, cache.currentLine);
+                    cache.currentLine = '';
+                    if (cache.fenceState.inFenced) {
+                        continue;
+                    }
+                    if (prevInFenced && !cache.fenceState.inFenced) {
+                        commitCache(cache);
+                        continue;
+                    }
+                } else {
+                    cache.currentLine += char;
+                    if (cache.fenceState.inFenced) {
+                        continue;
+                    }
                 }
                 if (cache.token === "text") {
                     var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;

package/dist/Plugins/chart/components/ChartContainer/ChartContainer.d.ts

@@ -7,6 +7,8 @@ export interface ChartContainerProps {
     style?: React.CSSProperties;
     /** 图表主题 */
     theme?: 'light' | 'dark';
+    /** 是否自动检测主题（检测 html[data-theme='dark'] 和 CSS 变量亮度） */
+    autoDetectTheme?: boolean;
     /** 是否为移动端 */
     isMobile?: boolean;
     /** 图表变体 */
@@ -42,7 +44,7 @@ export interface ChartContainerRef {
  * @param {string} [props.className] - 自定义CSS类名
  * @param {React.ReactNode} props.children - 子元素
  * @param {React.CSSProperties} [props.style] - 样式对象
- * @param {'light' | 'dark'} [props.theme='light'] - 图表主题
+ * @param {'light' | 'dark'} [props.theme] - 图表主题，不传时自动检测（检测 html[data-theme='dark'] 或 CSS 变量亮度）
  * @param {boolean} [props.isMobile=false] - 是否为移动端
  * @param {object} [props.errorBoundary] - 错误边界配置
  * @param {boolean} [props.errorBoundary.enabled=true] - 是否启用错误边界
@@ -52,17 +54,24 @@ export interface ChartContainerRef {
  *
  * @example
  * ```tsx
- * // 基础使用
+ * // 基础使用（自动检测主题）
  * <ChartContainer
  *   baseClassName="area-chart-container"
  *   className="custom-chart"
- *   theme="light"
  *   isMobile={false}
  *   style={{ width: 600, height: 400 }}
  * >
  *   <div>图表内容</div>
  * </ChartContainer>
  *
+ * // 显式指定主题
+ * <ChartContainer
+ *   baseClassName="area-chart-container"
+ *   theme="dark"
+ * >
+ *   <div>图表内容</div>
+ * </ChartContainer>
+ *
  * // 自定义错误边界
  * <ChartContainer
  *   baseClassName="line-chart-container"
@@ -98,6 +107,7 @@ export interface ChartContainerRef {
  * - 内置错误边界保护，防止图表错误影响整个应用
  * - 错误边界默认启用，可通过配置禁用或自定义
  * - `theme="dark"` 时在本容器内嵌套 Ant Design 暗色算法，工具栏/筛选等 antd 控件与画布暗色一致（嵌套容器不重复包裹）
+ * - 支持自动主题检测：当 theme 未指定时，会自动检测 html[data-theme='dark'] 属性或 CSS 变量亮度判断主题
  */
 declare const ChartContainer: React.FC<ChartContainerProps & {
     baseClassName: string;

package/dist/Plugins/chart/components/ChartContainer/ChartContainer.js

@@ -65,6 +65,7 @@ function _object_without_properties_loose(source, excluded) {
 import { ConfigProvider, theme as antdTheme } from "antd";
 import classNames from "clsx";
 import React from "react";
+import { useDetectTheme } from "../../hooks";
 import { ChartDarkAntdProvidedContext, useChartDarkAntdProvided } from "./ChartDarkAntdContext";
 import ChartErrorBoundary from "./ChartErrorBoundary";
 import { useStyle } from "./style";
@@ -81,7 +82,7 @@ import { useStyle } from "./style";
  * @param {string} [props.className] - 自定义CSS类名
  * @param {React.ReactNode} props.children - 子元素
  * @param {React.CSSProperties} [props.style] - 样式对象
- * @param {'light' | 'dark'} [props.theme='light'] - 图表主题
+ * @param {'light' | 'dark'} [props.theme] - 图表主题，不传时自动检测（检测 html[data-theme='dark'] 或 CSS 变量亮度）
  * @param {boolean} [props.isMobile=false] - 是否为移动端
  * @param {object} [props.errorBoundary] - 错误边界配置
  * @param {boolean} [props.errorBoundary.enabled=true] - 是否启用错误边界
@@ -91,17 +92,24 @@ import { useStyle } from "./style";
  *
  * @example
  * ```tsx
- * // 基础使用
+ * // 基础使用（自动检测主题）
  * <ChartContainer
  *   baseClassName="area-chart-container"
  *   className="custom-chart"
- *   theme="light"
  *   isMobile={false}
  *   style={{ width: 600, height: 400 }}
  * >
  *   <div>图表内容</div>
  * </ChartContainer>
  *
+ * // 显式指定主题
+ * <ChartContainer
+ *   baseClassName="area-chart-container"
+ *   theme="dark"
+ * >
+ *   <div>图表内容</div>
+ * </ChartContainer>
+ *
  * // 自定义错误边界
  * <ChartContainer
  *   baseClassName="line-chart-container"
@@ -137,8 +145,9 @@ import { useStyle } from "./style";
  * - 内置错误边界保护，防止图表错误影响整个应用
  * - 错误边界默认启用，可通过配置禁用或自定义
  * - `theme="dark"` 时在本容器内嵌套 Ant Design 暗色算法，工具栏/筛选等 antd 控件与画布暗色一致（嵌套容器不重复包裹）
+ * - 支持自动主题检测：当 theme 未指定时，会自动检测 html[data-theme='dark'] 属性或 CSS 变量亮度判断主题
  */ var ChartContainer = function ChartContainer(_0) {
-    var baseClassName = _0.baseClassName, className = _0.className, children = _0.children, style = _0.style, classNamesProp = _0.classNames, stylesProp = _0.styles, _0_theme = _0.theme, theme = _0_theme === void 0 ? 'light' : _0_theme, _0_variant = _0.variant, variant = _0_variant === void 0 ? 'default' : _0_variant, _0_isMobile = _0.isMobile, isMobile = _0_isMobile === void 0 ? false : _0_isMobile, _0_errorBoundary = _0.errorBoundary, errorBoundary = _0_errorBoundary === void 0 ? {
+    var baseClassName = _0.baseClassName, className = _0.className, children = _0.children, style = _0.style, classNamesProp = _0.classNames, stylesProp = _0.styles, themeProp = _0.theme, _0_autoDetectTheme = _0.autoDetectTheme, autoDetectTheme = _0_autoDetectTheme === void 0 ? true : _0_autoDetectTheme, _0_variant = _0.variant, variant = _0_variant === void 0 ? 'default' : _0_variant, _0_isMobile = _0.isMobile, isMobile = _0_isMobile === void 0 ? false : _0_isMobile, _0_errorBoundary = _0.errorBoundary, errorBoundary = _0_errorBoundary === void 0 ? {
         enabled: true
     } : _0_errorBoundary, restProps = _object_without_properties(_0, [
         "baseClassName",
@@ -148,12 +157,18 @@ import { useStyle } from "./style";
         "classNames",
         "styles",
         "theme",
+        "autoDetectTheme",
         "variant",
         "isMobile",
         "errorBoundary"
     ]);
     var _useStyle = useStyle(baseClassName), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     var ancestorDarkAntdProvided = useChartDarkAntdProvided();
+    // 自动检测主题：当 themeProp 未指定且 autoDetectTheme 为 true 时，自动检测
+    var detectedTheme = useDetectTheme({
+        observeChanges: autoDetectTheme
+    });
+    var theme = themeProp !== null && themeProp !== void 0 ? themeProp : autoDetectTheme ? detectedTheme : 'light';
     var wrapDarkAntd = theme === 'dark' && !ancestorDarkAntdProvided;
     // 构建动态类名
     var combinedClassName = classNames(baseClassName, hashId, theme === 'light' && "".concat(baseClassName, "-light-theme"), theme === 'dark' && "".concat(baseClassName, "-dark-theme"), isMobile && "".concat(baseClassName, "-mobile"), !isMobile && "".concat(baseClassName, "-desktop"), variant === 'outline' && "".concat(baseClassName, "-outline"), variant === 'borderless' && "".concat(baseClassName, "-borderless"), className, classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root);

package/dist/Plugins/chart/components/ChartContainer/ChartErrorBoundary.d.ts

@@ -290,6 +290,7 @@ declare class ChartErrorBoundary extends React.Component<ChartErrorBoundaryProps
             'workspace.browser': string;
             'workspace.task': string;
             'workspace.file': string;
+            'workspace.fileTree': string;
             'workspace.custom': string;
             'workspace.terminalExecution': string;
             'workspace.createHtmlFile': string;
@@ -715,6 +716,7 @@ declare class ChartErrorBoundary extends React.Component<ChartErrorBoundaryProps
             'workspace.browser': string;
             'workspace.task': string;
             'workspace.file': string;
+            'workspace.fileTree': string;
             'workspace.custom': string;
             'workspace.terminalExecution': string;
             'workspace.createHtmlFile': string;

package/dist/Plugins/chart/hooks/index.d.ts

@@ -7,4 +7,6 @@ export { useChartDataFilter } from './useChartDataFilter';
 export type { ChartStatisticConfig, StatisticConfigType, } from './useChartStatistic';
 export { useChartStatistics } from './useChartStatistics';
 export { useChartTheme } from './useChartTheme';
+export { useDetectTheme } from './useDetectTheme';
+export type { DetectThemeOptions } from './useDetectTheme';
 export { useResponsiveSize } from './useResponsiveSize';

package/dist/Plugins/chart/hooks/index.js

@@ -5,4 +5,5 @@
  */ export { useChartDataFilter } from "./useChartDataFilter";
 export { useChartStatistics } from "./useChartStatistics";
 export { useChartTheme } from "./useChartTheme";
+export { useDetectTheme } from "./useDetectTheme";
 export { useResponsiveSize } from "./useResponsiveSize";

package/dist/Plugins/chart/hooks/useDetectTheme.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 主题检测配置选项
+ */
+export interface DetectThemeOptions {
+    /**
+     * 用于检测主题的 CSS 变量名
+     * @default '--color-gray-bg-page'
+     */
+    cssVariable?: string;
+    /**
+     * 亮度阈值，低于此值认为是暗色主题
+     * @default 145
+     */
+    darknessThreshold?: number;
+    /**
+     * 是否监听主题变化
+     * @default true
+     */
+    observeChanges?: boolean;
+}
+/**
+ * 自动检测当前主题的 Hook
+ *
+ * 检测策略（按优先级）：
+ * 1. 检查 `html[data-theme='dark']` 属性
+ * 2. 检查指定 CSS 变量的亮度值
+ * 3. 检查 `--color-gray-bg-page` 的亮度值
+ *
+ * @param options 检测配置选项
+ * @returns 检测到的主题 'light' | 'dark'
+ *
+ * @example
+ * ```tsx
+ * const theme = useDetectTheme();
+ * // theme: 'light' | 'dark'
+ *
+ * // 自定义配置
+ * const theme = useDetectTheme({
+ *   cssVariable: '--color-primary-bg-page',
+ *   darknessThreshold: 128,
+ *   observeChanges: true,
+ * });
+ * ```
+ */
+export declare const useDetectTheme: (options?: DetectThemeOptions) => 'light' | 'dark';
+export default useDetectTheme;

package/dist/Plugins/chart/hooks/useDetectTheme.js

@@ -0,0 +1,222 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useEffect, useState } from "react";
+/**
+ * 解析颜色值为 RGB
+ */ var parseColorToRgb = function parseColorToRgb(color) {
+    var normalizedColor = color.trim().toLowerCase();
+    // 短十六进制格式 #rgb
+    var shortHexMatch = normalizedColor.match(/^#([0-9a-f]{3})$/i);
+    if (shortHexMatch) {
+        var _shortHexMatch__split_map = _sliced_to_array(shortHexMatch[1].split('').map(function(char) {
+            return Number.parseInt(char + char, 16);
+        }), 3), r = _shortHexMatch__split_map[0], g = _shortHexMatch__split_map[1], b = _shortHexMatch__split_map[2];
+        return {
+            r: r,
+            g: g,
+            b: b
+        };
+    }
+    // 标准十六进制格式 #rrggbb
+    var hexMatch = normalizedColor.match(/^#([0-9a-f]{6})$/i);
+    if (hexMatch) {
+        return {
+            r: Number.parseInt(hexMatch[1].slice(0, 2), 16),
+            g: Number.parseInt(hexMatch[1].slice(2, 4), 16),
+            b: Number.parseInt(hexMatch[1].slice(4, 6), 16)
+        };
+    }
+    // rgb/rgba 格式
+    var rgbMatch = normalizedColor.match(/^rgba?\((\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})(?:[\s,]+[\d.]+)?\)$/i);
+    if (rgbMatch) {
+        return {
+            r: Number.parseInt(rgbMatch[1], 10),
+            g: Number.parseInt(rgbMatch[2], 10),
+            b: Number.parseInt(rgbMatch[3], 10)
+        };
+    }
+    return null;
+};
+/**
+ * 计算颜色的亮度
+ * 使用加权公式：Y = 0.299*R + 0.587*G + 0.114*B
+ */ var calculateBrightness = function calculateBrightness(color) {
+    var rgb = parseColorToRgb(color);
+    if (!rgb) return null;
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+};
+/**
+ * 检测背景色是否为暗色
+ */ var isDarkBackground = function isDarkBackground(color) {
+    var threshold = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 145;
+    var brightness = calculateBrightness(color);
+    if (brightness === null) return false;
+    return brightness < threshold;
+};
+/**
+ * 检测 HTML 元素的 data-theme 属性是否为 dark
+ */ var checkDataTheme = function checkDataTheme() {
+    if (typeof document === 'undefined') return false;
+    var htmlElement = document.documentElement;
+    return htmlElement.getAttribute('data-theme') === 'dark';
+};
+/**
+ * 获取 CSS 变量的计算值
+ */ var getCSSVariableValue = function getCSSVariableValue(variableName) {
+    if (typeof window === 'undefined') return null;
+    var computedStyle = window.getComputedStyle(document.documentElement);
+    var value = computedStyle.getPropertyValue(variableName).trim();
+    return value || null;
+};
+/**
+ * 根据多种方式检测当前主题
+ */ var detectTheme = function detectTheme(cssVariable, darknessThreshold) {
+    // 1. 首先检查 html[data-theme='dark']
+    if (checkDataTheme()) {
+        return 'dark';
+    }
+    // 2. 检查 CSS 变量的亮度
+    var cssValue = getCSSVariableValue(cssVariable);
+    if (cssValue && isDarkBackground(cssValue, darknessThreshold)) {
+        return 'dark';
+    }
+    // 3. 检查背景色 CSS 变量
+    var bgColor = getCSSVariableValue('--color-gray-bg-page');
+    if (bgColor && isDarkBackground(bgColor, darknessThreshold)) {
+        return 'dark';
+    }
+    return 'light';
+};
+/**
+ * 自动检测当前主题的 Hook
+ *
+ * 检测策略（按优先级）：
+ * 1. 检查 `html[data-theme='dark']` 属性
+ * 2. 检查指定 CSS 变量的亮度值
+ * 3. 检查 `--color-gray-bg-page` 的亮度值
+ *
+ * @param options 检测配置选项
+ * @returns 检测到的主题 'light' | 'dark'
+ *
+ * @example
+ * ```tsx
+ * const theme = useDetectTheme();
+ * // theme: 'light' | 'dark'
+ *
+ * // 自定义配置
+ * const theme = useDetectTheme({
+ *   cssVariable: '--color-primary-bg-page',
+ *   darknessThreshold: 128,
+ *   observeChanges: true,
+ * });
+ * ```
+ */ export var useDetectTheme = function useDetectTheme() {
+    var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _options_cssVariable = options.cssVariable, cssVariable = _options_cssVariable === void 0 ? '--color-gray-bg-page' : _options_cssVariable, _options_darknessThreshold = options.darknessThreshold, darknessThreshold = _options_darknessThreshold === void 0 ? 145 : _options_darknessThreshold, _options_observeChanges = options.observeChanges, observeChanges = _options_observeChanges === void 0 ? true : _options_observeChanges;
+    var _useState = _sliced_to_array(useState(function() {
+        return detectTheme(cssVariable, darknessThreshold);
+    }), 2), theme = _useState[0], setTheme = _useState[1];
+    useEffect(function() {
+        if (!observeChanges) return;
+        var updateTheme = function updateTheme() {
+            setTheme(detectTheme(cssVariable, darknessThreshold));
+        };
+        // 监听 data-theme 属性变化
+        var htmlElement = document.documentElement;
+        var observer = new MutationObserver(function(mutations) {
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = mutations[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var mutation = _step.value;
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+                        updateTheme();
+                        break;
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+        });
+        observer.observe(htmlElement, {
+            attributes: true,
+            attributeFilter: [
+                'data-theme',
+                'class',
+                'style'
+            ]
+        });
+        // 监听 prefers-color-scheme 变化
+        var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        var handleMediaChange = function handleMediaChange() {
+            updateTheme();
+        };
+        mediaQuery.addEventListener('change', handleMediaChange);
+        // 初始检测
+        updateTheme();
+        return function() {
+            observer.disconnect();
+            mediaQuery.removeEventListener('change', handleMediaChange);
+        };
+    }, [
+        cssVariable,
+        darknessThreshold,
+        observeChanges
+    ]);
+    return theme;
+};
+export default useDetectTheme;

package/dist/Schema/SchemaEditor/index.js

@@ -442,6 +442,7 @@ import { useStyle } from "./style";
     ]);
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         className: classNames(prefixCls, className, hashId),
+        "data-testid": prefixCls,
         style: {
             height: typeof height === 'number' ? "".concat(height, "px") : height
         }

package/dist/Schema/SchemaForm/index.js

@@ -452,6 +452,7 @@ import { I18nContext, compileTemplate } from "../../I18n";
         renderFormItem
     ]);
     return /*#__PURE__*/ React.createElement(Form, {
+        "data-testid": "schema-form",
         form: form,
         layout: "vertical",
         initialValues: defaultValues,