@hsu-react/ui 0.0.18 → 0.0.19

package/lib/components/FilePreview/_components/XlsxPreviewPane/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface XlsxPreviewPaneProps {
+    fileUrl?: string;
+    fileType?: string;
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * xlsx 预览的完整单元：取数（useXlsxData → xlsx）＋ 渲染（XlsxPreview → x-data-spreadsheet）。
+ *
+ * 单独成文件是为了让 FilePreview 能整体 lazy 掉它。useXlsxData 是 hook，不能写在
+ * switch 的某个分支里，若留在 FilePreview 顶层就会把 xlsx 静态拖进依赖图——那正是
+ * 要避免的。把「取数 + 渲染」收进同一个组件，整块按需加载。
+ */
+declare const XlsxPreviewPane: React.FC<XlsxPreviewPaneProps>;
+export default XlsxPreviewPane;

package/lib/components/FilePreview/_components/XlsxPreviewPane/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _XlsxPreview = _interopRequireDefault(require("../XlsxPreview"));
+var _hooks = require("../../_hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * xlsx 预览的完整单元：取数（useXlsxData → xlsx）＋ 渲染（XlsxPreview → x-data-spreadsheet）。
+ *
+ * 单独成文件是为了让 FilePreview 能整体 lazy 掉它。useXlsxData 是 hook，不能写在
+ * switch 的某个分支里，若留在 FilePreview 顶层就会把 xlsx 静态拖进依赖图——那正是
+ * 要避免的。把「取数 + 渲染」收进同一个组件，整块按需加载。
+ */
+const XlsxPreviewPane = ({
+  fileUrl,
+  fileType,
+  onClose,
+  className
+}) => {
+  const xlsxData = (0, _hooks.useXlsxData)({
+    fileType,
+    fileUrl
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_XlsxPreview.default, {
+    xlsxData: xlsxData,
+    onClose: onClose,
+    className: className
+  });
+};
+var _default = exports.default = XlsxPreviewPane;

package/lib/components/FilePreview/index.js

@@ -10,17 +10,35 @@ Object.defineProperty(exports, "FilePreviewTypeArr", {
   }
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PdfPreview = _interopRequireDefault(require("./_components/PdfPreview"));
+var _react = _interopRequireWildcard(require("react"));
 var _VideoPreview = _interopRequireDefault(require("./_components/VideoPreview"));
 var _TextPreview = _interopRequireDefault(require("./_components/TextPreview"));
-var _MarkdownPreview = _interopRequireDefault(require("./_components/MarkdownPreview"));
 var _ImagePreview = _interopRequireDefault(require("./_components/ImagePreview"));
-var _XlsxPreview = _interopRequireDefault(require("./_components/XlsxPreview"));
-var _hooks = require("./_hooks");
 var _utils = require("./_utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 重型格式按需加载。
+ *
+ * FilePreview 是个按 fileType 分发的 dispatcher，而它处在 Upload / FormItem 的静态
+ * 依赖图上（FormItem → FormUpload → Upload → FilePreview），业务侧只要用到任何一种
+ * 表单项，下面这些只服务于特定格式的库就会被打进首屏：
+ *
+ *   pdf   → PdfPreview       → hsu-utils 的 RenderPDF → pdfjs-dist   约 374 KB
+ *   xlsx  → XlsxPreviewPane  → xlsx ＋ x-data-spreadsheet
+ *   md    → MarkdownPreview  → Markdown → katex 等
+ *
+ * 修 dispatcher 而不是逐个改它的引用方：这里改一次，所有静态 import FilePreview 的
+ * 地方（Upload、UploadedItem、FormImage…）都受益，也不会因为将来多一个引用方而回归。
+ *
+ * 图片/文本/视频三种是轻量实现，保持静态——它们也是最常命中的格式，不值得为其
+ * 付一次异步往返。
+ */
+const PdfPreview = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./_components/PdfPreview"))));
+const MarkdownPreview = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./_components/MarkdownPreview"))));
+const XlsxPreviewPane = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./_components/XlsxPreviewPane"))));
 const FilePreview = props => {
   const {
     fileUrl,
@@ -31,10 +49,6 @@ const FilePreview = props => {
     className,
     pagination
   } = props;
-  const xlsxData = (0, _hooks.useXlsxData)({
-    fileType,
-    fileUrl
-  });
   if (!open) {
     return null;
   }
@@ -49,12 +63,15 @@ const FilePreview = props => {
       }
     case "pdf":
       {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PdfPreview.default, {
-          fileUrl: fileUrl,
-          open: open,
-          onClose: onClose,
-          className: className,
-          pagination: pagination
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PdfPreview, {
+            fileUrl: fileUrl,
+            open: open,
+            onClose: onClose,
+            className: className,
+            pagination: pagination
+          })
         });
       }
     case "jpg":
@@ -78,18 +95,25 @@ const FilePreview = props => {
       }
     case "md":
       {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkdownPreview.default, {
-          text: text,
-          onClose: onClose,
-          className: className
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkdownPreview, {
+            text: text,
+            onClose: onClose,
+            className: className
+          })
         });
       }
     case "xlsx":
       {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_XlsxPreview.default, {
-          xlsxData: xlsxData,
-          onClose: onClose,
-          className: className
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(XlsxPreviewPane, {
+            fileUrl: fileUrl,
+            fileType: fileType,
+            onClose: onClose,
+            className: className
+          })
         });
       }
     default:

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.js

@@ -8,11 +8,31 @@ var _Input = _interopRequireDefault(require("../../../Input"));
 var _ItemContainer = _interopRequireDefault(require("../../ItemContainer"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _zxcvbn = _interopRequireDefault(require("zxcvbn"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /**
+ * zxcvbn 约 793 KB（未压缩），却只在这一个字段的 onChange 里用来算强度分。
+ * 静态 import 会让它跟着 FormInput → FormItem 进入每个引入过表单项的页面的
+ * 首屏 chunk。改成动态 import：只有真的渲染了 PASSWORDSTRENGTH 字段才去拉。
+ *
+ * 模块级缓存 Promise，多个密码框共用一次加载；失败时清掉缓存，下次重试。
+ */
+let zxcvbnPromise;
+const loadZxcvbn = () => {
+  if (!zxcvbnPromise) {
+    zxcvbnPromise = Promise.resolve().then(() => _interopRequireWildcard(require("zxcvbn"))).then(mod => {
+      // zxcvbn 是 `export =` 的 CJS 模块：不同打包器/interop 下动态 import 拿到的
+      // 可能是函数本身，也可能是 { default: 函数 }，两种都要兼容
+      const m = mod;
+      return m.default ?? m;
+    }).catch(err => {
+      zxcvbnPromise = undefined;
+      throw err;
+    });
+  }
+  return zxcvbnPromise;
+};
 const PasswordStrength = props => {
   const {
     placeholder,
@@ -20,6 +40,13 @@ const PasswordStrength = props => {
     ...inputConfig
   } = props;
   const [fraction, setFraction] = (0, _react.useState)(0);
+  // 挂载即预取：chunk 仍是独立的，但用户敲第一个字符时通常已经就绪
+  (0, _react.useEffect)(() => {
+    loadZxcvbn().catch(() => undefined);
+  }, []);
+
+  // 打字比加载快时会有多次并发计算，迟到的结果不能盖掉最新一次
+  const seqRef = (0, _react.useRef)(0);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _indexModule.default.passwordStrength,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Password, {
@@ -27,8 +54,13 @@ const PasswordStrength = props => {
       placeholder: placeholder ?? "请输入",
       onChange: value => {
         onChange && onChange(value);
-        const _fraction = (0, _zxcvbn.default)(value).guesses_log10;
-        setFraction(_fraction);
+        const seq = ++seqRef.current;
+        loadZxcvbn().then(zxcvbn => {
+          if (seq !== seqRef.current) return;
+          setFraction(zxcvbn(value).guesses_log10);
+        })
+        // 强度条只是辅助提示，拉不到就不显示，不打断用户输入
+        .catch(() => undefined);
       },
       allowClear: true,
       autoComplete: "new-password"

package/lib/components/FormItem/index.d.ts

@@ -1,7 +1,7 @@
 import { FormAutoProps } from "./FormAuto";
 import { FormCheckboxGroupProps, FormCheckboxProps } from "./FormCheckbox";
 import { FormDatePickerProps, FormRangePickerProps, FormStepPickerProps } from "./FormDatePicker";
-import { FormEditorProps } from "./FormEditor";
+import type { FormEditorProps } from "./FormEditor";
 import { FormInputNumberProps, FormInputProps, FormPasswordProps, FormPasswordStrengthProps, FormRangeInputProps, FormTextAreaInputProps } from "./FormInput";
 import { FormRadioProps } from "./FormRadio";
 import { FormSegmentedProps } from "./FormSegmented";
@@ -12,7 +12,7 @@ import { FormTreeProps } from "./FormTree";
 import { FormImageProps, FormUploadProps } from "./FormUpload";
 import ItemContainer, { ItemContainerProps } from "./ItemContainer";
 import { FormTextProps } from "./FormText";
-import { FormCodeMirrorProps } from "./FormCodeMirror";
+import type { FormCodeMirrorProps } from "./FormCodeMirror";
 import React from "react";
 export { ItemContainer as FormItemContainer };
 export type { ItemContainerProps as FormItemContainerProps };

package/lib/components/FormItem/index.js

@@ -13,7 +13,6 @@ exports.default = exports.PlaceholderDictEn = exports.PlaceholderDict = void 0;
 var _FormAuto = _interopRequireDefault(require("./FormAuto"));
 var _FormCheckbox = _interopRequireDefault(require("./FormCheckbox"));
 var _FormDatePicker = _interopRequireDefault(require("./FormDatePicker"));
-var _FormEditor = _interopRequireDefault(require("./FormEditor"));
 var _FormInput = _interopRequireDefault(require("./FormInput"));
 var _FormRadio = _interopRequireDefault(require("./FormRadio"));
 var _FormSegmented = _interopRequireDefault(require("./FormSegmented"));
@@ -24,10 +23,43 @@ var _FormTree = _interopRequireDefault(require("./FormTree"));
 var _FormUpload = _interopRequireDefault(require("./FormUpload"));
 var _ItemContainer = _interopRequireDefault(require("./ItemContainer"));
 var _FormText = _interopRequireDefault(require("./FormText"));
-var _FormCodeMirror = _interopRequireDefault(require("./FormCodeMirror"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /**
+ * 重型字段按需加载。
+ *
+ * FormItem 是个静态分发器，几乎每个业务页面都会引入它。若在这里静态 import
+ * 全部渲染器，那么**只要用到任何一种表单项**，富文本、代码编辑器这些巨型依赖
+ * 就会被一并拉进消费方的首屏 chunk：
+ *
+ *   FormItem → FormEditor      → Editor     → @wangeditor/editor      （约 814 KB）
+ *   FormItem → FormCodeMirror  → CodeMirror → @codemirror/*           （约 380 KB）
+ *
+ * 消费方实测：某后台项目仅因入口图里存在 FormItem，首屏就多背了约 2.5 MB
+ * 未压缩的三方库；改为按需加载后首屏从 3.72 MB 降到 965 KB（gzip）。
+ *
+ * 只有 type 真的命中 EDITOR / CODEMIRROR 时才会去拉对应 chunk。类型仍走静态
+ * `import type`（编译期擦除，不产生运行时依赖），所以 FormItemMap 不受影响。
+ * 同一目录下的 CodeMirror 早就用 `import()` 按需加载语言包/校验器，这里是同一思路。
+ */
+const FormEditor = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./FormEditor"))));
+const FormCodeMirror = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./FormCodeMirror"))));
+
+/**
+ * 重型字段的 Suspense 包装。
+ *
+ * fallback 用 null 而不是骨架：这些字段都由 ItemContainer 渲染 antd 的
+ * Form.Item，加载期间不占位反而不会让表单布局跳动；antd Form 的值存在 store 里，
+ * 字段挂载晚于 setFieldsValue 也能正确回填，不影响编辑态回显。
+ */
+const LazyField = ({
+  children
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: null,
+  children: children
+});
 // Common base type
 
 // Core mapping (sorted by group)
@@ -252,12 +284,16 @@ const FormItem = props => {
         ...props
       });
     case "EDITOR":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormEditor.default, {
-        ...props
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(LazyField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormEditor, {
+          ...props
+        })
       });
     case "CODEMIRROR":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCodeMirror.default, {
-        ...props
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(LazyField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormCodeMirror, {
+          ...props
+        })
       });
     case "TEXT":
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormText.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -41,8 +41,9 @@
     "dev": "dumi dev",
     "docs:build": "dumi build",
     "docs:preview": "dumi preview",
-    "build": "father build",
-    "prepublishOnly": "father build"
+    "build": "father build && node scripts/check-heavy-deps.cjs",
+    "prepublishOnly": "father build && node scripts/check-heavy-deps.cjs",
+    "check:deps": "node scripts/check-heavy-deps.cjs"
   },
   "dependencies": {
     "@ant-design/x": "^2.0.1",

package/src/components/Chart/Bar/index.tsx

@@ -280,14 +280,28 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     // Set the option: notMerge resets the dataZoom window to its initial position,
     // so when x-axis data is unchanged (e.g. re-render triggered by axis recalculation / legend selection), record the current window first and restore it afterwards
     const xAxisKey = xAxisData?.join("\u0001") ?? "";
-    const prevZoomRanges =
-      prevXAxisKeyRef.current === xAxisKey
-        ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
-            | Array<{ start?: number; end?: number }>
-            | undefined)
-        : undefined;
+    const sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    const prevZoomRanges = sameXAxis
+      ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+          | Array<{ start?: number; end?: number }>
+          | undefined)
+      : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    const prevLegendScrollIndex = sameXAxis
+      ? (
+          (chart.getOption() as ChartsOption | undefined)?.legend as
+            | Array<{ scrollDataIndex?: number }>
+            | undefined
+        )?.[0]?.scrollDataIndex
+      : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: { scrollDataIndex: prevLegendScrollIndex },
+      } as unknown as ChartOptionType);
+    }
     const nextZooms = (chartOption as ChartsOption).dataZoom;
     if (
       prevZoomRanges?.length &&
@@ -406,6 +420,10 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
         autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel:
+          !normalizedScroll.zoomEnabled ||
+          normalizedScroll.wheelModeWhenSliderHidden !== "scroll",
       });
     }
 
@@ -443,6 +461,8 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
+    // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
+    normalizedScroll,
   ]);
 
   // Handle auto play

