update

packages/qjkankan-kankan-view/src/components/Tags/old.vue

@@ -1,213 +1,274 @@
 <template>
-    <teleport :to="tags$" v-if="tags$">
-        <template v-for="(tag, index) in tags">
-            <div :tag-sid="tag.sid" @mouseleave="onMouseLeave($event, tag)" :style="{ left: tag.x + 'px', top: tag.y + 'px' }" :class="{ visible: tag.visible }">
-                <span @click.stop="goTag(tag, index)" class="point zoom" @mouseenter.stop="onMouseEnter(tag, index)" :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"></span>
-                <div class="content">
-                    <div class="trans" :class="{ active: (isFixed && hotData && tag.sid == hotData.sid) || (showInfo && hotData && tag.sid == hotData.sid) }">
-                        <template v-if="hotData && tag.sid == hotData.sid && !showMsg">
-                            <div class="arrow" :id="`arrow_${tag.sid}`">
-                                <ui-icon @click.stop="closeTag" v-if="getApp().config.mobile" type="close"></ui-icon>
-                            </div>
-                            <ShowTag @click.stop="" v-if="!isEdit && hotData" @open="openInfo" />
-                        </template>
-                    </div>
-                </div>
-                <TagView @click.stop="" v-if="showMsg && toggleIndex == index" @close="closeInfo" />
-            </div>
-        </template>
-    </teleport>
+  <teleport :to="tags$" v-if="tags$">
+    <template v-for="(tag, index) in tags">
+      <div
+        :tag-sid="tag.sid"
+        @mouseleave="onMouseLeave($event, tag)"
+        :style="{ left: tag.x + 'px', top: tag.y + 'px' }"
+        :class="{ visible: tag.visible }"
+      >
+        <span
+          @click.stop="goTag(tag, index)"
+          class="point zoom"
+          @mouseenter.stop="onMouseEnter(tag, index)"
+          :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"
+        ></span>
+        <div class="content">
+          <div
+            class="trans"
+            :class="{
+              active:
+                (isFixed && hotData && tag.sid == hotData.sid) ||
+                (showInfo && hotData && tag.sid == hotData.sid),
+            }"
+          >
+            <template v-if="hotData && tag.sid == hotData.sid && !showMsg">
+              <div class="arrow" :id="`arrow_${tag.sid}`">
+                <ui-icon
+                  @click.stop="closeTag"
+                  v-if="getApp().config.mobile"
+                  type="close"
+                ></ui-icon>
+              </div>
+              <ShowTag
+                @click.stop=""
+                v-if="!isEdit && hotData"
+                @open="openInfo"
+              />
+            </template>
+          </div>
+        </div>
+        <TagView
+          @click.stop=""
+          v-if="showMsg && toggleIndex == index"
+          @close="closeInfo"
+        />
+      </div>
+    </template>
+  </teleport>
 </template>
 
 <script setup>
