feat(personalready): ✨ 已中奖的员页面修改switch组件 #96

src/views/Config/Person/PersonAlready.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
 import type { IPersonConfig } from '@/types/storeType'
 import { storeToRefs } from 'pinia'
@@ -6,6 +5,7 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 import PageHeader from '@/components/PageHeader/index.vue'
+import { Switch } from '@/components/ui/switch'
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
 
@@ -129,11 +129,14 @@ const tableColumnsDetail = [
             <span>{{ t('table.luckyPeopleNumber') }}：</span>
             <span>{{ alreadyPersonList.length }}</span>
           </div>
+
           <div class="flex flex-col">
             <div class="form-control">
-              <label class="cursor-pointer label">
-                <span class="label-text">{{ t('table.detail') }}:</span>
-                <input v-model="isDetail" type="checkbox" class="border-solid toggle toggle-primary border-1">
+              <label class="label flex items-center gap-2">
+                <p class="label-text">{{ t('table.detail') }}:</p>
+                <div class="flex items-center">
+                  <Switch v-model="isDetail" class="cursor-pointer" />
+                </div>
               </label>
             </div>
           </div>

src/views/Demo/index.vue

@@ -1,110 +1,10 @@
 <script setup lang='ts'>
-import { refDebounced } from '@vueuse/core'
-import { ChevronRight, ChevronsUpDownIcon } from 'lucide-vue-next'
-import { PopoverArrow } from 'reka-ui'
-import { ref } from 'vue'
-import { Button } from '@/components/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-
-import { useLocalFonts } from '@/hooks/useLocalFonts'
-import { cn } from '@/lib/utils'
-
-const { getFonts, disabled, fonts } = useLocalFonts()
-const open = ref(false)
-const activeKey = ref('Arial')
-const debouncedActiveKey = refDebounced(activeKey, 20)
-const selectedFont = ref('')
-
-function selectFont(selectedValue: any) {
-  open.value = false
-  activeKey.value = ''
-  selectedFont.value = selectedValue
-}
-
-function handelActiveKey(val: string) {
-  activeKey.value = val
-}
-
-function handleScroll() {
-  activeKey.value = ''
-}
+import { Switch } from '@/components/ui/switch'
 </script>
 
 <template>
-  <div class="w-full h-full flex justify-center items-center">
-    <Popover v-model:open="open">
-      <PopoverTrigger as-child :disabled="disabled">
-        <Button
-          variant="outline"
-          role="combobox"
-          :aria-expanded="open"
-          class="w-[200px] justify-between"
-          @click="getFonts"
-        >
-          {{ selectedFont || "选择字体..." }}
-          <ChevronsUpDownIcon class="opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-[200px] p-0">
-        <Command>
-          <CommandInput class="h-9" placeholder="Search framework..." />
-          <CommandList @scroll="handleScroll">
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandGroup>
-              <CommandItem
-                v-for="[key, value] in fonts"
-                :key="key"
-                :value="key"
-                class="w-full hover:bg-gray-200/50"
-                @select="selectFont(key)"
-              >
-                <Popover :open="debouncedActiveKey === key" class="w-full">
-                  <PopoverTrigger class="w-full">
-                    <div :style="{ fontFamily: `${key}` }" class="w-full flex justify-between items-center" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
-                      {{ key }}
-                      <ChevronRight
-                        :class="cn(
-                          'ml-auto',
-                        )"
-                      />
-                    </div>
-                  </PopoverTrigger>
-                  <PopoverContent class="p-2" side="right" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
-                    <PopoverArrow />
-                    <Command>
-                      <CommandGroup>
-                        <CommandItem
-                          v-for="child in value"
-                          :key="child.value"
-                          :value="child.value"
-                          class="w-full hover:bg-gray-200/50"
-                          :style="{ fontFamily: `${key}` }"
-                          @select="selectFont(child.value)"
-                        >
-                          {{ child.name }}
-                        </CommandItem>
-                      </CommandGroup>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+  <div>
+    <Switch class="cursor-pointer" />
   </div>
 </template>