fix:绝世奇遇cdn请求优化

Author: fifthThirteen

docs/project/treasure-layout.md

@@ -0,0 +1,28 @@
+# 奇遇珍卷布局数据规则
+
+## 背景
+
+奇遇珍卷的绝世奇遇布局来自 `@jx3box/jx3box-common/data/treasure_perfect.json`，运行时默认会请求：
+
+`https://cdn.jsdelivr.net/npm/@jx3box/jx3box-common/data/treasure_perfect.json`
+
+这个无版本 jsDelivr URL 可能因为 CDN 或浏览器缓存短时间指向旧 npm 版本。曾出现本地包已更新到 `9.2.6`，线上无版本 URL 仍返回 `9.2.5`，导致新增绝世奇遇 `id=163` 缺失。
+
+## 当前规则
+
+- 远程布局有效且包含本地包内所有绝世奇遇 id 时，以远程 `items` 顺序为准。
+- 远程布局缺少本地包内的 id 时，视为远程可能落后或缓存未刷新，以本地包内 `items` 顺序补齐缺失项。
+- 补齐时，同 id 的远程配置会覆盖本地配置，避免远程已有样式更新被本地旧配置挡住。
+- 远程存在本地没有的额外 id 时会保留；远程完整时按远程顺序展示，远程缺本地项时额外 id 追加在补齐列表末尾。
+
+## 层级规则
+
+绝世奇遇图片层级不再读取 JSON 内的 `zIndex`。页面渲染时直接使用 `items` 数组索引作为 `z-index`，因此调整遮挡关系应调整 `treasure_perfect.json` 中 `perfect.items` 的顺序。
+
+## 维护建议
+
+- 发布 `@jx3box/jx3box-common` 新版本后，建议 purge 相关 jsDelivr URL：
+  - `https://purge.jsdelivr.net/npm/@jx3box/jx3box-common/data/treasure_perfect.json`
+  - `https://purge.jsdelivr.net/npm/@jx3box/jx3box-common@latest/data/treasure_perfect.json`
+- 如果对实时性要求更高，可通过 `VUE_APP_ADVENTURE_TREASURE_LAYOUT_URL` 指向固定版本 URL 或自有数据地址。
+- 后续调整奇遇珍卷逻辑时，请先阅读本文件和项目根目录的 `AGENTS.md`（如果存在）。

package-lock.json

@@ -31,7 +31,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
-        "@jx3box/jx3box-common": "^9.2.5",
+        "@jx3box/jx3box-common": "^9.2.6",
         "@jx3box/jx3box-data": "^3.9.5",
         "@jx3box/jx3box-editor": "^3.2.7",
         "@jx3box/jx3box-emotion": "^1.3.0",

package.json

