fix: eslint and lint fixed

src/components/DaiysuiTable/index.vue

@@ -1,69 +1,78 @@
 <script setup lang='ts'>
-import { computed } from 'vue';
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps({
-    data: {
-        type: Array as any,
-        default: [] as any[]
-    },
-    tableColumns: {
-        type: Array,
-        default: [] as any[]
-    },
+  data: {
+    type: Array as any,
+    default: [] as any[],
+  },
+  tableColumns: {
+    type: Array,
+    default: [] as any[],
+  },
 })
-
+const { t } = useI18n()
 const dataColumns = computed<any[]>(() => {
-    // 不带有actions的列
-    const columns = props.tableColumns.filter((item: any) => !item.actions)
+  // 不带有actions的列
+  const columns = props.tableColumns.filter((item: any) => !item.actions)
 
-    return columns
+  return columns
 })
 
 const actionsColumns = computed<any[]>(() => {
-    // 带有actions的列
-    const columns = props.tableColumns.filter((item: any) => item.actions)
+  // 带有actions的列
+  const columns = props.tableColumns.filter((item: any) => item.actions)
 
-    return columns
+  return columns
 })
-
 </script>
 
 <template>
-    <div class="overflow-x-auto">
-        <table class="table min-w-[600px]">
-            <!-- head -->
-            <thead>
-                <tr>
-                    <th></th>
-                    <th v-for="(item, index) in dataColumns" :key="index">{{ item.label }}</th>
-                    <th v-for="(item, index) in actionsColumns" :key="index">{{ $t('table.operation') }}</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody v-if="data.length > 0">
-                <!-- row  -->
-                <tr class="hover" v-for="item in data" :key="item.id">
-                    <th>{{ item.id }}</th>
-                    <td v-for="(column, index) in dataColumns" :key="index">
-                        <span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
-                        <span v-else>{{ item[column.props] }}</span>
-                    </td>
-                    <!-- action -->
-                    <td v-for="(column, index) in actionsColumns" :key="index" class="flex gap-2">
-                        <button class="btn btn-xs" v-for="action in column.actions" :key="action.name" :class="action.type"
-                            @click="action.onClick(item)">{{ action.label }}</button>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody v-else>
-                <tr>
-                    <td colspan="5" class="text-center">{{ $t('table.noneData') }}</td>
-                </tr>
-            </tbody>
-            <!-- foot -->
-
-
-        </table>
-    </div>
+  <div class="overflow-x-auto">
+    <table class="table min-w-[600px]">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th />
+          <th v-for="(item, index) in dataColumns" :key="index">
+            {{ item.label }}
+          </th>
+          <th v-for="(item, index) in actionsColumns" :key="index">
+            {{ t('table.operation') }}
+          </th>
+          <th />
+        </tr>
+      </thead>
+      <tbody v-if="data.length > 0">
+        <!-- row  -->
+        <tr v-for="item in data" :key="item.id" class="hover">
+          <th>{{ item.id }}</th>
+          <td v-for="(column, index) in dataColumns" :key="index">
+            <span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
+            <span v-else>{{ item[column.props] }}</span>
+          </td>
+          <!-- action -->
+          <td v-for="(column, index) in actionsColumns" :key="index" class="flex gap-2">
+            <button
+              v-for="action in column.actions" :key="action.name" class="btn btn-xs" :class="action.type"
+              @click="action.onClick(item)"
+            >
+              {{ action.label }}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <td colspan="5" class="text-center">
+            {{ t('table.noneData') }}
+          </td>
+        </tr>
+      </tbody>
+      <!-- foot -->
+    </table>
+  </div>
 </template>
 
 <style lang='scss' scoped></style>

src/components/HelloWorld.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 
-defineProps<{ msg: string }>();
+defineProps<{ msg: string }>()
 
-const count = ref(0);
-const addCount = () => {
-  count.value++;
-};
+const count = ref(0)
+function addCount() {
+  count.value++
+}
 </script>
 
 <template>
   <div>
-    <h1 class="text-4xl font-bold py-6">{{ msg }}</h1>
+    <h1 class="text-4xl font-bold py-6">
+      {{ msg }}
+    </h1>
 
     <div class="card w-1200px">
       <button
