feat: feat: add build docker image by luochao

.dockerignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

README.md

@@ -27,8 +27,8 @@
 
 ## 在线访问
 
-Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   
+[//]: # (Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   )
-注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  
+[//]: # (注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  )
 
 Github Pages: [https://dy.ttentau.top/](https://dy.ttentau.top/)  
 

src/components/BaseFooter.vue

@@ -162,8 +162,8 @@ export default {
     }
 
     .badge {
-      right: 10rem;
+      right: 14rem;
-      top: 6rem;
+      top: 12rem;
       position: absolute;
     }
   }

src/components/Posters.vue

@@ -2,10 +2,13 @@
   <div class="posters">
     <div class="poster-item" :key="index" v-for="(i, index) in list" @click="goDetail(index)">
       <img class="poster" v-lazy="_checkImgUrl(i.video.cover.url_list[0])" alt="" />
-      <div class="num" v-if="mode === 'normal'">
+      <template v-if="mode === 'normal'">
-        <Icon icon="icon-park-outline:like" />
+        <div class="num">
-        <span>{{ _formatNumber(i.statistics.digg_count) }}</span>
+          <Icon icon="icon-park-outline:like" />
-      </div>
+          <span>{{ _formatNumber(i.statistics.digg_count) }}</span>
+        </div>
+        <div class="top" v-if="i.is_top">置顶</div>
+      </template>
       <div class="date" v-if="mode === 'date'">
         <div class="day">{{ getDay(i.create_time) }}</div>
         <div class="month">{{ getMonth(i.create_time) }}</div>
@@ -104,6 +107,7 @@ function getMonth(time) {
     object-fit: cover;
   }
 
+  .top,
   .music {
     position: absolute;
     font-size: 12rem;

src/pages/home/components/IndicatorHome.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="indicator-home" :class="{ isLight }">
-    <transition name="fade">
-      <div class="mask" v-if="open" @click="open = false"></div>
-    </transition>
     <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
     <div class="toolbar" ref="toolbar" :style="toolbarStyle">
       <Icon
@@ -13,13 +10,8 @@
       />
       <div class="tab-ctn">
         <div class="tabs" ref="tabs">
-          <div class="tab" :class="tabOneClass" @click.stop="change(0)">
+          <div class="tab" :class="{ active: index === 0 }" @click.stop="change(0)">
             <span>热点</span>
-            <img
-              v-show="index === 0"
-              src="../../../assets/img/icon/arrow-up-white.png"
-              class="tab1-img"
-            />
           </div>
           <div class="tab" :class="{ active: index === 1 }" @click.stop="change(1)">
             <span>长视频</span>
@@ -44,15 +36,6 @@
         @click="$router.push('/home/search')"
       />
     </div>
-    <div class="toggle-type" :class="{ open }">
-      <div class="l-button" :class="{ active: type === 0 }" @click="toggleType(0)">
-        <span>同城</span>
-        <img v-if="type === 0" src="../../../assets/img/icon/switch.png" alt="" />
-      </div>
-      <div class="l-button" :class="{ active: type === 1 }" @click="toggleType(1)">学习</div>
-      <div class="l-button" :class="{ active: type === 2 }" @click="toggleType(2)">热点</div>
-    </div>
-
     <Loading :style="loadingStyle" class="loading" style="width: 40rem" :is-full-screen="false" />
   </div>
 </template>
@@ -98,16 +81,12 @@ export default {
       indicatorRef: null,
       lefts: [],
       indicatorSpace: 0,
-      open: false,
       type: 1,
       moveY: 0
     }
   },
   computed: {
     ...mapState(useBaseStore, ['judgeValue', 'homeRefresh']),
-    tabOneClass() {
-      return { active: this.index === 0, open: this.open }
-    },
     transform() {
       return `translate3d(0, ${this.moveY - this.judgeValue > this.homeRefresh ? this.homeRefresh : this.moveY - this.judgeValue}px, 0)`
     },
@@ -172,18 +151,7 @@ export default {
   },
 
   methods: {
-    toggleType(type) {
-      if (type !== this.type) {
-        this.type = type
-        this.open = false
-      }
-    },
     change(index) {
-      if (this.index === 0 && index === 0) {
-        this.open = !this.open
-      } else {
-        this.open = false
-      }
       this.$emit('update:index', index)
       _css(this.indicatorRef, 'transition-duration', `300ms`)
       _css(this.indicatorRef, 'left', this.lefts[index] + 'px')
@@ -300,12 +268,6 @@ export default {
             top: -5rem;
           }
 
-          &.open {
-            .tab1-img {
-              transform: rotate(180deg);
-            }
-          }
-
           &.active {
             color: white;
           }
@@ -316,8 +278,8 @@ export default {
         //transition: left .3s;
         position: absolute;
         bottom: -6rem;
-        height: 2rem;
+        height: 2.6rem;
-        width: 20rem;
+        width: 26rem;
         //width: calc(100% / 5);
         background: #fff;
         border-radius: 5rem;
@@ -330,56 +292,6 @@ export default {
     }
   }
 
-  .toggle-type {
-    @height: 100rem;
-    position: absolute;
-    height: @height;
-    //padding-top: @height;
-    padding-left: 10rem;
-    padding-right: 10rem;
-    padding-bottom: 10rem;
-    width: 100%;
-    background: var(--main-bg);
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    box-sizing: border-box;
-    font-size: 12rem;
-    top: -@height;
-    transition: all 0.3s;
-    opacity: 0;
-
-    &.open {
-      top: 0;
-      opacity: 1;
-    }
-
-    .l-button {
-      flex: 1;
-      margin: 0 3rem;
-      height: 28rem;
-      background: rgb(33, 36, 45);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 20rem;
-      color: rgb(157, 161, 170);
-      transition: all 0.3s;
-
-      &.active {
-        background: rgb(57, 57, 65);
-        color: white;
-      }
-
-      img {
-        @width: 9rem;
-        width: @width;
-        height: @width;
-        margin-left: 8rem;
-      }
-    }
-  }
-
   .mask {
     top: 0;
     position: absolute;

src/pages/home/slide/Community.vue

@@ -255,6 +255,7 @@ function showDetail(e, item) {
   .bottom {
     color: gainsboro;
     padding: 10rem;
+    padding-bottom: 15rem;
 
     .title {
       font-size: 14rem;

src/pages/message/Message.vue

@@ -81,7 +81,7 @@
                 <!--                          <div class="not-read"></div>-->
                 <!--                          <img class="camera" src="../../assets/img/icon/close-white.png" alt="">-->
                 <!--            <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">-->
-                <div class="badge">12</div>
+                <div class="badge">2</div>
               </div>
             </div>
           </div>

src/pages/other/VideoDetail.vue

@@ -103,7 +103,7 @@
 <script setup lang="jsx">
 import Comment from '../../components/Comment.vue'
 import Share from '../../components/Share.vue'
-import { onMounted, onUnmounted, reactive } from 'vue'
+import { onActivated, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'
 import bus, { EVENT_KEY } from '../../utils/bus'
 import { useNav } from '@/utils/hooks/useNav'
 import PlayFeedback from '@/pages/home/components/PlayFeedback.vue'
@@ -157,7 +157,7 @@ const state = reactive({
   },
   index: 0,
   list: [],
-  uniqueId: 'uniqueId_2',
+  uniqueId: 'video_detail_list',
   totalSize: 0,
   pageSize: 10,
   pageNo: 0
@@ -190,6 +190,7 @@ function setCurrentItem(item) {
 }
 
 onMounted(() => {
+  bus.on(EVENT_KEY.SINGLE_CLICK, click)
   bus.on(EVENT_KEY.ENTER_FULLSCREEN, () => (state.fullScreen = true))
   bus.on(EVENT_KEY.EXIT_FULLSCREEN, () => (state.fullScreen = false))
   bus.on(EVENT_KEY.OPEN_COMMENTS, () => {
@@ -223,6 +224,22 @@ function dislike() {
   // state.list[state.index] = state.list[1]
   // _notice('操作成功，将减少此类视频的推荐')
 }
+
+function click(uniqueId) {
+  bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
+    uniqueId,
+    index: state.index,
+    type: EVENT_KEY.ITEM_TOGGLE
+  })
+}
+
+onActivated(() => {
+  bus.emit(EVENT_KEY.TOGGLE_CURRENT_VIDEO)
+})
+
+onDeactivated(() => {
+  bus.emit(EVENT_KEY.TOGGLE_CURRENT_VIDEO)
+})
 </script>
 
 <style scoped lang="less">