feat: 概览页包列表仅展示需关注项(预警+异常),加「查看全部」跳检索页
This commit is contained in:
@@ -31,6 +31,11 @@ const top30WithIcon = computed(() =>
|
||||
stats.value.top30.map(p => ({ ...p, emoji: iconOf(p.name) })),
|
||||
)
|
||||
|
||||
// 概览只展示需关注项(预警 + 异常),完整列表去检索页
|
||||
const attentionPackages = computed(() =>
|
||||
state.packages.filter(p => p.status === 'warn' || p.status === 'broken'),
|
||||
)
|
||||
|
||||
async function openDrawer(pkg) {
|
||||
drawerPkg.value = pkg
|
||||
drawerVisible.value = true
|
||||
@@ -91,16 +96,21 @@ function quickClean() {
|
||||
<!-- Top 30 排行(可收起) -->
|
||||
<Top30Panel v-if="showTop30" :top30="top30WithIcon" />
|
||||
|
||||
<!-- 包卡片列表 -->
|
||||
<!-- 包卡片列表:仅需关注项 -->
|
||||
<div class="sec-head">
|
||||
<span class="sec-title"><span class="emo">🎁</span>缓存包列表</span>
|
||||
<span class="sec-sub">共 {{ stats.pkgCount }} 个包 · 预警置顶 · 同状态按版本数降序</span>
|
||||
<span class="sec-title"><span class="emo">⚠️</span>需要关注</span>
|
||||
<span class="sec-sub">共 {{ attentionPackages.length }} 个需关注 · 预警置顶</span>
|
||||
<button class="link-all" @click="router.push('/search')">查看全部 →</button>
|
||||
</div>
|
||||
|
||||
<div v-if="state.loading" class="loading-tip">⏳ 加载中…</div>
|
||||
<div class="pkg-grid">
|
||||
<div v-else-if="!state.packages.length" class="empty-box">
|
||||
暂无缓存包,请检查 Verdaccio 缓存目录配置
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-if="attentionPackages.length" class="pkg-grid">
|
||||
<PackageCard
|
||||
v-for="(p, i) in state.packages"
|
||||
v-for="(p, i) in attentionPackages"
|
||||
:key="p.name"
|
||||
:pkg="p"
|
||||
:threshold="state.threshold.versionThreshold"
|
||||
@@ -111,9 +121,8 @@ function quickClean() {
|
||||
@unignore="doUnignore"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!state.loading && !state.packages.length" class="empty-box">
|
||||
暂无缓存包,请检查 Verdaccio 缓存目录配置
|
||||
</div>
|
||||
<div v-else class="empty-box">🎉 暂无需要关注的包</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 详情抽屉 + 清理确认 -->
|
||||
@@ -142,6 +151,8 @@ function quickClean() {
|
||||
.sec-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
||||
.sec-title .emo { font-size: 19px; }
|
||||
.sec-sub { font-family: var(--num); font-size: 12px; color: var(--ink-faint); font-weight: 600; }
|
||||
.link-all { padding: 6px 14px; border: none; border-radius: 999px; background: var(--panel-soft); color: var(--orange); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .2s, box-shadow .2s; }
|
||||
.link-all:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
|
||||
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.loading-tip { text-align: center; padding: 40px 0; color: var(--ink-faint); font-size: 13px; }
|
||||
.empty-box { text-align: center; padding: 60px 0; color: var(--ink-faint); font-size: 13px; }
|
||||
|
||||
Reference in New Issue
Block a user