From 4976ae2e68076dc86ad84237e8db79a019235a4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E6=B1=89?=
 <5725748+qin_and_han_dynasties@user.noreply.gitee.com>
Date: Mon, 4 May 2026 20:37:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E5=9B=BE?=
 =?UTF-8?q?=E9=89=B4=EF=BC=8C=E7=94=A8=E6=9D=A5=E5=B1=95=E7=A4=BA=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=9A=84=E7=89=A9=E5=93=81=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Build_God_Game/src/api/catalog.ts             |  73 +++
 Build_God_Game/src/assets/images/catalog.svg  |   1 +
 .../src/components/GooeyNav/GooeyNav.vue      |  25 +-
 Build_God_Game/src/router/index.ts            |   6 +
 Build_God_Game/src/views/CatalogView.vue      | 453 ++++++++++++++++++
 Build_God_Game/src/views/GameView.vue         |   4 +
 6 files changed, 559 insertions(+), 3 deletions(-)
 create mode 100644 Build_God_Game/src/api/catalog.ts
 create mode 100644 Build_God_Game/src/assets/images/catalog.svg
 create mode 100644 Build_God_Game/src/views/CatalogView.vue

diff --git a/Build_God_Game/src/api/catalog.ts b/Build_God_Game/src/api/catalog.ts
new file mode 100644
index 0000000..62ac0cf
--- /dev/null
+++ b/Build_God_Game/src/api/catalog.ts
@@ -0,0 +1,73 @@
+import http from './index'
+
+export interface PagedResult<T> {
+  items: T[]
+  totalCount: number
+  pageNumber: number
+  pageSize: number
+}
+
+export interface EquipmentTemplateDto {
+  id: number
+  name: string
+  description: string
+  type: number
+  rarity: number
+  requirdLevelId: number
+  money: number
+  randomAttrCount: number
+  maxEnhanceLevel: number
+  icon?: string | null
+}
+
+export interface PillDto {
+  id: number
+  name: string
+  type: number
+  rarity: number
+  description: string
+  requirdLevelId: number
+  effectValue: number
+  duration: number
+  icon?: string | null
+}
+
+export interface LevelDto {
+  id: number
+  name: string
+  levelId: number
+  currentLevelMinExp: number
+  nextLevelId?: number | null
+  baseBreakthroughRate: number
+  failIncrement: number
+  description: string
+  requiredPillId?: number | null
+  requiredPillQuantity: number
+}
+
+export interface ScrapListDto {
+  id: number
+  name: string
+  description: string
+  story: string
+  level: number
+  levelName: string
+  levelColor: string
+  attackBonus: number
+  defenseBonus: number
+  hpBonus: number
+  magicBonus: number
+  isActive: boolean
+  icon?: string | null
+}
+
+export const catalogApi = {
+  getEquipmentTemplates: (pageSize = 500) =>
+    http.post('equipment/all', {
+      pageNumber: 1,
+      pageSize,
+    }) as Promise<PagedResult<EquipmentTemplateDto>>,
+  getPills: () => http.get('pill/all') as Promise<PillDto[]>,
+  getLevels: () => http.get('level/all') as Promise<LevelDto[]>,
+  getScraps: () => http.get('scrap/list') as Promise<ScrapListDto[]>,
+}
diff --git a/Build_God_Game/src/assets/images/catalog.svg b/Build_God_Game/src/assets/images/catalog.svg
new file mode 100644
index 0000000..f8d95c9
--- /dev/null
+++ b/Build_God_Game/src/assets/images/catalog.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1777896066274" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5210" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M355.2256 102.4c36.7104 0 72.6528 10.9056 103.2192 31.2832a37.2224 37.2224 0 0 1-41.2672 61.952 111.7184 111.7184 0 0 0-61.952-18.7392H214.0672a37.2224 37.2224 0 0 0-37.2224 37.2224v521.3184c0 20.5312 16.64 37.2224 37.2224 37.2224h141.056c36.7616 0 72.704 10.9056 103.2704 31.232L512 839.68l53.5552-35.6864a186.1632 186.1632 0 0 1 103.2192-31.2832h141.1072a37.2224 37.2224 0 0 0 37.2224-37.2224V214.1184a37.2224 37.2224 0 0 0-37.2224-37.2224h-141.056c-15.5136 0-39.0144 6.656-58.88 18.2272-9.5744 5.5808-16.4864 11.264-20.5824 16.0256a20.9408 20.9408 0 0 0-3.0208 4.1984v445.5936a37.2224 37.2224 0 0 1-74.4448 0V214.1184c0-21.6064 10.3424-39.2192 21.0944-51.712 11.3664-12.5952 24.7808-23.3472 39.6288-31.6928 28.16-16.384 64.512-28.3136 96.1536-28.3136h141.1072C871.5776 102.4 921.6 152.4224 921.6 214.1184v521.3184a111.7184 111.7184 0 0 1-111.7184 111.7184h-141.1072c-22.016 0-43.5712 6.5024-61.952 18.7392l-74.1376 49.4592a37.2224 37.2224 0 0 1-41.3696 0l-74.1376-49.4592a111.7184 111.7184 0 0 0-61.952-18.7904H214.0672A111.7184 111.7184 0 0 1 102.4 735.4368V214.1184C102.4 152.4224 152.4224 102.4 214.1184 102.4h141.1072z m29.3376 402.0224c20.1216 0 36.4032 16.9984 36.4032 37.888 0 20.992-16.2816 37.9392-36.352 37.9392H311.7056c-20.1216 0-36.4032-16.9472-36.4032-37.888 0-10.0864 3.84-19.712 10.6496-26.8288a35.6352 35.6352 0 0 1 25.7536-11.1104H384.512z m0-151.7056c20.1216 0 36.4032 16.9472 36.4032 37.888 0 20.992-16.2816 37.9392-36.352 37.9392H275.3024c-20.1216 0-36.4032-16.9472-36.4032-37.888 0-20.992 16.2816-37.9392 36.352-37.9392h109.2608z" fill="#ffffff" p-id="5211" data-spm-anchor-id="a313x.search_index.0.i1.3ac63a81ppXgn9" class=""></path><path d="M355.2256 97.28c37.7344 0 74.6496 11.2128 106.1376 32.2048a42.3424 42.3424 0 0 1-47.0528 70.4 106.5984 106.5984 0 0 0-59.136-17.92H214.1184a32.1024 32.1024 0 0 0-32.1024 32.1536v521.3184c0 17.7152 14.336 32.1024 32.1024 32.1024h141.056c37.7856 0 74.7008 11.1616 106.1376 32.1536l50.6368 33.7408 50.7392-33.792a191.2832 191.2832 0 0 1 93.5424-31.744l12.544-0.3584h141.1072c17.7664 0 32.1024-14.336 32.1024-32.1024V214.1184a32.1024 32.1024 0 0 0-32.1024-32.1024h-141.056c-15.2576 0-37.9392 6.8608-56.32 17.5616a78.336 78.336 0 0 0-19.3536 15.0016c-0.9216 0.9728-1.6384 2.048-1.6896 0.768v445.5936a42.3424 42.3424 0 0 1-84.6848 0V214.1184c0-20.3776 8.3968-38.912 22.4256-55.0912 11.776-13.056 25.6-24.1664 40.8064-32.768 30.5664-17.7152 67.6352-28.9792 98.816-28.9792h141.056A116.8384 116.8384 0 0 1 926.72 214.1184v521.3184a116.8384 116.8384 0 0 1-116.8384 116.8384h-141.1072c-20.992 0-41.5744 6.1952-59.0848 17.92l-74.1888 49.408a42.3424 42.3424 0 0 1-47.0016 0l-74.1888-49.4592a106.5984 106.5984 0 0 0-59.136-17.92H214.1184A116.8384 116.8384 0 0 1 97.28 735.4368V214.1184A116.8384 116.8384 0 0 1 214.1184 97.28h141.1072z m0 10.24H214.1184c-58.88 0-106.5984 47.7184-106.5984 106.5984v521.2672c0 58.88 47.7184 106.5984 106.5984 106.5984h141.056c23.04 0 45.6192 6.8608 64.8192 19.6608l74.1888 49.4592c10.752 7.168 24.832 7.168 35.6352 0l74.1888-49.4592c19.2-12.8 41.728-19.6096 64.768-19.6096h141.1072c58.88 0 106.5984-47.7696 106.5984-106.5984V214.1184c0-58.88-47.7184-106.5984-106.5984-106.5984h-141.1072c-29.184 0-64.512 10.752-93.696 27.648-14.336 8.0896-27.2384 18.432-38.1952 30.6176-12.4928 14.4384-19.8656 30.72-19.8656 48.3328v446.8224a32.1024 32.1024 0 1 0 64.2048 0l0.6144-448a25.7024 25.7024 0 0 1 3.6352-5.12c4.8128-5.632 12.4416-11.6224 21.9136-17.1008 19.8144-11.5712 44.288-18.944 61.44-18.944h141.056c23.3984 0 42.3424 18.944 42.3424 42.3424v521.3184c0 23.3984-18.944 42.3424-42.3424 42.3424h-141.1072c-35.7376 0-70.656 10.5984-100.352 30.4128l-53.6064 35.6864h-5.632l-53.5552-35.6864a181.0432 181.0432 0 0 0-100.4544-30.4128H214.1184a42.3424 42.3424 0 0 1-42.3424-42.3424V214.1184c0-23.3984 18.944-42.3424 42.3424-42.3424h141.056c23.04 0 45.6192 6.8096 64.768 19.5584a32.1024 32.1024 0 0 0 35.6864-53.4016A181.0432 181.0432 0 0 0 355.2256 107.52z m29.3376 391.7824c23.04 0 41.5232 19.3024 41.5232 43.008 0 23.7568-18.5344 43.0592-41.472 43.0592H311.7056c-23.04 0-41.5232-19.3024-41.5232-43.008 0-11.4176 4.352-22.3232 12.0832-30.3616a40.7552 40.7552 0 0 1 29.44-12.6976H384.512z m0 10.24H311.808a30.5152 30.5152 0 0 0-22.016 9.5232 33.5872 33.5872 0 0 0-9.2672 23.2448c0 18.176 14.0288 32.8192 31.232 32.8192h72.8576c17.2544 0 31.2832-14.6432 31.2832-32.768 0-18.176-14.0288-32.8192-31.232-32.8192z m0-161.9456c23.04 0 41.5232 19.3024 41.5232 43.008 0 23.7568-18.5344 43.0592-41.472 43.0592H275.3024c-23.04 0-41.5232-19.3024-41.5232-43.008 0-23.7568 18.5344-43.0592 41.472-43.0592h109.2608z m0 10.24H275.3536c-17.2544 0-31.2832 14.6432-31.2832 32.768 0 18.176 14.0288 32.8192 31.232 32.8192h109.2608c17.2544 0 31.2832-14.6432 31.2832-32.768 0-18.176-14.0288-32.8192-31.232-32.8192z" fill="#ffffff" p-id="5212"></path></svg>
\ No newline at end of file
diff --git a/Build_God_Game/src/components/GooeyNav/GooeyNav.vue b/Build_God_Game/src/components/GooeyNav/GooeyNav.vue
index 1cee48e..e898c0f 100644
--- a/Build_God_Game/src/components/GooeyNav/GooeyNav.vue
+++ b/Build_God_Game/src/components/GooeyNav/GooeyNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="gooey-nav-root">
     <div class="relative" ref="containerRef">
       <nav class="flex relative" :style="{ transform: 'translate3d(0,0,0.01px)' }">
         <ul