-import { ref, onMounted, computed, watch, watchEffect, onActivated, onDeactivated, getCurrentInstance, nextTick } from 'vue'
-import { getApp, useApp } from '@/app'
-import { useStore } from 'vuex'
-import common from '../../utils/common'
-import TagView from './tag-view.vue'
-import ShowTag from './show-tag.vue'
-import { useRoute } from 'vue-router'
-import { useMusicPlayer } from '@/utils/sound'
-const musicPlayer = useMusicPlayer()
-let init = true
+import {
+  ref,
+  onMounted,
+  computed,
+  watch,
+  watchEffect,
+  onActivated,
+  onDeactivated,
+  getCurrentInstance,
+  nextTick,
+} from "vue";
+import { getApp, useApp } from "@/app";
+import { useStore } from "vuex";
+import common from "../../utils/common";
+import TagView from "./tag-view.vue";
+import ShowTag from "./show-tag.vue";
+import { useRoute } from "vue-router";
+import { useMusicPlayer } from "@/utils/sound";
+const musicPlayer = useMusicPlayer();
+let init = true;
 const hotData = computed(() => {
-    let data = store.getters['tag/hotData']
-    if (!data) {
-        // musicPlayer.play()
-        // musicPlayer.pause(true)
-        // if (!getApp().Scene.isCurrentPanoHasVideo) {
-        //     console.log('resume')
-        //     console.log(init)
-        //     musicPlayer.resume()
-        // }
-    }
-    return data
-})
-const isPlay = computed(() => store.getters['tour/isPlay'])
-const router = computed(() => store.getters['router'])
-const flying = computed(() => store.getters['flying'])
-const leaveId = computed(() => store.getters['tag/leaveId'])
-const isEdit = computed(() => store.getters['tag/isEdit'])
-const isFixed = computed(() => store.getters['tag/isFixed'])
-const enterVisible = computed(() => store.getters['tag/enterVisible'])
-const editPosition = computed(() => store.getters['tag/editPosition'])
-const toggleIndex = computed(() => store.getters['tag/toggleIndex'])
-const isClick = computed(() => store.getters['tag/isClick'])
-const editModule = computed(() => store.getters['editModule'])
-const positionInfo = computed(() => store.getters['tag/positionInfo'])
-const store = useStore()
-const tags$ = ref(null)
+  let data = store.getters["tag/hotData"];
+  if (!data) {
+    // musicPlayer.play()
+    // musicPlayer.pause(true)
+    // if (!getApp().Scene.isCurrentPanoHasVideo) {
+    //     console.log('resume')
+    //     console.log(init)
+    //     musicPlayer.resume()
+    // }
+  }
+  return data;
+});
+const isPlay = computed(() => store.getters["tour/isPlay"]);
+const router = computed(() => store.getters["router"]);
+const flying = computed(() => store.getters["flying"]);
+const leaveId = computed(() => store.getters["tag/leaveId"]);
+const isEdit = computed(() => store.getters["tag/isEdit"]);
+const isFixed = computed(() => store.getters["tag/isFixed"]);
+const enterVisible = computed(() => store.getters["tag/enterVisible"]);
+const editPosition = computed(() => store.getters["tag/editPosition"]);
+const toggleIndex = computed(() => store.getters["tag/toggleIndex"]);
+const isClick = computed(() => store.getters["tag/isClick"]);
+const editModule = computed(() => store.getters["editModule"]);
+const positionInfo = computed(() => store.getters["tag/positionInfo"]);
+const store = useStore();
+const tags$ = ref(null);
 const tags = computed(() => {
-    return store.getters['tag/tags'] || []
-})
+  return store.getters["tag/tags"] || [];
+});
 
 watch(
-    () => router.value.name,
-    (val, old) => {
-        // console.log(val)
-        if (val !== 'tag') {
-            store.commit('tag/setFixed', false)
-        }
+  () => router.value.name,
+  (val, old) => {
+    // console.log(val)
+    if (val !== "tag") {
+      store.commit("tag/setFixed", false);
     }
-)
+  }
+);
 
