deepsea-components 5.7.0 → 5.7.2

package/dist/esm/components/Trapezium.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","px","transformCSSVariable","jsx","_jsx","Trapezium","props","ref","top","bottom","height","borderRadius","className","style","rest","diff","a","Math","atan","b","tan","c","cos","d","sin","e","PI","f","g","h","width","clipath"],"sources":["../../../src/components/Trapezium.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { HTMLAttributes, forwardRef } from \"react\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\n\r\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\r\n    top: number\r\n    bottom: number\r\n    height: number\r\n    borderRadius: number\r\n}\r\n\r\n/** 梯形组件 */\r\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\r\n    const { top, bottom, height, borderRadius, className, style, ...rest } = props\r\n\r\n    const diff = (bottom - top) / 2\r\n\r\n    const a = Math.atan(height / diff) / 2\r\n\r\n    const b = borderRadius / Math.tan(a)\r\n\r\n    const c = b * Math.cos(a * 2)\r\n\r\n    const d = b * Math.sin(a * 2)\r\n\r\n    const e = Math.PI / 2 - a\r\n\r\n    const f = borderRadius / Math.tan(e)\r\n\r\n    const g = f * Math.cos(a * 2)\r\n\r\n    const h = f * Math.sin(a * 2)\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    width: var(--width);\r\n                    height: var(--height);\r\n                    clip-path: var(--clip-path);\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable(\r\n                {\r\n                    width: px(bottom),\r\n                    height: px(height),\r\n                    clipath: `path(\"M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`\r\n                },\r\n                style\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,oBAAoB;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AASnD;AACA,OAAO,MAAMC,SAAS,gBAAGL,UAAU,CAAiC,CAACM,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAM;IAAEC,GAAG;IAAEC,MAAM;IAAEC,MAAM;IAAEC,YAAY;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EAE9E,MAAMS,IAAI,GAAG,CAACN,MAAM,GAAGD,GAAG,IAAI,CAAC;EAE/B,MAAMQ,CAAC,GAAGC,IAAI,CAACC,IAAI,CAACR,MAAM,GAAGK,IAAI,CAAC,GAAG,CAAC;EAEtC,MAAMI,CAAC,GAAGR,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACJ,CAAC,CAAC;EAEpC,MAAMK,CAAC,GAAGF,CAAC,GAAGF,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMO,CAAC,GAAGJ,CAAC,GAAGF,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMS,CAAC,GAAGR,IAAI,CAACS,EAAE,GAAG,CAAC,GAAGV,CAAC;EAEzB,MAAMW,CAAC,GAAGhB,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACK,CAAC,CAAC;EAEpC,MAAMG,CAAC,GAAGD,CAAC,GAAGV,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMa,CAAC,GAAGF,CAAC,GAAGV,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,oBACIZ,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTK,SAAS,EAAEb,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDc,SACJ,CAAE;IACFC,KAAK,EAAEX,oBAAoB,CACvB;MACI4B,KAAK,EAAE7B,EAAE,CAACQ,MAAM,CAAC;MACjBC,MAAM,EAAET,EAAE,CAACS,MAAM,CAAC;MAClBqB,OAAO,EAAG,WAAUhB,IAAI,GAAGY,CAAE,IAAG,CAAE,OAAMhB,YAAa,IAAGA,YAAa,UAASI,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKR,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKZ,YAAa,IAAGA,YAAa,UAASQ,CAAE,IAAGT,MAAO,MAAKD,MAAM,GAAGU,CAAE,IAAGT,MAAO,MAAKC,YAAa,IAAGA,YAAa,UAASF,MAAM,GAAGY,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKf,GAAG,GAAGO,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKlB,YAAa,IAAGA,YAAa,UAASH,GAAG,GAAGO,IAAI,GAAGY,CAAE,IAAG,CAAE;IAClW,CAAC,EACDd,KACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
+{"version":3,"names":["css","clsx","forwardRef","px","transformCSSVariable","jsx","_jsx","Trapezium","props","ref","top","bottom","height","borderRadius","className","style","rest","diff","a","Math","atan","b","tan","c","cos","d","sin","e","PI","f","g","h","width","clipath"],"sources":["../../../src/components/Trapezium.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\n    top: number\n    bottom: number\n    height: number\n    borderRadius: number\n}\n\n/** 梯形组件 */\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\n    const { top, bottom, height, borderRadius, className, style, ...rest } = props\n\n    const diff = (bottom - top) / 2\n\n    const a = Math.atan(height / diff) / 2\n\n    const b = borderRadius / Math.tan(a)\n\n    const c = b * Math.cos(a * 2)\n\n    const d = b * Math.sin(a * 2)\n\n    const e = Math.PI / 2 - a\n\n    const f = borderRadius / Math.tan(e)\n\n    const g = f * Math.cos(a * 2)\n\n    const h = f * Math.sin(a * 2)\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    width: var(--width);\n                    height: var(--height);\n                    clip-path: var(--clip-path);\n                `,\n                className,\n            )}\n            style={transformCSSVariable(\n                {\n                    width: px(bottom),\n                    height: px(height),\n                    clipath: `path(\"M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`,\n                },\n                style,\n            )}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,oBAAoB;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AASnD;AACA,OAAO,MAAMC,SAAS,gBAAGL,UAAU,CAAiC,CAACM,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAM;IAAEC,GAAG;IAAEC,MAAM;IAAEC,MAAM;IAAEC,YAAY;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EAE9E,MAAMS,IAAI,GAAG,CAACN,MAAM,GAAGD,GAAG,IAAI,CAAC;EAE/B,MAAMQ,CAAC,GAAGC,IAAI,CAACC,IAAI,CAACR,MAAM,GAAGK,IAAI,CAAC,GAAG,CAAC;EAEtC,MAAMI,CAAC,GAAGR,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACJ,CAAC,CAAC;EAEpC,MAAMK,CAAC,GAAGF,CAAC,GAAGF,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMO,CAAC,GAAGJ,CAAC,GAAGF,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMS,CAAC,GAAGR,IAAI,CAACS,EAAE,GAAG,CAAC,GAAGV,CAAC;EAEzB,MAAMW,CAAC,GAAGhB,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACK,CAAC,CAAC;EAEpC,MAAMG,CAAC,GAAGD,CAAC,GAAGV,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMa,CAAC,GAAGF,CAAC,GAAGV,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,oBACIZ,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTK,SAAS,EAAEb,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDc,SACJ,CAAE;IACFC,KAAK,EAAEX,oBAAoB,CACvB;MACI4B,KAAK,EAAE7B,EAAE,CAACQ,MAAM,CAAC;MACjBC,MAAM,EAAET,EAAE,CAACS,MAAM,CAAC;MAClBqB,OAAO,EAAG,WAAUhB,IAAI,GAAGY,CAAE,IAAG,CAAE,OAAMhB,YAAa,IAAGA,YAAa,UAASI,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKR,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKZ,YAAa,IAAGA,YAAa,UAASQ,CAAE,IAAGT,MAAO,MAAKD,MAAM,GAAGU,CAAE,IAAGT,MAAO,MAAKC,YAAa,IAAGA,YAAa,UAASF,MAAM,GAAGY,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKf,GAAG,GAAGO,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKlB,YAAa,IAAGA,YAAa,UAASH,GAAG,GAAGO,IAAI,GAAGY,CAAE,IAAG,CAAE;IAClW,CAAC,EACDd,KACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}

package/dist/esm/utils/getReactVersion.js.map

@@ -1 +1 @@
-{"version":3,"names":["version","reg","getReactVersion","match","slice","map","Number"],"sources":["../../../src/utils/getReactVersion.ts"],"sourcesContent":["import { version } from \"react\"\r\n\r\nconst reg = /(\\d+)\\.(\\d+)\\.(\\d+)/\r\n\r\nexport function getReactVersion() {\r\n    return version.match(reg)!.slice(1).map(Number)\r\n}\r\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,MAAMC,GAAG,GAAG,qBAAqB;AAEjC,OAAO,SAASC,eAAeA,CAAA,EAAG;EAC9B,OAAOF,OAAO,CAACG,KAAK,CAACF,GAAG,CAAC,CAAEG,KAAK,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,MAAM,CAAC;AACnD"}
+{"version":3,"names":["version","reg","getReactVersion","match","slice","map","Number"],"sources":["../../../src/utils/getReactVersion.ts"],"sourcesContent":["import { version } from \"react\"\n\nconst reg = /(\\d+)\\.(\\d+)\\.(\\d+)/\n\nexport function getReactVersion() {\n    return version.match(reg)!.slice(1).map(Number)\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,MAAMC,GAAG,GAAG,qBAAqB;AAEjC,OAAO,SAASC,eAAeA,CAAA,EAAG;EAC9B,OAAOF,OAAO,CAACG,KAAK,CAACF,GAAG,CAAC,CAAEG,KAAK,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,MAAM,CAAC;AACnD"}

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["cssVariableReg","addCSSVariableLine","match","transformCSSVariableName","name","replace","toLowerCase","transformCSSVariable","style","style2","Object","assign","entries","reduce","acc","key","value","px"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from \"react\"\r\n\r\nexport type CSSVariableName = `--${string}`\r\n\r\nexport type CSSVariableValue = string | number | undefined\r\n\r\nexport interface StyleWithCSSVariable extends CSSProperties {\r\n    [X: CSSVariableName]: CSSVariableValue\r\n}\r\n\r\nconst cssVariableReg = /[A-Z]/\r\n\r\nfunction addCSSVariableLine(match: string): string {\r\n    return `-${match}`\r\n}\r\n\r\nexport function transformCSSVariableName(name: string): CSSVariableName {\r\n    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`\r\n}\r\n\r\nexport function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {\r\n    return Object.assign(\r\n        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {\r\n            acc[transformCSSVariableName(key)] = value\r\n            return acc\r\n        }, {}),\r\n        style2\r\n    )\r\n}\r\n\r\nexport function px(value: string | number | undefined): string | undefined {\r\n    return typeof value === \"number\" ? `${value}px` : value\r\n}\r\n"],"mappings":"AAUA,MAAMA,cAAc,GAAG,OAAO;AAE9B,SAASC,kBAAkBA,CAACC,KAAa,EAAU;EAC/C,OAAQ,IAAGA,KAAM,EAAC;AACtB;AAEA,OAAO,SAASC,wBAAwBA,CAACC,IAAY,EAAmB;EACpE,OAAQ,KAAIA,IAAI,CAACC,OAAO,CAACL,cAAc,EAAEC,kBAAkB,CAAC,CAACK,WAAW,CAAC,CAAE,EAAC;AAChF;AAEA,OAAO,SAASC,oBAAoBA,CAACC,KAAgD,EAAEC,MAAsB,EAAiB;EAC1H,OAAOC,MAAM,CAACC,MAAM,CAChBD,MAAM,CAACE,OAAO,CAACJ,KAAK,CAAC,CAACK,MAAM,CAAC,CAACC,GAAyB,EAAE,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;IACtEF,GAAG,CAACX,wBAAwB,CAACY,GAAG,CAAC,CAAC,GAAGC,KAAK;IAC1C,OAAOF,GAAG;EACd,CAAC,EAAE,CAAC,CAAC,CAAC,EACNL,MACJ,CAAC;AACL;AAEA,OAAO,SAASQ,EAAEA,CAACD,KAAkC,EAAsB;EACvE,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAI,GAAEA,KAAM,IAAG,GAAGA,KAAK;AAC3D"}
+{"version":3,"names":["cssVariableReg","addCSSVariableLine","match","transformCSSVariableName","name","replace","toLowerCase","transformCSSVariable","style","style2","Object","assign","entries","reduce","acc","key","value","px"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from \"react\"\n\nexport type CSSVariableName = `--${string}`\n\nexport type CSSVariableValue = string | number | undefined\n\nexport interface StyleWithCSSVariable extends CSSProperties {\n    [X: CSSVariableName]: CSSVariableValue\n}\n\nconst cssVariableReg = /[A-Z]/\n\nfunction addCSSVariableLine(match: string): string {\n    return `-${match}`\n}\n\nexport function transformCSSVariableName(name: string): CSSVariableName {\n    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`\n}\n\nexport function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {\n    return Object.assign(\n        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {\n            acc[transformCSSVariableName(key)] = value\n            return acc\n        }, {}),\n        style2,\n    )\n}\n\nexport function px(value: string | number | undefined): string | undefined {\n    return typeof value === \"number\" ? `${value}px` : value\n}\n"],"mappings":"AAUA,MAAMA,cAAc,GAAG,OAAO;AAE9B,SAASC,kBAAkBA,CAACC,KAAa,EAAU;EAC/C,OAAQ,IAAGA,KAAM,EAAC;AACtB;AAEA,OAAO,SAASC,wBAAwBA,CAACC,IAAY,EAAmB;EACpE,OAAQ,KAAIA,IAAI,CAACC,OAAO,CAACL,cAAc,EAAEC,kBAAkB,CAAC,CAACK,WAAW,CAAC,CAAE,EAAC;AAChF;AAEA,OAAO,SAASC,oBAAoBA,CAACC,KAAgD,EAAEC,MAAsB,EAAiB;EAC1H,OAAOC,MAAM,CAACC,MAAM,CAChBD,MAAM,CAACE,OAAO,CAACJ,KAAK,CAAC,CAACK,MAAM,CAAC,CAACC,GAAyB,EAAE,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;IACtEF,GAAG,CAACX,wBAAwB,CAACY,GAAG,CAAC,CAAC,GAAGC,KAAK;IAC1C,OAAOF,GAAG;EACd,CAAC,EAAE,CAAC,CAAC,CAAC,EACNL,MACJ,CAAC;AACL;AAEA,OAAO,SAASQ,EAAEA,CAACD,KAAkC,EAAsB;EACvE,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAI,GAAEA,KAAM,IAAG,GAAGA,KAAK;AAC3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.7.0",
+  "version": "5.7.2",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -32,7 +32,7 @@
     "hls.js": "^1.5.8",
     "smooth-scrollbar": "^8.8.4",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
-    "deepsea-tools": "5.11.0"
+    "deepsea-tools": "5.13.0"
   },
   "peerDependencies": {
     "@types/react": "^18.3.1",

package/src/components/AutoFit.tsx

@@ -1,101 +1,103 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
-import { px, transformCSSVariable } from "../utils"
-
-export interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {
-    /** 设计稿宽度，默认 1920 */
-    width?: number
-    /** 设计稿高度，默认 1080 */
-    height?: number
-    /**
-     * 在哪些方向进行缩放，默认缩放所有方向
-     * 1. 水平方向是指，宽度按照设计稿进行占满，高度反向缩放
-     * 2. 垂直方向是指，高度按照设计稿进行占满，宽度反向缩放
-     * 3. 默认是水平和垂直方向都进行缩放，类似于 background-size: contain 的效果
-     */
-    direction?: "horizontal" | "vertical" | "both"
-}
-
-/**
- * 自适应缩放组件
- *
- * 注意：
- * 1. 父元素必须设置非 static 定位方式
- * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit
- * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性
- * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: "none" }} />
- * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示
- */
-export const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {
-    const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props
-    const ele = useRef<HTMLDivElement>(null)
-    const [show, setShow] = useState(false)
-    const [transform, setTransform] = useState<string | undefined>(undefined)
-    const [width, setWidth] = useState<string | undefined>(undefined)
-    const [height, setHeight] = useState<string | undefined>(undefined)
-
-    useImperativeHandle(ref, () => ele.current!, [ele.current])
-    useLayoutEffect(() => {
-        const element = ele.current
-        const parent = element?.parentElement
-        if (!element || !parent) return
-        function listener(entries: ResizeObserverEntry[]) {
-            const entry = entries[0]
-            const { contentRect } = entry
-            if (direction === "horizontal") {
-                const scale = contentRect.width / designWidth
-                setTransform(`scale(${scale})`)
-                setWidth(px(designWidth))
-                setHeight(px(contentRect.height / scale))
-            } else if (direction === "vertical") {
-                const scale = contentRect.height / designHeight
-                setTransform(`scale(${scale})`)
-                setWidth(px(contentRect.width / scale))
-                setHeight(px(designHeight))
-            } else {
-                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)
-                setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`)
-                setWidth(px(designWidth))
-                setHeight(px(designHeight))
-            }
-            setShow(true)
-        }
-        const observer = new ResizeObserver(listener)
-        observer.observe(parent)
-        return () => observer.disconnect()
-    }, [ele.current?.parentElement, designWidth, designHeight, direction])
-
-    if (process.env.NODE_ENV === "development") {
-        useEffect(() => {
-            const parent = ele.current?.parentElement
-            if (!parent) return
-            const style = getComputedStyle(parent)
-            if (style.position === "static") {
-                console.warn("AutoFit 组件的父元素的 position 属性不应该是 static")
-            }
-        }, [ele.current?.parentElement])
-    }
-
-    if (!show) return <div ref={ele} style={{ display: "none" }} />
-
-    return (
-        <div
-            ref={ele}
-            className={clsx(
-                css`
-                    position: absolute;
-                    transform: var(--transform);
-                    transform-origin: top left;
-                    width: var(--width);
-                    height: var(--height);
-                `,
-                className
-            )}
-            style={transformCSSVariable({ transform, width, height }, style)}
-            {...rest}
-        />
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { px, transformCSSVariable } from "../utils"
+
+export interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {
+    /** 设计稿宽度，默认 1920 */
+    width?: number
+    /** 设计稿高度，默认 1080 */
+    height?: number
+    /**
+     * 在哪些方向进行缩放，默认缩放所有方向
+     * 1. 水平方向是指，宽度按照设计稿进行占满，高度反向缩放
+     * 2. 垂直方向是指，高度按照设计稿进行占满，宽度反向缩放
+     * 3. 默认是水平和垂直方向都进行缩放，类似于 background-size: contain 的效果
+     */
+    direction?: "horizontal" | "vertical" | "both"
+}
+
+/**
+ * 自适应缩放组件
+ *
+ * 注意：
+ * 1. 父元素必须设置非 static 定位方式
+ * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit
+ * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性
+ * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: "none" }} />
+ * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示
+ */
+export const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {
+    const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props
+    const ele = useRef<HTMLDivElement>(null)
+    const [show, setShow] = useState(false)
+    const [transform, setTransform] = useState<string | undefined>(undefined)
+    const [width, setWidth] = useState<string | undefined>(undefined)
+    const [height, setHeight] = useState<string | undefined>(undefined)
+
+    useImperativeHandle(ref, () => ele.current!, [ele.current])
+    useLayoutEffect(() => {
+        const element = ele.current
+        const parent = element?.parentElement
+        if (!element || !parent) return
+        function listener(entries: ResizeObserverEntry[]) {
+            const entry = entries[0]
+            const { contentRect } = entry
+            if (direction === "horizontal") {
+                const scale = contentRect.width / designWidth
+                setTransform(`scale(${scale})`)
+                setWidth(px(designWidth))
+                setHeight(px(contentRect.height / scale))
+            } else if (direction === "vertical") {
+                const scale = contentRect.height / designHeight
+                setTransform(`scale(${scale})`)
+                setWidth(px(contentRect.width / scale))
+                setHeight(px(designHeight))
+            } else {
+                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)
+                setTransform(
+                    `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,
+                )
+                setWidth(px(designWidth))
+                setHeight(px(designHeight))
+            }
+            setShow(true)
+        }
+        const observer = new ResizeObserver(listener)
+        observer.observe(parent)
+        return () => observer.disconnect()
+    }, [ele.current?.parentElement, designWidth, designHeight, direction])
+
+    if (process.env.NODE_ENV === "development") {
+        useEffect(() => {
+            const parent = ele.current?.parentElement
+            if (!parent) return
+            const style = getComputedStyle(parent)
+            if (style.position === "static") {
+                console.warn("AutoFit 组件的父元素的 position 属性不应该是 static")
+            }
+        }, [ele.current?.parentElement])
+    }
+
+    if (!show) return <div ref={ele} style={{ display: "none" }} />
+
+    return (
+        <div
+            ref={ele}
+            className={clsx(
+                css`
+                    position: absolute;
+                    transform: var(--transform);
+                    transform-origin: top left;
+                    width: var(--width);
+                    height: var(--height);
+                `,
+                className,
+            )}
+            style={transformCSSVariable({ transform, width, height }, style)}
+            {...rest}
+        />
+    )
+})

package/src/components/AutoScroll.tsx

@@ -1,132 +1,148 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { useSize } from "ahooks"
-import { clsx, getArray } from "deepsea-tools"
-import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
-import Scrollbar from "smooth-scrollbar"
-import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
-import { px, transformCSSVariable } from "../utils"
-import { Scroll, ScrollProps } from "./Scroll"
-
-export interface AutoScrollProps extends ScrollProps {
-    /** 轮播元素的个数 */
-    count: number
-
-    /** 轮播元素的高度 */
-    itemHeight: number
-
-    /**
-     * 轮播动画的时间，单位毫秒
-     * @default 1000
-     */
-    animation?: number
-
-    /**
-     * 每个元素的停留时间，单位毫秒
-     * @default 3000
-     */
-    duration?: number
-
-    /**
-     * 元素之间的间距
-     * @default 0
-     */
-    gap?: number
-
-    /** 容器类名 */
-    containerClassName?: string
-
-    /** 容器样式 */
-    containerStyle?: CSSProperties
-
-    /**
-     * 在鼠标移入时是否继续播放
-     * @default false
-     */
-    playOnMouseEnter?: boolean
-
-    /**
-     * 是否暂停
-     * @default false
-     */
-    paused?: boolean
-}
-
-export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
-    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props
-    const bar = useRef<Scrollbar | null>(null)
-    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
-    const ele = useRef<HTMLDivElement>(null)
-    const size = useSize(ele)
-    const pausedRef = useRef(false)
-    const pausedProps = useRef(paused)
-    pausedProps.current = paused
-
-    useImperativeHandle(ref, () => ele.current!, [])
-    useImperativeHandle(scrollbar, () => bar.current!, [])
-
-    useEffect(() => {
-        if (playOnMouseEnter) pausedRef.current = false
-    }, [playOnMouseEnter])
-
-    useEffect(() => {
-        if (!size || count === 0) return
-        const { height } = size
-        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
-        const scrollHeight = range[range.length - 1]
-        if (height >= scrollHeight) return
-        function scroll(target: number) {
-            clearTimeout(timeout.current)
-            timeout.current = setTimeout(() => {
-                if (pausedRef.current || pausedProps.current) return scroll(target)
-                bar.current?.scrollTo(0, target, animation)
-            }, duration)
-        }
-        scroll(range[0])
-        function listener(status: ScrollStatus) {
-            const { y } = status.offset
-            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05
-            const target = scrollToBottom ? 0 : range.find(item => item > y)!
-            scroll(target)
-        }
-        bar.current?.addListener(listener)
-        return () => {
-            clearTimeout(timeout.current)
-            bar.current?.removeListener(listener)
-            bar.current?.scrollTo(0, 0)
-        }
-    }, [size, count, itemHeight, gap, duration, animation])
-
-    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        if (playOnMouseEnter) return
-        pausedRef.current = true
-        onMouseEnter?.(e)
-    }
-
-    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        if (playOnMouseEnter) return
-        pausedRef.current = false
-        onMouseLeave?.(e)
-    }
-
-    return (
-        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
-            <div
-                className={clsx(
-                    css`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
-                    `,
-                    containerClassName
-                )}
-                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}>
-                {children}
-            </div>
-        </Scroll>
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { useSize } from "ahooks"
+import { clsx, getArray } from "deepsea-tools"
+import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+import Scrollbar from "smooth-scrollbar"
+import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
+import { px, transformCSSVariable } from "../utils"
+import { Scroll, ScrollProps } from "./Scroll"
+
+export interface AutoScrollProps extends ScrollProps {
+    /** 轮播元素的个数 */
+    count: number
+
+    /** 轮播元素的高度 */
+    itemHeight: number
+
+    /**
+     * 轮播动画的时间，单位毫秒
+     * @default 1000
+     */
+    animation?: number
+
+    /**
+     * 每个元素的停留时间，单位毫秒
+     * @default 3000
+     */
+    duration?: number
+
+    /**
+     * 元素之间的间距
+     * @default 0
+     */
+    gap?: number
+
+    /** 容器类名 */
+    containerClassName?: string
+
+    /** 容器样式 */
+    containerStyle?: CSSProperties
+
+    /**
+     * 在鼠标移入时是否继续播放
+     * @default false
+     */
+    playOnMouseEnter?: boolean
+
+    /**
+     * 是否暂停
+     * @default false
+     */
+    paused?: boolean
+}
+
+export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
+    const {
+        count,
+        itemHeight,
+        animation = 1000,
+        duration = 3000,
+        onMouseEnter,
+        onMouseLeave,
+        gap = 0,
+        containerClassName,
+        containerStyle,
+        children,
+        playOnMouseEnter,
+        scrollbar,
+        paused,
+        ...rest
+    } = props
+    const bar = useRef<Scrollbar | null>(null)
+    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
+    const ele = useRef<HTMLDivElement>(null)
+    const size = useSize(ele)
+    const pausedRef = useRef(false)
+    const pausedProps = useRef(paused)
+    pausedProps.current = paused
+
+    useImperativeHandle(ref, () => ele.current!, [])
+    useImperativeHandle(scrollbar, () => bar.current!, [])
+
+    useEffect(() => {
+        if (playOnMouseEnter) pausedRef.current = false
+    }, [playOnMouseEnter])
+
+    useEffect(() => {
+        if (!size || count === 0) return
+        const { height } = size
+        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
+        const scrollHeight = range[range.length - 1]
+        if (height >= scrollHeight) return
+        function scroll(target: number) {
+            clearTimeout(timeout.current)
+            timeout.current = setTimeout(() => {
+                if (pausedRef.current || pausedProps.current) return scroll(target)
+                bar.current?.scrollTo(0, target, animation)
+            }, duration)
+        }
+        scroll(range[0])
+        function listener(status: ScrollStatus) {
+            const { y } = status.offset
+            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05
+            const target = scrollToBottom ? 0 : range.find(item => item > y)!
+            scroll(target)
+        }
+        bar.current?.addListener(listener)
+        return () => {
+            clearTimeout(timeout.current)
+            bar.current?.removeListener(listener)
+            bar.current?.scrollTo(0, 0)
+        }
+    }, [size, count, itemHeight, gap, duration, animation])
+
+    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (playOnMouseEnter) return
+        pausedRef.current = true
+        onMouseEnter?.(e)
+    }
+
+    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (playOnMouseEnter) return
+        pausedRef.current = false
+        onMouseLeave?.(e)
+    }
+
+    return (
+        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
+            <div
+                className={clsx(
+                    css`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `,
+                    containerClassName,
+                )}
+                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}
+            >
+                {children}
+            </div>
+        </Scroll>
+    )
+})