@@ -29,16 +31,16 @@ const addCount = () => {
 
     <p>
       Check out
-      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-        >create-vue</a
-      >, the official Vue + Vite starter
+      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
     </p>
     <p>
       Install
       <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
       in your IDE for a better DX
     </p>
-    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+    <p class="read-the-docs">
+      Click on the Vite and Vue logos to learn more
+    </p>
   </div>
 </template>
 

src/components/ImageSync/index.vue

@@ -1,41 +1,40 @@
 <script setup lang='ts'>
-import {ref,onMounted} from 'vue'
 import localforage from 'localforage'
-const props=defineProps({
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
   imgItem: {
-    type:Object,
-    default:()=>({})
+    type: Object,
+    default: () => ({}),
   },
 })
 const imageDbStore = localforage.createInstance({
-    name: 'imgStore'
+  name: 'imgStore',
 })
 
-const imgUrl=ref('')
+const imgUrl = ref('')
 
+async function getImageStoreItem(item: any): Promise<string> {
+  let image = ''
+  if (item.url === 'Storage') {
+    const key = item.id
+    image = await imageDbStore.getItem(key) as string
+  }
+  else {
+    image = item.url
+  }
 
-const getImageStoreItem=async (item:any):Promise<string>=>{
-    let image=''
-    if(item.url=='Storage'){
-        const key=item.id;
-        image=await imageDbStore.getItem(key) as string
-    }
-    else{
-        image=item.url
-    }
-
-     
-return image
+  return image
 }
 
-onMounted(async ()=>{
-    const image=await getImageStoreItem(props.imgItem)
-    imgUrl.value=image
+onMounted(async () => {
+  const image = await getImageStoreItem(props.imgItem)
+  imgUrl.value = image
 })
 </script>
 
 <template>
-    <img :src="imgUrl" alt="Image" class="object-cover h-full rounded-xl"/>
+  <img :src="imgUrl" alt="Image" class="object-cover h-full rounded-xl">
 </template>
 
 <style lang='scss' scoped>

src/components/NumberSeparate/EditSeparateDialog.vue

@@ -1,99 +1,111 @@
 <script setup lang='ts'>
-import { ref, watch, onMounted, toRefs } from 'vue'
-import { Separate } from '@/types/storeType'
+import type { Separate } from '@/types/storeType'
+import { onMounted, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
-    totalNumber: {
-        type: Number,
-        default: 0
-    },
-    separatedNumber: {
-        type: Array<Separate>,
-        default: []
-    }
+  totalNumber: {
+    type: Number,
+    default: 0,
+  },
+  separatedNumber: {
+    type: Array<Separate>,
+    default: [],
+  },
 })
-
 const emits = defineEmits(['submitData'])
-
+const { t } = useI18n()
 const separatedNumberRef = ref()
 const { separatedNumber, totalNumber } = toRefs(props)
 const scaleList = ref<number[]>([])
-const editScale = (item: number) => {
-    if (item == totalNumber.value) {
-        return
-    }
-    if (scaleList.value.includes(item)) {
-        const index = scaleList.value.indexOf(item)
-        scaleList.value.splice(index, 1)
-        separatedNumber.value.splice(index, 1)
-    }
-    else {
-        scaleList.value.push(item)
-        scaleList.value.sort((a, b) => a - b)
-    }
+function editScale(item: number) {
+  if (item === totalNumber.value) {
+    return
+  }
+  if (scaleList.value.includes(item)) {
+    const index = scaleList.value.indexOf(item)
+    scaleList.value.splice(index, 1)
+    separatedNumber.value.splice(index, 1)
+  }
+  else {
+    scaleList.value.push(item)
+    scaleList.value.sort((a, b) => a - b)
+  }
 }
-const clearData = () => {
-    emits('submitData', separatedNumber.value)
-    separatedNumberRef.value.close()
+function clearData() {
+  emits('submitData', separatedNumber.value)
+  separatedNumberRef.value.close()
 }
 watch(scaleList, (val: number[]) => {
-    separatedNumber.value.length=0
-    for (let i = 1; i < scaleList.value.length; i++) {
-        separatedNumber.value[i - 1] = {
-            id: i.toString(),
-            count: val[i] - val[i - 1],
-            isUsedCount: 0,
-        }
+  separatedNumber.value.length = 0
+  for (let i = 1; i < scaleList.value.length; i++) {
+    separatedNumber.value[i - 1] = {
+      id: i.toString(),
+      count: val[i] - val[i - 1],
+      isUsedCount: 0,
     }
+  }
 }, { deep: true })
 
 watch(totalNumber, (val) => {
-    if (val <= 0) {
-        return
-    }
-    separatedNumberRef.value.showModal()
-    // scaleList.value = [0, val]
-    scaleList.value = new Array(separatedNumber.value.length + 1).fill(totalNumber.value)
-    for (let i = separatedNumber.value.length - 1; i >= 0; i--) {
-        scaleList.value[i] = scaleList.value[i + 1] - separatedNumber.value[i].count
-    }
-    if(scaleList.value[0]!==0){
-        scaleList.value.unshift(0)
-    }
+  if (val <= 0) {
+    return
+  }
+  separatedNumberRef.value.showModal()
+  // scaleList.value = [0, val]
+  scaleList.value = Array.from({ length: separatedNumber.value.length + 1 }).fill(totalNumber.value) as number[]
+  for (let i = separatedNumber.value.length - 1; i >= 0; i--) {
+    scaleList.value[i] = scaleList.value[i + 1] - separatedNumber.value[i].count
+  }
+  if (scaleList.value[0] !== 0) {
+    scaleList.value.unshift(0)
+  }
 })
 onMounted(() => {
-    // 阻止esc事件
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault()
-        }
-    })
+  // 阻止esc事件
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+    }
+  })
 })
 </script>
 
 <template>