package/src/components/Chart/Line/index.tsx

@@ -277,14 +277,28 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     // Set the option: notMerge resets the dataZoom window to its initial position,
     // so when x-axis data is unchanged (e.g. re-render triggered by axis recalculation / legend selection), record the current window first and restore it afterwards
     const xAxisKey = xAxisData?.join("\u0001") ?? "";
-    const prevZoomRanges =
-      prevXAxisKeyRef.current === xAxisKey
-        ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
-            | Array<{ start?: number; end?: number }>
-            | undefined)
-        : undefined;
+    const sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    const prevZoomRanges = sameXAxis
+      ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+          | Array<{ start?: number; end?: number }>
+          | undefined)
+      : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    const prevLegendScrollIndex = sameXAxis
+      ? (
+          (chart.getOption() as ChartsOption | undefined)?.legend as
+            | Array<{ scrollDataIndex?: number }>
+            | undefined
+        )?.[0]?.scrollDataIndex
+      : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: { scrollDataIndex: prevLegendScrollIndex },
+      } as unknown as ChartOptionType);
+    }
     const nextZooms = (chartOption as ChartsOption).dataZoom;
     if (
       prevZoomRanges?.length &&
@@ -403,6 +417,10 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
         autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel:
+          !normalizedScroll.zoomEnabled ||
+          normalizedScroll.wheelModeWhenSliderHidden !== "scroll",
       });
     }
 
