feat:设备使用记录

components/checkbox-switch/checkbox-switch.vue

@@ -0,0 +1,73 @@
+<!-- components/checkbox-switch.vue -->
+<template>
+  <view class="custom-checkbox" @click="toggle" :class="{ 'custom-checkbox--checked': modelValue }">
+    <!-- 这里可以用一个图标，或者用CSS绘制一个方框 -->
+    <view class="custom-checkbox__icon">
+      <!-- 示例：使用一个简单的对勾符号 -->
+      <up-icon v-if="modelValue" name="checkbox-mark" color="#FFF" size="15"></up-icon>
+    </view>
+    <text class="custom-checkbox__label" v-if="$slots.default">
+      <slot></slot>
+    </text>
+  </view>
+</template>
+
+<script setup>
+// 1. 定义并接收 props，将其解构赋值
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue'])
+
+// 2. 在函数中使用 props.modelValue
+const toggle = () => {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-checkbox {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  padding: 8rpx;
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    border: 2rpx solid #c8c9cc;
+    border-radius: 6rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10rpx;
+    transition: all 0.2s;
+  }
+
+  &__icon-text {
+    font-size: 24rpx;
+    color: #ffffff;
+  }
+
+  &__label {
+    font-size: 28rpx;
+    color: #606266;
+  }
+
+  // 选中状态的样式
+  &--checked &__icon {
+    background-color: #2979ff;
+    border-color: #2979ff;
+  }
+
+  &--checked &__label {
+    color: #2979ff;
+  }
+}
+</style>