style: 💄 格式化代码

src/views/Home/components/HeaderTitle/index.vue

@@ -6,34 +6,34 @@ import { useRouter } from 'vue-router'
 import { rgbToHex } from '@/utils/color'
 
 interface Props {
-  textSize: number
-  textColor: string
-  topTitle: string
-  tableData: any[]
-  setDefaultPersonList: () => void
-  isInitialDone: boolean
-  titleFont: string
-  titleFontSyncGlobal: boolean
+    textSize: number
+    textColor: string
+    topTitle: string
+    tableData: any[]
+    setDefaultPersonList: () => void
+    isInitialDone: boolean
+    titleFont: string
+    titleFontSyncGlobal: boolean
 }
 
 const props = defineProps<Props>()
 const router = useRouter()
 const { tableData, textSize, textColor, topTitle, setDefaultPersonList, titleFont, titleFontSyncGlobal } = toRefs(props)
 const isTextColor = computed(() => {
-  return rgbToHex(textColor.value) !== '#00000000'
+    return rgbToHex(textColor.value) !== '#00000000'
 })
 const titleStyle = computed(() => {
-  const style: CSSProperties = {
-    fontSize: `${textSize.value * 1.5}px`,
-  }
-  if (!titleFontSyncGlobal.value) {
-    style.fontFamily = titleFont.value
-  }
-  if (isTextColor.value) {
-    style.color = textColor.value
-  }
+    const style: CSSProperties = {
+        fontSize: `${textSize.value * 1.5}px`,
+    }
+    if (!titleFontSyncGlobal.value) {
+        style.fontFamily = titleFont.value
+    }
+    if (isTextColor.value) {
+        style.color = textColor.value
+    }
 
-  return style
+    return style
 })
 const { t } = useI18n()
 </script>

src/views/Home/components/OptionsButton/index.vue

@@ -4,13 +4,13 @@ import { useI18n } from 'vue-i18n'
 import { LotteryStatus } from '@/views/Home/type'
 
 interface Props {
-  currentStatus: LotteryStatus
-  tableData: any[]
-  enterLottery: () => void
-  startLottery: () => void
-  stopLottery: () => void
-  continueLottery: () => void
-  quitLottery: () => void
+    currentStatus: LotteryStatus
+    tableData: any[]
+    enterLottery: () => void
+    startLottery: () => void
+    stopLottery: () => void
+    continueLottery: () => void
+    quitLottery: () => void
 }
 const props = defineProps<Props>()
 

src/views/Home/components/PrizeList/index.vue

@@ -11,18 +11,18 @@ import { usePrizeList } from './usePrizeList'
 
 const temporaryPrizeRef = ref()
 const {
-  temporaryPrize,
-  changePersonCount,
-  selectPrize,
-  localImageList,
-  addTemporaryPrize,
-  submitTemporaryPrize,
-  submitData,
-  deleteTemporaryPrize,
-  prizeShow,
-  currentPrize,
-  localPrizeList,
-  isMobile,
+    temporaryPrize,
+    changePersonCount,
+    selectPrize,
+    localImageList,
+    addTemporaryPrize,
+    submitTemporaryPrize,
+    submitData,
+    deleteTemporaryPrize,
+    prizeShow,
+    currentPrize,
+    localPrizeList,
+    isMobile,
 } = usePrizeList(temporaryPrizeRef)
 const selectedPrize = ref<IPrizeConfig | null>()
 </script>

src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue

@@ -5,11 +5,11 @@ import defaultPrizeImage from '@/assets/images/龙.png'
 import { useGsap } from './useGsap'
 
 const props = defineProps<{
-  isMobile: boolean
-  localPrizeList: IPrizeConfig[]
-  currentPrize: IPrizeConfig
-  temporaryPrizeShow: boolean
-  addTemporaryPrize: () => void
+    isMobile: boolean
+    localPrizeList: IPrizeConfig[]
+    currentPrize: IPrizeConfig
+    temporaryPrizeShow: boolean
+    addTemporaryPrize: () => void
 }>()
 
 const prizeShow = defineModel<boolean>('prizeShow')
@@ -19,45 +19,45 @@ const isScroll = ref(false)
 const liRefs = ref([])
 
 const {
-  showUpButton,
-  showDownButton,
-  handleScroll,
+    showUpButton,
+    showDownButton,
+    handleScroll,
 } = useGsap(scrollContainerRef, liRefs, isScroll, prizeShow, props.temporaryPrizeShow)
 
 // 获取ulContainerRef的高度
 function getUlContainerHeight() {
-  if (ulContainerRef.value) {
-    return ulContainerRef.value.offsetHeight
-  }
-  return 0
+    if (ulContainerRef.value) {
+        return ulContainerRef.value.offsetHeight
+    }
+    return 0
 }
 // 获取scrollContainerRef的高度
 function getScrollContainerHeight() {
-  if (scrollContainerRef.value) {
-    return scrollContainerRef.value.offsetHeight
-  }
-  return 0
+    if (scrollContainerRef.value) {
+        return scrollContainerRef.value.offsetHeight
+    }
+    return 0
 }
 
 function getIsScroll() {
-  const ulHeight = getUlContainerHeight()
-  const scrollHeight = getScrollContainerHeight()
-  if (ulHeight > scrollHeight + 20) {
-    isScroll.value = true
-  }
-  else {
-    isScroll.value = false
-    scrollContainerRef.value.style.height = `${ulHeight}px`
-  }
+    const ulHeight = getUlContainerHeight()
+    const scrollHeight = getScrollContainerHeight()
+    if (ulHeight > scrollHeight + 20) {
+        isScroll.value = true
+    }
+    else {
+        isScroll.value = false
+        scrollContainerRef.value.style.height = `${ulHeight}px`
+    }
 }
 
 watch ([prizeShow, () => props.temporaryPrizeShow], (val) => {
-  if (!val[0]) {
-    return
-  }
-  setTimeout (() => {
-    getIsScroll()
-  }, 0)
+    if (!val[0]) {
+        return
+    }
+    setTimeout (() => {
+        getIsScroll()
+    }, 0)
 }, { immediate: true })
 </script>
 