-    <dialog id="my_modal_1" ref="separatedNumberRef" class="z-50 overflow-hidden border-none modal">
-        <div class="overflow-hidden modal-box">
-            <h3 class="pb-6 text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
-            <p class="pb-8">{{ $t('dialog.dialogSingleDrawLimit') }}</p>
-            <div class="flex justify-between px-3 text-center separated-number">
-                <div v-for="item in props.totalNumber" :key="item"
-                    class="relative flex flex-col items-center cursor-pointer">
-                    <div class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" :data-tip="$t('tooltip.leftClick')"
-                        @click.left="editScale(item)">
-                        <span> {{ item }}</span>
-                    </div>
-                    <div class="text-center" :class="scaleList.includes(item) ? 'text-red-500 font-extrabold' : ''">|</div>
-                </div>
-            </div>
-            <div class="modal-action">
-                <form method="dialog">
-                    <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn" @click="clearData">{{ $t('button.close') }} }}</button>
-                </form>
-            </div>
+  <dialog id="my_modal_1" ref="separatedNumberRef" class="z-50 overflow-hidden border-none modal">
+    <div class="overflow-hidden modal-box">
+      <h3 class="pb-6 text-lg font-bold">
+        {{ t('dialog.titleTip') }}
+      </h3>
+      <p class="pb-8">
+        {{ t('dialog.dialogSingleDrawLimit') }}
+      </p>
+      <div class="flex justify-between px-3 text-center separated-number">
+        <div
+          v-for="item in props.totalNumber" :key="item"
+          class="relative flex flex-col items-center cursor-pointer"
+        >
+          <div
+            class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" :data-tip="t('tooltip.leftClick')"
+            @click.left="editScale(item)"
+          >
+            <span> {{ item }}</span>
+          </div>
+          <div class="text-center" :class="scaleList.includes(item) ? 'text-red-500 font-extrabold' : ''">
+            |
+          </div>
         </div>
-    </dialog>
+      </div>
+      <div class="modal-action">
+        <form method="dialog">
+          <!-- if there is a button in form, it will close the modal -->
+          <button class="btn" @click="clearData">
+            {{ t('button.close') }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </dialog>
 </template>
 
 <style lang='scss' scoped></style>

src/components/PlayMusic/index.vue

@@ -1,119 +1,127 @@
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted,watch } from 'vue'
-import useStore from '@/store';
-import { storeToRefs } from 'pinia';
+import useStore from '@/store'
 import localforage from 'localforage'
