refactor(pokemon): simplify list card to display only image and name
Remove environment, types, skills, and meta from the list view Update CSS and skeleton loaders for a centered, larger image layout
This commit is contained in:
@@ -272,6 +272,7 @@ Pokemon 列表功能:
|
||||
- 满足任意条件
|
||||
- 满足全部条件
|
||||
- 按自定义排序展示
|
||||
- Pokemon 列表卡片只展示 Pokemon 图片和下方的 `#ID 名称`;不展示喜欢的环境、属性、特长、喜欢的东西或编辑元信息。
|
||||
- Pokemon 卡片在已配置图片时展示所选图片缩略图;未配置图片时保留默认 Poké Ball 标记。
|
||||
|
||||
Pokemon 详情页展示:
|
||||
|
||||
@@ -1461,6 +1461,33 @@ button:disabled,
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pokemon-list-grid .entity-card {
|
||||
min-height: 168px;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pokemon-list-grid .entity-card__mark {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
}
|
||||
|
||||
.pokemon-list-grid .pokeball-mark {
|
||||
--ball-size: 64px !important;
|
||||
}
|
||||
|
||||
.pokemon-list-grid .entity-card__content {
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.pokemon-list-grid .entity-card__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.edit-meta {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
|
||||
@@ -3,8 +3,6 @@ import { Icon } from '@iconify/vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import EditMeta from '../components/EditMeta.vue';
|
||||
import EntityChips from '../components/EntityChips.vue';
|
||||
import EntityCard from '../components/EntityCard.vue';
|
||||
import FilterPanel from '../components/FilterPanel.vue';
|
||||
import PageHeader from '../components/PageHeader.vue';
|
||||
@@ -44,10 +42,6 @@ async function loadPokemon() {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function pokemonTypeIconSrc(typeId: number): string | null {
|
||||
return typeId >= 1 && typeId <= 19 ? `/types/small/${typeId}.png` : null;
|
||||
}
|
||||
|
||||
function pokemonCardImage(item: Pokemon) {
|
||||
return item.image ? { src: item.image.url, alt: t('pages.pokemon.imageAlt', { name: item.name, variant: item.image.variant }) } : undefined;
|
||||
}
|
||||
@@ -128,41 +122,22 @@ watch(query, loadPokemon);
|
||||
</div>
|
||||
</FilterPanel>
|
||||
|
||||
<div v-if="loading" class="entity-grid" aria-busy="true" :aria-label="t('pages.pokemon.loadingList')">
|
||||
<div v-if="loading" class="entity-grid pokemon-list-grid" aria-busy="true" :aria-label="t('pages.pokemon.loadingList')">
|
||||
<article v-for="index in skeletonCardCount" :key="index" class="entity-card entity-card--skeleton">
|
||||
<Skeleton variant="box" width="42px" height="42px" class="skeleton-entity-mark" />
|
||||
<Skeleton variant="box" width="92px" height="92px" class="skeleton-entity-mark" />
|
||||
<div class="entity-card__content">
|
||||
<Skeleton width="76%" height="24px" />
|
||||
<Skeleton width="58%" />
|
||||
<Skeleton width="68%" />
|
||||
<div class="skeleton-chip-row">
|
||||
<Skeleton v-for="chipIndex in 2" :key="`skills-${chipIndex}`" width="64px" class="skeleton-chip" />
|
||||
</div>
|
||||
<div class="skeleton-chip-row">
|
||||
<Skeleton v-for="chipIndex in 3" :key="`things-${chipIndex}`" width="72px" class="skeleton-chip" />
|
||||
</div>
|
||||
<Skeleton width="128px" height="24px" />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="entity-grid">
|
||||
<div v-else class="entity-grid pokemon-list-grid">
|
||||
<EntityCard
|
||||
v-for="item in pokemon"
|
||||
:key="item.id"
|
||||
:title="`#${item.id} ${item.name}`"
|
||||
:subtitle="t('pages.pokemon.environmentPrefix', { name: item.environment.name })"
|
||||
:to="`/pokemon/${item.id}`"
|
||||
:image="pokemonCardImage(item)"
|
||||
>
|
||||
<EditMeta :entity="item" />
|
||||
<div v-if="item.types.length" class="chips">
|
||||
<span v-for="type in item.types" :key="type.id" class="chip pokemon-type-chip">
|
||||
<img v-if="pokemonTypeIconSrc(type.id)" class="pokemon-type-chip__icon" :src="pokemonTypeIconSrc(type.id) ?? undefined" alt="" aria-hidden="true" />
|
||||
<span>{{ type.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<EntityChips :items="item.skills" />
|
||||
<EntityChips :items="item.favorite_things" />
|
||||
</EntityCard>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PokemonEdit v-if="showEditor" />
|
||||
|
||||
Reference in New Issue
Block a user