From 34aadefc5cdd376a9d34c88a2a6df7f20f07b52d Mon Sep 17 00:00:00 2001
From: Jeffers <jeffersyuan@outlook.com>
Date: Thu, 28 Mar 2024 10:20:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B2=A1=E6=9C=89ChildConten?=
 =?UTF-8?q?t=E6=97=B6=E7=9A=84=E5=A4=84=E7=90=86=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=BA=94=E7=9A=84Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/colorpicker/ColorPicker.razor      | 48 +++++++++++--------
 components/colorpicker/style/index.less       | 26 +++++-----
 .../Components/ColorPicker/demo/Basic.razor   |  1 -
 .../Components/ColorPicker/demo/Content.razor | 10 ++++
 .../Components/ColorPicker/demo/content.md    | 14 ++++++
 5 files changed, 67 insertions(+), 32 deletions(-)
 create mode 100644 site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Content.razor
 create mode 100644 site/AntDesign.Docs/Demos/Components/ColorPicker/demo/content.md

diff --git a/components/colorpicker/ColorPicker.razor b/components/colorpicker/ColorPicker.razor
index 603116d26b..32d468990a 100644
--- a/components/colorpicker/ColorPicker.razor
+++ b/components/colorpicker/ColorPicker.razor
@@ -3,19 +3,25 @@
 
 @using AntDesign.Internal
 
-@if (ChildContent != null)
-{
-    <div class="@ClassMapper.Class" @ref="@Ref" Id="@Id" style="display: inline-flex; @Style"
-         @onclick="OnClickDiv"
-         @onmouseenter="OnTriggerMouseEnter"
-         @onmouseleave="OnTriggerMouseLeave"
-         @oncontextmenu="OnTriggerContextmenu"
-         @onfocusin="OnTriggerFocusIn"
-         @onfocusout="OnTriggerFocusOut"
-         @oncontextmenu:preventDefault>
-        @ChildContent
-    </div>
-}
+<div class="@ClassMapper.Class" @ref="@Ref" Id="@Id" style="display: inline-flex; @Style"
+        @onclick="OnClickDiv"
+        @onmouseenter="OnTriggerMouseEnter"
+        @onmouseleave="OnTriggerMouseLeave"
+        @oncontextmenu="OnTriggerContextmenu"
+        @onfocusin="OnTriggerFocusIn"
+        @onfocusout="OnTriggerFocusOut"
+        @oncontextmenu:preventDefault>
+        @if (ChildContent != null)
+        {
+            @ChildContent
+        }else{
+            <div class="ant-color-picker-block-outer">
+                <div class="ant-color-picker-block">
+                    <div class="ant-color-picker-block-inner" style="@($"background: {_value.ToString(AntColorOutputFormats.RGBA)};")"></div>
+                </div>
+            </div>
+        }
+</div>
 @if (Unbound != null)
 {
     @Unbound(RefBack)
@@ -66,16 +72,18 @@
                         </div>
                     </div>
                     <div class="ant-popover-title">
-                        <GridRow align="middle">
-                            <GridCol Span="4">
-                                <div class="ant-color-picker-dot ant-color-picker-dot-current ant-ripple">
-                                    <div class="ant-color-picker-fill" style="@($"background: {_value.ToString(AntColorOutputFormats.RGBA)};")"></div>
-                                </div>
-                            </GridCol>
-                            <GridCol Span="20">
+                        <GridRow Align="middle" Justify="center">
+                            <GridCol Span="22">
                                 <GridRow><GridCol Span="24"><Slider class="ant-color-picker-slider-hue" TValue="double" Value="@_value.H" OnChange="UpdateBaseColorSlider" Step="1" Min="0" Max="360" @onclick:stopPropagation="true"/></GridCol></GridRow>
                                 <GridRow><GridCol Span="24"><Slider TValue="double" Value="@_value.A" OnChange="SetAlpha" Step="1" Min="0" Max="255" @onclick:stopPropagation="true" /></GridCol></GridRow>
                             </GridCol>
+                            <GridCol Span="2">
+                                <div class="ant-color-picker-block-outer">
+                                    <div class="ant-color-picker-block">
+                                        <div class="ant-color-picker-block-inner" style="@($"background: {_value.ToString(AntColorOutputFormats.RGBA)};")"></div>
+                                    </div>
+                                </div>
+                            </GridCol>
                         </GridRow>
                         <GridRow>
                             <GridCol Span="24">
diff --git a/components/colorpicker/style/index.less b/components/colorpicker/style/index.less
index a4da728a86..286eb6b3f6 100644
--- a/components/colorpicker/style/index.less
+++ b/components/colorpicker/style/index.less
@@ -5,7 +5,6 @@
 
 .@{colorpicker-prefix-cls} {
     .reset-component();
-
     width: 312px;
     height: 250px;
     position: relative;
@@ -28,18 +27,23 @@
         background: linear-gradient(90deg, #FF0000, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #FF0000)
     }
 
-    &-dot {
-        height: 38px;
-        min-width: 38px;
-        width: 100%;
-        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-radius 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        border-radius: var(--ant-default-borderradius);
-        box-shadow: 0 0 6px rgba(127,130,134,.18);
+    &-block {
+        position: relative;
+        height: 30px;
+        width: 30px;
+        border:1px solid gray;
+        border-radius: 15%;
+        background-size: 50% 50%;
+        background-color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-    &-dot &-fill {
-        width: 100%;
-        height: 100%;
+    &-block-inner {
+        width: 22px;
+        height: 22px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
         border-radius: inherit;
     }
 }
\ No newline at end of file
diff --git a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Basic.razor b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Basic.razor
index fcfc3a01da..416732d1e3 100644
--- a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Basic.razor
+++ b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Basic.razor
@@ -1,7 +1,6 @@
 <h1>@colorValue</h1>
 
 <ColorPicker @bind-TextValue="@colorValue" Title="Title" Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click})">
-    <Button type="primary">选择颜色</Button>
 </ColorPicker>
 
 
diff --git a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Content.razor b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Content.razor
new file mode 100644
index 0000000000..fcfc3a01da
--- /dev/null
+++ b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Content.razor
@@ -0,0 +1,10 @@
+<h1>@colorValue</h1>
+
+<ColorPicker @bind-TextValue="@colorValue" Title="Title" Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click})">
+    <Button type="primary">选择颜色</Button>
+</ColorPicker>
+
+
+@code {
+    private string colorValue = "#00FF00FF";
+}
diff --git a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/content.md b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/content.md
new file mode 100644
index 0000000000..3f41988fc1
--- /dev/null
+++ b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/content.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: ChildContent
+  en-US: ChildContent
+---
+
+## zh-CN
+
+使用自定义内容。
+
+## en-US
+
+Use Child Content.
\ No newline at end of file