From cf9e4ae00825bdee61b82968c4b7eb56a53ec379 Mon Sep 17 00:00:00 2001
From: Yanstory <862415702@qq.com>
Date: Fri, 22 May 2026 16:20:34 +0800
Subject: [PATCH 1/6] fix(ItemList): data fetch & functional optimize

---
 src/utils/utils.ts                | 21 +++++++
 src/widgets/ItemList/ItemCard.vue | 93 ++++++++++++++++++++++++++-----
 src/widgets/ItemList/consts.ts    | 23 ++++----
 src/widgets/ItemList/index.vue    | 27 ++++++++-
 src/widgets/ItemList/itemData.ts  |  9 +--
 src/widgets/ItemList/types.ts     |  1 +
 6 files changed, 144 insertions(+), 30 deletions(-)

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 6978fe88..ea3fe00e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -30,6 +30,27 @@ export function getImagePath(filename: string) {
   return `${MEDIA_ENDPOINT}/${md5.slice(0, 1)}/${md5.slice(0, 2)}/${filename}`;
 }
 
+export async function getImagePathWithRedirect(filename: string) {
+  const resp = await fetch(
+    `/api.php?${new URLSearchParams({
+      action: "query",
+      titles: `File:${filename}`,
+      redirects: "1",
+      format: "json",
+    })}`,
+  );
+  const data = await resp.json();
+
+  if (data.query?.redirects) {
+    filename = (data.query.redirects[0].to || filename)
+      .replaceAll(" ", "_")
+      .replace("文件:", "");
+  }
+
+  const md5 = MD5(filename);
+  return `${MEDIA_ENDPOINT}/${md5.slice(0, 1)}/${md5.slice(0, 2)}/${filename}`;
+}
+
 export const professionMap = {
   PIONEER: "先锋",
   WARRIOR: "近卫",
diff --git a/src/widgets/ItemList/ItemCard.vue b/src/widgets/ItemList/ItemCard.vue
index 94cd1ed9..240ce7f2 100644
--- a/src/widgets/ItemList/ItemCard.vue
+++ b/src/widgets/ItemList/ItemCard.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { onMounted, ref, watch } from "vue";
 
 import { NTooltip } from "naive-ui";
 
 import { TORAPPU_ENDPOINT } from "@/utils/consts";
-import { getImagePath } from "@/utils/utils";
+import { getImagePath, getImagePathWithRedirect } from "@/utils/utils";
 
 import type { ItemData } from "./types";
 
@@ -12,15 +12,75 @@ const props = defineProps<{
   item: ItemData;
 }>();
 
-const imgSrc = computed(() => {
+const imgSrc = ref("");
+const itemUsage = ref(props.item.usage || "");
+const itemDesc = ref(props.item.usage || "");
+
+async function updateImgSrc() {
+  if (props.item.filename === "" && props.item.iconId === "") {
+    imgSrc.value = getImagePath(`无图片占位符.png`);
+    return;
+  }
+
   if (props.item.filename === "无") {
-    return getImagePath("无图片占位符.png");
+    imgSrc.value = await getImagePathWithRedirect(
+      `道具_带框_${props.item.name}.png`,
+    );
+    return;
   }
+
   if (props.item.filename) {
-    return getImagePath(props.item.filename);
+    imgSrc.value = getImagePath(props.item.filename);
+    return;
   }
-  return `${TORAPPU_ENDPOINT}/assets/item_icon/${props.item.iconId}.png`;
+
+  imgSrc.value = `${TORAPPU_ENDPOINT}/assets/item_icon/${props.item.iconId}.png`;
+}
+
+async function updateItemInfo() {
+  const resp1 = await fetch(
+    `/api.php?${new URLSearchParams({
+      action: "parse",
+      format: "json",
+      text: props.item.usage,
+      contentmodel: "wikitext",
+      disablelimitreport: "1",
+    })}`,
+  );
+  const data1 = await resp1.json();
+  itemUsage.value = data1.parse.text["*"];
+
+  const resp2 = await fetch(
+    `/api.php?${new URLSearchParams({
+      action: "parse",
+      format: "json",
+      text: props.item.description,
+      contentmodel: "wikitext",
+      disablelimitreport: "1",
+    })}`,
+  );
+  const data2 = await resp2.json();
+  itemDesc.value = data2.parse.text["*"];
+}
+
+onMounted(async () => {
+  await updateImgSrc();
+  await updateItemInfo();
 });
+watch(
+  () => [
+    props.item.filename,
+    props.item.iconId,
+    props.item.name,
+    props.item.usage,
+    props.item.description,
+  ],
+  () => {
+    updateImgSrc();
+    updateItemInfo();
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -38,7 +98,7 @@ const imgSrc = computed(() => {
             :alt="item.name"
             loading="lazy"
             class="block"
-            style="width: 80px; height: 80px"
+            style="width: 80px; height: 80px; object-fit: contain"
           />
         </div>
         <div
@@ -50,12 +110,16 @@ const imgSrc = computed(() => {
     </template>
     <div class="max-w-80 text-sm">
       <div class="mb-1 font-bold">{{ item.name }}</div>
-      <div v-if="item.usage" class="mb-1 text-gray-300">
-        {{ item.usage }}
-      </div>
-      <div v-if="item.description" class="text-gray-400">
-        {{ item.description }}
-      </div>
+      <div
+        v-if="item.usage"
+        class="mb-1 text-gray-300"
+        v-html="itemUsage"
+      ></div>
+      <div
+        v-if="item.description"
+        class="text-gray-400 italic"
+        v-html="itemDesc"
+      ></div>
     </div>
   </NTooltip>
 </template>
@@ -68,4 +132,7 @@ const imgSrc = computed(() => {
   transform: scale(1.1);
   z-index: 1;
 }
+:deep(a) {
+  color: orange !important;
+}
 </style>
diff --git a/src/widgets/ItemList/consts.ts b/src/widgets/ItemList/consts.ts
index 98412eb9..5e92e2b7 100644
--- a/src/widgets/ItemList/consts.ts
+++ b/src/widgets/ItemList/consts.ts
@@ -12,12 +12,9 @@ export const defaultFilterConfig: FilterConfig = {
         "材料",
         "消耗道具",
         "作战记录",
-        "建材",
-        "建材原材料",
+        "精英化芯片",
         "技巧概要",
-        "芯片",
-        "双芯片",
-        "芯片组",
+        "基建材料",
         "理智药剂",
         "食物",
         "物资补给",
@@ -29,15 +26,11 @@ export const defaultFilterConfig: FilterConfig = {
         "私人信件",
         "文件夹",
         "活动道具",
-        "其它道具组合",
+        "道具组合",
         "干员赠礼",
         "纪念物",
         "可露希尔票券",
-        "其他道具",
-        "其他干员道具",
-        "养成材料组合",
-        "家具收藏包",
-        "形艺特辑组件包",
+        "其他",
       ],
     },
     obtainApproach: {
@@ -88,6 +81,14 @@ export const rarityColorMap: Record<number, string> = {
   5: "#e06c00",
 };
 
+//only needed aliases
+export const categoryAliases: Record<string, string[]> = {
+  精英化芯片: ["芯片", "芯片组", "双芯片"],
+  基建材料: ["建材", "建材原材料"],
+  道具组合: ["养成材料组合", "家具收藏包", "其它道具组合", "形艺特辑组件包"],
+  其他: ["其他道具", "其他干员道具"],
+};
+
 export const obtainApproachAliases: Record<string, string[]> = {
   采购中心: ["采购中心"],
   任务奖励: ["任务奖励", "日常任务", "周常任务"],
diff --git a/src/widgets/ItemList/index.vue b/src/widgets/ItemList/index.vue
index 4b3e2a93..d21f37cd 100644
--- a/src/widgets/ItemList/index.vue
+++ b/src/widgets/ItemList/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 import {
   NButton,
@@ -17,6 +17,7 @@ import { isMobileSkin } from "@/utils/utils";
 import FilterGroup from "./FilterGroup.vue";
 import ItemCard from "./ItemCard.vue";
 import {
+  categoryAliases,
   defaultFilterConfig,
   obtainApproachAliases,
   rarityLabelMap,
@@ -63,7 +64,13 @@ const filteredItemData = computed(() => {
     }
 
     if (states.category.length > 0) {
-      const hasMatch = states.category.some((c) => item.categories.includes(c));
+      const hasMatch = states.category.some((category) => {
+        const aliases = categoryAliases[category];
+        if (aliases) {
+          return aliases.some((alias) => item.categories.includes(alias));
+        }
+        return states.category.some((c) => item.categories.includes(c));
+      });
       if (!hasMatch) return false;
     }
 
@@ -125,6 +132,18 @@ const paginatedItemData = computed(() =>
   ),
 );
 
+watch(
+  () => [
+    filterConfig.value.states,
+    filterConfig.value.sortOrder,
+    keyword.value,
+  ],
+  () => {
+    pagination.value.page = 1;
+  },
+  { deep: true },
+);
+
 onMounted(async () => {
   itemData.value = await fetchAllItems();
   isLoading.value = false;
@@ -154,6 +173,10 @@ onMounted(async () => {
         "
       />
       <div class="my-2 flex items-center gap-2">
+        <div class="w-5em">
+          <span class="mdi mdi-package-variant-closed"></span>
+          {{ filteredItemData.length }}
+        </div>
         <NInput
           v-model:value="keyword"
           type="text"
diff --git a/src/widgets/ItemList/itemData.ts b/src/widgets/ItemList/itemData.ts
index a790c270..a0ff366d 100644
--- a/src/widgets/ItemList/itemData.ts
+++ b/src/widgets/ItemList/itemData.ts
@@ -3,12 +3,12 @@ import type { ItemData } from "./types";
 export async function fetchAllItems(): Promise<ItemData[]> {
   const itemsMap = new Map<string, ItemData>();
   let offset = 0;
-  while (offset % 5000 === 0) {
+  while (offset % 500 === 0) {
     const resp = await fetch(
       `/api.php?${new URLSearchParams({
         action: "cargoquery",
         format: "json",
-        limit: "5000",
+        limit: "500",
         tables: "item",
         fields:
           "name,description,purpose,obtain_method,rarity,category1,category2,itemId,sortId,iconId,filename,darkBackground",
@@ -35,7 +35,8 @@ export async function fetchAllItems(): Promise<ItemData[]> {
         rarity: Number(t.rarity),
         category1: t.category1 ?? "",
         category2: t.category2 ?? "",
-        categories: [t.category1, t.category2].filter(Boolean),
+        category3: t.category3 ?? "",
+        categories: [t.category1, t.category2, t.category3].filter(Boolean),
         itemId,
         sortId: Number(t.sortId),
         iconId: t.iconId ?? "",
@@ -45,5 +46,5 @@ export async function fetchAllItems(): Promise<ItemData[]> {
     }
     offset += json.cargoquery.length;
   }
-  return Array.from(itemsMap.values());
+  return Array.from(itemsMap.values()).sort((a, b) => a.sortId - b.sortId);
 }
diff --git a/src/widgets/ItemList/types.ts b/src/widgets/ItemList/types.ts
index 4f6b466f..23387fd1 100644
--- a/src/widgets/ItemList/types.ts
+++ b/src/widgets/ItemList/types.ts
@@ -6,6 +6,7 @@ export interface ItemData {
   rarity: number;
   category1: string;
   category2: string;
+  category3: string;
   categories: string[];
   itemId: string;
   sortId: number;

From 1e3734867e3e10878eb5e1adac9c51e9bf2291be Mon Sep 17 00:00:00 2001
From: Yanstory <862415702@qq.com>
Date: Fri, 22 May 2026 18:00:32 +0800
Subject: [PATCH 2/6] fix(util): repeating getImagePath

---
 src/utils/utils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ea3fe00e..7af14c08 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -47,8 +47,7 @@ export async function getImagePathWithRedirect(filename: string) {
       .replace("文件:", "");
   }
 
-  const md5 = MD5(filename);
-  return `${MEDIA_ENDPOINT}/${md5.slice(0, 1)}/${md5.slice(0, 2)}/${filename}`;
+  return getImagePath(filename);
 }
 
 export const professionMap = {

From 133eab803972d54396bb12555c4c5121882951a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=95=E8=88=9E=E5=85=AB=E5=BC=A6?= <1677759063@qq.com>
Date: Sun, 24 May 2026 00:06:32 +0800
Subject: [PATCH 3/6] =?UTF-8?q?refactor:=20=E4=BB=8E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=AF=BB=EF=BC=8C=E4=B8=8D=E8=B5=B0api=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entries/ItemList.ts           | 58 +++++++++++++++++++++-
 src/widgets/ItemList/ItemCard.vue | 82 ++-----------------------------
 src/widgets/ItemList/index.vue    | 55 +++++++++------------
 src/widgets/ItemList/itemData.ts  | 50 -------------------
 src/widgets/ItemList/types.ts     |  3 ++
 5 files changed, 87 insertions(+), 161 deletions(-)
 delete mode 100644 src/widgets/ItemList/itemData.ts

diff --git a/src/entries/ItemList.ts b/src/entries/ItemList.ts
index 837bc69a..6f8ccfd5 100644
--- a/src/entries/ItemList.ts
+++ b/src/entries/ItemList.ts
@@ -2,6 +2,62 @@ import "virtual:uno.css";
 import { createApp } from "vue";
 
 import ItemList from "../widgets/ItemList/index.vue";
+import { TORAPPU_ENDPOINT } from "../utils/consts";
+import type { ItemData } from "../widgets/ItemList/types";
+
+function readItemsFromDOM(): ItemData[] {
+  const elements = document.querySelectorAll<HTMLDivElement>("#cargo-data>div");
+  const items: ItemData[] = [];
+
+  for (const el of elements) {
+    const name = el.dataset.name ?? "";
+    const itemId = el.dataset.itemId ?? "";
+    if (!itemId) {
+      console.warn("[ItemList] itemId为空,跳过:", name);
+      continue;
+    }
+
+    const obtainMethodEl = el.querySelector<HTMLDivElement>(".obtain-method");
+    const descriptionEl = el.querySelector<HTMLDivElement>(".description");
+    const purposeEl = el.querySelector<HTMLDivElement>(".purpose");
+
+    const filename = el.dataset.filename ?? "";
+    const iconId = el.dataset.iconId ?? "";
+    const imgSrc = filename
+      ? filename
+      : `${TORAPPU_ENDPOINT}/assets/item_icon/${iconId}.png`;
+
+    items.push({
+      name,
+      description: descriptionEl?.textContent ?? "",
+      descriptionHtml: descriptionEl?.innerHTML ?? "",
+      usage: purposeEl?.textContent ?? "",
+      usageHtml: purposeEl?.innerHTML ?? "",
+      obtainApproach: (obtainMethodEl?.textContent ?? "")
+        .split(/[,、，]/)
+        .map((s) => s.trim())
+        .filter(Boolean),
+      rarity: Number(el.dataset.rarity ?? "0"),
+      category1: el.dataset.category1 ?? "",
+      category2: el.dataset.category2 ?? "",
+      category3: el.dataset.category3 ?? "",
+      categories: [el.dataset.category1, el.dataset.category2].filter(Boolean) as string[],
+      itemId,
+      sortId: Number(el.dataset.sortId ?? "0"),
+      iconId,
+      filename,
+      darkBackground: el.dataset.darkBackground === "1",
+      imgSrc,
+    });
+  }
+
+  items.sort((a, b) => a.sortId - b.sortId);
+  return items;
+}
 
 const ele = document.querySelector("#root");
-if (ele) createApp(ItemList, {}).mount(ele);
+if (ele) {
+  const items = readItemsFromDOM();
+  console.log(items);
+  createApp(ItemList, { items }).mount(ele);
+}
diff --git a/src/widgets/ItemList/ItemCard.vue b/src/widgets/ItemList/ItemCard.vue
index 240ce7f2..2451edde 100644
--- a/src/widgets/ItemList/ItemCard.vue
+++ b/src/widgets/ItemList/ItemCard.vue
@@ -1,86 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
 
 import { NTooltip } from "naive-ui";
 
-import { TORAPPU_ENDPOINT } from "@/utils/consts";
-import { getImagePath, getImagePathWithRedirect } from "@/utils/utils";
-
 import type { ItemData } from "./types";
 
-const props = defineProps<{
+defineProps<{
   item: ItemData;
 }>();
-
-const imgSrc = ref("");
-const itemUsage = ref(props.item.usage || "");
-const itemDesc = ref(props.item.usage || "");
-
-async function updateImgSrc() {
-  if (props.item.filename === "" && props.item.iconId === "") {
-    imgSrc.value = getImagePath(`无图片占位符.png`);
-    return;
-  }
-
-  if (props.item.filename === "无") {
-    imgSrc.value = await getImagePathWithRedirect(
-      `道具_带框_${props.item.name}.png`,
-    );
-    return;
-  }
-
-  if (props.item.filename) {
-    imgSrc.value = getImagePath(props.item.filename);
-    return;
-  }
-
-  imgSrc.value = `${TORAPPU_ENDPOINT}/assets/item_icon/${props.item.iconId}.png`;
-}
-
-async function updateItemInfo() {
-  const resp1 = await fetch(
-    `/api.php?${new URLSearchParams({
-      action: "parse",
-      format: "json",
-      text: props.item.usage,
-      contentmodel: "wikitext",
-      disablelimitreport: "1",
-    })}`,
-  );
-  const data1 = await resp1.json();
-  itemUsage.value = data1.parse.text["*"];
-
-  const resp2 = await fetch(
-    `/api.php?${new URLSearchParams({
-      action: "parse",
-      format: "json",
-      text: props.item.description,
-      contentmodel: "wikitext",
-      disablelimitreport: "1",
-    })}`,
-  );
-  const data2 = await resp2.json();
-  itemDesc.value = data2.parse.text["*"];
-}
-
-onMounted(async () => {
-  await updateImgSrc();
-  await updateItemInfo();
-});
-watch(
-  () => [
-    props.item.filename,
-    props.item.iconId,
-    props.item.name,
-    props.item.usage,
-    props.item.description,
-  ],
-  () => {
-    updateImgSrc();
-    updateItemInfo();
-  },
-  { immediate: true },
-);
 </script>
 
 <template>
@@ -94,7 +20,7 @@ watch(
           }"
         >
           <img
-            :src="imgSrc"
+            :src="item.imgSrc"
             :alt="item.name"
             loading="lazy"
             class="block"
@@ -113,12 +39,12 @@ watch(
       <div
         v-if="item.usage"
         class="mb-1 text-gray-300"
-        v-html="itemUsage"
+        v-html="item.usageHtml"
       ></div>
       <div
         v-if="item.description"
         class="text-gray-400 italic"
-        v-html="itemDesc"
+        v-html="item.descriptionHtml"
       ></div>
     </div>
   </NTooltip>
diff --git a/src/widgets/ItemList/index.vue b/src/widgets/ItemList/index.vue
index d21f37cd..b6952fed 100644
--- a/src/widgets/ItemList/index.vue
+++ b/src/widgets/ItemList/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import {
   NButton,
@@ -23,13 +23,14 @@ import {
   rarityLabelMap,
   sortOptions,
 } from "./consts";
-import { fetchAllItems } from "./itemData";
 
 import type { ItemData } from "./types";
 
-const itemData = ref<ItemData[]>([]);
+const props = defineProps<{
+  items: ItemData[];
+}>();
+
 const keyword = ref("");
-const isLoading = ref(true);
 const i18nConfig = getNaiveUILocale();
 const isMobile = isMobileSkin();
 const { theme, toggleDark } = useTheme();
@@ -55,7 +56,7 @@ const filteredItemData = computed(() => {
   const { states, sortOrder } = filterConfig.value;
   const searchWord = keyword.value.toLowerCase();
 
-  let result = itemData.value.filter((item) => {
+  let result = props.items.filter((item) => {
     if (
       states.rarity.length > 0 &&
       !states.rarity.some((r) => rarityLabelMap[r] === item.rarity)
@@ -143,11 +144,6 @@ watch(
   },
   { deep: true },
 );
-
-onMounted(async () => {
-  itemData.value = await fetchAllItems();
-  isLoading.value = false;
-});
 </script>
 
 <template>
@@ -195,29 +191,24 @@ onMounted(async () => {
           </NButton>
         </div>
       </div>
-      <div v-if="isLoading" class="py-8 text-center text-gray-400">
-        加载中...
-      </div>
-      <template v-else>
-        <div class="flex flex-wrap gap-1">
-          <ItemCard
-            v-for="item in paginatedItemData"
-            :key="item.name"
-            :item="item"
-          />
-        </div>
-        <NPagination
-          class="my-2 justify-center"
-          :item-count="filteredItemData.length"
-          :page="pagination.page"
-          :page-size="pagination.pageSize"
-          :page-sizes="pagination.pageSizes"
-          :page-slot="pagination.pageSlot"
-          :show-size-picker="pagination.showSizePicker"
-          @update:page="pagination.onChange"
-          @update:page-size="pagination.onUpdatePageSize"
+      <div class="flex flex-wrap gap-1">
+        <ItemCard
+          v-for="item in paginatedItemData"
+          :key="item.name"
+          :item="item"
         />
-      </template>
+      </div>
+      <NPagination
+        class="my-2 justify-center"
+        :item-count="filteredItemData.length"
+        :page="pagination.page"
+        :page-size="pagination.pageSize"
+        :page-sizes="pagination.pageSizes"
+        :page-slot="pagination.pageSlot"
+        :show-size-picker="pagination.showSizePicker"
+        @update:page="pagination.onChange"
+        @update:page-size="pagination.onUpdatePageSize"
+      />
     </NLayout>
   </NConfigProvider>
 </template>
diff --git a/src/widgets/ItemList/itemData.ts b/src/widgets/ItemList/itemData.ts
deleted file mode 100644
index a0ff366d..00000000
--- a/src/widgets/ItemList/itemData.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { ItemData } from "./types";
-
-export async function fetchAllItems(): Promise<ItemData[]> {
-  const itemsMap = new Map<string, ItemData>();
-  let offset = 0;
-  while (offset % 500 === 0) {
-    const resp = await fetch(
-      `/api.php?${new URLSearchParams({
-        action: "cargoquery",
-        format: "json",
-        limit: "500",
-        tables: "item",
-        fields:
-          "name,description,purpose,obtain_method,rarity,category1,category2,itemId,sortId,iconId,filename,darkBackground",
-        order_by: "sortId",
-        offset: offset.toString(),
-      })}`,
-    );
-    const json = await resp.json();
-    if (!json.cargoquery?.length) break;
-
-    for (const e of json.cargoquery) {
-      const t = e.title;
-      const itemId = t.itemId ?? "";
-      if (!itemId) {
-        console.warn("[ItemList] itemId为空,跳过:", t.name);
-        continue;
-      }
-      const name = t.name ?? "";
-      itemsMap.set(name, {
-        name,
-        description: t.description ?? "",
-        usage: t.purpose ?? "",
-        obtainApproach: (t["obtain method"] ?? "").split("、").filter(Boolean),
-        rarity: Number(t.rarity),
-        category1: t.category1 ?? "",
-        category2: t.category2 ?? "",
-        category3: t.category3 ?? "",
-        categories: [t.category1, t.category2, t.category3].filter(Boolean),
-        itemId,
-        sortId: Number(t.sortId),
-        iconId: t.iconId ?? "",
-        filename: t.filename ?? "",
-        darkBackground: t.darkBackground === "1",
-      });
-    }
-    offset += json.cargoquery.length;
-  }
-  return Array.from(itemsMap.values()).sort((a, b) => a.sortId - b.sortId);
-}
diff --git a/src/widgets/ItemList/types.ts b/src/widgets/ItemList/types.ts
index 23387fd1..2be87db1 100644
--- a/src/widgets/ItemList/types.ts
+++ b/src/widgets/ItemList/types.ts
@@ -1,7 +1,9 @@
 export interface ItemData {
   name: string;
   description: string;
+  descriptionHtml: string;
   usage: string;
+  usageHtml: string;
   obtainApproach: string[];
   rarity: number;
   category1: string;
@@ -13,6 +15,7 @@ export interface ItemData {
   iconId: string;
   filename: string;
   darkBackground: boolean;
+  imgSrc: string;
 }
 
 export interface FilterConfig {

From f23dc72e3fce641402789ef021e8d1ceabd7b58b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=95=E8=88=9E=E5=85=AB=E5=BC=A6?= <1677759063@qq.com>
Date: Sun, 24 May 2026 00:20:46 +0800
Subject: [PATCH 4/6] chore: fmt

---
 src/entries/ItemList.ts           | 12 +++++++-----
 src/widgets/ItemList/ItemCard.vue |  1 -
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/entries/ItemList.ts b/src/entries/ItemList.ts
index 6f8ccfd5..828e429a 100644
--- a/src/entries/ItemList.ts
+++ b/src/entries/ItemList.ts
@@ -1,8 +1,9 @@
 import "virtual:uno.css";
 import { createApp } from "vue";
 
-import ItemList from "../widgets/ItemList/index.vue";
 import { TORAPPU_ENDPOINT } from "../utils/consts";
+import ItemList from "../widgets/ItemList/index.vue";
+
 import type { ItemData } from "../widgets/ItemList/types";
 
 function readItemsFromDOM(): ItemData[] {
@@ -23,9 +24,8 @@ function readItemsFromDOM(): ItemData[] {
 
     const filename = el.dataset.filename ?? "";
     const iconId = el.dataset.iconId ?? "";
-    const imgSrc = filename
-      ? filename
-      : `${TORAPPU_ENDPOINT}/assets/item_icon/${iconId}.png`;
+    const imgSrc =
+      filename || `${TORAPPU_ENDPOINT}/assets/item_icon/${iconId}.png`;
 
     items.push({
       name,
@@ -41,7 +41,9 @@ function readItemsFromDOM(): ItemData[] {
       category1: el.dataset.category1 ?? "",
       category2: el.dataset.category2 ?? "",
       category3: el.dataset.category3 ?? "",
-      categories: [el.dataset.category1, el.dataset.category2].filter(Boolean) as string[],
+      categories: [el.dataset.category1, el.dataset.category2].filter(
+        Boolean,
+      ) as string[],
       itemId,
       sortId: Number(el.dataset.sortId ?? "0"),
       iconId,
diff --git a/src/widgets/ItemList/ItemCard.vue b/src/widgets/ItemList/ItemCard.vue
index 2451edde..1839dcc1 100644
--- a/src/widgets/ItemList/ItemCard.vue
+++ b/src/widgets/ItemList/ItemCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { NTooltip } from "naive-ui";
 
 import type { ItemData } from "./types";

From 2e38fe5744cbdb9c1374ad649bf58bf6f7e3fde1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=95=E8=88=9E=E5=85=AB=E5=BC=A6?= <1677759063@qq.com>
Date: Sun, 24 May 2026 00:24:34 +0800
Subject: [PATCH 5/6] fix: add category3

---
 src/entries/ItemList.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/entries/ItemList.ts b/src/entries/ItemList.ts
index 828e429a..5c0e77c2 100644
--- a/src/entries/ItemList.ts
+++ b/src/entries/ItemList.ts
@@ -41,9 +41,11 @@ function readItemsFromDOM(): ItemData[] {
       category1: el.dataset.category1 ?? "",
       category2: el.dataset.category2 ?? "",
       category3: el.dataset.category3 ?? "",
-      categories: [el.dataset.category1, el.dataset.category2].filter(
-        Boolean,
-      ) as string[],
+      categories: [
+        el.dataset.category1,
+        el.dataset.category2,
+        el.dataset.category3,
+      ].filter(Boolean) as string[],
       itemId,
       sortId: Number(el.dataset.sortId ?? "0"),
       iconId,

From 42b418558b93441bb91bbca87705e0623944a479 Mon Sep 17 00:00:00 2001
From: Yanstory <862415702@qq.com>
Date: Sun, 24 May 2026 00:43:20 +0800
Subject: [PATCH 6/6] fix: non-icon

---
 src/entries/ItemList.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/entries/ItemList.ts b/src/entries/ItemList.ts
index 5c0e77c2..5064b50e 100644
--- a/src/entries/ItemList.ts
+++ b/src/entries/ItemList.ts
@@ -2,6 +2,7 @@ import "virtual:uno.css";
 import { createApp } from "vue";
 
 import { TORAPPU_ENDPOINT } from "../utils/consts";
+import { getImagePath } from "../utils/utils";
 import ItemList from "../widgets/ItemList/index.vue";
 
 import type { ItemData } from "../widgets/ItemList/types";
@@ -24,8 +25,15 @@ function readItemsFromDOM(): ItemData[] {
 
     const filename = el.dataset.filename ?? "";
     const iconId = el.dataset.iconId ?? "";
-    const imgSrc =
-      filename || `${TORAPPU_ENDPOINT}/assets/item_icon/${iconId}.png`;
+    const imgSrc = (() => {
+      if (filename === "") {
+        return iconId === ""
+          ? getImagePath("无图片占位符.png")
+          : `${TORAPPU_ENDPOINT}/assets/item_icon/${iconId}.png`;
+      } else {
+        return filename;
+      }
+    })();
 
     items.push({
       name,