fix: 添加左右箭头，允许itemName换行

packages/base/src/antiquity.js

@@ -51,7 +51,7 @@ export const antiquityData = [
     minImg: "/images/3/M1.jpg",
     name: "二十世纪刘伯承收藏的《毛主席去安源》中堂字画",
     level: 3,
-    size: "画像长108cm，宽54cm,对联长108cm,宽20cm,高2cm",
+    size: "画像长108cm，宽54cm，对联长108cm，宽20cm",
     zd: "纸质",
     content: `
       <p>此文物为刘伯承收藏的《毛主席去安源》中堂字画原件。</p>
@@ -1937,4 +1937,4 @@ export const antiquityData = [
     <p>此文物是89岁高龄的齐白石为祝贺刘伯承60寿辰所雕刻的印章，此印章布局奇巧，刀工老辣。</p>
   `,
   },
-];
+]

packages/base/src/utils.js

@@ -1,25 +1,25 @@
-export const isDevelopment = import.meta.env.MODE === "development";
+export const isDevelopment = import.meta.env.MODE === "development"
 
 export const getEnvImagePath = (path) => {
   return isDevelopment
-    ? `http://192.168.0.18:8080${path}`
-    : `${window.origin}/project/lbc-memorial-hall/base${path}`;
-};
+    ? `http://192.168.0.68:8080${path}`
+    : `${window.origin}/project/lbc-memorial-hall/base${path}`
+}
 
 export function isMobile() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return /iphone|ipod|android|windows phone|blackberry|mobile/i.test(userAgent);
+  const userAgent = navigator.userAgent.toLowerCase()
+  return /iphone|ipod|android|windows phone|blackberry|mobile/i.test(userAgent)
 }
 
 export function checkDeviceAndRedirect() {
-  const isMobileDevice = isMobile();
-  const currentPath = window.location.pathname;
-  const isInMobilePath = currentPath.includes("/mobile/");
-  const isInPCPath = currentPath.includes("/pc/");
+  const isMobileDevice = isMobile()
+  const currentPath = window.location.pathname
+  const isInMobilePath = currentPath.includes("/mobile/")
+  const isInPCPath = currentPath.includes("/pc/")
 
   if (isMobileDevice && !isInMobilePath) {
-    window.location.href = currentPath.replace("/pc/", "/mobile/");
+    window.location.href = currentPath.replace("/pc/", "/mobile/")
   } else if (!isMobileDevice && !isInPCPath) {
-    window.location.href = currentPath.replace("/mobile/", "/pc/");
+    window.location.href = currentPath.replace("/mobile/", "/pc/")
   }
 }

packages/mobile/src/App.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { RouterView } from "vue-router";
-import Topbar from "./components/Topbar.vue";
-import { useRoute } from "vue-router";
+import { RouterView } from "vue-router"
+import Topbar from "./components/Topbar.vue"
+import { useRoute } from "vue-router"
+
+const route = useRoute()
 
-const route = useRoute();
 </script>
 
 <template>
   <Topbar v-if="!route.meta.customTop" />
-
   <RouterView />
 </template>
 

packages/mobile/src/assets/main.css

@@ -77,7 +77,6 @@ iframe {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
-  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   word-break: break-all;
   word-wrap: break-word;
@@ -109,4 +108,4 @@ iframe {
   * {
     transition: all 0.3s;
   }
-}
+}

packages/mobile/src/router/index.js

@@ -1,5 +1,5 @@
-import { createRouter, createWebHashHistory } from "vue-router";
-import Antiquity from "../views/Antiquity/index.vue";
+import { createRouter, createWebHashHistory } from "vue-router"
+import Antiquity from "../views/Antiquity/index.vue"
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -46,6 +46,6 @@ const router = createRouter({
       component: () => import("../views/Antiquity/Detail/index.vue"),
     },
   ],
-});
+})
 
-export default router;
+export default router

packages/mobile/src/views/Antiquity/Detail/index.scss

@@ -35,6 +35,24 @@
   iframe {
     height: 40vh;
   }