-const showInfo = ref(false)
-const showMsg = ref(false)
+const showInfo = ref(false);
+const showMsg = ref(false);
 // const toggleIndex = ref(null)
 const openInfo = () => {
-    showMsg.value = true
-    store.commit('tag/setFixed', false)
-    showInfo.value = false
-}
+  showMsg.value = true;
+  store.commit("tag/setFixed", false);
+  showInfo.value = false;
+};
 const closeInfo = () => {
-    showMsg.value = false
-    if (isClick.value) {
-        //只有点击定位的才恢复显示
-        store.commit('tag/show', toggleIndex.value)
-        store.commit('tag/setFixed', true)
-        // showInfo.value = true
-        showInfo.value = false
-    }
-    // store.commit('tag/setClick', false)
-}
+  showMsg.value = false;
+  if (isClick.value) {
+    //只有点击定位的才恢复显示
+    store.commit("tag/show", toggleIndex.value);
+    store.commit("tag/setFixed", true);
+    // showInfo.value = true
+    showInfo.value = false;
+  }
+  // store.commit('tag/setClick', false)
+};
 const closeTag = async () => {
-    const app = getApp()
-    const player = await app.TourManager.player
-    //关闭热点面板时候，继续播放之前暂停的音频
-    if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
-        if ( hotData.value && (hotData.value.type == 'audio' || hotData.value.type == 'video')) {
-            // console.log('resume')
-            window.parent.postMessage(
-            {
-                source: "qjkankan",
-                event: "toggleBgmStatus",
-                params: {
-                    status: true,
-                },
-            },
-            "*"
-            );
-        }
+  const app = getApp();
+  const player = await app.TourManager.player;
+  //关闭热点面板时候，继续播放之前暂停的音频
+  if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
+    if (
+      hotData.value &&
+      (hotData.value.type == "audio" || hotData.value.type == "video")
+    ) {
+      // console.log('resume')
+      window.parent.postMessage(
+        {
+          source: "qjkankan",
+          event: "toggleBgmStatus",
+          params: {
+            status: true,
+          },
+        },
+        "*"
+      );
     }
+  }
 