@@ -440,6 +458,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
+    // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
+    normalizedScroll,
   ]);
 
   // Handle auto play

package/src/components/Chart/_utils/autoScrollLegend.ts

@@ -7,6 +7,11 @@ export interface AutoScrollLegendProps {
   interval?: number;
   autoStart?: boolean;
   stopOnWheel?: boolean;
+  /**
+   * 是否接管滚轮翻图例，默认 true。
+   * 图表自身已用滚轮平移 x 轴时传 false，避免一次滚动既翻图例又移坐标轴。
+   */
+  enableWheel?: boolean;
 }
 
 export function autoScrollLegend(props: AutoScrollLegendProps) {
@@ -17,9 +22,14 @@ export function autoScrollLegend(props: AutoScrollLegendProps) {
     interval = 1500,
     autoStart = true,
     stopOnWheel = true,
+    enableWheel = true,
   } = props;
 
-  let currentIndex = 0;
+  // 组件重渲染会重建滚动器，从图例当前位置接着轮播，避免每次都跳回第一项
+  const legendOption = (
+    chart.getOption() as { legend?: Array<{ scrollDataIndex?: number }> }
+  )?.legend?.[0];
+  let currentIndex = legendOption?.scrollDataIndex ?? 0;
   let scrollInterval: NodeJS.Timeout | null = null;
   let isManualScrolling = false;
 
@@ -90,13 +100,17 @@ export function autoScrollLegend(props: AutoScrollLegendProps) {
   const chartDom = chart.getDom();
   chartDom.addEventListener("mouseover", handleMouseOver);
   chartDom.addEventListener("mouseout", handleMouseOut);
-  chartDom.addEventListener("wheel", handleWheel, { passive: false });
+  if (enableWheel) {
+    chartDom.addEventListener("wheel", handleWheel, { passive: false });
+  }
 
   function dispose() {
     stop();
     chartDom.removeEventListener("mouseover", handleMouseOver);
     chartDom.removeEventListener("mouseout", handleMouseOut);
-    chartDom.removeEventListener("wheel", handleWheel);
+    if (enableWheel) {
+      chartDom.removeEventListener("wheel", handleWheel);
+    }
   }
 
   if (autoStart) {

package/src/components/FilePreview/_components/XlsxPreviewPane/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import XlsxPreview from "../XlsxPreview";
+import { useXlsxData } from "../../_hooks";
+
+export interface XlsxPreviewPaneProps {
+  fileUrl?: string;
+  fileType?: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+/**
+ * xlsx 预览的完整单元：取数（useXlsxData → xlsx）＋ 渲染（XlsxPreview → x-data-spreadsheet）。
+ *
+ * 单独成文件是为了让 FilePreview 能整体 lazy 掉它。useXlsxData 是 hook，不能写在
+ * switch 的某个分支里，若留在 FilePreview 顶层就会把 xlsx 静态拖进依赖图——那正是
+ * 要避免的。把「取数 + 渲染」收进同一个组件，整块按需加载。
+ */
+const XlsxPreviewPane: React.FC<XlsxPreviewPaneProps> = ({
+  fileUrl,
+  fileType,
+  onClose,
+  className,
+}) => {
+  const xlsxData = useXlsxData({ fileType, fileUrl });
+
+  return (
+    <XlsxPreview xlsxData={xlsxData} onClose={onClose} className={className} />
+  );
+};
+
+export default XlsxPreviewPane;

package/src/components/FilePreview/index.md

@@ -59,3 +59,14 @@ export default () => {
 | onClose | 关闭回调 | `() => void` | - |
 
 > 另导出类型 `FilePreviewType` 与常量 `FilePreviewTypeArr`（支持的文件类型数组）。
+
+### 重型格式按需加载
+
+`pdf`、`xlsx`、`md` 三种预览器依赖体积很大的三方库（pdfjs、xlsx ＋ x-data-spreadsheet、
+katex 等），已改为按需加载：只有 `fileType` 真的命中时才去拉对应 chunk。
+`mp4` / 图片 / `txt` 是轻量实现，保持同步渲染。
+
+这一点对使用方很重要：`FilePreview` 在 `Upload`、`FormItem`（`FILE` / `IMAGEFILE`）的
+静态依赖图上，若不这么做，**业务侧只要用到任何一种表单项，上述库就会被打进首屏**。
+
+用法不变，组件内部已包 `Suspense`。首次预览某种重型格式时弹窗内容会晚一拍出现。

package/src/components/FilePreview/index.tsx

@@ -1,16 +1,33 @@
-import React from "react";
-import PdfPreview from "./_components/PdfPreview";
+import React, { Suspense, lazy } from "react";
 import VideoPreview from "./_components/VideoPreview";
 import TextPreview from "./_components/TextPreview";
-import MarkdownPreview from "./_components/MarkdownPreview";
 import ImagePreview from "./_components/ImagePreview";
-import XlsxPreview from "./_components/XlsxPreview";
-import { useXlsxData } from "./_hooks";
 import { FilePreviewType, FilePreviewTypeArr } from "./_utils";
 
 export type { FilePreviewType };
 export { FilePreviewTypeArr };
 
+/**
+ * 重型格式按需加载。
+ *
+ * FilePreview 是个按 fileType 分发的 dispatcher，而它处在 Upload / FormItem 的静态
+ * 依赖图上（FormItem → FormUpload → Upload → FilePreview），业务侧只要用到任何一种
+ * 表单项，下面这些只服务于特定格式的库就会被打进首屏：
+ *
+ *   pdf   → PdfPreview       → hsu-utils 的 RenderPDF → pdfjs-dist   约 374 KB
+ *   xlsx  → XlsxPreviewPane  → xlsx ＋ x-data-spreadsheet
+ *   md    → MarkdownPreview  → Markdown → katex 等
+ *
+ * 修 dispatcher 而不是逐个改它的引用方：这里改一次，所有静态 import FilePreview 的
+ * 地方（Upload、UploadedItem、FormImage…）都受益，也不会因为将来多一个引用方而回归。
+ *
+ * 图片/文本/视频三种是轻量实现，保持静态——它们也是最常命中的格式，不值得为其
+ * 付一次异步往返。
+ */
+const PdfPreview = lazy(() => import("./_components/PdfPreview"));
+const MarkdownPreview = lazy(() => import("./_components/MarkdownPreview"));
+const XlsxPreviewPane = lazy(() => import("./_components/XlsxPreviewPane"));
+
 interface FilePreviewProps {
   fileUrl?: string;
   fileType?: FilePreviewType;
@@ -25,7 +42,6 @@ interface FilePreviewProps {
 const FilePreview: React.FC<FilePreviewProps> = (props) => {
   const { fileUrl, fileType, open, onClose, text, className, pagination } =
     props;
-  const xlsxData = useXlsxData({ fileType, fileUrl });
 
   if (!open) {
     return null;
@@ -43,13 +59,15 @@ const FilePreview: React.FC<FilePreviewProps> = (props) => {
     }
     case "pdf": {
       return (
-        <PdfPreview
-          fileUrl={fileUrl}
-          open={open}
-          onClose={onClose}
-          className={className}
-          pagination={pagination}
-        />
+        <Suspense fallback={null}>
+          <PdfPreview
+            fileUrl={fileUrl}
+            open={open}
+            onClose={onClose}
+            className={className}
+            pagination={pagination}
+          />
+        </Suspense>
       );
     }
     case "jpg":
@@ -71,16 +89,25 @@ const FilePreview: React.FC<FilePreviewProps> = (props) => {
     }
     case "md": {
       return (
-        <MarkdownPreview text={text} onClose={onClose} className={className} />
+        <Suspense fallback={null}>
+          <MarkdownPreview
+            text={text}
+            onClose={onClose}
+            className={className}
+          />
+        </Suspense>
       );
     }
     case "xlsx": {
       return (
-        <XlsxPreview
-          xlsxData={xlsxData}
-          onClose={onClose}
-          className={className}
-        />
+        <Suspense fallback={null}>
+          <XlsxPreviewPane
+            fileUrl={fileUrl}
+            fileType={fileType}
+            onClose={onClose}
+            className={className}
+          />
+        </Suspense>
       );
     }
     default: {