Merge branch 'main_dev' into ft

@@ -104,7 +104,7 @@
     </svg>
 
     <div
-      class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center flex-col"
+      class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
       :style="{ color: getDesign.fontColor }"
     >
       <div>{{ currentValue }}</div>

@@ -97,7 +97,7 @@
       />
     </svg>
     <div
-      class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center flex-col"
+      class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
       :style="{ color: getDesign.fontColor }"
     >
       <div>{{ currentValue }}</div>

@@ -30,6 +30,16 @@
       : transformValue;
   });
 
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { fontColor: presetFontColor } = persetOption || {};
+    const { componentInfo } = option || {};
+    const { fontColor } = componentInfo || {};
+    return {
+      fontColor: fontColor ?? presetFontColor,
+    };
+  });
+
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
@@ -226,12 +236,15 @@
         </g>
       </g>
     </svg>
-    <!-- <div class="absolute w-full h-full flex justify-center items-center bg-transparent">
-      <div class="transform translate-x-full text-lg text-gray-500">
+    <div class="absolute w-full h-full flex justify-center items-center bg-transparent">
+      <div
+        class="transform translate-x-full text-lg text-gray-500"
+        :style="{ color: getDesign.fontColor }"
+      >
         <span>{{ currentValue }}</span>
         <span>{{ '℃' }}</span>
       </div>
-    </div> -->
+    </div>
   </main>
 </template>