feat: 完善配色方案自定义、颜色预设隐藏

components/cusForm/src/ColorScheme.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Select v-model:value="colorType" size="small" style="width: 100%" @change="changeColorType">
+    <Select
+      v-model:value="colorType"
+      size="small"
+      style="width: 100%"
+      @change="changeColorType"
+    >
       <SelectOption
         v-for="item in colorPreset"
         :key="item.name"
@@ -10,7 +15,7 @@
           class="color-block"
           v-for="color in item.color.slice(0, 5)"
           :key="color"
-          :style="{background: color}"
+          :style="{ background: color }"
         ></span>
         {{ item.name }}</SelectOption
       >
@@ -21,39 +26,69 @@
     <div class="color-list">
       <span
         class="color-block"
-        v-for="(color, index) in value"
+        v-for="(color, index) in colors"
         :key="index"
-        :style="{background: color}"
-      ></span>
-      <span class="color-block cus-btn" @click="handleAddColor"><PlusOutlined /></span>
+        :style="{ background: color }"
+      >
+        <span class="del-btn">
+          <CloseCircleFilled @click="handleDelete(index)" />
+        </span>
+      </span>
+      <span class="color-block cus-btn" @click="handleAddClick"
+        ><PlusOutlined
+      /></span>
+      <ElColorPicker
+        ref="colorPickerRef"
+        style="width: 0; height: 0; opacity: 0"
+        @change="handleAddColor"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits } from "vue";
+import { ref, defineProps, defineEmits, PropType } from "vue";
 import { Select, SelectOption } from "ant-design-vue";
-import { PlusOutlined } from "@ant-design/icons-vue";
+import { PlusOutlined, CloseCircleFilled } from "@ant-design/icons-vue";
 import { colorPreset } from "../../charts/config";
+import { ElColorPicker } from "element-plus";
 
 const props = defineProps({
   value: {
-    type: Array,
+    type: Array as PropType<string[]>,
     default: () => [],
   },
 });
+
+const presetList = colorPreset.map((item) => item.color.join(","));
 const emit = defineEmits(["update:value"]);
-const colorType = ref<string>(colorPreset[0].color.join(","));
+const colorType = ref<string>(presetList.includes(props.value.join(",")) ? props.value.join(",") : "custom");
+const colors = ref<string[]>(props.value);
+const colorPickerRef = ref<InstanceType<typeof ElColorPicker>>();
 
 const changeColorType = (val: string) => {
   if (val === "custom") {
     // emit("update:value", []);
   } else {
+    colors.value = val.split(",");
     emit("update:value", val.split(","));
   }
 };
-const handleAddColor = () => {
-  console.log('add color...');
+
+const handleAddClick = () => {
+  colorPickerRef.value?.show();
+};
+
+const handleAddColor = (value: string) => {
+  colors.value.push(value);
+  colorType.value = "custom";
+  emit("update:value", colors.value);
+};
+
+const handleDelete = (index: number) => {
+  colors.value.splice(index, 1);
+  colorType.value = "custom";
+  emit("update:value", colors.value);
 };
 </script>
 
@@ -63,6 +98,7 @@ const handleAddColor = () => {
   width: 10px;
   height: 10px;
   margin-right: 4px;
+  position: relative;
 }
 .color-list {
   margin-top: 12px;
@@ -80,4 +116,23 @@ const handleAddColor = () => {
     justify-content: center;
   }
 }
+:deep(.el-color-picker__trigger) {
+  display: none;
+}
+.del-btn {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 8px;
+  display: flex;
+  align-items: start;
+  justify-content: end;
+  opacity: 0;
+  transition: 0.5s;
+  &:hover {
+    opacity: 1;
+  }
+}
 </style>

components/cusForm/src/ColorSelect.vue

@@ -1,10 +1,10 @@
 <template>
-  <ElRadioGroup v-model="colorType" size="small" style="width: 100%">
+  <ElRadioGroup v-model="colorType" size="small" style="width: 100%" v-if="gradient">
     <ElRadioButton value="pure">单色</ElRadioButton>
     <ElRadioButton value="gradient">渐变色</ElRadioButton>
   </ElRadioGroup>
   <template v-if="colorType === 'pure'">
-    <div class="color-box">
+    <div class="color-box" :style="{marginTop: gradient ? '12px' : '0'}">
       <ElColorPicker v-model="color" color-format="hex" show-alpha size="small"/>
       <ElInput v-model="color" size="small"></ElInput>
     </div>
@@ -19,12 +19,14 @@
 
 <script setup lang="ts">
 import { ElRadioGroup, ElRadioButton, ElColorPicker, ElInput, } from 'element-plus';
-import { defineEmits, defineProps, ref, watch } from 'vue';
+import { defineEmits, defineProps, ref, watch, withDefaults } from 'vue';
 
 const emit = defineEmits(["update:value"]);
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   value: string;
-}>();
+  // 展示渐变色
+  gradient?: boolean;
+}>(), { gradient: true});
 const colorType = ref(props.value?.length <= 9 || !props.value ? 'pure' : 'gradient');
 const color = ref(props.value);
 // 'linear-gradient(90deg,#9CEC5BFF,#0764F0FF)'
@@ -44,13 +46,22 @@ watch(
     deep: true
   }
 );
+
+watch(
+  () => props.gradient,
+  (val) => {
+    if(!val) {
+      colorType.value = 'pure';
+      color.value = color.value.length > 9 ? '#FFFFFFFF' : color.value;
+    }
+  }
+)
 </script>
 
 <style lang="less" scoped>
 .color-box {
   display: flex;
   align-items: center;
-  margin-top: 12px;
   :deep(.el-color-picker) {
     margin-right: 8px;
   }

components/cusForm/src/FontStyle.vue

@@ -5,7 +5,7 @@
         ><FontColorsOutlined />
         <div class="color-block" :style="{ background: color }"></div>
         <ElColorPicker
-          ref="colorPckerRef"
+          ref="colorPickerRef"
           style="width: 0; height: 0; opacity: 0"
           v-model:value="color"
           @change="handleColorChange"
@@ -64,7 +64,7 @@ const bold = ref(props.value?.bold);
 const italic = ref(props.value?.italic);
 const size = ref(props.value?.size);
 const color = ref(props.value?.color);
-const colorPckerRef = ref<InstanceType<typeof ElColorPicker>>();
+const colorPickerRef = ref<InstanceType<typeof ElColorPicker>>();
 
 const handleUpdate = () => {
   emit("update:value", {
@@ -92,7 +92,7 @@ const handleValueChange = (val: number) => {
   handleUpdate();
 };
 const handleShowColorPicker = () => {
-  colorPckerRef.value?.show();
+  colorPickerRef.value?.show();
 };
 </script>