-    store.commit('tag/setFixed', false)
-    store.commit('tag/closeTag')
-    store.commit('tag/setClick', false)
-    showInfo.value = false
-}
+  store.commit("tag/setFixed", false);
+  store.commit("tag/closeTag");
+  store.commit("tag/setClick", false);
+  showInfo.value = false;
+};
 const goTag = async (item, index) => {
-    let player = await getApp().TourManager.player
-    if (isPlay.value) {
-        player.pause()
-        store.commit('tour/setData', { isPlay: false })
-    }
-    if (flying.value) {
-        return
-    }
-    if (isFixed.value && !isEdit.value && hotData.value.sid == item.sid && !positionInfo.value) {
-        closeTag()
+  let player = await getApp().TourManager.player;
+  if (isPlay.value) {
+    player.pause();
+    store.commit("tour/setData", { isPlay: false });
+  }
+  if (flying.value) {
+    return;
+  }
+  if (
+    isFixed.value &&
+    !isEdit.value &&
+    hotData.value.sid == item.sid &&
+    !positionInfo.value
+  ) {
+    closeTag();
+  } else {
+    if (!enterVisible.value && !editPosition.value) {
+      if (!isEdit.value && !positionInfo.value) {
+        store.commit("tag/show", index);
+        store.commit("tag/setFixed", true);
+        showInfo.value = true;
+        store.commit("tag/setToggleIndex", index);
+        store.commit("tag/gotoTag", item);
+      }
+      store.commit("tag/setClick", true);
     } else {
-        if (!enterVisible.value && !editPosition.value) {
-            if (!isEdit.value && !positionInfo.value) {
-                store.commit('tag/show', index)
-                store.commit('tag/setFixed', true)
-                showInfo.value = true
-                store.commit('tag/setToggleIndex', index)
-                store.commit('tag/gotoTag', item)
-            }
-            store.commit('tag/setClick', true)
-        } else {
-            //热点可视操作
-            getApp().TagManager.edit.setTagVisi(item.sid)
-        }
+      //热点可视操作
+      getApp().TagManager.edit.setTagVisi(item.sid);
     }
-}
+  }
+};
 
 onMounted(async () => {
-    const app = await useApp()
-    await app.TagManager.tag()
-    init = false
+  const app = await useApp();
+  await app.TagManager.tag();
+  init = false;
 
-    tags$.value = '[xui_tags]'
-    app.TagManager.updatePosition(tags.value)
-    if (app.config.mobile) {
-        nextTick(() => {
-            // let player = document.querySelector('.player')
-            // player.addEventListener('touchstart', onClickHandler)
-        })
-    } else {
-        window.addEventListener('click', onClickHandler)
-    }
-})
-const getUrl = icon => {
-    let url = icon == '' || !icon ? getApp().resource.getAppURL('images/tag_icon_default.svg') : icon
+  tags$.value = "[xui_tags]";
+  app.TagManager.updatePosition(tags.value);
+  if (app.config.mobile) {
+    nextTick(() => {
+      // let player = document.querySelector('.player')
+      // player.addEventListener('touchstart', onClickHandler)
+    });
+  } else {
+    window.addEventListener("click", onClickHandler);
+  }
+});
+const getUrl = (icon) => {
+  let url =
+    icon == "" || !icon
+      ? getApp().resource.getAppURL("images/tag_icon_default.svg")
+      : icon;
 
-    return common.changeUrl(url)
-}
+  return common.changeUrl(url);
+};
 const onMouseEnter = (tag, index) => {
-    if (!getApp().config.mobile) {
-        if (flying.value || isPlay.value) {
-            return
-        }
-        if (!enterVisible.value && !editPosition.value && !isEdit.value && !positionInfo.value) {
-            // console.log('onMouseEnter')
+  if (!getApp().config.mobile) {
+    if (flying.value || isPlay.value) {
+      return;
+    }
+    if (
+      !enterVisible.value &&
+      !editPosition.value &&
+      !isEdit.value &&
+      !positionInfo.value
+    ) {
+      // console.log('onMouseEnter')
 
-            showInfo.value = true
-            store.commit('tag/show', index)
+      showInfo.value = true;
+      store.commit("tag/show", index);
 
-            store.commit('tag/setToggleIndex', index)
-            if (leaveId.value != tag.sid) {
-                //聚焦后 移到其他热点取消fixed
-                store.commit('tag/setFixed', false)
-            }
-        }
+      store.commit("tag/setToggleIndex", index);
+      if (leaveId.value != tag.sid) {
+        //聚焦后 移到其他热点取消fixed
+        store.commit("tag/setFixed", false);
+      }
     }
-}
+  }
+};
 
 const onMouseLeave = (event, tag) => {
-    if (!getApp().config.mobile) {
-        if (flying.value) {
-            return
-        }
-        if (event.relatedTarget != null) {
-            // if (!isEdit.value) {
-            showInfo.value = false
-            // }
-            store.commit('tag/setLeaveId', tag.sid)
-            if (!enterVisible.value && !isFixed.value && !showMsg.value && !editPosition.value && !positionInfo.value) {
-                closeTag()
-            }
-        }
+  if (!getApp().config.mobile) {
+    if (flying.value) {
+      return;
     }
-}
+    if (event.relatedTarget != null) {
+      // if (!isEdit.value) {
+      showInfo.value = false;
+      // }
+      store.commit("tag/setLeaveId", tag.sid);
+      if (
+        !enterVisible.value &&
+        !isFixed.value &&
+        !showMsg.value &&
+        !editPosition.value &&
+        !positionInfo.value
+      ) {
+        closeTag();
+      }
+    }
+  }
+};
 
 const onClickHandler = () => {
-    // if (flying.value) {
-    //     return
-    // }
+  // if (flying.value) {
+  //     return
+  // }
 
-    if (!isEdit.value && !positionInfo.value && isFixed.value) {
-        closeTag()
-    }
-}
+  if (!isEdit.value && !positionInfo.value && isFixed.value) {
+    closeTag();
+  }
+};
 </script>

packages/qjkankan-view/package.json

@@ -26,6 +26,7 @@
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.13",
     "vue-i18n": "^9.1.10",
+    "vue-marquee-text-component": "^2.0.1",
     "vue-toastification": "^2.0.0-rc.5",
     "vue3-lazyload": "^0.3.6",
     "vuex": "^4.0.0"

packages/qjkankan-view/src/components/Fdkk/index.vue

@@ -61,6 +61,7 @@ const isHasV4BGM = computed(() => store.getters["audio/isHasV4BGM"]);
 const fdkkCurrentVersion = computed(
   () => store.getters["scene/fdkkCurrentVersion"]
 );
