debug

2024-03-02 14:27:22 +08:00 · 2024-03-02 14:27:22 +08:00 · 9bdff79d1d
commit 9bdff79d1d
parent 8a8e258a20
11 changed files with 152 additions and 46 deletions
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "gl-matrix": "3.4.3",
    "lodash": "4.17.21",
    "mitt": "3.0.0",
+    "lodash-es": "^4.17.21",
    "mockjs": "1.1.0",
    "pinia": "^2.1.7",
    "pinyin": "2.11.1",
@ -26,6 +27,8 @@
    "vuex": "4.1.0"
  },
  "devDependencies": {
+    "@iconify/vue": "^4.1.1",
+    "@types/lodash-es": "^4.17.9",
    "@vitejs/plugin-vue": "4.0.0",
    "@vitejs/plugin-vue-jsx": "3.0.0",
    "less": "4.1.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -23,6 +23,9 @@ dependencies:
  lodash:
    specifier: 4.17.21
    version: 4.17.21
+  lodash-es:
+    specifier: ^4.17.21
+    version: 4.17.21
  mitt:
    specifier: 3.0.0
    version: 3.0.0
@ -58,6 +61,12 @@ dependencies:
    version: 4.1.0(vue@3.4.21)

 devDependencies:
+  '@iconify/vue':
+    specifier: ^4.1.1
+    version: 4.1.1(vue@3.4.21)
+  '@types/lodash-es':
+    specifier: ^4.17.9
+    version: 4.17.12
  '@vitejs/plugin-vue':
    specifier: 4.0.0
    version: 4.0.0(vite@5.1.4)(vue@3.4.21)
@ -609,6 +618,19 @@ packages:
    dev: true
    optional: true

+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
+  /@iconify/vue@4.1.1(vue@3.4.21):
+    resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
+    peerDependencies:
+      vue: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.21
+    dev: true
+
  /@jambonn/vue-lazyload@1.0.9(vue@3.4.21):
    resolution: {integrity: sha512-V9AnxDTAS1+q5LpTWtvyEN2bo1skvSzPRbFfP7Z1qhfEQRQouSwReEkbEb5B5M4MDEM1UIE0kxlsvOcCkon8DQ==}
    engines: {node: '>=12.x'}
@ -798,6 +820,16 @@ packages:
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
    dev: true

+  /@types/lodash-es@4.17.12:
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+    dependencies:
+      '@types/lodash': 4.14.202
+    dev: true
+
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+    dev: true
+
  /@vitejs/plugin-vue-jsx@3.0.0(vite@5.1.4)(vue@3.4.21):
    resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
    engines: {node: ^14.18.0 || >=16.0.0}
@ -1921,6 +1953,10 @@ packages:
      pkg-types: 1.0.3
    dev: true

+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
  /lodash@4.17.21:
    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
    dev: false
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@ -12,7 +12,7 @@
           :autoplay="isPlay" loop>
      <p> 您的浏览器不支持 video 标签。</p>
    </video>
-    <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
+    <Icon icon="fluent:play-28-filled" class="pause"   v-if="!isPlaying"/>
    <div class="float" :style="{opacity: isUp?0:1}">
      <div :style="{opacity:isMove ? 0:1}" class="normal">
        <template v-if="!commentVisible">
@ -68,20 +68,21 @@

 <script>
 import Utils from '../../utils'
-import Dom from "../../utils/dom";
 import Loading from "../Loading";
 import ItemToolbar from "./ItemToolbar";
 import ItemDesc from "./ItemDesc";
 import bus, {EVENT_KEY} from "../../utils/bus";
 import {SlideItemPlayStatus} from "../../utils/const_var";
 import {computed} from "vue";
+import {Icon} from "@iconify/vue";

 export default {
  name: "BVideo",
  components: {
    Loading,
    ItemToolbar,
-    ItemDesc
+    ItemDesc,
+    Icon
  },
  provide() {
    return {
@ -373,15 +374,16 @@ export default {
  }

  .pause {
-    width: 100rem;
-    height: 100rem;
-    opacity: 0.5;
+    width: 60rem;
+    height: 60rem;
+    opacity: 0.3;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
+    color: white;
    animation: pause-animation 1.1s linear;

    @scale: scale(1.2);
@ -392,12 +394,12 @@ export default {
        transform: scale(2);
      }
      10% {
-        opacity: 0.5;
+        opacity: 0.3;
        transform: @scale;
      }
      100% {
        transform: @scale;
-        opacity: 0.5;
+        opacity: 0.3;
      }
    }
  }
--- a/src/components/slide/ItemToolbar.vue
+++ b/src/components/slide/ItemToolbar.vue
@ -3,6 +3,7 @@ import BaseMusic from "../BaseMusic";
 import Utils from "../../utils";
 import {reactive,} from "vue";
 import bus, {EVENT_KEY} from "@/utils/bus";
+import {Icon} from '@iconify/vue'

 const props = defineProps({
  item: {
@ -71,13 +72,13 @@ function showComments() {
      <span>{{ Utils.formatNumber(props.item.digg_count) }}</span>
    </div>
    <div class="message mb2r" @click.stop="showComments">
-      <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
+      <Icon icon="mage:message-dots-round-fill" class="icon" style="color: white"/>
      <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
    </div>
    <!--TODO     -->
    <div class="message mb2r" @click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)">
-      <img v-if="props.item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
-      <img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
+      <Icon v-if="props.item.isCollect" icon="ic:round-star" class="icon" style="color: yellow"/>
+      <Icon v-else icon="ic:round-star" class="icon" style="color: white"/>
      <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
    </div>
    <div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
@ -179,6 +180,10 @@ function showComments() {
    }
  }

+  .icon {
+    font-size: 40rem;
+  }
+
  .loved {
    background: red;
  }
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@ -77,11 +77,9 @@ watch(
        if (oldVal.length === 0) {
          insertContent()
        } else {
-          let end = oldVal.length + 3
-          if (end >= newVal) end = newVal
+          let endIndex = oldVal.length + 3
          let top = $(wrapperEl.value).find(`.${itemClassName}:last`).css('top')
-
-          newVal.slice(oldVal.length, end).map((item, index) => {
+          newVal.slice(oldVal.length, endIndex).map((item, index) => {
            let el = getInsEl(item, oldVal.length + index)
            //这里必须要设置个top值，不然会把前面的条目给覆盖掉
            //2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
@ -100,7 +98,7 @@ watch(
    () => props.index,
    (newVal, oldVal) => {
      if (!props.list.length) return
-      console.log('watch-index', newVal, oldVal)
+      // console.log('watch-index', newVal, oldVal)
      bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[newVal])
      bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
        uniqueId: props.uniqueId,
--- a/src/components/slide/SlideVideo.vue
+++ b/src/components/slide/SlideVideo.vue
@ -119,7 +119,6 @@ import globalMethods from '../../utils'
 import BaseMarquee from "../BaseMarquee";
 import Dom from "../../utils/dom";
 import BaseMusic from "../BaseMusic";
-import {mapState} from "vuex";
 import Loading from "../Loading";

 export default {
@ -127,7 +126,7 @@ export default {
  components: {
    BaseMarquee,
    BaseMusic,
-    Loading
+    Loading,
  },
  props: {
    video: {
--- a/src/components/slide/common.js
+++ b/src/components/slide/common.js
@ -2,13 +2,14 @@ import bus from "@/utils/bus";
 import Utils from '@/utils'
 import {SlideType} from "@/utils/const_var";
 import GM from "@/utils";
+import {sum} from "lodash-es";

 export function slideInit(el, state, type) {
  state.wrapper.width = GM.$getCss(el, 'width')
  state.wrapper.height = GM.$getCss(el, 'height')
  state.wrapper.childrenLength = el.children.length

-  let t = getSlideDistance(state, type)
+  let t = getSlideDistance(state, type, el)
  let dx1 = 0, dx2 = 0
  if (type === SlideType.HORIZONTAL) dx1 = t
  else dx2 = t
@ -55,7 +56,7 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
      bus.emit(state.name + '-moveX', state.move.x)
    }
    Utils.$stopPropagation(e)
-    let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
+    let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
    let dx1 = 0
    let dx2 = 0
    if (type === SlideType.HORIZONTAL) {
@ -97,7 +98,7 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli

 export function slideReset(el, state, type, emit) {
  Utils.$setCss(el, 'transition-duration', `300ms`)
-  let t = getSlideDistance(state, type)
+  let t = getSlideDistance(state, type, el)
  let dx1 = 0
  let dx2 = 0
  if (type === SlideType.HORIZONTAL) {
@ -114,8 +115,16 @@ export function slideReset(el, state, type, emit) {
  emit?.('update:index', state.localIndex)
 }

-export function getSlideDistance(state, type = SlideType.HORIZONTAL) {
+export function getSlideDistance(state, type = SlideType.HORIZONTAL, el) {
  if (type === SlideType.HORIZONTAL) {
+    //TODO 统一
+    if (el) {
+      let widths = []
+      Array.from(el.children).map(v => {
+        widths.push(v.getBoundingClientRect().width)
+      })
+      return -sum(widths.splice(0, state.localIndex))
+    }
    return -state.localIndex * state.wrapper.width
  } else {
    return -state.localIndex * state.wrapper.height
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -3,7 +3,7 @@ import globalMethods from '../utils'
 import resource from "../assets/data/resource.js";
 import users from '@/assets/data/users.json'
 import post from '@/assets/data/post.json'
-import {sample, shuffle} from "lodash";
+import {sample, shuffle, uniqueId} from "lodash";

 function getParams(options) {
  let params = globalMethods.$parseURL(options.url).params
@ -27,14 +27,51 @@ let allRecommendVideos = resource.videos.map(v => {
  v.type = 'recommend-video'
  return v
 })
-
+let t = [
+  {
+    type: 'imgs',
+    src: `https://imgapi.cn/bing.php`,
+    author: {
+      unique_id: uniqueId('list_')
+    }
+  },
+  {
+    type: 'user',
+    src: `https://imgapi.cn/bing.php`,
+    author: {
+      unique_id: uniqueId('list_')
+    }
+  },
+  {
+    type: 'img',
+    src: `https://imgapi.cn/bing.php`,
+    author: {
+      unique_id: uniqueId('list_')
+    }
+  },
+]
+allRecommendVideos.unshift(...t)
+// {
+//   type: 'imgs',
+//   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
+//   author: {
+//     unique_id: uniqueId('list_')
+//   }
+// },
+// {
+//   type: 'user',
+//   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
+//   author: {
+//     unique_id: uniqueId('list_')
+//   }
+// },
 for (let i = 0; i < 50; i++) {
  allRecommendVideos = allRecommendVideos.concat(shuffle(resource.videos)
-      .slice(0, 10)
-      .map(v => {
-        v.type = 'recommend-video'
-        return v
-      }))
+    .slice(0, 10)
+    .map(v => {
+      v.type = 'recommend-video'
+      return v
+    }))
 }
 Mock.mock(/recommended/, options => {
  let page = getPage(options)
--- a/src/pages/home/components/IndicatorHome.vue
+++ b/src/pages/home/components/IndicatorHome.vue
@ -5,10 +5,11 @@
    </transition>
    <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
    <div class="toolbar" ref="toolbar" :style="toolbarStyle">
-      <img src="../../../assets/img/icon/scan.png"
-           class="search"
-           @click="$nav('/home/live')"
-           style="margin-top: .5rem;">
+      <Icon
+          icon="tabler:menu-deep"
+          class="search"
+          @click="$nav('/home/live')"
+          style="transform: rotateY(180deg)"/>
      <div class="tab-ctn">
        <div class="tabs" ref="tabs">
          <div class="tab" :class="tabOneClass" @click.stop="change(0)">
@ -29,10 +30,10 @@
        </div>
        <div class="indicator" ref="indicator"></div>
      </div>
-      <img v-hide="loading" src="../../../assets/img/icon/search-light.png"
-           class="search"
-           @click="$nav('/home/search')"
-           style="margin-top: .5rem;">
+      <Icon v-hide="loading"
+            icon="ion:search"
+            class="search"
+            @click="$nav('/home/search')"/>
    </div>
    <div class="toggle-type" :class="{open}">
      <div class="l-button" :class="{active:type === 0}" @click="toggleType(0)">
@ -194,7 +195,7 @@ export default {
@import "@/assets/less/index";

 .indicator-home {
-  position: fixed;
+  position: absolute;
  font-size: 16rem;
  top: 0;
  left: 0;
@ -218,8 +219,8 @@ export default {

  .loading {
    opacity: 0;
-    top: 13rem;
-    right: 15rem;
+    top: 7rem;
+    right: 7rem;
    position: absolute;
  }

@ -290,7 +291,8 @@ export default {
    }

    .search {
-      width: 20rem;
+      color: white;
+      font-size: 24rem;
    }
  }

--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@ -1,6 +1,11 @@
 <template>
  <div class="test-slide-wrapper" id="home-index">
    <SlideHorizontal v-model:index="state.baseIndex">
+      <SlideItem class="sidebar">
+        <div class="sidebar1">
+
+        </div>
+      </SlideItem>
      <SlideItem>
        <IndicatorHome
            v-if="!state.fullScreen"
@ -13,15 +18,15 @@
                           name="main"
                           :change-active-index-use-anim="false"
                           v-model:index="state.navIndex">
-            <Slide0 :active="state.navIndex === 0 && state.baseIndex === 0"/>
+            <Slide0 :active="state.navIndex === 0 && state.baseIndex === 1"/>
            <SlideItem>
              <Community/>
            </SlideItem>
-            <Slide2 :active="state.navIndex === 2 && state.baseIndex === 0"/>
+            <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
            <SlideItem>
              <Shop/>
            </SlideItem>
-            <Slide4 :active="state.navIndex === 4 && state.baseIndex === 0"/>
+            <Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
          </SlideHorizontal>
        </div>
        <Footer v-bind:init-tab="1"/>
@ -39,6 +44,7 @@
      </SlideItem>
    </SlideHorizontal>

+
    <Comment page-id="home-index" v-model="state.commentVisible"
             @close="closeComments"
    />
@ -129,7 +135,7 @@ const bodyHeight = computed(() => store.state.bodyHeight)
 const bodyWidth = computed(() => store.state.bodyWidth)

 const state = reactive({
-  baseIndex: 0,
+  baseIndex: 1,
  navIndex: 4,
  test: '',
  recommendList: [
@ -238,6 +244,13 @@ function dislike() {
  height: 100%;
  overflow: hidden;

+  .sidebar {
+    width: 70vw;
+    height: 100vh;
+    overflow: auto;
+    background: red;
+  }
+
  .slide-content {
    width: 100%;
    height: 100%;
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@ -16,6 +16,7 @@ import CONST_VAR from "./const_var";
 import Dom from "./dom";
 import bus, {EVENT_KEY} from "./bus";
 import {random} from "lodash";
+import {Icon} from '@iconify/vue'

 export default {
  components: {
@ -31,7 +32,8 @@ export default {
    NoMore,
    'dy-back': Back,
    Loading,
-    'dy-button': BaseButton
+    'dy-button': BaseButton,
+    Icon
  },
  data() {
    return {