优化颜色选择器对 HEX 的支持

Author: Linho1219

src/editor/inputs/subblocks/coloUtils.ts

@@ -1,9 +1,26 @@
 export function nameToHex(name: string) {
+  if (name.startsWith("#") || name.startsWith("rgb")) return undefined;
   const hex = colorNames[name.toLowerCase() as keyof typeof colorNames];
   if (hex) return hex;
   return undefined;
 }
 
+export function hexToRgba(hex: string) {
+  if (hex.startsWith("#")) {
+    hex = hex.slice(1);
+  }
+  if (hex.length === 3 || hex.length === 4)
+    hex = [...hex].map((c) => c + c).join("");
+  if (hex.length === 6) hex += "FF";
+  const bigint = parseInt(hex, 16);
+  const r = (bigint >> 24) & 255;
+  const g = (bigint >> 16) & 255;
+  const b = (bigint >> 8) & 255;
+  const a = bigint & 255;
+  if (a === 255) return `rgb(${r}, ${g}, ${b})`;
+  return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+}
+
 const colorNames = {
   aliceblue: "#f0f8ff",
   antiquewhite: "#faebd7",

src/editor/inputs/subblocks/colorPicker.vue

@@ -1,25 +1,27 @@
 <template>
   <s-text-field class="input monospace" label="颜色" v-model.trim="color">
-    <s-popup slot="end" align="right" ref="popup" @show="pickerKey = Symbol()">
+    <s-popup slot="end" ref="popup" @show="pickerKey = Symbol()">
       <s-icon-button
         slot="trigger"
         class="colorpicker-button"
         :style="{ color }"
       >
         <SIconPalette />
       </s-icon-button>
-      <ColorPicker
-        :color="processedColor"
-        sucker-hide
-        @changeColor="changeColor"
-        :key="pickerKey"
-      />
+      <div class="colorpicker-popup-shell">
+        <ColorPicker
+          :color="processedColor"
+          sucker-hide
+          @changeColor="changeColor"
+          :key="pickerKey"
+        />
+      </div>
     </s-popup>
   </s-text-field>
 </template>
 
 <script lang="ts" setup>
-import { nameToHex } from "./coloUtils";
+import { hexToRgba, nameToHex } from "./coloUtils";
 import SIconPalette from "@/ui/icons/palette.vue";
 import { computed, ref } from "vue";
 import { ColorPicker } from "vue-color-kit";
@@ -33,9 +35,11 @@ interface ColorPickerArgs {
 }
 
 const processedColor = computed(() => {
-  const colorstr = color.value.trim() || "#4682B4";
-  if (colorstr.startsWith("#") || colorstr.startsWith("rgb")) return colorstr;
-  return nameToHex(colorstr) ?? colorstr;
+  let colorstr = color.value.trim() || "#4682B4";
+  colorstr = nameToHex(colorstr) ?? colorstr;
+  if (colorstr.startsWith("rgb")) return colorstr;
+  if (colorstr.startsWith("#")) return hexToRgba(colorstr);
+  return colorstr;
 });
 
 function changeColor(newColor: ColorPickerArgs) {