package/src/components/AutoSizeTextarea.tsx

@@ -1,49 +1,49 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
-import { px, transformCSSVariable } from "../utils"
-
-/**
- * 自适应高度的文本域
- */
-export const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {
-    const { className, style, ...rest } = props
-    const [height, setHeight] = useState<string | undefined>(undefined)
-    const ele = useRef<HTMLTextAreaElement>(null)
-
-    useImperativeHandle(ref, () => ele.current!, [])
-
-    useLayoutEffect(() => {
-        const textarea = ele.current!
-        function resizeTextarea() {
-            setHeight("auto")
-            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))
-        }
-        resizeTextarea()
-        textarea.addEventListener("input", resizeTextarea)
-        textarea.addEventListener("change", resizeTextarea)
-
-        return () => {
-            textarea.removeEventListener("input", resizeTextarea)
-            textarea.removeEventListener("change", resizeTextarea)
-        }
-    }, [])
-
-    return (
-        <textarea
-            ref={ele}
-            className={clsx(
-                css`
-                    height: var(--height);
-                    resize: none;
-                    overflow-y: hidden;
-                `,
-                className
-            )}
-            style={transformCSSVariable({ height }, style)}
-            {...rest}
-        />
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { px, transformCSSVariable } from "../utils"
+
+/**
+ * 自适应高度的文本域
+ */
+export const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {
+    const { className, style, ...rest } = props
+    const [height, setHeight] = useState<string | undefined>(undefined)
+    const ele = useRef<HTMLTextAreaElement>(null)
+
+    useImperativeHandle(ref, () => ele.current!, [])
+
+    useLayoutEffect(() => {
+        const textarea = ele.current!
+        function resizeTextarea() {
+            setHeight("auto")
+            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))
+        }
+        resizeTextarea()
+        textarea.addEventListener("input", resizeTextarea)
+        textarea.addEventListener("change", resizeTextarea)
+
+        return () => {
+            textarea.removeEventListener("input", resizeTextarea)
+            textarea.removeEventListener("change", resizeTextarea)
+        }
+    }, [])
+
+    return (
+        <textarea
+            ref={ele}
+            className={clsx(
+                css`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
+                `,
+                className,
+            )}
+            style={transformCSSVariable({ height }, style)}
+            {...rest}
+        />
+    )
+})