refactor: 抽离格式化日期hook 添加全局scss变量

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@better-scroll/core": "^2.4.2",
         "@better-scroll/scroll-bar": "^2.4.2",
+        "animate.css": "^4.1.1",
         "axios": "^0.26.0",
         "core-js": "^3.8.3",
         "pinia": "^2.0.11",
@@ -3506,6 +3507,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -14445,6 +14451,11 @@
       "dev": true,
       "requires": {}
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.1.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.4.2",
     "@better-scroll/scroll-bar": "^2.4.2",
+    "animate.css": "^4.1.1",
     "axios": "^0.26.0",
     "core-js": "^3.8.3",
     "pinia": "^2.0.11",

src/App.vue

@@ -63,14 +63,14 @@ onMounted(() => {
 
 watch(route, to => {
   if (to.fullPath === '/guide' || to.fullPath === '/nav') {
-    ;(window as any).Map_QM && (window as any).Map_QM.startRender()
+    window?.Map_QM?.startRender()
   } else {
-    ;(window as any).Map_QM && (window as any).Map_QM.cancelRender()
+    window?.Map_QM?.cancelRender()
   }
 })
 </script>
 
-<style>
+<style lang="scss">
 body,
 html,
 #app {

src/components/Map/Map.vue

@@ -34,8 +34,6 @@ const handleDetail = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/mixin.scss';
-
 #shopInfo {
   position: absolute;
   z-index: 400;

src/composables/useDay.ts

@@ -1,6 +1,5 @@
 import { computed, ref } from 'vue'
 import { useStore } from '@/store'
-import { formatDay, Format } from '@/utils/utils'
 import { Language } from '@/store/state'
 
 type Keys = {
@@ -23,10 +22,5 @@ export const useDay = () => {
 
   const whichWeek = computed(currentWeek)
 
-  return {
-    whichWeek,
-    formatDayHandler(time: Format) {
-      return formatDay(date.value, time)
-    }
-  }
+  return { whichWeek }
 }

src/main.ts

@@ -8,6 +8,9 @@ import { i18n } from '@/i18n'
 import { useStore } from '@/store'
 import directives from '@/directives'
 
+import '@/assets/scss/index.scss'
+import 'animate.css/animate.min.css'
+
 get('/static/offline/JSON/config.json').then(res => {
   const app = createApp(App)
 

src/utils/utils.ts

@@ -89,19 +89,20 @@ export const importAll = (context: any) => {
  * @returns {string}
  */
 export type Format = 'y.m.d' | 'y/m/d' | 'y-m-d'
-export const formatDay = (date: Date, format: Format = 'y-m-d') => {
+export const formatDay = (format: Format = 'y-m-d') => {
+  const date = new Date()
   const year = date.getFullYear()
 
   const month = String(date.getMonth() + 1).padStart(2, '0')
-  const week = String(date.getDate()).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
 
   if (format === 'y.m.d') {
-    return `${year}.${month}.${week}`
+    return `${year}.${month}.${day}`
   }
 
   if (format === 'y/m/d') {
-    return `${year}/${month}/${week}`
+    return `${year}/${month}/${day}`
   }
 
-  return year + '-' + month + '-' + week
+  return year + '-' + month + '-' + day
 }

src/views/Nav/Nav.vue

@@ -122,7 +122,7 @@ function handleSpeedUp() {
   state.pause = false
   state.speedUp = !state.speedUp
   nextTick(() => {
-    state.speedUp ? (window as any).Config.setPlaySpeed(10) : (window as any).Config.setPlaySpeed(4)
+    state.speedUp ? window.Config.setPlaySpeed(10) : window.Config.setPlaySpeed(4)
   })
 }
 

vue.config.js

@@ -1,6 +1,13 @@
 const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: `@import "@/assets/scss/variables.scss";`
+      }
+    }
+  },
   transpileDependencies: true,
   chainWebpack: config => {
     config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')