From b1731ed919eca65c064a803ec7c42ac6f218b231 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Wed, 27 May 2026 13:46:42 +0800
Subject: [PATCH] refactor: swap custom CheckBox for Vant Checkbox

delete unused custom CheckBox component files including .vue, style and doc files
update login page template and imports to use van-checkbox
add VanCheckbox type definitions to global components declarations
---
 components.d.ts                           |  2 ++
 src/components/CheckBox/index.vue         | 39 -----------------------
 src/components/CheckBox/propmt.md         | 12 -------
 src/components/CheckBox/styles/index.scss | 10 ------
 src/pages/login/index.vue                 |  7 ++--
 5 files changed, 5 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/CheckBox/index.vue
 delete mode 100644 src/components/CheckBox/propmt.md
 delete mode 100644 src/components/CheckBox/styles/index.scss

diff --git a/components.d.ts b/components.d.ts
index 3071355..41fb45d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -47,6 +47,7 @@ declare module 'vue' {
     TagsGroup: typeof import('./src/components/TagsGroup/index.vue')['default']
     TopNavBar: typeof import('./src/components/TopNavBar/index.vue')['default']
     UseDateRange: typeof import('./src/components/UseDateRange/index.vue')['default']
+    VanCheckbox: typeof import('vant/es')['Checkbox']
     VanIcon: typeof import('vant/es')['Icon']
     VanIcons: typeof import('vant/es')['Icons']
     VanPopup: typeof import('vant/es')['Popup']
@@ -94,6 +95,7 @@ declare global {
   const TagsGroup: typeof import('./src/components/TagsGroup/index.vue')['default']
   const TopNavBar: typeof import('./src/components/TopNavBar/index.vue')['default']
   const UseDateRange: typeof import('./src/components/UseDateRange/index.vue')['default']
+  const VanCheckbox: typeof import('vant/es')['Checkbox']
   const VanIcon: typeof import('vant/es')['Icon']
   const VanIcons: typeof import('vant/es')['Icons']
   const VanPopup: typeof import('vant/es')['Popup']
diff --git a/src/components/CheckBox/index.vue b/src/components/CheckBox/index.vue
deleted file mode 100644
index 24fc63b..0000000
--- a/src/components/CheckBox/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="checkbox-wrapper" @click.stop="onChange">
-    <uni-icons
-      class="checkbox-icon"
-      :type="isChecked"
-      :checked="isChecked"
-      size="24"
-      color="opacity"
-    />
-    <slot></slot>
-  </div>
-</template>
-
-<script setup>
-import { computed, defineEmits } from "vue";
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-// 计算属性，确定当前是否选中
-const isChecked = computed(() => {
-  return props.modelValue ? "checkbox-filled" : "circle";
-});
-
-// 切换选中状态
-const onChange = () => {
-  emit("update:modelValue", !props.modelValue);
-};
-</script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/components/CheckBox/propmt.md b/src/components/CheckBox/propmt.md
deleted file mode 100644
index a865b92..0000000
--- a/src/components/CheckBox/propmt.md
+++ /dev/null
@@ -1,12 +0,0 @@
-## 复选框组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片高度还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.checkbox-wrapper
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/CheckBox/styles/index.scss b/src/components/CheckBox/styles/index.scss
deleted file mode 100644
index 23392a5..0000000
--- a/src/components/CheckBox/styles/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  .checkbox-icon {
-    margin-right: 6px;
-    color: #0ccd58;
-  }
-}
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 786f04a..4f9780d 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -4,14 +4,14 @@
     <img class="w-[200px] h-[200px]" :src="logo" />
 
     <!-- 协议勾选 -->
-    <div class="w-[304px] mt-[80px] flex items-center">
-      <CheckBox v-model="isAgree">
+    <div class="w-[304px] mt-[80px]">
+      <van-checkbox v-model="isAgree">
         <span class="text-[12px] text-ink-600">我已阅读并同意</span>
         <span class="text-[12px] text-[#2D91FF] mx-[4px]" @click.stop="handleAgreeClick('service')">《服务协议》</span>
         <span class="text-[12px] text-ink-600">和</span>
         <span class="text-[12px] text-[#2D91FF] mx-[4px]" @click.stop="handleAgreeClick('privacy')">《隐私协议》</span>
         <span class="text-[12px] text-ink-600 ml-[30px]">授权与账号关联操作</span>
-      </CheckBox>
+      </van-checkbox>
     </div>
 
     <!-- 按钮区域 -->
@@ -29,7 +29,6 @@
 import { ref, computed } from "vue";
 import { getServiceAgreement, getPrivacyAgreement } from "@/api/login";
 import { onLogin, goBack, onCheckPhoneLogin, onAppleLogin } from "@/hooks/useGoLogin";
-import CheckBox from "@/components/CheckBox/index.vue";
 import AgreePopup from "./components/AgreePopup/index.vue";
 
 // 是否需要微信手机号授权登录