fix: 手动合并

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')
 }

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;
 }

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>
 

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,

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,19 @@ 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({
+  updateBound,
+  reload
 })
 
 defineExpose({

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 }
 }

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

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 }
 }

src/directives/language.ts

@@ -1,11 +1,12 @@
-import { watchEffect } from 'vue'
+import { watchEffect, DirectiveBinding } from 'vue'
 import { useStore } from '@/store'
 import { chineseLanguageLoader } from '@/i18n/util'
 
 /*
- ep:v-language:[state.obj]="'title'"
+ ep:v-language:title="state.obj"
 */
-export default (el: HTMLElement, binding: any) => {
+
+export default (el: HTMLElement, binding: DirectiveBinding) => {
   watchEffect(() => {
     const store = useStore()
     const language = store.language
@@ -13,23 +14,22 @@ export default (el: HTMLElement, binding: any) => {
 
     let content = ''
 
-    if (!Object.keys(arg)?.length) {
+    if (!Object.keys(value)?.length || !arg) {
       return
     }
 
     if (language === 'zh') {
-      console.log('zh')
-      content = arg[value]
+      content = value[arg]
     }
 
-    if (language === 'en' && arg[value + 'En']) {
-      content = arg[value + 'En']
-    } else if (language === 'en' && !arg[value + 'En']) {
-      content = arg[value]
+    if (language === 'en' && value[arg + 'En']) {
+      content = value[arg + 'En']
+    } else if (language === 'en' && !value[arg + 'En']) {
+      content = value[arg]
     }
 
     if (language === 'tw') {
-      content = chineseLanguageLoader(arg[value])
+      content = chineseLanguageLoader(value[arg])
     }
     el.innerHTML = content
   })

src/store/state.ts

@@ -15,7 +15,7 @@ export interface State {
 export const state = (): State => ({
   shopList: [],
   selectedModule: '',
-  language: 'zh',
+  language: 'tw',
   config: {},
   shop: {},
   currentFloor: {},