From 939f92da38e2b4e6089b73905515be135fbbe926 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 1 May 2024 22:53:47 +0800
Subject: [PATCH] refactor: save

---
 src/App.vue  | 183 +--------------------------------------------------
 src/App2.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++
 src/main.ts  |  55 ----------------
 src/main2.ts |  60 +++++++++++++++++
 4 files changed, 245 insertions(+), 236 deletions(-)
 create mode 100644 src/App2.vue
 create mode 100644 src/main2.ts

diff --git a/src/App.vue b/src/App.vue
index 99e0e98..b4f7095 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,183 +1,4 @@
 <template>
-  <router-view v-slot="{ Component }">
-    <transition :name="transitionName">
-      <keep-alive :exclude="store.excludeRoutes">
-        <component :is="Component" />
-      </keep-alive>
-    </transition>
-  </router-view>
-  <BaseMask v-if="!isMobile" @click="isMobile = true" />
-  <div v-if="!isMobile" class="guide">
-    <Icon class="danger" icon="mynaui:danger-triangle" />
-    <Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
-    <div class="txt">
-      <h2>切换至手机模式获取最佳体验</h2>
-      <h3>1. 按 F12 调出控制台</h3>
-      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
-    </div>
-    <img src="@/assets/img/guide.png" alt="" />
-  </div>
-  <Call />
+  <div>123</div>
 </template>
