feat: color-pick

package.json

@@ -33,6 +33,7 @@
     "uuid": "^11.0.0-0",
     "v3-drag-zoom": "^1.1.20",
     "vue": "^3.4.32",
+    "vue-accessible-color-picker": "^5.0.1",
     "vue-echarts": "^7.0.0-beta.0",
     "vue-request": "^2.0.4",
     "vue-router": "^4.2.4"

pnpm-lock.yaml

@@ -45,9 +45,11 @@ specifiers:
   unocss: ^0.61.5
   unplugin-vue-components: ^0.27.3
   unplugin-vue-setup-extend-plus: ^1.0.1
+  uuid: ^11.0.0-0
   v3-drag-zoom: ^1.1.20
   vite: ^4.4.9
   vue: ^3.4.32
+  vue-accessible-color-picker: ^5.0.1
   vue-echarts: ^7.0.0-beta.0
   vue-request: ^2.0.4
   vue-router: ^4.2.4
@@ -72,8 +74,10 @@ dependencies:
   pinia: 2.2.2_typescript@5.5.4+vue@3.5.0
   pinia-plugin-persistedstate: 3.2.3_pinia@2.2.2
   spark-md5: 3.0.2
+  uuid: 11.0.0-0
   v3-drag-zoom: 1.1.20_typescript@5.5.4
   vue: 3.5.0_typescript@5.5.4
+  vue-accessible-color-picker: 5.0.1_vue@3.5.0
   vue-echarts: 7.0.3_echarts@5.5.1+vue@3.5.0
   vue-request: 2.0.4_vue@3.5.0
   vue-router: 4.4.3_vue@3.5.0
@@ -7850,6 +7854,11 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
+  /uuid/11.0.0-0:
+    resolution: {integrity: sha512-gPhXpKFuxFX0BvpbLtzvYQf+aqKWDGL0mpjrIg6k/DgG/VrOdZ4+RbmSeP89UVLsgGxecQ2n7aE6OESwYYnCpg==}
+    hasBin: true
+    dev: false
+
   /uuid/8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -7931,6 +7940,14 @@ packages:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
     dev: true
 
+  /vue-accessible-color-picker/5.0.1_vue@3.5.0:
+    resolution: {integrity: sha512-IaxDTzW652blWmaNNbqQZzORQAbP19sdO7oJ5fvJIfVizWr2fVV+3z39ORI210Ee7l8YiD5FhpOY/XrToQCBwg==}
+    peerDependencies:
+      vue: ^3.2.x
+    dependencies:
+      vue: 3.5.0_typescript@5.5.4
+    dev: false
+
   /vue-demi/0.13.11_vue@3.5.0:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}

src/render/views/DataCheck/ScanImage/ColorPickerDialog.vue

@@ -0,0 +1,64 @@
+<template>
+  <a-modal v-model:open="visible" :width="340" centered @ok="onOk">
+    <template #title> 颜色选择 </template>
+
+    <ColorPicker
+      :color="selectColor"
+      alpha-channel="hide"
+      default-format="hex"
+      @color-change="updateColor"
+    />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { message } from "ant-design-vue";
+import { ColorPicker, ColorChangeDetail } from "vue-accessible-color-picker";
+
+import useModal from "@/hooks/useModal";
+
+defineOptions({
+  name: "ColorPickerDialog",
+});
+
+/* modal */
+const { visible, open, close } = useModal();
+defineExpose({ open, close });
+
+const props = defineProps<{
+  color: string;
+}>();
+const emit = defineEmits(["modified"]);
+
+const selectColor = ref("");
+function updateColor(eventData: ColorChangeDetail) {
+  selectColor.value = eventData.cssColor;
+}
+
+function onOk() {
+  if (!selectColor.value) {
+    message.error("请选择颜色");
+    return;
+  }
+  emit("confirm", selectColor.value);
+  close();
+}
+
+// init
+watch(
+  () => visible.value,
+  (val) => {
+    if (val) {
+      selectColor.value = props.color;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style>
+@import url("vue-accessible-color-picker/styles");
+</style>

src/render/views/DataCheck/ScanImage/FillAreaSetDialog.vue

@@ -9,11 +9,19 @@
       :label-col="{ style: { width: '60px' } }"
     >
       <a-form-item label="未填涂">
-        <div class="color-block color-unfill"></div>
+        <div
+          class="color-block color-unfill"
+          :style="{ backgroundColor: formData.unfillColor }"
+          @click="onEditColor('unfillColor')"
+        ></div>
         <a-checkbox v-model:checked="formData.unfillShow">显示</a-checkbox>
       </a-form-item>
       <a-form-item label="已填涂">
-        <div class="color-block color-fill"></div>
+        <div
+          class="color-block color-fill"
+          :style="{ backgroundColor: formData.fillColor }"
+          @click="onEditColor('fillColor')"
+        ></div>
         <a-checkbox v-model:checked="formData.fillShow">显示</a-checkbox>
       </a-form-item>
       <a-form-item name="borderWidth" label="宽度">
@@ -40,6 +48,12 @@
       </div>
     </template>
   </a-modal>
+
+  <ColorPickerDialog
+    ref="colorPickerDialogRef"
+    :color="curColor"
+    @confirm="onColorConfirm"
+  />
 </template>
 
 <script setup lang="ts">
@@ -50,6 +64,8 @@ import useModal from "@/hooks/useModal";
 import { useUserStore } from "@/store";
 import { objModifyAssign } from "@/utils/tool";
 
+import ColorPickerDialog from "./ColorPickerDialog.vue";
+
 defineOptions({
   name: "FillAreaSetDialog",
 });
@@ -61,7 +77,7 @@ defineExpose({ open, close });
 const userStore = useUserStore();
 
 const defaultFormData = {
-  fillColor: "#f53f3f ",
+  fillColor: "#f53f3f",
   fillShow: true,
   unfillColor: "#165DFF",
   unfillShow: false,
@@ -100,6 +116,26 @@ async function confirm() {
   close();
 }
 
+// color picker
+type EditType = "fillColor" | "unfillColor";
+const curColor = ref("");
+const colorPickerDialogRef = ref();
+const editType = ref<EditType>("fillColor");
+function onEditColor(type: EditType) {
+  curColor.value =
+    type === "fillColor" ? formData.fillColor : formData.unfillColor;
+  editType.value = type;
+  colorPickerDialogRef.value?.open();
+}
+
+function onColorConfirm(val: string) {
+  if (editType.value === "fillColor") {
+    formData.fillColor = val;
+  } else {
+    formData.unfillColor = val;
+  }
+}
+
 /* init modal */
 watch(
   () => visible.value,
@@ -126,12 +162,10 @@ function modalOpenHandle() {
   height: 32px;
   border-radius: 6px;
   margin-right: 8px;
+  cursor: pointer;
 
-  &.color-unfill {
-    background: #165dff;
-  }
-  &.color-fill {
-    background: #f53f3f;
+  &:hover {
+    opacity: 0.8;
   }
 }
 .input-tips {