秦汉
2 weeks ago
6 changed files with 559 additions and 3 deletions
@ -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[]>, |
|||
} |
|||
|
After Width: | Height: | Size: 5.0 KiB |
@ -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> |
|||
Loading…
Reference in new issue