feat(iconPicker): 缓存工作空间

src/module/colorPicker/ColorBox.vue

@@ -5,10 +5,10 @@ export default {
 </script>
 <script setup lang="ts">
 import { Nullable } from '/@src/module/type'
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref } from 'vue'
 import { HSBToHEX, RGBSTo, RGBToHSB } from '/@src/module/colorPicker/colorUtil'
 import ColorPicker from './ColorPicker.vue'
-import { usePosition } from "/@src/use/usePosition";
+import { usePosition } from '/@src/use/usePosition'
 
 interface BoxProps {
   color?: string
@@ -16,7 +16,7 @@ interface BoxProps {
   alpha?: boolean
   format?: 'hex' | 'rgb'
   predefine?: boolean
-  colors?: string[],
+  colors?: string[]
 }
 
 const colorBoxProps = withDefaults(defineProps<BoxProps>(), {
@@ -71,9 +71,7 @@ const triggerSpanStyle = computed(() => {
 })
 
 const colorPickerWrapper = computed(() => {
-  return colorBoxProps.size
+  return colorBoxProps.size ? `layui-colorpicker-${colorBoxProps.size}` : ''
-    ? `layui-colorpicker-${colorBoxProps.size}`
-    : ''
 })
 
 const colorBoxRefEl = ref<HTMLElement | null>(null)
@@ -83,23 +81,18 @@ onMounted(() => {
   console.log('colorPickerRefEl =>>>', colorPickerRefEl.value.teleportRefEl)
   usePosition(colorBoxRefEl.value, colorPickerRefEl.value.teleportRefEl)
 })
-
 </script>
 <template>
-  <div class="layui-unselect layui-colorpicker" ref="colorBoxRefEl">
+  <div ref="colorBoxRefEl" class="layui-unselect layui-colorpicker">
     <span
       :class="[
         {
-          'layui-colorpicker-trigger-bgcolor':
+          'layui-colorpicker-trigger-bgcolor': format == 'rgb' && alpha,
-            format == 'rgb' && alpha,
         },
-        size ? colorPickerWrapper : ''
+        size ? colorPickerWrapper : '',
       ]"
     >
-      <span
+      <span class="layui-colorpicker-trigger-span" :style="triggerSpanStyle">
-        class="layui-colorpicker-trigger-span"
-        :style="triggerSpanStyle"
-      >
         <!-- ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close' -->
         <i
           :class="[
@@ -110,10 +103,10 @@ onMounted(() => {
       </span>
     </span>
     <ColorPicker
+      ref="colorPickerRefEl"
       :visible="true"
       :alpha="alpha"
       :predefine="predefine"
-      ref="colorPickerRefEl"
     ></ColorPicker>
   </div>
 </template>

src/module/colorPicker/ColorPicker.vue

@@ -4,7 +4,7 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 
 interface CProps {
   visible: boolean
@@ -16,15 +16,15 @@ const props = defineProps<CProps>()
 
 const domRefEl = ref<HTMLElement | null>(null)
 defineExpose({
-  teleportRefEl: domRefEl
+  teleportRefEl: domRefEl,
 })
 </script>
 <template>
   <teleport to="body">
     <div
       v-if="visible"
-      class="layui-anim layui-anim-downbit layui-colorpicker-main"
       ref="domRefEl"
+      class="layui-anim layui-anim-downbit layui-colorpicker-main"
     >
       <!--    //颜色面板-->
       <div class="layui-colorpicker-main-wrapper">