From 2ea3a0a33622223304f670caef99e0910b37c31a Mon Sep 17 00:00:00 2001
From: jiangx <jiangx@1000mu.com>
Date: Thu, 3 Mar 2022 11:04:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=8F=98=E9=87=8F=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 18 +++++------
 src/base/Marquees/Marquees.vue     | 14 ++++-----
 src/base/Message/Message.vue       |  6 ++--
 src/base/ScrollView/ScrollView.vue | 40 ++++++++++++-------------
 src/components/Written/Written.vue | 48 +++++++++++++++---------------
 src/composables/useDay.ts          | 10 +++----
 src/composables/useTime.ts         | 12 ++++----
 src/composables/useWeather.ts      | 14 ++++-----
 8 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4b8eec3..7e38e76 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
     <Map />
 
     <!-- 退出弹框 -->
-    <Logout @close="logout = false" v-if="logout" @bingo="bingo" />
+    <Logout @close="logoutRef = false" v-if="logoutRef" @bingo="bingo" />
 
     <!-- 倒计时返回首页提示 -->
     <AutoBackNotification v-if="countDownGif" :title="title" :delay="isWall ? countDownToWall : countDownNum" />
@@ -25,18 +25,18 @@ const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackN
 
 const MAX_NUMBER = 10
 