+const isPlayTours = computed(() => store.getters["fdkk/isPlayTours"]);
 
 const somedatainfo = ref({});
 
@@ -142,7 +143,9 @@ const handleMessage = (res) => {
       if (!params.status) {
         store.dispatch("audio/pauseBGM");
       } else {
-        store.dispatch("audio/playBGM", 2);
+        if (!isPlayTours.value) {
+          store.dispatch("audio/playBGM", 2);
+        }
       }
     }
 

packages/qjkankan-view/src/components/UIGather/list.vue

@@ -25,9 +25,9 @@
             class="swiper-slide"
             :class="{
               active: currentScene.sceneCode == item.sceneCode,
-              loopspan:
-                item.sceneTitle.length > spanlength &&
-                currentScene.id == item.id,
+              // loopspan:
+              //   item.sceneTitle.length > spanlength &&
+              //   currentScene.id == item.id,
             }"
             :style="{ backgroundImage: `url(${item.icon})` }"
             v-for="(item, i) in currentScenesList"
@@ -39,15 +39,21 @@
                 item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'
               "
             ></i>
-            <div>
-              <span v-if="currentScene.id == item.id">{{
-                item.sceneTitle
-              }}</span>
-              <span v-else>{{
-                item.sceneTitle.length > spanlength
-                  ? item.sceneTitle.slice(0, spanlength)
-                  : item.sceneTitle
-              }}</span>
+            <div class="marquee">
+              <marquee-text
+                :repeat="1"
+                :duration="Math.ceil(item.sceneTitle.length / 10) * 5"
+                :key="item.id"
+                v-if="
+                  item.sceneTitle.length > spanlength &&
+                  currentScene.id == item.id
+                "
+              >
+                {{ item.sceneTitle }}
+              </marquee-text>
+              <span v-else>
+                {{ item.sceneTitle }}
+              </span>
             </div>
           </li>
         </ul>
@@ -66,21 +72,37 @@
             @click="tabSecondary(item, i)"
             :class="{
               active: currentSecondary.id == item.id,
-              loopspan:
-                fixTitle(item.name).length > spanlength &&
-                currentSecondary.id == item.id,
+              // loopspan:
+              //   fixTitle(item.name).length > spanlength &&
+              //   currentSecondary.id == item.id,
             }"
             v-for="(item, i) in secondaryList"
             :key="i"
           >
-            <span v-if="currentSecondary.id == item.id">{{
+            <!-- {{ Math.ceil(fixTitle(item.name).length / 10) }} -->
+
+            <marquee-text
+              :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+              :key="item.id"
+              :repeat="1"
+              v-if="
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id
+              "
+            >
+              {{ fixTitle(item.name) }}
+            </marquee-text>
+            <span v-else>
+              {{ fixTitle(item.name) }}
+            </span>
+            <!-- <span v-if="currentSecondary.id == item.id">{{
               fixTitle(item.name)
             }}</span>
             <span v-else>{{
               fixTitle(item.name).length > spanlength
                 ? fixTitle(item.name).slice(0, spanlength)
                 : fixTitle(item.name)
-            }}</span>
+            }}</span> -->
           </li>
         </ul>
       </div>
@@ -97,22 +119,37 @@
           class="swiper-slide"
           :class="{
             active: currentCatalogRoot.id == item.id,
-            loopspan:
-              fixTitle(item.name).length > spanlength &&
-              currentCatalogRoot.id == item.id,
+            // loopspan:
+            //   fixTitle(item.name).length > spanlength &&
+            //   currentCatalogRoot.id == item.id,
           }"
           @click="tabRoot(item)"
           v-for="(item, i) in metadata.catalogRoot"
           :key="i"
         >
