From 5c095251551d076d2478a5975e2e53f421c49e96 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Wed, 29 Jan 2025 17:03:04 +0800
Subject: [PATCH 01/14] chore(deps): update react to v18.3.1

---
 internal/playground/package.json              |   4 +-
 package.json                                  |   8 +-
 .../components/src/loading/showLoading.tsx    |   2 +-
 .../components/src/message/useMessage.tsx     |   2 +-
 packages/react-ui/package.json                |   4 +-
 pnpm-lock.yaml                                | 108 +++++++++---------
 6 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/internal/playground/package.json b/internal/playground/package.json
index 931f2832..5abd122c 100644
--- a/internal/playground/package.json
+++ b/internal/playground/package.json
@@ -13,8 +13,8 @@
     "test": "react-scripts test"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router": "^6.11.2",
     "react-router-dom": "^6.11.2",
     "web-vitals": "^2.1.4"
diff --git a/package.json b/package.json
index 37629402..08893be2 100644
--- a/package.json
+++ b/package.json
@@ -50,8 +50,8 @@
     ]
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
@@ -67,8 +67,8 @@
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.5.4",
     "@types/node": "^20.5.6",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
diff --git a/packages/components/src/loading/showLoading.tsx b/packages/components/src/loading/showLoading.tsx
index 1b475ad4..2d91d917 100644
--- a/packages/components/src/loading/showLoading.tsx
+++ b/packages/components/src/loading/showLoading.tsx
@@ -1,5 +1,5 @@
 import type { LoadingProps } from './loading.types';
-import { createRoot, Root } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import { Loading } from './Loading';
 import React from 'react';
 
diff --git a/packages/components/src/message/useMessage.tsx b/packages/components/src/message/useMessage.tsx
index 7439dd1e..d1d5b088 100644
--- a/packages/components/src/message/useMessage.tsx
+++ b/packages/components/src/message/useMessage.tsx
@@ -2,8 +2,8 @@ import type { MessagePushOptions, MessageQueueRef } from './message.types';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { PartialPart } from '@tool-pack/types';
 import { MessageQueue } from './MessageQueue';
+import { createRoot } from 'react-dom/client';
 import { nextTick } from '@tool-pack/basic';
-import { createRoot } from 'react-dom';
 
 type Res = readonly [
   Record<
diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
index 274d9d09..385a72a4 100644
--- a/packages/react-ui/package.json
+++ b/packages/react-ui/package.json
@@ -61,8 +61,8 @@
     "rxjs": "^7.8.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "publishConfig": {
     "access": "public",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 337c7691..05a42709 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,10 +9,10 @@ importers:
   .:
     dependencies:
       react:
-        specifier: ^18.2.0
+        specifier: ^18.3.1
         version: 18.3.1
       react-dom:
-        specifier: ^18.2.0
+        specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
     devDependencies:
       '@commitlint/cli':
@@ -29,7 +29,7 @@ importers:
         version: 6.4.5(@types/jest@29.5.12)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))
       '@testing-library/react':
         specifier: ^14.1.2
-        version: 14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 14.3.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^14.4.3
         version: 14.5.2(@testing-library/dom@9.3.4)
@@ -55,11 +55,11 @@ importers:
         specifier: ^20.5.6
         version: 20.14.2
       '@types/react':
-        specifier: ^18.2.46
-        version: 18.3.3
+        specifier: ^18.3.18
+        version: 18.3.18
       '@types/react-dom':
-        specifier: ^18.2.18
-        version: 18.3.0
+        specifier: ^18.3.5
+        version: 18.3.5(@types/react@18.3.18)
       '@types/testing-library__jest-dom':
         specifier: ^5.14.9
         version: 5.14.9
@@ -89,10 +89,10 @@ importers:
         version: 6.1.2(postcss@8.4.38)
       dumi:
         specifier: ~2.2.17
-        version: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+        version: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       dumi-theme-antd-style:
         specifier: ^0.31.0
-        version: 0.31.0(@types/react@18.3.3)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.31.0(@types/react@18.3.18)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       enquirer:
         specifier: ^2.4.1
         version: 2.4.1
@@ -208,10 +208,10 @@ importers:
   internal/playground:
     devDependencies:
       react:
-        specifier: ^18.2.0
+        specifier: ^18.3.1
         version: 18.3.1
       react-dom:
-        specifier: ^18.2.0
+        specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
       react-router:
         specifier: ^6.11.2
@@ -239,10 +239,10 @@ importers:
         specifier: ^0.3.0
         version: 0.3.0
       react:
-        specifier: ^18.2.0
+        specifier: ^18.3.1
         version: 18.3.1
       react-dom:
-        specifier: ^18.2.0
+        specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
       rxjs:
         specifier: ^7.8.1
@@ -3013,11 +3013,13 @@ packages:
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
 
-  '@types/react-dom@18.3.0':
-    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
+  '@types/react-dom@18.3.5':
+    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+    peerDependencies:
+      '@types/react': ^18.0.0
 
-  '@types/react@18.3.3':
-    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
+  '@types/react@18.3.18':
+    resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
   '@types/resolve@1.17.1':
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
@@ -13559,7 +13561,7 @@ snapshots:
 
   '@emotion/memoize@0.8.1': {}
 
-  '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)':
+  '@emotion/react@11.11.4(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@emotion/babel-plugin': 11.11.0
@@ -13571,7 +13573,7 @@ snapshots:
       hoist-non-react-statics: 3.3.2
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
     transitivePeerDependencies:
       - supports-color
 
@@ -13929,23 +13931,23 @@ snapshots:
       '@floating-ui/core': 1.6.2
       '@floating-ui/utils': 0.2.2
 
-  '@floating-ui/react-dom-interactions@0.3.1(@types/react@18.3.3)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
+  '@floating-ui/react-dom-interactions@0.3.1(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
     dependencies:
-      '@floating-ui/react-dom': 0.6.3(@types/react@18.3.3)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
+      '@floating-ui/react-dom': 0.6.3(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       aria-hidden: 1.2.4
       point-in-polygon: 1.1.0
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.3)(react@18.1.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.18)(react@18.1.0)
     transitivePeerDependencies:
       - '@types/react'
       - react
       - react-dom
 
-  '@floating-ui/react-dom@0.6.3(@types/react@18.3.3)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
+  '@floating-ui/react-dom@0.6.3(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
     dependencies:
       '@floating-ui/dom': 0.4.5
       react: 18.1.0
       react-dom: 18.1.0(react@18.1.0)
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.3)(react@18.1.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.18)(react@18.1.0)
     transitivePeerDependencies:
       - '@types/react'
 
@@ -15004,13 +15006,15 @@ snapshots:
       '@types/jest': 29.5.12
       jest: 27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5))
 
-  '@testing-library/react@14.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@14.3.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@testing-library/dom': 9.3.4
-      '@types/react-dom': 18.3.0
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4)':
     dependencies:
@@ -15154,7 +15158,7 @@ snapshots:
 
   '@types/hoist-non-react-statics@3.3.5':
     dependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
       hoist-non-react-statics: 3.3.2
 
   '@types/html-minifier-terser@6.1.0': {}
@@ -15241,11 +15245,11 @@ snapshots:
 
   '@types/range-parser@1.2.7': {}
 
-  '@types/react-dom@18.3.0':
+  '@types/react-dom@18.3.5(@types/react@18.3.18)':
     dependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
 
-  '@types/react@18.3.3':
+  '@types/react@18.3.18':
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
@@ -15718,7 +15722,7 @@ snapshots:
     dependencies:
       tsx: 3.12.2
 
-  '@umijs/preset-umi@4.2.10(@types/node@20.14.2)(@types/react@18.3.3)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))':
+  '@umijs/preset-umi@4.2.10(@types/node@20.14.2)(@types/react@18.3.18)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))':
     dependencies:
       '@iconify/utils': 2.1.1
       '@svgr/core': 6.5.1
@@ -15742,7 +15746,7 @@ snapshots:
       '@umijs/zod2ts': 4.2.10
       babel-plugin-dynamic-import-node: 2.3.3
       babel-plugin-react-compiler: 0.0.0-experimental-c23de8d-20240515
-      click-to-react-component: 1.1.0(@types/react@18.3.3)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
+      click-to-react-component: 1.1.0(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       core-js: 3.34.0
       current-script-polyfill: 1.0.0
       enhanced-resolve: 5.9.3
@@ -16111,13 +16115,13 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  antd-style@3.6.2(@types/react@18.3.3)(antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  antd-style@3.6.2(@types/react@18.3.18)(antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@ant-design/cssinjs': 1.20.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@babel/runtime': 7.24.7
       '@emotion/cache': 11.11.0
       '@emotion/css': 11.11.2
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/react': 11.11.4(@types/react@18.3.18)(react@18.3.1)
       '@emotion/serialize': 1.1.4
       '@emotion/server': 11.11.0(@emotion/css@11.11.2)
       '@emotion/utils': 1.2.1
@@ -17043,9 +17047,9 @@ snapshots:
 
   cli-width@2.2.1: {}
 
-  click-to-react-component@1.1.0(@types/react@18.3.3)(react-dom@18.1.0(react@18.1.0))(react@18.1.0):
+  click-to-react-component@1.1.0(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0):
     dependencies:
-      '@floating-ui/react-dom-interactions': 0.3.1(@types/react@18.3.3)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
+      '@floating-ui/react-dom-interactions': 0.3.1(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       htm: 3.1.1
       react: 18.1.0
       react-merge-refs: 1.1.0
@@ -18019,18 +18023,18 @@ snapshots:
 
   dumi-assets-types@2.0.0-alpha.0: {}
 
-  dumi-theme-antd-style@0.31.0(@types/react@18.3.3)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  dumi-theme-antd-style@0.31.0(@types/react@18.3.18)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@ant-design/icons': 5.3.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@babel/runtime': 7.24.7
       '@floating-ui/react': 0.24.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       ahooks: 3.8.0(react@18.3.1)
       antd: 5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      antd-style: 3.6.2(@types/react@18.3.3)(antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      antd-style: 3.6.2(@types/react@18.3.18)(antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       chalk: 4.1.2
       chroma-js: 2.4.2
       copy-to-clipboard: 3.3.3
-      dumi: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+      dumi: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       fast-deep-equal: 3.1.3
       lodash: 4.17.21
       polished: 4.3.1
@@ -18041,8 +18045,8 @@ snapshots:
       react-syntax-highlighter: 15.5.0(react@18.3.1)
       shiki-es: 0.2.0
       use-merge-value: 1.2.0(react@18.3.1)
-      zustand: 4.5.2(@types/react@18.3.3)(immer@9.0.21)(react@18.3.1)
-      zustand-utils: 1.3.2(react@18.3.1)(zustand@4.5.2(@types/react@18.3.3)(immer@9.0.21)(react@18.3.1))
+      zustand: 4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1)
+      zustand-utils: 1.3.2(react@18.3.1)(zustand@4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1))
     transitivePeerDependencies:
       - '@types/react'
       - date-fns
@@ -18051,7 +18055,7 @@ snapshots:
       - moment
       - supports-color
 
-  dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
+  dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
     dependencies:
       '@ant-design/icons-svg': 4.4.2
       '@makotot/ghostui': 2.0.0(react@18.3.1)
@@ -18110,7 +18114,7 @@ snapshots:
       remark-rehype: 10.1.0
       sass: 1.77.4
       sitemap: 7.1.2
-      umi: 4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+      umi: 4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       unified: 10.1.2
       unist-util-visit: 4.1.2
       unist-util-visit-parents: 5.1.3
@@ -24275,7 +24279,7 @@ snapshots:
       '@formatjs/intl-displaynames': 6.6.8
       '@formatjs/intl-listformat': 7.5.7
       '@types/hoist-non-react-statics': 3.3.5
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
       hoist-non-react-statics: 3.3.2
       intl-messageformat: 10.5.14
       react: 18.3.1
@@ -26190,14 +26194,14 @@ snapshots:
   uglify-js@3.17.4:
     optional: true
 
-  umi@4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@18.3.3)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
+  umi@4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
     dependencies:
       '@babel/runtime': 7.23.6
       '@umijs/bundler-utils': 4.2.10
       '@umijs/bundler-webpack': 4.2.10(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       '@umijs/core': 4.2.10
       '@umijs/lint': 4.2.10(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(stylelint@15.11.0(typescript@5.4.5))(typescript@5.4.5)
-      '@umijs/preset-umi': 4.2.10(@types/node@20.14.2)(@types/react@18.3.3)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+      '@umijs/preset-umi': 4.2.10(@types/node@20.14.2)(@types/react@18.3.18)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       '@umijs/renderer-react': 4.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@umijs/server': 4.2.10
       '@umijs/test': 4.2.10(@babel/core@7.24.7)
@@ -26423,11 +26427,11 @@ snapshots:
       punycode: 1.4.1
       qs: 6.12.1
 
-  use-isomorphic-layout-effect@1.1.2(@types/react@18.3.3)(react@18.1.0):
+  use-isomorphic-layout-effect@1.1.2(@types/react@18.3.18)(react@18.1.0):
     dependencies:
       react: 18.1.0
     optionalDependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
 
   use-merge-value@1.2.0(react@18.3.1):
     dependencies:
@@ -27039,18 +27043,18 @@ snapshots:
 
   zod@3.23.8: {}
 
-  zustand-utils@1.3.2(react@18.3.1)(zustand@4.5.2(@types/react@18.3.3)(immer@9.0.21)(react@18.3.1)):
+  zustand-utils@1.3.2(react@18.3.1)(zustand@4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1)):
     dependencies:
       '@babel/runtime': 7.24.7
       fast-deep-equal: 3.1.3
       react: 18.3.1
-      zustand: 4.5.2(@types/react@18.3.3)(immer@9.0.21)(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1)
 
-  zustand@4.5.2(@types/react@18.3.3)(immer@9.0.21)(react@18.3.1):
+  zustand@4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1):
     dependencies:
       use-sync-external-store: 1.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.3
+      '@types/react': 18.3.18
       immer: 9.0.21
       react: 18.3.1
 

From fcfcdb1b3e4412d219124061febf673793355d2c Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Thu, 30 Jan 2025 21:50:11 +0800
Subject: [PATCH 02/14] chore(deps): update react to v19.0.0

---
 internal/playground/package.json |   10 +-
 package.json                     |   10 +-
 packages/react-ui/package.json   |    4 +-
 pnpm-lock.yaml                   | 1027 +++++++++++++++---------------
 4 files changed, 542 insertions(+), 509 deletions(-)

diff --git a/internal/playground/package.json b/internal/playground/package.json
index 5abd122c..5e6d98db 100644
--- a/internal/playground/package.json
+++ b/internal/playground/package.json
@@ -13,10 +13,10 @@
     "test": "react-scripts test"
   },
   "devDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^6.11.2",
-    "react-router-dom": "^6.11.2",
-    "web-vitals": "^2.1.4"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.3",
+    "react-router-dom": "^7.1.3",
+    "web-vitals": "^4.2.4"
   }
 }
diff --git a/package.json b/package.json
index 08893be2..e1d4c745 100644
--- a/package.json
+++ b/package.json
@@ -50,15 +50,15 @@
     ]
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@rollup/plugin-json": "^6.0.0",
     "@testing-library/jest-dom": "^6.1.2",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.4.3",
     "@tool-pack/basic": "^0.9.0",
     "@tool-pack/bom": "^0.1.0",
@@ -67,8 +67,8 @@
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.5.4",
     "@types/node": "^20.5.6",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
index 385a72a4..bd89b31b 100644
--- a/packages/react-ui/package.json
+++ b/packages/react-ui/package.json
@@ -61,8 +61,8 @@
     "rxjs": "^7.8.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "publishConfig": {
     "access": "public",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05a42709..acec66fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,11 +9,11 @@ importers:
   .:
     dependencies:
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
     devDependencies:
       '@commitlint/cli':
         specifier: ^17.7.1
@@ -28,8 +28,8 @@ importers:
         specifier: ^6.1.2
         version: 6.4.5(@types/jest@29.5.12)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))
       '@testing-library/react':
-        specifier: ^14.1.2
-        version: 14.3.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^16.2.0
+        version: 16.2.0(@testing-library/dom@9.3.4)(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@testing-library/user-event':
         specifier: ^14.4.3
         version: 14.5.2(@testing-library/dom@9.3.4)
@@ -55,11 +55,11 @@ importers:
         specifier: ^20.5.6
         version: 20.14.2
       '@types/react':
-        specifier: ^18.3.18
-        version: 18.3.18
+        specifier: ^19.0.8
+        version: 19.0.8
       '@types/react-dom':
-        specifier: ^18.3.5
-        version: 18.3.5(@types/react@18.3.18)
+        specifier: ^19.0.3
+        version: 19.0.3(@types/react@19.0.8)
       '@types/testing-library__jest-dom':
         specifier: ^5.14.9
         version: 5.14.9
@@ -89,10 +89,10 @@ importers:
         version: 6.1.2(postcss@8.4.38)
       dumi:
         specifier: ~2.2.17
-        version: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+        version: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       dumi-theme-antd-style:
         specifier: ^0.31.0
-        version: 0.31.0(@types/react@18.3.18)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.31.0(@types/react@19.0.8)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       enquirer:
         specifier: ^2.4.1
         version: 2.4.1
@@ -116,7 +116,7 @@ importers:
         version: 8.0.1
       father:
         specifier: ^4.3.1
-        version: 4.4.4(@babel/core@7.24.7)(@types/node@20.14.2)(styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(type-fest@2.19.0)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+        version: 4.4.4(@babel/core@7.24.7)(@types/node@20.14.2)(styled-components@6.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(type-fest@2.19.0)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       fs-extra:
         specifier: ^11.1.1
         version: 11.2.0
@@ -152,7 +152,7 @@ importers:
         version: 2.4.5(prettier@3.3.2)
       react-scripts:
         specifier: 5.0.1
-        version: 5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.24.7))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.24.7))(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/babel__core@7.20.5)(eslint@8.47.0)(react@18.3.1)(sass@1.77.4)(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5))(type-fest@2.19.0)(typescript@5.4.5)
+        version: 5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.24.7))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.24.7))(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/babel__core@7.20.5)(eslint@8.47.0)(react@19.0.0)(sass@1.77.4)(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5))(type-fest@2.19.0)(typescript@5.4.5)
       rollup:
         specifier: ^3.28.1
         version: 3.29.4
@@ -208,20 +208,20 @@ importers:
   internal/playground:
     devDependencies:
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
       react-router:
-        specifier: ^6.11.2
-        version: 6.23.1(react@18.3.1)
+        specifier: ^7.1.3
+        version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-router-dom:
-        specifier: ^6.11.2
-        version: 6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.1.3
+        version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       web-vitals:
-        specifier: ^2.1.4
-        version: 2.1.4
+        specifier: ^4.2.4
+        version: 4.2.4
 
   packages/components: {}
 
@@ -239,11 +239,11 @@ importers:
         specifier: ^0.3.0
         version: 0.3.0
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.0.0
+        version: 19.0.0(react@19.0.0)
       rxjs:
         specifier: ^7.8.1
         version: 7.8.1
@@ -2286,10 +2286,6 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
 
-  '@remix-run/router@1.16.1':
-    resolution: {integrity: sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==}
-    engines: {node: '>=14.0.0'}
-
   '@rollup/plugin-babel@5.3.1':
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -2794,12 +2790,20 @@ packages:
       vitest:
         optional: true
 
-  '@testing-library/react@14.3.1':
-    resolution: {integrity: sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==}
-    engines: {node: '>=14'}
+  '@testing-library/react@16.2.0':
+    resolution: {integrity: sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==}
+    engines: {node: '>=18'}
     peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
   '@testing-library/user-event@14.5.2':
     resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
@@ -2881,6 +2885,9 @@ packages:
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
+  '@types/cookie@0.6.0':
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -3013,14 +3020,17 @@ packages:
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
 
-  '@types/react-dom@18.3.5':
-    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+  '@types/react-dom@19.0.3':
+    resolution: {integrity: sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==}
     peerDependencies:
-      '@types/react': ^18.0.0
+      '@types/react': ^19.0.0
 
   '@types/react@18.3.18':
     resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
+  '@types/react@19.0.8':
+    resolution: {integrity: sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==}
+
   '@types/resolve@1.17.1':
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
 
@@ -4523,6 +4533,10 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
   copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
 
@@ -9913,10 +9927,10 @@ packages:
     peerDependencies:
       react: ^18.1.0
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+  react-dom@19.0.0:
+    resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
     peerDependencies:
-      react: ^18.3.1
+      react: ^19.0.0
 
   react-error-boundary@4.0.13:
     resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==}
@@ -9976,30 +9990,34 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
-  react-router-dom@6.23.1:
-    resolution: {integrity: sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
-
   react-router-dom@6.3.0:
     resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  react-router@6.23.1:
-    resolution: {integrity: sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==}
-    engines: {node: '>=14.0.0'}
+  react-router-dom@7.1.3:
+    resolution: {integrity: sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==}
+    engines: {node: '>=20.0.0'}
     peerDependencies:
-      react: '>=16.8'
+      react: '>=18'
+      react-dom: '>=18'
 
   react-router@6.3.0:
     resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==}
     peerDependencies:
       react: '>=16.8'
 
+  react-router@7.1.3:
+    resolution: {integrity: sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react-scripts@5.0.1:
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
@@ -10021,8 +10039,8 @@ packages:
     resolution: {integrity: sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==}
     engines: {node: '>=0.10.0'}
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+  react@19.0.0:
+    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -10457,8 +10475,8 @@ packages:
   scheduler@0.22.0:
     resolution: {integrity: sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+  scheduler@0.25.0:
+    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
 
   schema-utils@2.7.0:
     resolution: {integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==}
@@ -10551,6 +10569,9 @@ packages:
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -11420,6 +11441,9 @@ packages:
     resolution: {integrity: sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  turbo-stream@2.4.0:
+    resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==}
+
   type-check@0.3.2:
     resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
     engines: {node: '>= 0.8.0'}
@@ -11851,8 +11875,8 @@ packages:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
-  web-vitals@2.1.4:
-    resolution: {integrity: sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==}
+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
 
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
@@ -12234,36 +12258,36 @@ snapshots:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
 
-  '@ant-design/cssinjs@1.20.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@ant-design/cssinjs@1.20.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@emotion/hash': 0.8.0
       '@emotion/unitless': 0.7.5
       classnames: 2.5.1
       csstype: 3.1.3
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       stylis: 4.3.2
 
   '@ant-design/icons-svg@4.4.2': {}
 
-  '@ant-design/icons@5.3.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@ant-design/icons@5.3.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@ant-design/colors': 7.0.2
       '@ant-design/icons-svg': 4.4.2
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@ant-design/react-slick@1.1.2(react@18.3.1)':
+  '@ant-design/react-slick@1.1.2(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
       json2mq: 0.2.0
-      react: 18.3.1
+      react: 19.0.0
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.0
 
@@ -13561,19 +13585,19 @@ snapshots:
 
   '@emotion/memoize@0.8.1': {}
 
-  '@emotion/react@11.11.4(@types/react@18.3.18)(react@18.3.1)':
+  '@emotion/react@11.11.4(@types/react@19.0.8)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
       '@emotion/serialize': 1.1.4
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@19.0.0)
       '@emotion/utils': 1.2.1
       '@emotion/weak-memoize': 0.3.1
       hoist-non-react-statics: 3.3.2
-      react: 18.3.1
+      react: 19.0.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.8
     transitivePeerDependencies:
       - supports-color
 
@@ -13600,9 +13624,9 @@ snapshots:
 
   '@emotion/unitless@0.8.1': {}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1)':
+  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@19.0.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   '@emotion/utils@1.2.1': {}
 
@@ -13931,38 +13955,38 @@ snapshots:
       '@floating-ui/core': 1.6.2
       '@floating-ui/utils': 0.2.2
 
-  '@floating-ui/react-dom-interactions@0.3.1(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
+  '@floating-ui/react-dom-interactions@0.3.1(@types/react@19.0.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
     dependencies:
-      '@floating-ui/react-dom': 0.6.3(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
+      '@floating-ui/react-dom': 0.6.3(@types/react@19.0.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       aria-hidden: 1.2.4
       point-in-polygon: 1.1.0
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.18)(react@18.1.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@19.0.8)(react@18.1.0)
     transitivePeerDependencies:
       - '@types/react'
       - react
       - react-dom
 
-  '@floating-ui/react-dom@0.6.3(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
+  '@floating-ui/react-dom@0.6.3(@types/react@19.0.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)':
     dependencies:
       '@floating-ui/dom': 0.4.5
       react: 18.1.0
       react-dom: 18.1.0(react@18.1.0)
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.18)(react@18.1.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@19.0.8)(react@18.1.0)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@floating-ui/react-dom@2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react-dom@2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@floating-ui/dom': 1.6.5
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@floating-ui/react@0.24.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react@0.24.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       aria-hidden: 1.2.4
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       tabbable: 6.2.0
 
   '@floating-ui/utils@0.2.2': {}
@@ -14319,16 +14343,16 @@ snapshots:
       react: 18.1.0
       react-is: 16.13.1
 
-  '@loadable/component@5.15.2(react@18.3.1)':
+  '@loadable/component@5.15.2(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       hoist-non-react-statics: 3.3.2
-      react: 18.3.1
+      react: 19.0.0
       react-is: 16.13.1
 
-  '@makotot/ghostui@2.0.0(react@18.3.1)':
+  '@makotot/ghostui@2.0.0(react@19.0.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   '@microsoft/api-extractor-model@7.28.4(@types/node@20.14.2)':
     dependencies:
@@ -14474,75 +14498,73 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.7
 
-  '@rc-component/color-picker@1.5.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/color-picker@1.5.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@ctrl/tinycolor': 3.6.1
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@rc-component/context@1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/context@1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   '@rc-component/mini-decimal@1.1.0':
     dependencies:
       '@babel/runtime': 7.24.7
 
-  '@rc-component/mutate-observer@1.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/mutate-observer@1.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@rc-component/portal@1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/portal@1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@rc-component/tour@1.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/tour@1.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/portal': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@rc-component/trigger@1.18.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/trigger@1.18.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/portal': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  '@rc-component/trigger@2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@rc-component/trigger@2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/portal': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@remix-run/router@1.16.1': {}
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   '@rollup/plugin-babel@5.3.1(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@2.79.1)':
     dependencies:
@@ -15006,15 +15028,15 @@ snapshots:
       '@types/jest': 29.5.12
       jest: 27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5))
 
-  '@testing-library/react@14.3.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.2.0(@testing-library/dom@9.3.4)(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
       '@testing-library/dom': 9.3.4
-      '@types/react-dom': 18.3.5(@types/react@18.3.18)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.8
+      '@types/react-dom': 19.0.3(@types/react@19.0.8)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4)':
     dependencies:
@@ -15100,6 +15122,8 @@ snapshots:
     dependencies:
       '@types/node': 20.14.2
 
+  '@types/cookie@0.6.0': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 0.7.34
@@ -15158,7 +15182,7 @@ snapshots:
 
   '@types/hoist-non-react-statics@3.3.5':
     dependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.8
       hoist-non-react-statics: 3.3.2
 
   '@types/html-minifier-terser@6.1.0': {}
@@ -15245,15 +15269,19 @@ snapshots:
 
   '@types/range-parser@1.2.7': {}
 
-  '@types/react-dom@18.3.5(@types/react@18.3.18)':
+  '@types/react-dom@19.0.3(@types/react@19.0.8)':
     dependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.8
 
   '@types/react@18.3.18':
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
 
+  '@types/react@19.0.8':
+    dependencies:
+      csstype: 3.1.3
+
   '@types/resolve@1.17.1':
     dependencies:
       '@types/node': 20.14.2
@@ -15722,7 +15750,7 @@ snapshots:
     dependencies:
       tsx: 3.12.2
 
-  '@umijs/preset-umi@4.2.10(@types/node@20.14.2)(@types/react@18.3.18)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))':
+  '@umijs/preset-umi@4.2.10(@types/node@20.14.2)(@types/react@19.0.8)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))':
     dependencies:
       '@iconify/utils': 2.1.1
       '@svgr/core': 6.5.1
@@ -15746,7 +15774,7 @@ snapshots:
       '@umijs/zod2ts': 4.2.10
       babel-plugin-dynamic-import-node: 2.3.3
       babel-plugin-react-compiler: 0.0.0-experimental-c23de8d-20240515