-<script setup lang="ts">
-/*
-* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
-try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
-* */
-import routes from './router/routes'
-import Call from './components/Call.vue'
-import { useBaseStore } from '@/store/pinia.js'
-import { onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import type { RouteRecordRaw } from 'vue-router'
-import BaseMask from '@/components/BaseMask.vue'
-import { BASE_URL } from '@/config'
-
-const store = useBaseStore()
-const route = useRoute()
-const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
-const transitionName = ref('go')
-
-// watch $route 决定使用哪种过渡
-watch(
-  () => route.path,
-  (to, from) => {
-    store.setMaskDialog({ state: false, mode: store.maskDialogMode })
-    //底部tab的按钮，跳转是不需要用动画的
-    let noAnimation = [
-      '/',
-      '/home',
-      '/slide',
-      '/me',
-      '/shop',
-      '/message',
-      '/publish',
-      '/home/live',
-      'slide',
-      '/test'
-    ]
-    if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
-      return (transitionName.value = '')
-    }
-    const toDepth = routes.findIndex((v: RouteRecordRaw) => v.path === to)
-    const fromDepth = routes.findIndex((v: RouteRecordRaw) => v.path === from)
-    transitionName.value = toDepth > fromDepth ? 'go' : 'back'
-  }
-)
-
-function setVh() {
-  let vh = window.innerHeight * 0.01
-  document.documentElement.style.setProperty('--vh', `${vh}px`)
-}
-
-onMounted(() => {
-  store.init()
-  setVh()
-  // 监听resize事件 视图大小发生变化就重新计算1vh的值
-  window.addEventListener('resize', () => {
-    location.href = BASE_URL + '/'
-    setVh()
-  })
-  //禁止选中文字
-  document.onselectstart = new Function('return false') as any
-})
-</script>
-
-<style lang="less">
-@import './assets/less/index';
-
-#app {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  font-size: 14rem;
-}
-
-@media screen and (min-width: 500px) {
-  #app {
-    width: 500px !important;
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.guide {
-  color: white;
-  z-index: 999;
-  background: var(--active-main-bg);
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 16rem;
-  overflow: hidden;
-  text-align: center;
-
-  .danger {
-    margin-top: 10rem;
-    font-size: 40rem;
-    color: red;
-  }
-
-  .close {
-    cursor: pointer;
-    font-size: 18rem;
-    color: white;
-    position: absolute;
-    right: 15rem;
-    top: 15rem;
-  }
-
-  .txt {
-    text-align: left;
-    padding: 0 24rem;
-  }
-
-  img {
-    display: block;
-    width: 350rem;
-  }
-}
-
-.go-enter-from {
-  transform: translate3d(100%, 0, 0);
-}
-
-//最终状态
-.back-enter-to,
-.back-enter-from,
-.go-enter-to,
-.go-leave-from {
-  transform: translate3d(0, 0, 0);
-}
-
-.go-leave-to {
-  transform: translate3d(-100%, 0, 0);
-}
-
-.go-enter-active,
-.go-leave-active,
-.back-enter-active,
-.back-leave-active {
-  transition: all 0.3s;
-}
-
-.back-enter-from {
-  transform: translate3d(-100%, 0, 0);
-}
-
-.back-leave-to {
-  transform: translate3d(100%, 0, 0);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
+<script setup lang="ts"></script>
diff --git a/src/App2.vue b/src/App2.vue
new file mode 100644
index 0000000..99e0e98
--- /dev/null
+++ b/src/App2.vue
@@ -0,0 +1,183 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition :name="transitionName">
+      <keep-alive :exclude="store.excludeRoutes">
+        <component :is="Component" />
+      </keep-alive>
+    </transition>
+  </router-view>
+  <BaseMask v-if="!isMobile" @click="isMobile = true" />
+  <div v-if="!isMobile" class="guide">
+    <Icon class="danger" icon="mynaui:danger-triangle" />
+    <Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
+    <div class="txt">
+      <h2>切换至手机模式获取最佳体验</h2>
+      <h3>1. 按 F12 调出控制台</h3>
+      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
+    </div>
+    <img src="@/assets/img/guide.png" alt="" />
+  </div>
+  <Call />
+</template>
+<script setup lang="ts">
+/*
+* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
+try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
+* */
+import routes from './router/routes'
+import Call from './components/Call.vue'
+import { useBaseStore } from '@/store/pinia.js'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import BaseMask from '@/components/BaseMask.vue'
+import { BASE_URL } from '@/config'
+
+const store = useBaseStore()
+const route = useRoute()
+const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
+const transitionName = ref('go')
+
+// watch $route 决定使用哪种过渡
+watch(
+  () => route.path,
+  (to, from) => {
+    store.setMaskDialog({ state: false, mode: store.maskDialogMode })
+    //底部tab的按钮，跳转是不需要用动画的
+    let noAnimation = [
+      '/',
+      '/home',
+      '/slide',
+      '/me',
+      '/shop',
+      '/message',
+      '/publish',
+      '/home/live',
+      'slide',
+      '/test'
+    ]
+    if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
+      return (transitionName.value = '')
+    }
+    const toDepth = routes.findIndex((v: RouteRecordRaw) => v.path === to)
+    const fromDepth = routes.findIndex((v: RouteRecordRaw) => v.path === from)
+    transitionName.value = toDepth > fromDepth ? 'go' : 'back'
+  }
+)
+
+function setVh() {
+  let vh = window.innerHeight * 0.01
+  document.documentElement.style.setProperty('--vh', `${vh}px`)
+}
+
+onMounted(() => {
+  store.init()
+  setVh()
+  // 监听resize事件 视图大小发生变化就重新计算1vh的值
+  window.addEventListener('resize', () => {
+    location.href = BASE_URL + '/'
+    setVh()
+  })
+  //禁止选中文字
+  document.onselectstart = new Function('return false') as any
+})
+</script>
+
+<style lang="less">
+@import './assets/less/index';
+
+#app {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  font-size: 14rem;
+}
+
+@media screen and (min-width: 500px) {
+  #app {
+    width: 500px !important;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.guide {
+  color: white;
+  z-index: 999;
+  background: var(--active-main-bg);
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 16rem;
+  overflow: hidden;
+  text-align: center;
+
+  .danger {
+    margin-top: 10rem;
+    font-size: 40rem;
+    color: red;
+  }
+
+  .close {
+    cursor: pointer;
+    font-size: 18rem;
+    color: white;
+    position: absolute;
+    right: 15rem;
+    top: 15rem;
+  }
+
+  .txt {
+    text-align: left;
+    padding: 0 24rem;
+  }
+
+  img {
+    display: block;
+    width: 350rem;
+  }
+}
+
+.go-enter-from {
+  transform: translate3d(100%, 0, 0);
+}
+
+//最终状态
+.back-enter-to,
+.back-enter-from,
+.go-enter-to,
+.go-leave-from {
+  transform: translate3d(0, 0, 0);
+}
+
+.go-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.go-enter-active,
+.go-leave-active,
+.back-enter-active,
+.back-leave-active {
+  transition: all 0.3s;
+}
+
+.back-enter-from {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.back-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 30fba91..43d27f6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,60 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './assets/less/index.less'
-import { startMock } from '@/mock'
-import router from './router'
-import mixin from './utils/mixin'
-import VueLazyload from '@jambonn/vue-lazyload'
-import { createPinia } from 'pinia'
-import { useClick } from '@/utils/hooks/useClick'
-import bus, { EVENT_KEY } from '@/utils/bus'
 
-window.isMoved = false
-window.isMuted = true
-window.showMutedNotice = true
-HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEventListener, {
-  apply(target, ctx, args) {
-    const eventName = args[0]
-    const listener = args[1]
-    if (listener instanceof Function && eventName === 'click') {
-      args[1] = new Proxy(listener, {
-        apply(target1, ctx1, args1) {
-          // console.log('e', args1)
-          // console.log('click点击', window.isMoved)
-          if (window.isMoved) return
-          try {
-            return target1.apply(ctx1, args1)
-          } catch (e) {
-            console.error(`[proxyPlayerEvent][${eventName}]`, listener, e)
-          }
-        }
-      })
-    }
-    return target.apply(ctx, args)
-  }
-})
-
-const vClick = useClick()
-const pinia = createPinia()
 const app = createApp(App)
-app.mixin(mixin)
-const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
-app.use(VueLazyload, {
-  preLoad: 1.3,
-  loading: loadImage,
-  attempt: 1
-})
-app.use(pinia)
-app.use(router)
 app.mount('#app')
-app.directive('click', vClick)
-
-//放到最后才可以使用pinia
-startMock()
-setTimeout(() => {
-  bus.emit(EVENT_KEY.HIDE_MUTED_NOTICE)
-  window.showMutedNotice = false
-}, 2000)
-bus.on(EVENT_KEY.REMOVE_MUTED, () => {
-  window.isMuted = false
-})
diff --git a/src/main2.ts b/src/main2.ts
new file mode 100644
index 0000000..30fba91
--- /dev/null
+++ b/src/main2.ts
@@ -0,0 +1,60 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './assets/less/index.less'
+import { startMock } from '@/mock'
+import router from './router'
+import mixin from './utils/mixin'
+import VueLazyload from '@jambonn/vue-lazyload'
+import { createPinia } from 'pinia'
+import { useClick } from '@/utils/hooks/useClick'
+import bus, { EVENT_KEY } from '@/utils/bus'
+
+window.isMoved = false
+window.isMuted = true
+window.showMutedNotice = true
+HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEventListener, {
+  apply(target, ctx, args) {
+    const eventName = args[0]
+    const listener = args[1]
+    if (listener instanceof Function && eventName === 'click') {
+      args[1] = new Proxy(listener, {
+        apply(target1, ctx1, args1) {
+          // console.log('e', args1)
+          // console.log('click点击', window.isMoved)
+          if (window.isMoved) return
+          try {
+            return target1.apply(ctx1, args1)
+          } catch (e) {
+            console.error(`[proxyPlayerEvent][${eventName}]`, listener, e)
+          }
+        }
+      })
+    }
+    return target.apply(ctx, args)
+  }
+})
+
+const vClick = useClick()
+const pinia = createPinia()
+const app = createApp(App)
+app.mixin(mixin)
+const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
+app.use(VueLazyload, {
+  preLoad: 1.3,
+  loading: loadImage,
+  attempt: 1
+})
+app.use(pinia)
+app.use(router)
+app.mount('#app')
+app.directive('click', vClick)
+
+//放到最后才可以使用pinia
+startMock()
+setTimeout(() => {
+  bus.emit(EVENT_KEY.HIDE_MUTED_NOTICE)
+  window.showMutedNotice = false
+}, 2000)
+bus.on(EVENT_KEY.REMOVE_MUTED, () => {
+  window.isMuted = false
+})