@@ -32,7 +32,7 @@ function buildPerfectAchievements(adventureList = [], achievedIds, layout) {
     const achievementsList = [];
     let actNum = 0;
 
-    getTreasurePerfectItems(layout).forEach((layoutItem, index) => {
+    getTreasurePerfectItems(layout).forEach((layoutItem) => {
         const id = Number(layoutItem.id || layoutItem.dwID);
         const adventure = adventureMap[id];
         if (!id || !adventure) return;
@@ -43,7 +43,6 @@ function buildPerfectAchievements(adventureList = [], achievedIds, layout) {
             ...adventure,
             isAct,
             hasClass: layoutItem.key || "",
-            zIndex: layoutItem.zIndex || (index + 1),
             layout: layoutItem,
         });
     });

src/assets/js/treasure/index.js

@@ -13,9 +13,69 @@ function isValidTreasureLayout(layout) {
     return Array.isArray(layout?.perfect?.items);
 }
 
+function getLayoutItems(layout = {}) {
+    return Array.isArray(layout?.perfect?.items) ? layout.perfect.items : [];
+}
+
+function getLayoutItemId(item = {}) {
+    return Number(item.id || item.dwID);
+}
+
+function hasAllBaseItems(baseItems = [], overrideItems = []) {
+    const overrideItemIds = new Set(overrideItems.map(getLayoutItemId).filter(Boolean));
+    return baseItems.every((item) => overrideItemIds.has(getLayoutItemId(item)));
+}
+
+function mergeTreasureLayout(baseLayout = treasurePerfect, overrideLayout = {}) {
+    const baseItems = getLayoutItems(baseLayout);
+    const overrideItems = getLayoutItems(overrideLayout);
+
+    if (hasAllBaseItems(baseItems, overrideItems)) {
+        return {
+            ...baseLayout,
+            ...overrideLayout,
+            perfect: {
+                ...(baseLayout.perfect || {}),
+                ...(overrideLayout.perfect || {}),
+                items: overrideItems,
+            },
+        };
+    }
+
+    const overrideItemMap = overrideItems.reduce((map, item) => {
+        const id = getLayoutItemId(item);
+        if (id) map[id] = item;
+        return map;
+    }, {});
+    const mergedItemIds = new Set();
+    const items = baseItems.map((baseItem) => {
+        const id = getLayoutItemId(baseItem);
+        mergedItemIds.add(id);
+        return {
+            ...baseItem,
+            ...(overrideItemMap[id] || {}),
+        };
+    });
+
+    overrideItems.forEach((item) => {
+        const id = getLayoutItemId(item);
+        if (!mergedItemIds.has(id)) items.push(item);
+    });
+
+    return {
+        ...baseLayout,
+        ...overrideLayout,
+        perfect: {
+            ...(baseLayout.perfect || {}),
+            ...(overrideLayout.perfect || {}),
+            items,
+        },
+    };
+}
+
 function normalizeLayoutResponse(res) {
     const layout = res?.data?.data || res?.data || res;
-    return isValidTreasureLayout(layout) ? layout : treasurePerfect;
+    return isValidTreasureLayout(layout) ? mergeTreasureLayout(treasurePerfect, layout) : treasurePerfect;
 }
 
 export function getAdventureTreasureLayout(options = {}) {
@@ -35,8 +95,8 @@ export function getAdventureTreasureLayout(options = {}) {
 }
 
 export function getTreasurePerfectItems(layout = treasurePerfect) {
-    const items = layout?.perfect?.items;
-    return Array.isArray(items) ? items : treasurePerfect?.perfect?.items || [];
+    const items = getLayoutItems(layout);
+    return items.length ? items : getLayoutItems(treasurePerfect);
 }
 
 export function getTreasurePerfectItemMap(layout = treasurePerfect) {

src/assets/js/treasure/layout.js

@@ -54,7 +54,7 @@
                     <img
                         class="u-item__img"
                         :class="perfectItemClass(item)"
-                        :style="perfectImageStyle(item)"
+                        :style="perfectImageStyle(item, index)"
                         :src="getCdnImgUrl(perfectItemImage(item))"
                     />
                     <div class="m-item__text" :class="perfectItemClass(item)" :style="perfectLabelStyle(item)">
@@ -238,11 +238,11 @@ export default {
         perfectItemClass(item = {}) {
             return this.perfectItemLayout(item).key || item.hasClass || "";
         },
-        perfectImageStyle(item = {}) {
+        perfectImageStyle(item = {}, index = 0) {
             const layout = this.perfectItemLayout(item);
             return {
                 ...toTreasureCssStyle(layout.imageStyle),
-                zIndex: Number(item.zIndex || layout.zIndex || 1),
+                zIndex: index,
             };
         },
         perfectLabelStyle(item = {}) {

src/views/adventure/treasure/miniprogram/PortraitContent.vue

@@ -111,7 +111,7 @@
                 <img
                     class="u-item__img"
                     :class="perfectItemClass(item)"
-                    :style="perfectImageStyle(item)"
+                    :style="perfectImageStyle(item, index)"
                     :src="getCdnImgUrl(perfectItemImage(item))"
                 />
                 <div class="m-item__text" :class="perfectItemClass(item)" :style="perfectLabelStyle(item)">
@@ -244,11 +244,11 @@ export default {
         perfectItemClass(item = {}) {
             return this.perfectItemLayout(item).key || item.hasClass || "";
         },
-        perfectImageStyle(item = {}) {
+        perfectImageStyle(item = {}, index = 0) {
             const layout = this.perfectItemLayout(item);
             return {
                 ...toTreasureCssStyle(layout.imageStyle),
-                zIndex: Number(item.zIndex || layout.zIndex || 1),
+                zIndex: index,
             };
         },
         perfectLabelStyle(item = {}) {