-      click-to-react-component: 1.1.0(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
+      click-to-react-component: 1.1.0(@types/react@19.0.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       core-js: 3.34.0
       current-script-polyfill: 1.0.0
       enhanced-resolve: 5.9.3
@@ -15807,15 +15835,15 @@ snapshots:
       react-helmet-async: 1.3.0(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       react-router-dom: 6.3.0(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
 
-  '@umijs/renderer-react@4.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@umijs/renderer-react@4.2.10(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.23.6
-      '@loadable/component': 5.15.2(react@18.3.1)
+      '@loadable/component': 5.15.2(react@19.0.0)
       history: 5.3.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-helmet-async: 1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom: 6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-helmet-async: 1.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react-router-dom: 6.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
 
   '@umijs/server@4.2.10':
     dependencies:
@@ -16022,14 +16050,14 @@ snapshots:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
-  ahooks@3.8.0(react@18.3.1):
+  ahooks@3.8.0(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       dayjs: 1.11.11
       intersection-observer: 0.12.2
       js-cookie: 2.2.1
       lodash: 4.17.21
-      react: 18.3.1
+      react: 19.0.0
       react-fast-compare: 3.2.2
       resize-observer-polyfill: 1.5.1
       screenfull: 5.2.0
@@ -16115,74 +16143,74 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  antd-style@3.6.2(@types/react@18.3.18)(antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  antd-style@3.6.2(@types/react@19.0.8)(antd@5.18.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      '@ant-design/cssinjs': 1.20.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@ant-design/cssinjs': 1.20.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@babel/runtime': 7.24.7
       '@emotion/cache': 11.11.0
       '@emotion/css': 11.11.2
-      '@emotion/react': 11.11.4(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/react': 11.11.4(@types/react@19.0.8)(react@19.0.0)
       '@emotion/serialize': 1.1.4
       '@emotion/server': 11.11.0(@emotion/css@11.11.2)
       '@emotion/utils': 1.2.1
-      antd: 5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      use-merge-value: 1.2.0(react@18.3.1)
+      antd: 5.18.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      use-merge-value: 1.2.0(react@19.0.0)
     transitivePeerDependencies:
       - '@types/react'
       - react-dom
       - supports-color
 
-  antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  antd@5.18.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@ant-design/colors': 7.0.2
-      '@ant-design/cssinjs': 1.20.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@ant-design/icons': 5.3.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@ant-design/react-slick': 1.1.2(react@18.3.1)
+      '@ant-design/cssinjs': 1.20.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@ant-design/icons': 5.3.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@ant-design/react-slick': 1.1.2(react@19.0.0)
       '@babel/runtime': 7.24.7
       '@ctrl/tinycolor': 3.6.1
-      '@rc-component/color-picker': 1.5.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@rc-component/mutate-observer': 1.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@rc-component/tour': 1.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/color-picker': 1.5.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@rc-component/mutate-observer': 1.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@rc-component/tour': 1.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
       copy-to-clipboard: 3.3.3
       dayjs: 1.11.11
-      qrcode.react: 3.1.0(react@18.3.1)
-      rc-cascader: 3.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-checkbox: 3.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-collapse: 3.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-dialog: 9.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-drawer: 7.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-dropdown: 4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-field-form: 2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-image: 7.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-input: 1.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-input-number: 9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-mentions: 2.13.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-menu: 9.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-notification: 5.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-pagination: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-picker: 4.5.0(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-progress: 4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-rate: 2.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-segmented: 2.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-select: 14.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-slider: 10.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-steps: 6.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-switch: 4.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-table: 7.45.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tabs: 15.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-textarea: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tooltip: 6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tree: 5.8.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tree-select: 5.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-upload: 4.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      qrcode.react: 3.1.0(react@19.0.0)
+      rc-cascader: 3.26.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-checkbox: 3.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-collapse: 3.7.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-dialog: 9.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-drawer: 7.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-dropdown: 4.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-field-form: 2.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-image: 7.8.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-input: 1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-input-number: 9.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-mentions: 2.13.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-menu: 9.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-notification: 5.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-pagination: 4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-picker: 4.5.0(dayjs@1.11.11)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-progress: 4.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-rate: 2.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-segmented: 2.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-select: 14.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-slider: 10.6.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-steps: 6.0.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-switch: 4.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-table: 7.45.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tabs: 15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-textarea: 1.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tooltip: 6.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tree: 5.8.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tree-select: 5.21.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-upload: 4.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       scroll-into-view-if-needed: 3.1.0
       throttle-debounce: 5.0.0
     transitivePeerDependencies:
@@ -16505,14 +16533,14 @@ snapshots:
       zod: 3.23.8
       zod-validation-error: 2.1.0(zod@3.23.8)
 
-  babel-plugin-styled-components@2.1.4(@babel/core@7.24.7)(styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  babel-plugin-styled-components@2.1.4(@babel/core@7.24.7)(styled-components@6.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)):
     dependencies:
       '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-module-imports': 7.24.7
       '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.24.7)
       lodash: 4.17.21
       picomatch: 2.3.1
-      styled-components: 6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      styled-components: 6.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -17047,9 +17075,9 @@ snapshots:
 
   cli-width@2.2.1: {}
 
-  click-to-react-component@1.1.0(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0):
+  click-to-react-component@1.1.0(@types/react@19.0.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0):
     dependencies:
-      '@floating-ui/react-dom-interactions': 0.3.1(@types/react@18.3.18)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
+      '@floating-ui/react-dom-interactions': 0.3.1(@types/react@19.0.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)
       htm: 3.1.1
       react: 18.1.0
       react-merge-refs: 1.1.0
@@ -17342,6 +17370,8 @@ snapshots:
 
   cookie@0.6.0: {}
 
+  cookie@1.0.2: {}
+
   copy-anything@2.0.6:
     dependencies:
       is-what: 3.14.1
@@ -18023,30 +18053,30 @@ snapshots:
 
   dumi-assets-types@2.0.0-alpha.0: {}
 
-  dumi-theme-antd-style@0.31.0(@types/react@18.3.18)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  dumi-theme-antd-style@0.31.0(@types/react@19.0.8)(dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(immer@9.0.21)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      '@ant-design/icons': 5.3.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@ant-design/icons': 5.3.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@babel/runtime': 7.24.7
-      '@floating-ui/react': 0.24.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      ahooks: 3.8.0(react@18.3.1)
-      antd: 5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      antd-style: 3.6.2(@types/react@18.3.18)(antd@5.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react': 0.24.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      ahooks: 3.8.0(react@19.0.0)
+      antd: 5.18.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      antd-style: 3.6.2(@types/react@19.0.8)(antd@5.18.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       chalk: 4.1.2
       chroma-js: 2.4.2
       copy-to-clipboard: 3.3.3
-      dumi: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+      dumi: 2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       fast-deep-equal: 3.1.3
       lodash: 4.17.21
       polished: 4.3.1
-      rc-footer: 0.6.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-layout-kit: 1.9.0(react@18.3.1)
-      react-syntax-highlighter: 15.5.0(react@18.3.1)
+      rc-footer: 0.6.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-layout-kit: 1.9.0(react@19.0.0)
+      react-syntax-highlighter: 15.5.0(react@19.0.0)
       shiki-es: 0.2.0
-      use-merge-value: 1.2.0(react@18.3.1)
-      zustand: 4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1)
-      zustand-utils: 1.3.2(react@18.3.1)(zustand@4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1))
+      use-merge-value: 1.2.0(react@19.0.0)
+      zustand: 4.5.2(@types/react@19.0.8)(immer@9.0.21)(react@19.0.0)
+      zustand-utils: 1.3.2(react@19.0.0)(zustand@4.5.2(@types/react@19.0.8)(immer@9.0.21)(react@19.0.0))
     transitivePeerDependencies:
       - '@types/react'
       - date-fns
@@ -18055,10 +18085,10 @@ snapshots:
       - moment
       - supports-color
 
-  dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
+  dumi@2.2.17(@babel/core@7.24.7)(@swc/helpers@0.5.1)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
     dependencies:
       '@ant-design/icons-svg': 4.4.2
-      '@makotot/ghostui': 2.0.0(react@18.3.1)
+      '@makotot/ghostui': 2.0.0(react@19.0.0)
       '@stackblitz/sdk': 1.10.0
       '@swc/core': 1.3.72(@swc/helpers@0.5.1)
       '@types/hast': 2.3.10
@@ -18092,18 +18122,18 @@ snapshots:
       mdast-util-to-string: 3.2.0
       nprogress: 0.2.0
       pluralize: 8.0.0
-      prism-react-renderer: 1.3.5(react@18.3.1)
+      prism-react-renderer: 1.3.5(react@19.0.0)
       prism-themes: 1.9.0
       prismjs: 1.29.0
       raw-loader: 4.0.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tabs: 12.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tree: 5.8.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-copy-to-clipboard: 5.1.0(react@18.3.1)
-      react-dom: 18.3.1(react@18.3.1)
-      react-error-boundary: 4.0.13(react@18.3.1)
-      react-intl: 6.6.8(react@18.3.1)(typescript@5.4.5)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tabs: 12.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tree: 5.8.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-copy-to-clipboard: 5.1.0(react@19.0.0)
+      react-dom: 19.0.0(react@19.0.0)
+      react-error-boundary: 4.0.13(react@19.0.0)
+      react-intl: 6.6.8(react@19.0.0)(typescript@5.4.5)
       rehype-autolink-headings: 6.1.1
       rehype-remove-comments: 5.0.0
       rehype-stringify: 9.0.4
@@ -18114,7 +18144,7 @@ snapshots:
       remark-rehype: 10.1.0
       sass: 1.77.4
       sitemap: 7.1.2
-      umi: 4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+      umi: 4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       unified: 10.1.2
       unist-util-visit: 4.1.2
       unist-util-visit-parents: 5.1.3
@@ -19001,7 +19031,7 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  father@4.4.4(@babel/core@7.24.7)(@types/node@20.14.2)(styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(type-fest@2.19.0)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
+  father@4.4.4(@babel/core@7.24.7)(@types/node@20.14.2)(styled-components@6.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(type-fest@2.19.0)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
     dependencies:
       '@microsoft/api-extractor': 7.39.1(@types/node@20.14.2)
       '@umijs/babel-preset-umi': 4.2.10
@@ -19013,7 +19043,7 @@ snapshots:
       '@vercel/ncc': 0.33.3
       babel-plugin-dynamic-import-node: 2.3.3
       babel-plugin-module-resolver: 4.1.0
-      babel-plugin-styled-components: 2.1.4(@babel/core@7.24.7)(styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      babel-plugin-styled-components: 2.1.4(@babel/core@7.24.7)(styled-components@6.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
       babel-plugin-transform-define: 2.0.1
       enhanced-resolve: 5.9.3
       esbuild: 0.17.19
@@ -23617,9 +23647,9 @@ snapshots:
 
   pretty-hrtime@1.0.3: {}
 
-  prism-react-renderer@1.3.5(react@18.3.1):
+  prism-react-renderer@1.3.5(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   prism-themes@1.9.0: {}
 
@@ -23734,9 +23764,9 @@ snapshots:
 
   q@1.5.1: {}
 
-  qrcode.react@3.1.0(react@18.3.1):
+  qrcode.react@3.1.0(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   qs@6.11.0:
     dependencies:
@@ -23805,33 +23835,33 @@ snapshots:
       schema-utils: 3.3.0
       webpack: 5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))
 
-  rc-cascader@3.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-cascader@3.26.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       array-tree-filter: 2.1.0
       classnames: 2.5.1
-      rc-select: 14.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tree: 5.8.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-select: 14.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tree: 5.8.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-checkbox@3.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-checkbox@3.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-collapse@3.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-collapse@3.7.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   rc-config-loader@4.1.3:
     dependencies:
@@ -23842,335 +23872,335 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  rc-dialog@9.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-dialog@9.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/portal': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-drawer@7.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-drawer@7.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/portal': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-dropdown@4.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-dropdown@4.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 1.18.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 1.18.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-dropdown@4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-dropdown@4.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-field-form@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-field-form@2.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       '@rc-component/async-validator': 5.0.4
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-footer@0.6.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-footer@0.6.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-image@7.8.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-image@7.8.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/portal': 1.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/portal': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-dialog: 9.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-dialog: 9.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-input-number@9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-input-number@9.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       '@rc-component/mini-decimal': 1.1.0
       classnames: 2.5.1
-      rc-input: 1.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-input: 1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-input@1.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-input@1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-mentions@2.13.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-mentions@2.13.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-input: 1.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-menu: 9.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-textarea: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-input: 1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-menu: 9.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-textarea: 1.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-menu@9.12.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-menu@9.12.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 1.18.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 1.18.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-overflow: 1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-overflow: 1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-menu@9.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-menu@9.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-overflow: 1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-overflow: 1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-motion@2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-motion@2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.3.2
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-notification@5.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-notification@5.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-overflow@1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-overflow@1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-pagination@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-pagination@4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-picker@4.5.0(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-picker@4.5.0(dayjs@1.11.11)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-overflow: 1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-overflow: 1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     optionalDependencies:
       dayjs: 1.11.11
 
-  rc-progress@4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-progress@4.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-rate@2.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-rate@2.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-resize-observer@1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-resize-observer@1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       resize-observer-polyfill: 1.5.1
 
-  rc-segmented@2.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-segmented@2.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-select@14.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-select@14.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-overflow: 1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-virtual-list: 3.14.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-overflow: 1.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-virtual-list: 3.14.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-slider@10.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-slider@10.6.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-steps@6.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-steps@6.0.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-switch@4.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-switch@4.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-table@7.45.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-table@7.45.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/context': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/context': 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.5.1
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-virtual-list: 3.14.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-virtual-list: 3.14.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-tabs@12.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-tabs@12.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-dropdown: 4.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-menu: 9.12.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-dropdown: 4.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-menu: 9.12.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-tabs@15.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-tabs@15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-dropdown: 4.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-menu: 9.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-dropdown: 4.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-menu: 9.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-textarea@1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-textarea@1.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-input: 1.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-input: 1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-tooltip@6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-tooltip@6.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      '@rc-component/trigger': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@rc-component/trigger': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       classnames: 2.3.2
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-tree-select@5.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-tree-select@5.21.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-select: 14.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-tree: 5.8.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-select: 14.14.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-tree: 5.8.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-tree@5.8.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-tree@5.8.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.3.2
-      rc-motion: 2.9.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-virtual-list: 3.14.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-motion: 2.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-virtual-list: 3.14.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-upload@4.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-upload@4.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
-  rc-util@5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-util@5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       react-is: 18.3.1
 
-  rc-virtual-list@3.14.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-virtual-list@3.14.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       classnames: 2.3.2
-      rc-resize-observer: 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      rc-resize-observer: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      rc-util: 5.41.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   rc@1.2.8:
     dependencies:
@@ -24188,11 +24218,11 @@ snapshots:
       regenerator-runtime: 0.13.11
       whatwg-fetch: 3.6.20
 
-  react-copy-to-clipboard@5.1.0(react@18.3.1):
+  react-copy-to-clipboard@5.1.0(react@19.0.0):
     dependencies:
       copy-to-clipboard: 3.3.3
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.0.0
 
   react-dev-utils@12.0.1(eslint@8.47.0)(typescript@5.4.5)(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
     dependencies:
@@ -24234,16 +24264,15 @@ snapshots:
       react: 18.1.0
       scheduler: 0.22.0
 
-  react-dom@18.3.1(react@18.3.1):
+  react-dom@19.0.0(react@19.0.0):
     dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
+      react: 19.0.0
+      scheduler: 0.25.0
 
-  react-error-boundary@4.0.13(react@18.3.1):
+  react-error-boundary@4.0.13(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
-      react: 18.3.1
+      react: 19.0.0
 
   react-error-overlay@6.0.11: {}
 
@@ -24261,17 +24290,17 @@ snapshots:
       react-fast-compare: 3.2.2
       shallowequal: 1.1.0
 
-  react-helmet-async@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-helmet-async@1.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       invariant: 2.2.4
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       react-fast-compare: 3.2.2
       shallowequal: 1.1.0
 
-  react-intl@6.6.8(react@18.3.1)(typescript@5.4.5):
+  react-intl@6.6.8(react@19.0.0)(typescript@5.4.5):
     dependencies:
       '@formatjs/ecma402-abstract': 2.0.0
       '@formatjs/icu-messageformat-parser': 2.7.8
@@ -24282,7 +24311,7 @@ snapshots:
       '@types/react': 18.3.18
       hoist-non-react-statics: 3.3.2
       intl-messageformat: 10.5.14
-      react: 18.3.1
+      react: 19.0.0
       tslib: 2.6.3
     optionalDependencies:
       typescript: 5.4.5
@@ -24293,11 +24322,11 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-layout-kit@1.9.0(react@18.3.1):
+  react-layout-kit@1.9.0(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       '@emotion/css': 11.11.2
-      react: 18.3.1
+      react: 19.0.0
     transitivePeerDependencies:
       - supports-color
 
@@ -24309,13 +24338,6 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@remix-run/router': 1.16.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.23.1(react@18.3.1)
-
   react-router-dom@6.3.0(react-dom@18.1.0(react@18.1.0))(react@18.1.0):
     dependencies:
       history: 5.3.0
@@ -24323,29 +24345,40 @@ snapshots:
       react-dom: 18.1.0(react@18.1.0)
       react-router: 6.3.0(react@18.1.0)
 
-  react-router-dom@6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router-dom@6.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       history: 5.3.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.3.0(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-router: 6.3.0(react@19.0.0)
 
-  react-router@6.23.1(react@18.3.1):
+  react-router-dom@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      '@remix-run/router': 1.16.1
-      react: 18.3.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-router: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
 
   react-router@6.3.0(react@18.1.0):
     dependencies:
       history: 5.3.0
       react: 18.1.0
 
-  react-router@6.3.0(react@18.3.1):
+  react-router@6.3.0(react@19.0.0):
     dependencies:
       history: 5.3.0
-      react: 18.3.1
+      react: 19.0.0
 
-  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.24.7))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.24.7))(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/babel__core@7.20.5)(eslint@8.47.0)(react@18.3.1)(sass@1.77.4)(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5))(type-fest@2.19.0)(typescript@5.4.5):
+  react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@types/cookie': 0.6.0
+      cookie: 1.0.2
+      react: 19.0.0
+      set-cookie-parser: 2.7.1
+      turbo-stream: 2.4.0
+    optionalDependencies:
+      react-dom: 19.0.0(react@19.0.0)
+
+  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.24.7))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.24.7))(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/babel__core@7.20.5)(eslint@8.47.0)(react@19.0.0)(sass@1.77.4)(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5))(type-fest@2.19.0)(typescript@5.4.5):
     dependencies:
       '@babel/core': 7.24.7
       '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.11.0)(type-fest@2.19.0)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
@@ -24379,7 +24412,7 @@ snapshots:
       postcss-normalize: 10.0.1(browserslist@4.23.1)(postcss@8.4.38)
       postcss-preset-env: 7.8.3(postcss@8.4.38)
       prompts: 2.4.2
-      react: 18.3.1
+      react: 19.0.0
       react-app-polyfill: 3.0.0
       react-dev-utils: 12.0.1(eslint@8.47.0)(typescript@5.4.5)(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       react-refresh: 0.11.0
@@ -24432,22 +24465,20 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  react-syntax-highlighter@15.5.0(react@18.3.1):
+  react-syntax-highlighter@15.5.0(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.24.7
       highlight.js: 10.7.3
       lowlight: 1.20.0
       prismjs: 1.29.0
-      react: 18.3.1
+      react: 19.0.0
       refractor: 3.6.0
 
   react@18.1.0:
     dependencies:
       loose-envify: 1.4.0
 
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
+  react@19.0.0: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -24956,9 +24987,7 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
+  scheduler@0.25.0: {}
 
   schema-utils@2.7.0:
     dependencies:
@@ -25098,6 +25127,8 @@ snapshots:
 
   set-blocking@2.0.0: {}
 
+  set-cookie-parser@2.7.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -25554,7 +25585,7 @@ snapshots:
     dependencies:
       inline-style-parser: 0.1.1
 
-  styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  styled-components@6.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@emotion/is-prop-valid': 1.2.2
       '@emotion/unitless': 0.8.1
@@ -25562,8 +25593,8 @@ snapshots:
       css-to-react-native: 3.2.0
       csstype: 3.1.3
       postcss: 8.4.38
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       shallowequal: 1.1.0
       stylis: 4.3.2
       tslib: 2.6.2
@@ -26109,6 +26140,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  turbo-stream@2.4.0: {}
+
   type-check@0.3.2:
     dependencies:
       prelude-ls: 1.1.2
@@ -26194,15 +26227,15 @@ snapshots:
   uglify-js@3.17.4:
     optional: true
 
-  umi@4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@18.3.18)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
+  umi@4.2.10(@babel/core@7.24.7)(@types/node@20.14.2)(@types/react@19.0.8)(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(lightningcss@1.22.1)(prettier@3.3.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(rollup@3.29.4)(sass@1.77.4)(stylelint@15.11.0(typescript@5.4.5))(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))):
     dependencies:
       '@babel/runtime': 7.23.6
       '@umijs/bundler-utils': 4.2.10
       '@umijs/bundler-webpack': 4.2.10(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
       '@umijs/core': 4.2.10
       '@umijs/lint': 4.2.10(eslint@8.47.0)(jest@27.5.1(ts-node@10.9.2(@swc/core@1.4.2(@swc/helpers@0.5.1))(@types/node@20.5.1)(typescript@5.4.5)))(stylelint@15.11.0(typescript@5.4.5))(typescript@5.4.5)
-      '@umijs/preset-umi': 4.2.10(@types/node@20.14.2)(@types/react@18.3.18)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
-      '@umijs/renderer-react': 4.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@umijs/preset-umi': 4.2.10(@types/node@20.14.2)(@types/react@19.0.8)(lightningcss@1.22.1)(rollup@3.29.4)(sass@1.77.4)(terser@5.31.1)(type-fest@2.19.0)(typescript@5.4.5)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1))))(webpack@5.91.0(@swc/core@1.4.2(@swc/helpers@0.5.1)))
+      '@umijs/renderer-react': 4.2.10(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@umijs/server': 4.2.10
       '@umijs/test': 4.2.10(@babel/core@7.24.7)
       '@umijs/utils': 4.2.10
@@ -26427,19 +26460,19 @@ snapshots:
       punycode: 1.4.1
       qs: 6.12.1
 
-  use-isomorphic-layout-effect@1.1.2(@types/react@18.3.18)(react@18.1.0):
+  use-isomorphic-layout-effect@1.1.2(@types/react@19.0.8)(react@18.1.0):
     dependencies:
       react: 18.1.0
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.8
 
-  use-merge-value@1.2.0(react@18.3.1):
+  use-merge-value@1.2.0(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
-  use-sync-external-store@1.2.0(react@18.3.1):
+  use-sync-external-store@1.2.0(react@19.0.0):
     dependencies:
-      react: 18.3.1
+      react: 19.0.0
 
   util-deprecate@1.0.2: {}
 
@@ -26576,7 +26609,7 @@ snapshots:
 
   web-streams-polyfill@3.3.3: {}
 
-  web-vitals@2.1.4: {}
+  web-vitals@4.2.4: {}
 
   webidl-conversions@4.0.2: {}
 
@@ -27043,19 +27076,19 @@ snapshots:
 
   zod@3.23.8: {}
 
-  zustand-utils@1.3.2(react@18.3.1)(zustand@4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1)):
+  zustand-utils@1.3.2(react@19.0.0)(zustand@4.5.2(@types/react@19.0.8)(immer@9.0.21)(react@19.0.0)):
     dependencies:
       '@babel/runtime': 7.24.7
       fast-deep-equal: 3.1.3
-      react: 18.3.1
-      zustand: 4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1)
+      react: 19.0.0
+      zustand: 4.5.2(@types/react@19.0.8)(immer@9.0.21)(react@19.0.0)
 
-  zustand@4.5.2(@types/react@18.3.18)(immer@9.0.21)(react@18.3.1):
+  zustand@4.5.2(@types/react@19.0.8)(immer@9.0.21)(react@19.0.0):
     dependencies:
-      use-sync-external-store: 1.2.0(react@18.3.1)
+      use-sync-external-store: 1.2.0(react@19.0.0)
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@types/react': 19.0.8
       immer: 9.0.21
-      react: 18.3.1
+      react: 19.0.0
 
   zwitch@2.0.4: {}

From 4a7cf8ce0eaa6292320504dd8abe0e7fd9bcc42a Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Thu, 30 Jan 2025 21:55:04 +0800
Subject: [PATCH 03/14] chore(internal): update reportWebVitals

---
 internal/playground/src/reportWebVitals.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/internal/playground/src/reportWebVitals.ts b/internal/playground/src/reportWebVitals.ts
index a6198531..762b0c2b 100644
--- a/internal/playground/src/reportWebVitals.ts
+++ b/internal/playground/src/reportWebVitals.ts
@@ -1,13 +1,13 @@
-import type { ReportHandler } from 'web-vitals';
+// import type { ReportHandler } from 'web-vitals';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: () => void) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getTTFB, getCLS, getFID, getFCP, getLCP }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
+    import('web-vitals').then(({ onTTFB, onCLS, onFCP, onLCP, onFID }) => {
+      onCLS(onPerfEntry);
+      onFID(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };

From 5c18c2f63f4718535fe05a97cf1a6a384771c1ae Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 11:38:30 +0800
Subject: [PATCH 04/14] =?UTF-8?q?chore(share):=20=E4=BF=AE=E5=A4=8D=20Reac?=
 =?UTF-8?q?t.ReactElement=20=E7=9A=84=20ref=20=E7=A7=BB=E5=8A=A8=E5=88=B0?=
 =?UTF-8?q?=20props=20=E4=B8=8B=E6=96=B0=E5=87=BA=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/src/hooks/useChildrenWithRefs.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/hooks/useChildrenWithRefs.ts b/packages/shared/src/hooks/useChildrenWithRefs.ts
index d82daa62..685abe99 100644
--- a/packages/shared/src/hooks/useChildrenWithRefs.ts
+++ b/packages/shared/src/hooks/useChildrenWithRefs.ts
@@ -6,6 +6,7 @@ import {
   ReactNode,
   Children,
   useMemo,
+  Ref,
 } from 'react';
 
 /**
@@ -30,7 +31,7 @@ export function useChildrenWithRefs(
           ref: (el: HTMLElement) => {
             refs[index] = el;
             // ref 现在是直接放在 ReactElement 上的，props 虽然也有，但取的是 undefined
-            const originRef = (child as any).ref;
+            const originRef = (child.props as { ref: Ref<unknown> }).ref;
             // const originRef = child.props.ref;
             if (!originRef) return;
             // 连通原来的 ref

From 6d774632f78dcb9896438fb61b5d02d2a310467e Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 11:42:11 +0800
Subject: [PATCH 05/14] =?UTF-8?q?chore(share):=20=E4=BD=BF=E7=94=A8=20RefO?=
 =?UTF-8?q?bject=20=E4=BB=A3=E6=9B=BF=E8=A2=AB=E7=A7=BB=E9=99=A4=E7=9A=84?=
 =?UTF-8?q?=20MutableRefObject?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/src/utils/__tests__/forwardRefs.test.ts | 2 +-
 packages/shared/src/utils/forwardRefs.ts                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/utils/__tests__/forwardRefs.test.ts b/packages/shared/src/utils/__tests__/forwardRefs.test.ts
index 9238013b..af5d50da 100644
--- a/packages/shared/src/utils/__tests__/forwardRefs.test.ts
+++ b/packages/shared/src/utils/__tests__/forwardRefs.test.ts
@@ -6,7 +6,7 @@ describe('forwardRefs', () => {
   test('forwardRefs should work', () => {
     const ref2 = jest.fn();
     const hook = renderHook(() => {
-      const ref1 = useRef();
+      const ref1 = useRef(undefined);
       forwardRefs(100, ref1, ref2);
       return ref1.current;
     });
diff --git a/packages/shared/src/utils/forwardRefs.ts b/packages/shared/src/utils/forwardRefs.ts
index e9325f3d..f712f4ff 100644
--- a/packages/shared/src/utils/forwardRefs.ts
+++ b/packages/shared/src/utils/forwardRefs.ts
@@ -1,4 +1,4 @@
-import type { MutableRefObject, Ref } from 'react';
+import type { RefObject, Ref } from 'react';
 
 /**
  * 传递 ref
@@ -14,7 +14,7 @@ export function forwardRefs(
         ref(value);
         break;
       case 'object':
-        (ref as MutableRefObject<unknown>).current = value;
+        (ref as RefObject<unknown>).current = value;
         break;
     }
   });

From 043f139220b277d999cf077adedd674db3940f15 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 11:43:31 +0800
Subject: [PATCH 06/14] =?UTF-8?q?chore(share):=20=E6=96=B0=E5=A2=9E=20Chil?=
 =?UTF-8?q?drenProps=20=E7=B1=BB=E5=9E=8B=EF=BC=8CPropsBase=20=E7=9A=84=20?=
 =?UTF-8?q?ref=20=E6=94=B9=E4=B8=BA=20React.Ref<T>=20=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/src/types.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index dbaa3cb1..ae747c41 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -7,10 +7,15 @@ export type Placement = (typeof PLACEMENTS)[number];
 export type Placement_12 = (typeof PLACEMENTS_12)[number];
 export interface PropsBase<T extends HTMLElement = HTMLElement> {
   attrs?: Partial<React.HTMLAttributes<T>>;
-  ref?: React.ForwardedRef<T>;
   children?: React.ReactNode;
+  ref?: React.Ref<T>;
 }
 
 export type OptionValueType = string | number;
 
 export type VisibleController = { show(): void; hide(): void };
+
+export interface ChildrenProps extends React.HTMLAttributes<HTMLElement> {
+  ref: React.RefObject<HTMLElement | null>;
+  children?: React.ReactNode;
+}

From 26a57df0356ea7f607b312b1c0b28614375434ba Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 11:44:28 +0800
Subject: [PATCH 07/14] =?UTF-8?q?chore(share):=20=E4=BF=AE=E5=A4=8D=20Reac?=
 =?UTF-8?q?t=20=E7=A7=BB=E9=99=A4=20defaultProps=20=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/mergeReactDefaultProps.test.tsx | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/utils/__tests__/mergeReactDefaultProps.test.tsx b/packages/shared/src/utils/__tests__/mergeReactDefaultProps.test.tsx
index 5ce72f93..e9a2a471 100644
--- a/packages/shared/src/utils/__tests__/mergeReactDefaultProps.test.tsx
+++ b/packages/shared/src/utils/__tests__/mergeReactDefaultProps.test.tsx
@@ -1,10 +1,10 @@
-import { render } from '@testing-library/react';
+// import { render } from '@testing-library/react';
 import { mergeReactDefaultProps } from '../';
-import React from 'react';
+// import React from 'react';
 
 describe('mergeReactDefaultProps', () => {
   test('base', () => {
-    const receiveProps = jest.fn();
+    // const receiveProps = jest.fn();
     const defaultProps = {
       emptyStr: 5,
       undef: 1,
@@ -12,13 +12,13 @@ describe('mergeReactDefaultProps', () => {
       zero: 4,
       nan: 3,
     };
-    const App: React.FC<any> = React.forwardRef<HTMLDivElement, any>(
-      (props: any, ref) => {
-        receiveProps(props);
-        return <div ref={ref}>1</div>;
-      },
-    );
-    App.defaultProps = defaultProps;
+    // const App: React.FC<any> = React.forwardRef<HTMLDivElement, any>(
+    //   (props: any, ref) => {
+    //     receiveProps(props);
+    //     return <div ref={ref}>1</div>;
+    //   },
+    // );
+    // App.defaultProps = defaultProps;
     const props = {
       undef: undefined,
       emptyStr: '',
@@ -26,7 +26,7 @@ describe('mergeReactDefaultProps', () => {
       nan: NaN,
       zero: 0,
     };
-    render(<App {...props} />);
+    // render(<App {...props} />);
     const result = {
       emptyStr: '',
       null: null,
@@ -34,7 +34,7 @@ describe('mergeReactDefaultProps', () => {
       undef: 1,
       zero: 0,
     };
-    expect(receiveProps.mock.calls[0]).toEqual([result]);
+    // expect(receiveProps.mock.calls[0]).toEqual([result]);
 
     expect(mergeReactDefaultProps(props, defaultProps as any)).toEqual(result);
   });

From eecbddaf97d7bcb1ac6b58e6f1d4859ca898cbc4 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 11:45:16 +0800
Subject: [PATCH 08/14] =?UTF-8?q?chore(share):=20=E4=BF=AE=E5=A4=8D=20Reac?=
 =?UTF-8?q?t=20=E7=A7=BB=E9=99=A4=20MutableRefObject=20=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/src/hooks/useStateRef.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/hooks/useStateRef.ts b/packages/shared/src/hooks/useStateRef.ts
index 3c913d13..56200525 100644
--- a/packages/shared/src/hooks/useStateRef.ts
+++ b/packages/shared/src/hooks/useStateRef.ts
@@ -5,7 +5,7 @@ import { useWatch } from './useWatch';
 export function useStateRef<V>(
   state: V,
 ): [
-  stateRef: React.MutableRefObject<V>,
+  stateRef: React.RefObject<V>,
   setStateRef: (value: V) => void,
   forceUpdate: () => void,
 ] {

From 4423cfbab39f4fcf7dc783854d394c592050e192 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 11:46:31 +0800
Subject: [PATCH 09/14] =?UTF-8?q?chore(share):=20=E4=BF=AE=E5=A4=8D=20useF?=
 =?UTF-8?q?orwardRef=20=E8=BF=94=E5=9B=9E=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/src/hooks/useForwardRef.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/hooks/useForwardRef.ts b/packages/shared/src/hooks/useForwardRef.ts
index 13e17055..d7613c69 100644
--- a/packages/shared/src/hooks/useForwardRef.ts
+++ b/packages/shared/src/hooks/useForwardRef.ts
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 
 export function useForwardRef<T>(
   forwardRef: React.ForwardedRef<T> | undefined,
-): React.RefObject<T> {
+): React.RefObject<null | T> {
   const ref = useRef<T>(null);
   const initRef = useRef<null | FN>(() => {
     if (!forwardRef) return;

From 9e297ebbb1289b416699c2476fc078c1ad1551e4 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 12:29:17 +0800
Subject: [PATCH 10/14] =?UTF-8?q?chore(components):=20=E4=BF=AE=E5=A4=8Dre?=
 =?UTF-8?q?act=2019=20=E4=BB=A5=E5=90=8E=E6=98=8E=E6=98=BE=E7=9A=84?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. useRef需要手动设置初始值
2. 组件类型运行时类型校验已被移除，prop-types库已无效
3. ReactElement现在泛型是 unknown，props 类型是 unknown
4. RefObject不会再预设 null 泛型
5. 移除FunctionComponentElement、MutableRefObject
---
 .../components/src/button/ButtonGroup.tsx     | 25 ++++++-----
 .../components/src/button/button.types.ts     |  2 +-
 .../CollapseTransition.tsx                    |  4 +-
 .../src/date-picker/components/dp.Panel.tsx   |  2 +-
 .../components/picker/Time.picker.tsx         |  2 +-
 .../components/picker/YearMonth.picker.tsx    |  2 +-
 .../src/draggable/DraggableGroup.tsx          |  2 +-
 .../draggable/hooks/useDraggableChildren.ts   | 16 +++++---
 .../components/src/dropdown/demo/nest.tsx     |  2 +-
 .../components/src/layouts/useElement.tsx     |  2 +-
 packages/components/src/loading/Loading.tsx   | 13 +++---
 .../components/src/popover/Contextmenu.tsx    | 11 +++--
 packages/components/src/popover/Popover.tsx   | 11 ++---
 .../src/popover/hooks/usePosition.ts          |  4 +-
 .../src/popover/hooks/useResizeObserver.ts    |  2 +-
 .../src/popover/hooks/useShowController.ts    |  4 +-
 packages/components/src/select/Select.tsx     |  4 --
 .../src/select/__tests__/Select.test.tsx      | 30 +++++++-------
 .../components/src/select/components/Menu.tsx |  2 +-
 .../components/src/select/demo/remote.tsx     |  2 +-
 .../src/slider/components/Handlers.tsx        |  4 +-
 packages/components/src/space/Space.tsx       | 17 ++++----
 .../transition-group/hooks/useChildMap.tsx    | 33 +++++++--------
 .../src/transition-group/hooks/useWrapper.tsx |  4 +-
 .../components/src/transition/Transition.tsx  |  2 +-
 .../src/transition/hooks/useDispatcher.ts     |  4 +-
 .../src/transition/hooks/useTransition.ts     | 41 ++++++++++---------
 27 files changed, 130 insertions(+), 117 deletions(-)

diff --git a/packages/components/src/button/ButtonGroup.tsx b/packages/components/src/button/ButtonGroup.tsx
index 647d0ad0..796c6412 100644
--- a/packages/components/src/button/ButtonGroup.tsx
+++ b/packages/components/src/button/ButtonGroup.tsx
@@ -1,4 +1,8 @@
-import { mergeReactDefaultProps, getComponentClass } from '@pkg/shared';
+import {
+  mergeReactDefaultProps,
+  getComponentClass,
+  ChildrenProps,
+} from '@pkg/shared';
 import type { ButtonGroupProps, ButtonProps } from './button.types';
 import { getClassNames } from '@tool-pack/basic';
 import React from 'react';
@@ -34,11 +38,10 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
 function isReactProvider(
   children: React.ReactNode,
 ): children is React.ReactElement {
-  return (
-    React.isValidElement(children) &&
-    children.props.value &&
-    children.props.children
-  );
+  if (!React.isValidElement(children)) return false;
+  const props = children.props as ChildrenProps &
+    React.ProviderProps<ButtonProps>;
+  return Boolean(props.value && props.children);
 }
 
 function cloneChildren(
@@ -51,19 +54,21 @@ function cloneChildren(
   const clone = (children: React.ReactNode) => {
     return React.Children.map(children, (child) => {
       if (!React.isValidElement(child)) return child;
+      const props = child.props as ChildrenProps & ButtonProps;
       return React.cloneElement(child, {
-        ...child.props,
-        size: size ?? child.props.size,
+        ...props,
+        size: size ?? props.size,
       } as ButtonProps);
     });
   };
 
   if (isReactProvider(children)) {
     // 如果是 Context.Provider, clone Provider 的 children
+    const props = children.props as React.ProviderProps<ButtonProps>;
     return React.cloneElement(
       children,
-      { value: children.props.value } as React.ProviderProps<ButtonProps>,
-      clone(children.props.children),
+      { value: props.value } as React.ProviderProps<ButtonProps>,
+      clone(props.children),
     );
   }
   return clone(children);
diff --git a/packages/components/src/button/button.types.ts b/packages/components/src/button/button.types.ts
index 1fa78bb1..645799ec 100644
--- a/packages/components/src/button/button.types.ts
+++ b/packages/components/src/button/button.types.ts
@@ -16,6 +16,6 @@ export interface ButtonProps
   loading?: boolean;
   size?: Size;
 }
-export interface ButtonGroupProps extends PropsBase<HTMLElement> {
+export interface ButtonGroupProps extends PropsBase<HTMLDivElement> {
   size?: ButtonProps['size'];
 }
diff --git a/packages/components/src/collapse-transition/CollapseTransition.tsx b/packages/components/src/collapse-transition/CollapseTransition.tsx
index 7bcfa460..d6d66fd2 100644
--- a/packages/components/src/collapse-transition/CollapseTransition.tsx
+++ b/packages/components/src/collapse-transition/CollapseTransition.tsx
@@ -103,10 +103,10 @@ export const CollapseTransition: React.FC<CollapseTransitionProps> = (
   );
 
   const Body = React.isValidElement(children)
-    ? React.cloneElement(children as React.ReactElement, {
+    ? React.cloneElement(children as React.ReactElement<HTMLElement>, {
         className: getClassNames(
           rootName,
-          (children as React.ReactElement).props.className,
+          (children as React.ReactElement<HTMLElement>).props.className,
           {
             [`${rootName}--h`]: !width,
             [`${rootName}--w`]: width,
diff --git a/packages/components/src/date-picker/components/dp.Panel.tsx b/packages/components/src/date-picker/components/dp.Panel.tsx
index 39642fdf..ec3cc411 100644
--- a/packages/components/src/date-picker/components/dp.Panel.tsx
+++ b/packages/components/src/date-picker/components/dp.Panel.tsx
@@ -58,7 +58,7 @@ export const DatePickerPanel: React.FC<Props> = (props) => {
   });
 
   const [hoverValue, setHoverValue] = useState<Date>();
-  const tempValueRef = useRef<Date>();
+  const tempValueRef = useRef<Date>(undefined);
 
   return (
     <div className={cls.root}>
diff --git a/packages/components/src/date-picker/components/picker/Time.picker.tsx b/packages/components/src/date-picker/components/picker/Time.picker.tsx
index 41423e83..0b838f03 100644
--- a/packages/components/src/date-picker/components/picker/Time.picker.tsx
+++ b/packages/components/src/date-picker/components/picker/Time.picker.tsx
@@ -10,7 +10,7 @@ import { OptionsPanel } from '../panel';
 import React from 'react';
 
 interface Props extends InnerCommonProps {
-  panelRef: React.RefObject<HTMLDivElement>;
+  panelRef: React.RefObject<HTMLDivElement | null>;
 }
 
 const cls = getClasses('date-picker-time-picker', ['pop'], []);
diff --git a/packages/components/src/date-picker/components/picker/YearMonth.picker.tsx b/packages/components/src/date-picker/components/picker/YearMonth.picker.tsx
index 16349610..732ee8bf 100644
--- a/packages/components/src/date-picker/components/picker/YearMonth.picker.tsx
+++ b/packages/components/src/date-picker/components/picker/YearMonth.picker.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 
 interface Props {
   onChange: (value: [year: number, month: number]) => void;
-  panelRef: React.RefObject<HTMLDivElement>;
+  panelRef: React.RefObject<HTMLDivElement | null>;
   value?: Date;
 }
 
diff --git a/packages/components/src/draggable/DraggableGroup.tsx b/packages/components/src/draggable/DraggableGroup.tsx
index a7fbaae0..bdbeb266 100644
--- a/packages/components/src/draggable/DraggableGroup.tsx
+++ b/packages/components/src/draggable/DraggableGroup.tsx
@@ -10,7 +10,7 @@ const defaultProps = {
  * 在 dragstart 里生产，在 dragenter 消费，在 drop ｜ dragend 销毁
  */
 export interface DraggableGroupContextProvider {
-  readonly children: React.ReactElement;
+  readonly children: React.ReactElement<HTMLElement>;
   cancel?: (id: symbol) => void;
   enter?: (id: symbol) => void;
   drop?: (id: symbol) => void;
diff --git a/packages/components/src/draggable/hooks/useDraggableChildren.ts b/packages/components/src/draggable/hooks/useDraggableChildren.ts
index 9b2fb3c5..1fdaec8b 100644
--- a/packages/components/src/draggable/hooks/useDraggableChildren.ts
+++ b/packages/components/src/draggable/hooks/useDraggableChildren.ts
@@ -159,7 +159,7 @@ export function useDraggableChildren({
                 let toIndex = index;
                 const modifyChildren = modifyChildrenRef.current[
                   fromIndex
-                ] as ReactElement;
+                ] as ReactElement<HTMLElement>;
                 // move 返回之前隐藏的 children 位置，如果存在则 index - 1
                 if (
                   type === 'move' &&
@@ -174,7 +174,9 @@ export function useDraggableChildren({
             } else {
               updateChildrenOf(
                 cloneAndAddClassName(
-                  modifyChildrenRef.current[fromIndex] as ReactElement,
+                  modifyChildrenRef.current[
+                    fromIndex
+                  ] as ReactElement<HTMLElement>,
                 ),
                 fromIndex,
               );
@@ -239,7 +241,11 @@ export function useDraggableChildren({
     moveItem(listRef.current.modify, from, to);
     forceUpdate();
   }
-  function moveFromGroup(item: unknown, children: ReactElement, to: number) {
+  function moveFromGroup(
+    item: unknown,
+    children: ReactElement<HTMLElement>,
+    to: number,
+  ) {
     children = cloneAndAddClassName(children);
     const temp = modifyChildrenRef.current.slice();
     insertToArray(children, to, temp);
@@ -255,9 +261,9 @@ export function useDraggableChildren({
     forceUpdate();
   }
   function cloneAndAddClassName(
-    element: ReactElement,
+    element: ReactElement<HTMLElement>,
     className = cls.__.ghost,
-  ): ReactElement {
+  ): ReactElement<HTMLElement> {
     return cloneElement(element, {
       className: getClassNames(element.props.className, className),
     });
diff --git a/packages/components/src/dropdown/demo/nest.tsx b/packages/components/src/dropdown/demo/nest.tsx
index 5a5b4a20..4ec8b51e 100644
--- a/packages/components/src/dropdown/demo/nest.tsx
+++ b/packages/components/src/dropdown/demo/nest.tsx
@@ -55,7 +55,7 @@ const App: React.FC = () => {
     const labels = parents
       .map((opt) => {
         if (!React.isValidElement(opt.label)) return opt.label;
-        return opt.label.props.children.props.children;
+        return (opt.label.props as any).children.props.children;
       })
       .concat(option.label)
       .join(' => ');
diff --git a/packages/components/src/layouts/useElement.tsx b/packages/components/src/layouts/useElement.tsx
index 6e14cf22..6da2115d 100644
--- a/packages/components/src/layouts/useElement.tsx
+++ b/packages/components/src/layouts/useElement.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 export function useElement(
   props: BaseLayoutsProps,
-  ref: React.ForwardedRef<HTMLElement>,
+  ref: React.Ref<HTMLElement> | undefined,
   rootClass: string,
 ): React.ReactElement {
   const {
diff --git a/packages/components/src/loading/Loading.tsx b/packages/components/src/loading/Loading.tsx
index d083bb70..92444774 100644
--- a/packages/components/src/loading/Loading.tsx
+++ b/packages/components/src/loading/Loading.tsx
@@ -1,6 +1,7 @@
 import {
   mergeReactDefaultProps,
   useScrollLock,
+  ChildrenProps,
   getClasses,
   useVisible,
   Z_INDEX,
@@ -113,17 +114,19 @@ export const Loading: React.FC<LoadingProps> = (props) => {
 
   // 插入children
   // 当传入的children是非html元素时，不使用插入模式
-  if (mode === 'insert' && React.isValidElement(children))
+  if (mode === 'insert' && React.isValidElement(children)) {
+    const cProps = children.props as ChildrenProps;
     return React.cloneElement(
-      children,
+      children as React.DetailedReactHTMLElement<object, HTMLDivElement>,
       {
-        ...children.props,
-        className: getClassNames(children.props.className, cls.__.ref),
+        ...cProps,
+        className: getClassNames(cProps.className, cls.__.ref),
         ref: wrapperRef,
       },
-      children.props.children,
+      cProps.children,
       TransitionLoading,
     );
+  }
 
   // 包裹children
   return (
diff --git a/packages/components/src/popover/Contextmenu.tsx b/packages/components/src/popover/Contextmenu.tsx
index 499ac56d..f98e814b 100644
--- a/packages/components/src/popover/Contextmenu.tsx
+++ b/packages/components/src/popover/Contextmenu.tsx
@@ -1,4 +1,9 @@
-import { getComponentClass, useForceUpdate, useNextEffect } from '@pkg/shared';
+import {
+  getComponentClass,
+  useForceUpdate,
+  ChildrenProps,
+  useNextEffect,
+} from '@pkg/shared';
 import type { PopoverProps } from './popover.types';
 import { getClassNames } from '@tool-pack/basic';
 import React, { useEffect, useRef } from 'react';
@@ -21,9 +26,9 @@ export const Contextmenu: React.FC<PopoverProps> = (props) => {
   return (
     <>
       {React.cloneElement(
-        children,
+        children as React.DetailedReactHTMLElement<object, HTMLDivElement>,
         { onContextMenuCapture },
-        children.props.children,
+        (children.props as ChildrenProps).children,
       )}
       {createPortal(
         <Popover
diff --git a/packages/components/src/popover/Popover.tsx b/packages/components/src/popover/Popover.tsx
index 26edcf28..98786b67 100644
--- a/packages/components/src/popover/Popover.tsx
+++ b/packages/components/src/popover/Popover.tsx
@@ -3,6 +3,7 @@ import {
   getComponentClass,
   useResizeEvent,
   useForwardRef,
+  ChildrenProps,
   useAppendTo,
 } from '@pkg/shared';
 import {
@@ -60,12 +61,8 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
 
     const [appendToTarget] = useAppendTo(appendTo, defaultProps.appendTo);
 
-    const childrenRef = useForwardRef(
-      (children as React.FunctionComponentElement<HTMLElement>).ref,
-    ) as React.MutableRefObject<HTMLElement | null>;
-    const balloonRef = useForwardRef(
-      ref,
-    ) as React.MutableRefObject<HTMLDivElement>;
+    const childrenRef = useForwardRef((children.props as ChildrenProps).ref);
+    const balloonRef = useForwardRef(ref) as React.RefObject<HTMLDivElement>;
 
     const [refreshPosition, resetPlacement, _placement] = usePosition(
       childrenRef,
@@ -159,7 +156,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
       return React.cloneElement(
         children,
         _props,
-        children.props.children,
+        (children.props as ChildrenProps).children,
         Trans,
       );
     }
diff --git a/packages/components/src/popover/hooks/usePosition.ts b/packages/components/src/popover/hooks/usePosition.ts
index 59c68729..7dbe980a 100644
--- a/packages/components/src/popover/hooks/usePosition.ts
+++ b/packages/components/src/popover/hooks/usePosition.ts
@@ -6,8 +6,8 @@ import React, { useMemo, useRef } from 'react';
 import { throttle } from '@tool-pack/basic';
 
 export function usePosition(
-  triggerElRef: React.RefObject<HTMLElement>,
-  balloonElRef: React.MutableRefObject<HTMLElement | undefined>,
+  triggerElRef: React.RefObject<HTMLElement | null>,
+  balloonElRef: React.RefObject<HTMLElement | undefined>,
   {
     viewport: getViewportEl,
     widthByTrigger,
diff --git a/packages/components/src/popover/hooks/useResizeObserver.ts b/packages/components/src/popover/hooks/useResizeObserver.ts
index fdb97d23..082489b2 100644
--- a/packages/components/src/popover/hooks/useResizeObserver.ts
+++ b/packages/components/src/popover/hooks/useResizeObserver.ts
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 export function useResizeObserver(
   enable: boolean,
-  elRef: React.MutableRefObject<HTMLElement | null>,
+  elRef: React.RefObject<HTMLElement | null>,
   callback: () => void,
 ) {
   useEffect(() => {
diff --git a/packages/components/src/popover/hooks/useShowController.ts b/packages/components/src/popover/hooks/useShowController.ts
index c78c8615..3719b89b 100644
--- a/packages/components/src/popover/hooks/useShowController.ts
+++ b/packages/components/src/popover/hooks/useShowController.ts
@@ -10,8 +10,8 @@ import { AsyncSubject, Subject } from 'rxjs';
 import { useNextEffect } from '@pkg/shared';
 
 export function useShowController(
-  triggerElRef: React.RefObject<HTMLElement>,
-  balloonElRef: React.MutableRefObject<HTMLElement | undefined>,
+  triggerElRef: React.RefObject<HTMLElement | null>,
+  balloonElRef: React.RefObject<HTMLElement | undefined>,
   refreshPosition: () => void,
   {
     visibleControllerRef,
diff --git a/packages/components/src/select/Select.tsx b/packages/components/src/select/Select.tsx
index 4517f602..7b881488 100644
--- a/packages/components/src/select/Select.tsx
+++ b/packages/components/src/select/Select.tsx
@@ -27,7 +27,6 @@ import { Selection, Menu } from '~/select/components';
 import { transitionCBAdapter } from '~/transition';
 import { getClassNames } from '@tool-pack/basic';
 import { InputPopover } from '@pkg/components';
-import PropTypes from 'prop-types';
 import EnUS from './locale/en-US';
 
 const cls = getClasses('select', [], ['selected', 'clearable']);
@@ -230,9 +229,6 @@ const _Select = React.forwardRef<HTMLLabelElement, SelectStaticProps>(
   },
 );
 
-_Select.propTypes = {
-  options: PropTypes.array.isRequired,
-};
 _Select.displayName = 'Select';
 
 export const Select = _Select as SelectFC;
diff --git a/packages/components/src/select/__tests__/Select.test.tsx b/packages/components/src/select/__tests__/Select.test.tsx
index fdcf5059..f72b0422 100644
--- a/packages/components/src/select/__tests__/Select.test.tsx
+++ b/packages/components/src/select/__tests__/Select.test.tsx
@@ -6,7 +6,6 @@ import {
 } from '~/select';
 import { fireEvent, render, act } from '@testing-library/react';
 import { getBalloon, $$, $ } from './utils';
-import { emptyFn } from '@tool-pack/basic';
 import { testAttrs } from '~/testAttrs';
 import { useRef } from 'react';
 
@@ -331,18 +330,19 @@ describe('Select', () => {
     ).toHaveClass(' t-input-skin--warning');
   });
 
-  test('missing options', () => {
-    // 使用jest.spyOn监听prop-types警告
-    const consoleErrorSpy = jest.spyOn(console, 'error');
-    consoleErrorSpy.mockImplementation(emptyFn);
-
-    render(<Select options={undefined as any} />);
-
-    // 验证控制台是否打印了prop-types警告
-    expect(consoleErrorSpy.mock.calls[0]![2]).toBe(
-      'The prop `options` is marked as required in `Select`, but its value is `undefined`.',
-    );
-    // 恢复console.error函数
-    consoleErrorSpy.mockRestore();
-  });
+  // prop-types 库已经没用了
+  // test('missing options', () => {
+  //   // 使用jest.spyOn监听prop-types警告
+  //   const consoleErrorSpy = jest.spyOn(console, 'error');
+  //   consoleErrorSpy.mockImplementation(emptyFn);
+  //
+  //   render(<Select options={[]} />);
+  //
+  //   // 验证控制台是否打印了prop-types警告
+  //   expect(consoleErrorSpy.mock.calls[0]![2]).toBe(
+  //     'The prop `options` is marked as required in `Select`, but its value is `undefined`.',
+  //   );
+  //   // 恢复console.error函数
+  //   consoleErrorSpy.mockRestore();
+  // });
 });
diff --git a/packages/components/src/select/components/Menu.tsx b/packages/components/src/select/components/Menu.tsx
index ee400b00..2bdaa99a 100644
--- a/packages/components/src/select/components/Menu.tsx
+++ b/packages/components/src/select/components/Menu.tsx
@@ -55,7 +55,7 @@ export const Menu: React.FC<Props> = (props) => {
   } = props;
   const forceUpdate = useForceUpdate();
   const boxRef = useRef<HTMLDivElement>(null);
-  const activeOptionRef = useRef<SelectOption | undefined>();
+  const activeOptionRef = useRef<SelectOption | undefined>(undefined);
   const nextEffect = useNextEffect();
 
   // 方向键移动光标
diff --git a/packages/components/src/select/demo/remote.tsx b/packages/components/src/select/demo/remote.tsx
index 53589d2f..026aa3fa 100644
--- a/packages/components/src/select/demo/remote.tsx
+++ b/packages/components/src/select/demo/remote.tsx
@@ -44,7 +44,7 @@ const App: React.FC = () => {
   const [mValue, setMValue] = useState([]);
   const [loading, setLoading] = useState(false);
   const [options, setOptions] = useState<SelectOption[]>([]);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   return (
     <>
diff --git a/packages/components/src/slider/components/Handlers.tsx b/packages/components/src/slider/components/Handlers.tsx
index 625b40a9..b3ad052e 100644
--- a/packages/components/src/slider/components/Handlers.tsx
+++ b/packages/components/src/slider/components/Handlers.tsx
@@ -1,6 +1,6 @@
 import React, {
   useImperativeHandle,
-  MutableRefObject,
+  RefObject,
   useEffect,
   useMemo,
   useRef,
@@ -36,8 +36,8 @@ interface Props
   onHandlerKeyDown: (stepScale: -1 | 1, index: number) => void;
   setValueOfIndex: (value: number, index: number) => void;
   getValueFromMousePos: (pos: Point) => number;
-  valuesRef: MutableRefObject<number[]>;
   controlRef: Ref<HandlersControlRef>;
+  valuesRef: RefObject<number[]>;
   total: number;
 }
 
diff --git a/packages/components/src/space/Space.tsx b/packages/components/src/space/Space.tsx
index 05688219..286c9959 100644
--- a/packages/components/src/space/Space.tsx
+++ b/packages/components/src/space/Space.tsx
@@ -70,13 +70,16 @@ function useChildren(
     const cb = React.isValidElement(separator)
       ? // 为separator添加key，否则会报错
         (i: number) =>
-          React.cloneElement(separator as React.ReactElement, {
-            className: getClassNames(
-              separator.props.className,
-              `${rootClass}__separator`,
-            ),
-            key: i,
-          })
+          React.cloneElement(
+            separator as React.DetailedReactHTMLElement<object, HTMLDivElement>,
+            {
+              className: getClassNames(
+                (separator.props as HTMLElement).className,
+                `${rootClass}__separator`,
+              ),
+              key: i,
+            },
+          )
       : () => separator;
 
     // 把separator插入数组元素间隔中
diff --git a/packages/components/src/transition-group/hooks/useChildMap.tsx b/packages/components/src/transition-group/hooks/useChildMap.tsx
index 9089809f..d3d93e01 100644
--- a/packages/components/src/transition-group/hooks/useChildMap.tsx
+++ b/packages/components/src/transition-group/hooks/useChildMap.tsx
@@ -1,9 +1,3 @@
-import type {
-  FunctionComponentElement,
-  ReactElement,
-  ReactNode,
-  Key,
-} from 'react';
 import {
   type TransitionProps,
   transitionCBAdapter,
@@ -16,7 +10,8 @@ import React, {
   useState,
 } from 'react';
 import type { ChildMapValue, ChildMap } from '../transition-group.types';
-import { useIsInitDep, forwardRefs } from '@pkg/shared';
+import { ChildrenProps, useIsInitDep, forwardRefs } from '@pkg/shared';
+import type { ReactElement, ReactNode, Key } from 'react';
 
 export function useChildMap(children: ReactNode, name: string): ChildMap {
   const isInit = useIsInitDep(children);
@@ -183,7 +178,7 @@ function updateTransition(
   const { reactEl } = mapValue;
   const nextOn = props.on;
   if (nextOn) {
-    const prevOn = reactEl.props.on as TransitionProps['on'];
+    const prevOn = (reactEl.props as TransitionProps).on;
     _props.on = (el, status, lifeCircle) => {
       prevOn?.(el, status, lifeCircle);
       nextOn(el, status, lifeCircle);
@@ -192,11 +187,11 @@ function updateTransition(
 
   children = children
     ? children.type === Transition
-      ? children.props.children
+      ? (children.props as { children: ReactElement }).children
       : children
-    : reactEl.props.children;
+    : (reactEl.props as { children: ReactElement }).children;
   mapValue.reactEl = cloneElement<TransitionProps>(
-    reactEl,
+    reactEl as React.DetailedReactHTMLElement<object, HTMLDivElement>,
     _props,
     cloneChildren(children, mapValue),
   );
@@ -208,14 +203,14 @@ function cloneChildren(
   childMapValue: ChildMapValue,
 ): ReactElement | undefined {
   return isValidElement(children)
-    ? cloneElement(children as ReactElement, {
-        ref: (el: HTMLElement) => {
-          forwardRefs(
-            el,
-            (children as FunctionComponentElement<HTMLElement>).ref,
-          );
-          el && (childMapValue.ref = el);
+    ? cloneElement(
+        children as React.DetailedReactHTMLElement<object, HTMLDivElement>,
+        {
+          ref: (el: HTMLElement) => {
+            forwardRefs(el, (children.props as ChildrenProps).ref);
+            el && (childMapValue.ref = el);
+          },
         },
-      })
+      )
     : undefined;
 }
diff --git a/packages/components/src/transition-group/hooks/useWrapper.tsx b/packages/components/src/transition-group/hooks/useWrapper.tsx
index a8222d9a..1c135f58 100644
--- a/packages/components/src/transition-group/hooks/useWrapper.tsx
+++ b/packages/components/src/transition-group/hooks/useWrapper.tsx
@@ -1,5 +1,5 @@
 import type { TransitionGroupProps, ChildMap } from '../transition-group.types';
-import type { ReactElement, ForwardedRef, ReactNode } from 'react';
+import type { ReactElement, ReactNode, Ref } from 'react';
 import { getClassNames } from '@tool-pack/basic';
 import { RequiredPart } from '@tool-pack/types';
 import { getComponentClass } from '@pkg/shared';
@@ -9,7 +9,7 @@ const rootClass = getComponentClass('transition-group');
 export function useWrapper(
   childMap: ChildMap,
   props: TransitionGroupProps,
-  ref: ForwardedRef<HTMLDivElement>,
+  ref?: Ref<HTMLDivElement>,
 ): ReactNode {
   const {
     attrs = {},
diff --git a/packages/components/src/transition/Transition.tsx b/packages/components/src/transition/Transition.tsx
index 6d565c6d..503b410b 100644
--- a/packages/components/src/transition/Transition.tsx
+++ b/packages/components/src/transition/Transition.tsx
@@ -11,7 +11,7 @@ const defaultProps = {
 } satisfies Partial<TransitionProps>;
 
 const Transition: React.FC<TransitionProps> = (props): React.ReactElement => {
-  const cid = useRef<number>();
+  const cid = useRef<number>(undefined);
   if (!cid.current) cid.current = id++;
 
   const { children, appear, name, mode, show, on, ...rest } =
diff --git a/packages/components/src/transition/hooks/useDispatcher.ts b/packages/components/src/transition/hooks/useDispatcher.ts
index 7f6aed73..a805348b 100644
--- a/packages/components/src/transition/hooks/useDispatcher.ts
+++ b/packages/components/src/transition/hooks/useDispatcher.ts
@@ -20,8 +20,8 @@ export function useDispatcher(
   const isInitShow = useIsInitDep(show);
   const [isShowChanged] = useIsChanged(show);
   const [next, prev] = useValueWithPrev(children);
-  const statusCacheRef = useRef<[STATUS, STATUS]>();
-  const cbRef = useRef<CB>();
+  const statusCacheRef = useRef<[STATUS, STATUS]>(undefined);
+  const cbRef = useRef<CB>(undefined);
   const prevLifeRef = useRef<LIFE_CIRCLE[]>([]);
 
   let childs = [prev, next] as [El, El];
diff --git a/packages/components/src/transition/hooks/useTransition.ts b/packages/components/src/transition/hooks/useTransition.ts
index 5bc05902..e10dba1d 100644
--- a/packages/components/src/transition/hooks/useTransition.ts
+++ b/packages/components/src/transition/hooks/useTransition.ts
@@ -1,5 +1,9 @@
+import {
+  getClasses as getClassMap,
+  ChildrenProps,
+  useForwardRef,
+} from '@pkg/shared';
 import { TransitionProps, CB, El } from '~/transition/transition.types';
-import { getClasses as getClassMap, useForwardRef } from '@pkg/shared';
 import { LIFE_CIRCLE, STATUS } from '~/transition/transition.enums';
 import { addTransition, getClasses } from '~/transition/utils';
 import React, { cloneElement, useEffect } from 'react';
@@ -16,8 +20,8 @@ export function useTransition(
   { attrs = {} }: Partial<TransitionProps> = {},
 ): React.ReactElement<HTMLElement> | undefined {
   const elRef = useForwardRef(
-    (children as React.FunctionComponentElement<HTMLElement>)?.ref,
-  ) as React.MutableRefObject<HTMLElement | null>;
+    ((children as React.ReactElement)?.props as ChildrenProps)?.ref,
+  ) as React.RefObject<HTMLElement | null>;
 
   if (!children) elRef.current = null;
 
@@ -50,7 +54,9 @@ export function useTransition(
     const cbs = [innerCB, cb].filter(Boolean) as CB[];
     cbs.forEach((cb) => cb(...args));
   }
-  function showChildren(children: unknown): children is React.ReactElement {
+  function showChildren(
+    children: unknown,
+  ): children is React.ReactElement<HTMLElement> {
     if (!children) return false;
     return STATUS.none !== status && React.isValidElement(children);
   }
@@ -60,17 +66,18 @@ export function useTransition(
     );
   }
   function getProps(
-    children: React.ReactElement,
-  ): React.HTMLAttributes<HTMLElement> {
+    children: React.ReactElement<HTMLElement>,
+  ): Partial<HTMLElement> {
+    const cProps = children.props as HTMLElement & TransitionProps;
     const style = {
-      ...children.props.attrs?.style,
-      ...children.props.style,
+      ...cProps.attrs?.style,
+      ...cProps.style,
       ...attrs.style,
-    };
+    } as React.HTMLAttributes<HTMLElement>['style'];
 
     const className = getClassNames(
-      children.props.className,
-      children.props.attrs?.className,
+      cProps.className,
+      cProps.attrs?.className,
       attrs.className,
       {
         [classes?.from]: classes && [STATUS.show, STATUS.hide].includes(status),
@@ -80,20 +87,16 @@ export function useTransition(
 
     const props = {
       ...attrs,
-      attrs: children.props.attrs,
+      attrs: cProps.attrs,
       ref: elRef,
       className,
       style,
     } as {
       attrs: React.HTMLAttributes<HTMLElement>;
-    } & React.HTMLAttributes<HTMLElement> &
-      React.DOMAttributes<HTMLElement>;
+    } & Partial<HTMLElement>;
 
-    if (typeof children.props.attrs === 'object') {
-      props.attrs = { ...children.props.attrs, className, style };
-    } else {
-      props.className = className;
-      props.style = style;
+    if (typeof cProps.attrs === 'object') {
+      props.attrs = { ...cProps.attrs, className, style };
     }
 
     return props;

From 991ad93ae46448b30d5da2b4aea3997b8766f26b Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 12:40:27 +0800
Subject: [PATCH 11/14] =?UTF-8?q?chore(components):=20<XXXContext.Provider?=
 =?UTF-8?q?>=20=E5=8F=AF=E4=BB=A5=E7=9B=B4=E6=8E=A5=20<XXXContext>=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../button/__tests__/ButtonContext.test.tsx   | 12 ++---
 packages/components/src/button/demo/group.tsx | 44 +++++++++----------
 .../src/calendar/components/Header.tsx        |  4 +-
 .../src/config-provider/ConfigProvider.tsx    |  6 +--
 .../src/date-picker/components/dp.Select.tsx  |  4 +-
 .../src/draggable/DraggableGroup.tsx          |  6 +--
 .../draggable/hooks/useDraggableChildren.ts   |  4 +-
 .../src/image/components/Preview.Group.tsx    |  4 +-
 8 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/packages/components/src/button/__tests__/ButtonContext.test.tsx b/packages/components/src/button/__tests__/ButtonContext.test.tsx
index a5a0a3a5..dbf3d039 100644
--- a/packages/components/src/button/__tests__/ButtonContext.test.tsx
+++ b/packages/components/src/button/__tests__/ButtonContext.test.tsx
@@ -6,32 +6,32 @@ describe('ButtonContext', () => {
     // group 的 size 优先
     expect(
       render(
-        <ButtonContext.Provider value={{ size: 'large' }}>
+        <ButtonContext value={{ size: 'large' }}>
           <ButtonGroup size="small">
             <Button></Button>
             <Button></Button>
           </ButtonGroup>
-        </ButtonContext.Provider>,
+        </ButtonContext>,
       ).container.firstChild,
     ).toMatchSnapshot();
 
     // 组件的 props 优先
     expect(
       render(
-        <ButtonContext.Provider value={{ size: 'large' }}>
+        <ButtonContext value={{ size: 'large' }}>
           <Button></Button>
           <Button size="small"></Button>
-        </ButtonContext.Provider>,
+        </ButtonContext>,
       ).container.children,
     ).toMatchSnapshot();
   });
   test('other', () => {
     expect(
       render(
-        <ButtonContext.Provider value={{ type: 'primary' }}>
+        <ButtonContext value={{ type: 'primary' }}>
           <Button></Button>
           <Button type="info"></Button>
-        </ButtonContext.Provider>,
+        </ButtonContext>,
       ).container.children,
     ).toMatchSnapshot();
   });
diff --git a/packages/components/src/button/demo/group.tsx b/packages/components/src/button/demo/group.tsx
index 66a4b3c0..576a6606 100644
--- a/packages/components/src/button/demo/group.tsx
+++ b/packages/components/src/button/demo/group.tsx
@@ -33,14 +33,12 @@ const App: React.FC = () => {
   return (
     <Space vertical>
       <ButtonGroup size="small">
-        <ButtonContext.Provider value={{ size: 'large' }}>
-          {btns}
-        </ButtonContext.Provider>
+        <ButtonContext value={{ size: 'large' }}>{btns}</ButtonContext>
       </ButtonGroup>
       <ButtonGroup size="medium">{btns}</ButtonGroup>
       <ButtonGroup>{btns}</ButtonGroup>
       <ButtonGroup size="large">{btns}</ButtonGroup>
-      <ButtonContext.Provider
+      <ButtonContext
         value={{
           onClick: () => alert('click'),
           size: 'small',
@@ -48,52 +46,52 @@ const App: React.FC = () => {
         }}
       >
         <ButtonGroup size="large">{btns}</ButtonGroup>
-      </ButtonContext.Provider>
+      </ButtonContext>
 
       <ButtonGroup>
-        <ButtonContext.Provider value={{ type: 'primary', size: 'large' }}>
+        <ButtonContext value={{ type: 'primary', size: 'large' }}>
           <Button icon={<Icons.CircleClose />} shape="round">
             Delete
           </Button>
           <Button icon={<Icons.CircleSuccess />}>Commit</Button>
           <Button>Upload</Button>
           <Button icon={<Icons.CircleWarning />} shape="round" />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
 
       <ButtonGroup size="large">
-        <ButtonContext.Provider value={{ type: 'danger' }}>
+        <ButtonContext value={{ type: 'danger' }}>
           <Button icon={<Icons.CircleClose />}>Delete</Button>
           <Button icon={<Icons.CircleSuccess />}>Commit</Button>
           <Button>Upload</Button>
           <Button icon={<Icons.CircleWarning />} plain="dashed" shape="round" />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
 
       <ButtonGroup>
-        <ButtonContext.Provider value={{ plain: true }}>
+        <ButtonContext value={{ plain: true }}>
           <Button icon={<Icons.CircleClose />}>Delete</Button>
           <Button icon={<Icons.CircleSuccess />}>Commit</Button>
           <Button icon={<Icons.CircleInfo />}>Upload</Button>
           <Button icon={<Icons.CircleWarning />} />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
       <ButtonGroup>
-        <ButtonContext.Provider value={{ type: 'success', plain: 'dashed' }}>
+        <ButtonContext value={{ type: 'success', plain: 'dashed' }}>
           <Button icon={<Icons.CircleClose />}>Delete</Button>
           <Button icon={<Icons.CircleSuccess />}>Commit</Button>
           <Button icon={<Icons.CircleInfo />}>Upload</Button>
           <Button icon={<Icons.CircleWarning />} />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
       <ButtonGroup>
-        <ButtonContext.Provider value={{ type: 'warning', plain: 'text' }}>
+        <ButtonContext value={{ type: 'warning', plain: 'text' }}>
           <Button icon={<Icons.CircleClose />}>Delete</Button>
           <Button icon={<Icons.CircleSuccess />}>Commit</Button>
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
       <ButtonGroup>
-        <ButtonContext.Provider value={{ type: 'primary' }}>
+        <ButtonContext value={{ type: 'primary' }}>
           <Button>items</Button>
           <Button
             icon={
@@ -102,26 +100,26 @@ const App: React.FC = () => {
               </Icon>
             }
           />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
       <ButtonGroup>
-        <ButtonContext.Provider value={{ type: 'info' }}>
+        <ButtonContext value={{ type: 'info' }}>
           <Button icon={<Icons.CircleClose />}>Delete</Button>
           <Button icon={<Icons.CircleSuccess />}>Commit</Button>
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
       <ButtonGroup>
-        <ButtonContext.Provider value={{ type: 'primary', shape: 'none' }}>
+        <ButtonContext value={{ type: 'primary', shape: 'none' }}>
           <Button icon={<Icons.CircleClose />}>Delete</Button>
           <Button icon={<Icons.CircleSuccess />} disabled>
             Commit
           </Button>
           <Button icon={<Icons.CircleInfo />}>Upload</Button>
           <Button icon={<Icons.CircleWarning />} />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
       <ButtonGroup>
-        <ButtonContext.Provider
+        <ButtonContext
           value={{
             type: 'primary',
             rightIcon: true,
@@ -135,7 +133,7 @@ const App: React.FC = () => {
           </Button>
           <Button icon={<Icons.CircleInfo />}>Upload</Button>
           <Button icon={<Icons.CircleWarning />} />
-        </ButtonContext.Provider>
+        </ButtonContext>
       </ButtonGroup>
     </Space>
   );
diff --git a/packages/components/src/calendar/components/Header.tsx b/packages/components/src/calendar/components/Header.tsx
index 75d55f76..7c21e0af 100644
--- a/packages/components/src/calendar/components/Header.tsx
+++ b/packages/components/src/calendar/components/Header.tsx
@@ -35,7 +35,7 @@ export const CalendarHeader: React.FC<Props> = (props) => {
   return (
     <div className={getClassNames(cls.root, {})}>
       <div className={cls.__.month}>{monthStr}</div>
-      <ButtonContext.Provider value={{ type: 'default', size: 'small' }}>
+      <ButtonContext value={{ type: 'default', size: 'small' }}>
         <ButtonGroup>
           <Button onClick={() => changeMonth(-1)}>
             <Icon>
@@ -49,7 +49,7 @@ export const CalendarHeader: React.FC<Props> = (props) => {
             </Icon>
           </Button>
         </ButtonGroup>
-      </ButtonContext.Provider>
+      </ButtonContext>
     </div>
   );
   function clickToday() {
diff --git a/packages/components/src/config-provider/ConfigProvider.tsx b/packages/components/src/config-provider/ConfigProvider.tsx
index b4160e1e..e3a1dbc5 100644
--- a/packages/components/src/config-provider/ConfigProvider.tsx
+++ b/packages/components/src/config-provider/ConfigProvider.tsx
@@ -7,9 +7,5 @@ export const ConfigProvider: React.FC<
     children: React.ReactNode;
   } & Partial<Context>
 > = ({ locale = {}, children }) => {
-  return (
-    <ConfigContext.Provider value={{ locale }}>
-      {children}
-    </ConfigContext.Provider>
-  );
+  return <ConfigContext value={{ locale }}>{children}</ConfigContext>;
 };
diff --git a/packages/components/src/date-picker/components/dp.Select.tsx b/packages/components/src/date-picker/components/dp.Select.tsx
index 4ad9fd6c..a4a1a86f 100644
--- a/packages/components/src/date-picker/components/dp.Select.tsx
+++ b/packages/components/src/date-picker/components/dp.Select.tsx
@@ -35,7 +35,7 @@ export const DatePickerSelect: React.FC<Props> = (props) => {
 
   return (
     <div className={cls.root}>
-      <ButtonContext.Provider value={{ plain: 'text', size: 'small' }}>
+      <ButtonContext value={{ plain: 'text', size: 'small' }}>
         {getLeftBtn()}
         {children ?? (
           <div className={cls.__.label}>
@@ -43,7 +43,7 @@ export const DatePickerSelect: React.FC<Props> = (props) => {
           </div>
         )}
         {getRightBtn()}
-      </ButtonContext.Provider>
+      </ButtonContext>
     </div>
   );
 
diff --git a/packages/components/src/draggable/DraggableGroup.tsx b/packages/components/src/draggable/DraggableGroup.tsx
index bdbeb266..32a8b11d 100644
--- a/packages/components/src/draggable/DraggableGroup.tsx
+++ b/packages/components/src/draggable/DraggableGroup.tsx
@@ -17,7 +17,7 @@ export interface DraggableGroupContextProvider {
   readonly item: unknown;
   id: symbol;
 }
-export const draggableContext = createContext<{
+export const DraggableContext = createContext<{
   fromRef: { current: DraggableGroupContextProvider | null };
   toRef: { current: DraggableGroupContextProvider | null };
   type: Exclude<DraggableGroupProps['type'], undefined>;
@@ -32,9 +32,9 @@ export const DraggableGroup: FC<DraggableGroupProps> = (props) => {
   const fromRef = useRef(null);
   const toRef = useRef(null);
   return (
-    <draggableContext.Provider value={{ fromRef, toRef, type }}>
+    <DraggableContext value={{ fromRef, toRef, type }}>
       {props.children}
-    </draggableContext.Provider>
+    </DraggableContext>
   );
 };
 
diff --git a/packages/components/src/draggable/hooks/useDraggableChildren.ts b/packages/components/src/draggable/hooks/useDraggableChildren.ts
index 1fdaec8b..6e9974a9 100644
--- a/packages/components/src/draggable/hooks/useDraggableChildren.ts
+++ b/packages/components/src/draggable/hooks/useDraggableChildren.ts
@@ -1,6 +1,6 @@
 import {
   DraggableGroupContextProvider,
-  draggableContext,
+  DraggableContext,
 } from '~/draggable/DraggableGroup';
 import {
   useChildrenWithRefs,
@@ -33,7 +33,7 @@ export function useDraggableChildren({
     origin: v.slice(),
     modify: v.slice(),
   }));
-  const { fromRef, toRef, type } = useContext(draggableContext);
+  const { fromRef, toRef, type } = useContext(DraggableContext);
 
   const stateRef = useRef<{ readonly id: symbol; index: number }>({
     id: Symbol(times++),
diff --git a/packages/components/src/image/components/Preview.Group.tsx b/packages/components/src/image/components/Preview.Group.tsx
index ff50505f..b55c5d77 100644
--- a/packages/components/src/image/components/Preview.Group.tsx
+++ b/packages/components/src/image/components/Preview.Group.tsx
@@ -5,9 +5,9 @@ export const ImagePreviewGroup: React.FC<{ children?: React.ReactNode }> = (
   props,
 ) => {
   return (
-    <ImagePreviewGroupContext.Provider value={[]}>
+    <ImagePreviewGroupContext value={[]}>
       {props.children}
-    </ImagePreviewGroupContext.Provider>
+    </ImagePreviewGroupContext>
   );
 };
 

From 4b6379bc53a2e684e255a1a1357862372742748d Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 12:57:39 +0800
Subject: [PATCH 12/14] chore(components): remove forwardRef

---
 packages/components/src/alert/Alert.tsx       | 100 ++--
 packages/components/src/button/Button.tsx     | 139 +++--
 .../components/src/button/ButtonGroup.tsx     |  37 +-
 packages/components/src/calendar/Calendar.tsx | 109 ++--
 packages/components/src/collapse/Collapse.tsx | 171 +++---
 .../components/src/collapse/CollapseGroup.tsx |  93 ++--
 .../components/src/date-picker/DatePicker.tsx | 261 +++++----
 packages/components/src/divider/Divider.tsx   |  85 ++-
 .../components/src/draggable/Draggable.tsx    |  63 ++-
 .../src/dropdown/DropdownInnerOption.tsx      |   8 +-
 packages/components/src/empty/Empty.tsx       |  43 +-
 packages/components/src/icon/Icon.tsx         |   6 +-
 packages/components/src/image/Image.tsx       | 219 ++++----
 .../src/image/components/Preview.tsx          | 340 ++++++------
 .../src/input-popover/InputPopover.tsx        |   8 +-
 .../input-popover/components/TabTrigger.tsx   |  38 +-
 packages/components/src/input/Input.tsx       | 270 +++++-----
 .../src/input/components/input.Input.tsx      |  75 +--
 .../src/input/components/input.Skin.tsx       |  79 +--
 .../src/input/components/input.Switch.tsx     | 123 +++--
 .../src/input/components/input.Textarea.tsx   | 101 ++--
 packages/components/src/layouts/Layout.tsx    |  73 ++-
 packages/components/src/message/Message.tsx   | 119 +++--
 .../components/src/message/MessageQueue.tsx   |  15 +-
 .../number-transition/NumberTransition.tsx    |  10 +-
 packages/components/src/option/Option.tsx     |  66 ++-
 packages/components/src/picker/Picker.tsx     |  89 ++--
 .../src/picker/components/picker.Panel.tsx    |  91 ++--
 packages/components/src/popover/Popover.tsx   | 241 +++++----
 packages/components/src/resizer/Resizer.tsx   | 122 +++--
 packages/components/src/select/Select.tsx     | 353 +++++++------
 .../src/select/components/Menu.option.tsx     |  62 ++-
 .../src/select/components/Selection.tsx       |  11 +-
 packages/components/src/slider/Slider.tsx     | 496 +++++++++---------
 packages/components/src/space/Space.tsx       |   5 +-
 packages/components/src/switch/Switch.tsx     | 139 +++--
 packages/components/src/tag/Tag.tsx           |   5 +-
 packages/components/src/timeline/Timeline.tsx |  63 ++-
 .../src/timeline/components/Item.tsx          |  60 +--
 .../components/src/timeline/timeline.types.ts |   3 +-
 .../src/transition-group/TransitionGroup.tsx  |  26 +-
 .../src/virtual-list/VirtualList.tsx          | 411 ++++++++-------
 .../src/word-balloon/WordBalloon.tsx          |  81 ++-
 43 files changed, 2430 insertions(+), 2479 deletions(-)

diff --git a/packages/components/src/alert/Alert.tsx b/packages/components/src/alert/Alert.tsx
index ef648e4c..841e0b65 100644
--- a/packages/components/src/alert/Alert.tsx
+++ b/packages/components/src/alert/Alert.tsx
@@ -33,57 +33,63 @@ const Icons: Record<Required<AlertProps>['type'], React.FC> = {
   primary: CircleInfo,
 };
 
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  (props, ref) => {
-    const { bordered, closable, children, onClose, attrs, title, icon, type } =
-      mergeReactDefaultProps(props, defaultProps);
+export const Alert: React.FC<AlertProps> = (props) => {
+  const {
+    bordered,
+    closable,
+    children,
+    onClose,
+    attrs,
+    title,
+    icon,
+    type,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
 
-    const [visible, setVisible] = useState(true);
-    const DefaultIcon = Icons[type];
+  const [visible, setVisible] = useState(true);
+  const DefaultIcon = Icons[type];
 
-    const Body = (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs?.className, {
-          [`${cls.root}--${type}`]: type !== 'primary',
-          [cls['--'].centered]: title && !children,
-          [cls['--'].bordered]: bordered,
-        })}
-        ref={ref}
-      >
-        {icon !== null && (
-          <Icon className={cls.__.icon}>{icon || <DefaultIcon />}</Icon>
-        )}
-        <div className={cls.__.content}>
-          {title && <div className={cls.__.title}>{title}</div>}
-          {children && <div className={cls.__.desc}>{children}</div>}
-        </div>
-        {closable && (
-          <Button
-            className={cls.__['close-btn']}
-            onClick={close}
-            size="small"
-            plain="text"
-          >
-            <Icon className={cls.__['close-icon']}>
-              <CloseIcon />
-            </Icon>
-          </Button>
-        )}
+  const Body = (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs?.className, {
+        [`${cls.root}--${type}`]: type !== 'primary',
+        [cls['--'].centered]: title && !children,
+        [cls['--'].bordered]: bordered,
+      })}
+      ref={ref}
+    >
+      {icon !== null && (
+        <Icon className={cls.__.icon}>{icon || <DefaultIcon />}</Icon>
+      )}
+      <div className={cls.__.content}>
+        {title && <div className={cls.__.title}>{title}</div>}
+        {children && <div className={cls.__.desc}>{children}</div>}
       </div>
-    );
+      {closable && (
+        <Button
+          className={cls.__['close-btn']}
+          onClick={close}
+          size="small"
+          plain="text"
+        >
+          <Icon className={cls.__['close-icon']}>
+            <CloseIcon />
+          </Icon>
+        </Button>
+      )}
+    </div>
+  );
 
-    if (!closable) return Body;
-    return <CollapseTransition>{visible && Body}</CollapseTransition>;
+  if (!closable) return Body;
+  return <CollapseTransition>{visible && Body}</CollapseTransition>;
 
-    function close(e: React.MouseEvent<HTMLButtonElement>) {
-      if (!closable) return;
-      onClose?.(e);
-      if (e.isDefaultPrevented()) return;
-      setVisible(false);
-    }
-  },
-);
+  function close(e: React.MouseEvent<HTMLButtonElement>) {
+    if (!closable) return;
+    onClose?.(e);
+    if (e.isDefaultPrevented()) return;
+    setVisible(false);
+  }
+};
 
 Alert.displayName = 'Alert';
-Alert.defaultProps = defaultProps;
diff --git a/packages/components/src/button/Button.tsx b/packages/components/src/button/Button.tsx
index 9bb66698..7e4aa2e1 100644
--- a/packages/components/src/button/Button.tsx
+++ b/packages/components/src/button/Button.tsx
@@ -27,80 +27,79 @@ const defaultProps = {
   type: 'default',
   size: 'medium',
 } satisfies Partial<ButtonProps>;
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const context = useContext(ButtonContext);
-    const attrs = {
-      ...context.attrs,
-      ...props.attrs,
-      style: { ...context.style, ...props.attrs?.style, ...props.style },
-    } as Exclude<ButtonProps['attrs'], undefined>;
-    const {
-      children = attrs.children,
-      disabled = attrs.disabled,
-      htmlType = attrs.type,
-      className,
-      rightIcon,
-      onClick,
-      loading,
-      plain,
-      shape,
-      size,
-      type,
-      icon,
-    } = mergeReactDefaultProps(
-      props,
-      mergeReactDefaultProps(context, defaultProps),
-    );
+export const Button: React.FC<ButtonProps> = (props) => {
+  const context = useContext(ButtonContext);
+  const attrs = {
+    ...context.attrs,
+    ...props.attrs,
+    style: { ...context.style, ...props.attrs?.style, ...props.style },
+  } as Exclude<ButtonProps['attrs'], undefined>;
+  const {
+    children = attrs.children,
+    disabled = attrs.disabled,
+    htmlType = attrs.type,
+    className,
+    rightIcon,
+    onClick,
+    loading,
+    plain,
+    shape,
+    size,
+    type,
+    icon,
+    ref,
+  } = mergeReactDefaultProps(
+    props,
+    mergeReactDefaultProps(context, defaultProps),
+  );
 
-    const [btnWave, activateWave] = useBtnWave(cls.root);
-    const btnIcon = useBtnIcon(cls.root, icon, loading);
+  const [btnWave, activateWave] = useBtnWave(cls.root);
+  const btnIcon = useBtnIcon(cls.root, icon, loading);
 
-    const clickHandler: React.MouseEventHandler<HTMLButtonElement> = (
-      e,
-    ): void => {
-      if (disabled || loading) return;
-      if (plain !== 'text') activateWave();
-      onClick?.(e);
-      attrs.onClick?.(e);
-    };
+  const clickHandler: React.MouseEventHandler<HTMLButtonElement> = (
+    e,
+  ): void => {
+    if (disabled || loading) return;
+    if (plain !== 'text') activateWave();
+    onClick?.(e);
+    attrs.onClick?.(e);
+  };
 
-    const iconOnly = !children && icon;
+  const iconOnly = !children && icon;
 
-    return (
-      <button
-        {...attrs}
-        className={getClassNames(
-          cls.root,
-          className,
-          attrs.className,
-          `${cls.root}--type-${type}`,
-          {
-            [`${cls.root}--shape-${shape}`]: shape !== 'default',
-            [cls['--']['plain-dashed']]: plain === 'dashed',
-            // 默认也要显示，否则 loading 出入场动画会不流畅
-            [cls['--']['icon-l']]: !iconOnly && !rightIcon,
-            [cls['--']['icon-r']]: !iconOnly && rightIcon,
-            [cls['--']['plain-text']]: plain === 'text',
-            [cls['--']['plain']]: plain === true,
-            [cls['--']['icon-only']]: iconOnly,
-            [cls['--']['loading']]: loading,
-          },
-          getSizeClassName(size),
-        )}
-        onClick={clickHandler}
-        disabled={disabled}
-        type={htmlType}
-        ref={ref}
-      >
-        {!rightIcon && btnIcon}
-        {children && <span>{children}</span>}
-        {rightIcon && btnIcon}
-        {btnWave}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      {...attrs}
+      className={getClassNames(
+        cls.root,
+        className,
+        attrs.className,
+        `${cls.root}--type-${type}`,
+        {
+          [`${cls.root}--shape-${shape}`]: shape !== 'default',
+          [cls['--']['plain-dashed']]: plain === 'dashed',
+          // 默认也要显示，否则 loading 出入场动画会不流畅
+          [cls['--']['icon-l']]: !iconOnly && !rightIcon,
+          [cls['--']['icon-r']]: !iconOnly && rightIcon,
+          [cls['--']['plain-text']]: plain === 'text',
+          [cls['--']['plain']]: plain === true,
+          [cls['--']['icon-only']]: iconOnly,
+          [cls['--']['loading']]: loading,
+        },
+        getSizeClassName(size),
+      )}
+      onClick={clickHandler}
+      disabled={disabled}
+      type={htmlType}
+      ref={ref}
+    >
+      {!rightIcon && btnIcon}
+      {children && <span>{children}</span>}
+      {rightIcon && btnIcon}
+      {btnWave}
+    </button>
+  );
+};
 
 Button.displayName = 'Button';
 // 按钮组会获取到该默认值，所以移动到组件内部的解构默认值
diff --git a/packages/components/src/button/ButtonGroup.tsx b/packages/components/src/button/ButtonGroup.tsx
index 796c6412..44266ced 100644
--- a/packages/components/src/button/ButtonGroup.tsx
+++ b/packages/components/src/button/ButtonGroup.tsx
@@ -10,25 +10,24 @@ import React from 'react';
 const rootClass = getComponentClass('button-group');
 const defaultProps = {} satisfies Partial<ButtonGroupProps>;
 
-export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  (props, ref) => {
-    const {
-      attrs = {},
-      children,
-      size,
-    } = mergeReactDefaultProps(props, defaultProps);
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(rootClass, attrs.className)}
-        role={attrs.role || 'group'}
-        ref={ref}
-      >
-        {cloneChildren(children, size)}
-      </div>
-    );
-  },
-);
+export const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {
+  const {
+    attrs = {},
+    children,
+    size,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(rootClass, attrs.className)}
+      role={attrs.role || 'group'}
+      ref={ref}
+    >
+      {cloneChildren(children, size)}
+    </div>
+  );
+};
 
 /**
  * 复制 ButtonGroup 的 children
diff --git a/packages/components/src/calendar/Calendar.tsx b/packages/components/src/calendar/Calendar.tsx
index ff3029ea..3dd841d1 100644
--- a/packages/components/src/calendar/Calendar.tsx
+++ b/packages/components/src/calendar/Calendar.tsx
@@ -20,65 +20,64 @@ const defaultProps = {
   firstDay: 0,
 } satisfies Partial<CalendarProps>;
 
-export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
-  (props, ref) => {
-    const {
-      locale: propsLocale,
-      month: propsMonth,
-      dateDisabled,
-      attrs = {},
-      firstDay,
-      onChange,
-      dateCell,
-      header,
-      today,
-      value,
-    } = mergeReactDefaultProps(props, defaultProps);
+export const Calendar: React.FC<CalendarProps> = (props) => {
+  const {
+    locale: propsLocale,
+    month: propsMonth,
+    dateDisabled,
+    attrs = {},
+    firstDay,
+    onChange,
+    dateCell,
+    header,
+    today,
+    value,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
 
-    const locale = Object.assign(useLocale('calendar', EnUS), propsLocale);
+  const locale = Object.assign(useLocale('calendar', EnUS), propsLocale);
 
-    const [valueRef, setValueRef] = useStateRef(value);
-    const [month, setMonth] = useFollowingState(
-      propsMonth,
-      (v) => v || getStartOfMonth(value || today || new Date()),
-    );
-    useWatch(
-      valueRef.current,
-      (v) => v && !propsMonth && setMonth(getStartOfMonth(v)),
-    );
+  const [valueRef, setValueRef] = useStateRef(value);
+  const [month, setMonth] = useFollowingState(
+    propsMonth,
+    (v) => v || getStartOfMonth(value || today || new Date()),
+  );
+  useWatch(
+    valueRef.current,
+    (v) => v && !propsMonth && setMonth(getStartOfMonth(v)),
+  );
 
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className)}
-        ref={ref}
-      >
-        {header && (
-          <CalendarHeader
-            onMonthChange={setMonth}
-            onChange={setValue}
-            locale={locale}
-            today={today}
-            value={month}
-          />
-        )}
-        <CalendarTable
-          weekDayNames={locale.weekDayNames}
-          dateDisabled={dateDisabled}
-          value={valueRef.current}
-          firstDay={firstDay}
-          setValue={setValue}
-          dateCell={dateCell}
-          month={month}
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className)}
+      ref={ref}
+    >
+      {header && (
+        <CalendarHeader
+          onMonthChange={setMonth}
+          onChange={setValue}
+          locale={locale}
           today={today}
+          value={month}
         />
-      </div>
-    );
-    function setValue(value: Date): void {
-      setValueRef(value);
-      onChange?.(value);
-    }
-  },
-);
+      )}
+      <CalendarTable
+        weekDayNames={locale.weekDayNames}
+        dateDisabled={dateDisabled}
+        value={valueRef.current}
+        firstDay={firstDay}
+        setValue={setValue}
+        dateCell={dateCell}
+        month={month}
+        today={today}
+      />
+    </div>
+  );
+  function setValue(value: Date): void {
+    setValueRef(value);
+    onChange?.(value);
+  }
+};
 
 Calendar.displayName = 'Calendar';
diff --git a/packages/components/src/collapse/Collapse.tsx b/packages/components/src/collapse/Collapse.tsx
index 961e2019..5f4a1b54 100644
--- a/packages/components/src/collapse/Collapse.tsx
+++ b/packages/components/src/collapse/Collapse.tsx
@@ -13,100 +13,99 @@ import { Icon } from '~/icon';
 
 const rootName = getComponentClass('collapse');
 
-export const Collapse = React.forwardRef<HTMLElement, CollapseProps>(
-  (props, ref) => {
-    const {
-      iconPlacement,
-      destroyOnHide,
-      attrs = {},
-      children,
-      disabled,
-      expanded,
-      onChange,
-      header,
-      extra,
-      title,
-      icon,
-      size,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const [visible, setVisible] = useState(expanded || false);
+export const Collapse: React.FC<CollapseProps> = (props) => {
+  const {
+    iconPlacement,
+    destroyOnHide,
+    attrs = {},
+    children,
+    disabled,
+    expanded,
+    onChange,
+    header,
+    extra,
+    title,
+    icon,
+    size,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const [visible, setVisible] = useState(expanded || false);
 
-    useEffect(() => {
-      setVisible(expanded || false);
-    }, [expanded]);
+  useEffect(() => {
+    setVisible(expanded || false);
+  }, [expanded]);
 
-    const Content = (
-      <div className={`${rootName}__content`} key={rootName}>
-        <div className={`${rootName}__content-inner`} key={rootName}>
-          {children}
-        </div>
+  const Content = (
+    <div className={`${rootName}__content`} key={rootName}>
+      <div className={`${rootName}__content-inner`} key={rootName}>
+        {children}
       </div>
-    );
+    </div>
+  );
 
-    const _Icon =
-      icon !== null &&
-      (icon?.(visible) || (
-        <Icon
-          className={getClassNames(`${rootName}__icon`, {
-            [`${rootName}__icon--active`]: visible,
-          })}
-        >
-          <Right />
-        </Icon>
-      ));
+  const _Icon =
+    icon !== null &&
+    (icon?.(visible) || (
+      <Icon
+        className={getClassNames(`${rootName}__icon`, {
+          [`${rootName}__icon--active`]: visible,
+        })}
+      >
+        <Right />
+      </Icon>
+    ));
 
-    const HeaderContent = header ? (
-      header(visible)
-    ) : (
-      <>
-        {iconPlacement === 'start' && _Icon}
-        <div className={`${rootName}__title`}>{title}</div>
-        {extra}
-        {iconPlacement === 'end' && _Icon}
-      </>
-    );
+  const HeaderContent = header ? (
+    header(visible)
+  ) : (
+    <>
+      {iconPlacement === 'start' && _Icon}
+      <div className={`${rootName}__title`}>{title}</div>
+      {extra}
+      {iconPlacement === 'end' && _Icon}
+    </>
+  );
 
-    const handleHeaderClick = useCallback(() => {
-      if (disabled) return;
-      let active;
-      setVisible((v) => (active = !v));
-      onChange?.(active || false);
-    }, [disabled]);
+  const handleHeaderClick = useCallback(() => {
+    if (disabled) return;
+    let active;
+    setVisible((v) => (active = !v));
+    onChange?.(active || false);
+  }, [disabled]);
 
-    return (
-      <section
-        {...attrs}
-        className={getClassNames(
-          rootName,
-          attrs.className,
-          getSizeClassName(size),
-          {
-            [`${rootName}--disabled`]: disabled,
-            [`${rootName}--active`]: visible,
-          },
-        )}
-        role={attrs.role || 'tab'}
-        ref={ref}
+  return (
+    <section
+      {...attrs}
+      className={getClassNames(
+        rootName,
+        attrs.className,
+        getSizeClassName(size),
+        {
+          [`${rootName}--disabled`]: disabled,
+          [`${rootName}--active`]: visible,
+        },
+      )}
+      role={attrs.role || 'tab'}
+      ref={ref}
+    >
+      <Space
+        attrs={{ onClick: handleHeaderClick }}
+        className={`${rootName}__header`}
+        tag="div"
+        gap={12}
+      >
+        {HeaderContent}
+      </Space>
+      <CollapseTransition
+        show={destroyOnHide === true ? undefined : visible}
+        appear={destroyOnHide === 'mixed' ? null : false}
+        name={rootName}
       >
-        <Space
-          attrs={{ onClick: handleHeaderClick }}
-          className={`${rootName}__header`}
-          tag="div"
-          gap={12}
-        >
-          {HeaderContent}
-        </Space>
-        <CollapseTransition
-          show={destroyOnHide === true ? undefined : visible}
-          appear={destroyOnHide === 'mixed' ? null : false}
-          name={rootName}
-        >
-          {destroyOnHide === true ? expanded && Content : Content}
-        </CollapseTransition>
-      </section>
-    );
-  },
-);
+        {destroyOnHide === true ? expanded && Content : Content}
+      </CollapseTransition>
+    </section>
+  );
+};
 
 const defaultProps = {
   destroyOnHide: 'mixed',
diff --git a/packages/components/src/collapse/CollapseGroup.tsx b/packages/components/src/collapse/CollapseGroup.tsx
index 44bdccf1..ec203f73 100644
--- a/packages/components/src/collapse/CollapseGroup.tsx
+++ b/packages/components/src/collapse/CollapseGroup.tsx
@@ -10,57 +10,56 @@ import { Collapse } from './Collapse';
 
 const rootName = getComponentClass('collapse-group');
 
-export const CollapseGroup = React.forwardRef<HTMLElement, CollapseGroupProps>(
-  (props, ref) => {
-    const {
-      collapseProps,
-      attrs = {},
-      accordion,
-      onChange,
-      items,
-      tag,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const list = useRef(items);
-    const forceUpdate = useForceUpdate();
+export const CollapseGroup: React.FC<CollapseGroupProps> = (props) => {
+  const {
+    collapseProps,
+    attrs = {},
+    accordion,
+    onChange,
+    items,
+    tag,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const list = useRef(items);
+  const forceUpdate = useForceUpdate();
 
-    useEffect(() => {
-      list.current = items;
-    }, [items]);
+  useEffect(() => {
+    list.current = items;
+  }, [items]);
 
-    const changeHandler = (index: number, active: boolean) => {
-      const currentItem = list.current[index]!;
-      onChange?.(currentItem, index, active);
+  const changeHandler = (index: number, active: boolean) => {
+    const currentItem = list.current[index]!;
+    onChange?.(currentItem, index, active);
 
-      if (active && accordion) {
-        list.current.forEach((item) => (item.expanded = false));
-        forceUpdate();
-      }
-      currentItem.expanded = active;
-    };
+    if (active && accordion) {
+      list.current.forEach((item) => (item.expanded = false));
+      forceUpdate();
+    }
+    currentItem.expanded = active;
+  };
 
-    return React.createElement(
-      tag,
-      {
-        ...attrs,
-        className: getClassNames(rootName, attrs.className),
-        ref,
-      },
-      list.current.map(({ onChange, ...rest }, i) => {
-        const opts = { ...collapseProps, ...rest };
-        return (
-          <Collapse
-            {...opts}
-            onChange={(active) => {
-              onChange?.(active);
-              changeHandler(i, active);
-            }}
-            key={opts.key}
-          />
-        );
-      }),
-    );
-  },
-);
+  return React.createElement(
+    tag,
+    {
+      ...attrs,
+      className: getClassNames(rootName, attrs.className),
+      ref,
+    },
+    list.current.map(({ onChange, ...rest }, i) => {
+      const opts = { ...collapseProps, ...rest };
+      return (
+        <Collapse
+          {...opts}
+          onChange={(active) => {
+            onChange?.(active);
+            changeHandler(i, active);
+          }}
+          key={opts.key}
+        />
+      );
+    }),
+  );
+};
 
 const defaultProps = {
   tag: 'div',
diff --git a/packages/components/src/date-picker/DatePicker.tsx b/packages/components/src/date-picker/DatePicker.tsx
index d40e704a..811b06d6 100644
--- a/packages/components/src/date-picker/DatePicker.tsx
+++ b/packages/components/src/date-picker/DatePicker.tsx
@@ -28,145 +28,142 @@ const defaultProps = {
   type: 'date',
 } satisfies Partial<DatePickerProps>;
 
-const _DatePicker = React.forwardRef<HTMLLabelElement, DatePickerProps>(
-  (props, ref) => {
-    const locale = useLocale('datePicker', EnUS);
-    const {
-      value: outerValue,
-      dateDisabled,
-      attrs = {},
-      shortcuts,
-      dateCell,
-      onChange,
-      disabled,
-      visible,
-      format,
-      range,
-      type,
-      icon,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const [value, setValue] = useFollowingState(outerValue, valueHandler);
-    // 弹窗状态
-    const isOpenedRef = useRef(false);
-    const visibleControllerRef = useRef<VisibleController>(null);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const isConfirmedRef = useRef(false);
+const _DatePicker: React.FC<DatePickerProps> = (props) => {
+  const locale = useLocale('datePicker', EnUS);
+  const {
+    value: outerValue,
+    dateDisabled,
+    attrs = {},
+    shortcuts,
+    dateCell,
+    onChange,
+    disabled,
+    visible,
+    format,
+    range,
+    type,
+    icon,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const [value, setValue] = useFollowingState(outerValue, valueHandler);
+  // 弹窗状态
+  const isOpenedRef = useRef(false);
+  const visibleControllerRef = useRef<VisibleController>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isConfirmedRef = useRef(false);
 
-    useWatch(visible, (v) => (isOpenedRef.current = v || false), {
-      immediate: true,
-    });
+  useWatch(visible, (v) => (isOpenedRef.current = v || false), {
+    immediate: true,
+  });
 
-    const inputBoxFormular = getInputBoxFormular();
-    const cl = { [cls['--'].range]: range };
+  const inputBoxFormular = getInputBoxFormular();
+  const cl = { [cls['--'].range]: range };
 
-    return (
-      <InputPopover
-        popoverProps={{
-          content: (
-            <DatePickerPanel
-              confirmText={locale.confirmText}
-              dateDisabled={dateDisabled}
-              onConfirm={onConfirm}
-              shortcuts={shortcuts}
-              onChange={_onChange}
-              dateCell={dateCell}
-              format={format}
-              values={value}
-              range={range}
-              type={type}
-            />
-          ),
-          on: transitionCBAdapter({
-            onAfterLeave() {
-              if (isConfirmedRef.current) {
-                isConfirmedRef.current = false;
-                return;
-              }
-              setValue(valueHandler(outerValue));
-            },
-          }),
-          attrs: { className: getClassNames(cls.__.pop, cl) },
-          placement: 'bottom-start',
-          widthByTrigger: false,
-          visibleControllerRef,
-          showArrow: false,
-          offset: 2,
-        }}
-        attrs={{
-          ...attrs,
-          className: getClassNames(cls.root, attrs.className, cl),
-        }}
-        onVisibleChange={_onVisibleChange}
-        disabled={disabled}
-        visible={visible}
-        ref={ref}
-      >
-        {getInputs()}
-      </InputPopover>
-    );
+  return (
+    <InputPopover
+      popoverProps={{
+        content: (
+          <DatePickerPanel
+            confirmText={locale.confirmText}
+            dateDisabled={dateDisabled}
+            onConfirm={onConfirm}
+            shortcuts={shortcuts}
+            onChange={_onChange}
+            dateCell={dateCell}
+            format={format}
+            values={value}
+            range={range}
+            type={type}
+          />
+        ),
+        on: transitionCBAdapter({
+          onAfterLeave() {
+            if (isConfirmedRef.current) {
+              isConfirmedRef.current = false;
+              return;
+            }
+            setValue(valueHandler(outerValue));
+          },
+        }),
+        attrs: { className: getClassNames(cls.__.pop, cl) },
+        placement: 'bottom-start',
+        widthByTrigger: false,
+        visibleControllerRef,
+        showArrow: false,
+        offset: 2,
+      }}
+      attrs={{
+        ...attrs,
+        className: getClassNames(cls.root, attrs.className, cl),
+      }}
+      onVisibleChange={_onVisibleChange}
+      disabled={disabled}
+      visible={visible}
+      ref={ref}
+    >
+      {getInputs()}
+    </InputPopover>
+  );
 
-    function valueHandler(v: typeof outerValue) {
-      return castArray(v) as [start?: Date, end?: Date];
-    }
-
-    function getInputs(): React.ReactElement {
-      function onChange(index: 0 | 1) {
-        return (v: Date) => {
-          _onChange(
-            index === 0 ? [v, value[1] as Date] : [value[0] as Date, v],
-          );
-        };
-      }
-      const inputIcon = <Icon>{icon || <CalendarIcon />}</Icon>;
-      const FC = (index: 0 | 1, placeholder: string) => (
-        <DatePickerInputBox
-          onChange={onChange(index)}
-          placeholder={placeholder}
-          format={inputBoxFormular}
-          isOpenedRef={isOpenedRef}
-          value={value[index]}
-          disabled={disabled}
-          inputRef={inputRef}
-        >
-          {!range && inputIcon}
-        </DatePickerInputBox>
-      );
+  function valueHandler(v: typeof outerValue) {
+    return castArray(v) as [start?: Date, end?: Date];
+  }
 
-      if (!range) return FC(0, locale.placeholder);
-      return (
-        <>
-          {FC(0, locale.rangePlaceholder[0])}
-          <Divider vertical />
-          {FC(1, locale.rangePlaceholder[1])}
-          {inputIcon}
-        </>
-      );
-    }
-    function getInputBoxFormular(): string {
-      if (format) return format;
-      const map: Record<typeof type, string> = {
-        datetime: 'yyyy-MM-dd hh:mm:ss',
-        date: 'yyyy-MM-dd',
-        time: 'hh:mm:ss',
-        month: 'yyyy-MM',
-        year: 'yyyy',
+  function getInputs(): React.ReactElement {
+    function onChange(index: 0 | 1) {
+      return (v: Date) => {
+        _onChange(index === 0 ? [v, value[1] as Date] : [value[0] as Date, v]);
       };
-      return map[type];
-    }
-    function _onVisibleChange(v: boolean): void {
-      isOpenedRef.current = v;
-      // if (v) inputRef.current?.focus();
     }
-    function _onChange(value: [start?: Date, end?: Date]): void {
-      setValue(value);
-    }
-    function onConfirm(): void {
-      isConfirmedRef.current = true;
-      onChange?.(range ? (value as RangeValueType) : (value[0] as Date));
-      visibleControllerRef.current?.hide();
-    }
-  },
-);
+    const inputIcon = <Icon>{icon || <CalendarIcon />}</Icon>;
+    const FC = (index: 0 | 1, placeholder: string) => (
+      <DatePickerInputBox
+        onChange={onChange(index)}
+        placeholder={placeholder}
+        format={inputBoxFormular}
+        isOpenedRef={isOpenedRef}
+        value={value[index]}
+        disabled={disabled}
+        inputRef={inputRef}
+      >
+        {!range && inputIcon}
+      </DatePickerInputBox>
+    );
+
+    if (!range) return FC(0, locale.placeholder);
+    return (
+      <>
+        {FC(0, locale.rangePlaceholder[0])}
+        <Divider vertical />
+        {FC(1, locale.rangePlaceholder[1])}
+        {inputIcon}
+      </>
+    );
+  }
+  function getInputBoxFormular(): string {
+    if (format) return format;
+    const map: Record<typeof type, string> = {
+      datetime: 'yyyy-MM-dd hh:mm:ss',
+      date: 'yyyy-MM-dd',
+      time: 'hh:mm:ss',
+      month: 'yyyy-MM',
+      year: 'yyyy',
+    };
+    return map[type];
+  }
+  function _onVisibleChange(v: boolean): void {
+    isOpenedRef.current = v;
+    // if (v) inputRef.current?.focus();
+  }
+  function _onChange(value: [start?: Date, end?: Date]): void {
+    setValue(value);
+  }
+  function onConfirm(): void {
+    isConfirmedRef.current = true;
+    onChange?.(range ? (value as RangeValueType) : (value[0] as Date));
+    visibleControllerRef.current?.hide();
+  }
+};
 
 _DatePicker.displayName = 'DatePicker';
 
diff --git a/packages/components/src/divider/Divider.tsx b/packages/components/src/divider/Divider.tsx
index 20274898..d2c61f59 100644
--- a/packages/components/src/divider/Divider.tsx
+++ b/packages/components/src/divider/Divider.tsx
@@ -12,50 +12,49 @@ const defaultProps = {
   tag: 'div',
 } satisfies DividerProps;
 
-export const Divider = React.forwardRef<HTMLElement, DividerProps>(
-  (props, ref) => {
-    const {
-      attrs = {},
-      placement,
-      lineStyle,
-      lineColor,
-      lineWidth,
-      children,
-      vertical,
-      tag,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const _style = {
-      ...attrs.style,
-      '--t-divider-border-color': lineColor,
-      '--t-divider-border-style': lineStyle,
-      '--t-divider-border-width': lineWidth,
-    } as React.CSSProperties;
+export const Divider: React.FC<DividerProps> = (props) => {
+  const {
+    attrs = {},
+    placement,
+    lineStyle,
+    lineColor,
+    lineWidth,
+    children,
+    vertical,
+    tag,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const _style = {
+    ...attrs.style,
+    '--t-divider-border-color': lineColor,
+    '--t-divider-border-style': lineStyle,
+    '--t-divider-border-width': lineWidth,
+  } as React.CSSProperties;
 
-    const _className = getClassNames(
-      rootName,
-      attrs.className,
-      `${rootName}--${placement}`,
-      {
-        [`${rootName}--horizontal`]: !vertical,
-        [`${rootName}--vertical`]: vertical,
-      },
-    );
+  const _className = getClassNames(
+    rootName,
+    attrs.className,
+    `${rootName}--${placement}`,
+    {
+      [`${rootName}--horizontal`]: !vertical,
+      [`${rootName}--vertical`]: vertical,
+    },
+  );
 
-    return React.createElement(
-      tag,
-      {
-        ...attrs,
-        className: _className,
-        style: _style,
-        ref,
-      },
-      <>
-        {!vertical && children && (
-          <div className={`${rootName}__content`}>{children}</div>
-        )}
-      </>,
-    );
-  },
-);
+  return React.createElement(
+    tag,
+    {
+      ...attrs,
+      className: _className,
+      style: _style,
+      ref,
+    },
+    <>
+      {!vertical && children && (
+        <div className={`${rootName}__content`}>{children}</div>
+      )}
+    </>,
+  );
+};
 
 Divider.displayName = 'Divider';
diff --git a/packages/components/src/draggable/Draggable.tsx b/packages/components/src/draggable/Draggable.tsx
index 9194b2bc..ddd57c78 100644
--- a/packages/components/src/draggable/Draggable.tsx
+++ b/packages/components/src/draggable/Draggable.tsx
@@ -1,11 +1,11 @@
 // import EnUS from './locale/en-US';
 import type { DraggableProps, DraggableFC } from './draggable.types';
 import { mergeReactDefaultProps, getClasses } from '@pkg/shared';
-// import { useLocale } from '~/config-provider/useLocale';
-import React, { createElement, forwardRef } from 'react';
 import { TransitionGroup } from '~/transition-group';
 import { getClassNames } from '@tool-pack/basic';
 import { useDraggableChildren } from './hooks';
+// import { useLocale } from '~/config-provider/useLocale';
+import React, { createElement } from 'react';
 
 export const cls = getClasses('draggable', ['ghost', 'item'], ['hidden']);
 const defaultProps = {
@@ -13,38 +13,37 @@ const defaultProps = {
   list: [],
 } satisfies Partial<DraggableProps>;
 
-export const _Draggable = forwardRef<HTMLDivElement, DraggableProps>(
-  (props, ref) => {
-    // const locale = useLocale('draggable', EnUS);
-    const {
-      transition,
-      attrs = {},
-      tag,
-    } = (props = mergeReactDefaultProps(props, defaultProps));
-    const children = useDraggableChildren(props);
-    const className = getClassNames(cls.root, attrs.className);
+export const _Draggable: React.FC<DraggableProps> = (props) => {
+  // const locale = useLocale('draggable', EnUS);
+  const {
+    transition,
+    attrs = {},
+    tag,
+    ref,
+  } = (props = mergeReactDefaultProps(props, defaultProps));
+  const children = useDraggableChildren(props);
+  const className = getClassNames(cls.root, attrs.className);
 
-    if (transition && children) {
-      const transitionProps = transition === true ? undefined : transition;
-      return (
-        <TransitionGroup {...transitionProps} className={className} tag={tag}>
-          {children as React.ReactElement[]}
-        </TransitionGroup>
-      );
-    }
-
-    if (tag === null) return children;
-    return createElement(
-      tag,
-      {
-        ...attrs,
-        className,
-        ref,
-      },
-      children,
+  if (transition && children) {
+    const transitionProps = transition === true ? undefined : transition;
+    return (
+      <TransitionGroup {...transitionProps} className={className} tag={tag}>
+        {children as React.ReactElement[]}
+      </TransitionGroup>
     );
-  },
-);
+  }
+
+  if (tag === null) return children;
+  return createElement(
+    tag,
+    {
+      ...attrs,
+      className,
+      ref,
+    },
+    children,
+  );
+};
 
 _Draggable.displayName = 'Draggable';
 
diff --git a/packages/components/src/dropdown/DropdownInnerOption.tsx b/packages/components/src/dropdown/DropdownInnerOption.tsx
index 125eb5eb..bb8dfcf8 100644
--- a/packages/components/src/dropdown/DropdownInnerOption.tsx
+++ b/packages/components/src/dropdown/DropdownInnerOption.tsx
@@ -11,15 +11,13 @@ const defaultProps = {
   tag: 'li',
 } satisfies Partial<DropdownOptionProps>;
 
-export const DropdownInnerOption = React.forwardRef<
-  HTMLElement,
-  DropdownOptionProps
->((props, ref) => {
+export const DropdownInnerOption: React.FC<DropdownOptionProps> = (props) => {
   const {
     expandable,
     attrs = {},
     children,
     extra,
+    ref,
     ...rest
   } = mergeReactDefaultProps(props, defaultProps);
   return (
@@ -46,4 +44,4 @@ export const DropdownInnerOption = React.forwardRef<
       {children}
     </Option>
   );
-});
+};
diff --git a/packages/components/src/empty/Empty.tsx b/packages/components/src/empty/Empty.tsx
index 5f301270..33dc459c 100644
--- a/packages/components/src/empty/Empty.tsx
+++ b/packages/components/src/empty/Empty.tsx
@@ -16,27 +16,26 @@ const defaultProps = {
   ),
 } satisfies Partial<EmptyProps>;
 
-export const Empty = React.forwardRef<HTMLDivElement, EmptyProps>(
-  (props, ref) => {
-    const {
-      description,
-      attrs = {},
-      children,
-      icon,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const locale = useLocale('empty', EnUS);
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className)}
-        ref={ref}
-      >
-        <div className={cls.__.icon}>{icon}</div>
-        <div className={cls.__.desc}>{description || locale.description}</div>
-        {children}
-      </div>
-    );
-  },
-);
+export const Empty: React.FC<EmptyProps> = (props) => {
+  const {
+    description,
+    attrs = {},
+    children,
+    icon,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const locale = useLocale('empty', EnUS);
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className)}
+      ref={ref}
+    >
+      <div className={cls.__.icon}>{icon}</div>
+      <div className={cls.__.desc}>{description || locale.description}</div>
+      {children}
+    </div>
+  );
+};
 
 Empty.displayName = 'Empty';
diff --git a/packages/components/src/icon/Icon.tsx b/packages/components/src/icon/Icon.tsx
index f273b849..7a003f8b 100644
--- a/packages/components/src/icon/Icon.tsx
+++ b/packages/components/src/icon/Icon.tsx
@@ -4,8 +4,8 @@ import { IconProps } from './icon.types';
 import React from 'react';
 
 const rootClass = getComponentClass('icon');
-export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
-  const { attrs = {}, className, children, color, size } = props;
+export const Icon: React.FC<IconProps> = (props) => {
+  const { attrs = {}, className, children, color, size, ref } = props;
   const { role = 'img', style = {} } = attrs;
 
   const fontSize =
@@ -26,4 +26,4 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
       {children ?? attrs.children}
     </i>
   );
-});
+};
diff --git a/packages/components/src/image/Image.tsx b/packages/components/src/image/Image.tsx
index d60ef112..e5ddbffe 100644
--- a/packages/components/src/image/Image.tsx
+++ b/packages/components/src/image/Image.tsx
@@ -16,124 +16,123 @@ const defaultProps = {
   preview: true,
 } satisfies Partial<ImageProps>;
 
-export const Image = React.forwardRef<HTMLDivElement, ImageProps>(
-  (props, ref) => {
-    const {
-      imgAttrs = {},
-      attrs = {},
-      fallback,
-      preview,
-      height,
-      width,
-      lazy,
-      src,
-      fit,
-      alt,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const context = useContext(ImagePreviewGroupContext);
+export const Image: React.FC<ImageProps> = (props) => {
+  const {
+    imgAttrs = {},
+    attrs = {},
+    fallback,
+    preview,
+    height,
+    width,
+    lazy,
+    src,
+    fit,
+    alt,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const context = useContext(ImagePreviewGroupContext);
 
-    useEffect(() => {
-      if (!context || !preview) return;
-      const url = src || imgAttrs.src || '';
-      if (context.includes(url)) return;
-      context.push(url);
-      return () => {
-        const index = context.indexOf(url);
-        if (index === -1) return;
-        context.splice(index, 1);
-      };
-    }, [preview]);
+  useEffect(() => {
+    if (!context || !preview) return;
+    const url = src || imgAttrs.src || '';
+    if (context.includes(url)) return;
+    context.push(url);
+    return () => {
+      const index = context.indexOf(url);
+      if (index === -1) return;
+      context.splice(index, 1);
+    };
+  }, [preview]);
 
-    const [imgVisible, setImgVisible] = useState(true);
-    const [previewVisible, setPreviewVisible] = useState(false);
-    const imgRef = useRef<HTMLImageElement>(null);
-    const forceUpdate = useForceUpdate();
-    const lazyingRef = useRef<boolean | void>(undefined);
+  const [imgVisible, setImgVisible] = useState(true);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const forceUpdate = useForceUpdate();
+  const lazyingRef = useRef<boolean | void>(undefined);
 
-    if (lazyingRef.current === undefined && lazy) {
-      lazyingRef.current = true;
-    }
+  if (lazyingRef.current === undefined && lazy) {
+    lazyingRef.current = true;
+  }
 
-    useEffect(() => {
-      const el = imgRef.current;
-      if (!lazy) return;
-      if (!el || !lazyingRef.current) return;
+  useEffect(() => {
+    const el = imgRef.current;
+    if (!lazy) return;
+    if (!el || !lazyingRef.current) return;
 
-      const handler = (entries: IntersectionObserverEntry[]) => {
-        if (entries[0]!.intersectionRatio <= 0) return;
-        lazyingRef.current = false;
-        forceUpdate();
-      };
-      const observer = new IntersectionObserver(handler);
-      observer.observe(el);
-      return () => observer.disconnect();
-    }, [lazy]);
+    const handler = (entries: IntersectionObserverEntry[]) => {
+      if (entries[0]!.intersectionRatio <= 0) return;
+      lazyingRef.current = false;
+      forceUpdate();
+    };
+    const observer = new IntersectionObserver(handler);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [lazy]);
 
-    const Img = (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-      <img
-        onClick={(e) => {
-          if (lazyingRef.current) return;
-          imgAttrs.onClick?.(e);
-          setPreviewVisible(true);
-        }}
-        style={{
-          ...imgAttrs.style,
-          objectFit: fit || imgAttrs.style?.objectFit,
-        }}
-        src={lazyingRef.current ? fallback : src || imgAttrs.src}
-        height={height || imgAttrs.height}
-        width={width || imgAttrs.width}
-        alt={alt || imgAttrs.alt}
-        className={cls.__.img}
-        onError={hideImg}
-        onAbort={hideImg}
-        ref={imgRef}
-        key={1}
-      />
-    );
+  const Img = (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+    <img
+      onClick={(e) => {
+        if (lazyingRef.current) return;
+        imgAttrs.onClick?.(e);
+        setPreviewVisible(true);
+      }}
+      style={{
+        ...imgAttrs.style,
+        objectFit: fit || imgAttrs.style?.objectFit,
+      }}
+      src={lazyingRef.current ? fallback : src || imgAttrs.src}
+      height={height || imgAttrs.height}
+      width={width || imgAttrs.width}
+      alt={alt || imgAttrs.alt}
+      className={cls.__.img}
+      onError={hideImg}
+      onAbort={hideImg}
+      ref={imgRef}
+      key={1}
+    />
+  );
 
-    const Fallback = (
-      <img
-        style={{
-          ...imgAttrs.style,
-          objectFit: fit || imgAttrs.style?.objectFit,
-        }}
-        height={height || imgAttrs.height}
-        width={width || imgAttrs.width}
-        className={cls.__.fallback}
-        alt={alt || imgAttrs.alt}
-        src={fallback}
-      />
-    );
+  const Fallback = (
+    <img
+      style={{
+        ...imgAttrs.style,
+        objectFit: fit || imgAttrs.style?.objectFit,
+      }}
+      height={height || imgAttrs.height}
+      width={width || imgAttrs.width}
+      className={cls.__.fallback}
+      alt={alt || imgAttrs.alt}
+      src={fallback}
+    />
+  );
 
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className, {
-          [cls['--'].preview]: preview,
-        })}
-        ref={ref}
-      >
-        {imgVisible
-          ? [
-              Img,
-              preview && previewVisible && (
-                <ImagePreview
-                  onHide={() => setPreviewVisible(false)}
-                  images={[src]}
-                  key={2}
-                />
-              ),
-            ]
-          : Fallback}
-      </div>
-    );
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className, {
+        [cls['--'].preview]: preview,
+      })}
+      ref={ref}
+    >
+      {imgVisible
+        ? [
+            Img,
+            preview && previewVisible && (
+              <ImagePreview
+                onHide={() => setPreviewVisible(false)}
+                images={[src]}
+                key={2}
+              />
+            ),
+          ]
+        : Fallback}
+    </div>
+  );
 
-    function hideImg(): void {
-      setImgVisible(false);
-    }
-  },
-);
+  function hideImg(): void {
+    setImgVisible(false);
+  }
+};
 
 Image.displayName = 'Image';
diff --git a/packages/components/src/image/components/Preview.tsx b/packages/components/src/image/components/Preview.tsx
index b146176c..b5cf7032 100644
--- a/packages/components/src/image/components/Preview.tsx
+++ b/packages/components/src/image/components/Preview.tsx
@@ -24,182 +24,180 @@ const cls = getClasses(
 );
 const defaultProps = {} satisfies Partial<ImagePreviewProps>;
 
-export const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(
-  (props, ref) => {
-    const {
-      attrs = {},
-      onHide,
-      images,
-    } = mergeReactDefaultProps(props, defaultProps);
-
-    useScrollLock(true);
-    const [index, setIndex] = useState(0);
-    const imgRef = useRef<HTMLImageElement>(null);
-    const [move, setMove] = useState<[number, number]>([0, 0]);
-
-    const groupImages = useContext(ImagePreviewGroupContext);
-    const imageList = useMemo(() => {
-      if (groupImages?.length) return groupImages;
-      return images;
-    }, [groupImages, images]);
-
-    const currentImageUrl = imageList[index] as string;
-
-    // 拖动图片
-    useEffect(() => {
-      const img = imgRef.current;
-      if (!img) return;
-      onDragEvent(
-        ({ onDown, onMove, onUp }) => {
-          let transition = '';
-          onDown(() => {
-            const style = getComputedStyle(img);
-            transition = style.transition;
-            img.style.transition = '0s';
-          });
-          onMove((_e, currentXY, _lastXY, downXY) => {
-            setMove([currentXY.x - downXY.x, currentXY.y - downXY.y]);
-          });
-          onUp(() => {
-            img.style.transition = transition;
-            setMove([0, 0]);
-          });
-        },
-        { el: img },
-      );
-    }, []);
-
-    // 点击图片显示预览图时，显示当前图片
-    useEffect(() => {
-      const currentUrl = images[0];
-      const index = imageList.indexOf(currentUrl);
-      setIndex(index === -1 ? 0 : index);
-    }, [imageList, images]);
-
-    const [state, dispatch] = useReducer(
-      (
-        prevState: {
-          flip: [number, number];
-          rotate: number;
-          zoom: number;
-        },
-        action: (typeof ImagePreviewToolbarActions)[number],
-      ) => {
-        const steps = {
-          rotate: 90,
-          zoom: 0.25,
-        };
-
-        // 注意：在严格模式下一定要先复制再赋值，不要去改变原值，否则严格模式执行两次的时候多操作一次会改为错误的值
-        const nextState: typeof prevState = {
-          ...prevState,
-          flip: [...prevState.flip],
-        };
-
-        const map: Partial<Record<typeof action, () => void>> = {
-          reset: () =>
-            Object.assign(nextState, {
-              flip: [1, 1],
-              rotate: 0,
-              zoom: 1,
-            } as typeof nextState),
-          'zoom-out': () => {
-            nextState.zoom = Math.max(nextState.zoom - steps.zoom, 0.1);
-          },
-          'rotate-right': () => (nextState.rotate += steps.rotate),
-          'rotate-left': () => (nextState.rotate -= steps.rotate),
-          'flip-horizontal': () => (nextState.flip[0] *= -1),
-          'flip-vertically': () => (nextState.flip[1] *= -1),
-          'zoom-in': () => (nextState.zoom += steps.zoom),
-        };
-
-        map[action]?.();
-
-        return nextState;
+export const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
+  const {
+    attrs = {},
+    onHide,
+    images,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+
+  useScrollLock(true);
+  const [index, setIndex] = useState(0);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [move, setMove] = useState<[number, number]>([0, 0]);
+
+  const groupImages = useContext(ImagePreviewGroupContext);
+  const imageList = useMemo(() => {
+    if (groupImages?.length) return groupImages;
+    return images;
+  }, [groupImages, images]);
+
+  const currentImageUrl = imageList[index] as string;
+
+  // 拖动图片
+  useEffect(() => {
+    const img = imgRef.current;
+    if (!img) return;
+    onDragEvent(
+      ({ onDown, onMove, onUp }) => {
+        let transition = '';
+        onDown(() => {
+          const style = getComputedStyle(img);
+          transition = style.transition;
+          img.style.transition = '0s';
+        });
+        onMove((_e, currentXY, _lastXY, downXY) => {
+          setMove([currentXY.x - downXY.x, currentXY.y - downXY.y]);
+        });
+        onUp(() => {
+          img.style.transition = transition;
+          setMove([0, 0]);
+        });
       },
-      { flip: [1, 1], rotate: 0, zoom: 1 },
+      { el: img },
     );
+  }, []);
+
+  // 点击图片显示预览图时，显示当前图片
+  useEffect(() => {
+    const currentUrl = images[0];
+    const index = imageList.indexOf(currentUrl);
+    setIndex(index === -1 ? 0 : index);
+  }, [imageList, images]);
+
+  const [state, dispatch] = useReducer(
+    (
+      prevState: {
+        flip: [number, number];
+        rotate: number;
+        zoom: number;
+      },
+      action: (typeof ImagePreviewToolbarActions)[number],
+    ) => {
+      const steps = {
+        rotate: 90,
+        zoom: 0.25,
+      };
 
-    const imgStyle = useMemo((): React.CSSProperties => {
-      const { zoom, flip } = state;
-
-      let rt = state.rotate;
-      while (rt < 0) rt += 360;
-      rt %= 360;
-
-      if (rt !== 0)
-        if (rt % 270 === 0) {
-          [move[0], move[1]] = [-move[1], move[0]];
-        } else if (rt % 180 === 0) {
-          move[0] *= -1;
-          move[1] *= -1;
-        } else if (rt % 90 === 0) {
-          [move[0], move[1]] = [move[1], -move[0]];
-        }
-
-      const scale = `scale(${zoom * flip[0]}, ${zoom * flip[1]})`;
-      const rotate = `rotate(${state.rotate}deg)`;
-      const translate = `translate(${move[0] * flip[0]}px,${
-        move[1] * flip[1]
-      }px)`;
-
-      return {
-        transform: `${scale} ${rotate} ${translate}`,
+      // 注意：在严格模式下一定要先复制再赋值，不要去改变原值，否则严格模式执行两次的时候多操作一次会改为错误的值
+      const nextState: typeof prevState = {
+        ...prevState,
+        flip: [...prevState.flip],
       };
-    }, [state, move]);
-
-    return createPortal(
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className, {})}
-        ref={ref}
-      >
-        <img
-          className={cls.__.img}
-          src={currentImageUrl}
-          draggable={false}
-          style={imgStyle}
-          ref={imgRef}
-          alt=""
-        />
-
-        <div className={cls.__['toolbar-wrapper']}>
-          <div className={cls.__.progress}>
-            {index + 1} / {imageList.length}
-          </div>
-          <ImagePreviewToolbar onTrigger={onTrigger} />
-        </div>
-      </div>,
-      document.body,
-    );
-    function onTrigger(
-      action: (typeof ImagePreviewToolbarActions)[number],
-    ): void {
-      switch (action) {
-        case 'prev':
-          if (imageList.length <= 1) return;
-          dispatch('reset');
-          setIndex((index) => (index === 0 ? imageList.length - 1 : index - 1));
-          break;
-        case 'next':
-          if (imageList.length <= 1) return;
-          dispatch('reset');
-          setIndex((index) => (index >= imageList.length - 1 ? 0 : index + 1));
-          break;
-        case 'close':
-          dispatch('reset');
-          onHide?.();
-          break;
-        case 'download':
-          downloadImgByFetch(currentImageUrl, '');
-          break;
-        default:
-          dispatch(action);
-          break;
+
+      const map: Partial<Record<typeof action, () => void>> = {
+        reset: () =>
+          Object.assign(nextState, {
+            flip: [1, 1],
+            rotate: 0,
+            zoom: 1,
+          } as typeof nextState),
+        'zoom-out': () => {
+          nextState.zoom = Math.max(nextState.zoom - steps.zoom, 0.1);
+        },
+        'rotate-right': () => (nextState.rotate += steps.rotate),
+        'rotate-left': () => (nextState.rotate -= steps.rotate),
+        'flip-horizontal': () => (nextState.flip[0] *= -1),
+        'flip-vertically': () => (nextState.flip[1] *= -1),
+        'zoom-in': () => (nextState.zoom += steps.zoom),
+      };
+
+      map[action]?.();
+
+      return nextState;
+    },
+    { flip: [1, 1], rotate: 0, zoom: 1 },
+  );
+
+  const imgStyle = useMemo((): React.CSSProperties => {
+    const { zoom, flip } = state;
+
+    let rt = state.rotate;
+    while (rt < 0) rt += 360;
+    rt %= 360;
+
+    if (rt !== 0)
+      if (rt % 270 === 0) {
+        [move[0], move[1]] = [-move[1], move[0]];
+      } else if (rt % 180 === 0) {
+        move[0] *= -1;
+        move[1] *= -1;
+      } else if (rt % 90 === 0) {
+        [move[0], move[1]] = [move[1], -move[0]];
       }
+
+    const scale = `scale(${zoom * flip[0]}, ${zoom * flip[1]})`;
+    const rotate = `rotate(${state.rotate}deg)`;
+    const translate = `translate(${move[0] * flip[0]}px,${
+      move[1] * flip[1]
+    }px)`;
+
+    return {
+      transform: `${scale} ${rotate} ${translate}`,
+    };
+  }, [state, move]);
+
+  return createPortal(
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className, {})}
+      ref={ref}
+    >
+      <img
+        className={cls.__.img}
+        src={currentImageUrl}
+        draggable={false}
+        style={imgStyle}
+        ref={imgRef}
+        alt=""
+      />
+
+      <div className={cls.__['toolbar-wrapper']}>
+        <div className={cls.__.progress}>
+          {index + 1} / {imageList.length}
+        </div>
+        <ImagePreviewToolbar onTrigger={onTrigger} />
+      </div>
+    </div>,
+    document.body,
+  );
+  function onTrigger(
+    action: (typeof ImagePreviewToolbarActions)[number],
+  ): void {
+    switch (action) {
+      case 'prev':
+        if (imageList.length <= 1) return;
+        dispatch('reset');
+        setIndex((index) => (index === 0 ? imageList.length - 1 : index - 1));
+        break;
+      case 'next':
+        if (imageList.length <= 1) return;
+        dispatch('reset');
+        setIndex((index) => (index >= imageList.length - 1 ? 0 : index + 1));
+        break;
+      case 'close':
+        dispatch('reset');
+        onHide?.();
+        break;
+      case 'download':
+        downloadImgByFetch(currentImageUrl, '');
+        break;
+      default:
+        dispatch(action);
+        break;
     }
-  },
-);
+  }
+};
 
-ImagePreview.defaultProps = defaultProps;
 ImagePreview.displayName = 'ImagePreview';
diff --git a/packages/components/src/input-popover/InputPopover.tsx b/packages/components/src/input-popover/InputPopover.tsx
index 410876af..a653aec4 100644
--- a/packages/components/src/input-popover/InputPopover.tsx
+++ b/packages/components/src/input-popover/InputPopover.tsx
@@ -19,10 +19,7 @@ import { Popover } from '~/popover';
 const defaultProps = {} satisfies Partial<InputPopoverProps>;
 const cls = getClasses('input-popover', [], []);
 
-export const InputPopover = React.forwardRef<
-  HTMLLabelElement,
-  InputPopoverProps
->((props, ref) => {
+export const InputPopover: React.FC<InputPopoverProps> = (props) => {
   const {
     popoverProps = {},
     onVisibleChange,
@@ -36,6 +33,7 @@ export const InputPopover = React.forwardRef<
     active,
     status,
     size,
+    ref,
   } = mergeReactDefaultProps(props, defaultProps);
   // 当点击触发元素或窗体时，禁止触发 blur
   const skipBlurRef = useRef(false);
@@ -157,6 +155,6 @@ export const InputPopover = React.forwardRef<
     if (disabled || !opened) return;
     skipBlurRef.current = true;
   }
-});
+};
 
 InputPopover.displayName = 'InputPopover';
diff --git a/packages/components/src/input-popover/components/TabTrigger.tsx b/packages/components/src/input-popover/components/TabTrigger.tsx
index e6a473dc..d3be78dd 100644
--- a/packages/components/src/input-popover/components/TabTrigger.tsx
+++ b/packages/components/src/input-popover/components/TabTrigger.tsx
@@ -12,25 +12,23 @@ interface Props {
 
 const cls = getComponentClass('input-popover-tab-trigger');
 
-export const TabTrigger = React.forwardRef<HTMLInputElement, Props>(
-  (props, ref) => {
-    const { disabled, onFocus, opened, onOpen, onBlur } = props;
+export const TabTrigger: React.FC<Props> = (props) => {
+  const { disabled, onFocus, opened, onOpen, onBlur, ref } = props;
 
-    return (
-      <input
-        tabIndex={opened || disabled ? -1 : 0}
-        onKeyDown={_onKeyDown}
-        onFocus={onFocus}
-        className={cls}
-        onBlur={onBlur}
-        ref={ref}
-      />
-    );
+  return (
+    <input
+      tabIndex={opened || disabled ? -1 : 0}
+      onKeyDown={_onKeyDown}
+      onFocus={onFocus}
+      className={cls}
+      onBlur={onBlur}
+      ref={ref}
+    />
+  );
 
-    function _onKeyDown(e: React.KeyboardEvent) {
-      if (opened || e.code !== 'Enter') return;
-      onOpen();
-      e.stopPropagation();
-    }
-  },
-);
+  function _onKeyDown(e: React.KeyboardEvent) {
+    if (opened || e.code !== 'Enter') return;
+    onOpen();
+    e.stopPropagation();
+  }
+};
diff --git a/packages/components/src/input/Input.tsx b/packages/components/src/input/Input.tsx
index 2c5e5f1d..24486920 100644
--- a/packages/components/src/input/Input.tsx
+++ b/packages/components/src/input/Input.tsx
@@ -24,149 +24,147 @@ const defaultProps = {
   rows: 3,
 } satisfies Partial<InputProps>;
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (props, ref) => {
-    const locale = useLocale('input', EnUS);
-    const {
-      placeholder = locale.placeholder,
-      showPasswordOn,
-      rootAttrs = {},
-      attrs = {},
-      clearable,
-      showCount,
-      maxLength,
-      countView,
-      disabled,
-      autoSize,
-      onChange,
-      loading,
-      rootRef,
-      prefix,
-      suffix,
-      status,
-      value,
-      count,
-      type,
-      size,
-      rows,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const forceUpdate = useForceUpdate();
-    const valueRef = useRef(value || '');
-    const containerRef = useForwardRef(rootRef);
-    const [innerType, setInnerType] = useState(type);
+export const Input: React.FC<InputProps> = (props) => {
+  const locale = useLocale('input', EnUS);
+  const {
+    placeholder = locale.placeholder,
+    showPasswordOn,
+    rootAttrs = {},
+    attrs = {},
+    clearable,
+    showCount,
+    maxLength,
+    countView,
+    disabled,
+    autoSize,
+    onChange,
+    loading,
+    rootRef,
+    prefix,
+    suffix,
+    status,
+    value,
+    count,
+    type,
+    size,
+    rows,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const forceUpdate = useForceUpdate();
+  const valueRef = useRef(value || '');
+  const containerRef = useForwardRef(rootRef);
+  const [innerType, setInnerType] = useState(type);
 
-    useWatch(value, (v) => {
-      valueRef.current = v || '';
-    });
-    useWatch(type, (v) => {
-      setInnerType(v);
-    });
+  useWatch(value, (v) => {
+    valueRef.current = v || '';
+  });
+  useWatch(type, (v) => {
+    setInnerType(v);
+  });
 
-    const [focus, setFocus] = useState(false);
+  const [focus, setFocus] = useState(false);
 
-    const Count = showCount && (
-      <div className={cls.__.count}>{getCountView()}</div>
-    );
+  const Count = showCount && (
+    <div className={cls.__.count}>{getCountView()}</div>
+  );
 
-    return (
-      <InputSkin
-        attrs={{
-          ...rootAttrs,
-          className: getClassNames(cls.root, rootAttrs.className, {
-            [cls['--'].textarea]: type === 'textarea',
-            [cls['--'].textarea]: type === 'textarea',
-            [cls['--'].clearable]: clearable,
-            [cls['--'].autosize]: autoSize,
-            [cls['--'].loading]: loading,
-          }),
-        }}
+  return (
+    <InputSkin
+      attrs={{
+        ...rootAttrs,
+        className: getClassNames(cls.root, rootAttrs.className, {
+          [cls['--'].textarea]: type === 'textarea',
+          [cls['--'].textarea]: type === 'textarea',
+          [cls['--'].clearable]: clearable,
+          [cls['--'].autosize]: autoSize,
+          [cls['--'].loading]: loading,
+        }),
+      }}
+      disabled={disabled}
+      ref={containerRef}
+      status={status}
+      active={focus}
+      size={size}
+    >
+      {prefix && <div className={cls.__.prefix}>{prefix}</div>}
+      <InputSwitch
+        placeholder={placeholder || attrs.placeholder}
+        onResize={onInputResize}
+        value={valueRef.current}
+        onChange={_onChange}
         disabled={disabled}
-        ref={containerRef}
-        status={status}
-        active={focus}
-        size={size}
-      >
-        {prefix && <div className={cls.__.prefix}>{prefix}</div>}
-        <InputSwitch
-          placeholder={placeholder || attrs.placeholder}
-          onResize={onInputResize}
-          value={valueRef.current}
-          onChange={_onChange}
-          disabled={disabled}
-          autoSize={autoSize}
-          onFocus={_onFocus}
-          type={innerType}
-          onBlur={_onBlur}
-          attrs={attrs}
-          rows={rows}
-          ref={ref}
-        />
-        <InputSuffix
-          showPasswordOn={showPasswordOn}
-          setInnerType={setInnerType}
-          value={valueRef.current}
-          clearable={clearable}
-          showCount={showCount}
-          innerType={innerType}
-          onClear={_onClear}
-          loading={loading}
-          suffix={suffix}
-          countEl={Count}
-          type={type}
-        />
-      </InputSkin>
-    );
+        autoSize={autoSize}
+        onFocus={_onFocus}
+        type={innerType}
+        onBlur={_onBlur}
+        attrs={attrs}
+        rows={rows}
+        ref={ref}
+      />
+      <InputSuffix
+        showPasswordOn={showPasswordOn}
+        setInnerType={setInnerType}
+        value={valueRef.current}
+        clearable={clearable}
+        showCount={showCount}
+        innerType={innerType}
+        onClear={_onClear}
+        loading={loading}
+        suffix={suffix}
+        countEl={Count}
+        type={type}
+      />
+    </InputSkin>
+  );
 
-    function getCountView() {
-      const wordCount = getWordCount(valueRef.current);
-      if (countView) return countView(valueRef.current, wordCount);
-      if (!maxLength) return <span>{wordCount}</span>;
-      return (
-        <span>
-          {wordCount} / {maxLength}
-        </span>
-      );
-    }
-    function getWordCount(value: string) {
-      if (count) return count(value);
-      return value.length;
-    }
-    function onInputResize(size: {
-      height: number;
-      max?: number;
-      min: number;
-    }): void {
-      const el = containerRef.current;
-      if (!el) return;
+  function getCountView() {
+    const wordCount = getWordCount(valueRef.current);
+    if (countView) return countView(valueRef.current, wordCount);
+    if (!maxLength) return <span>{wordCount}</span>;
+    return (
+      <span>
+        {wordCount} / {maxLength}
+      </span>
+    );
+  }
+  function getWordCount(value: string) {
+    if (count) return count(value);
+    return value.length;
+  }
+  function onInputResize(size: {
+    height: number;
+    max?: number;
+    min: number;
+  }): void {
+    const el = containerRef.current;
+    if (!el) return;
 
-      const style = getComputedStyle(el);
-      const padding =
-        parseInt(style.paddingTop) + parseInt(style.paddingBottom);
+    const style = getComputedStyle(el);
+    const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom);
 
-      el.style.height = padding + size.height + 'px';
-      el.style.minHeight = padding + size.min + 'px';
-      if (!size.max) return;
-      el.style.maxHeight = padding + size.max + 'px';
-    }
-    function _onClear(): void {
-      const value = '';
-      valueRef.current = value;
-      onChange?.(value);
-      forceUpdate();
-    }
-    function _onChange(value: string): void {
-      if (maxLength && getWordCount(value) > maxLength) return;
-      valueRef.current = value;
-      onChange?.(value);
-      forceUpdate();
-    }
-    function _onFocus(): void {
-      setFocus(true);
-    }
-    function _onBlur(): void {
-      setFocus(false);
-    }
-  },
-);
+    el.style.height = padding + size.height + 'px';
+    el.style.minHeight = padding + size.min + 'px';
+    if (!size.max) return;
+    el.style.maxHeight = padding + size.max + 'px';
+  }
+  function _onClear(): void {
+    const value = '';
+    valueRef.current = value;
+    onChange?.(value);
+    forceUpdate();
+  }
+  function _onChange(value: string): void {
+    if (maxLength && getWordCount(value) > maxLength) return;
+    valueRef.current = value;
+    onChange?.(value);
+    forceUpdate();
+  }
+  function _onFocus(): void {
+    setFocus(true);
+  }
+  function _onBlur(): void {
+    setFocus(false);
+  }
+};
 
 Input.displayName = 'Input';
diff --git a/packages/components/src/input/components/input.Input.tsx b/packages/components/src/input/components/input.Input.tsx
index 315f7832..aed34283 100644
--- a/packages/components/src/input/components/input.Input.tsx
+++ b/packages/components/src/input/components/input.Input.tsx
@@ -5,41 +5,46 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   ref: React.Ref<HTMLInputElement>;
 }
 
-export const InputInput = React.forwardRef<HTMLInputElement, Props>(
-  ({ onFocus, onBlur, value, type, ...rest }, ref) => {
-    const inputRef = useForwardRef(ref);
-    const forceUpdate = useForceUpdate();
-    const nextEffect = useNextEffect();
+export const InputInput: React.FC<Props> = ({
+  onFocus,
+  onBlur,
+  value,
+  type,
+  ref,
+  ...rest
+}) => {
+  const inputRef = useForwardRef(ref);
+  const forceUpdate = useForceUpdate();
+  const nextEffect = useNextEffect();
 
-    useEffect(() => {
-      removeValueAttr();
-    }, [value, type]);
+  useEffect(() => {
+    removeValueAttr();
+  }, [value, type]);
 
-    return (
-      <input
-        {...rest}
-        onFocus={_onFocus}
-        onBlur={_onBlur}
-        ref={inputRef}
-        value={value}
-        type={type}
-      />
-    );
+  return (
+    <input
+      {...rest}
+      onFocus={_onFocus}
+      onBlur={_onBlur}
+      ref={inputRef}
+      value={value}
+      type={type}
+    />
+  );
 
-    function _onFocus(e: React.FocusEvent<HTMLInputElement>): void {
-      onFocus?.(e);
-      removeValueAttr();
-    }
-    function _onBlur(e: React.FocusEvent<HTMLInputElement>): void {
-      onBlur?.(e);
-      removeValueAttr();
-    }
-    function removeValueAttr(): void {
-      if (type !== 'password') return;
-      const input = inputRef.current;
-      if (!input) return;
-      nextEffect(() => input.removeAttribute('value'));
-      forceUpdate();
-    }
-  },
-);
+  function _onFocus(e: React.FocusEvent<HTMLInputElement>): void {
+    onFocus?.(e);
+    removeValueAttr();
+  }
+  function _onBlur(e: React.FocusEvent<HTMLInputElement>): void {
+    onBlur?.(e);
+    removeValueAttr();
+  }
+  function removeValueAttr(): void {
+    if (type !== 'password') return;
+    const input = inputRef.current;
+    if (!input) return;
+    nextEffect(() => input.removeAttribute('value'));
+    forceUpdate();
+  }
+};
diff --git a/packages/components/src/input/components/input.Skin.tsx b/packages/components/src/input/components/input.Skin.tsx
index 003e2670..f211de74 100644
--- a/packages/components/src/input/components/input.Skin.tsx
+++ b/packages/components/src/input/components/input.Skin.tsx
@@ -11,42 +11,45 @@ export interface InputSkinProps extends PropsBase<HTMLLabelElement> {
 
 const cls = getClasses('input-skin', [], ['active', 'disabled']);
 
-export const InputSkin = React.forwardRef<HTMLLabelElement, InputSkinProps>(
-  (
-    { size = 'medium', attrs = {}, disabled, children, active, status },
-    ref,
-  ) => {
-    const className = getClassNames(
-      cls.root,
-      attrs.className,
-      getSizeClassName(size),
-      {
-        [`${cls.root}--${status}`]: status !== undefined,
-        [cls['--'].disabled]: disabled,
-        [cls['--'].active]: active,
-      },
-    );
-    return (
-      <label
-        {...attrs}
-        onClickCapture={handleClick}
-        className={className}
-        ref={ref}
-      >
-        {children}
-      </label>
-    );
+export const InputSkin: React.FC<InputSkinProps> = ({
+  size = 'medium',
+  attrs = {},
+  disabled,
+  children,
+  active,
+  status,
+  ref,
+}) => {
+  const className = getClassNames(
+    cls.root,
+    attrs.className,
+    getSizeClassName(size),
+    {
+      [`${cls.root}--${status}`]: status !== undefined,
+      [cls['--'].disabled]: disabled,
+      [cls['--'].active]: active,
+    },
+  );
+  return (
+    <label
+      {...attrs}
+      onClickCapture={handleClick}
+      className={className}
+      ref={ref}
+    >
+      {children}
+    </label>
+  );
 
-    function handleClick(e: React.PointerEvent<HTMLLabelElement>): void {
-      // label 包含 input 时，点击 label 会再次触发 input 的点击事件，导致二次点击
-      // 对所有的其他UIEvent 对象，UIEvent.detail 总是零。
-      // https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent/detail
-      // react 测试环境中 detail 是反过来的
-      if (isTestEnv() ? e.detail !== 0 : e.detail === 0) e.stopPropagation();
-      attrs.onClickCapture?.(e);
-    }
-    function isTestEnv(): boolean {
-      return process.env.NODE_ENV === 'test';
-    }
-  },
-);
+  function handleClick(e: React.PointerEvent<HTMLLabelElement>): void {
+    // label 包含 input 时，点击 label 会再次触发 input 的点击事件，导致二次点击
+    // 对所有的其他UIEvent 对象，UIEvent.detail 总是零。
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent/detail
+    // react 测试环境中 detail 是反过来的
+    if (isTestEnv() ? e.detail !== 0 : e.detail === 0) e.stopPropagation();
+    attrs.onClickCapture?.(e);
+  }
+  function isTestEnv(): boolean {
+    return process.env.NODE_ENV === 'test';
+  }
+};
diff --git a/packages/components/src/input/components/input.Switch.tsx b/packages/components/src/input/components/input.Switch.tsx
index 3b7ca22f..ece2f9d7 100644
--- a/packages/components/src/input/components/input.Switch.tsx
+++ b/packages/components/src/input/components/input.Switch.tsx
@@ -19,79 +19,78 @@ interface Props
     >
   > {
   onResize: (size: { height: number; max?: number; min: number }) => void;
-  ref: React.Ref<HTMLElement>;
+  ref?: React.Ref<HTMLElement>;
   onFocus: () => void;
   onBlur: () => void;
 }
 
-export const InputSwitch = React.forwardRef<HTMLElement, Props>(
-  (props, ref) => {
-    const { attrs = {} } = props;
-    const {
-      placeholder = attrs.placeholder,
-      disabled = attrs.disabled,
-      autoSize,
-      onChange,
-      onResize,
-      onFocus,
-      onBlur,
-      value,
-      type,
-      rows,
-    } = props;
-    if (type === 'textarea')
-      return (
-        <InputTextarea
-          {...(attrs as any)}
-          ref={ref as React.RefObject<HTMLTextAreaElement>}
-          placeholder={placeholder}
-          onInputResize={onResize}
-          onChange={_onChange}
-          disabled={disabled}
-          autoSize={autoSize}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          value={value}
-          rows={rows}
-        />
-      );
+export const InputSwitch: React.FC<Props> = (props) => {
+  const { attrs = {} } = props;
+  const {
+    placeholder = attrs.placeholder,
+    disabled = attrs.disabled,
+    autoSize,
+    onChange,
+    onResize,
+    onFocus,
+    onBlur,
+    value,
+    type,
+    rows,
+    ref,
+  } = props;
+  if (type === 'textarea')
     return (
-      <InputInput
-        {...attrs}
-        ref={ref as React.RefObject<HTMLInputElement>}
-        type={type || attrs.type || 'text'}
+      <InputTextarea
+        {...(attrs as any)}
+        ref={ref as React.RefObject<HTMLTextAreaElement>}
         placeholder={placeholder}
+        onInputResize={onResize}
         onChange={_onChange}
         disabled={disabled}
+        autoSize={autoSize}
         onFocus={_onFocus}
         onBlur={_onBlur}
         value={value}
+        rows={rows}
       />
     );
+  return (
+    <InputInput
+      {...attrs}
+      ref={ref as React.RefObject<HTMLInputElement>}
+      type={type || attrs.type || 'text'}
+      placeholder={placeholder}
+      onChange={_onChange}
+      disabled={disabled}
+      onFocus={_onFocus}
+      onBlur={_onBlur}
+      value={value}
+    />
+  );
 
-    function _onChange(
-      e:
-        | React.ChangeEvent<HTMLTextAreaElement>
-        | React.ChangeEvent<HTMLInputElement>,
-    ): void {
-      const value = e.target.value;
-      onChange!(value);
-    }
-    function _onFocus(
-      e:
-        | React.FocusEvent<HTMLTextAreaElement>
-        | React.FocusEvent<HTMLInputElement>,
-    ): void {
-      attrs.onFocus?.(e as any);
-      onFocus();
-    }
-    function _onBlur(
-      e:
-        | React.FocusEvent<HTMLTextAreaElement>
-        | React.FocusEvent<HTMLInputElement>,
-    ): void {
-      attrs.onBlur?.(e as any);
-      onBlur();
-    }
-  },
-);
+  function _onChange(
+    e:
+      | React.ChangeEvent<HTMLTextAreaElement>
+      | React.ChangeEvent<HTMLInputElement>,
+  ): void {
+    const value = e.target.value;
+    onChange!(value);
+  }
+  function _onFocus(
+    e:
+      | React.FocusEvent<HTMLTextAreaElement>
+      | React.FocusEvent<HTMLInputElement>,
+  ): void {
+    attrs.onFocus?.(e as any);
+    onFocus();
+  }
+  function _onBlur(
+    e:
+      | React.FocusEvent<HTMLTextAreaElement>
+      | React.FocusEvent<HTMLInputElement>,
+  ): void {
+    attrs.onBlur?.(e as any);
+    onBlur();
+  }
+};
diff --git a/packages/components/src/input/components/input.Textarea.tsx b/packages/components/src/input/components/input.Textarea.tsx
index bf83276d..72beb054 100644
--- a/packages/components/src/input/components/input.Textarea.tsx
+++ b/packages/components/src/input/components/input.Textarea.tsx
@@ -11,63 +11,66 @@ interface Props
   ref: React.Ref<HTMLTextAreaElement>;
 }
 
-export const InputTextarea = React.forwardRef<HTMLTextAreaElement, Props>(
-  ({ onInputResize, autoSize, value, rows, ...rest }, ref) => {
-    const auto = {
-      // maxRows: Number.MAX_SAFE_INTEGER,
-      minRows: Math.max(1, rows || 0),
-      ...(!autoSize || isBoolean(autoSize) ? {} : autoSize),
-    };
+export const InputTextarea: React.FC<Props> = ({
+  onInputResize,
+  autoSize,
+  value,
+  rows,
+  ref,
+  ...rest
+}) => {
+  const auto = {
+    // maxRows: Number.MAX_SAFE_INTEGER,
+    minRows: Math.max(1, rows || 0),
+    ...(!autoSize || isBoolean(autoSize) ? {} : autoSize),
+  };
 
-    const inputRef = useForwardRef(ref);
-    const isInitRef = useRef(true);
+  const inputRef = useForwardRef(ref);
+  const isInitRef = useRef(true);
 
-    useEffect(() => {
-      if (!autoSize) return;
-      if (isInitRef.current) {
-        isInitRef.current = false;
-        setTimeout(() => emitResize());
-        return;
-      }
-      emitResize();
-    }, [value, autoSize]);
+  useEffect(() => {
+    if (!autoSize) return;
+    if (isInitRef.current) {
+      isInitRef.current = false;
+      setTimeout(() => emitResize());
+      return;
+    }
+    emitResize();
+  }, [value, autoSize]);
 
-    return (
-      <textarea {...rest} ref={inputRef} value={value} rows={rows}></textarea>
-    );
+  return (
+    <textarea {...rest} ref={inputRef} value={value} rows={rows}></textarea>
+  );
 
-    function emitResize(): void {
-      const el = inputRef.current;
-      if (!el) return;
+  function emitResize(): void {
+    const el = inputRef.current;
+    if (!el) return;
 
-      memoHeightDecor(el, () => onInputResize(calcSize(el)));
+    memoHeightDecor(el, () => onInputResize(calcSize(el)));
 
-      function calcSize(el: HTMLElement): Parameters<typeof onInputResize>[0] {
-        const style = getComputedStyle(el);
-        const lineHeight = parseInt(style.lineHeight);
+    function calcSize(el: HTMLElement): Parameters<typeof onInputResize>[0] {
+      const style = getComputedStyle(el);
+      const lineHeight = parseInt(style.lineHeight);
 
-        const max =
-          auto.maxRows === undefined ? undefined : auto.maxRows * lineHeight;
-        const min = auto.minRows * lineHeight;
-        const scrollHeight = el.scrollHeight || min;
-        const height =
-          Math.min(
-            Math.max(min, scrollHeight),
-            max || Number.MAX_SAFE_INTEGER,
-          ) + 2;
+      const max =
+        auto.maxRows === undefined ? undefined : auto.maxRows * lineHeight;
+      const min = auto.minRows * lineHeight;
+      const scrollHeight = el.scrollHeight || min;
+      const height =
+        Math.min(Math.max(min, scrollHeight), max || Number.MAX_SAFE_INTEGER) +
+        2;
 
-        return { height, max, min };
-      }
-      function memoHeightDecor(el: HTMLElement, cb: () => void): void {
-        const memoHeight = el.style.height;
-        el.style.height = 'auto';
-        void el.offsetHeight;
+      return { height, max, min };
+    }
+    function memoHeightDecor(el: HTMLElement, cb: () => void): void {
+      const memoHeight = el.style.height;
+      el.style.height = 'auto';
+      void el.offsetHeight;
 
-        cb();
+      cb();
 
-        el.style.height = memoHeight;
-        void el.offsetHeight;
-      }
+      el.style.height = memoHeight;
+      void el.offsetHeight;
     }
-  },
-);
+  }
+};
diff --git a/packages/components/src/layouts/Layout.tsx b/packages/components/src/layouts/Layout.tsx
index 4d0bb996..885e907c 100644
--- a/packages/components/src/layouts/Layout.tsx
+++ b/packages/components/src/layouts/Layout.tsx
@@ -6,56 +6,47 @@ import { useElement } from './useElement';
 import React from 'react';
 
 const rootClass = getComponentClass('layout');
-export const Layout = React.forwardRef<HTMLElement, LayoutProps>(
-  (props, ref) => {
-    const {
-      tag = 'section',
-      attrs = {},
-      className,
-      vertical,
-      children,
-      style,
-    } = props as RequiredPart<LayoutProps, 'tag'>;
-    return React.createElement(tag, {
-      ...attrs,
-      className: getClassNames(rootClass, className, attrs.className, {
-        [`${rootClass}--v`]: vertical,
-      }),
-      style: { ...attrs.style, ...style },
-      children,
-      ref,
-    });
-  },
-);
+export const Layout: React.FC<LayoutProps> = (props) => {
+  const {
+    tag = 'section',
+    attrs = {},
+    className,
+    vertical,
+    children,
+    style,
+    ref,
+  } = props as RequiredPart<LayoutProps, 'tag'>;
+  return React.createElement(tag, {
+    ...attrs,
+    className: getClassNames(rootClass, className, attrs.className, {
+      [`${rootClass}--v`]: vertical,
+    }),
+    style: { ...attrs.style, ...style },
+    children,
+    ref,
+  });
+};
 
 // main
 const mainRootClass = getComponentClass('main');
-export const Main = React.forwardRef<HTMLElement, BaseLayoutsProps>(
-  (props, ref) => {
-    return useElement({ tag: 'main', ...props }, ref, mainRootClass);
-  },
-);
+export const Main: React.FC<BaseLayoutsProps> = (props) => {
+  return useElement({ tag: 'main', ...props }, props.ref, mainRootClass);
+};
 
 // aside
 const asideRootClass = getComponentClass('aside');
-export const Aside = React.forwardRef<HTMLElement, BaseLayoutsProps>(
-  (props, ref) => {
-    return useElement({ tag: 'aside', ...props }, ref, asideRootClass);
-  },
-);
+export const Aside: React.FC<BaseLayoutsProps> = (props) => {
+  return useElement({ tag: 'aside', ...props }, props.ref, asideRootClass);
+};
 
 // header
 const headerRootClass = getComponentClass('header');
-export const Header = React.forwardRef<HTMLElement, BaseLayoutsProps>(
-  (props, ref) => {
-    return useElement({ tag: 'header', ...props }, ref, headerRootClass);
-  },
-);
+export const Header: React.FC<BaseLayoutsProps> = (props) => {
+  return useElement({ tag: 'header', ...props }, props.ref, headerRootClass);
+};
 
 // footer
 const footerRootClass = getComponentClass('footer');
-export const Footer = React.forwardRef<HTMLElement, BaseLayoutsProps>(
-  (props, ref) => {
-    return useElement({ tag: 'footer', ...props }, ref, footerRootClass);
-  },
-);
+export const Footer: React.FC<BaseLayoutsProps> = (props) => {
+  return useElement({ tag: 'footer', ...props }, props.ref, footerRootClass);
+};
diff --git a/packages/components/src/message/Message.tsx b/packages/components/src/message/Message.tsx
index 1235c8ee..0e83f98e 100644
--- a/packages/components/src/message/Message.tsx
+++ b/packages/components/src/message/Message.tsx
@@ -30,68 +30,67 @@ const defaultProps = {
   duration: 3000,
 } satisfies Partial<MessageProps>;
 
-export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
-  (props, ref) => {
-    const {
-      attrs = {},
-      hoverKeep,
-      showClose,
-      children,
-      duration,
-      onLeave,
-      type,
-      icon,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const [time, stop] = useTimeDown(duration);
-    const rootRef = useForwardRef(ref);
+export const Message: React.FC<MessageProps> = (props) => {
+  const {
+    attrs = {},
+    hoverKeep,
+    showClose,
+    children,
+    duration,
+    onLeave,
+    type,
+    icon,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const [time, stop] = useTimeDown(duration);
+  const rootRef = useForwardRef(ref);
 
-    const isTimeoutRef = useRef(false);
+  const isTimeoutRef = useRef(false);
 
-    useEffect(() => {
-      if (isTimeoutRef.current) return;
-      if (duration > 0 && time <= 0) {
-        onLeave?.();
-        isTimeoutRef.current = true;
-      }
-    }, [time, onLeave]);
+  useEffect(() => {
+    if (isTimeoutRef.current) return;
+    if (duration > 0 && time <= 0) {
+      onLeave?.();
+      isTimeoutRef.current = true;
+    }
+  }, [time, onLeave]);
 
-    const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = (e) => {
-      attrs.onMouseEnter?.(e);
-      stop(true);
-    };
-    const onMouseLeave: React.MouseEventHandler<HTMLDivElement> = (e) => {
-      attrs.onMouseLeave?.(e);
-      stop(false);
-    };
+  const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    attrs.onMouseEnter?.(e);
+    stop(true);
+  };
+  const onMouseLeave: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    attrs.onMouseLeave?.(e);
+    stop(false);
+  };
 
-    const DefaultIcon = icons[type];
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(
-          rootClass,
-          attrs.className,
-          `${rootClass}--${type}`,
-        )}
-        onMouseEnter={hoverKeep ? onMouseEnter : undefined}
-        onMouseLeave={hoverKeep ? onMouseLeave : undefined}
-        ref={rootRef}
-      >
-        <div className={rootClass + '__icon-wrapper'}>
-          {
-            // 有自定义icon显示自定义icon，未传则显示默认icon，为null则不显示icon
-            icon !== null && <Icon>{icon || <DefaultIcon />}</Icon>
-          }
-        </div>
-        {children}
-        {showClose && (
-          <Button onClick={onLeave} size="small" plain="text">
-            <Icon size="0.8em">
-              <Close />
-            </Icon>
-          </Button>
-        )}
+  const DefaultIcon = icons[type];
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(
+        rootClass,
+        attrs.className,
+        `${rootClass}--${type}`,
+      )}
+      onMouseEnter={hoverKeep ? onMouseEnter : undefined}
+      onMouseLeave={hoverKeep ? onMouseLeave : undefined}
+      ref={rootRef}
+    >
+      <div className={rootClass + '__icon-wrapper'}>
+        {
+          // 有自定义icon显示自定义icon，未传则显示默认icon，为null则不显示icon
+          icon !== null && <Icon>{icon || <DefaultIcon />}</Icon>
+        }
       </div>
-    );
-  },
-);
+      {children}
+      {showClose && (
+        <Button onClick={onLeave} size="small" plain="text">
+          <Icon size="0.8em">
+            <Close />
+          </Icon>
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/packages/components/src/message/MessageQueue.tsx b/packages/components/src/message/MessageQueue.tsx
index e7e7a1c6..4527c704 100644
--- a/packages/components/src/message/MessageQueue.tsx
+++ b/packages/components/src/message/MessageQueue.tsx
@@ -4,11 +4,7 @@ import {
   TRANSITION_STATUS,
   Transition,
 } from '../transition';
-import type {
-  MessagePushOptions,
-  MessageQueueProps,
-  MessageQueueRef,
-} from './message.types';
+import type { MessagePushOptions, MessageQueueProps } from './message.types';
 import React, { useImperativeHandle, useCallback, useRef } from 'react';
 import { getComponentClass, useForceUpdate } from '@pkg/shared';
 import { TransitionGroup } from '../transition-group';
@@ -18,11 +14,8 @@ import LeaveQueue from './LeaveQueue';
 import { Message } from './Message';
 
 const rootClass = getComponentClass('message-queue');
-export const MessageQueue = React.forwardRef<
-  MessageQueueRef,
-  MessageQueueProps
->((props, ref) => {
-  const { attrs = {} } = props;
+export const MessageQueue: React.FC<MessageQueueProps> = (props) => {
+  const { attrs = {}, ref } = props;
   const forceUpdate = useForceUpdate();
 
   type MsgItem = MessagePushOptions & { key: number };
@@ -82,6 +75,6 @@ export const MessageQueue = React.forwardRef<
     </TransitionGroup>,
     document.body,
   );
-});
+};
 
 MessageQueue.displayName = 'MessageQueue';
diff --git a/packages/components/src/number-transition/NumberTransition.tsx b/packages/components/src/number-transition/NumberTransition.tsx
index 53816316..2e94412b 100644
--- a/packages/components/src/number-transition/NumberTransition.tsx
+++ b/packages/components/src/number-transition/NumberTransition.tsx
@@ -18,10 +18,7 @@ const defaultProps = {
   to: 10,
 } satisfies Partial<NumberTransitionProps>;
 
-export const NumberTransition = React.forwardRef<
-  HTMLDivElement,
-  NumberTransitionProps
->((props, ref) => {
+export const NumberTransition: React.FC<NumberTransitionProps> = (props) => {
   const {
     timingFunction,
     resetSignal,
@@ -32,10 +29,11 @@ export const NumberTransition = React.forwardRef<
     format,
     attrs,
     from,
+    ref,
     to,
   } = mergeReactDefaultProps(props, defaultProps);
   const valueRef = useRef<number | string>(from);
-  const cancelerRef = useRef<() => void>();
+  const cancelerRef = useRef<() => void>(undefined);
   const durationRef = useRef(duration);
   const signalRef = useRef(resetSignal);
   const forceUpdate = useForceUpdate();
@@ -95,6 +93,6 @@ export const NumberTransition = React.forwardRef<
       {format(valueRef.current)}
     </div>
   );
-});
+};
 
 NumberTransition.displayName = 'NumberTransition';
diff --git a/packages/components/src/option/Option.tsx b/packages/components/src/option/Option.tsx
index 4b058432..8f0ea7d5 100644
--- a/packages/components/src/option/Option.tsx
+++ b/packages/components/src/option/Option.tsx
@@ -16,42 +16,40 @@ const defaultProps = {
 
 const rootName = getComponentClass('option');
 
-export const Option = React.forwardRef<HTMLElement, OptionProps>(
-  (props, ref) => {
-    const { children, readonly, disabled, extra, icon, size, tag } =
-      mergeReactDefaultProps(props, defaultProps);
+export const Option: React.FC<OptionProps> = (props) => {
+  const { children, readonly, disabled, extra, icon, size, tag, ref } =
+    mergeReactDefaultProps(props, defaultProps);
 
-    const attrs = {
-      ...defaultProps.attrs,
-      ...props.attrs,
-    } as OptionProps['attrs'];
+  const attrs = {
+    ...defaultProps.attrs,
+    ...props.attrs,
+  } as OptionProps['attrs'];
 
-    const Child = (
-      <>
-        {icon && <Icon className={`${rootName}__icon`}>{icon}</Icon>}
-        <div className={`${rootName}__label`}>{children}</div>
-        {extra && <div className={`${rootName}__extra`}>{extra}</div>}
-      </>
-    );
+  const Child = (
+    <>
+      {icon && <Icon className={`${rootName}__icon`}>{icon}</Icon>}
+      <div className={`${rootName}__label`}>{children}</div>
+      {extra && <div className={`${rootName}__extra`}>{extra}</div>}
+    </>
+  );
 
-    return React.createElement(
-      tag,
-      {
-        ...attrs,
-        className: getClassNames(
-          rootName,
-          attrs?.className,
-          getSizeClassName(size),
-          {
-            [`${rootName}--readonly`]: readonly,
-          },
-        ),
-        disabled,
-        ref,
-      },
-      Child,
-    );
-  },
-);
+  return React.createElement(
+    tag,
+    {
+      ...attrs,
+      className: getClassNames(
+        rootName,
+        attrs?.className,
+        getSizeClassName(size),
+        {
+          [`${rootName}--readonly`]: readonly,
+        },
+      ),
+      disabled,
+      ref,
+    },
+    Child,
+  );
+};
 
 Option.displayName = 'Option';
diff --git a/packages/components/src/picker/Picker.tsx b/packages/components/src/picker/Picker.tsx
index 30ab5859..6992935f 100644
--- a/packages/components/src/picker/Picker.tsx
+++ b/packages/components/src/picker/Picker.tsx
@@ -10,52 +10,51 @@ const defaultProps = {
   format: (v) => v.join(','),
 } satisfies Partial<PickerProps>;
 
-export const _Picker = React.forwardRef<HTMLDivElement, PickerProps>(
-  (props, ref) => {
-    const {
-      inputPopoverProps = {},
-      evenlyDivided,
-      options = [],
-      panelAttrs,
-      attrs = {},
-      onChange,
-      format,
-      value,
-    } = mergeReactDefaultProps(props, defaultProps);
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className)}
-        ref={ref}
-      >
-        <InputPopover
-          {...inputPopoverProps}
-          popoverProps={{
-            ...inputPopoverProps.popoverProps,
-            content: (
-              <PickerPanel
-                evenlyDivided={evenlyDivided}
-                onChange={onChange}
-                attrs={panelAttrs}
-                options={options}
-                value={value}
-              />
+export const _Picker: React.FC<PickerProps> = (props) => {
+  const {
+    inputPopoverProps = {},
+    evenlyDivided,
+    options = [],
+    panelAttrs,
+    attrs = {},
+    onChange,
+    format,
+    value,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className)}
+      ref={ref}
+    >
+      <InputPopover
+        {...inputPopoverProps}
+        popoverProps={{
+          ...inputPopoverProps.popoverProps,
+          content: (
+            <PickerPanel
+              evenlyDivided={evenlyDivided}
+              onChange={onChange}
+              attrs={panelAttrs}
+              options={options}
+              value={value}
+            />
+          ),
+          attrs: {
+            ...inputPopoverProps.popoverProps?.attrs,
+            className: getClassNames(
+              cls.__.pop,
+              inputPopoverProps.popoverProps?.attrs?.className,
             ),
-            attrs: {
-              ...inputPopoverProps.popoverProps?.attrs,
-              className: getClassNames(
-                cls.__.pop,
-                inputPopoverProps.popoverProps?.attrs?.className,
-              ),
-            },
-          }}
-        >
-          <span className={cls.__.label}>{format(value || [])}</span>
-        </InputPopover>
-      </div>
-    );
-  },
-);
+          },
+        }}
+      >
+        <span className={cls.__.label}>{format(value || [])}</span>
+      </InputPopover>
+    </div>
+  );
+};
 
 _Picker.displayName = 'Picker';
 
diff --git a/packages/components/src/picker/components/picker.Panel.tsx b/packages/components/src/picker/components/picker.Panel.tsx
index b1c9d51b..fddfec3e 100644
--- a/packages/components/src/picker/components/picker.Panel.tsx
+++ b/packages/components/src/picker/components/picker.Panel.tsx
@@ -6,56 +6,55 @@ import { PickerCol } from './picker.Col';
 
 const cls = getClasses('picker-panel', [], ['evenly-divided', 'auto-divided']);
 
-export const _PickerPanel = React.forwardRef<HTMLDivElement, PickerPanelProps>(
-  (props, ref) => {
-    const {
-      evenlyDivided = true,
-      options = [],
-      attrs = {},
-      onChange,
-      value,
-    } = props;
+export const _PickerPanel: React.FC<PickerPanelProps> = (props) => {
+  const {
+    evenlyDivided = true,
+    options = [],
+    attrs = {},
+    onChange,
+    value,
+    ref,
+  } = props;
 
-    const [values, setValues] = useFollowingState(value || []);
+  const [values, setValues] = useFollowingState(value || []);
 
-    // 触发 onchange
-    useEffect(() => {
-      if (values === value) return;
-      onChange?.(values);
-    }, [onChange, values]);
+  // 触发 onchange
+  useEffect(() => {
+    if (values === value) return;
+    onChange?.(values);
+  }, [onChange, values]);
 
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className, {
-          [cls['--']['evenly-divided']]: evenlyDivided,
-          [cls['--']['auto-divided']]: !evenlyDivided,
-        })}
-        ref={ref}
-      >
-        {options.map((opts, index) => (
-          <PickerCol
-            onPickOption={(opt) => setValue(opt.value, index)}
-            value={values[index]}
-            options={opts}
-            key={index}
-          />
-        ))}
-      </div>
-    );
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className, {
+        [cls['--']['evenly-divided']]: evenlyDivided,
+        [cls['--']['auto-divided']]: !evenlyDivided,
+      })}
+      ref={ref}
+    >
+      {options.map((opts, index) => (
+        <PickerCol
+          onPickOption={(opt) => setValue(opt.value, index)}
+          value={values[index]}
+          options={opts}
+          key={index}
+        />
+      ))}
+    </div>
+  );
 
-    function setValue(value: OptionValueType, index: number): void {
-      setValues((v) => {
-        const result: typeof v = [];
-        result[index] = value;
-        options.forEach((opt, i) => {
-          if (index === i) return;
-          result[i] = v[i] ?? opt[0]!.value;
-        });
-        return result;
+  function setValue(value: OptionValueType, index: number): void {
+    setValues((v) => {
+      const result: typeof v = [];
+      result[index] = value;
+      options.forEach((opt, i) => {
+        if (index === i) return;
+        result[i] = v[i] ?? opt[0]!.value;
       });
-    }
-  },
-);
+      return result;
+    });
+  }
+};
 
 export const PickerPanel = _PickerPanel as PickerPanelFC;
diff --git a/packages/components/src/popover/Popover.tsx b/packages/components/src/popover/Popover.tsx
index 98786b67..f46ed07a 100644
--- a/packages/components/src/popover/Popover.tsx
+++ b/packages/components/src/popover/Popover.tsx
@@ -34,140 +34,139 @@ export type PopoverRequiredPartProps = RequiredPart<
   keyof typeof defaultProps
 >;
 
-export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
-  (props, ref) => {
-    const {
+export const Popover: React.FC<PopoverProps> = (props) => {
+  const {
+    visibleControllerRef,
+    onVisibleChange,
+    widthByTrigger,
+    destroyOnHide,
+    leaveDelay,
+    attrs = {},
+    placement,
+    showArrow,
+    disabled,
+    children,
+    appendTo,
+    viewport,
+    visible,
+    trigger,
+    content,
+    offset,
+    delay,
+    name,
+    ref,
+    on,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const rootName = getComponentClass(name);
+
+  const [appendToTarget] = useAppendTo(appendTo, defaultProps.appendTo);
+
+  const childrenRef = useForwardRef((children.props as ChildrenProps).ref);
+  const balloonRef = useForwardRef(ref) as React.RefObject<HTMLDivElement>;
+
+  const [refreshPosition, resetPlacement, _placement] = usePosition(
+    childrenRef,
+    balloonRef,
+    {
+      widthByTrigger,
+      placement,
+      viewport,
+      appendTo,
+      offset,
+    },
+  );
+
+  const [show, enterBalloonSubject, leaveBalloonSubject] = useShowController(
+    childrenRef,
+    balloonRef,
+    refreshPosition,
+    // 下面👇的对象属性都是在 props 中取的，为什么不直接传 props ？
+    // 因为这样在上面的 props 解构中就可以直观的看出到底有哪些属性是没有用到的；传 props 是不直观的。
+    // 如果看到没有按照这条规则弄的，那就是漏掉了，以该条规则为准。
+    {
       visibleControllerRef,
       onVisibleChange,
-      widthByTrigger,
-      destroyOnHide,
       leaveDelay,
-      attrs = {},
-      placement,
-      showArrow,
       disabled,
-      children,
-      appendTo,
-      viewport,
       visible,
       trigger,
-      content,
-      offset,
       delay,
-      name,
-      on,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const rootName = getComponentClass(name);
-
-    const [appendToTarget] = useAppendTo(appendTo, defaultProps.appendTo);
+    },
+  );
 
-    const childrenRef = useForwardRef((children.props as ChildrenProps).ref);
-    const balloonRef = useForwardRef(ref) as React.RefObject<HTMLDivElement>;
+  useResizeObserver(show, balloonRef, refreshPosition);
+  useResizeObserver(show, childrenRef, refreshPosition);
+  useResizeEvent(show, refreshPosition);
 
-    const [refreshPosition, resetPlacement, _placement] = usePosition(
-      childrenRef,
-      balloonRef,
-      {
-        widthByTrigger,
-        placement,
-        viewport,
-        appendTo,
-        offset,
-      },
-    );
+  const Balloon = (
+    <WordBalloon
+      attrs={{
+        ...attrs,
+        onMouseEnter(e) {
+          attrs.onMouseEnter?.(e);
+          enterBalloonSubject.current.next();
+        },
+        onMouseLeave(e) {
+          attrs.onMouseLeave?.(e);
+          leaveBalloonSubject.current.next();
+        },
+        className: getClassNames(rootName, attrs.className),
+      }}
+      ref={balloonRef as React.Ref<HTMLDivElement>}
+      placement={_placement}
+      showArrow={showArrow}
+      key="ballon"
+    >
+      {content}
+    </WordBalloon>
+  );
+  const onTransitionChange = useMemo<TransitionCB>(() => {
+    const refreshRef = (el: HTMLElement) => {
+      balloonRef.current = el as HTMLDivElement;
+      refreshPosition();
+    };
+    const cb = transitionCBAdapter({
+      onAfterLeave: resetPlacement,
+      onBeforeEnter: refreshRef,
+      onIdle: refreshRef,
+    });
+    return (el, status, lifeCircle) => {
+      cb(el, status, lifeCircle);
+      on?.(el, status, lifeCircle);
+    };
+  }, [refreshPosition]);
 
-    const [show, enterBalloonSubject, leaveBalloonSubject] = useShowController(
-      childrenRef,
-      balloonRef,
-      refreshPosition,
-      // 下面👇的对象属性都是在 props 中取的，为什么不直接传 props ？
-      // 因为这样在上面的 props 解构中就可以直观的看出到底有哪些属性是没有用到的；传 props 是不直观的。
-      // 如果看到没有按照这条规则弄的，那就是漏掉了，以该条规则为准。
-      {
-        visibleControllerRef,
-        onVisibleChange,
-        leaveDelay,
-        disabled,
-        visible,
-        trigger,
-        delay,
-      },
-    );
+  const Trans = (
+    <Transition
+      appear={destroyOnHide ? undefined : null}
+      show={destroyOnHide ? undefined : show}
+      on={onTransitionChange}
+      name={rootName}
+    >
+      {destroyOnHide ? show && Balloon : Balloon}
+    </Transition>
+  );
 
-    useResizeObserver(show, balloonRef, refreshPosition);
-    useResizeObserver(show, childrenRef, refreshPosition);
-    useResizeEvent(show, refreshPosition);
+  const _props = {
+    key: children.key || rootName,
+    ref: childrenRef,
+  };
 
-    const Balloon = (
-      <WordBalloon
-        attrs={{
-          ...attrs,
-          onMouseEnter(e) {
-            attrs.onMouseEnter?.(e);
-            enterBalloonSubject.current.next();
-          },
-          onMouseLeave(e) {
-            attrs.onMouseLeave?.(e);
-            leaveBalloonSubject.current.next();
-          },
-          className: getClassNames(rootName, attrs.className),
-        }}
-        ref={balloonRef as React.Ref<HTMLDivElement>}
-        placement={_placement}
-        showArrow={showArrow}
-        key="ballon"
-      >
-        {content}
-      </WordBalloon>
-    );
-    const onTransitionChange = useMemo<TransitionCB>(() => {
-      const refreshRef = (el: HTMLElement) => {
-        balloonRef.current = el as HTMLDivElement;
-        refreshPosition();
-      };
-      const cb = transitionCBAdapter({
-        onAfterLeave: resetPlacement,
-        onBeforeEnter: refreshRef,
-        onIdle: refreshRef,
-      });
-      return (el, status, lifeCircle) => {
-        cb(el, status, lifeCircle);
-        on?.(el, status, lifeCircle);
-      };
-    }, [refreshPosition]);
-
-    const Trans = (
-      <Transition
-        appear={destroyOnHide ? undefined : null}
-        show={destroyOnHide ? undefined : show}
-        on={onTransitionChange}
-        name={rootName}
-      >
-        {destroyOnHide ? show && Balloon : Balloon}
-      </Transition>
+  if (appendToTarget === null) {
+    return React.cloneElement(
+      children,
+      _props,
+      (children.props as ChildrenProps).children,
+      Trans,
     );
+  }
 
-    const _props = {
-      key: children.key || rootName,
-      ref: childrenRef,
-    };
-
-    if (appendToTarget === null) {
-      return React.cloneElement(
-        children,
-        _props,
-        (children.props as ChildrenProps).children,
-        Trans,
-      );
-    }
-
-    return (
-      <>
-        {React.cloneElement(children, _props)}
-        {createPortal(Trans, appendToTarget)}
-      </>
-    );
-  },
-);
+  return (
+    <>
+      {React.cloneElement(children, _props)}
+      {createPortal(Trans, appendToTarget)}
+    </>
+  );
+};
 
 Popover.displayName = 'Popover';
diff --git a/packages/components/src/resizer/Resizer.tsx b/packages/components/src/resizer/Resizer.tsx
index 112630e4..2710f44d 100644
--- a/packages/components/src/resizer/Resizer.tsx
+++ b/packages/components/src/resizer/Resizer.tsx
@@ -17,72 +17,70 @@ const defaultProps = {
   min: 0,
 } satisfies Partial<ResizerProps>;
 
-export const Resizer = React.forwardRef<HTMLDivElement, ResizerProps>(
-  (props, _ref) => {
-    const {
-      attrs = {},
-      placement,
-      onResized,
-      min,
-      max,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const ref = useForwardRef(_ref);
-    useEffect(() => {
-      const el = ref.current;
-      if (!el) return;
-      const parent = el.parentElement;
-      if (!parent) return;
+export const Resizer: React.FC<ResizerProps> = (props) => {
+  const {
+    attrs = {},
+    placement,
+    onResized,
+    ref: _ref,
+    min,
+    max,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const ref = useForwardRef(_ref);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const parent = el.parentElement;
+    if (!parent) return;
 
-      return onDragEvent(
-        ({ onDown, onMove, onUp }) => {
-          let h = 0;
-          let w = 0;
+    return onDragEvent(
+      ({ onDown, onMove, onUp }) => {
+        let h = 0;
+        let w = 0;
 
-          onDown(() => ([w, h] = getElRealSize(parent)));
-          const safeValue = (value: number) =>
-            getSafeNum(value, min, max) + 'px';
+        onDown(() => ([w, h] = getElRealSize(parent)));
+        const safeValue = (value: number) => getSafeNum(value, min, max) + 'px';
 
-          const handlerMap: Record<
-            typeof placement,
-            Parameters<typeof onMove>[0]
-          > = {
-            bottom(_e, curr, _lastXY, down) {
-              parent.style.height = safeValue(h + (curr.y - down.y));
-            },
-            top(_e, curr, _lastXY, down) {
-              parent.style.height = safeValue(h - (curr.y - down.y));
-            },
-            // eslint-disable-next-line perfectionist/sort-objects
-            right(_e, curr, _lastXY, down) {
-              parent.style.width = safeValue(w + (curr.x - down.x));
-            },
-            left(_e, curr, _lastXY, down) {
-              parent.style.width = safeValue(w - (curr.x - down.x));
-            },
-          };
-          onMove(handlerMap[placement]);
+        const handlerMap: Record<
+          typeof placement,
+          Parameters<typeof onMove>[0]
+        > = {
+          bottom(_e, curr, _lastXY, down) {
+            parent.style.height = safeValue(h + (curr.y - down.y));
+          },
+          top(_e, curr, _lastXY, down) {
+            parent.style.height = safeValue(h - (curr.y - down.y));
+          },
+          // eslint-disable-next-line perfectionist/sort-objects
+          right(_e, curr, _lastXY, down) {
+            parent.style.width = safeValue(w + (curr.x - down.x));
+          },
+          left(_e, curr, _lastXY, down) {
+            parent.style.width = safeValue(w - (curr.x - down.x));
+          },
+        };
+        onMove(handlerMap[placement]);
 
-          onUp((_e, currentXY, downXY) => {
-            if (currentXY.x !== downXY.x || currentXY.y !== downXY.y) {
-              onResized?.();
-            }
-          });
-        },
-        { el },
-      );
-    }, [placement, onResized, min, max]);
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(
-          rootName,
-          attrs.className,
-          `${rootName}--${placement}`,
-        )}
-        ref={ref}
-      ></div>
+        onUp((_e, currentXY, downXY) => {
+          if (currentXY.x !== downXY.x || currentXY.y !== downXY.y) {
+            onResized?.();
+          }
+        });
+      },
+      { el },
     );
-  },
-);
+  }, [placement, onResized, min, max]);
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(
+        rootName,
+        attrs.className,
+        `${rootName}--${placement}`,
+      )}
+      ref={ref}
+    ></div>
+  );
+};
 
 Resizer.displayName = 'Resizer';
diff --git a/packages/components/src/select/Select.tsx b/packages/components/src/select/Select.tsx
index 7b881488..5eb4d7a7 100644
--- a/packages/components/src/select/Select.tsx
+++ b/packages/components/src/select/Select.tsx
@@ -41,193 +41,192 @@ const defaultProps = {
   offset: 2,
 } satisfies Partial<SelectStaticProps>;
 
-const _Select = React.forwardRef<HTMLLabelElement, SelectStaticProps>(
-  (props, ref) => {
-    const locale = useLocale('select', EnUS);
-    const {
-      placeholder = locale.placeholder,
-      ignoreComposition,
-      onVisibleChange,
-      controllerRef,
-      popoverAttrs,
-      maxTagCount,
-      attrs = {},
-      filterable,
-      clearable,
-      showArrow,
-      disabled,
-      multiple,
-      onChange,
-      onSearch,
-      onSelect,
-      loading,
-      onClear,
-      onFocus,
-      options,
-      visible,
-      filter,
-      footer,
-      header,
-      onBlur,
-      remote,
-      status,
-      empty,
-      value,
-      icon,
-      size,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const rootRef = useForwardRef(ref);
-    const tabTriggerRef = useRef<HTMLInputElement>(null);
-    const [opened, setOpened] = useState(false);
-    const [focused, setFocused] = useState<boolean>();
-    const [show, setShow] = useStateWithTrailClear(visible);
-    const [selected, setSelected] = useState<SelectOption[]>([]);
-    const [pattern, setPattern] = useState('');
+const _Select: React.FC<SelectStaticProps> = (props) => {
+  const locale = useLocale('select', EnUS);
+  const {
+    placeholder = locale.placeholder,
+    ignoreComposition,
+    onVisibleChange,
+    controllerRef,
+    popoverAttrs,
+    maxTagCount,
+    attrs = {},
+    filterable,
+    clearable,
+    showArrow,
+    disabled,
+    multiple,
+    onChange,
+    onSearch,
+    onSelect,
+    loading,
+    onClear,
+    onFocus,
+    options,
+    visible,
+    filter,
+    footer,
+    header,
+    onBlur,
+    remote,
+    status,
+    empty,
+    value,
+    icon,
+    size,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const rootRef = useForwardRef(ref);
+  const tabTriggerRef = useRef<HTMLInputElement>(null);
+  const [opened, setOpened] = useState(false);
+  const [focused, setFocused] = useState<boolean>();
+  const [show, setShow] = useStateWithTrailClear(visible);
+  const [selected, setSelected] = useState<SelectOption[]>([]);
+  const [pattern, setPattern] = useState('');
 
-    useImperativeHandle(controllerRef, () => {
-      return {
-        focus() {
-          tabTriggerRef.current?.focus();
-        },
-        blur() {
-          tabTriggerRef.current?.blur();
-        },
-      };
-    }, []);
+  useImperativeHandle(controllerRef, () => {
+    return {
+      focus() {
+        tabTriggerRef.current?.focus();
+      },
+      blur() {
+        tabTriggerRef.current?.blur();
+      },
+    };
+  }, []);
 
-    // 单选关闭窗体
-    useEffect(() => {
-      if (!multiple && opened) closeWithFocus();
-      // 多选时选过后清理过滤值
-      if (multiple && (filterable || remote)) setPattern('');
-    }, [selected]);
+  // 单选关闭窗体
+  useEffect(() => {
+    if (!multiple && opened) closeWithFocus();
+    // 多选时选过后清理过滤值
+    if (multiple && (filterable || remote)) setPattern('');
+  }, [selected]);
 
-    // 回显
-    useEffect(() => {
-      if (isValueChanged(value, selected)) {
-        setSelected(pickOptionsByValue(options, value));
-      }
-    }, [value]);
+  // 回显
+  useEffect(() => {
+    if (isValueChanged(value, selected)) {
+      setSelected(pickOptionsByValue(options, value));
+    }
+  }, [value]);
 
-    // 过滤选项
-    const filteredOptions = useMemo((): SelectOptionsItem[] => {
-      // remote 由外部决定选项是什么，对应的回调是 onSearch，避免双重过滤
-      if (remote) return options;
-      if (!pattern && !filter) return options;
-      return filterOptions(options, pattern, filter);
-    }, [filter, options, pattern, remote]);
+  // 过滤选项
+  const filteredOptions = useMemo((): SelectOptionsItem[] => {
+    // remote 由外部决定选项是什么，对应的回调是 onSearch，避免双重过滤
+    if (remote) return options;
+    if (!pattern && !filter) return options;
+    return filterOptions(options, pattern, filter);
+  }, [filter, options, pattern, remote]);
 
-    const popoverOn = transitionCBAdapter({
-      onAfterLeave() {
-        // 关闭后清理过滤值
-        if (!multiple) setPattern('');
-      },
-    });
+  const popoverOn = transitionCBAdapter({
+    onAfterLeave() {
+      // 关闭后清理过滤值
+      if (!multiple) setPattern('');
+    },
+  });
 
-    return (
-      <InputPopover
-        popoverProps={{
-          content: (
-            <Menu
-              onSelectedChange={onSelectedChange}
-              options={filteredOptions}
-              multiple={multiple}
-              onSelect={onSelect}
-              selected={selected}
-              active={opened}
-              footer={footer}
-              header={header}
-              empty={empty}
-            />
-          ),
-          name: 'select__dropdown',
-          showArrow: showArrow,
-          attrs: popoverAttrs,
-          disabled: disabled,
-          on: popoverOn,
-        }}
-        attrs={{
-          ...attrs,
-          className: getClassNames(cls.root, attrs.className, {
-            [cls['--'].selected]: selected.length,
-            [cls['--'].clearable]: clearable,
-          }),
-          onClick: onRootClick,
-        }}
-        onVisibleChange={_onVisibleChange}
-        tabTriggerRef={tabTriggerRef}
-        active={opened || focused}
+  return (
+    <InputPopover
+      popoverProps={{
+        content: (
+          <Menu
+            onSelectedChange={onSelectedChange}
+            options={filteredOptions}
+            multiple={multiple}
+            onSelect={onSelect}
+            selected={selected}
+            active={opened}
+            footer={footer}
+            header={header}
+            empty={empty}
+          />
+        ),
+        name: 'select__dropdown',
+        showArrow: showArrow,
+        attrs: popoverAttrs,
+        disabled: disabled,
+        on: popoverOn,
+      }}
+      attrs={{
+        ...attrs,
+        className: getClassNames(cls.root, attrs.className, {
+          [cls['--'].selected]: selected.length,
+          [cls['--'].clearable]: clearable,
+        }),
+        onClick: onRootClick,
+      }}
+      onVisibleChange={_onVisibleChange}
+      tabTriggerRef={tabTriggerRef}
+      active={opened || focused}
+      disabled={disabled}
+      onFocus={_onFocus}
+      onBlur={_onBlur}
+      status={status}
+      visible={show}
+      ref={rootRef}
+      size={size}
+    >
+      <Selection
+        ignoreComposition={ignoreComposition}
+        onSelectedChange={onSelectedChange}
+        onPatternChange={onPatternChange}
+        maxTagCount={maxTagCount}
+        placeholder={placeholder}
+        filterable={filterable}
+        clearable={clearable}
         disabled={disabled}
-        onFocus={_onFocus}
-        onBlur={_onBlur}
-        status={status}
-        visible={show}
-        ref={rootRef}
+        multiple={multiple}
+        selected={selected}
+        loading={loading}
+        onClear={onClear}
+        options={options}
+        pattern={pattern}
+        opened={opened}
+        remote={remote}
+        icon={icon}
         size={size}
-      >
-        <Selection
-          ignoreComposition={ignoreComposition}
-          onSelectedChange={onSelectedChange}
-          onPatternChange={onPatternChange}
-          maxTagCount={maxTagCount}
-          placeholder={placeholder}
-          filterable={filterable}
-          clearable={clearable}
-          disabled={disabled}
-          multiple={multiple}
-          selected={selected}
-          loading={loading}
-          onClear={onClear}
-          options={options}
-          pattern={pattern}
-          opened={opened}
-          remote={remote}
-          icon={icon}
-          size={size}
-        />
-      </InputPopover>
-    );
+      />
+    </InputPopover>
+  );
 
-    function _onVisibleChange(v: boolean) {
-      setOpened(v);
-      onVisibleChange?.(v);
-    }
-    function _onFocus(): void {
-      setFocused(true);
-      onFocus?.();
-    }
-    function _onBlur(): void {
-      // if (opened) return;
-      setFocused(false);
-      onBlur?.();
-    }
-    function onSelectedChange(selected: SelectOption[]): void {
-      setSelected(selected);
-      if (!onChange) return;
-      const selectedValues = selected.map((s) => s.value);
-      const value = (
-        multiple ? selectedValues : selectedValues[0]
-      ) as Parameters<typeof onChange>[0];
-      onChange(value, selected);
-    }
-    function onPatternChange(value: string): void {
-      setPattern(value);
-      if (remote) onSearch?.(value);
-    }
-    function closeWithFocus(): void {
-      setShow(false);
-    }
-    function onRootClick(e: React.MouseEvent<HTMLLabelElement>): void {
-      attrs.onClick?.(e);
-      if (disabled || !opened) return;
-      if (filterable || remote) {
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
+  function _onVisibleChange(v: boolean) {
+    setOpened(v);
+    onVisibleChange?.(v);
+  }
+  function _onFocus(): void {
+    setFocused(true);
+    onFocus?.();
+  }
+  function _onBlur(): void {
+    // if (opened) return;
+    setFocused(false);
+    onBlur?.();
+  }
+  function onSelectedChange(selected: SelectOption[]): void {
+    setSelected(selected);
+    if (!onChange) return;
+    const selectedValues = selected.map((s) => s.value);
+    const value = (multiple ? selectedValues : selectedValues[0]) as Parameters<
+      typeof onChange
+    >[0];
+    onChange(value, selected);
+  }
+  function onPatternChange(value: string): void {
+    setPattern(value);
+    if (remote) onSearch?.(value);
+  }
+  function closeWithFocus(): void {
+    setShow(false);
+  }
+  function onRootClick(e: React.MouseEvent<HTMLLabelElement>): void {
+    attrs.onClick?.(e);
+    if (disabled || !opened) return;
+    if (filterable || remote) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
     }
-  },
-);
+  }
+};
 
 _Select.displayName = 'Select';
 
diff --git a/packages/components/src/select/components/Menu.option.tsx b/packages/components/src/select/components/Menu.option.tsx
index 3bf4d7c5..f2415041 100644
--- a/packages/components/src/select/components/Menu.option.tsx
+++ b/packages/components/src/select/components/Menu.option.tsx
@@ -11,35 +11,33 @@ export const optionCls = getClasses(
   ['selected-icon'],
   ['selected', 'picked'],
 );
-export const MenuOption = React.forwardRef<HTMLElement, SelectOptionProps>(
-  (props, ref) => {
-    const { attrs = {}, children, selected, picked, extra, ...rest } = props;
-    return (
-      <Option
-        {...rest}
-        extra={
-          (extra || selected) && (
-            <>
-              {extra}
-              {selected && (
-                <Icon className={optionCls.__['selected-icon']}>
-                  <Selected />
-                </Icon>
-              )}
-            </>
-          )
-        }
-        attrs={{
-          ...attrs,
-          className: getClassNames(optionCls.root, attrs.className, {
-            [optionCls['--'].selected]: selected,
-            [optionCls['--'].picked]: picked,
-          }),
-        }}
-        ref={ref}
-      >
-        {children}
-      </Option>
-    );
-  },
-);
+export const MenuOption: React.FC<SelectOptionProps> = (props) => {
+  const { attrs = {}, children, selected, picked, extra, ref, ...rest } = props;
+  return (
+    <Option
+      {...rest}
+      extra={
+        (extra || selected) && (
+          <>
+            {extra}
+            {selected && (
+              <Icon className={optionCls.__['selected-icon']}>
+                <Selected />
+              </Icon>
+            )}
+          </>
+        )
+      }
+      attrs={{
+        ...attrs,
+        className: getClassNames(optionCls.root, attrs.className, {
+          [optionCls['--'].selected]: selected,
+          [optionCls['--'].picked]: picked,
+        }),
+      }}
+      ref={ref}
+    >
+      {children}
+    </Option>
+  );
+};
diff --git a/packages/components/src/select/components/Selection.tsx b/packages/components/src/select/components/Selection.tsx
index 0779ebec..629e69fd 100644
--- a/packages/components/src/select/components/Selection.tsx
+++ b/packages/components/src/select/components/Selection.tsx
@@ -8,7 +8,7 @@ import { SelectionFilter, SelectionTags } from '~/select/components';
 import type { SelectStaticProps, SelectOption } from '~/select';
 import { getClassNames, isFunction } from '@tool-pack/basic';
 import { getSizeClassName, getClasses } from '@pkg/shared';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Ref } from 'react';
 import { Icon } from '~/icon';
 
 interface Props
@@ -35,6 +35,7 @@ interface Props
   > {
   onSelectedChange: (selected: SelectOption[]) => void;
   onPatternChange: (value: string) => void;
+  ref?: Ref<HTMLDivElement | null>;
   selected: SelectOption[];
   opened: boolean;
   pattern: string;
@@ -45,10 +46,7 @@ const cls = getClasses(
   ['placeholder', 'selected', 'suffix', 'icon', 'clear', 'label'],
   [],
 );
-export const Selection: React.FC<Props> = React.forwardRef<
-  HTMLDivElement,
-  Props
->((props, ref) => {
+export const Selection: React.FC<Props> = (props) => {
   const {
     ignoreComposition,
     onSelectedChange,
@@ -67,6 +65,7 @@ export const Selection: React.FC<Props> = React.forwardRef<
     remote,
     icon,
     size,
+    ref,
   } = props;
 
   const [inputValue, setInputValue] = useState('');
@@ -147,4 +146,4 @@ export const Selection: React.FC<Props> = React.forwardRef<
       </div>
     );
   }
-});
+};
diff --git a/packages/components/src/slider/Slider.tsx b/packages/components/src/slider/Slider.tsx
index 427e2e21..ae7ef321 100644
--- a/packages/components/src/slider/Slider.tsx
+++ b/packages/components/src/slider/Slider.tsx
@@ -31,291 +31,283 @@ const defaultProps = {
   min: 0,
 } satisfies Partial<SliderStaticProps>;
 
-const _Slider = React.forwardRef<HTMLDivElement, SliderStaticProps>(
-  (props, ref) => {
-    const {
-      formatter = (v: any) => v,
-      value: outerValue,
-      tooltipProps = {},
-      keepRangeSorted,
-      attrs = {},
-      disabled,
-      keyboard,
-      vertical,
-      onChange,
-      reverse,
-      tooltip,
-      marks,
-      step,
-      max,
-      min,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const forceUpdate = useForceUpdate();
-    const valuesRef = useRef<number[]>([]);
-    const sortedValuesRef = useRef<number[]>([]);
-    const railRef = useRef<HTMLDivElement>(null);
-    const handlersControlRef = useRef<HandlersControlRef>(null);
+const _Slider: React.FC<SliderStaticProps> = (props) => {
+  const {
+    formatter = (v: any) => v,
+    value: outerValue,
+    tooltipProps = {},
+    keepRangeSorted,
+    attrs = {},
+    disabled,
+    keyboard,
+    vertical,
+    onChange,
+    reverse,
+    tooltip,
+    marks,
+    step,
+    max,
+    min,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const forceUpdate = useForceUpdate();
+  const valuesRef = useRef<number[]>([]);
+  const sortedValuesRef = useRef<number[]>([]);
+  const railRef = useRef<HTMLDivElement>(null);
+  const handlersControlRef = useRef<HandlersControlRef>(null);
 
-    const isRange = Array.isArray(outerValue);
-    const total = max - min;
+  const isRange = Array.isArray(outerValue);
+  const total = max - min;
 
-    // 同步外部 value
-    useEffect(() => {
-      if (!isValueChanged()) return;
-      setValue(isRange ? outerValue : [outerValue], false);
+  // 同步外部 value
+  useEffect(() => {
+    if (!isValueChanged()) return;
+    setValue(isRange ? outerValue : [outerValue], false);
 
-      function isValueChanged(): boolean {
-        const innerValue = valuesRef.current;
-        if (outerValue === innerValue) return false;
-        if (!isRange) return outerValue !== innerValue.at(-1);
-        return outerValue.some((item, i) => item !== innerValue[i]);
-      }
-    }, [min, max, outerValue]);
+    function isValueChanged(): boolean {
+      const innerValue = valuesRef.current;
+      if (outerValue === innerValue) return false;
+      if (!isRange) return outerValue !== innerValue.at(-1);
+      return outerValue.some((item, i) => item !== innerValue[i]);
+    }
+  }, [min, max, outerValue]);
 
-    const [minOfValue, maxOfValue] = useMemo(() => {
-      return getMinAndMaxFromValues();
-    }, [sortedValuesRef.current]);
+  const [minOfValue, maxOfValue] = useMemo(() => {
+    return getMinAndMaxFromValues();
+  }, [sortedValuesRef.current]);
 
-    const barStyle: React.CSSProperties = useMemo(() => {
-      const styles: React.CSSProperties = {};
-      const [minOfValue, maxOfValue] = getMinAndMaxFromValues();
-      const barSize = ((maxOfValue - minOfValue) / total) * 100 + '%';
-      const barPos = (minOfValue / total) * 100 + '%';
+  const barStyle: React.CSSProperties = useMemo(() => {
+    const styles: React.CSSProperties = {};
+    const [minOfValue, maxOfValue] = getMinAndMaxFromValues();
+    const barSize = ((maxOfValue - minOfValue) / total) * 100 + '%';
+    const barPos = (minOfValue / total) * 100 + '%';
 
-      if (vertical) {
-        styles[reverse ? 'top' : 'bottom'] = barPos;
-        styles.height = barSize;
-      } else {
-        styles[reverse ? 'right' : 'left'] = barPos;
-        styles.width = barSize;
-      }
+    if (vertical) {
+      styles[reverse ? 'top' : 'bottom'] = barPos;
+      styles.height = barSize;
+    } else {
+      styles[reverse ? 'right' : 'left'] = barPos;
+      styles.width = barSize;
+    }
 
-      return styles;
-    }, [valuesRef.current, total, vertical, reverse]);
+    return styles;
+  }, [valuesRef.current, total, vertical, reverse]);
 
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(cls.root, attrs.className, {
-          [cls['--']['with-marks']]: marks,
-          [cls['--'].disabled]: disabled,
-          [cls['--'].vertical]: vertical,
-          [cls['--'].reverse]: reverse,
-          [cls['--'].range]: isRange,
-        })}
-        ref={ref}
-      >
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-        <div
-          onMouseDown={handleRailClick}
-          className={cls.__.rail}
-          ref={railRef}
-        >
-          <Marks
-            setValue={handleMarkClick}
-            minOfValue={minOfValue}
-            maxOfValue={maxOfValue}
-            vertical={vertical}
-            reverse={reverse}
-            marks={marks}
-            total={total}
-          />
-          <div className={cls.__.bar} style={barStyle}></div>
-          <Dots
-            minOfValue={minOfValue}
-            maxOfValue={maxOfValue}
-            vertical={vertical}
-            reverse={reverse}
-            marks={marks}
-            total={total}
-          />
-          <Handlers
-            getValueFromMousePos={getValueFromMousePos}
-            onHandlerKeyDown={onHandlerKeyDown}
-            setValueOfIndex={setValueOfIndex}
-            keepRangeSorted={keepRangeSorted}
-            controlRef={handlersControlRef}
-            tooltipProps={tooltipProps}
-            valuesRef={valuesRef}
-            formatter={formatter}
-            disabled={disabled}
-            vertical={vertical}
-            keyboard={keyboard}
-            reverse={reverse}
-            tooltip={tooltip}
-            total={total}
-            step={step}
-            min={min}
-            max={max}
-          />
-        </div>
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(cls.root, attrs.className, {
+        [cls['--']['with-marks']]: marks,
+        [cls['--'].disabled]: disabled,
+        [cls['--'].vertical]: vertical,
+        [cls['--'].reverse]: reverse,
+        [cls['--'].range]: isRange,
+      })}
+      ref={ref}
+    >
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+      <div onMouseDown={handleRailClick} className={cls.__.rail} ref={railRef}>
+        <Marks
+          setValue={handleMarkClick}
+          minOfValue={minOfValue}
+          maxOfValue={maxOfValue}
+          vertical={vertical}
+          reverse={reverse}
+          marks={marks}
+          total={total}
+        />
+        <div className={cls.__.bar} style={barStyle}></div>
+        <Dots
+          minOfValue={minOfValue}
+          maxOfValue={maxOfValue}
+          vertical={vertical}
+          reverse={reverse}
+          marks={marks}
+          total={total}
+        />
+        <Handlers
+          getValueFromMousePos={getValueFromMousePos}
+          onHandlerKeyDown={onHandlerKeyDown}
+          setValueOfIndex={setValueOfIndex}
+          keepRangeSorted={keepRangeSorted}
+          controlRef={handlersControlRef}
+          tooltipProps={tooltipProps}
+          valuesRef={valuesRef}
+          formatter={formatter}
+          disabled={disabled}
+          vertical={vertical}
+          keyboard={keyboard}
+          reverse={reverse}
+          tooltip={tooltip}
+          total={total}
+          step={step}
+          min={min}
+          max={max}
+        />
       </div>
-    );
+    </div>
+  );
 
-    function onHandlerKeyDown(stepScale: -1 | 1, index: number): void {
-      if (!keyboard) return;
-      const values = valuesRef.current;
-      const curr = values[index] as number;
-      setValueOfIndex(getLimitValue(getStepValue()), index);
+  function onHandlerKeyDown(stepScale: -1 | 1, index: number): void {
+    if (!keyboard) return;
+    const values = valuesRef.current;
+    const curr = values[index] as number;
+    setValueOfIndex(getLimitValue(getStepValue()), index);
 
-      function getStepValue(): number {
-        if (step !== 'mark') return stepScale * step + curr;
-        return getByMark();
+    function getStepValue(): number {
+      if (step !== 'mark') return stepScale * step + curr;
+      return getByMark();
 
-        function getByMark(): number {
-          const [markValue, markValues] = findClosestFromObjectNumberKeys(
-            marks,
-            curr,
-          );
+      function getByMark(): number {
+        const [markValue, markValues] = findClosestFromObjectNumberKeys(
+          marks,
+          curr,
+        );
 
-          const index = markValues.indexOf(markValue);
-          if (index === -1) return curr;
+        const index = markValues.indexOf(markValue);
+        if (index === -1) return curr;
 
-          const next = getSafeNum(index + stepScale, 0, markValues.length - 1);
-          return markValues[next] as number;
-        }
+        const next = getSafeNum(index + stepScale, 0, markValues.length - 1);
+        return markValues[next] as number;
       }
     }
-    function getMinAndMaxFromValues(): readonly [min: number, max: number] {
-      const sortedValues = sortedValuesRef.current;
-      if (!isRange) return [min, valuesRef.current.at(-1) ?? min];
-      return [sortedValues[0] ?? min, sortedValues.at(-1) ?? min];
-    }
-    function setValueOfIndex(value: number, index: number): void {
-      const values = valuesRef.current;
+  }
+  function getMinAndMaxFromValues(): readonly [min: number, max: number] {
+    const sortedValues = sortedValuesRef.current;
+    if (!isRange) return [min, valuesRef.current.at(-1) ?? min];
+    return [sortedValues[0] ?? min, sortedValues.at(-1) ?? min];
+  }
+  function setValueOfIndex(value: number, index: number): void {
+    const values = valuesRef.current;
 
-      const prevChunk = values.slice(0, index);
-      const nextChunk = values.slice(index + 1);
+    const prevChunk = values.slice(0, index);
+    const nextChunk = values.slice(index + 1);
 
-      if (keepRangeSorted && values.length > 1) {
-        if (prevChunk.length > 0) keepPrevChunkSorted();
-        if (nextChunk.length > 0) keepNextChunkSorted();
-      }
+    if (keepRangeSorted && values.length > 1) {
+      if (prevChunk.length > 0) keepPrevChunkSorted();
+      if (nextChunk.length > 0) keepNextChunkSorted();
+    }
 
-      setValue([...prevChunk, strip(value), ...nextChunk]);
-      setTimeout(() => handlersControlRef.current?.focus(index));
+    setValue([...prevChunk, strip(value), ...nextChunk]);
+    setTimeout(() => handlersControlRef.current?.focus(index));
 
-      function keepPrevChunkSorted() {
-        forEachRight(prevChunk, (v, i): false | void => {
-          if (v > value) {
-            prevChunk[i] = value;
-          } else return false;
-        });
-      }
-      function keepNextChunkSorted() {
-        forEach(nextChunk, (v, i): false | void => {
-          if (v < value) {
-            nextChunk[i] = value;
-          } else return false;
-        });
-      }
+    function keepPrevChunkSorted() {
+      forEachRight(prevChunk, (v, i): false | void => {
+        if (v > value) {
+          prevChunk[i] = value;
+        } else return false;
+      });
     }
-    function setValue(values: number[], emit = true): void {
-      valuesRef.current = values;
-      sortedValuesRef.current = valuesRef.current.slice().sort((a, b) => a - b);
-      emit && onChange?.(isRange ? values : values[0]);
-      forceUpdate();
+    function keepNextChunkSorted() {
+      forEach(nextChunk, (v, i): false | void => {
+        if (v < value) {
+          nextChunk[i] = value;
+        } else return false;
+      });
     }
-    function setValueByClick(value: number, compareValue = value): void {
-      const innerValues = valuesRef.current;
+  }
+  function setValue(values: number[], emit = true): void {
+    valuesRef.current = values;
+    sortedValuesRef.current = valuesRef.current.slice().sort((a, b) => a - b);
+    emit && onChange?.(isRange ? values : values[0]);
+    forceUpdate();
+  }
+  function setValueByClick(value: number, compareValue = value): void {
+    const innerValues = valuesRef.current;
 
-      if (isRange) {
-        // 需要先找到最接近的数字，然后改成目标数字
-        const v = findClosestFromSortedArr(
-          sortedValuesRef.current,
-          compareValue,
-        );
-        const index = innerValues.indexOf(v);
-        setValueOfIndex(value, index);
-        return;
-      }
-      setValueOfIndex(value, 0);
+    if (isRange) {
+      // 需要先找到最接近的数字，然后改成目标数字
+      const v = findClosestFromSortedArr(sortedValuesRef.current, compareValue);
+      const index = innerValues.indexOf(v);
+      setValueOfIndex(value, index);
+      return;
     }
-    function handleRailClick(e: React.MouseEvent<HTMLDivElement>): void {
-      if (disabled) return;
-      const [value, pureValue] = getValueFromMousePos(
-        [e.clientX, e.clientY],
-        true,
-      );
-      setValueByClick(value, pureValue);
-    }
-    function handleMarkClick(value: number): void {
-      if (disabled) return;
-      setValueByClick(value);
-    }
-    function getValueFromMousePos(
-      pos: Point,
-      withPure: true,
-    ): [result: number, pure: number];
-    function getValueFromMousePos(pos: Point): number;
-    function getValueFromMousePos(
-      pos: Point,
-      withPure?: boolean,
-    ): [result: number, pure: number] | number {
-      const [x, y] = pos;
-      const el = railRef.current;
-      if (!el) return [0, 0];
-      const rect = el.getBoundingClientRect();
-      const value = total * getScale();
-      const result = strip(getLimitValue(getValue(getStepValue(value))));
-      if (!withPure) return result;
-      return [result, getLimitValue(getValue(value))];
+    setValueOfIndex(value, 0);
+  }
+  function handleRailClick(e: React.MouseEvent<HTMLDivElement>): void {
+    if (disabled) return;
+    const [value, pureValue] = getValueFromMousePos(
+      [e.clientX, e.clientY],
+      true,
+    );
+    setValueByClick(value, pureValue);
+  }
+  function handleMarkClick(value: number): void {
+    if (disabled) return;
+    setValueByClick(value);
+  }
+  function getValueFromMousePos(
+    pos: Point,
+    withPure: true,
+  ): [result: number, pure: number];
+  function getValueFromMousePos(pos: Point): number;
+  function getValueFromMousePos(
+    pos: Point,
+    withPure?: boolean,
+  ): [result: number, pure: number] | number {
+    const [x, y] = pos;
+    const el = railRef.current;
+    if (!el) return [0, 0];
+    const rect = el.getBoundingClientRect();
+    const value = total * getScale();
+    const result = strip(getLimitValue(getValue(getStepValue(value))));
+    if (!withPure) return result;
+    return [result, getLimitValue(getValue(value))];
 
-      function getValue(value: number): number {
-        if (vertical) return reverse ? value : total - value;
-        return reverse ? total - value : value;
+    function getValue(value: number): number {
+      if (vertical) return reverse ? value : total - value;
+      return reverse ? total - value : value;
+    }
+    function getStepValue(value: number): number {
+      if (step !== 'mark') {
+        const round = reverse ? 0.5 : 0.5;
+        return ~~(value / step + round) * step;
       }
-      function getStepValue(value: number): number {
-        if (step !== 'mark') {
-          const round = reverse ? 0.5 : 0.5;
-          return ~~(value / step + round) * step;
-        }
-        return getByMark();
+      return getByMark();
 
-        function getByMark(): number {
-          return findClosestFromObjectNumberKeys(marks, value)[0];
-        }
-      }
-      function getScale() {
-        if (!vertical) return (x - rect.x) / rect.width;
-        return (y - rect.y) / rect.height;
+      function getByMark(): number {
+        return findClosestFromObjectNumberKeys(marks, value)[0];
       }
     }
-    function findClosestFromObjectNumberKeys(
-      obj: Record<number, unknown> | undefined,
-      defaults: number,
-    ): [closest: number, sortedKeys: number[]] {
-      if (!obj) return [defaults, []];
-
-      const keys = Object.keys(obj);
-      const len = keys.length;
-      if (!len) return [defaults, []];
-
-      const sortedKeys = keys.map(Number).sort((a, b) => a - b);
-      const closest = findClosestFromSortedArr(sortedKeys, defaults);
-      return [closest, sortedKeys];
+    function getScale() {
+      if (!vertical) return (x - rect.x) / rect.width;
+      return (y - rect.y) / rect.height;
     }
-    function findClosestFromSortedArr(arr: number[], value: number): number {
-      const len = arr.length;
-      if (!len) return value;
+  }
+  function findClosestFromObjectNumberKeys(
+    obj: Record<number, unknown> | undefined,
+    defaults: number,
+  ): [closest: number, sortedKeys: number[]] {
+    if (!obj) return [defaults, []];
 
-      const index = arr.findIndex((v) => v > value);
-      if (index < 1) {
-        const endIndex = len - 1;
-        const end = arr[endIndex] as number;
-        return value >= end ? end : (arr[0] as number);
-      }
+    const keys = Object.keys(obj);
+    const len = keys.length;
+    if (!len) return [defaults, []];
 
-      const prevIndex = index - 1;
-      const curr = arr[index] as number;
-      const prev = arr[prevIndex] as number;
-      return curr - value < value - prev ? curr : prev;
-    }
-    function getLimitValue(value: number): number {
-      return getSafeNum(value, min, max);
+    const sortedKeys = keys.map(Number).sort((a, b) => a - b);
+    const closest = findClosestFromSortedArr(sortedKeys, defaults);
+    return [closest, sortedKeys];
+  }
+  function findClosestFromSortedArr(arr: number[], value: number): number {
+    const len = arr.length;
+    if (!len) return value;
+
+    const index = arr.findIndex((v) => v > value);
+    if (index < 1) {
+      const endIndex = len - 1;
+      const end = arr[endIndex] as number;
+      return value >= end ? end : (arr[0] as number);
     }
-  },
-);
+
+    const prevIndex = index - 1;
+    const curr = arr[index] as number;
+    const prev = arr[prevIndex] as number;
+    return curr - value < value - prev ? curr : prev;
+  }
+  function getLimitValue(value: number): number {
+    return getSafeNum(value, min, max);
+  }
+};
 
 _Slider.displayName = 'Slider';
 
diff --git a/packages/components/src/space/Space.tsx b/packages/components/src/space/Space.tsx
index 286c9959..d052bf61 100644
--- a/packages/components/src/space/Space.tsx
+++ b/packages/components/src/space/Space.tsx
@@ -18,7 +18,7 @@ const defaultProps = {
   fillRatio: 100,
 } satisfies Partial<SpaceProps>;
 
-export const Space = React.forwardRef<HTMLElement, SpaceProps>((props, ref) => {
+export const Space: React.FC<SpaceProps> = (props) => {
   const {
     attrs = {},
     separator,
@@ -30,6 +30,7 @@ export const Space = React.forwardRef<HTMLElement, SpaceProps>((props, ref) => {
     fill,
     tag,
     gap,
+    ref,
   } = mergeReactDefaultProps(props, defaultProps);
   const style = {
     ...attrs.style,
@@ -55,7 +56,7 @@ export const Space = React.forwardRef<HTMLElement, SpaceProps>((props, ref) => {
     },
     _children,
   );
-});
+};
 
 function useChildren(
   children: React.ReactNode,
diff --git a/packages/components/src/switch/Switch.tsx b/packages/components/src/switch/Switch.tsx
index ba765541..4e8da0d9 100644
--- a/packages/components/src/switch/Switch.tsx
+++ b/packages/components/src/switch/Switch.tsx
@@ -20,79 +20,78 @@ const defaultProps = {
   checked: false,
 } satisfies Partial<SwitchProps>;
 
-export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-  (props, ref) => {
-    const {
-      uncheckedChildren,
-      checkedChildren,
-      uncheckedIcon,
-      checkedIcon,
-      attrs = {},
-      onChange,
-      disabled,
-      checked,
-      loading,
-      size,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const [active, setActive] = useState(checked);
+export const Switch: React.FC<SwitchProps> = (props) => {
+  const {
+    uncheckedChildren,
+    checkedChildren,
+    uncheckedIcon,
+    checkedIcon,
+    attrs = {},
+    onChange,
+    disabled,
+    checked,
+    loading,
+    size,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const [active, setActive] = useState(checked);
 
-    useEffect(() => {
-      setActive(checked);
-    }, [checked]);
+  useEffect(() => {
+    setActive(checked);
+  }, [checked]);
 
-    const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-      attrs.onClick?.(e);
-      if (disabled || loading) return;
-      const value = !active;
-      setActive(value);
-      onChange?.(value);
-    };
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    attrs.onClick?.(e);
+    if (disabled || loading) return;
+    const value = !active;
+    setActive(value);
+    onChange?.(value);
+  };
 
-    const showCheckedIcon: boolean = active && Boolean(checkedIcon);
-    const showUncheckedIcon: boolean = !active && Boolean(uncheckedIcon);
-    const showIcon: boolean = loading || showCheckedIcon || showUncheckedIcon;
+  const showCheckedIcon: boolean = active && Boolean(checkedIcon);
+  const showUncheckedIcon: boolean = !active && Boolean(uncheckedIcon);
+  const showIcon: boolean = loading || showCheckedIcon || showUncheckedIcon;
 
-    return (
-      <button
-        {...attrs}
-        className={getClassNames(
-          cls.root,
-          getSizeClassName(size),
-          attrs.className,
-          { [cls['--'].checked]: active },
-          { [cls['--'].unchecked]: !active },
-          { [cls['--'].disabled]: disabled },
-          { [cls['--'].loading]: loading },
-        )}
-        role={attrs.role || 'switch'}
-        aria-disabled={disabled}
-        aria-checked={active}
-        disabled={disabled}
-        onClick={onClick}
-        ref={ref}
-      >
-        <div className={cls.__.handle}>
-          <Transition name={cls.root}>
-            {showIcon && (
-              <Icon className={cls.__.icon} key={cls.__.icon}>
-                {loading ? (
-                  <LoadingIcon />
-                ) : showCheckedIcon ? (
-                  checkedIcon
-                ) : showUncheckedIcon ? (
-                  uncheckedIcon
-                ) : null}
-              </Icon>
-            )}
-          </Transition>
-        </div>
-        <div className={cls.__.slider}>
-          <div className={cls.__.checked}>{checkedChildren}</div>
-          <div className={cls.__.unchecked}>{uncheckedChildren}</div>
-        </div>
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      {...attrs}
+      className={getClassNames(
+        cls.root,
+        getSizeClassName(size),
+        attrs.className,
+        { [cls['--'].checked]: active },
+        { [cls['--'].unchecked]: !active },
+        { [cls['--'].disabled]: disabled },
+        { [cls['--'].loading]: loading },
+      )}
+      role={attrs.role || 'switch'}
+      aria-disabled={disabled}
+      aria-checked={active}
+      disabled={disabled}
+      onClick={onClick}
+      ref={ref}
+    >
+      <div className={cls.__.handle}>
+        <Transition name={cls.root}>
+          {showIcon && (
+            <Icon className={cls.__.icon} key={cls.__.icon}>
+              {loading ? (
+                <LoadingIcon />
+              ) : showCheckedIcon ? (
+                checkedIcon
+              ) : showUncheckedIcon ? (
+                uncheckedIcon
+              ) : null}
+            </Icon>
+          )}
+        </Transition>
+      </div>
+      <div className={cls.__.slider}>
+        <div className={cls.__.checked}>{checkedChildren}</div>
+        <div className={cls.__.unchecked}>{uncheckedChildren}</div>
+      </div>
+    </button>
+  );
+};
 
 Switch.displayName = 'Switch';
diff --git a/packages/components/src/tag/Tag.tsx b/packages/components/src/tag/Tag.tsx
index 2f30d852..98dbf9df 100644
--- a/packages/components/src/tag/Tag.tsx
+++ b/packages/components/src/tag/Tag.tsx
@@ -22,7 +22,7 @@ const defaultProps = {
   bordered: true,
 } satisfies Partial<TagProps>;
 
-export const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
+export const Tag: React.FC<TagProps> = (props) => {
   const {
     checked: outerChecked,
     closeBtnAttrs = {},
@@ -38,6 +38,7 @@ export const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     type,
     icon,
     size,
+    ref,
   } = mergeReactDefaultProps(props, defaultProps);
   const [closed, setClosed] = useState(false);
   const [checked, , setChecked] = useVisible(outerChecked);
@@ -101,6 +102,6 @@ export const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     setChecked(value);
     onChange?.(value);
   }
-});
+};
 
 Tag.displayName = 'Tag';
diff --git a/packages/components/src/timeline/Timeline.tsx b/packages/components/src/timeline/Timeline.tsx
index 4b83aed3..6a8040bb 100644
--- a/packages/components/src/timeline/Timeline.tsx
+++ b/packages/components/src/timeline/Timeline.tsx
@@ -7,38 +7,37 @@ import React, { useMemo } from 'react';
 const cls = getClasses('timeline', [], []);
 const defaultProps = { placement: 'left' } satisfies Partial<TimelineProps>;
 
-export const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(
-  (props, ref) => {
-    const {
-      attrs = {},
-      items = [],
-      placement,
-      children,
-      reverse,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const list: TimelineItemProps[] = useMemo(
-      () => (reverse ? items.slice().reverse() : items),
-      [items, reverse],
-    );
+export const Timeline: React.FC<TimelineProps> = (props) => {
+  const {
+    attrs = {},
+    items = [],
+    placement,
+    children,
+    reverse,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const list: TimelineItemProps[] = useMemo(
+    () => (reverse ? items.slice().reverse() : items),
+    [items, reverse],
+  );
 
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(
-          cls.root,
-          attrs.className,
-          `${cls.root}--${placement}`,
-          {},
-        )}
-        ref={ref}
-      >
-        {list.map((item, index) => (
-          <TimelineItem key={item.time || 'timeline-' + index} {...item} />
-        ))}
-        {children}
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(
+        cls.root,
+        attrs.className,
+        `${cls.root}--${placement}`,
+        {},
+      )}
+      ref={ref}
+    >
+      {list.map((item, index) => (
+        <TimelineItem key={item.time || 'timeline-' + index} {...item} />
+      ))}
+      {children}
+    </div>
+  );
+};
 
 Timeline.displayName = 'Timeline';
diff --git a/packages/components/src/timeline/components/Item.tsx b/packages/components/src/timeline/components/Item.tsx
index 1ecc467c..ed4ef2b9 100644
--- a/packages/components/src/timeline/components/Item.tsx
+++ b/packages/components/src/timeline/components/Item.tsx
@@ -23,36 +23,34 @@ const defaultProps = {
   type: 'default',
 } satisfies Partial<TimelineItemProps>;
 
-export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
-  (props, ref) => {
-    const { lineType, content, title, type, time, icon } = {
-      ...defaultProps,
-      ...props,
-    } as RequiredPart<TimelineItemProps, keyof typeof defaultProps>;
-    const style = {
-      '--t-timeline-line-style': lineType,
-    } as React.CSSProperties;
+export const TimelineItem: React.FC<TimelineItemProps> = (props) => {
+  const { lineType, content, title, type, time, icon, ref } = {
+    ...defaultProps,
+    ...props,
+  } as RequiredPart<TimelineItemProps, keyof typeof defaultProps>;
+  const style = {
+    '--t-timeline-line-style': lineType,
+  } as React.CSSProperties;
 
-    return (
-      <div
-        className={getClassNames(cls.root, `${cls.root}--${type}`)}
-        style={style}
-        ref={ref}
-      >
-        <div className={cls.__['content-block']}>
-          {title && <div className={cls.__.title}>{title}</div>}
-          {content && <div className={cls.__.content}>{content}</div>}
-          {time && <div className={cls.__.time}>{time}</div>}
-        </div>
-        <div className={cls.__['line-block']}>
-          {icon ? (
-            <div className={cls.__.icon}>{icon}</div>
-          ) : (
-            <div className={cls.__.circle}></div>
-          )}
-          <div className={cls.__.line}></div>
-        </div>
+  return (
+    <div
+      className={getClassNames(cls.root, `${cls.root}--${type}`)}
+      style={style}
+      ref={ref}
+    >
+      <div className={cls.__['content-block']}>
+        {title && <div className={cls.__.title}>{title}</div>}
+        {content && <div className={cls.__.content}>{content}</div>}
+        {time && <div className={cls.__.time}>{time}</div>}
       </div>
-    );
-  },
-);
+      <div className={cls.__['line-block']}>
+        {icon ? (
+          <div className={cls.__.icon}>{icon}</div>
+        ) : (
+          <div className={cls.__.circle}></div>
+        )}
+        <div className={cls.__.line}></div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/timeline/timeline.types.ts b/packages/components/src/timeline/timeline.types.ts
index 889bd1b8..69883699 100644
--- a/packages/components/src/timeline/timeline.types.ts
+++ b/packages/components/src/timeline/timeline.types.ts
@@ -1,7 +1,8 @@
 import { TYPE_LEVEL, PropsBase } from '@pkg/shared';
 import React from 'react';
 
-export interface TimelineItemProps {
+export interface TimelineItemProps
+  extends Pick<PropsBase<HTMLDivElement>, 'ref'> {
   lineType?: React.CSSProperties['borderInlineEndStyle'];
   content?: React.ReactNode;
   title?: React.ReactNode;
diff --git a/packages/components/src/transition-group/TransitionGroup.tsx b/packages/components/src/transition-group/TransitionGroup.tsx
index 8d248e96..1245b87b 100644
--- a/packages/components/src/transition-group/TransitionGroup.tsx
+++ b/packages/components/src/transition-group/TransitionGroup.tsx
@@ -1,7 +1,7 @@
 import type { TransitionGroupProps } from './transition-group.types';
 import { useChildMap, useWrapper, useFlips } from './hooks';
 import { mergeReactDefaultProps } from '@pkg/shared';
-import { forwardRef, memo } from 'react';
+import React from 'react';
 
 /**
  * v1 版有部分 bug 不好解决。
@@ -19,19 +19,17 @@ const defaultProps = {
   tag: 'div',
 } satisfies TransitionGroupProps;
 
-const TransitionGroup = forwardRef<HTMLDivElement, TransitionGroupProps>(
-  (props, ref) => {
-    const { children, name, ...rest } = mergeReactDefaultProps(
-      props,
-      defaultProps,
-    );
-    const childMap = useChildMap(children, name);
-    const wrapper = useWrapper(childMap, rest, ref);
-    useFlips(childMap, name);
-    return wrapper;
-  },
-);
+const TransitionGroup: React.FC<TransitionGroupProps> = (props) => {
+  const { children, name, ref, ...rest } = mergeReactDefaultProps(
+    props,
+    defaultProps,
+  );
+  const childMap = useChildMap(children, name);
+  const wrapper = useWrapper(childMap, rest, ref);
+  useFlips(childMap, name);
+  return wrapper;
+};
 
 TransitionGroup.displayName = 'TransitionGroup';
 
-export default memo(TransitionGroup);
+export default React.memo(TransitionGroup);
diff --git a/packages/components/src/virtual-list/VirtualList.tsx b/packages/components/src/virtual-list/VirtualList.tsx
index ad399d70..2227a7ec 100644
--- a/packages/components/src/virtual-list/VirtualList.tsx
+++ b/packages/components/src/virtual-list/VirtualList.tsx
@@ -31,223 +31,222 @@ const defaultProps = {
 type Offsets = [start: number, end: number];
 const offsetIndex = 2;
 
-export const VirtualList = React.forwardRef<HTMLElement, VirtualListProps>(
-  (props, ref) => {
-    const {
-      attrs = {},
-      children,
-      tag,
-    } = mergeReactDefaultProps(props, defaultProps);
-    const itemsElRef = useRef<HTMLDivElement>(null);
-    const wrapperElRef = useRef<HTMLDivElement>(null);
-    const rootElRef = useForwardRef(ref);
-
-    const firstItemHeightRef = useRef(0);
-    const itemMapRef = useRef<
-      Array<{ /*isPreset: boolean;*/ height: number; top: number }>
-    >([]);
-    const containerItemsLenRef = useRef(0);
-    const translateYRef = useRef(0);
-    const autoFillLayoutRef = useRef(true);
-    const scrollTopRef = useRef(0);
-    const [offsets, setOffsets] = useState<Offsets>([0, 0]);
-    const childList = useMemo(() => Children.toArray(children), [children]);
-
-    const _children = useMemo(() => {
-      const [start, end] = offsets;
-      return childList.slice(start, end).map((child, i) => {
-        const index = start + i;
-        // 在此处创建会重复，最好提供个额外组件给外部使用
-        return createElement(
-          'div',
-          {
-            className: cls.__.item,
-            'data-index': index, // 为元素添加一个 index 标记
-            key: index,
-          } as HTMLAttributes<HTMLElement>,
-          child,
-        );
-      });
-    }, [childList, offsets]);
-
-    useWatch(childList.length, (len) => {
-      const old = autoFillLayoutRef.current;
-      autoFillLayoutRef.current = true;
-      if (old || !itemMapRef.current.length || len >= itemMapRef.current.length)
-        return;
-
-      // 从 children 数量多到 children 数量少的情况
-      itemMapRef.current.length = 0;
-      // rootElRef.current?.dispatchEvent(new Event('scroll'));
-      setSafeOffsets(0, 0);
+export const VirtualList: React.FC<VirtualListProps> = (props) => {
+  const {
+    attrs = {},
+    children,
+    tag,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  const itemsElRef = useRef<HTMLDivElement>(null);
+  const wrapperElRef = useRef<HTMLDivElement>(null);
+  const rootElRef = useForwardRef(ref);
+
+  const firstItemHeightRef = useRef(0);
+  const itemMapRef = useRef<
+    Array<{ /*isPreset: boolean;*/ height: number; top: number }>
+  >([]);
+  const containerItemsLenRef = useRef(0);
+  const translateYRef = useRef(0);
+  const autoFillLayoutRef = useRef(true);
+  const scrollTopRef = useRef(0);
+  const [offsets, setOffsets] = useState<Offsets>([0, 0]);
+  const childList = useMemo(() => Children.toArray(children), [children]);
+
+  const _children = useMemo(() => {
+    const [start, end] = offsets;
+    return childList.slice(start, end).map((child, i) => {
+      const index = start + i;
+      // 在此处创建会重复，最好提供个额外组件给外部使用
+      return createElement(
+        'div',
+        {
+          className: cls.__.item,
+          'data-index': index, // 为元素添加一个 index 标记
+          key: index,
+        } as HTMLAttributes<HTMLElement>,
+        child,
+      );
     });
-
-    useEffect(() => {
-      if (!autoFillLayoutRef.current) return;
-      const [start, end] = offsets;
-      const len = childList.length;
-      if (end >= childList.length) {
+  }, [childList, offsets]);
+
+  useWatch(childList.length, (len) => {
+    const old = autoFillLayoutRef.current;
+    autoFillLayoutRef.current = true;
+    if (old || !itemMapRef.current.length || len >= itemMapRef.current.length)
+      return;
+
+    // 从 children 数量多到 children 数量少的情况
+    itemMapRef.current.length = 0;
+    // rootElRef.current?.dispatchEvent(new Event('scroll'));
+    setSafeOffsets(0, 0);
+  });
+
+  useEffect(() => {
+    if (!autoFillLayoutRef.current) return;
+    const [start, end] = offsets;
+    const len = childList.length;
+    if (end >= childList.length) {
+      autoFillLayoutRef.current = false;
+      return;
+    }
+    const wrapperEL = wrapperElRef.current;
+    const itemsEl = itemsElRef.current;
+    const rootEl = rootElRef.current;
+    if (wrapperEL && itemsEl && rootEl) {
+      const { offsetHeight } = itemsEl;
+      if (offsetHeight > rootEl.offsetHeight) {
+        const firstChild = itemsEl.children[0] as HTMLElement | null;
+        if (firstChild) {
+          firstItemHeightRef.current = firstChild.offsetHeight;
+          forEach(
+            itemsEl.children as unknown as ArrayLike<HTMLElement>,
+            (v, i) => {
+              const { offsetHeight, offsetTop } = v;
+              itemMapRef.current[i] = {
+                height: offsetHeight,
+                // isPreset: false,
+                top: offsetTop,
+              };
+            },
+          );
+
+          const unRenderStart = len - end;
+          const height = unRenderStart * firstItemHeightRef.current;
+          const defObj = { height: 0, top: 0 };
+          forEachNum(unRenderStart, (i) => {
+            const index = end + i;
+            const prev = itemMapRef.current[index - 1] || defObj;
+            itemMapRef.current[index] = {
+              height: firstItemHeightRef.current,
+              top: prev.height + prev.top,
+              // isPreset: true,
+            };
+          });
+
+          wrapperEL.style.height = height + offsetHeight + 'px';
+        }
         autoFillLayoutRef.current = false;
         return;
       }
-      const wrapperEL = wrapperElRef.current;
-      const itemsEl = itemsElRef.current;
-      const rootEl = rootElRef.current;
-      if (wrapperEL && itemsEl && rootEl) {
-        const { offsetHeight } = itemsEl;
-        if (offsetHeight > rootEl.offsetHeight) {
-          const firstChild = itemsEl.children[0] as HTMLElement | null;
-          if (firstChild) {
-            firstItemHeightRef.current = firstChild.offsetHeight;
-            forEach(
-              itemsEl.children as unknown as ArrayLike<HTMLElement>,
-              (v, i) => {
-                const { offsetHeight, offsetTop } = v;
-                itemMapRef.current[i] = {
-                  height: offsetHeight,
-                  // isPreset: false,
-                  top: offsetTop,
-                };
-              },
-            );
-
-            const unRenderStart = len - end;
-            const height = unRenderStart * firstItemHeightRef.current;
-            const defObj = { height: 0, top: 0 };
-            forEachNum(unRenderStart, (i) => {
-              const index = end + i;
-              const prev = itemMapRef.current[index - 1] || defObj;
-              itemMapRef.current[index] = {
-                height: firstItemHeightRef.current,
-                top: prev.height + prev.top,
-                // isPreset: true,
-              };
-            });
-
-            wrapperEL.style.height = height + offsetHeight + 'px';
-          }
-          autoFillLayoutRef.current = false;
-          return;
-        }
+    }
+    containerItemsLenRef.current++;
+    setOffsets([start, end + 1]);
+  });
+
+  useEffect(() => {
+    if (autoFillLayoutRef.current) return;
+
+    const wrapperEL = wrapperElRef.current;
+    const itemsEl = itemsElRef.current;
+    if (!wrapperEL || !itemsEl) return;
+
+    const childs = itemsEl.children;
+    const itemMap = itemMapRef.current;
+
+    let isResized = false;
+    let lastIndex = 0;
+    const defItem = { height: 0, top: 0 };
+    forEach(childs as HTMLCollectionOf<HTMLElement>, (el) => {
+      const attr = el.getAttribute('data-index');
+      const index = Number(attr);
+      const obj = itemMap[index];
+      // if (obj?.isPreset === false) return;
+      const prev = itemMap[index - 1] || defItem;
+      const h = obj?.height || firstItemHeightRef.current;
+      const { offsetHeight } = el;
+      itemMap[index] = {
+        top: prev.top + prev.height,
+        height: offsetHeight,
+        // isPreset: false,
+      };
+      if (h !== offsetHeight) {
+        isResized = true;
+        lastIndex = index;
       }
-      containerItemsLenRef.current++;
-      setOffsets([start, end + 1]);
     });
 
-    useEffect(() => {
-      if (autoFillLayoutRef.current) return;
-
-      const wrapperEL = wrapperElRef.current;
-      const itemsEl = itemsElRef.current;
-      if (!wrapperEL || !itemsEl) return;
-
-      const childs = itemsEl.children;
-      const itemMap = itemMapRef.current;
-
-      let isResized = false;
-      let lastIndex = 0;
-      const defItem = { height: 0, top: 0 };
-      forEach(childs as HTMLCollectionOf<HTMLElement>, (el) => {
-        const attr = el.getAttribute('data-index');
-        const index = Number(attr);
-        const obj = itemMap[index];
-        // if (obj?.isPreset === false) return;
-        const prev = itemMap[index - 1] || defItem;
-        const h = obj?.height || firstItemHeightRef.current;
-        const { offsetHeight } = el;
-        itemMap[index] = {
-          top: prev.top + prev.height,
-          height: offsetHeight,
-          // isPreset: false,
-        };
-        if (h !== offsetHeight) {
-          isResized = true;
-          lastIndex = index;
-        }
-      });
-
-      // 如果某一个元素高度变化了，就需要把它后面的元素的 top 刷新一遍
-      if (isResized) {
-        const len = itemMap.length;
-        for (let i = lastIndex + 1; i < len; i++) {
-          const v = itemMap[i]!;
-          // 更新后续的 top
-          const prev = itemMap[i - 1] || defItem;
-          v.top = prev.top + prev.height;
-        }
-        const endItem = itemMap.at(-1) || defItem;
-        wrapperEL.style.height = endItem.top + endItem.height + 'px';
+    // 如果某一个元素高度变化了，就需要把它后面的元素的 top 刷新一遍
+    if (isResized) {
+      const len = itemMap.length;
+      for (let i = lastIndex + 1; i < len; i++) {
+        const v = itemMap[i]!;
+        // 更新后续的 top
+        const prev = itemMap[i - 1] || defItem;
+        v.top = prev.top + prev.height;
       }
-    }, [offsets]);
-
-    return React.createElement(
-      tag,
-      {
-        ...attrs,
-        className: getClassNames(cls.root, attrs.className),
-        onScroll: _onScroll,
-        ref: rootElRef,
-      },
-      <div className={cls.__.wrapper} ref={wrapperElRef}>
-        <div
-          style={{ transform: `translateY(${translateYRef.current}px)` }}
-          className={cls.__.items}
-          ref={itemsElRef}
-        >
-          {_children}
-        </div>
-      </div>,
-    );
-
-    function _onScroll(e: React.UIEvent<HTMLDivElement>) {
-      const target = e.currentTarget;
-      const itemsEl = itemsElRef.current;
-
-      if (!itemsEl) return;
-
-      const children = itemsEl.children;
-      if (!children || !children.length) return;
-
-      const { offsetHeight, scrollTop } = target;
-
-      scrollTopRef.current = scrollTop;
-
-      const newOffsets = getOffsets(scrollTop, offsetHeight);
-      setSafeOffsets(...newOffsets);
+      const endItem = itemMap.at(-1) || defItem;
+      wrapperEL.style.height = endItem.top + endItem.height + 'px';
     }
-    function getOffsets(scrollTop: number, parentHeight: number): Offsets {
-      const map = itemMapRef.current;
-      const len = map.length;
-      const start = binaryFindIndex(map, ({ item }) => {
-        if (inRange(scrollTop, [item.top, item.top + item.height])) return 0;
-        return scrollTop - item.top;
-      });
-      const offsets: Offsets = [start, len];
-      const bottom = scrollTop + parentHeight;
-      for (let i = offsets[0]; i < len; i++) {
-        const item = map[i];
-        if (!item) continue;
-        if (item.top >= bottom) {
-          offsets[1] = i;
-          break;
-        }
+  }, [offsets]);
+
+  return React.createElement(
+    tag,
+    {
+      ...attrs,
+      className: getClassNames(cls.root, attrs.className),
+      onScroll: _onScroll,
+      ref: rootElRef,
+    },
+    <div className={cls.__.wrapper} ref={wrapperElRef}>
+      <div
+        style={{ transform: `translateY(${translateYRef.current}px)` }}
+        className={cls.__.items}
+        ref={itemsElRef}
+      >
+        {_children}
+      </div>
+    </div>,
+  );
+
+  function _onScroll(e: React.UIEvent<HTMLDivElement>) {
+    const target = e.currentTarget;
+    const itemsEl = itemsElRef.current;
+
+    if (!itemsEl) return;
+
+    const children = itemsEl.children;
+    if (!children || !children.length) return;
+
+    const { offsetHeight, scrollTop } = target;
+
+    scrollTopRef.current = scrollTop;
+
+    const newOffsets = getOffsets(scrollTop, offsetHeight);
+    setSafeOffsets(...newOffsets);
+  }
+  function getOffsets(scrollTop: number, parentHeight: number): Offsets {
+    const map = itemMapRef.current;
+    const len = map.length;
+    const start = binaryFindIndex(map, ({ item }) => {
+      if (inRange(scrollTop, [item.top, item.top + item.height])) return 0;
+      return scrollTop - item.top;
+    });
+    const offsets: Offsets = [start, len];
+    const bottom = scrollTop + parentHeight;
+    for (let i = offsets[0]; i < len; i++) {
+      const item = map[i];
+      if (!item) continue;
+      if (item.top >= bottom) {
+        offsets[1] = i;
+        break;
       }
-
-      offsets[0] -= offsetIndex;
-      offsets[1] += offsetIndex;
-      return offsets;
     }
-    function setSafeOffsets(start: number, end: number): void {
-      const maxIndex = childList.length;
-      start = getSafeNum(start, 0, maxIndex);
-      end = getSafeNum(end, 0, maxIndex);
 
-      const im = itemMapRef.current[start];
-      if (im) translateYRef.current = im.top;
-
-      setOffsets([start, end]);
-    }
-  },
-);
+    offsets[0] -= offsetIndex;
+    offsets[1] += offsetIndex;
+    return offsets;
+  }
+  function setSafeOffsets(start: number, end: number): void {
+    const maxIndex = childList.length;
+    start = getSafeNum(start, 0, maxIndex);
+    end = getSafeNum(end, 0, maxIndex);
+
+    const im = itemMapRef.current[start];
+    if (im) translateYRef.current = im.top;
+
+    setOffsets([start, end]);
+  }
+};
 
 VirtualList.displayName = 'VirtualList';
diff --git a/packages/components/src/word-balloon/WordBalloon.tsx b/packages/components/src/word-balloon/WordBalloon.tsx
index 2ec3ad0e..a26d1162 100644
--- a/packages/components/src/word-balloon/WordBalloon.tsx
+++ b/packages/components/src/word-balloon/WordBalloon.tsx
@@ -9,47 +9,46 @@ const defaultProps = {
 } satisfies Partial<WordBalloonProps>;
 const rootName = getComponentClass('word-balloon');
 
-export const WordBalloon = React.forwardRef<HTMLDivElement, WordBalloonProps>(
-  (props, ref) => {
-    const {
-      contentStyle,
-      background,
-      arrowStyle,
-      attrs = {},
-      placement,
-      showArrow,
-      children,
-    } = mergeReactDefaultProps(props, defaultProps);
-    return (
-      <div
-        {...attrs}
-        className={getClassNames(
-          rootName,
-          attrs.className,
-          `${rootName}--${placement}`,
-          { [`${rootName}--no-arrow`]: !showArrow },
-        )}
-        style={
-          {
-            ...attrs.style,
-            '--t-word-balloon-bg': background || '',
-          } as React.CSSProperties
-        }
-        ref={ref}
-      >
-        <div className={`${rootName}__content`} style={contentStyle}>
-          {children}
-        </div>
-        {showArrow && (
-          <div className={`${rootName}__arrow`} style={arrowStyle}>
-            <svg viewBox="-8 -5.5 16 5.515">
-              <path d="M8-5.5A4 4 180 005.1716-4.3284L1.4142-.5711A2 2 180 01-1.4142-.5711L-5.1716-4.3284A4 4 180 00-8-5.5Z" />
-            </svg>
-          </div>
-        )}
+export const WordBalloon: React.FC<WordBalloonProps> = (props) => {
+  const {
+    contentStyle,
+    background,
+    arrowStyle,
+    attrs = {},
+    placement,
+    showArrow,
+    children,
+    ref,
+  } = mergeReactDefaultProps(props, defaultProps);
+  return (
+    <div
+      {...attrs}
+      className={getClassNames(
+        rootName,
+        attrs.className,
+        `${rootName}--${placement}`,
+        { [`${rootName}--no-arrow`]: !showArrow },
+      )}
+      style={
+        {
+          ...attrs.style,
+          '--t-word-balloon-bg': background || '',
+        } as React.CSSProperties
+      }
+      ref={ref}
+    >
+      <div className={`${rootName}__content`} style={contentStyle}>
+        {children}
       </div>
-    );
-  },
-);
+      {showArrow && (
+        <div className={`${rootName}__arrow`} style={arrowStyle}>
+          <svg viewBox="-8 -5.5 16 5.515">
+            <path d="M8-5.5A4 4 180 005.1716-4.3284L1.4142-.5711A2 2 180 01-1.4142-.5711L-5.1716-4.3284A4 4 180 00-8-5.5Z" />
+          </svg>
+        </div>
+      )}
+    </div>
+  );
+};
 
 WordBalloon.displayName = 'WordBalloon';

From 47a4427df6594401aad547f5b0db7b7c7d769e90 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 15:04:00 +0800
Subject: [PATCH 13/14] =?UTF-8?q?chore(components):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=20MutableRefObject?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/src/popover/hooks/handleClick.ts | 4 ++--
 packages/components/src/popover/hooks/handleHover.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/popover/hooks/handleClick.ts b/packages/components/src/popover/hooks/handleClick.ts
index 1cae0b60..9af62ae3 100644
--- a/packages/components/src/popover/hooks/handleClick.ts
+++ b/packages/components/src/popover/hooks/handleClick.ts
@@ -11,13 +11,13 @@ import {
   tap,
 } from 'rxjs';
 import { fromOuterEvent } from '@pkg/shared';
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 
 export function handleClick(
   triggerEl: HTMLElement,
   close: () => void,
   show: boolean,
-  balloonElRef: MutableRefObject<HTMLElement | undefined>,
+  balloonElRef: RefObject<HTMLElement | undefined>,
   toggle: () => AsyncSubject<boolean>,
 ): () => void {
   // 点击触发元素
diff --git a/packages/components/src/popover/hooks/handleHover.ts b/packages/components/src/popover/hooks/handleHover.ts
index 2a21b48d..fb4c76d8 100644
--- a/packages/components/src/popover/hooks/handleHover.ts
+++ b/packages/components/src/popover/hooks/handleHover.ts
@@ -18,8 +18,8 @@ export function handleHover(
   enterDelay: number,
   leaveDelay: number,
   show: boolean,
-  enterBalloonSubject: React.MutableRefObject<Subject<void>>,
-  leaveBalloonSubject: React.MutableRefObject<Subject<void>>,
+  enterBalloonSubject: React.RefObject<Subject<void>>,
+  leaveBalloonSubject: React.RefObject<Subject<void>>,
 ): () => void {
   const triggerEnterEvent = fromEvent(triggerEl, 'mouseenter');
   const triggerMoveEvent = fromEvent(triggerEl, 'mousemove');

From 12bde5d294c3aa399c7e47afa3e5255bc0446871 Mon Sep 17 00:00:00 2001
From: dyh_a <xinzon32177@163.com>
Date: Fri, 31 Jan 2025 16:34:36 +0800
Subject: [PATCH 14/14] =?UTF-8?q?chore(components):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=20Popover=20nest=20demo=20=E7=9A=84=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/src/popover/demo/nest.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/popover/demo/nest.tsx b/packages/components/src/popover/demo/nest.tsx
index 917841a1..d60f9215 100644
--- a/packages/components/src/popover/demo/nest.tsx
+++ b/packages/components/src/popover/demo/nest.tsx
@@ -1,7 +1,7 @@
 /**
  * title: 组合嵌套
- * description: 普通嵌套时，父子窗体是独立的，鼠标从父窗体移入子窗体，父窗体会消失；<br />
- *   内部嵌套时，子窗体插入父窗体，鼠标从父窗体移入子窗体，父窗体不会消失。
+ * description: 普通嵌套时，父子窗体是独立的；<br />
+ *   内部嵌套时，子窗体插入父窗体。
  */
 
 import { Popover, Button, Space } from '@tool-pack/react-ui';
