fix:remove ElCheckbox

src/pages/pc/components/BaseTable.vue

@@ -10,9 +10,9 @@ import Input from "@/pages/pc/components/Input.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import Empty from "@/components/Empty.vue";
 import {Icon} from "@iconify/vue";
-import {ElCheckbox} from 'element-plus'
 import Pagination from '@/pages/pc/components/base/Pagination.vue'
 import Toast from '@/pages/pc/components/base/toast/Toast.ts'
+import Checkbox from "@/pages/pc/components/base/checkbox/Checkbox.vue";
 
 let list = defineModel('list')
 
@@ -120,7 +120,7 @@ const s = useSlots()
 
 defineRender(
     () => {
-      const d = (item) => <ElCheckbox
+      const d = (item) => <Checkbox
           modelValue={selectIds.includes(item.id)}
           onChange={() => toggleSelect(item)}
           size="large"/>
@@ -144,9 +144,9 @@ defineRender(
                 ) : (
                     <div class="flex justify-between " v-else>
                       <div class="flex gap-2 items-center">
-                        <ElCheckbox
+                        <Checkbox
                             disabled={!currentList.length}
-                            onClick={() => toggleSelectAll()}
+                            onChange={() => toggleSelectAll()}
                             modelValue={selectAll}
                             size="large"/>
                         <span>{selectIds.length} / {list.value.length}</span>

src/pages/pc/components/Book.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {Dict} from "@/types/types.ts";
 import {Icon} from "@iconify/vue";
-import {ElCheckbox} from 'element-plus';
 import Progress from '@/pages/pc/components/base/Progress.vue'
+import Checkbox from "@/pages/pc/components/base/checkbox/Checkbox.vue";
 
 const props = defineProps<{
   item?: Partial<Dict>;
@@ -39,13 +39,13 @@ const studyProgress = $computed(() => {
       </div>
       <div class="absolute bottom-2 left-4 right-4">
         <Progress v-if="item?.lastLearnIndex || item.complete" class="mt-1"
-                    :percentage="progress"
-                    :show-text="false"></Progress>
+                  :percentage="progress"
+                  :show-text="false"></Progress>
       </div>
-      <ElCheckbox v-if="showCheckbox"
-                  :model-value="checked"
-                  @click.stop="$emit('check')"
-                  class="absolute left-0 bottom-0 h-5!"/>
+      <Checkbox v-if="showCheckbox"
+                :model-value="checked"
+                @change="$emit('check')"
+                class="absolute left-4 bottom-4"/>
       <div class="custom" v-if="item.custom">自定义</div>
     </template>
     <div v-else class="center h-full">

src/pages/pc/components/base/checkbox/Checkbox.vue

@@ -0,0 +1,75 @@
+<template>
+  <label class="checkbox" @click.stop>
+    <input
+        type="checkbox"
+        :checked="modelValue"
+        @change="change"
+    />
+    <span class="checkbox-box">
+      <span class="checkbox-inner"></span>
+    </span>
+    <span class="checkbox-label"><slot/></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  modelValue: Boolean
+})
+
+const emit = defineEmits(['update:modelValue', 'click'])
+
+function change($event) {
+  emit('update:modelValue', $event.target.checked)
+  emit('onChange', $event.target.checked)
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    display: none;
+  }
+
+  .checkbox-box {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #dcdfe6;
+    border-radius: 2px;
+    background-color: #fff;
+    margin-right: 8px;
+    transition: all 0.3s;
+
+    .checkbox-inner {
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 10px;
+      height: 10px;
+      background-color: #409eff;
+      opacity: 0;
+      transition: opacity 0.3s;
+      border-radius: 1px;
+    }
+  }
+
+  input:checked + .checkbox-box .checkbox-inner {
+    opacity: 1;
+  }
+
+  &:hover .checkbox-box {
+    border-color: #409eff;
+  }
+
+  .checkbox-label {
+    font-size: 14px;
+    color: #606266;
+  }
+}
+</style>