+
+  &-img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 0;
+    gap: 10px;
+    &-left,
+    &-right {
+      width: 13%;
+      cursor: pointer;
+      &>img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
   &-tools {
     display: flex;
     align-items: center;

packages/mobile/src/views/Antiquity/Detail/index.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="antiquity-detail">
     <div class="antiquity-detail-head">
-      <img
-        class="antiquity-detail__back"
-        src="@/assets/images/back-min.png"
-        @click="$router.back"
-      />
+      <img class="antiquity-detail__back" src="@/assets/images/back-min.png" @click="$router.push('/antiquity')" />
       <img class="logo" src="@/assets/images/logo-min.png" />
     </div>
 
     <template v-if="!isThree">
       <div class="antiquity-detail-img">
+        <div class="antiquity-detail-img-left">
+          <img src="@/assets/images/left.png" alt="" @click="onChangePreItem" />
+        </div>
         <VanImage fit="contain" :src="getEnvImagePath(detail?.minImg)" />
+        <div class="antiquity-detail-img-right">
+          <img src="@/assets/images/right.png" alt="" @click="onChangeNextItem" />
+        </div>
       </div>
 
       <div class="antiquity-detail-tools">
@@ -21,21 +23,9 @@
     <template v-else>
       <iframe ref="iframe" :src="iframeUrl" />
       <div class="antiquity-detail-tools">
-        <img
-          draggable="false"
-          src="@/assets/images/icon_5-min.png"
-          @click="handleZoom"
-        />
-        <img
-          draggable="false"
-          :src="autoPlay ? PauseImg : PlayImg"
-          @click="handleAutoPlay"
-        />
-        <img
-          draggable="false"
-          src="@/assets/images/icon_7-min.png"
-          @click="handleResetView"
-        />
+        <img draggable="false" src="@/assets/images/icon_5-min.png" @click="handleZoom" />
+        <img draggable="false" :src="autoPlay ? PauseImg : PlayImg" @click="handleAutoPlay" />
+        <img draggable="false" src="@/assets/images/icon_7-min.png" @click="handleResetView" />
       </div>
     </template>
 
@@ -58,54 +48,69 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
-import { antiquityData, getEnvImagePath, isDevelopment } from "@lbc/base";
-import { useRoute } from "vue-router";
-import PlayImg from "@/assets/images/icon_6-min.png";
-import PauseImg from "@/assets/images/icon_8-min.png";
+import { computed, ref } from "vue"
+import { antiquityData, getEnvImagePath, isDevelopment } from "@lbc/base"
+import { useRoute, useRouter } from "vue-router"
+import PlayImg from "@/assets/images/icon_6-min.png"
+import PauseImg from "@/assets/images/icon_8-min.png"
 
-const route = useRoute();
+const route = useRoute()
+const router = useRouter()
 const detail = computed(() =>
   antiquityData.find((i) => i.id === Number(route.params.id))
-);
+)
 const imgs = computed(() =>
   detail.value?.img ? detail.value.img.map((i) => getEnvImagePath(i)) : []
-);
-const preview = ref(false);
+)
+const preview = ref(false)
 // 是否三维文物
