feat: --

packages/base/utils.js

@@ -1,9 +1,23 @@
 export const isDevelopment = import.meta.env.MODE === "development";
 
+export const getBaseUrl = (url) => {
+  let cleanUrl = url.split("#")[0];
+  cleanUrl = cleanUrl.replace(/([^:])\/{2,}/g, "$1/");
+  const regex = /^(https?:\/\/[^\/]+(?:\/[^\/]+)*)(\/(pc|mobile))\/?.*$/;
+  const match = cleanUrl.match(regex);
+
+  if (match) {
+    return match[1];
+  }
+
+  return null;
+};
+export const baseUrl = getBaseUrl(location.href);
+
 export const getEnvImagePath = (path) => {
   return isDevelopment
     ? "http://192.168.0.18:8080" + path
-    : `${window.origin}/project/yz-enamel-exhibition/base${path}`;
+    : `${baseUrl}/base${path}`;
 };
 
 export function isMobile() {
@@ -18,8 +32,10 @@ export function checkDeviceAndRedirect() {
   const isInPCPath = currentPath.includes("/pc/");
 
   if (isMobileDevice && !isInMobilePath) {
-    window.location.href = currentPath.replace("/pc/", "/mobile/");
+    window.location.href =
+      location.origin + currentPath.replace("/pc/", "/mobile/");
   } else if (!isMobileDevice && !isInPCPath) {
-    window.location.href = currentPath.replace("/mobile/", "/pc/");
+    window.location.href =
+      location.origin + currentPath.replace("/mobile/", "/pc/");
   }
 }

packages/mobile/package.json

@@ -13,6 +13,7 @@
     "pinia": "^2.2.6",
     "swiper": "^11.1.15",
     "vant": "^4.9.15",
+    "vconsole": "^3.15.1",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },

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

@@ -7,7 +7,15 @@
         在明清时期的宫廷和贵族府邸中，珐琅器还被广泛用于室内装饰。无论是作为屏风、壁画还是摆件，珐琅器都能以其独特的色彩和图案为室内空间增添一份华贵与雅致。
       </p>
 
-      <div class="chapter2-card">
+      <div
+        class="chapter2-card"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter2', index: 4 },
+          })
+        "
+      >
         <img src="./images/2-min.png" class="chapter2-card-img" />
         <p class="chapter2-card-label">
           《清雍正十二美人图<br />之捻珠观猫》<span>（故宫博物院藏）</span>
@@ -17,7 +25,15 @@
         </p>
       </div>
 
-      <div class="chapter2-card2">
+      <div
+        class="chapter2-card2"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter2', index: 5 },
+          })
+        "
+      >
         <div class="chapter2-card2-inner">
           <p class="chapter2-card2-label">《清周慕桥闺中十二景图册》</p>
           <span>（来源网络）</span>

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

@@ -41,7 +41,15 @@
         </Card2>
       </div>
 
-      <div class="chapter3-card">
+      <div
+        class="chapter3-card"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter3', index: 6 },
+          })
+        "
+      >
         <div class="chapter3-card-inner">
           <p class="chapter3-card-label">《弘历观画图轴》</p>
           <span> 郎世宁 （故宫博物院藏）</span>

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

@@ -45,7 +45,15 @@
         康熙、雍正至乾隆早期，宫廷所需铜胎画珐琅，主要为内廷珐琅作承办，其间虽有广珐琅进贡，但数量有限。乾隆中后期，粤海关大量“成做”供御金属胎画珐琅器。
       </p>
 
-      <div class="chapter4-card3">
+      <div
+        class="chapter4-card3"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter4', index: 1 },
+          })
+        "
+      >
         <img src="./images/5-min.png" />
         <p class="label">铜胎画珐琅八宝花卉纹盆<span> 天津博物馆藏</span></p>
         <p class="content">

packages/mobile/src/views/Index/components/Chapter1/index.vue

@@ -11,7 +11,17 @@
     </p>
 
     <ul class="chapter1-list">
-      <li v-for="(item, index) in LIST" :key="index" class="chapter1-list-item">
+      <li
+        v-for="(item, index) in LIST"
+        :key="index"
+        class="chapter1-list-item"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter1', index: item.index },
+          })
+        "
+      >
         <img :src="item.img" />
       </li>
     </ul>