src/views/Home/components/PrizeList/parts/OperationButton.vue

@@ -2,12 +2,12 @@
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
-  addTemporaryPrize: () => void
+    addTemporaryPrize: () => void
 }>()
 const { t } = useI18n()
 const prizeShow = defineModel('prizeShow', {
-  type: Boolean,
-  default: false,
+    type: Boolean,
+    default: false,
 })
 </script>
 

src/views/Home/components/PrizeList/parts/TemporaryDialog.vue

@@ -1,24 +1,24 @@
 <script setup lang='ts'>
 import type { IImage, IPrizeConfig } from '@/types/storeType'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
-  changePersonCount: () => void
-  selectPrize: (prize: IPrizeConfig) => void
-  localImageList: IImage[]
-  submitTemporaryPrize: () => void
-  addTemporaryPrize: () => void
+    changePersonCount: () => void
+    selectPrize: (prize: IPrizeConfig) => void
+    localImageList: IImage[]
+    submitTemporaryPrize: () => void
+    addTemporaryPrize: () => void
 }>()
 const { t } = useI18n()
 const dialogRef = ref<HTMLDialogElement | null>(null)
 const temporaryPrize = defineModel<IPrizeConfig>('temporaryPrize', { required: true })
 function showDialog() {
-  dialogRef.value?.showModal()
+    dialogRef.value?.showModal()
 }
 defineExpose({
-  showDialog,
-  closed,
+    showDialog,
+    closed,
 })
 </script>
 

src/views/Home/components/PrizeList/parts/TemporaryList.vue

@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n'
 import defaultPrizeImage from '@/assets/images/龙.png'
 
 defineProps<{
-  temporaryPrize: IPrizeConfig
-  addTemporaryPrize: () => void
-  deleteTemporaryPrize: () => void
+    temporaryPrize: IPrizeConfig
+    addTemporaryPrize: () => void
+    deleteTemporaryPrize: () => void
 }>()
 
 const { t } = useI18n()

src/views/Home/components/StarsBackground/index.vue

@@ -5,17 +5,17 @@ import Sparticles from 'sparticles'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
-  homeBackground: {
-    type: Object,
-    default: () => ({
-      id: '',
-      name: '',
-      url: '',
-    }),
-  },
+    homeBackground: {
+        type: Object,
+        default: () => ({
+            id: '',
+            name: '',
+            url: '',
+        }),
+    },
 })
 const imageDbStore = localforage.createInstance({
-  name: 'imgStore',
+    name: 'imgStore',
 })
 const imgUrl = ref('')
 const starRef = ref()
@@ -23,40 +23,40 @@ const starRef = ref()
 const { width, height } = useElementSize(starRef)
 const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
 function addSparticles(node: any, width: number, height: number) {
-  const sparticleInstance = new Sparticles(node, options.value, width, height)
-  return sparticleInstance
+    const sparticleInstance = new Sparticles(node, options.value, width, height)
+    return sparticleInstance
 }
 // 页面大小改变时
 function listenWindowSize() {
-  window.addEventListener('resize', () => {
-    if (width.value && height.value) {
-      addSparticles(starRef.value, width.value, height.value)
-    }
-  })
+    window.addEventListener('resize', () => {
+        if (width.value && height.value) {
+            addSparticles(starRef.value, width.value, height.value)
+        }
+    })
 }
 
 async function getImageStoreItem(item: any): Promise<string> {
-  let image = ''
-  if (item.url === 'Storage') {
-    const key = item.id
-    const imageData = await imageDbStore.getItem(key) as any
-    image = URL.createObjectURL(imageData.data)
-  }
-  else {
-    image = item.url
-  }
+    let image = ''
+    if (item.url === 'Storage') {
+        const key = item.id
+        const imageData = await imageDbStore.getItem(key) as any
+        image = URL.createObjectURL(imageData.data)
+    }
+    else {
+        image = item.url
+    }
 
-  return image
+    return image
 }
 onMounted(() => {
-  getImageStoreItem(props.homeBackground).then((image) => {
-    imgUrl.value = image
-  })
-  addSparticles(starRef.value, width.value, height.value)
-  listenWindowSize()
+    getImageStoreItem(props.homeBackground).then((image) => {
+        imgUrl.value = image
+    })
+    addSparticles(starRef.value, width.value, height.value)
+    listenWindowSize()
 })
 onUnmounted(() => {
-  window.removeEventListener('resize', listenWindowSize)
+    window.removeEventListener('resize', listenWindowSize)
 })
 </script>