-const logout = ref(false)
-const totalClickNum = ref(0)
+const logoutRef = ref(false)
+const totalClickNumRef = ref(0)
 const router = useRouter()
 const route = useRoute()
 
 //点击商场logo 达到最大次数显示退出框
 function handleTotalClickLogo() {
-  totalClickNum.value++
+  totalClickNumRef.value++
   nextTick(() => {
-    if (totalClickNum.value >= MAX_NUMBER) {
-      logout.value = true
-      totalClickNum.value = 0
+    if (totalClickNumRef.value >= MAX_NUMBER) {
+      logoutRef.value = true
+      totalClickNumRef.value = 0
     }
   })
 }
@@ -48,8 +48,8 @@ function bingo() {
 
 //指定时间返回首页时做的操作
 async function handleScreen() {
-  logout.value = false
-  totalClickNum.value = 0
+  logoutRef.value = false
+  totalClickNumRef.value = 0
   useModuleStatistics('屏保')
   await router.push('/transfer')
 }
diff --git a/src/base/Marquees/Marquees.vue b/src/base/Marquees/Marquees.vue
index 01efb71..2aa501e 100644
--- a/src/base/Marquees/Marquees.vue
+++ b/src/base/Marquees/Marquees.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapEl" class="wrapEl">
+  <div ref="wrapElRef" class="wrapElRef">
     <div ref="content" class="content animate-infinite" :class="state.animationClass" :style="contentStyle">
       <slot></slot>
     </div>
@@ -31,8 +31,8 @@ const state = reactive({
   animationClass: '' //添加animate动画
 })
 
-const wrapEl = ref<HTMLDivElement | null>(null)
-const contentEl = ref<HTMLDivElement | null>(null)
+const wrapElRef = ref<HTMLDivElement | null>(null)
+const contentElRef = ref<HTMLDivElement | null>(null)
 
 const contentStyle = computed(() => {
   return {
@@ -48,8 +48,8 @@ watch(
   () => props.content,
   () => {
     nextTick(() => {
-      const wrapWidth = (wrapEl.value as HTMLDivElement)?.getBoundingClientRect()?.width
-      const offsetWidth = (contentEl.value as HTMLDivElement)?.getBoundingClientRect()?.width
+      const wrapWidth = (wrapElRef.value as HTMLDivElement)?.getBoundingClientRect()?.width
+      const offsetWidth = (contentElRef.value as HTMLDivElement)?.getBoundingClientRect()?.width
       state.wrapWidth = wrapWidth
       state.offsetWidth = offsetWidth
       state.duration = offsetWidth / props.speed
@@ -62,7 +62,7 @@ watch(
 )
 </script>
 <style scoped>
-.wrapEl {
+.wrapElRef {
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -71,7 +71,7 @@ watch(
   padding: 0;
 }
 
-.wrapEl .content {
+.wrapElRef .content {
   position: absolute;
   white-space: nowrap;
 }
diff --git a/src/base/Message/Message.vue b/src/base/Message/Message.vue
index 579bd4f..7d69e1a 100644
--- a/src/base/Message/Message.vue
+++ b/src/base/Message/Message.vue
@@ -1,6 +1,6 @@
 <template>
   <Transition name="down">
-    <div class="message__container" v-if="isShow">
+    <div class="message__container" v-if="isShowRef">
       <div class="message__content" :style="style[type]">
         <span class="text__tips">{{ text }}</span>
       </div>
@@ -35,10 +35,10 @@ const style: Record<string, any> = {
   }
 } // 控制动画
 
-const isShow = ref(false) // 组件模板渲染成功后触发
+const isShowRef = ref(false) // 组件模板渲染成功后触发
 
 onMounted(() => {
-  isShow.value = true
+  isShowRef.value = true
 })
 </script>
 
diff --git a/src/base/ScrollView/ScrollView.vue b/src/base/ScrollView/ScrollView.vue
index 0fe03a0..b32f39f 100644
--- a/src/base/ScrollView/ScrollView.vue
+++ b/src/base/ScrollView/ScrollView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-wrapper" ref="scrollDOM">
+  <div class="scroll-wrapper" ref="scrollDOMRef">
     <slot></slot>
   </div>
 </template>
@@ -40,16 +40,16 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits(['scroll', 'scrollToEnd', 'beforeScroll'])
 
-const _BScroll = ref<BScrollInstance | null>()
-const scrollDOM = ref<HTMLDivElement>()
+const _BScrollRef = ref<BScrollInstance | null>()
+const scrollDOMRef = ref<HTMLDivElement>()
 const store = useStore()
-const language = computed(() => store.language)
+const languageComRef = computed(() => store.language)
 
 const _initScroll = () => {
-  if (!scrollDOM.value) {
+  if (!scrollDOMRef.value) {
     return
   }
-  _BScroll.value = new BScroll(scrollDOM.value, {
+  _BScrollRef.value = new BScroll(scrollDOMRef.value, {
     click: true,
     disableMouse: false,
     disableTouch: false,
@@ -59,14 +59,14 @@ const _initScroll = () => {
   })
 
   if (props.listenScroll) {
-    _BScroll.value.on('scroll', _scrollHandler)
+    _BScrollRef.value.on('scroll', _scrollHandler)
   }
 
   if (props.pullUp) {
-    _BScroll.value.on('scrollEnd', _scrollToEndHandler)
+    _BScrollRef.value.on('scrollEnd', _scrollToEndHandler)
   }
   if (props.beforeScroll) {
-    _BScroll.value.on('beforeScrollStart', _beforeScrollHandler)
+    _BScrollRef.value.on('beforeScrollStart', _beforeScrollHandler)
   }
 }
 
@@ -75,7 +75,7 @@ const _scrollHandler = (pos: { x: number; y: number }) => {
 }
 
 const _scrollToEndHandler = () => {
-  if ((_BScroll.value as BScrollInstance).y <= (_BScroll.value as BScrollInstance).maxScrollY + props.scrollToEndLimit) {
+  if ((_BScrollRef.value as BScrollInstance).y <= (_BScrollRef.value as BScrollInstance).maxScrollY + props.scrollToEndLimit) {
     emits('scrollToEnd')
   }
 }
@@ -85,30 +85,30 @@ const _beforeScrollHandler = () => {
 }
 
 const refresh = () => {
-  _BScroll.value && _BScroll.value.refresh()
+  _BScrollRef.value && _BScrollRef.value.refresh()
 }
 
 const scrollTo = (...args: any) => {
-  _BScroll.value && _BScroll.value.scrollTo(...(args as [number, number]))
+  _BScrollRef.value && _BScrollRef.value.scrollTo(...(args as [number, number]))
 }
 const scrollToElement = (...args: any) => {
-  _BScroll.value && _BScroll.value.scrollToElement(...(args as [HTMLElement | string, number, number | boolean, number | boolean]))
+  _BScrollRef.value && _BScrollRef.value.scrollToElement(...(args as [HTMLElement | string, number, number | boolean, number | boolean]))
 }
 //立即停止当前运行的滚动动画
 const stop = () => {
-  _BScroll.value && _BScroll.value.stop()
+  _BScrollRef.value && _BScrollRef.value.stop()
 }
 //允许滚动
 const enable = () => {
-  _BScroll.value && _BScroll.value.enable()
+  _BScrollRef.value && _BScrollRef.value.enable()
 }
 //禁止滚动
 const disable = () => {
-  _BScroll.value && _BScroll.value.disable()
+  _BScrollRef.value && _BScrollRef.value.disable()
 }
 const destroy = () => {
-  _BScroll.value && _BScroll.value.destroy()
-  _BScroll.value = null
+  _BScrollRef.value && _BScrollRef.value.destroy()
+  _BScrollRef.value = null
 }
 
 onMounted(() => {
@@ -120,7 +120,7 @@ onMounted(() => {
 onBeforeUnmount(destroy)
 
 watch(
-  () => [props.list, language],
+  () => [props.list, languageComRef],
   () => {
     setTimeout(() => {
       refresh()
@@ -130,7 +130,7 @@ watch(
 )
 
 defineExpose({
-  _BScroll,
+  _BScrollRef,
   refresh,
   scrollTo,
   scrollToElement,
diff --git a/src/components/Written/Written.vue b/src/components/Written/Written.vue
index 7979f52..4266488 100644
--- a/src/components/Written/Written.vue
+++ b/src/components/Written/Written.vue
@@ -1,7 +1,7 @@
 <template>
   <canvas
     :style="{ backgroundColor: backgroundColor, borderRadius: borderRadius }"
-    ref="inkCanvas"
+    ref="inkCanvasRef"
     :width="width"
     :height="height"
     id="ink-canvas"
@@ -74,11 +74,11 @@ const state = reactive<State>({
   list: [] //返回汉字列表
 })
 
-const inkCanvas = ref<HTMLCanvasElement | null>(null)
-const ctx = computed(() => (inkCanvas.value as HTMLCanvasElement).getContext('2d'))
+const inkCanvasRef = ref<HTMLCanvasElement | null>(null)
+const ctxComRef = computed(() => (inkCanvasRef.value as HTMLCanvasElement).getContext('2d'))
 
 function updateBound() {
-  const bound = (inkCanvas.value as HTMLCanvasElement).getBoundingClientRect()
+  const bound = (inkCanvasRef.value as HTMLCanvasElement).getBoundingClientRect()
   state.X = bound.x
   state.Y = bound.y
 }
@@ -90,7 +90,7 @@ function down(ev: MouseEvent | TouchEvent) {
   clearTimeout(state.timer)
   state.oldX = cx
   state.oldY = cy
-  ctx.value && ctx.value.beginPath()
+  ctxComRef.value && ctxComRef.value.beginPath()
   state.isClick = true
 }
 function move(ev: MouseEvent | TouchEvent) {
@@ -104,11 +104,11 @@ function move(ev: MouseEvent | TouchEvent) {
     state.clickC.push(0)
 
     //画图
-    ;(ctx.value as CanvasRenderingContext2D).lineWidth = 8
-    ;(ctx.value as CanvasRenderingContext2D).lineCap = 'round'
-    ctx.value && ctx.value.moveTo(state.oldX, state.oldY)
-    ctx.value && ctx.value.lineTo(cx, cy)
-    ctx.value && ctx.value.stroke()
+    ;(ctxComRef.value as CanvasRenderingContext2D).lineWidth = 8
+    ;(ctxComRef.value as CanvasRenderingContext2D).lineCap = 'round'
+    ctxComRef.value && ctxComRef.value.moveTo(state.oldX, state.oldY)
+    ctxComRef.value && ctxComRef.value.lineTo(cx, cy)
+    ctxComRef.value && ctxComRef.value.stroke()
     state.oldX = cx
     state.oldY = cy
   }
@@ -127,19 +127,19 @@ function mouseUp() {
 }
 
 function reload() {
-  if (!inkCanvas.value) {
+  if (!inkCanvasRef.value) {
     return
   }
   state.clickX = []
   state.clickY = []
   state.clickC = []
-  ;(ctx.value as CanvasRenderingContext2D).strokeStyle = props.strokeStyle
-  ;(ctx.value as CanvasRenderingContext2D).fillStyle = props.fillStyle
-  ;(ctx.value as CanvasRenderingContext2D).clearRect(0, 0, props.width, props.height)
-  ;(ctx.value as CanvasRenderingContext2D).font = `bold ${props.fillFontSize} Arial`
-  ;(ctx.value as CanvasRenderingContext2D).textAlign = 'center'
-  ;(ctx.value as CanvasRenderingContext2D).textBaseline = 'middle'
-  ctx.value && ctx.value.fillText(props.fillText, props.width / 2, props.height / 2, 1000)
+  ;(ctxComRef.value as CanvasRenderingContext2D).strokeStyle = props.strokeStyle
+  ;(ctxComRef.value as CanvasRenderingContext2D).fillStyle = props.fillStyle
+  ;(ctxComRef.value as CanvasRenderingContext2D).clearRect(0, 0, props.width, props.height)
+  ;(ctxComRef.value as CanvasRenderingContext2D).font = `bold ${props.fillFontSize} Arial`
+  ;(ctxComRef.value as CanvasRenderingContext2D).textAlign = 'center'
+  ;(ctxComRef.value as CanvasRenderingContext2D).textBaseline = 'middle'
+  ctxComRef.value && ctxComRef.value.fillText(props.fillText, props.width / 2, props.height / 2, 1000)
 }
 function _getHandWriting() {
   const params = {
@@ -168,14 +168,14 @@ watch(
 onMounted(() => {
   updateBound()
   reload()
-  ;(inkCanvas.value as HTMLElement).addEventListener('touchstart', down)
-  ;(inkCanvas.value as HTMLElement).addEventListener('touchmove', move)
-  ;(inkCanvas.value as HTMLElement).addEventListener('touchend', mouseUp)
+  ;(inkCanvasRef.value as HTMLElement).addEventListener('touchstart', down)
+  ;(inkCanvasRef.value as HTMLElement).addEventListener('touchmove', move)
+  ;(inkCanvasRef.value as HTMLElement).addEventListener('touchend', mouseUp)
 })
 onBeforeUnmount(() => {
-  ;(inkCanvas.value as HTMLElement).removeEventListener('touchstart', down)
-  ;(inkCanvas.value as HTMLElement).removeEventListener('touchmove', move)
-  ;(inkCanvas.value as HTMLElement).removeEventListener('touchend', mouseUp)
+  ;(inkCanvasRef.value as HTMLElement).removeEventListener('touchstart', down)
+  ;(inkCanvasRef.value as HTMLElement).removeEventListener('touchmove', move)
+  ;(inkCanvasRef.value as HTMLElement).removeEventListener('touchend', mouseUp)
 })
 
 defineExpose({
diff --git a/src/composables/useDay.ts b/src/composables/useDay.ts
index 3381cdd..7e68719 100644
--- a/src/composables/useDay.ts
+++ b/src/composables/useDay.ts
@@ -14,13 +14,13 @@ export const useDay = () => {
     tw: ['星期日', '星期壹', '星期二', '星期三', '星期四', '星期五', '星期六']
   }
 
-  const date = ref(new Date())
+  const dateRef = ref(new Date())
   const store = useStore()
-  const language = computed(() => store.language)
+  const languageComRef = computed(() => store.language)
 
-  const currentWeek = () => days[language.value][date.value.getDay()]
+  const currentWeek = () => days[languageComRef.value][dateRef.value.getDay()]
 
-  const whichWeek = computed(currentWeek)
+  const whichWeekComRef = computed(currentWeek)
 
-  return { whichWeek }
+  return { whichWeekComRef }
 }
diff --git a/src/composables/useTime.ts b/src/composables/useTime.ts
index 3737944..cf80e47 100644
--- a/src/composables/useTime.ts
+++ b/src/composables/useTime.ts
@@ -1,20 +1,20 @@
 import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
 
 export const useTime = () => {
-  const date = ref(new Date())
-  const timer = ref<any>(null)
+  const dateRef = ref(new Date())
+  const timerRef = ref<any>(null)
 
   const currentTime = computed(() => {
-    return `${date.value.getHours().toString().padStart(2, '0')}:${date.value.getMinutes().toString().padStart(2, '0')}`
+    return `${dateRef.value.getHours().toString().padStart(2, '0')}:${dateRef.value.getMinutes().toString().padStart(2, '0')}`
   })
   const getDate = () => {
-    timer.value = setInterval(() => {
-      date.value = new Date()
+    timerRef.value = setInterval(() => {
+      dateRef.value = new Date()
     }, 60000)
   }
 
   onMounted(getDate)
-  onBeforeUnmount(() => clearInterval(timer.value))
+  onBeforeUnmount(() => clearInterval(timerRef.value))
 
   return {
     currentTime
diff --git a/src/composables/useWeather.ts b/src/composables/useWeather.ts
index 8e5f15a..eef4cdf 100644
--- a/src/composables/useWeather.ts
+++ b/src/composables/useWeather.ts
@@ -7,14 +7,14 @@ interface Weather {
 }
 
 export const useWeather = () => {
-  const weather = ref<Weather>({})
-  const icon = ref({})
+  const weatherRef = ref<Weather>({})
+  const iconRef = ref({})
 
   function _getWeather() {
     getWeather()
       .then(res => {
         const { data } = res
-        weather.value = data as Weather
+        weatherRef.value = data as Weather
         weatherIcon()
       })
       .catch(err => {
@@ -29,14 +29,14 @@ export const useWeather = () => {
       { icon: 'icon-xiaoyu', status: '雨' },
       { icon: 'icon-xiaoxue', status: '雪' },
       { icon: 'icon-duoyunzhuanyin', status: '阴' }
-    ] as const
-    icon.value = status.filter(filterStatus)?.[0] ?? status[0]
+    ]
+    iconRef.value = status.filter(filterStatus)?.[0] ?? status[0]
   }
 
   function filterStatus(item: any) {
-    return weather.value?.status?.includes(item.status)
+    return weatherRef.value?.status?.includes(item.status)
   }
 
   onMounted(_getWeather)
-  return { weather, icon }
+  return { weatherRef, iconRef }
 }