zys-contrib · pull · Apr 9, 2025 · Apr 9, 2025 · Apr 9, 2025 · Apr 9, 2025
diff --git a/components/Collapse/__changelog__/index.en-US.md b/components/Collapse/__changelog__/index.en-US.md
@@ -1,3 +1,11 @@
+## 2.66.1
+
+2025-04-09
+
+### 🐛 BugFix
+
+- Fixed the bug that the expanded panel is not fully displayed when the `Collapse` component content is loaded asynchronously.([#2964](https://github.com/arco-design/arco-design/pull/2964))
+
 ## 2.66.0
 
 2025-04-03

diff --git a/components/Collapse/__changelog__/index.zh-CN.md b/components/Collapse/__changelog__/index.zh-CN.md
@@ -1,3 +1,11 @@
+## 2.66.1
+
+2025-04-09
+
+### 🐛 问题修复
+
+- 修复 `Collapse` 组件内容异步加载时，已展开面板展示不完整bug。([#2964](https://github.com/arco-design/arco-design/pull/2964))
+
 ## 2.66.0
 
 2025-04-03

diff --git a/components/Collapse/item.tsx b/components/Collapse/item.tsx
@@ -111,7 +111,8 @@ function Item(props: PropsWithChildren<CollapseItemProps>, ref) {
       <Transition
         nodeRef={divRef}
         in={isExpanded}
-        addEndListener={(_, done) => {
+        //  when nodeRef prop is passed, node is not passed, so done is being passed as the first argument.
+        addEndListener={(done) => {
           divRef.current?.addEventListener('transitionend', done, false);
         }}
         mountOnEnter={'destroyOnHide' in props ? destroyOnHide : ctx.destroyOnHide || ctx.lazyload}

diff --git a/components/ColorPicker/__changelog__/index.en-US.md b/components/ColorPicker/__changelog__/index.en-US.md
@@ -1,3 +1,11 @@
+## 2.66.1
+
+2025-04-09
+
+### 🐛 BugFix
+
+- Fixed the bug that `ColorPicker` component style variable reference was not prefixed with css variable.([#2965](https://github.com/arco-design/arco-design/pull/2965))
+
 ## 2.66.0
 
 2025-04-03

diff --git a/components/ColorPicker/__changelog__/index.zh-CN.md b/components/ColorPicker/__changelog__/index.zh-CN.md
@@ -1,3 +1,11 @@
+## 2.66.1
+
+2025-04-09
+
+### 🐛 问题修复
+
+- 修复 `ColorPicker` 组件样式变量引用未加 css 变量前缀的 bug。([#2965](https://github.com/arco-design/arco-design/pull/2965))
+
 ## 2.66.0
 
 2025-04-03

diff --git a/components/ColorPicker/style/index.less b/components/ColorPicker/style/index.less
@@ -27,7 +27,7 @@
 
   &:hover {
     cursor: pointer;
-    background-color: var(--color-fill-3);
+    background-color: @color-input-bg-color-hover;
   }
 
   &-size-default {
@@ -126,7 +126,7 @@
       position: absolute;
       background-color: transparent;
       transform: translate(-50%, -50%);
-      border: @color-palette-handle-border-size solid var(--color-bg-white);
+      border: @color-palette-handle-border-size solid @color-palette-handle-border-color;
       box-sizing: border-box;
     }
   }
@@ -184,7 +184,7 @@
 
   .@{color-picker-prefix-cls}-panel-colors {
     padding: @color-panel-padding;
-    border-top: 1px solid var(--color-fill-3);
+    border-top: 1px solid @color-panel-border-color;
 
     .@{color-picker-prefix-cls}-colors-section:not(:first-child) {
       margin-top: @spacing-6;
@@ -193,13 +193,13 @@
     .@{color-picker-prefix-cls}-colors-text {
       font-size: @color-panel-section-title-font-size;
       font-weight: @font-weight-400;
-      color: var(--color-text-1);
+      color: @color-panel-section-title-font-color;
     }
 
     .@{color-picker-prefix-cls}-colors-empty {
       margin: @spacing-6 0;
       font-size: @color-panel-empty-font-size;
-      color: var(--color-text-3);
+      color: @color-panel-empty-font-color;
     }
 
     .@{color-picker-prefix-cls}-colors-wrapper {
@@ -264,9 +264,9 @@
       border-radius: @border-radius-circle;
       position: absolute;
       top: -2px;
-      background-color: var(--color-bg-white);
+      background-color: @color-control-bar-handle-bg-color;
       transform: translateX(-50%);
-      border: 1px solid var(--color-border-2);
+      border: 1px solid @color-control-bar-handle-border-color;
       box-sizing: border-box;
 
       &-center {

diff --git a/components/ColorPicker/style/token.less b/components/ColorPicker/style/token.less
@@ -12,6 +12,7 @@
 @color-preview-size-large: 26px;
 
 @color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@color-input-bg-color-hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
 @color-value-margin-left: @spacing-3;
 @color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
 @color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@@ -28,17 +29,21 @@
 
 @color-panel-width: 260px;
 @color-panel-padding: @spacing-6;
+@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
 @color-panel-border-radius: @border-radius-small;
 @color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
 @color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);
 
 @color-palette-height: 178px;
 @color-palette-handle-size: @size-4;
 @color-palette-handle-border-size: @border-2;
+@color-palette-handle-border-color: var(~'@{arco-cssvars-prefix}-color-bg-white');
 
 @color-control-bar-width: 182px;
 @color-control-bar-height: 14px;
 @color-control-bar-handle-size: @size-4;
+@color-control-bar-handle-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@color-control-bar-handle-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
 @color-control-bar-alpha-margin-top: @spacing-6;
 @color-control-bar-gradient-margin: @spacing-6;
 
@@ -49,10 +54,10 @@
 @color-panel-alpha-input-width: 52px;
 
 @color-panel-section-title-font-size: @font-size-caption;
+@color-panel-section-title-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
 @color-panel-empty-font-size: @font-size-body-1;
+@color-panel-empty-font-color: var(~'@{arco-cssvars-prefix}-color-text-3');
 
 @color-panel-block-size: @size-4;
 @color-panel-block-margin: @spacing-3;
 @color-panel-block-border-radius: @border-2;
-
-@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
diff --git a/components/index.tsx b/components/index.tsx
@@ -229,5 +229,5 @@ export { default as Watermark } from './Watermark';
 export type { ImageProps, ImagePreviewProps, ImagePreviewActionProps, ImagePreviewGroupProps } from './Image/interface';
 export { default as Image } from './Image';
 
-export const version = '2.66.0';
+export const version = '2.66.1';
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-react",
-  "version": "2.66.0",
+  "version": "2.66.1",
   "description": "Arco Design React UI Library.",
   "module": "./es/index.js",
   "main": "./lib/index.js",

diff --git a/site/docs/version_v2.en-US.md b/site/docs/version_v2.en-US.md
@@ -2,6 +2,15 @@
 changelog: true
 ---
 
+## 2.66.1
+
+2025-04-09
+
+### 🐛 BugFix
+
+- Fixed the bug that `ColorPicker` component style variable reference was not prefixed with css variable.([#2965](https://github.com/arco-design/arco-design/pull/2965))
+- Fixed the bug that the expanded panel is not fully displayed when the `Collapse` component content is loaded asynchronously.([#2964](https://github.com/arco-design/arco-design/pull/2964))
+
 ## 2.66.0
 
 2025-04-03

diff --git a/site/docs/version_v2.zh-CN.md b/site/docs/version_v2.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ---
 
+## 2.66.1
+
+2025-04-09
+
+### 🐛 问题修复
+
+- 修复 `ColorPicker` 组件样式变量引用未加 css 变量前缀的 bug。([#2965](https://github.com/arco-design/arco-design/pull/2965))
+- 修复 `Collapse` 组件内容异步加载时，已展开面板展示不完整bug。([#2964](https://github.com/arco-design/arco-design/pull/2964))
+
 ## 2.66.0
 
 2025-04-03

diff --git a/stories/Collapse.story.tsx b/stories/Collapse.story.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Collapse } from '@self';
+import React, { useEffect } from 'react';
+import { Collapse, Skeleton } from '@self';
 
 const CollapseItem = Collapse.Item;
 
@@ -11,22 +11,39 @@ const props = {
   className: 'customClass',
 };
 
-export const Demo = () => (
-  <Collapse defaultActiveKey={['1', '2']} style={{ border: 'none' }}>
-    <CollapseItem header="琼恩·雪诺" name="1" {...props}>
-      艾德公爵的私生儿子，与罗柏·史塔克同龄，兄弟关系亲密无间。其母身份不明，艾德公爵拒绝向任何人透露——有人传说那是南方某家族的一位贵族小姐，也有人说是一个寻常的使女。
-    </CollapseItem>
-    <CollapseItem header="丹尼莉丝·坦格利安" name="2" {...props}>
-      坦格利安王朝的末代君王伊里斯·坦格利安二世的幼女，银发紫眼，美貌异于常人。丹妮莉丝出生时一场剧烈的风暴袭击了龙石岛，“风暴降生”因此得名。
-    </CollapseItem>
-    <CollapseItem header="提利昂·兰尼斯特" name="3" {...props}>
-      泰温公爵和乔安娜夫人的第三个也是最小的孩子。因为是个侏儒，他有时候被戏称为小恶魔和半人。他利用自己的智慧屡次化险为夷，帮助兰尼斯特家族赢得了五王之战，但命运的不公使得他成为了一个弑亲者和通缉犯，踏上了流亡之路。
-    </CollapseItem>
-    <CollapseItem header="瑟曦·兰尼斯特·拜拉席恩" name="4" {...props}>
-      泰溫公爵和喬安娜夫人的長女，是詹姆·蘭尼斯特的孿生姐姐。在篡奪者戰爭之後她嫁給了新王勞勃·拜拉席恩，成為七大王國的王后。
-    </CollapseItem>
-  </Collapse>
-);
+export const Demo = () => {
+  const [loading, setLoading] = React.useState(true);
+
+  // useEffect(() => {
+  // setTimeout(() => {
+  //   setLoading(false);
+  // }, 2000);
+  // }, []);
+
+  return (
+    <Collapse
+      onChange={() => {
+        setTimeout(() => {
+          setLoading(false);
+        }, 2000);
+      }}
+    >
+      <CollapseItem header="琼恩·雪诺" name="1" {...props}>
+        艾德公爵的私生儿子，与罗柏·史塔克同龄，兄弟关系亲密无间。其母身份不明，艾德公爵拒绝向任何人透露——有人传说那是南方某家族的一位贵族小姐，也有人说是一个寻常的使女。
+        {!loading && <Skeleton />}
+      </CollapseItem>
+      <CollapseItem header="丹尼莉丝·坦格利安" name="2" {...props}>
+        坦格利安王朝的末代君王伊里斯·坦格利安二世的幼女，银发紫眼，美貌异于常人。丹妮莉丝出生时一场剧烈的风暴袭击了龙石岛，“风暴降生”因此得名。
+      </CollapseItem>
+      <CollapseItem header="提利昂·兰尼斯特" name="3" {...props}>
+        泰温公爵和乔安娜夫人的第三个也是最小的孩子。因为是个侏儒，他有时候被戏称为小恶魔和半人。他利用自己的智慧屡次化险为夷，帮助兰尼斯特家族赢得了五王之战，但命运的不公使得他成为了一个弑亲者和通缉犯，踏上了流亡之路。
+      </CollapseItem>
+      <CollapseItem header="瑟曦·兰尼斯特·拜拉席恩" name="4" {...props}>
+        泰溫公爵和喬安娜夫人的長女，是詹姆·蘭尼斯特的孿生姐姐。在篡奪者戰爭之後她嫁給了新王勞勃·拜拉席恩，成為七大王國的王后。
+      </CollapseItem>
+    </Collapse>
+  );
+};
 
 export default {
   title: 'Collapse',