From d91686486bb9504199af807ead8bc513a93aa2be Mon Sep 17 00:00:00 2001
From: Estrella Pan <estrellaxd05@gmail.com>
Date: Tue, 7 Jul 2026 10:58:58 +0200
Subject: [PATCH] refactor(webui): rework torrent-management UI to Soft Ink
 ab-* layer

Post-rebase rework addressing review findings on #1051 (the branch
predated the component-system migration):

- Replace retired ab-popup confirm with the useConfirm() promise hook
- Replace NButton and bare <button> with ab-button / ab-icon-button;
  badge pills with ab-tag / ab-badge marks; empty state with ab-empty;
  drop hardcoded colors for theme variables
- Make the per-bangumi page's route param reactive with a NaN guard,
  and remount the list on param change
- Add a "View torrents" entry point in the rule edit dialog
- Reload the torrent list in finally so partial batch-delete failures
  don't leave stale rows
- Align the orphan card title across locales; regenerate dts files

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Pz1EmcTPzjgEpkGQWzb8AQ
---
 webui/src/components/ab-edit-rule.vue         |  11 +
 webui/src/components/ab-torrent-list-page.vue | 192 +++++-------------
 webui/src/hooks/useTorrentList.ts             |   6 +-
 webui/src/i18n/en.json                        |   5 +-
 webui/src/i18n/zh-CN.json                     |   3 +-
 .../index/bangumi-torrents/[id]/index.vue     |  41 +++-
 webui/src/pages/index/bangumi.vue             |  16 +-
 webui/types/dts/auto-imports.d.ts             |   1 +
 8 files changed, 104 insertions(+), 171 deletions(-)

diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index aea549c2..9aae0de7 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -145,6 +145,14 @@ async function dismissReview() {
 
 const close = () => (show.value = false);
 
+// 种子管理页入口：关闭弹窗后跳转到该规则的种子列表
+const router = useRouter();
+
+function goToTorrents() {
+  close();
+  router.push(`/bangumi-torrents/${rule.value.id}`);
+}
+
 onKeyStroke('Escape', () => {
   if (!show.value) return;
   // Inner delete dialog closes first, then the modal itself.
@@ -368,6 +376,9 @@ function emitUnarchive() {
     </ab-modal>
 
     <template #footer>
+      <ab-button size="sm" variant="ghost" @click="goToTorrents">
+        {{ $t('homepage.rule.view_torrents') }}
+      </ab-button>
       <ab-button v-if="localRule.archived" size="sm" @click="emitUnarchive">
         {{ $t('homepage.rule.unarchive') }}
       </ab-button>
diff --git a/webui/src/components/ab-torrent-list-page.vue b/webui/src/components/ab-torrent-list-page.vue
index ecd52cd0..473701ce 100644
--- a/webui/src/components/ab-torrent-list-page.vue
+++ b/webui/src/components/ab-torrent-list-page.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Close, Delete, FullSelection } from '@icon-park/vue-next';
-import { NButton } from 'naive-ui';
+import { useConfirm } from '@/hooks/useConfirm';
 import type { Torrent } from '#/torrent';
 import { useTorrentList } from '@/hooks/useTorrentList';
 
@@ -14,7 +14,6 @@ const props = defineProps<{
 const {
   torrents,
   selectedIds,
-  showConfirmClear,
   load,
   allSelected,
   toggleAll,
@@ -23,6 +22,7 @@ const {
 } = useTorrentList(props.loadFn);
 
 const { t } = useI18n();
+const { confirm } = useConfirm();
 
 async function handleDeleteOne(id: number) {
   await runDelete(
@@ -40,7 +40,13 @@ async function handleDeleteSelected() {
 }
 
 async function handleClearAll() {
-  showConfirmClear.value = false;
+  const ok = await confirm({
+    title: t('homepage.torrents.deleteAll'),
+    body: t('homepage.torrents.confirm_clear'),
+    confirmText: t('homepage.torrents.deleteAll'),
+    danger: true,
+  });
+  if (!ok) return;
   await runDelete(() => props.deleteAll(), t('homepage.torrents.cleared_all'));
 }
 
@@ -52,39 +58,43 @@ onActivated(load);
     <div class="toolbar">
       <h2 class="toolbar-title">{{ title }}</h2>
       <div class="toolbar-actions">
-        <button
-          v-if="torrents.length > 0"
-          class="toolbar-btn"
-          @click="toggleAll"
-        >
-          <FullSelection :size="16" />
+        <ab-button v-if="torrents.length > 0" size="sm" @click="toggleAll">
+          <template #icon>
+            <FullSelection :size="14" />
+          </template>
           {{
             allSelected
               ? $t('homepage.torrents.deselect_all')
               : $t('homepage.torrents.select_all')
           }}
-        </button>
-        <button
+        </ab-button>
+        <ab-button
           v-if="selectedIds.size > 0"
-          class="toolbar-btn toolbar-btn--danger"
+          size="sm"
+          variant="danger"
           @click="handleDeleteSelected"
         >
-          <Delete :size="16" />
+          <template #icon>
+            <Delete :size="14" />
+          </template>
           {{ $t('homepage.torrents.delete_selected', { count: selectedIds.size }) }}
-        </button>
-        <button
+        </ab-button>
+        <ab-button
           v-if="torrents.length > 0"
-          class="toolbar-btn toolbar-btn--danger-outline"
-          @click="showConfirmClear = true"
+          size="sm"
+          variant="danger"
+          @click="handleClearAll"
         >
-          <Delete :size="16" />
+          <template #icon>
+            <Delete :size="14" />
+          </template>
           {{ $t('homepage.torrents.deleteAll') }}
-        </button>
+        </ab-button>
       </div>
     </div>
 
     <div v-if="torrents.length === 0" class="torrent-empty">
-      {{ $t('homepage.torrents.empty') }}
+      <ab-empty :title="$t('homepage.torrents.empty')" />
     </div>
     <div v-else class="torrent-scroll">
       <div
@@ -109,39 +119,30 @@ onActivated(load);
         </div>
         <div class="torrent-info">
           <span class="torrent-name">{{ torrent.name }}</span>
-          <div class="torrent-badges">
-            <span v-if="torrent.downloaded" class="badge badge-downloaded">
-              {{ $t('homepage.torrents.downloaded') }}
-            </span>
-            <span v-if="torrent.rss_id" class="badge badge-rss">RSS</span>
-            <span v-else class="badge badge-manual">
-              {{ $t('homepage.torrents.source.manual') }}
-            </span>
+          <div class="torrent-tags">
+            <ab-tag
+              v-if="torrent.downloaded"
+              type="success"
+              :title="$t('homepage.torrents.downloaded')"
+            />
+            <ab-tag v-if="torrent.rss_id" type="info" title="RSS" />
+            <ab-tag
+              v-else
+              type="neutral"
+              :title="$t('homepage.torrents.source.manual')"
+            />
           </div>
         </div>
-        <button
-          class="btn-delete"
-          :aria-label="$t('homepage.torrents.delete')"
+        <ab-icon-button
+          size="sm"
+          class="torrent-delete"
+          :label="$t('homepage.torrents.delete')"
           @click.stop="handleDeleteOne(torrent.id)"
         >
           <Close :size="14" />
-        </button>
+        </ab-icon-button>
       </div>
     </div>
-
-    <ab-popup v-model:show="showConfirmClear" :title="$t('homepage.torrents.deleteAll')">
-      <div class="confirm-body">
-        <p>{{ $t('homepage.torrents.confirm_clear') }}</p>
-        <div class="confirm-actions">
-          <NButton size="small" @click="showConfirmClear = false">
-            {{ $t('common.cancel') }}
-          </NButton>
-          <NButton size="small" type="error" @click="handleClearAll">
-            {{ $t('homepage.torrents.deleteAll') }}
-          </NButton>
-        </div>
-      </div>
-    </ab-popup>
   </div>
 </template>
 
@@ -178,51 +179,8 @@ onActivated(load);
   flex-wrap: wrap;
 }
 
-.toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  padding: 5px 10px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  font-family: inherit;
-  transition: all var(--transition-fast);
-
-  &:hover {
-    color: var(--color-text);
-    border-color: var(--color-text-muted);
-  }
-
-  &--danger {
-    background: var(--color-danger);
-    border-color: var(--color-danger);
-    color: var(--color-white);
-
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-
-  &--danger-outline {
-    border-color: var(--color-danger);
-    color: var(--color-danger);
-
-    &:hover {
-      background: var(--color-danger);
-      color: var(--color-white);
-    }
-  }
-}
-
 .torrent-empty {
-  text-align: center;
-  padding: 48px 24px;
-  color: var(--color-text-muted);
-  font-size: 14px;
+  padding: 12px;
 }
 
 .torrent-scroll {
@@ -287,63 +245,13 @@ onActivated(load);
   color: var(--color-text);
 }
 
-.torrent-badges {
+.torrent-tags {
   display: flex;
   gap: 4px;
   margin-top: 4px;
 }
 
-.badge {
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 3px;
-  line-height: 1.4;
-}
-
-.badge-downloaded {
-  background: var(--color-success);
-  color: var(--color-white);
-}
-
-.badge-rss {
-  background: var(--color-primary);
-  color: var(--color-white);
-}
-
-.badge-manual {
-  background: var(--color-accent);
-  color: var(--color-white);
-}
-
-.btn-delete {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
+.torrent-delete {
   margin-left: 8px;
-  transition: color var(--transition-fast), background-color var(--transition-fast);
-
-  &:hover {
-    color: var(--color-danger);
-    background: rgba(239, 68, 68, 0.1);
-  }
-}
-
-.confirm-body {
-  padding: 16px;
-}
-
-.confirm-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
 }
 </style>
diff --git a/webui/src/hooks/useTorrentList.ts b/webui/src/hooks/useTorrentList.ts
index 3a0b96c2..5b27126e 100644
--- a/webui/src/hooks/useTorrentList.ts
+++ b/webui/src/hooks/useTorrentList.ts
@@ -5,7 +5,6 @@ export function useTorrentList(loadFn: () => Promise<Torrent[]>) {
   const message = useMessage();
   const torrents = ref<Torrent[]>([]);
   const selectedIds = ref<Set<number>>(new Set());
-  const showConfirmClear = ref(false);
 
   async function load() {
     try {
@@ -43,16 +42,17 @@ export function useTorrentList(loadFn: () => Promise<Torrent[]>) {
     try {
       await fn();
       message.success(label);
-      await load();
     } catch {
       message.error(t('homepage.torrents.delete_failed'));
+    } finally {
+      // 部分失败（Promise.all 扇出）时也要刷新，避免已删除的行残留
+      await load();
     }
   }
 
   return {
     torrents,
     selectedIds,
-    showConfirmClear,
     load,
     allSelected,
     toggleAll,
diff --git a/webui/src/i18n/en.json b/webui/src/i18n/en.json
index b6a33d80..900b1f1b 100644
--- a/webui/src/i18n/en.json
+++ b/webui/src/i18n/en.json
@@ -249,10 +249,11 @@
       "unnamed": "Unnamed Rule",
       "season": "Season",
       "year": "Year",
-      "yes_btn": "Yes"
+      "yes_btn": "Yes",
+      "view_torrents": "View torrents"
     },
     "others": {
-      "title": "Others"
+      "title": "Unmatched torrents"
     },
     "torrents": {
       "title": "Torrents",
diff --git a/webui/src/i18n/zh-CN.json b/webui/src/i18n/zh-CN.json
index 5a767865..5ce1a3be 100644
--- a/webui/src/i18n/zh-CN.json
+++ b/webui/src/i18n/zh-CN.json
@@ -249,7 +249,8 @@
       "unnamed": "未命名规则",
       "season": "季度",
       "year": "年份",
-      "yes_btn": "是"
+      "yes_btn": "是",
+      "view_torrents": "查看种子"
     },
     "others": {
       "title": "未匹配种子"
diff --git a/webui/src/pages/index/bangumi-torrents/[id]/index.vue b/webui/src/pages/index/bangumi-torrents/[id]/index.vue
index e9834342..ecefe70f 100644
--- a/webui/src/pages/index/bangumi-torrents/[id]/index.vue
+++ b/webui/src/pages/index/bangumi-torrents/[id]/index.vue
@@ -7,17 +7,40 @@ definePage({
 });
 
 const route = useRoute();
-const bangumiId = Number((route.params as Record<string, string>).id);
-
+const router = useRouter();
 const { t } = useI18n();
-const title = computed(() => `${t('homepage.torrents.title')} #${bangumiId}`);
+
+// KeepAlive 会复用同一实例，路由参数必须保持响应式；非法 id 归一为 null
+const bangumiId = computed(() => {
+  const id = Number((route.params as Record<string, string>).id);
+  return Number.isInteger(id) && id > 0 ? id : null;
+});
+
+// 非法 id 不请求 API，直接回番剧列表（仅当当前仍在本页时，
+// 避免 KeepAlive 缓存期间路由切换触发误跳转）
+watch(
+  bangumiId,
+  (id) => {
+    if (id === null && route.name === 'Bangumi Torrents') {
+      router.replace('/bangumi');
+    }
+  },
+  { immediate: true }
+);
+
+// id 收窄后一次性构造 props，切换参数时 :key 触发重新挂载并加载
+const pageProps = computed(() => {
+  const id = bangumiId.value;
+  if (id === null) return null;
+  return {
+    title: `${t('homepage.torrents.title')} #${id}`,
+    loadFn: () => apiBangumi.getTorrents(id),
+    deleteOne: (torrentId: number) => apiBangumi.deleteTorrent(id, torrentId),
+    deleteAll: () => apiBangumi.deleteAllTorrents(id),
+  };
+});
 </script>
 
 <template>
-  <AbTorrentListPage
-    :title="title"
-    :load-fn="() => apiBangumi.getTorrents(bangumiId)"
-    :delete-one="(id: number) => apiBangumi.deleteTorrent(bangumiId, id)"
-    :delete-all="() => apiBangumi.deleteAllTorrents(bangumiId)"
-  />
+  <AbTorrentListPage v-if="pageProps" :key="bangumiId ?? -1" v-bind="pageProps" />
 </template>
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index abbe5ada..a4b0761c 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -243,7 +243,7 @@ function groupNeedsReview(group: BangumiGroup): boolean {
           >
             <div class="others-poster">
               <span class="others-icon">?</span>
-              <div class="others-count-badge">{{ orphanCount }}</div>
+              <ab-badge :count="orphanCount" class="others-count" />
             </div>
             <div class="others-info">
               <div class="others-title">{{ $t('homepage.others.title') }}</div>
@@ -484,23 +484,11 @@ function groupNeedsReview(group: BangumiGroup): boolean {
   color: var(--color-text-muted);
 }
 
-.others-count-badge {
+.others-count {
   position: absolute;
   top: -8px;
   right: -8px;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 10px;
-  background: var(--color-primary);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   z-index: 10;
-  box-shadow: 0 2px 6px rgba(124, 77, 255, 0.4);
 }
 
 .others-info {
diff --git a/webui/types/dts/auto-imports.d.ts b/webui/types/dts/auto-imports.d.ts
index e798a381..471668f1 100644
--- a/webui/types/dts/auto-imports.d.ts
+++ b/webui/types/dts/auto-imports.d.ts
@@ -51,6 +51,7 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const isValidNexusPhpCategoryIds: typeof import('../../src/utils/nexusphp')['isValidNexusPhpCategoryIds']
   const it: typeof import('vitest')['it']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']