Merge branch 'login-726' of https://git.brother7.cn/zoujing/YGChatCS into main

components/CheckBox/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="checkbox-wrapper" @click="onChange">
+    <image class="checkbox-icon" :src="isChecked" mode="aspectFit" />
+    <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: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// 计算属性，确定当前是否选中
+const isChecked = computed(() => {
+  return props.modelValue ? checkedIcon : uncheckedIcon;
+});
+
+// 切换选中状态
+const onChange = () => {
+  emit("update:modelValue", !props.modelValue);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/CheckBox/propmt.md

@@ -0,0 +1,12 @@
+## 复选框组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.checkbox-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

components/CheckBox/styles/index.scss

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