feat: 颜色选择器 Hex 支持 8-digits 透明度，增加 hexa format (#10698)

* 颜色选择器 Hex 支持 8-digits 透明度

* fix type error

---------

Co-authored-by: harry <yangshuhai@pdnews.cn>

docs/zh-CN/components/form/input-color.md

@@ -79,13 +79,36 @@ order: 11
 }
 ```
 
+
+## hexa (8 digits HEX)
+
+将 `format` 设置为 hexa 支持 8位 HEX，参考 `https://drafts.csswg.org/css-color/`。
+
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+        {
+            "type": "input-color",
+            "name": "color",
+            "label": "带透明度调节的色盘, 8 digits HEX",
+            "value": "#73E3EC88",
+            "format": "hexa"
+        }
+    ]
+}
+```
+
+
 ## 属性表
 
 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
 
 | 属性名           | 类型            | 默认值                                                                                                     | 说明                                                          |
 | ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| format           | `string`        | `hex`                                                                                                      | 请选择 `hex`、`hls`、`rgb`或者`rgba`。                        |
+| format           | `string`        | `hex`                                                                                                      | 请选择 `hex`、`hexa`、`hls`、`rgb`或者`rgba`。                        |
 | presetColors     | `Array<string>` | [选择器预设颜色值](./input-color#%E9%80%89%E6%8B%A9%E5%99%A8%E9%A2%84%E8%AE%BE%E9%A2%9C%E8%89%B2%E5%80%BC) | 选择器底部的默认颜色，数组内为空则不显示默认颜色              |
 | allowCustomColor | `boolean`       | `true`                                                                                                     | 为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围 |
 | clearable        | `boolean`       | `"label"`                                                                                                  | 是否显示清除按钮                                              |

packages/amis-editor/src/plugin/Form/InputColor.tsx

@@ -47,7 +47,7 @@ const presetColors = [
   '#9013fe'
 ];
 
-const colorFormat = ['hex', 'rgb', 'rgba', 'hsl'];
+const colorFormat = ['hex', 'hexa', 'rgb', 'rgba', 'hsl'];
 const presetColorsByFormat = colorFormat.reduce<{
   [propsName: string]: string[];
 }>((res, fmt) => {
@@ -67,7 +67,7 @@ export class ColorControlPlugin extends BasePlugin {
   icon = 'fa fa-eyedropper';
   pluginIcon = 'input-color-plugin';
   description =
-    '支持<code>hex、hls、rgb、rgba</code>格式，默认为<code>hex</code>格式';
+    '支持<code>hex、hexa、hls、rgb、rgba</code>格式，默认为<code>hex</code>格式';
   searchKeywords = '颜色选择器';
   docLink = '/amis/zh-CN/components/form/input-color';
   tags = ['表单项'];

packages/amis-ui/src/components/ColorPicker.tsx

@@ -197,6 +197,10 @@ export class ColorControl extends React.PureComponent<
       );
     } else if (format === 'rgb') {
       onChange(`rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`);
+    } else if (format === 'hexa') {
+      onChange(
+        this.rgbaToHex(color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a)
+      );
     } else if (format === 'hsl') {
       onChange(
         `hsl(${Math.round(color.hsl.h)}, ${Math.round(
@@ -218,6 +222,13 @@ export class ColorControl extends React.PureComponent<
       tempValue = `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
     } else if (format === 'rgb') {
       tempValue = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
+    } else if (format === 'hexa') {
+      tempValue = this.rgbaToHex(
+        color.rgb.r,
+        color.rgb.g,
+        color.rgb.b,
+        color.rgb.a
+      );
     } else if (format === 'hsl') {
       tempValue = `hsl(${Math.round(color.hsl.h)}, ${Math.round(
         color.hsl.s * 100
@@ -235,6 +246,36 @@ export class ColorControl extends React.PureComponent<
     this.close();
   }
 
+  /**
+   * Converts an RGBA color to an 8-digit hex color.
+   *
+   * @param r - Red component (0-255)
+   * @param g - Green component (0-255)
+   * @param b - Blue component (0-255)
+   * @param a - Alpha component (1-100)
+   * @returns The hex color string in the format #RRGGBBAA
+   */
+  rgbaToHex(r: number, g: number, b: number, a: number | undefined): string {
+    if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+      return `#00000000`;
+    }
+    if (typeof a === 'undefined' || a > 1) {
+      a = 1;
+    }
+    if (a < 0.01) {
+      a = 0;
+    }
+
+    const toHex = (n: number) => n.toString(16).padStart(2, '0').toUpperCase();
+
+    const alphaHex = toHex(Math.round(a * 255));
+    const redHex = toHex(r);
+    const greenHex = toHex(g);
+    const blueHex = toHex(b);
+
+    return `#${redHex}${greenHex}${blueHex}${alphaHex}`;
+  }
+
   render() {
     const {
       classPrefix: ns,

packages/amis/src/renderers/Form/InputColor.tsx

@@ -30,7 +30,7 @@ export interface InputColorControlSchema extends FormBaseControlSchema {
   /**
    * 颜色格式
    */
-  format?: 'hex' | 'rgb' | 'rgba' | 'hsl';
+  format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl';
 
   /**
    * 选中颜色后是否关闭弹出层。