feat: 日历组件|复选框组件优化

components/CheckBox/index.vue

@@ -1,14 +1,18 @@
 <template>
   <view class="checkbox-wrapper" @click="onChange">
-    <image class="checkbox-icon" :src="isChecked" mode="aspectFit" />
+    <uni-icons
+      class="checkbox-icon"
+      :type="isChecked"
+      :checked="isChecked"
+      :color="iconColor"
+      size="24"
+    />
     <slot></slot>
   </view>
 </template>
 
 <script setup>
 import { computed, defineEmits } from "vue";
-import uncheckedIcon from "./images/unchecked.png";
-import checkedIcon from "./images/checked.png";
 
 const props = defineProps({
   modelValue: {
@@ -21,7 +25,12 @@ const emit = defineEmits(["update:modelValue"]);
 
 // 计算属性，确定当前是否选中
 const isChecked = computed(() => {
-  return props.modelValue ? checkedIcon : uncheckedIcon;
+  return props.modelValue ? "checkbox-filled" : "circle";
+});
+
+// 计算图标颜色
+const iconColor = computed(() => {
+  return props.modelValue ? "#1890FF" : "#00A6FF";
 });
 
 // 切换选中状态

components/CheckBox/styles/index.scss

@@ -1,10 +1,8 @@
 .checkbox-wrapper {
   display: flex;
   align-items: center;
-  
+
   .checkbox-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 8px;
+    margin-right: 6px;
   }
-}
+}