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

src/components.d.ts

@@ -60,6 +60,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     Sonner: typeof import('./components/ui/sonner/Sonner.vue')['default']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    Switch: typeof import('./components/ui/switch/Switch.vue')['default']
     ToTop: typeof import('./components/ToTop/index.vue')['default']
   }
 }

src/components/ui/switch/Switch.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="cn(
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
+    >
+      <slot name="thumb" v-bind="slotProps" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

src/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue"

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>