@@ -38,24 +48,31 @@ import Img7 from "./images/7-1-min.png";
 const LIST = [
   {
     img: Img1,
+    index: 1,
   },
   {
     img: Img2,
+    index: 0,
   },
   {
     img: Img3,
+    index: 7,
   },
   {
     img: Img4,
+    index: 4,
   },
   {
     img: Img5,
+    index: 5,
   },
   {
     img: Img6,
+    index: 9,
   },
   {
     img: Img7,
+    index: 8,
   },
 ];
 </script>

packages/mobile/src/views/Index/components/Chapter2/index.vue

@@ -11,7 +11,17 @@
     </p>
 
     <ul class="chapter2-list">
-      <li v-for="(item, index) in LIST" :key="index" class="chapter2-list-item">
+      <li
+        v-for="(item, index) in LIST"
+        :key="index"
+        class="chapter2-list-item"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter2', index: item.index },
+          })
+        "
+      >
         <img :src="item.img" />
       </li>
     </ul>
@@ -35,15 +45,19 @@ import Img4 from "./images/4-min.png";
 const LIST = [
   {
     img: Img1,
+    index: 2,
   },
   {
     img: Img2,
+    index: 0,
   },
   {
     img: Img3,
+    index: 1,
   },
   {
     img: Img4,
+    index: 3,
   },
 ];
 </script>

packages/mobile/src/views/Index/components/Chapter3/index.vue

@@ -10,7 +10,17 @@
     </p>
 
     <ul class="chapter3-list">
-      <li v-for="(item, index) in LIST" :key="index" class="chapter3-list-item">
+      <li
+        v-for="(item, index) in LIST"
+        :key="index"
+        class="chapter3-list-item"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter3', index: item.index },
+          })
+        "
+      >
         <img :src="item.img" />
       </li>
     </ul>
@@ -36,18 +46,23 @@ import Img5 from "./images/5-min.png";
 const LIST = [
   {
     img: Img1,
+    index: 1,
   },
   {
     img: Img2,
+    index: 2,
   },
   {
     img: Img3,
+    index: 3,
   },
   {
     img: Img4,
+    index: 4,
   },
   {
     img: Img5,
+    index: 0,
   },
 ];
 </script>

packages/mobile/src/views/Index/components/Chapter4/index.vue

@@ -26,7 +26,16 @@
     </div>
 
     <ul class="chapter4-list">
-      <li v-for="(item, index) in LIST" :key="index">
+      <li
+        v-for="(item, index) in LIST"
+        :key="index"
+        @click="
+          $router.push({
+            name: 'detail',
+            params: { chapter: 'chapter4', index: item.index },
+          })
+        "
+      >
         <img :src="item.img" />
       </li>
     </ul>
@@ -49,12 +58,15 @@ import Img3 from "./images/3-min.png";
 const LIST = [
   {
     img: Img1,
+    index: 2,
   },
   {
     img: Img2,
+    index: 3,
   },
   {
     img: Img3,
+    index: 4,
   },
 ];
 </script>

pnpm-lock.yaml

@@ -24,6 +24,9 @@ importers:
       vant:
         specifier: ^4.9.15
         version: 4.9.15(vue@3.5.13)
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
       vue:
         specifier: ^3.5.13
         version: 3.5.13
@@ -238,6 +241,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.26.0':
+    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.25.9':
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
@@ -821,6 +828,13 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
+  copy-text-to-clipboard@3.2.0:
+    resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
+    engines: {node: '>=12'}
+
+  core-js@3.40.0:
+    resolution: {integrity: sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1080,6 +1094,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1185,6 +1202,9 @@ packages:
     resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
 
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -1320,6 +1340,9 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
   vite-hot-client@0.2.4:
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
@@ -1600,6 +1623,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.26.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/template@7.25.9':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -2099,6 +2126,10 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
+  copy-text-to-clipboard@3.2.0: {}
+
+  core-js@3.40.0: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -2357,6 +2388,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  mutation-observer@1.0.3: {}
+
   nanoid@3.3.8: {}
 
   nanoid@5.0.9: {}
@@ -2441,6 +2474,8 @@ snapshots:
 
   readdirp@4.0.2: {}
 
+  regenerator-runtime@0.14.1: {}
+
   reusify@1.0.4: {}
 
   rfdc@1.4.1: {}
@@ -2603,6 +2638,13 @@ snapshots:
       '@vue/shared': 3.5.13
       vue: 3.5.13
 
+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.26.0
+      copy-text-to-clipboard: 3.2.0
+      core-js: 3.40.0
+      mutation-observer: 1.0.3
+
   vite-hot-client@0.2.4(vite@6.0.3(sass@1.83.0)):
     dependencies:
       vite: 6.0.3(sass@1.83.0)