-          <span v-if="currentCatalogRoot.id == item.id">{{
+          <!-- <span v-if="currentCatalogRoot.id == item.id">{{
             fixTitle(item.name)
           }}</span>
           <span v-else>{{
             fixTitle(item.name).length > spanlength
               ? fixTitle(item.name).slice(0, spanlength)
               : fixTitle(item.name)
-          }}</span>
+          }}</span> -->
+
+          <marquee-text
+            :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+            :key="item.id"
+            :repeat="1"
+            v-if="
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id
+            "
+          >
+            {{ fixTitle(item.name) }}
+          </marquee-text>
+          <span v-else>
+            {{ fixTitle(item.name) }}
+          </span>
         </li>
       </ul>
     </div>
@@ -134,7 +171,7 @@ import { useApp } from "@/app";
 
 import { useI18n, getLocale } from "@/i18n";
 const { t } = useI18n({ useScope: "global" });
-
+import MarqueeText from "vue-marquee-text-component";
 const store = useStore();
 
 const spanlength = ref(5);
@@ -357,7 +394,7 @@ $width: 1150px;
         &.loopspan {
           > span,
           > div > span {
-            animation: 5s wordsLoop linear infinite normal;
+            animation: 10s wordsLoop linear infinite normal;
           }
         }
 
@@ -484,9 +521,10 @@ $width: 1150px;
           overflow: hidden;
 
           > span {
-            width: 100%;
+            // width: 100%;
             line-height: 20px;
             word-break: keep-all;
+            white-space: normal;
           }
         }
 
@@ -517,4 +555,8 @@ $width: 1150px;
     -webkit-transform: translateX(-180%);
   }
 }
+.marquee-text-wrap {
+  height: 20px;
+  line-height: 20px;
+}
 </style>

packages/qjkankan-view/src/components/UIGather/mobile/control.fdkk.vue

@@ -131,7 +131,7 @@
 
     <li @click="onIsBGM" v-if="isHasNormalBGM || isHasV4BGM || isHasV3BGM">
       <img
