颜色选择器添加清除按钮

Author: Linho1219

src/editor/inputs/subblocks/colorPicker.vue

@@ -1,5 +1,19 @@
 <template>
-  <s-text-field class="input monospace" label="颜色" v-model.trim="color">
+  <s-text-field
+    class="input monospace-inner"
+    :label="t('data.more.color')"
+    v-model.trim="color"
+  >
+    <Transition name="fade">
+      <s-icon-button
+        slot="end"
+        class="colorpicker-button"
+        v-if="color !== ''"
+        @click="color = ''"
+      >
+        <s-icon name="close"></s-icon>
+      </s-icon-button>
+    </Transition>
     <s-popup slot="end" ref="popup" @show="pickerKey = Symbol()">
       <s-icon-button
         slot="trigger"
@@ -26,6 +40,10 @@ import SIconPalette from "@/ui/icons/palette.vue";
 import { computed, ref } from "vue";
 import { ColorPicker } from "vue-color-kit";
 
+import { useI18n } from "vue-i18n";
+import { I18nSchema } from "@/i18n";
+const { t } = useI18n<{ message: I18nSchema }>();
+
 const color = defineModel<string>({ required: true });
 
 interface ColorPickerArgs {
@@ -190,4 +208,15 @@ const pickerKey = ref(Symbol());
     }
   }
 }
+
+.fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 0.1s;
+  }
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
 </style>

src/editor/inputs/subblocks/function.vue

@@ -26,7 +26,7 @@ const isEmpty = computed(() => value.value === "");
   background-color: var(--s-color-surface-container-high);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  border-bottom: var(--s-color-outline) solid 0.1em;
+  border-bottom: var(--s-color-outline-variant) solid 0.1em;
   transition:
     background-color 0.2s,
     border-bottom-color 0.2s;
@@ -48,6 +48,7 @@ const isEmpty = computed(() => value.value === "");
     caret-color: var(--s-color-primary);
     line-height: 1.2;
     z-index: 1;
+    color:var(--s-color)
   }
   label {
     color: var(--s-color-outline);

src/public.scss

@@ -51,7 +51,8 @@ input[type="number"] {
 }
 
 .monospace,
-.monospace::part(input) {
+.monospace::part(input),
+.monospace-inner::part(input) {
   font-family: var(--font-mono);
 }