@@ -20,9 +20,9 @@
           >
             <a
               :href="item.href || undefined"
+              class="gooey-nav-link"
               @click="e => handleClick(e, index)"
               @keydown="e => handleKeyDown(e, index)"
-              class="outline-none py-[0.6em] px-[1em] inline-block"
             >
               {{ item.label }}
             </a>
@@ -56,6 +56,11 @@ interface GooeyNavProps {
   initialActiveIndex?: number;
 }
 
+const emit = defineEmits<{
+  /** 用户切换到某一索引时触发（与同一项重复点击不会触发） */
+  select: [index: number];
+}>();
+
 const props = withDefaults(defineProps<GooeyNavProps>(), {
   animationTime: 600,
   particleCount: 15,
@@ -145,9 +150,14 @@ const updateEffectPosition = (element: HTMLElement) => {
 };
 
 const handleClick = (e: Event, index: number) => {
+  const item = props.items[index];
+  if (!item?.href) {
+    e.preventDefault();
+  }
   const liEl = (e.currentTarget as HTMLElement).parentElement as HTMLElement;
   if (activeIndex.value === index) return;
   activeIndex.value = index;
+  emit('select', index);
   updateEffectPosition(liEl);
   if (filterRef.value) {
     const particles = filterRef.value.querySelectorAll('.particle');
@@ -211,6 +221,15 @@ onUnmounted(() => {
 </script>
 
 <style>
+/* 使用组件内 CSS 控制留白：避免仅依赖 Tailwind 时未参与编译导致 padding 不生效 */
+.gooey-nav-root .gooey-nav-link {
+  display: inline-block;
+  outline: none;
+  padding: 12px 26px;
+  line-height: 1.3;
+  box-sizing: border-box;
+}
+
 :root {
   --linear-ease: linear(
     0,
@@ -379,7 +398,7 @@ li::after {
   content: '';
   position: absolute;
   inset: 0;
-  border-radius: 8px;
+  border-radius: 9999px;
   background: white;
   opacity: 0;
   transform: scale(0);
diff --git a/Build_God_Game/src/router/index.ts b/Build_God_Game/src/router/index.ts
index b832250..c6fb291 100644
--- a/Build_God_Game/src/router/index.ts
+++ b/Build_God_Game/src/router/index.ts
@@ -81,6 +81,12 @@ const router = createRouter({
       component: () => import('@/views/ShopView.vue'),
       meta: { requiresAuth: true }
     },
+    {
+      path: '/catalog',
+      name: 'catalog',
+      component: () => import('@/views/CatalogView.vue'),
+      meta: { requiresAuth: true }
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'NotFound',
diff --git a/Build_God_Game/src/views/CatalogView.vue b/Build_God_Game/src/views/CatalogView.vue
new file mode 100644
index 0000000..44a3478
--- /dev/null
+++ b/Build_God_Game/src/views/CatalogView.vue
@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import Particles from '@/components/Particles/Particles.vue'
+import GooeyNav from '@/components/GooeyNav/GooeyNav.vue'
+import {
+  catalogApi,
+  type EquipmentTemplateDto,
+  type PillDto,
+  type LevelDto,
+  type ScrapListDto,
+} from '@/api/catalog'
+import itemDefaultIcon from '@/assets/images/item-default.svg'
+
+type CatalogTab = 'equipment' | 'pill' | 'scrap' | 'level'
+
+const router = useRouter()
+const activeTab = ref<CatalogTab>('equipment')
+const loading = ref(false)
+const loadError = ref('')
+
+const equipmentList = ref<EquipmentTemplateDto[]>([])
+const pills = ref<PillDto[]>([])
+const scraps = ref<ScrapListDto[]>([])
+const levels = ref<LevelDto[]>([])
+
+const equipmentTypeLabels: Record<number, string> = {
+  1: '武器',
+  2: '防具',
+  3: '头盔',
+  4: '项链',
+  5: '戒指',
+  6: '鞋子',
+}
+const equipRarityLabels: Record<number, string> = {
+  1: '普通',
+  2: '稀有',
+  3: '史诗',
+  4: '传说',
+}
+const pillTypeLabels: Record<number, string> = {
+  1: '增益',
+  2: '疗伤',
+  3: '突破',
+  4: '修炼',
+}
+const pillRarityLabels: Record<number, string> = {
+  1: '下品',
+  2: '中品',
+  3: '上品',
+  4: '极品',
+}
+
+const tabs: { key: CatalogTab; label: string }[] = [
+  { key: 'equipment', label: '装备' },
+  { key: 'pill', label: '丹药' },
+  { key: 'scrap', label: '垃圾' },
+  { key: 'level', label: '境界' },
+]
+
+const gooeyNavItems = computed(() =>
+  tabs.map((t) => ({ label: t.label, href: null as string | null }))
+)
+
+const onGooeyNavSelect = (index: number) => {
+  const t = tabs[index]
+  if (t) activeTab.value = t.key
+}
+
+const resolveIcon = (folder: 'equipment' | 'pill' | 'scrap', icon?: string | null) => {
+  if (!icon) return itemDefaultIcon
+  try {
+    return new URL(`../assets/icons/${folder}/${icon}`, import.meta.url).href
+  } catch {
+    return itemDefaultIcon
+  }
+}
+
+const formatExp = (n: number) => Math.floor(n).toLocaleString('zh-CN')
+
+const formatPillDuration = (seconds: number) => {
+  if (!seconds || seconds <= 0) return '永久'
+  if (seconds >= 86400) return `${Math.round(seconds / 86400)} 天`
+  if (seconds >= 3600) return `${Math.round(seconds / 3600)} 小时`
+  if (seconds >= 60) return `${Math.round(seconds / 60)} 分钟`
+  return `${seconds} 秒`
+}
+
+const loadAll = async () => {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const [equipPage, pillRows, scrapRows, levelRows] = await Promise.all([
+      catalogApi.getEquipmentTemplates(),
+      catalogApi.getPills(),
+      catalogApi.getScraps(),
+      catalogApi.getLevels(),
+    ])
+    equipmentList.value = equipPage.items ?? []
+    pills.value = pillRows ?? []
+    scraps.value = scrapRows ?? []
+    levels.value = levelRows ?? []
+  } catch (e: unknown) {
+    loadError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const goBack = () => {
+  router.push('/game')
+}
+
+onMounted(() => {
+  loadAll()
+})
+</script>
+
+<template>
+  <div class="catalog-page">
+    <Particles :particle-count="40" :particle-colors="['#ffffff', '#888888']" class="particles-bg" />
+
+    <div class="page-container">
+      <div class="page-header">
+        <span class="back-btn" @click="goBack">← 返回</span>
+        <span class="title">图鉴</span>
+        <span class="header-placeholder"></span>
+      </div>
+
+      <p class="hint">以下为系统中的物品与境界配置（阅览），与实际背包无关。</p>
+
+      <div class="catalog-nav-wrap">
+        <GooeyNav :items="gooeyNavItems" :initial-active-index="0" @select="onGooeyNavSelect" :animation-time="600"
+          :particle-count="15" :particle-distances="[90, 10]" :particle-r="100" :time-variance="300"
+          :colors="[1, 2, 3, 1, 2, 3, 1, 4]" />
+      </div>
+
+
+      <div v-if="loading" class="state-msg">加载中...</div>
+      <div v-else-if="loadError" class="state-msg error">{{ loadError }}</div>
+
+      <template v-else>
+        <!-- 装备 -->
+        <div v-show="activeTab === 'equipment'" class="panel">
+          <div class="panel-title">装备 · {{ equipmentList.length }} 条</div>
+          <div v-if="equipmentList.length === 0" class="empty">暂无装备模板数据</div>
+          <div v-else class="card-list">
+            <div v-for="item in equipmentList" :key="item.id" class="catalog-card">
+              <img class="thumb" :src="resolveIcon('equipment', item.icon)" alt="" />
+              <div class="body">
+                <div class="name">{{ item.name }}</div>
+                <div class="meta">
+                  {{ equipmentTypeLabels[item.type] ?? `类型${item.type}` }}
+                  · {{ equipRarityLabels[item.rarity] ?? `稀有度${item.rarity}` }}
+                  · 需求境界 {{ item.requirdLevelId }}
+                </div>
+                <div class="desc">{{ item.description || '—' }}</div>
+                <div class="extra">
+                  灵石 {{ item.money }} · 随机属性 {{ item.randomAttrCount }} 条 · 最高强化 +{{ item.maxEnhanceLevel }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 丹药 -->
+        <div v-show="activeTab === 'pill'" class="panel">
+          <div class="panel-title">丹药 · {{ pills.length }} 条</div>
+          <div v-if="pills.length === 0" class="empty">暂无丹药数据</div>
+          <div v-else class="card-list">
+            <div v-for="item in pills" :key="item.id" class="catalog-card">
+              <img class="thumb" :src="resolveIcon('pill', item.icon)" alt="" />
+              <div class="body">
+                <div class="name">{{ item.name }}</div>
+                <div class="meta">
+                  {{ pillTypeLabels[item.type] ?? `类型${item.type}` }}
+                  · {{ pillRarityLabels[item.rarity] ?? `品级${item.rarity}` }}
+                  · 需求境界 {{ item.requirdLevelId }}
+                </div>
+                <div class="desc">{{ item.description || '—' }}</div>
+                <div class="extra">
+                  效果数值 {{ item.effectValue }} · 持续 {{ formatPillDuration(Number(item.duration)) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 垃圾 -->
+        <div v-show="activeTab === 'scrap'" class="panel">
+          <div class="panel-title">垃圾 · {{ scraps.length }} 条（当前可产出）</div>
+          <div v-if="scraps.length === 0" class="empty">暂无垃圾数据</div>
+          <div v-else class="card-list">
+            <div v-for="item in scraps" :key="item.id" class="catalog-card">
+              <img class="thumb" :src="resolveIcon('scrap', item.icon)" alt="" />
+              <div class="body">
+                <div class="name" :style="{ color: item.levelColor || '#fff' }">{{ item.name }}</div>
+                <div class="meta">
+                  {{ item.levelName || `品级${item.level}` }}
+                  <template v-if="!item.isActive"> · 未启用</template>
+                </div>
+                <div class="desc">{{ item.description || '—' }}</div>
+                <div class="extra stats-line">
+                  <span v-if="item.attackBonus">攻+{{ item.attackBonus }}</span>
+                  <span v-if="item.defenseBonus">防+{{ item.defenseBonus }}</span>
+                  <span v-if="item.hpBonus">血+{{ item.hpBonus }}</span>
+                  <span v-if="item.magicBonus">魔+{{ item.magicBonus }}</span>
+                  <span v-if="!item.attackBonus && !item.defenseBonus && !item.hpBonus && !item.magicBonus">无数值加成</span>
+                </div>
+                <details v-if="item.story" class="story">
+                  <summary>轶事</summary>
+                  <p>{{ item.story }}</p>
+                </details>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 境界 -->
+        <div v-show="activeTab === 'level'" class="panel">
+          <div class="panel-title">境界 · {{ levels.length }} 条</div>
+          <div v-if="levels.length === 0" class="empty">暂无境界数据</div>
+          <div v-else class="card-list">
+            <div v-for="item in levels" :key="item.id" class="catalog-card level-card">
+              <div class="body">
+                <div class="name">{{ item.name }}</div>
+                <div class="meta">
+                  层级 {{ item.levelId }}
+                  <template v-if="item.nextLevelId"> · 下一境界 ID {{ item.nextLevelId }}</template>
+                </div>
+                <div class="desc">{{ item.description || '—' }}</div>
+                <div class="extra">
+                  本级经验门槛 {{ formatExp(Number(item.currentLevelMinExp)) }}
+                  · 基础突破 {{ Number(item.baseBreakthroughRate).toFixed(1) }}%
+                  · 失败递增 +{{ Number(item.failIncrement).toFixed(1) }}%
+                </div>
+                <div v-if="item.requiredPillId && item.requiredPillQuantity > 0" class="extra pill-line">
+                  突破消耗丹药 ID {{ item.requiredPillId }} × {{ item.requiredPillQuantity }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.catalog-page {
+  min-height: 100vh;
+  background: #000;
+  padding: 16px;
+  position: relative;
+}
+
+.particles-bg {
+  position: fixed !important;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.page-container {
+  max-width: 520px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 10;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.back-btn {
+  color: #777;
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.back-btn:hover {
+  color: #fff;
+}
+
+.title {
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.header-placeholder {
+  width: 56px;
+}
+
+.hint {
+  color: #666;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  margin-bottom: 14px;
+}
+
+.catalog-nav-wrap {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 100%;
+  overflow: visible;
+  padding: 6px 0 14px;
+}
+
+/* .catalog-nav-wrap :deep(ul) {
+  flex-wrap: wrap;
+  justify-content: center;
+  row-gap: 0.35rem;
+  column-gap: 0.45rem !important;
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
+  max-width: 100%;
+  box-sizing: border-box;
+  text-shadow: none !important;
+}
+
+.catalog-nav-wrap :deep(li a),
+.catalog-nav-wrap :deep(li.active a) {
+  text-shadow: none !important;
+}
+
+.catalog-nav-wrap :deep(.effect.text) {
+  text-shadow: none !important;
+}
+
+.catalog-nav-wrap :deep(a) {
+  font-size: 0.82rem;
+  padding: 0.55em 1.25em !important;
+} */
+
+.state-msg {
+  text-align: center;
+  color: #888;
+  padding: 32px;
+}
+
+.state-msg.error {
+  color: #f87171;
+}
+
+.panel-title {
+  color: #888;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  margin-bottom: 10px;
+}
+
+.empty {
+  color: #555;
+  text-align: center;
+  padding: 24px;
+  font-size: 0.9rem;
+}
+
+.card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 28px;
+}
+
+.catalog-card {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.level-card {
+  padding-left: 14px;
+}
+
+.thumb {
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  object-fit: contain;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.body {
+  min-width: 0;
+  flex: 1;
+}
+
+.name {
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.95rem;
+  margin-bottom: 4px;
+}
+
+.meta {
+  color: #777;
+  font-size: 0.72rem;
+  margin-bottom: 6px;
+  line-height: 1.35;
+}
+
+.desc {
+  color: #aaa;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  margin-bottom: 6px;
+}
+
+.extra {
+  color: #666;
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.stats-line span {
+  margin-right: 10px;
+}
+
+.pill-line {
+  margin-top: 4px;
+  color: #a78bfa;
+}
+
+.story {
+  margin-top: 8px;
+  font-size: 0.72rem;
+  color: #888;
+}
+
+.story summary {
+  cursor: pointer;
+  color: #999;
+}
+
+.story p {
+  margin: 6px 0 0;
+  line-height: 1.45;
+  color: #777;
+}
+</style>
diff --git a/Build_God_Game/src/views/GameView.vue b/Build_God_Game/src/views/GameView.vue
index ff85aff..eda4a1c 100644
--- a/Build_God_Game/src/views/GameView.vue
+++ b/Build_God_Game/src/views/GameView.vue
@@ -16,6 +16,7 @@ import characterIco from '@/assets/images/character.svg'
 import bagIcon from '@/assets/images/bag.svg'
 import monsterIcon from '@/assets/images/monster.svg'
 import shopIcon from '@/assets/images/shop.svg'
+import catalogIcon from '@/assets/images/catalog.svg'
 
 const authStore = useAuthStore()
 const characterStore = useCharacterStore()
@@ -49,6 +50,7 @@ const menuItems = computed(() => [
   { label: '捡垃圾', icon: scrapIcon, useImage: true },
   { label: '商店', icon: shopIcon, useImage: true },
   { label: '挑战', icon: monsterIcon, useImage: true },
+  { label: '图鉴', icon: catalogIcon, useImage: true }
 ])
 
 const formatNumber = (num: number) => {
@@ -84,6 +86,8 @@ const navigateTo = (item: { label: string }) => {
     router.push('/shop')
   } else if (item.label === '角色') {
     openCharacterDetail()
+  } else if (item.label === '图鉴') {
+    router.push('/catalog')
   }
 }