-        v-if="isHasV3BGM"
+        v-if="isHasV3BGM && fdkkCurrentVersion==='V3'"
         :src="
           require(`@/assets/images/icon/${
             isPlayV3BGM ? 'music@2x.png' : 'music_disabled@2x.png'
@@ -235,14 +235,14 @@ const onLink = () => {
 const onIsBGM = () => {
   console.log("fdkk----onIsBGM", fdkkCurrentVersion.value);
 
-  if (unref(isHasV3BGM)) {
+  if (unref(isHasV3BGM) && fdkkCurrentVersion.value === "V3") {
     const v3playToggle = !unref(isPlayV3BGM);
     console.log("v3playToggle", v3playToggle);
     toggleV3BGM(v3playToggle);
     return;
   }
 
-  if (unref(isHasV4BGM)) {
+  if (unref(isHasV4BGM) && fdkkCurrentVersion.value === "V4") {
     if (!unref(isCurrentPlaying)) {
       store.dispatch("audio/playBGM", 2);
     } else {

packages/qjkankan-view/src/components/UIGather/mobile/list.vue

@@ -40,15 +40,21 @@
                 item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'
               "
             ></i>
-            <div>
-              <span v-if="currentScene.id == item.id">{{
-                item.sceneTitle
-              }}</span>
-              <span v-else>{{
-                item.sceneTitle.length > spanlength
-                  ? item.sceneTitle.slice(0, spanlength)
-                  : item.sceneTitle
-              }}</span>
+            <div class="marquee">
+              <marquee-text
+                :repeat="1"
+                :duration="Math.ceil(item.sceneTitle.length / 10) * 5"
+                :key="item.id"
+                v-if="
+                  item.sceneTitle.length > spanlength &&
+                  currentScene.id == item.id
+                "
+              >
+                {{ item.sceneTitle }}
+              </marquee-text>
+              <span v-else>
+                {{ item.sceneTitle }}
+              </span>
             </div>
           </li>
         </ul>
@@ -74,14 +80,20 @@
             v-for="(item, i) in secondaryList"
             :key="i"
           >
-            <span v-if="currentSecondary.id == item.id">{{
-              fixTitle(item.name)
-            }}</span>
-            <span v-else>{{
-              fixTitle(item.name).length > spanlength
-                ? fixTitle(item.name).slice(0, spanlength)
-                : fixTitle(item.name)
-            }}</span>
+            <marquee-text
+              :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+              :key="item.id"
+              :repeat="1"
+              v-if="
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id
+              "
+            >
+              {{ fixTitle(item.name) }}
+            </marquee-text>
+            <span v-else>
+              {{ fixTitle(item.name) }}
+            </span>
           </li>
         </ul>
       </div>
@@ -107,14 +119,20 @@
           v-for="(item, i) in metadata.catalogRoot"
           :key="i"
         >
-          <span v-if="currentCatalogRoot.id == item.id">{{
-            fixTitle(item.name)
-          }}</span>
-          <span v-else>{{
-            fixTitle(item.name).length > spanlength
-              ? fixTitle(item.name).slice(0, spanlength)
-              : fixTitle(item.name)
-          }}</span>
+          <marquee-text
+            :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+            :key="item.id"
+            :repeat="1"
+            v-if="
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id
+            "
+          >
+            {{ fixTitle(item.name) }}
+          </marquee-text>
+          <span v-else>
+            {{ fixTitle(item.name) }}
+          </span>
         </li>
       </ul>
     </div>
@@ -135,6 +153,7 @@ import { useStore } from "vuex";
 import { useApp } from "@/app";
 import { useI18n, getLocale } from "@/i18n";
 const { t } = useI18n({ useScope: "global" });
+import MarqueeText from "vue-marquee-text-component";
 
 const store = useStore();
 

yarn.lock

@@ -6285,6 +6285,11 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
   resolved "http://192.168.0.47:4873/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.18.0:
+  version "3.32.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/core-js/-/core-js-3.32.0.tgz#7643d353d899747ab1f8b03d2803b0312a0fb3b6"
+  integrity sha512-rd4rYZNlF3WuoYuRIDEmbR/ga9CeuWX9U05umAvgrrZoHY4Z++cp/xwPQMvUpBB4Ag6J8KfD80G0zwCyaSxDww==
+
 core-js@^3.6.4, core-js@^3.6.5, core-js@^3.8.2, core-js@^3.8.3:
   version "3.31.0"
   resolved "http://192.168.0.47:4873/core-js/-/core-js-3.31.0.tgz#4471dd33e366c79d8c0977ed2d940821719db344"
@@ -17130,6 +17135,14 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
+vue-marquee-text-component@^2.0.1:
+  version "2.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue-marquee-text-component/-/vue-marquee-text-component-2.0.1.tgz#62691df195f755471fa9bdc9b1969f836a922b9a"
+  integrity sha512-dbeRwDY5neOJcWZrDFU2tJMhPSsxN25ZpNYeZdt0jkseg1MbyGKzrfEH9nrCFZRkEfqhxG+ukyzwVwR9US5sTQ==
+  dependencies:
+    core-js "^3.18.0"
+    vue "^3.2.19"
+
 vue-photo-preview@^1.1.3:
   version "1.1.3"
   resolved "http://192.168.0.47:4873/vue-photo-preview/-/vue-photo-preview-1.1.3.tgz#8ee62923e865d3cbaf010b07b0cc841892633028"
@@ -17233,7 +17246,7 @@ vue@^2.4.4, vue@^2.6.12:
     "@vue/compiler-sfc" "2.7.14"
     csstype "^3.1.0"
 
-vue@^3.0.0, vue@^3.0.4, vue@^3.2.13, vue@^3.2.36:
+vue@^3.0.0, vue@^3.0.4, vue@^3.2.13, vue@^3.2.19, vue@^3.2.36:
   version "3.3.4"
   resolved "http://192.168.0.47:4873/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
   integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==