refactor: optimize the code

package.json

@@ -16,7 +16,7 @@
     "type-check": "vue-tsc --build --force",
     "report": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "lint": "eslint  --fix  . --ext .vue,.js,.ts,.tsx,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "prepare": "husky",
     "commit": "git-cz"

src/api/user.ts

@@ -1,29 +1,29 @@
-import request from '../utils/request'
+import { request } from '@/utils/request'
 
-export function userinfo(params, data) {
+export function userinfo(params?: any, data?: any) {
   return request({ url: '/user/userinfo', method: 'get', params, data })
 }
 
-export function userVideoList(params, data) {
+export function userVideoList(params?: any, data?: any) {
   return request({ url: '/user/video_list', method: 'get', params, data })
 }
 
-export function panel(params, data) {
+export function panel(params?: any, data?: any) {
   return request({ url: '/user/panel', method: 'get', params, data })
 }
 
-export function friends(params, data) {
+export function friends(params?: any, data?: any) {
   return request({ url: '/user/friends', method: 'get', params, data })
 }
 
-export function userCollect(params, data) {
+export function userCollect(params?: any, data?: any) {
   return request({ url: '/user/collect', method: 'get', params, data })
 }
 
-export function recommendedPost(params, data) {
+export function recommendedPost(params?: any, data?: any) {
   return request({ url: '/post/recommended', method: 'get', params, data })
 }
 
-export function recommendedShop(params, data) {
+export function recommendedShop(params?: any, data?: any) {
   return request({ url: '/shop/recommended', method: 'get', params, data })
 }

src/api/videos.ts

@@ -1,28 +1,29 @@
-import request from '../utils/request'
+import { request } from '@/utils/request'
 
-export function historyOther(params, data) {
+export function historyOther(params?: any, data?: any) {
   return request({ url: '/video/historyOther', method: 'get', params, data })
 }
 
-export function historyVideo(params, data) {
+export function historyVideo(params?: any, data?: any) {
   return request({ url: '/video/history', method: 'get', params, data })
 }
 
-export function recommendedVideo(params, data) {
+export function recommendedVideo(params?: any, data?: any) {
   return request({ url: '/video/recommended', method: 'get', params, data })
 }
 
-export function myVideo(params, data) {
+export function myVideo(params?: any, data?: any) {
   return request({ url: '/video/my', method: 'get', params, data })
 }
 
-export function privateVideo(params, data) {
+export function privateVideo(params?: any, data?: any) {
   return request({ url: '/video/private', method: 'get', params, data })
 }
 
-export function likeVideo(params, data) {
+export function likeVideo(params?: any, data?: any) {
   return request({ url: '/video/like', method: 'get', params, data })
 }
-export function videoComments(params, data) {
+
+export function videoComments(params?: any, data?: any) {
   return request({ url: '/video/comments', method: 'get', params, data })
 }

src/components/slide/SlideAlbum.vue

@@ -236,7 +236,6 @@ const props = defineProps({
     }
   }
 })
-const judgeValue = 20
 const wrapperEl = ref(null)
 
 //用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题

src/components/slide/SlideHorizontal.vue

@@ -22,6 +22,14 @@ const props = defineProps({
     type: String,
     default: () => ''
   },
+  autoplay: {
+    type: Boolean,
+    default: () => false
+  },
+  indicator: {
+    type: Boolean,
+    default: () => false
+  },
   //改变index，是否使用动画
   changeActiveIndexUseAnim: {
     type: Boolean,
@@ -69,6 +77,16 @@ watch(
 onMounted(() => {
   slideInit(wrapperEl.value, state)
 
+  if (props.autoplay) {
+    setInterval(() => {
+      if (state.localIndex === state.wrapper.childrenLength - 1) {
+        emit('update:index', 0)
+      } else {
+        emit('update:index', state.localIndex + 1)
+      }
+    }, 3000)
+  }
+
   //观察子元素数量变动，获取最新数量
   //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件
   ob = new MutationObserver(() => {
@@ -97,6 +115,15 @@ function touchEnd(e: TouchEvent) {
 
 <template>
   <div class="slide horizontal">
+    <div class="indicator-bullets" v-if="indicator && state.wrapper.childrenLength">
+      <div
+        class="bullet"
+        :class="{ active: state.localIndex === item - 1 }"
+        :key="i"
+        v-for="(item, i) in state.wrapper.childrenLength"
+      ></div>
+    </div>
+
     <div
       class="slide-list"
       ref="wrapperEl"
@@ -108,3 +135,28 @@ function touchEnd(e: TouchEvent) {
     </div>
   </div>
 </template>
+
+<style scoped lang="less">
+.indicator-bullets {
+  position: absolute;
+  bottom: 10rem;
+  z-index: 2;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  .bullet {
+    @width: 5rem;
+    width: @width;
+    height: @width;
+    margin: 0 3rem;
+    border-radius: 50%;
+    background: var(--second-btn-color);
+
+    &.active {
+      background: white;
+    }
+  }
+}
+</style>

src/config/index.ts

@@ -16,3 +16,4 @@ export const IS_SUB_DOMAIN = ['GITEE_PAGES', 'GP_PAGES'].includes(import.meta.en
 export const BASE_URL = BASE_URL_MAP[import.meta.env.VITE_ENV]
 export const IMG_URL = BASE_URL + '/images/'
 export const FILE_URL = BASE_URL + '/data/'
+export const IS_DEV = process.env.NODE_ENV !== 'production'

src/mock/index.ts

@@ -3,7 +3,7 @@ import posts6 from '@/assets/data/posts6.json'
 import { _fetch, cloneDeep, random } from '@/utils'
 import { BASE_URL, FILE_URL } from '@/config'
 import { useBaseStore } from '@/store/pinia'
-import axiosInstance from '@/utils/request'
+import { axiosInstance } from '@/utils/request'
 import MockAdapter from 'axios-mock-adapter'
 
 const mock = new MockAdapter(axiosInstance, { delayResponse: 300 })

src/pages/home/SearchPage.vue

@@ -57,7 +57,7 @@
             品牌榜
           </div>
         </div>
-        <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为第个slideitem的高度不一样，高的切到矮的，会闪屏-->
+        <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为每个slideitem的高度不一样，高的切到矮的，会闪屏-->
         <SlideHorizontal v-model:index="data.slideIndex" :style="slideListHeight">
           <SlideItem>
             <div class="slide0" ref="slide0">
@@ -179,7 +179,7 @@
                 <div class="brands">
                   <div
                     class="brand"
-                    @click="toggleKey(key)"
+                    @click="toggleKey(key, i)"
                     :key="i"
                     :class="{ active: key === data.selectBrandKey }"
                     v-for="(key, i) in Object.keys(data.brandRankList)"
@@ -198,7 +198,6 @@
                       <div class="avatar-wrapper" :class="item.living ? 'living' : ''">
                         <div class="avatar-out-line"></div>
                         <img v-lazy="_checkImgUrl(item.logo)" alt="" class="avatar" />
-                        <!--                      <img :src="item.logo" class="avatar">-->
                       </div>
                       <div class="desc">{{ item.name }}</div>
                     </div>
@@ -211,7 +210,7 @@
                 <div class="more" @click="_no">查看完整品牌榜 ></div>
               </div>
 
-              <SlideRowList :autoplay="true" indicatorType="bullets">
+              <SlideHorizontal v-model:index="data.adIndex" :autoplay="true" indicator>
                 <SlideItem>
                   <div class="ad">AD1</div>
                 </SlideItem>
@@ -236,7 +235,7 @@
                 <SlideItem>
                   <div class="ad">AD8</div>
                 </SlideItem>
-              </SlideRowList>
+              </SlideHorizontal>
             </div>
           </SlideItem>
         </SlideHorizontal>
@@ -247,11 +246,8 @@
 <script setup lang="ts">
 import Search from '../../components/Search.vue'
 import Dom from '../../utils/dom'
-import { computed, nextTick, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, watch } from 'vue'
 import { _checkImgUrl, _formatNumber, _no, _showSimpleConfirmDialog, sampleSize } from '@/utils'
-
-import { useBaseStore } from '@/store/pinia'
-import { onMounted, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
 
@@ -261,9 +257,9 @@ defineOptions({
 
 const router = useRouter()
 const nav = useNav()
-const store = useBaseStore()
 const data = reactive({
   isExpand: false,
+  adIndex: 0,
   history: [
     '历史记录1',
     '历史记录2',
@@ -696,7 +692,7 @@ watch(
         } else {
           data.selectBrandKeyIndex++
         }
-        data.selectBrandKey = brandListKeys[data.selectBrandKeyIndex]
+        data.selectBrandKey = brandListKeys.value[data.selectBrandKeyIndex]
       }, 3000)
     } else {
       clearInterval(data.timer)
@@ -710,8 +706,9 @@ onMounted(() => {
   refresh()
 })
 
-function toggleKey(key) {
+function toggleKey(key: string, i: number) {
   data.selectBrandKey = key
+  data.selectBrandKeyIndex = i
   clearInterval(data.timer)
 }
 

src/pages/home/slide/SlideList.vue

@@ -89,7 +89,7 @@ async function getData(refresh = false) {
   })
   // console.log('getSlide4Data-', 'refresh', refresh, res)
   baseStore.loading = false
-  if (res.code === 200) {
+  if (res.success) {
     state.totalSize = res.data.total
     if (refresh) {
       state.list = []

src/pages/me/Me.vue

@@ -382,10 +382,11 @@ import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils'
 import { likeVideo, myVideo, privateVideo } from '@/api/videos'
 import { useBaseStore } from '@/store/pinia'
 import { userCollect } from '@/api/user'
+import SlideRowList from '@/components/slide/SlideRowList.vue'
 
 export default {
   name: 'Me',
-  components: { Posters, Indicator, ConfirmDialog },
+  components: { SlideRowList, Posters, Indicator, ConfirmDialog },
   data() {
     return {
       previewImg: '',
@@ -473,7 +474,7 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => {
+    nextTick(() => {
       this.refs.header = this.$refs.header
       this.refs.headerHeight = this.$refs.header.offsetHeight
       this.refs.descHeight = this.$refs.desc.offsetHeight
@@ -537,7 +538,7 @@ export default {
           this.loadings['loading' + newVal] = true
           let res = await userCollect()
           console.log('res', res)
-          if (res.code === this.SUCCESS) this.videos.collect = res.data
+          if (res.success) this.videos.collect = res.data
         }
       } else {
         if (videoOb.total === -1) {
@@ -549,21 +550,21 @@ export default {
                 pageNo: this.videos.my.pageNo,
                 pageSize: this.pageSize
               })
-              if (res.code === this.SUCCESS) this.videos.my = res.data
+              if (res.success) this.videos.my = res.data
               break
             case 1:
               res = await privateVideo({
                 pageNo: this.videos.private.pageNo,
                 pageSize: this.pageSize
               })
-              if (res.code === this.SUCCESS) this.videos.private = res.data
+              if (res.success) this.videos.private = res.data
               break
             case 2:
               res = await likeVideo({
                 pageNo: this.videos.like.pageNo,
                 pageSize: this.pageSize
               })
-              if (res.code === this.SUCCESS) this.videos.like = res.data
+              if (res.success) this.videos.like = res.data
               break
           }
         }
@@ -627,7 +628,7 @@ export default {
             break
         }
         this.loadings['loading' + this.contentIndex] = false
-        if (res.code === this.SUCCESS) {
+        if (res.success) {
           videoOb.list = videoOb.list.concat(res.data.list)
         }
       }

src/pages/me/MyMusic.vue

@@ -168,10 +168,8 @@ import IndicatorLight from '../../components/slide/IndicatorLight.vue'
 import GuessMusic from './components/GuessMusic.vue'
 import Loading from '../../components/Loading.vue'
 import { userCollect } from '@/api/user'
-import { useBaseStore } from '@/store/pinia'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useNav } from '@/utils/hooks/useNav'
 import { _checkImgUrl, _duration, _no } from '@/utils'
 
 defineOptions({

src/pages/me/components/SlideItemMusic.vue

@@ -214,7 +214,7 @@ export default {
       this.loading = true
       let res = await userCollect()
       this.loading = false
-      if (res.code === this.SUCCESS) {
+      if (res.success) {
         this.collectMusic = res.data.music.list.slice(0, 2)
         this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
       }

src/pages/me/rightMenu/LookHistory.vue

@@ -16,7 +16,7 @@
         v-model:active-index="data.currentSlideItemIndex"
       >
       </Indicator>
-      <SlideHorizontal v-model:index="data.currentSlideItemIndex" class="SlideRowList">
+      <SlideHorizontal v-model:index="data.currentSlideItemIndex" class="SlideHorizontal">
         <SlideItem class="tab1" style="overflow: auto">
           <Scroll class="Scroll" @pulldown="getHistoryVideo">
             <Posters :list="data.historyVideo.list" v-if="data.historyVideo.total"></Posters>
@@ -150,7 +150,7 @@ function clear() {
   .content {
     padding-top: 60rem;
 
-    .SlideRowList,
+    .SlideHorizontal,
     .Scroll {
       height: calc(
         var(--vh, 1vh) * 100 - var(--indicator-height) - var(--common-header-height)

src/pages/message/RedPacketDetail.vue

@@ -21,8 +21,6 @@
 <script setup lang="ts">
 import { useBaseStore } from '@/store/pinia'
 import { _checkImgUrl, _no } from '@/utils'
-import { useRouter } from 'vue-router'
-import { useNav } from '@/utils/hooks/useNav'
 
 defineOptions({
   name: 'RedPacketDetail'
@@ -36,8 +34,6 @@ defineProps({
     }
   }
 })
-const router = useRouter()
-const nav = useNav()
 const store = useBaseStore()
 </script>
 

src/pages/message/Share2Friend.vue

@@ -181,10 +181,7 @@
 <script setup lang="ts">
 import Check from '../../components/Check.vue'
 import { friends } from '@/api/user'
-
-import { useBaseStore } from '@/store/pinia'
 import { onMounted, reactive, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
 import { _checkImgUrl, cloneDeep } from '@/utils'
 
@@ -192,9 +189,7 @@ defineOptions({
   name: 'Share2Friend'
 })
 
-const router = useRouter()
 const nav = useNav()
-const store = useBaseStore()
 const data = reactive({
   isCreateChat: false,
   searchKey: '',

src/pages/message/chat/Chat.vue

@@ -499,9 +499,6 @@ onUnmounted(() => {
 const isExpand = computed(() => {
   return data.showOption
 })
-const isTyping = computed(() => {
-  return data.typing || isExpand
-})
 
 function handleClick() {
   data.recording = true

src/pages/message/chat/ChatDetail.vue

@@ -61,10 +61,7 @@ import Switches from '../components/swtich/switches.vue'
 import People from '../../people/components/People.vue'
 import BlockDialog from '../components/BlockDialog.vue'
 import CONST_VAR from '../../../utils/const_var'
-
-import { useBaseStore } from '@/store/pinia'
 import { onMounted, reactive } from 'vue'
-import { useRouter } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
 import { _showConfirmDialog } from '@/utils'
 
@@ -72,9 +69,7 @@ defineOptions({
   name: 'ChatDetail'
 })
 
-const router = useRouter()
 const nav = useNav()
-const store = useBaseStore()
 const data = reactive({
   noMessage: false,
   top: false,

src/pages/message/notice/NoticeSetting.vue

@@ -74,11 +74,8 @@
 </template>
 <script setup lang="ts">
 import Switches from '../components/swtich/switches.vue'
-
-import { useBaseStore } from '@/store/pinia'
 import { onMounted, reactive } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
-import { useNav } from '@/utils/hooks/useNav'
 
 defineOptions({
   name: 'NoticeSetting'
@@ -92,10 +89,7 @@ defineProps({
     }
   }
 })
-const router = useRouter()
 const route = useRoute()
-const nav = useNav()
-const store = useBaseStore()
 const data = reactive({
   option: true,
   option1: false,

src/pages/people/FollowAndFans.vue

@@ -62,14 +62,13 @@ import Search from '../../components/Search.vue'
 import Indicator from '../../components/slide/Indicator.vue'
 import { useBaseStore } from '@/store/pinia'
 import { onMounted, reactive, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
 
 defineOptions({
   name: 'FindAcquaintance'
 })
 
-const router = useRouter()
 const route = useRoute()
 const nav = useNav()
 const store = useBaseStore()

src/store/pinia.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { friends, panel } from '@/api/user.ts'
+import { friends, panel } from '@/api/user'
 import enums from '@/utils/enums'
 import resource from '@/assets/data/resource'
 
@@ -58,7 +58,7 @@ export const useBaseStore = defineStore('base', {
     async init() {
       const r = await panel()
       if (r.success) {
-        this.userinfo = r.data
+        this.userinfo = Object.assign(this.userinfo, r.data)
       }
       const r2 = await friends()
       if (r2.success) {

src/utils/dom.ts

@@ -1,7 +1,7 @@
 export default class Dom {
   els = []
 
-  constructor(arg) {
+  constructor(arg?: any) {
     if (typeof arg === 'string') {
       return this.find(arg)
     }
@@ -35,7 +35,7 @@ export default class Dom {
   }
 
   find(tag) {
-    let els = []
+    let els: any = []
     if (this.els.length) {
       els = this.els[0].querySelectorAll(tag)
     } else {
@@ -48,7 +48,7 @@ export default class Dom {
   }
 
   create(template) {
-    let tempNode = document.createElement('div')
+    const tempNode = document.createElement('div')
     tempNode.innerHTML = template.trim()
     this.els = [tempNode.firstChild]
     return this
@@ -101,7 +101,7 @@ export default class Dom {
   }
 
   on(eventName, fn) {
-    let eventArray = eventName.split(' ')
+    const eventArray = eventName.split(' ')
     this.els.forEach((el) => {
       eventArray.map((event) => {
         el.addEventListener(event, fn)
@@ -111,7 +111,7 @@ export default class Dom {
   }
 
   trigger(eventName) {
-    let eventArray = eventName.split(' ')
+    const eventArray = eventName.split(' ')
     this.els.forEach((el) => {
       eventArray.map((event) => {
         el.dispatchEvent(new Event(event))
@@ -129,7 +129,7 @@ export default class Dom {
   }
 
   getStyleValue(key, value) {
-    let whiteList = ['top', 'left', 'right', 'bottom']
+    const whiteList = ['top', 'left', 'right', 'bottom']
     if (whiteList.find((v) => v === key)) {
       if (typeof value === 'number') {
         return value + 'px'

src/utils/index.tsx

@@ -1,10 +1,10 @@
 import * as Vue from 'vue'
-import SelectDialog from '../components/dialog/SelectDialog'
+import SelectDialog from '../components/dialog/SelectDialog.vue'
-import SimpleConfirmDialog from '../components/dialog/SimpleConfirmDialog'
+import SimpleConfirmDialog from '../components/dialog/SimpleConfirmDialog.vue'
-import ConfirmDialog from '../components/dialog/ConfirmDialog'
+import ConfirmDialog from '../components/dialog/ConfirmDialog.vue'
 import Loading from '../components/Loading.vue'
-import Config, { IMG_URL } from '../config'
+import Config, { IMG_URL, IS_DEV } from '../config'
-import NoticeDialog from '../components/dialog/NoticeDialog'
+import NoticeDialog from '../components/dialog/NoticeDialog.vue'
 import dayjs from 'dayjs'
 import bus, { EVENT_KEY } from './bus'
 import { ArchiveReader, libarchiveWasm } from 'libarchive-wasm'
@@ -16,24 +16,24 @@ const Utils = {
         return <Loading />
       }
     })
-    let parent = document.createElement('div')
+    const parent = document.createElement('div')
     parent.classList.add(...['dialog-ctn'])
     document.body.append(parent)
     app.mount(parent)
   },
   $hideLoading() {
-    let parent = document.querySelector('.dialog-ctn')
+    const parent = document.querySelector('.dialog-ctn')
     parent.remove()
   },
   $showSelectDialog(sexList, cb) {
-    let remove = () => {
+    const remove = () => {
-      let parent = document.querySelector('.dialog-ctn')
+      const parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
       setTimeout(() => {
         parent.remove()
       }, 300)
     }
-    let tempCb = (e) => {
+    const tempCb = (e) => {
       remove()
       cb(e)
     }
@@ -42,7 +42,7 @@ const Utils = {
         return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb} />
       }
     })
-    let parent = document.createElement('div')
+    const parent = document.createElement('div')
     parent.classList.add(...['dialog-ctn', 'fade-in'])
     document.body.append(parent)
     app.mount(parent)
@@ -51,18 +51,18 @@ const Utils = {
     if (!cancelCb) {
       cancelCb = () => {}
     }
-    let remove = () => {
+    const remove = () => {
-      let parent = document.querySelector('.dialog-ctn')
+      const parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
       setTimeout(() => {
         parent.remove()
       }, 300)
     }
-    let tempOkCb = (e) => {
+    const tempOkCb = (e) => {
       remove()
       okCb(e)
     }
-    let tempCancelCb = (e) => {
+    const tempCancelCb = (e) => {
       remove()
       cancelCb(e)
     }
@@ -80,7 +80,7 @@ const Utils = {
         )
       }
     })
-    let parent = document.createElement('div')
+    const parent = document.createElement('div')
     parent.classList.add(...['dialog-ctn', 'fade-in'])
     document.body.append(parent)
     app.mount(parent)
@@ -95,18 +95,18 @@ const Utils = {
     cancelText,
     cancelTextColor
   ) {
-    let remove = () => {
+    const remove = () => {
-      let parent = document.querySelector('.dialog-ctn')
+      const parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
       setTimeout(() => {
         parent.remove()
       }, 300)
     }
-    let tempOkCb = (e) => {
+    const tempOkCb = (e) => {
       remove()
       okCb && okCb(e)
     }
-    let tempCancelCb = (e) => {
+    const tempCancelCb = (e) => {
       remove()
       cancelCb && cancelCb(e)
     }
@@ -127,20 +127,20 @@ const Utils = {
         )
       }
     })
-    let parent = document.createElement('div')
+    const parent = document.createElement('div')
     parent.classList.add(...['dialog-ctn', 'fade-in'])
     document.body.append(parent)
     app.mount(parent)
   },
   $showNoticeDialog(title, subtitle, subtitleColor, cancelCb, cancelText) {
-    let remove = () => {
+    const remove = () => {
-      let parent = document.querySelector('.dialog-ctn')
+      const parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
       setTimeout(() => {
         parent.remove()
       }, 300)
     }
-    let tempCancelCb = (e) => {
+    const tempCancelCb = (e) => {
       remove()
       cancelCb(e)
     }
@@ -158,13 +158,13 @@ const Utils = {
         )
       }
     })
-    let parent = document.createElement('div')
+    const parent = document.createElement('div')
     parent.classList.add(...['dialog-ctn', 'fade-in'])
     document.body.append(parent)
     app.mount(parent)
   },
   $notice(val) {
-    let div = document.createElement('div')
+    const div = document.createElement('div')
     div.classList.add('global-notice')
     div.textContent = val
     document.body.append(div)
@@ -294,7 +294,7 @@ const Utils = {
     localStorage.setItem(key, JSON.stringify(value))
   },
   $storageGet(key, defaultValue = '') {
-    let res = localStorage.getItem(key)
+    const res = localStorage.getItem(key)
     if (res) {
       return JSON.parse(res)
     }
@@ -340,9 +340,9 @@ const Utils = {
     if (String(time).length === 10) {
       time = time * 1000
     }
-    let date = new dayjs(time)
+    const date = new dayjs(time)
-    let now = new dayjs()
+    const now = new dayjs()
-    let d = now.valueOf() - date.valueOf()
+    const d = now.valueOf() - date.valueOf()
     let str = ''
     if (d < 1000 * 60) {
       str = '刚刚'
@@ -365,16 +365,16 @@ const Utils = {
   },
   $duration(v) {
     if (!v) return '00:00'
-    let m = Math.floor(v / 60)
+    const m = Math.floor(v / 60)
     // let s = v % 60
-    let s = Math.round(v % 60)
+    const s = Math.round(v % 60)
-    let str = ''
+    let str: string = ''
     if (m === 0) {
       str = '00'
     } else if (m > 0 && m < 10) {
       str = '0' + m
     } else {
-      str = m
+      str = m + ''
     }
     str += ':'
     if (s === 0) {
@@ -406,13 +406,13 @@ const Utils = {
     return Math.hypot(stop.x - start.x, stop.y - start.y)
   },
   updateItem(props, key, val, emit) {
-    let old = cloneDeep(props.item)
+    const old = cloneDeep(props.item)
     old[key] = val
     emit('update:item', old)
     bus.emit(EVENT_KEY.UPDATE_ITEM, { position: props.position, item: old })
   },
   copy(val) {
-    let textarea = document.createElement('textarea')
+    const textarea = document.createElement('textarea')
     document.body.appendChild(textarea)
     textarea.style.position = 'absolute'
     textarea.style.clip = 'rect(0 0 0 0)'
@@ -433,7 +433,7 @@ export function _dateFormat(val, type) {
 }
 
 export function $no() {
-  Utils.$no(arguments)
+  Utils.$no()
 }
 
 export function $notice(val) {
@@ -496,10 +496,10 @@ export function random(min, max) {
 }
 
 export function sampleSize(arr, num) {
-  let list = []
+  const list = []
-  let indexs = []
+  const indexs = []
   while (list.length !== num) {
-    let j = random(0, arr.length - 1)
+    const j = random(0, arr.length - 1)
     if (!indexs.includes(j)) {
       list.push(arr[j])
       indexs.push(j)
@@ -514,26 +514,26 @@ export function _showLoading() {
       return <Loading />
     }
   })
-  let parent = document.createElement('div')
+  const parent = document.createElement('div')
   parent.classList.add(...['dialog-ctn'])
   document.body.append(parent)
   app.mount(parent)
 }
 
 export function _hideLoading() {
-  let parent = document.querySelector('.dialog-ctn')
+  const parent = document.querySelector('.dialog-ctn')
   parent.remove()
 }
 
 export function _showSelectDialog(sexList, cb) {
-  let remove = () => {
+  const remove = () => {
-    let parent = document.querySelector('.dialog-ctn')
+    const parent = document.querySelector('.dialog-ctn')
     parent.classList.replace('fade-in', 'fade-out')
     setTimeout(() => {
       parent.remove()
     }, 300)
   }
-  let tempCb = (e) => {
+  const tempCb = (e) => {
     remove()
     cb(e)
   }
@@ -542,7 +542,7 @@ export function _showSelectDialog(sexList, cb) {
       return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb} />
     }
   })
-  let parent = document.createElement('div')
+  const parent = document.createElement('div')
   parent.classList.add(...['dialog-ctn', 'fade-in'])
   document.body.append(parent)
   app.mount(parent)
@@ -552,18 +552,18 @@ export function _showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelTe
   if (!cancelCb) {
     cancelCb = () => {}
   }
-  let remove = () => {
+  const remove = () => {
-    let parent = document.querySelector('.dialog-ctn')
+    const parent = document.querySelector('.dialog-ctn')
     parent.classList.replace('fade-in', 'fade-out')
     setTimeout(() => {
       parent.remove()
     }, 300)
   }
-  let tempOkCb = (e) => {
+  const tempOkCb = (e) => {
     remove()
     okCb(e)
   }
-  let tempCancelCb = (e) => {
+  const tempCancelCb = (e) => {
     remove()
     cancelCb(e)
   }
@@ -581,7 +581,7 @@ export function _showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelTe
       )
     }
   })
-  let parent = document.createElement('div')
+  const parent = document.createElement('div')
   parent.classList.add(...['dialog-ctn', 'fade-in'])
   document.body.append(parent)
   app.mount(parent)
@@ -597,18 +597,18 @@ export function _showConfirmDialog(
   cancelText,
   cancelTextColor
 ) {
-  let remove = () => {
+  const remove = () => {
-    let parent = document.querySelector('.dialog-ctn')
+    const parent = document.querySelector('.dialog-ctn')
     parent.classList.replace('fade-in', 'fade-out')
     setTimeout(() => {
       parent.remove()
     }, 300)
   }
-  let tempOkCb = (e) => {
+  const tempOkCb = (e) => {
     remove()
     okCb && okCb(e)
   }
-  let tempCancelCb = (e) => {
+  const tempCancelCb = (e) => {
     remove()
     cancelCb && cancelCb(e)
   }
@@ -629,21 +629,21 @@ export function _showConfirmDialog(
       )
     }
   })
-  let parent = document.createElement('div')
+  const parent = document.createElement('div')
   parent.classList.add(...['dialog-ctn', 'fade-in'])
   document.body.append(parent)
   app.mount(parent)
 }
 
 export function _showNoticeDialog(title, subtitle, subtitleColor, cancelCb, cancelText) {
-  let remove = () => {
+  const remove = () => {
-    let parent = document.querySelector('.dialog-ctn')
+    const parent = document.querySelector('.dialog-ctn')
     parent.classList.replace('fade-in', 'fade-out')
     setTimeout(() => {
       parent.remove()
     }, 300)
   }
-  let tempCancelCb = (e) => {
+  const tempCancelCb = (e) => {
     remove()
     cancelCb(e)
   }
@@ -661,14 +661,14 @@ export function _showNoticeDialog(title, subtitle, subtitleColor, cancelCb, canc
       )
     }
   })
-  let parent = document.createElement('div')
+  const parent = document.createElement('div')
   parent.classList.add(...['dialog-ctn', 'fade-in'])
   document.body.append(parent)
   app.mount(parent)
 }
 
 export function _notice(val) {
-  let div = document.createElement('div')
+  const div = document.createElement('div')
   div.classList.add('global-notice')
   div.textContent = val
   document.body.append(div)
@@ -682,15 +682,19 @@ export function _no() {
 }
 
 /**
- * 逃避国内某pages，因为json文件被提示有违禁词，json压缩成7z文件，7z和zip文件被屏蔽了，所以7z重命名为md
+ * 逃避国内某pages审查，因为json文件被提示有违禁词，json压缩成7z文件，7z和zip文件被屏蔽了，所以7z重命名为md
  * @param url
- * @returns {Promise<unknown>}
+ * @returns Promise<{ json(): Promise<any> } | Response>
- * @private
+ * @privateF
  */
-export async function _fetch(url) {
+export async function _fetch(url: string): Promise<{ json(): Promise<any> } | Response> {
+  if (IS_DEV) {
+    url = url.replace('.md', '.json')
+    return fetch(url)
+  } else {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve) => {
-    let r = await fetch(url)
+      const r = await fetch(url)
       if (url.includes('.md')) {
         // console.time()
         const data = await r.arrayBuffer()
@@ -698,7 +702,7 @@ export async function _fetch(url) {
         const reader = new ArchiveReader(mod, new Int8Array(data))
         for (const entry of reader.entries()) {
           if (entry.getPathname().endsWith('.json')) {
-          let data = new TextDecoder().decode(entry.readData())
+            const data = new TextDecoder().decode(entry.readData())
             resolve({
               json() {
                 return Promise.resolve(JSON.parse(data))
@@ -713,3 +717,4 @@ export async function _fetch(url) {
       }
     })
   }
+}

src/utils/mixin.ts

@@ -1,14 +1,13 @@
 import globalMethods from './index'
-import BaseHeader from '../components/BaseHeader'
+import BaseHeader from '../components/BaseHeader.vue'
-import SlideRowList from '../components/slide/SlideRowList'
+import SlideItem from '../components/slide/SlideItem.vue'
-import SlideItem from '../components/slide/SlideItem'
+import Indicator from '../components/slide/Indicator.vue'
-import Indicator from '../components/slide/Indicator'
+import BaseFooter from '../components/BaseFooter.vue'
-import BaseFooter from '../components/BaseFooter'
 import BaseMask from '../components/BaseMask.vue'
-import NoMore from '../components/NoMore'
+import NoMore from '../components/NoMore.vue'
-import Back from '../components/Back'
+import Back from '../components/Back.vue'
-import Loading from '../components/Loading'
+import Loading from '../components/Loading.vue'
-import BaseButton from '../components/BaseButton'
+import BaseButton from '../components/BaseButton.vue'
 import CONST_VAR from './const_var'
 import Dom from './dom'
 import bus, { EVENT_KEY } from './bus'
@@ -20,7 +19,6 @@ export default {
   components: {
     BaseHeader,
     SlideHorizontal,
-    SlideRowList,
     SlideItem,
     Indicator,
     BaseFooter,
@@ -58,7 +56,7 @@ export default {
         let pressTimer = null
         // 定义函数处理程序
         // 创建计时器（ 1秒后执行函数 ）
-        let start = (e) => {
+        const start = (e) => {
           if (e.type === 'click' && e.button !== 0) {
             return
           }
@@ -70,7 +68,7 @@ export default {
           }
         }
         // 取消计时器
-        let cancel = () => {
+        const cancel = () => {
           // 检查计时器是否有值
           if (pressTimer !== null) {
             clearTimeout(pressTimer)
@@ -115,16 +113,16 @@ export default {
         let clickTimer = null
         let dbClickTimer = null
         let lastClickTime = null
-        let checkTime = 200
+        const checkTime = 200
-        let dbCheckCancelTime = 500
+        const dbCheckCancelTime = 500
 
-        let dbClick = (e) => {
+        const dbClick = (e) => {
           // console.log('dbClick')
-          let id = 'a' + Date.now()
+          const id = 'a' + Date.now()
-          let elWidth = 80
+          const elWidth = 80
-          let rotate = random(0, 1)
+          const rotate = random(0, 1)
-          let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${new URL('../assets/img/icon/loved.svg', import.meta.url).href}">`
+          const template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${new URL('../assets/img/icon/loved.svg', import.meta.url).href}">`
-          let el = new Dom().create(template)
+          const el = new Dom().create(template)
           el.css({ top: e.y - elWidth - 40, left: e.x - elWidth / 2 })
           new Dom(`#${binding.value}`).append(el)
           setTimeout(() => {
@@ -132,14 +130,14 @@ export default {
           }, 1000)
         }
 
-        let check = (e) => {
+        const check = (e) => {
           if (isDbClick) {
             clearTimeout(dbClickTimer)
             dbClick(e)
             dbClickTimer = setTimeout(() => (isDbClick = false), dbCheckCancelTime)
             return
           }
-          let nowTime = new Date().getTime()
+          const nowTime = new Date().getTime()
           if (nowTime - lastClickTime < checkTime) {
             clearTimeout(clickTimer)
             dbClick(e)

src/utils/request.ts

@@ -1,8 +1,8 @@
-import axios from 'axios'
+import axios, { type AxiosError, type AxiosRequestConfig, type AxiosResponse } from 'axios'
 import config from '@/config'
 import globalMethods from './index'
 
-const axiosInstance = axios.create({
+export const axiosInstance = axios.create({
   baseURL: config.baseUrl,
   timeout: 60000
 })
@@ -26,7 +26,7 @@ axiosInstance.interceptors.request.use(
  * 如果有问题，拦截器里会进行提示，然后返回{ code: Xxx, data:xxx }这种数据。在then里面总是会接收到
  * */
 axiosInstance.interceptors.response.use(
-  (response) => {
+  (response: AxiosResponse) => {
     // console.log('response',response)
     /*
      * 响应成功的拦截器，主要是对data作处理，如果没有返回data，那么会添加一个data字段，并把response.data的内容合并到data里面，然后返回
@@ -66,7 +66,7 @@ axiosInstance.interceptors.response.use(
       return data
     }
   },
-  (error) => {
+  (error: AxiosError) => {
     console.log('error', error)
     // console.log(error.response)
     // console.log(error.response.status)
@@ -89,7 +89,7 @@ axiosInstance.interceptors.response.use(
     if (error.response.status === 401) {
       return { success: false, code: 401, msg: '用户名或密码不正确', data: [] }
     } else {
-      const { data } = error.response
+      const data: any = error.response.data
       if (data === null || data === undefined) {
         globalMethods.$notice('请求失败，请稍后重试！')
         return { success: true, code: 200, data: [] }
@@ -110,4 +110,21 @@ axiosInstance.interceptors.response.use(
   }
 )
 
-export default axiosInstance
+export interface ApiResponse<T = any> {
+  data: T
+  success: boolean
+}
+
+export async function request<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
+  /*
+   *  then和catch里面返回的数据必须加as const，否则调用方无法推断出类型
+   * */
+  return axiosInstance
+    .request<T>(config)
+    .then(({ data }) => {
+      return { success: true, data } as const
+    })
+    .catch((err) => {
+      return { success: false, data: err } as const
+    })
+}