-import { useRouter, useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const audioDbStore = localforage.createInstance({
-    name: 'audioStore'
+  name: 'audioStore',
 })
-const audio=ref(new Audio())
+const audio = ref(new Audio())
 const settingRef = ref()
 // const audio = ref(new Audio())
 const globalConfig = useStore().globalConfig
-const { getMusicList: localMusicList,getCurrentMusic:currentMusic } = storeToRefs(globalConfig);
+const { getMusicList: localMusicList, getCurrentMusic: currentMusic } = storeToRefs(globalConfig)
 // const localMusicListValue = ref(localMusicList)
 
-const play = async (item: any) => {
-    if(!item){
-        return
-    }
-    // if (!audio.value.paused && !skip) {
-    //     audio.value.pause()
+async function play(item: any) {
+  if (!item) {
+    return
+  }
+  // if (!audio.value.paused && !skip) {
+  //     audio.value.pause()
 
-    //     return
-    // }
-    let audioUrl = ''
-    if (!item.url) {
-        return
-    }
-    if (item.url == 'Storage') {
-        audioUrl = await audioDbStore.getItem(item.name) as string
-    }
-    else {
-        audioUrl = item.url
-    }
-    audio.value.pause()
-    audio.value.src = audioUrl
-    audio.value.play()
+  //     return
+  // }
+  let audioUrl = ''
+  if (!item.url) {
+    return
+  }
+  if (item.url === 'Storage') {
+    audioUrl = await audioDbStore.getItem(item.name) as string
+  }
+  else {
+    audioUrl = item.url
+  }
+  audio.value.pause()
+  audio.value.src = audioUrl
+  audio.value.play()
 }
-const playMusic=(item:any,skip = false)=>{
-    if(!item){
-        return
-    }
-    if(!currentMusic.value.paused&&!skip){
-        globalConfig.setCurrentMusic(item,true)
-        
-return
-    }
-    globalConfig.setCurrentMusic(item,false)
+function playMusic(item: any, skip = false) {
+  if (!item) {
+    return
+  }
+  if (!currentMusic.value.paused && !skip) {
+    globalConfig.setCurrentMusic(item, true)
+
+    return
+  }
+  globalConfig.setCurrentMusic(item, false)
 }
-const nextPlay = () => {
-    // 播放下一首
-    if (localMusicList.value.length >= 1) {
-        let index = localMusicList.value.findIndex((item: any) => item.name == currentMusic.value.item.name)
-        index++
-        if (index >= localMusicList.value.length) {
-            index = 0
-        }
-        globalConfig.setCurrentMusic(localMusicList.value[index],false)
+function nextPlay() {
+  // 播放下一首
+  if (localMusicList.value.length >= 1) {
+    let index = localMusicList.value.findIndex((item: any) => item.name === currentMusic.value.item.name)
+    index++
+    if (index >= localMusicList.value.length) {
+      index = 0
     }
+    globalConfig.setCurrentMusic(localMusicList.value[index], false)
+  }
 }
 // 监听播放成后开始下一首
-const onPlayEnd = () => {
-    audio.value.addEventListener('ended', nextPlay)
+function onPlayEnd() {
+  audio.value.addEventListener('ended', nextPlay)
 }
 
-const enterConfig = () => {
-    router.push('/log-lottery/config')
+function enterConfig() {
+  router.push('/log-lottery/config')
 }
-const enterHome = () => {
-    router.push('/log-lottery')
+function enterHome() {
+  router.push('/log-lottery')
 }
 
 onMounted(() => {
-    globalConfig.setCurrentMusic(localMusicList.value[0],true)
-    onPlayEnd()
-    // 不使用空格控制audio
+  globalConfig.setCurrentMusic(localMusicList.value[0], true)
+  onPlayEnd()
+  // 不使用空格控制audio
 })
 onUnmounted(() => {
-    audio.value.removeEventListener('ended', nextPlay)
+  audio.value.removeEventListener('ended', nextPlay)
 })
 watch(currentMusic, (val: any) => {
-    if(!val.paused&&audio.value){
-        play(val.item)
-    }
-    else{
-        audio.value.pause()
-    }
-},{deep:true})
-
+  if (!val.paused && audio.value) {
+    play(val.item)
+  }
+  else {
+    audio.value.pause()
+  }
+}, { deep: true })
 </script>
 
 <template>
-    <div class="flex flex-col gap-3" ref="settingRef">
-        <div v-if="route.path.includes('/config')" class="tooltip tooltip-left" :data-tip="$t('tooltip.toHome')">
-            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                @click="enterHome">
-                <svg-icon name="home"></svg-icon>
-            </div>
-        </div>
-        <div v-else class="tooltip tooltip-left" :data-tip="$t('tooltip.settingConfiguration')">
-            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                @click="enterConfig">
-                <svg-icon name="setting"></svg-icon>
-            </div>
-        </div>
-
-        <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? currentMusic.item.name+'\n\r &nbsp;'+$t('tooltip.nextSong') : $t('tooltip.noSongPlay')">
-            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay">
-                <svg-icon :name="currentMusic.paused ? 'play' : 'pause'"></svg-icon>
-            </div>
-        </div>
+  <div ref="settingRef" class="flex flex-col gap-3">
+    <div v-if="route.path.includes('/config')" class="tooltip tooltip-left" :data-tip="t('tooltip.toHome')">
+      <div
+        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
+        @click="enterHome"
+      >
+        <svg-icon name="home" />
+      </div>
     </div>
+    <div v-else class="tooltip tooltip-left" :data-tip="t('tooltip.settingConfiguration')">
+      <div
+        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
+        @click="enterConfig"
+      >
+        <svg-icon name="setting" />
+      </div>
+    </div>
+
+    <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? `${currentMusic.item.name}\n\r ${t('tooltip.nextSong')}` : t('tooltip.noSongPlay')">
+      <div
+        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
+        @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay"
+      >
+        <svg-icon :name="currentMusic.paused ? 'play' : 'pause'" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>

src/components/StarsBackground/index.vue

@@ -1,37 +1,36 @@
 <script setup lang='ts'>
-import Sparticles from 'sparticles';
-import {ref,onMounted,onUnmounted} from 'vue';
-import { useElementSize } from '@vueuse/core';
+import { useElementSize } from '@vueuse/core'
+import Sparticles from 'sparticles'
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const starRef=ref();
+const starRef = ref()
 
-const { width, height}=useElementSize(starRef);
-let options = ref({ shape: 'star',parallax:1.2,rotate:true,twinkle:true, speed: 10,count:200 });
-function addSparticles(node:any,width:number,height:number) {
-     new Sparticles(node, options.value,width,height);
+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) {
+  // eslint-disable-next-line no-new
+  new Sparticles(node, options.value, width, height)
 }
 // 页面大小改变时
-const listenWindowSize=()=>{
-    window.addEventListener('resize',()=>{
-        if (width.value && height.value) {
-            addSparticles(starRef.value,width.value,height.value);
-        }
-    });
+function listenWindowSize() {
+  window.addEventListener('resize', () => {
+    if (width.value && height.value) {
+      addSparticles(starRef.value, width.value, height.value)
+    }
+  })
 }
 
-onMounted(()=>{
-    addSparticles(starRef.value,width.value,height.value);
-    listenWindowSize()
+onMounted(() => {
+  addSparticles(starRef.value, width.value, height.value)
+  listenWindowSize()
 })
-onUnmounted(()=>{
-    window.removeEventListener('resize',listenWindowSize)
+onUnmounted(() => {
+  window.removeEventListener('resize', listenWindowSize)
 })
-
 </script>
 
 <template>
-    <div class="w-screen h-screen overflow-hidden bg-transparent" ref="starRef">
-    </div>
+  <div ref="starRef" class="w-screen h-screen overflow-hidden bg-transparent" />
 </template>
 
 <style lang='scss' scoped></style>

src/components/SvgIcon/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from 'vue'
+
 const props = defineProps({
   prefix: {
     type: String,
@@ -17,10 +18,11 @@ const props = defineProps({
     type: String,
     default: '24px',
   },
-});
+})
 
-const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+const symbolId = computed(() => `#${props.prefix}-${props.name}`)
 </script>
+
 <template>
   <svg
     aria-hidden="true"
@@ -31,6 +33,7 @@ const symbolId = computed(() => `#${props.prefix}-${props.name}`);
     <use :xlink:href="symbolId" />
   </svg>
 </template>
+
 <style scoped>
 .svg-icon {
   width: 24px;

src/components/ToTop/index.vue

@@ -3,9 +3,9 @@
 </script>
 
 <template>
-<div class="fixed z-50 flex items-center justify-center w-10 h-10 rounded-full shadow-lg cursor-pointer right-12 bottom-12 bg-slate-700 hover:bg-slate-600">
-    <svg-icon name="totop"></svg-icon>
-</div>
+  <div class="fixed z-50 flex items-center justify-center w-10 h-10 rounded-full shadow-lg cursor-pointer right-12 bottom-12 bg-slate-700 hover:bg-slate-600">
+    <svg-icon name="totop" />
+  </div>
 </template>
 
 <style lang='scss' scoped>

src/components/index.ts

@@ -1,5 +1,5 @@
+export { default as Footer } from './Footer/index.vue'
 /**
  *title: 自动导出组件
  */
-export { default as Header } from './Header/index.vue';
-export { default as Footer } from './Footer/index.vue';
+export { default as Header } from './Header/index.vue'