refactor: fuck vite defineConfig

.github/workflows/docker-image-ci.yml

@@ -2,7 +2,6 @@ name: Docker Image CI
 
 on:
   push:
-    branches: [ 'dev' ]
     tags:
       - v*
 
@@ -38,4 +37,5 @@ jobs:
           push: true
           platforms: linux/amd64,linux/arm64
           tags: |
-            ghcr.io/${{ github.repository_owner }}/douyin:latest
+            ghcr.io/${{ github.repository_owner }}/douyin-vue:${{ steps.vars.outputs.version }}
+            ghcr.io/${{ github.repository_owner }}/douyin-vue:latest

src/App.vue

@@ -1,4 +1,183 @@
 <template>
-  <div>123</div>
+  <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"></script>
+<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>

src/main.ts

@@ -1,5 +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
+})