-const isThree = computed(() => Boolean(detail.value?.link));
-const iframe = ref(null);
+const isThree = computed(() => Boolean(detail.value?.link))
+const iframe = ref(null)
 const iframeUrl = computed(
   () =>
     isThree &&
-    `${
-      isDevelopment
-        ? "/model.html"
-        : `${location.origin}${location.pathname.replace(
-            /index\.html$/,
-            "model.html"
-          )}`
+    `${isDevelopment
+      ? "/model.html"
+      : `${location.origin}${location.pathname.replace(
+        /index\.html$/,
+        "model.html"
+      )}`
     }?m=${detail.value?.link}`
-);
+)
 // 模型自动旋转
-const autoPlay = ref(true);
+const autoPlay = ref(true)
 
 const handleZoom = () => {
-  iframe.value.contentWindow.webview.zoomIn(); // 放大
-};
+  iframe.value.contentWindow.webview.zoomIn() // 放大
+}
 
 const handleAutoPlay = () => {
-  if (!iframe.value.contentWindow.modelLoding) return;
+  if (!iframe.value.contentWindow.modelLoding) return
 
-  iframe.value.contentWindow.webview.stopRotate();
-  autoPlay.value = !autoPlay.value;
-};
+  iframe.value.contentWindow.webview.stopRotate()
+  autoPlay.value = !autoPlay.value
+}
 
 const handleResetView = () => {
-  iframe.value.contentWindow.webview.resetView();
+  iframe.value.contentWindow.webview.resetView()
 
-  if (!autoPlay.value) handleAutoPlay();
-};
+  if (!autoPlay.value) handleAutoPlay()
+}
+
+const currentIndex = computed(() =>
+  antiquityData.findIndex((i) => i.id === Number(route.params.id))
+)
+const nextIndex = computed(() => currentIndex.value + 1)
+const preIndex = computed(() => currentIndex.value - 1)
+const onChangePreItem = () => {
+  if (preIndex.value < 0) return
+  router.push(`/antiquity/detail/${antiquityData[preIndex.value].id}`)
+}
+
+const onChangeNextItem = () => {
+  if (nextIndex.value >= antiquityData.length) return
+  router.push(`/antiquity/detail/${antiquityData[nextIndex.value].id}`)
+}
 </script>
 
 <style lang="scss" scoped>

packages/mobile/src/views/Antiquity/components/List.vue

@@ -1,13 +1,8 @@
 <template>
   <ul v-if="list.length" class="ant-list">
-    <li
-      v-for="item in list"
-      :key="item.id"
-      class="ant-item"
-      @click="
-        $router.push({ name: 'antiquityDetail', params: { id: item.id } })
-      "
-    >
+    <li v-for="item in list" :key="item.id" class="ant-item" @click="
+      $router.push({ name: 'antiquityDetail', params: { id: item.id } })
+      ">
       <div class="ant-item-img">
         <VanImage lazy-load :src="getEnvImagePath(item.minImg)" fit="contain" />
       </div>
@@ -19,14 +14,14 @@
 </template>
 
 <script setup>
-import { getEnvImagePath } from "@lbc/base";
+import { getEnvImagePath } from "@lbc/base"
 
 defineProps({
   list: {
     type: Array,
     default: [],
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>

packages/mobile/src/views/Antiquity/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="antiquity">
     <div class="antiquity-search">
-      <input
-        v-model="keyword"
-        ref="search"
-        type="search"
-        placeholder="请输入文物名称"
-      />
+      <input v-model="keyword" ref="search" type="search" placeholder="请输入文物名称" />
       <img src="@/assets/images/search-min.png" />
     </div>
 
@@ -19,23 +14,23 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
-import { antiquityData } from "@lbc/base";
-import List from "./components/List.vue";
-import { useRoute } from "vue-router";
+import { ref, computed, onMounted, onActivated } from "vue"
+import { antiquityData } from "@lbc/base"
+import List from "./components/List.vue"
+import { useRoute } from "vue-router"
 
-const keyword = ref("");
-const route = useRoute();
-const search = ref();
+const keyword = ref("")
+const route = useRoute()
+const search = ref()
 
 onMounted(() => {
   if (route.query.focus) {
-    search.value.focus();
+    search.value.focus()
   }
-});
+})
 
 const tabs = computed(() => {
-  const regex = new RegExp(keyword.value, "i");
+  const regex = new RegExp(keyword.value, "i")
 
   return [
     {
@@ -50,8 +45,8 @@ const tabs = computed(() => {
       label: "三维",
       list: antiquityData.filter((i) => !!i.link && regex.test(i.name)),
     },
-  ];
-});
+  ]
+})
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/assets/main.css

@@ -76,7 +76,6 @@ iframe {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
-  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   word-break: break-all;
   word-wrap: break-word;
@@ -108,4 +107,4 @@ iframe {
   * {
     transition: all 0.3s;
   }
-}
+}

packages/pc/src/stores/counter.js

@@ -10,3 +10,14 @@ export const useCounterStore = defineStore('counter', () => {
 
   return { count, doubleCount, increment }
 })
+
+export const usePaginationStore = defineStore('pagination', {
+  state: () => ({
+    page: 1,
+  }),
+  actions: {
+    setPage(newPage) {
+      this.page = newPage
+    },
+  },
+})

packages/pc/src/views/Antiquity/Detail/index.scss

@@ -8,7 +8,27 @@
   height: 100vh;
   overflow: hidden;
   background: url("@/assets/images/bg-min.png") no-repeat center / cover;
+  gap: 10px;
 
+  &-iconLeft,
+  &-iconLeft {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-iconRight {
+    width: 40px;
+    height: 40px;
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
   &-two {
     display: flex;
     gap: 200px;

packages/pc/src/views/Antiquity/Detail/index.vue

@@ -1,56 +1,25 @@
 <template>
   <div class="antiquity-detail">
-    <img
-      class="icon-back"
-      src="@/assets/images/back.png"
-      @click="$router.back()"
-    />
-
+    <img class="icon-back" src="@/assets/images/back.png" @click="$router.push('/antiquity')" />
+    <div class="antiquity-detail-iconLeft" @click="onChangePreItem"><img src="@/assets/images/left.png" alt="" /></div>
     <div class="antiquity-detail-two">
       <template v-if="!isThree">
-        <div
-          v-if="Array.isArray(detail?.img) && detail.img.length"
-          class="antiquity-detail-two-left"
-        >
+        <div v-if="Array.isArray(detail?.img) && detail.img.length" class="antiquity-detail-two-left">
           <ElImage :src="getEnvImagePath(detail?.minImg)" />
 
           <div class="antiquity-detail-two-left-tools">
-            <img
-              draggable="false"
-              src="@/assets/images/icon_2-min.png"
-              @click="handlePreviewImg"
-            />
+            <img draggable="false" src="@/assets/images/icon_2-min.png" @click="handlePreviewImg" />
           </div>
         </div>
       </template>
 
       <div v-else class="antiquity-detail-two-left">
-        <iframe
-          ref="iframe"
-          :src="`./model.html?m=${detail?.link}`"
-          allowfullscreen="true"
-        />
+        <iframe ref="iframe" :src="`./model.html?m=${detail?.link}`" allowfullscreen="true" />
         <div class="antiquity-detail-two-left-tools">
-          <img
-            draggable="false"
-            :src="isFullscreen ? UnFullscreenImg : FullscreenImg"
-            @click="toggle"
-          />
-          <img
-            draggable="false"
-            src="@/assets/images/icon_5-min.png"
-            @click="handleZoom"
-          />
-          <img
-            draggable="false"
-            :src="autoPlay ? PauseImg : PlayImg"
-            @click="handleAutoPlay"
-          />
-          <img
-            draggable="false"
-            src="@/assets/images/icon_7-min.png"
-            @click="handleResetView"
-          />
+          <img draggable="false" :src="isFullscreen ? UnFullscreenImg : FullscreenImg" @click="toggle" />
+          <img draggable="false" src="@/assets/images/icon_5-min.png" @click="handleZoom" />
+          <img draggable="false" :src="autoPlay ? PauseImg : PlayImg" @click="handleAutoPlay" />
+          <img draggable="false" src="@/assets/images/icon_7-min.png" @click="handleResetView" />
         </div>
       </div>
 
@@ -68,66 +37,84 @@
         </div>
       </ElScrollbar>
     </div>
+    <div class="antiquity-detail-iconRight" @click="onChangeNextItem"><img src="@/assets/images/right.png" alt="" />
+    </div>
   </div>
 
   <ElImageViewer v-if="preview" :url-list="imgs" @close="preview = false" />
 </template>
 
 <script setup>
-import { useFullscreen } from "@vueuse/core";
-import { computed, ref } from "vue";
-import { antiquityData, getEnvImagePath } from "@lbc/base";
-import { useRoute } from "vue-router";
-import FullscreenImg from "@/assets/images/icon_2-min.png";
-import UnFullscreenImg from "@/assets/images/icon_4-min.png";
-import PlayImg from "@/assets/images/icon_6-min.png";
-import PauseImg from "@/assets/images/icon_8-min.png";
-
-const { isFullscreen } = useFullscreen();
-const route = useRoute();
+import { useFullscreen } from "@vueuse/core"
+import { computed, ref } from "vue"
+import { antiquityData, getEnvImagePath } from "@lbc/base"
+import { useRoute, useRouter } from "vue-router"
+import FullscreenImg from "@/assets/images/icon_2-min.png"
+import UnFullscreenImg from "@/assets/images/icon_4-min.png"
+import PlayImg from "@/assets/images/icon_6-min.png"
+import PauseImg from "@/assets/images/icon_8-min.png"
+
+const { isFullscreen } = useFullscreen()
+const route = useRoute()
+const router = useRouter()
 const detail = computed(() =>
   antiquityData.find((i) => i.id === Number(route.params.id))
-);
+)
 const imgs = computed(() =>
   detail.value?.img ? detail.value.img.map((i) => getEnvImagePath(i)) : []
-);
-const preview = ref(false);
+)
+const preview = ref(false)
 // 是否三维文物
-const isThree = computed(() => Boolean(detail.value.link));
-const iframe = ref(null);
+const isThree = computed(() => Boolean(detail.value.link))
+const iframe = ref(null)
 // 模型自动旋转
-const autoPlay = ref(true);
+const autoPlay = ref(true)
 
 const handlePreviewImg = () => {
-  preview.value = true;
-};
+  preview.value = true
+}
 
 const handleZoom = () => {
-  iframe.value.contentWindow.webview.zoomIn(); // 放大
-};
+  iframe.value.contentWindow.webview.zoomIn() // 放大
+}
 
 const handleAutoPlay = () => {
-  if (!iframe.value.contentWindow.modelLoding) return;
+  if (!iframe.value.contentWindow.modelLoding) return
 
-  iframe.value.contentWindow.webview.stopRotate();
-  autoPlay.value = !autoPlay.value;
-};
+  iframe.value.contentWindow.webview.stopRotate()
+  autoPlay.value = !autoPlay.value
+}
 
 const handleResetView = () => {
-  iframe.value.contentWindow.webview.resetView();
+  iframe.value.contentWindow.webview.resetView()
 
-  if (!autoPlay.value) handleAutoPlay();
-};
+  if (!autoPlay.value) handleAutoPlay()
+}
 
 const toggle = () => {
-  if (!iframe.value) return;
+  if (!iframe.value) return
 
-  if (iframe.value.requestFullscreen) iframe.value.requestFullscreen();
+  if (iframe.value.requestFullscreen) iframe.value.requestFullscreen()
   else if (iframe.value.mozRequestFullScreen)
-    iframe.value.mozRequestFullScreen();
+    iframe.value.mozRequestFullScreen()
   else if (iframe.value.webkitRequestFullscreen)
-    iframe.value.webkitRequestFullscreen();
-};
+    iframe.value.webkitRequestFullscreen()
+}
+
+const currentIndex = computed(() =>
+  antiquityData.findIndex((i) => i.id === Number(route.params.id))
+)
+const nextIndex = computed(() => currentIndex.value + 1)
+const preIndex = computed(() => currentIndex.value - 1)
+const onChangePreItem = () => {
+  if (preIndex.value < 0) return
+  router.push(`/antiquity/detail/${antiquityData[preIndex.value].id}`)
+}
+
+const onChangeNextItem = () => {
+  if (nextIndex.value >= antiquityData.length) return
+  router.push(`/antiquity/detail/${antiquityData[nextIndex.value].id}`)
+}
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/views/Antiquity/components/List.vue

@@ -1,13 +1,8 @@
 <template>
   <ul class="ant-list">
-    <li
-      v-for="item in list.slice((page - 1) * SIZE, page * SIZE)"
-      :key="item.id"
-      class="ant-item"
-      @click="
-        $router.push({ name: 'antiquityDetail', params: { id: item.id } })
-      "
-    >
+    <li v-for="item in list.slice((page - 1) * SIZE, page * SIZE)" :key="item.id" class="ant-item" @click="
+      $router.push({ name: 'antiquityDetail', params: { id: item.id } })
+      ">
       <div class="ant-item-wrap">
         <ElImage fit="cover" :src="getEnvImagePath(item.minImg)" />
       </div>
@@ -17,33 +12,35 @@
   </ul>
 
   <div class="ant-pagination">
-    <ElPagination
-      background
-      :total="list.length"
-      :page-size="SIZE"
-      layout="pager"
-      @change="handlePage"
-    />
+    <ElPagination background :total="list.length" v-model:current-page="page" :page-size="SIZE" layout="pager"
+      @change="handlePage" />
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { getEnvImagePath } from "@lbc/base";
+import { ref, onMounted } from "vue"
+import { getEnvImagePath } from "@lbc/base"
+import { usePaginationStore } from "@/stores/counter"
 
 defineProps({
   list: {
     type: Array,
     default: [],
   },
-});
+})
 
-const SIZE = 8;
-const page = ref(1);
+const SIZE = 8
+const paginationStore = usePaginationStore()
+const page = ref(paginationStore.page)
 
 const handlePage = (p) => {
-  page.value = p;
-};
+  page.value = p
+  paginationStore.setPage(p)
+}
+
+onMounted(() => {
+  page.value = paginationStore.page
+})
 </script>
 
 <style lang="scss" scoped>