fix(feed): 把 wrapper 嵌入 NCard 内部底部,真正紧贴对应卡片

frontend/src/views/Feed.vue

@@ -44,17 +44,12 @@ let categoryPromptTimer: number | null = null
 // - items 没这条 → 不渲染(孤儿)
 // - items 有 + Map 也有 → 渲染
 // - items 有 + Map 没 → 不渲染(用户已 dismiss/确认/超时)
-const articlesWithPrompts = computed(() => {
+const articlesWithPrompts = computed(() =>
-  const r = items.value.filter((a) => (categoryPromptsByArticle.value.get(a.id)?.length ?? 0) > 0)
+  items.value.filter((a) => (categoryPromptsByArticle.value.get(a.id)?.length ?? 0) > 0)
-  // eslint-disable-next-line no-console
+)
-  console.log('[AWP] resultLen=', r.length, 'itemsLen=', items.value.length, 'mapSize=', categoryPromptsByArticle.value.size)
-  return r
-})
 
 // 移除某篇文章的所有提示条(8 秒超时 / 确认后 / 过滤变化)
 function clearPromptsForArticle(articleId: number) {
-  // eslint-disable-next-line no-console
-  console.log('[CLEAR_ONE]', articleId, 'stack:', new Error().stack?.split('\n').slice(2, 5).join(' | '))
   if (categoryPromptsByArticle.value.has(articleId)) {
     const next = new Map(categoryPromptsByArticle.value)
     next.delete(articleId)
@@ -64,8 +59,6 @@ function clearPromptsForArticle(articleId: number) {
 
 // 全清
 function clearAllPrompts() {
-  // eslint-disable-next-line no-console
-  console.log('[CLEAR_ALL] size=', categoryPromptsByArticle.value.size, 'stack:', new Error().stack?.split('\n').slice(2, 5).join(' | '))
   if (categoryPromptsByArticle.value.size > 0) {
     categoryPromptsByArticle.value = new Map()
   }
@@ -693,18 +686,15 @@ onMounted(async () => {
                 {{ a.is_read ? '已读' : '标为已读' }}
               </NButton>
             </div>
-          </NSpace>
-        </NCard>
             <!--
-          该文章对应的分类提示条(per-article 挂载,卡片**下方**):
+              分类提示条(per-article,紧贴卡片底部):
-          - 用 articlesWithPrompts(过滤后只有有提示条的 article)做 v-for
+              - 嵌在 NCard 内部,确保 DOM 位置紧贴对应卡片
-          - 跟 NCard 在同一个 TransitionGroup,但 hide_read 模式不再 splice 移除文章,
+              - 只有当该 article 在 categoryPromptsByArticle Map 里有值时才渲染
-            所以 NCard 不会触发 leave 动画,wrapper 不会被卷走
+              - 8s 后 Map 删掉 → wrapper 走 leave 动画
-          - 8s 后 Map 删掉 → wrapper 走自己的 leave 动画(只影响 wrapper,不影响 NCard)
               - 内部 NAlert v-for 用 ${a.id}-${category} 作为 key,确保多个 category 时各自独立
             -->
             <div
-          v-for="a in articlesWithPrompts"
+              v-if="(categoryPromptsByArticle.get(a.id)?.length ?? 0) > 0"
               :key="`prompt-wrapper-${a.id}`"
               class="feed-category-prompt-wrapper"
             >
@@ -745,6 +735,8 @@ onMounted(async () => {
                 </NSpace>
               </NAlert>
             </div>
+          </NSpace>
+        </NCard>
       </TransitionGroup>
 
       <!-- 页码分页 -->