feat(topics): add topic manage mode for batch operations (#11952)

* feat(topics): add topic manage mode for batch operations

- Add topic manage mode with batch delete and move operations
- Implement search functionality within manage mode with keyword matching
- Create reusable AssistantAvatar component for consistent icon display
- Add assistant icons to move-to dropdown menus
- Include selection badge with clear selection tooltip
- Add delete confirmation dialog with danger button styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(TopicManageMode): convert styled components to Tailwind CSS

- Replace styled-components with Tailwind CSS for ManagePanel, ManagePanelContent, ManageIconButton, and other UI elements.
- Update button styling to use Tailwind classes for improved consistency and maintainability.
- Enhance component structure with functional components and props for better reusability.

* style(Topics): update HeaderIconButton dimensions and border radius

- Increased dimensions of HeaderIconButton from 28px to 32px for improved visibility.
- Updated border radius to use a CSS variable for consistency with other UI elements.

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

src/renderer/src/components/Avatar/AssistantAvatar.tsx

@@ -0,0 +1,34 @@
+import EmojiIcon from '@renderer/components/EmojiIcon'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { getDefaultModel } from '@renderer/services/AssistantService'
+import type { Assistant } from '@renderer/types'
+import { getLeadingEmoji } from '@renderer/utils'
+import type { FC } from 'react'
+import { useMemo } from 'react'
+
+import ModelAvatar from './ModelAvatar'
+
+interface AssistantAvatarProps {
+  assistant: Assistant
+  size?: number
+  className?: string
+}
+
+const AssistantAvatar: FC<AssistantAvatarProps> = ({ assistant, size = 24, className }) => {
+  const { assistantIconType } = useSettings()
+  const defaultModel = getDefaultModel()
+
+  const assistantName = useMemo(() => assistant.name || '', [assistant.name])
+
+  if (assistantIconType === 'model') {
+    return <ModelAvatar model={assistant.model || defaultModel} size={size} className={className} />
+  }
+
+  if (assistantIconType === 'emoji') {
+    return <EmojiIcon emoji={assistant.emoji || getLeadingEmoji(assistantName)} size={size} className={className} />
+  }
+
+  return null
+}
+
+export default AssistantAvatar

src/renderer/src/i18n/locales/en-us.json

@@ -1027,6 +1027,29 @@
         "yuque": "Export to Yuque"
       },
       "list": "Topic List",
+      "manage": {
+        "clear_selection": "Clear Selection",
+        "delete": {
+          "confirm": {
+            "content": "Are you sure you want to delete {{count}} selected topic(s)? This action cannot be undone.",
+            "title": "Delete Topics"
+          },
+          "success": "Deleted {{count}} topic(s)"
+        },
+        "deselect_all": "Deselect All",
+        "error": {
+          "at_least_one": "At least one topic must be kept"
+        },
+        "move": {
+          "button": "Move",
+          "placeholder": "Select target assistant",
+          "success": "Moved {{count}} topic(s)"
+        },
+        "pinned": "Pinned Topics",
+        "selected_count": "{{count}} selected",
+        "title": "Manage Topics",
+        "unpinned": "Unpinned Topics"
+      },
       "move_to": "Move to",
       "new": "New Topic",
       "pin": "Pin Topic",
@@ -1037,6 +1060,10 @@
         "label": "Topic Prompts",
         "tips": "Topic Prompts: Additional supplementary prompts provided for the current topic"
       },
+      "search": {
+        "placeholder": "Search topics...",
+        "title": "Search"
+      },
       "title": "Topics",
       "unpin": "Unpin Topic"
     },

src/renderer/src/i18n/locales/zh-cn.json

@@ -1027,6 +1027,29 @@
         "yuque": "导出到语雀"
       },
       "list": "话题列表",
+      "manage": {
+        "clear_selection": "取消选择",
+        "delete": {
+          "confirm": {
+            "content": "确定要删除选中的 {{count}} 个话题吗？此操作不可撤销。",
+            "title": "删除话题"
+          },
+          "success": "已删除 {{count}} 个话题"
+        },
+        "deselect_all": "取消全选",
+        "error": {
+          "at_least_one": "至少需要保留一个话题"
+        },
+        "move": {
+          "button": "移动",
+          "placeholder": "选择目标助手",
+          "success": "已移动 {{count}} 个话题"
+        },
+        "pinned": "已固定的话题",
+        "selected_count": "已选择 {{count}} 个",
+        "title": "管理话题",
+        "unpinned": "未固定的话题"
+      },
       "move_to": "移动到",
       "new": "开始新对话",
       "pin": "固定话题",
@@ -1037,6 +1060,10 @@
         "label": "话题提示词",
         "tips": "话题提示词：针对当前话题提供额外的补充提示词"
       },
+      "search": {
+        "placeholder": "搜索话题...",
+        "title": "搜索"
+      },
       "title": "话题",
       "unpin": "取消固定"
     },

src/renderer/src/i18n/locales/zh-tw.json

@@ -1027,6 +1027,29 @@
         "yuque": "匯出到語雀"
       },
       "list": "話題列表",
+      "manage": {
+        "clear_selection": "取消選擇",
+        "delete": {
+          "confirm": {
+            "content": "確定要刪除選中的 {{count}} 個話題嗎？此操作不可撤銷。",
+            "title": "刪除話題"
+          },
+          "success": "已刪除 {{count}} 個話題"
+        },
+        "deselect_all": "取消全選",
+        "error": {
+          "at_least_one": "至少需要保留一個話題"
+        },
+        "move": {
+          "button": "移動",
+          "placeholder": "選擇目標助手",
+          "success": "已移動 {{count}} 個話題"
+        },
+        "pinned": "已固定的話題",
+        "selected_count": "已選擇 {{count}} 個",
+        "title": "管理話題",
+        "unpinned": "未固定的話題"
+      },
       "move_to": "移動到",
       "new": "開始新對話",
       "pin": "固定話題",
@@ -1037,6 +1060,10 @@
         "label": "話題提示詞",
         "tips": "話題提示詞：針對目前話題提供額外的補充提示詞"
       },
+      "search": {
+        "placeholder": "搜尋話題...",
+        "title": "搜尋"
+      },
       "title": "話題",
       "unpin": "取消固定"
     },

src/renderer/src/i18n/translate/de-de.json

@@ -1027,6 +1027,29 @@
         "yuque": "Nach Yuque exportieren"
       },
       "list": "Themenliste",
+      "manage": {
+        "clear_selection": "Auswahl aufheben",
+        "delete": {
+          "confirm": {
+            "content": "Sind Sie sicher, dass Sie {{count}} ausgewähltes Thema bzw. ausgewählte Themen löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+            "title": "Themen löschen"
+          },
+          "success": "{{count}} Thema/Themen gelöscht"
+        },
+        "deselect_all": "Alle abwählen",
+        "error": {
+          "at_least_one": "Mindestens ein Thema muss beibehalten werden"
+        },
+        "move": {
+          "button": "Bewegen",
+          "placeholder": "Ziel auswählen",
+          "success": "{{count}} Thema(s) verschoben"
+        },
+        "pinned": "Angepinnte Themen",
+        "selected_count": "{{count}} ausgewählt",
+        "title": "Themen verwalten",
+        "unpinned": "Losgelöste Themen"
+      },
       "move_to": "Verschieben nach",
       "new": "Neues Gespräch starten",
       "pin": "Thema anheften",
@@ -1037,6 +1060,10 @@
         "label": "Themen-Prompt",
         "tips": "Themen-Prompt: Bietet zusätzliche ergänzende Prompts für das aktuelle Thema"
       },
+      "search": {
+        "placeholder": "Themen durchsuchen...",
+        "title": "Suche"
+      },
       "title": "Thema",
       "unpin": "Anheften aufheben"
     },

src/renderer/src/i18n/translate/el-gr.json

@@ -1027,6 +1027,29 @@
         "yuque": "Εξαγωγή στο Yuque"
       },
       "list": "Λίστα θεμάτων",
+      "manage": {
+        "clear_selection": "Καθαρισμός Επιλογής",
+        "delete": {
+          "confirm": {
+            "content": "Είσαι βέβαιος ότι θέλεις να διαγράψεις {{count}} επιλεγμένο(α) θέμα(τα); Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.",
+            "title": "Διαγραφή Θεμάτων"
+          },
+          "success": "Διαγράφηκαν {{count}} θέμα(τα)"
+        },
+        "deselect_all": "Αποεπιλογή όλων",
+        "error": {
+          "at_least_one": "Τουλάχιστον ένα θέμα πρέπει να διατηρηθεί"
+        },
+        "move": {
+          "button": "Μετακίνηση",
+          "placeholder": "Επιλέξτε στόχο",
+          "success": "Μετακινήθηκαν {{count}} θέματα"
+        },
+        "pinned": "Καρφιτσωμένα Θέματα",
+        "selected_count": "{{count}} επιλεγμένα",
+        "title": "Διαχείριση Θεμάτων",
+        "unpinned": "Ξεκαρφωμένα Θέματα"
+      },
       "move_to": "Μετακίνηση στο",
       "new": "Ξεκινήστε νέα συζήτηση",
       "pin": "Σταθερά θέματα",
@@ -1037,6 +1060,10 @@
         "label": "Προσδοκώμενα όρια",
         "tips": "Προσδοκώμενα όρια: προσθέτει επιπλέον επιστημονικές προσθήκες για το παρόν θέμα"
       },
+      "search": {
+        "placeholder": "Αναζήτηση θεμάτων...",
+        "title": "Αναζήτηση"
+      },
       "title": "Θέματα",
       "unpin": "Ξεκαρφίτσωμα"
     },

src/renderer/src/i18n/translate/es-es.json

@@ -1027,6 +1027,29 @@
         "yuque": "Exportar a Yuque"
       },
       "list": "Lista de temas",
+      "manage": {
+        "clear_selection": "Borrar selección",
+        "delete": {
+          "confirm": {
+            "content": "¿Estás seguro de que quieres eliminar {{count}} tema(s) seleccionado(s)? Esta acción no se puede deshacer.",
+            "title": "Eliminar Temas"
+          },
+          "success": "Eliminado(s) {{count}} tema(s)"
+        },
+        "deselect_all": "Deseleccionar todo",
+        "error": {
+          "at_least_one": "Al menos se debe mantener un tema."
+        },
+        "move": {
+          "button": "Mover",
+          "placeholder": "Seleccionar asistente de destino",
+          "success": "Movido(s) {{count}} tema(s)"
+        },
+        "pinned": "Temas Fijados",
+        "selected_count": "{{count}} seleccionado",
+        "title": "Administrar Temas",
+        "unpinned": "Temas no fijados"
+      },
       "move_to": "Mover a",
       "new": "Iniciar nueva conversación",
       "pin": "Fijar tema",
@@ -1037,6 +1060,10 @@
         "label": "Palabras clave del tema",
         "tips": "Palabras clave del tema: proporcionar indicaciones adicionales para el tema actual"
       },
+      "search": {
+        "placeholder": "Buscar temas...",
+        "title": "Buscar"
+      },
       "title": "Tema",
       "unpin": "Quitar fijación"
     },

src/renderer/src/i18n/translate/fr-fr.json

@@ -1027,6 +1027,29 @@
         "yuque": "Exporter vers Yuque"
       },
       "list": "Liste des sujets",
+      "manage": {
+        "clear_selection": "Effacer la sélection",
+        "delete": {
+          "confirm": {
+            "content": "Êtes-vous sûr de vouloir supprimer {{count}} sujet(s) sélectionné(s) ? Cette action est irréversible.",
+            "title": "Supprimer des sujets"
+          },
+          "success": "Supprimé {{count}} sujet(s)"
+        },
+        "deselect_all": "Tout désélectionner",
+        "error": {
+          "at_least_one": "Au moins un sujet doit être conservé"
+        },
+        "move": {
+          "button": "Déplacer",
+          "placeholder": "Sélectionner la cible",
+          "success": "Déplacé {{count}} sujet(s)"
+        },
+        "pinned": "Sujets épinglés",
+        "selected_count": "{{count}} sélectionné",
+        "title": "Gérer les sujets",
+        "unpinned": "Sujets non épinglés"
+      },
       "move_to": "Déplacer vers",
       "new": "Commencer une nouvelle conversation",
       "pin": "Fixer le sujet",
@@ -1037,6 +1060,10 @@
         "label": "Indicateurs de sujet",
         "tips": "Indicateurs de sujet : fournir des indications supplémentaires pour le sujet actuel"
       },
+      "search": {
+        "placeholder": "Rechercher des sujets...",
+        "title": "Rechercher"
+      },
       "title": "Sujet",
       "unpin": "Annuler le fixage"
     },

src/renderer/src/i18n/translate/ja-jp.json

@@ -1027,6 +1027,29 @@
         "yuque": "語雀にエクスポート"
       },
       "list": "トピックリスト",
+      "manage": {
+        "clear_selection": "選択をクリア",
+        "delete": {
+          "confirm": {
+            "content": "{{count}}件の選択したトピックを削除してもよろしいですか？この操作は元に戻せません。",
+            "title": "トピックを削除"
+          },
+          "success": "{{count}}件のトピックを削除しました"
+        },
+        "deselect_all": "すべての選択を解除",
+        "error": {
+          "at_least_one": "少なくとも1つのトピックは保持されなければなりません"
+        },
+        "move": {
+          "button": "移動",
+          "placeholder": "対象を選択",
+          "success": "{{count}}件のトピックを移動しました"
+        },
+        "pinned": "ピン留めされたトピック",
+        "selected_count": "{{count}} 選択済み",
+        "title": "トピックを管理",
+        "unpinned": "ピン留めされていないトピック"
+      },
       "move_to": "移動先",
       "new": "新しいトピック",
       "pin": "トピックを固定",
@@ -1037,6 +1060,10 @@
         "label": "トピック提示語",
         "tips": "トピック提示語：現在のトピックに対して追加の補足提示語を提供"
       },
+      "search": {
+        "placeholder": "トピックを検索...",
+        "title": "検索"
+      },
       "title": "トピック",
       "unpin": "固定解除"
     },

src/renderer/src/i18n/translate/pt-pt.json

@@ -1027,6 +1027,29 @@
         "yuque": "Exportar para Yuque"
       },
       "list": "Lista de tópicos",
+      "manage": {
+        "clear_selection": "Limpar Seleção",
+        "delete": {
+          "confirm": {
+            "content": "Tem certeza de que deseja excluir {{count}} tópico(s) selecionado(s)? Esta ação não pode ser desfeita.",
+            "title": "Excluir Tópicos"
+          },
+          "success": "Excluído(s) {{count}} tópico(s)"
+        },
+        "deselect_all": "Desmarcar Todos",
+        "error": {
+          "at_least_one": "Pelo menos um tópico deve ser mantido"
+        },
+        "move": {
+          "button": "Mover",
+          "placeholder": "Selecionar assistente de destino",
+          "success": "Movido(s) {{count}} tópico(s)"
+        },
+        "pinned": "Tópicos Fixados",
+        "selected_count": "{{count}} selecionado",
+        "title": "Gerenciar Tópicos",
+        "unpinned": "Tópicos Desafixados"
+      },
       "move_to": "Mover para",
       "new": "Começar nova conversa",
       "pin": "Fixar tópico",
@@ -1037,6 +1060,10 @@
         "label": "Prompt do tópico",
         "tips": "Prompt do tópico: fornecer prompts adicionais para o tópico atual"
       },
+      "search": {
+        "placeholder": "Pesquisar tópicos...",
+        "title": "Pesquisar"
+      },
       "title": "Tópicos",
       "unpin": "Desfixar"
     },

src/renderer/src/i18n/translate/ru-ru.json

@@ -1027,6 +1027,29 @@
         "yuque": "Экспорт в Yuque"
       },
       "list": "Список топиков",
+      "manage": {
+        "clear_selection": "Очистить выбор",
+        "delete": {
+          "confirm": {
+            "content": "Вы уверены, что хотите удалить выбранные темы ({{count}})? Это действие нельзя отменить.",
+            "title": "Удалить темы"
+          },
+          "success": "Удалено {{count}} тем(ы)"
+        },
+        "deselect_all": "Снять выделение со всех",
+        "error": {
+          "at_least_one": "Должна быть сохранена хотя бы одна тема"
+        },
+        "move": {
+          "button": "Переместить",
+          "placeholder": "Выберите цель",
+          "success": "Перемещено {{count}} тем(ы)"
+        },
+        "pinned": "Закреплённые темы",
+        "selected_count": "{{count}} выбрано",
+        "title": "Управление темами",
+        "unpinned": "Откреплённые темы"
+      },
       "move_to": "Переместить в",
       "new": "Новый топик",
       "pin": "Закрепленные темы",
@@ -1037,6 +1060,10 @@
         "label": "Тематические подсказки",
         "tips": "Тематические подсказки: Дополнительные подсказки, предоставленные для текущей темы"
       },
+      "search": {
+        "placeholder": "Искать темы...",
+        "title": "Поиск"
+      },
       "title": "Топики",
       "unpin": "Открепленные темы"
     },

src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx

@@ -1,17 +1,15 @@
-import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
+import AssistantAvatar from '@renderer/components/Avatar/AssistantAvatar'
-import EmojiIcon from '@renderer/components/EmojiIcon'
 import { CopyIcon, DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useTags } from '@renderer/hooks/useTags'
 import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
-import { getDefaultModel } from '@renderer/services/AssistantService'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { useAppDispatch } from '@renderer/store'
 import { setActiveTopicOrSessionAction } from '@renderer/store/runtime'
 import type { Assistant, AssistantsSortType } from '@renderer/types'
-import { cn, getLeadingEmoji, uuid } from '@renderer/utils'
+import { cn, uuid } from '@renderer/utils'
 import { hasTopicPendingRequests } from '@renderer/utils/queue'
 import type { MenuProps } from 'antd'
 import { Dropdown } from 'antd'
@@ -67,8 +65,7 @@ const AssistantItem: FC<AssistantItemProps> = ({
   const { t } = useTranslation()
   const { allTags } = useTags()
   const { removeAllTopics } = useAssistant(assistant.id)
-  const { clickAssistantToShowTopic, topicPosition, assistantIconType, setAssistantIconType } = useSettings()
+  const { clickAssistantToShowTopic, topicPosition, setAssistantIconType } = useSettings()
-  const defaultModel = getDefaultModel()
   const { assistants, updateAssistants } = useAssistants()
 
   const [isPending, setIsPending] = useState(false)
@@ -166,20 +163,11 @@ const AssistantItem: FC<AssistantItemProps> = ({
       popupRender={(menu) => <div onPointerDown={(e) => e.stopPropagation()}>{menu}</div>}>
       <Container onClick={handleSwitch} isActive={isActive}>
         <AssistantNameRow className="name" title={fullAssistantName}>
-          {assistantIconType === 'model' ? (
+          <AssistantAvatar
-            <ModelAvatar
+            assistant={assistant}
-              model={assistant.model || defaultModel}
             size={24}
             className={isPending && !isActive ? 'animation-pulse' : ''}
           />
-          ) : (
-            assistantIconType === 'emoji' && (
-              <EmojiIcon
-                emoji={assistant.emoji || getLeadingEmoji(assistantName)}
-                className={isPending && !isActive ? 'animation-pulse' : ''}
-              />
-            )
-          )}
           <AssistantName className="text-nowrap">{assistantName}</AssistantName>
         </AssistantNameRow>
         {isActive && (

src/renderer/src/pages/home/Tabs/components/TopicManageMode.tsx

@@ -0,0 +1,411 @@
+import AssistantAvatar from '@renderer/components/Avatar/AssistantAvatar'
+import { modelGenerating } from '@renderer/hooks/useRuntime'
+import { TopicManager } from '@renderer/hooks/useTopic'
+import type { Assistant, Topic } from '@renderer/types'
+import { cn } from '@renderer/utils'
+import { Dropdown, Tooltip } from 'antd'
+import { CheckSquare, FolderOpen, Search, Square, Trash2, XIcon } from 'lucide-react'
+import type { FC, PropsWithChildren, Ref } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface TopicManageModeState {
+  isManageMode: boolean
+  selectedIds: Set<string>
+  searchText: string
+  enterManageMode: () => void
+  exitManageMode: () => void
+  toggleSelectTopic: (topicId: string) => void
+  setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>
+  setSearchText: React.Dispatch<React.SetStateAction<string>>
+}
+
+/**
+ * Hook for managing topic selection state
+ */
+export function useTopicManageMode(): TopicManageModeState {
+  const [isManageMode, setIsManageMode] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [searchText, setSearchText] = useState('')
+
+  const enterManageMode = useCallback(() => {
+    setIsManageMode(true)
+    setSelectedIds(new Set())
+    setSearchText('')
+  }, [])
+
+  const exitManageMode = useCallback(() => {
+    setIsManageMode(false)
+    setSelectedIds(new Set())
+    setSearchText('')
+  }, [])
+
+  const toggleSelectTopic = useCallback((topicId: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(topicId)) {
+        next.delete(topicId)
+      } else {
+        next.add(topicId)
+      }
+      return next
+    })
+  }, [])
+
+  return {
+    isManageMode,
+    selectedIds,
+    searchText,
+    enterManageMode,
+    exitManageMode,
+    toggleSelectTopic,
+    setSelectedIds,
+    setSearchText
+  }
+}
+
+interface TopicManagePanelProps {
+  assistant: Assistant
+  assistants: Assistant[]
+  activeTopic: Topic
+  setActiveTopic: (topic: Topic) => void
+  removeTopic: (topic: Topic) => void
+  moveTopic: (topic: Topic, toAssistant: Assistant) => void
+  manageState: TopicManageModeState
+  filteredTopics: Topic[]
+}
+
+/**
+ * Bottom panel component for topic management mode
+ */
+export const TopicManagePanel: React.FC<TopicManagePanelProps> = ({
+  assistant,
+  assistants,
+  activeTopic,
+  setActiveTopic,
+  removeTopic,
+  moveTopic,
+  manageState,
+  filteredTopics
+}) => {
+  const { t } = useTranslation()
+  const { isManageMode, selectedIds, searchText, exitManageMode, setSelectedIds, setSearchText } = manageState
+  const [isSearchMode, setIsSearchMode] = useState(false)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  // Topics that can be selected (non-pinned, and filtered when in search mode)
+  const selectableTopics = useMemo(() => {
+    const baseTopics = isSearchMode ? filteredTopics : assistant.topics
+    return baseTopics.filter((topic) => !topic.pinned)
+  }, [assistant.topics, filteredTopics, isSearchMode])
+
+  // Check if all selectable topics are selected
+  const isAllSelected = useMemo(() => {
+    return selectableTopics.length > 0 && selectableTopics.every((topic) => selectedIds.has(topic.id))
+  }, [selectableTopics, selectedIds])
+
+  // Other assistants for move operation
+  const otherAssistants = useMemo(() => assistants.filter((a) => a.id !== assistant.id), [assistants, assistant.id])
+
+  // Handle select all / deselect all
+  const handleSelectAll = useCallback(() => {
+    if (isAllSelected) {
+      setSelectedIds(new Set())
+    } else {
+      setSelectedIds(new Set(selectableTopics.map((topic) => topic.id)))
+    }
+  }, [isAllSelected, selectableTopics, setSelectedIds])
+
+  // Handle clear selection
+  const handleClearSelection = useCallback(() => {
+    setSelectedIds(new Set())
+  }, [setSelectedIds])
+
+  // Handle delete selected topics
+  const handleDeleteSelected = useCallback(async () => {
+    if (selectedIds.size === 0) return
+
+    const remainingTopics = assistant.topics.filter((topic) => !selectedIds.has(topic.id))
+    if (remainingTopics.length === 0) {
+      window.toast.error(t('chat.topics.manage.error.at_least_one'))
+      return
+    }
+
+    const confirmed = await window.modal.confirm({
+      title: t('chat.topics.manage.delete.confirm.title'),
+      content: t('chat.topics.manage.delete.confirm.content', { count: selectedIds.size }),
+      centered: true,
+      okButtonProps: { danger: true }
+    })
+
+    if (!confirmed) return
+
+    await modelGenerating()
+
+    const deletedCount = selectedIds.size
+    for (const id of selectedIds) {
+      const topic = assistant.topics.find((t) => t.id === id)
+      if (topic) {
+        await TopicManager.removeTopic(id)
+        removeTopic(topic)
+      }
+    }
+
+    // Switch to first remaining topic if current topic was deleted
+    if (selectedIds.has(activeTopic.id)) {
+      setActiveTopic(remainingTopics[0])
+    }
+
+    window.toast.success(t('chat.topics.manage.delete.success', { count: deletedCount }))
+    exitManageMode()
+  }, [selectedIds, assistant.topics, removeTopic, activeTopic.id, setActiveTopic, t, exitManageMode])
+
+  // Handle move selected topics to another assistant
+  const handleMoveSelected = useCallback(
+    async (targetAssistantId: string) => {
+      if (selectedIds.size === 0) return
+
+      const targetAssistant = assistants.find((a) => a.id === targetAssistantId)
+      if (!targetAssistant) return
+
+      const remainingTopics = assistant.topics.filter((topic) => !selectedIds.has(topic.id))
+      if (remainingTopics.length === 0) {
+        window.toast.error(t('chat.topics.manage.error.at_least_one'))
+        return
+      }
+
+      await modelGenerating()
+
+      const movedCount = selectedIds.size
+      for (const id of selectedIds) {
+        const topic = assistant.topics.find((t) => t.id === id)
+        if (topic) {
+          moveTopic(topic, targetAssistant)
+        }
+      }
+
+      // Switch to first remaining topic if current topic was moved
+      if (selectedIds.has(activeTopic.id)) {
+        setActiveTopic(remainingTopics[0])
+      }
+
+      window.toast.success(t('chat.topics.manage.move.success', { count: movedCount }))
+      exitManageMode()
+    },
+    [selectedIds, assistant.topics, assistants, moveTopic, activeTopic.id, setActiveTopic, t, exitManageMode]
+  )
+
+  // Enter search mode
+  const enterSearchMode = useCallback(() => {
+    setIsSearchMode(true)
+  }, [])
+
+  // Exit search mode
+  const exitSearchMode = useCallback(() => {
+    setIsSearchMode(false)
+    setSearchText('')
+  }, [setSearchText])
+
+  // Focus input when entering search mode
+  useEffect(() => {
+    if (isSearchMode && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [isSearchMode])
+
+  // Reset search mode when exiting manage mode
+  useEffect(() => {
+    if (!isManageMode) {
+      setIsSearchMode(false)
+    }
+  }, [isManageMode])
+
+  // Handle search input keydown
+  const handleSearchKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        exitSearchMode()
+      }
+    },
+    [exitSearchMode]
+  )
+
+  if (!isManageMode) return null
+
+  // Search mode UI
+  if (isSearchMode) {
+    return (
+      <ManagePanel>
+        <ManagePanelContent>
+          <LeftGroup>
+            <Tooltip title={isAllSelected ? t('chat.topics.manage.deselect_all') : t('common.select_all')}>
+              <ManageIconButton onClick={handleSelectAll}>
+                {isAllSelected ? <CheckSquare size={16} /> : <Square size={16} />}
+              </ManageIconButton>
+            </Tooltip>
+            {selectedIds.size > 0 && (
+              <Tooltip title={t('chat.topics.manage.clear_selection')}>
+                <SelectedBadge onClick={handleClearSelection}>{selectedIds.size}</SelectedBadge>
+              </Tooltip>
+            )}
+          </LeftGroup>
+          <SearchInputWrapper>
+            <SearchInput
+              ref={searchInputRef}
+              type="text"
+              placeholder={t('chat.topics.search.placeholder')}
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onKeyDown={handleSearchKeyDown}
+            />
+          </SearchInputWrapper>
+          <Tooltip title={t('common.close')}>
+            <ManageIconButton onClick={exitSearchMode}>
+              <XIcon size={16} />
+            </ManageIconButton>
+          </Tooltip>
+        </ManagePanelContent>
+      </ManagePanel>
+    )
+  }
+
+  // Normal manage mode UI
+  return (
+    <ManagePanel>
+      <ManagePanelContent>
+        <LeftGroup>
+          <Tooltip title={isAllSelected ? t('chat.topics.manage.deselect_all') : t('common.select_all')}>
+            <ManageIconButton onClick={handleSelectAll}>
+              {isAllSelected ? <CheckSquare size={16} /> : <Square size={16} />}
+            </ManageIconButton>
+          </Tooltip>
+          {selectedIds.size > 0 && (
+            <Tooltip title={t('chat.topics.manage.clear_selection')}>
+              <SelectedBadge onClick={handleClearSelection}>{selectedIds.size}</SelectedBadge>
+            </Tooltip>
+          )}
+        </LeftGroup>
+        <RightGroup>
+          <Tooltip title={t('chat.topics.search.title')}>
+            <ManageIconButton onClick={enterSearchMode}>
+              <Search size={16} />
+            </ManageIconButton>
+          </Tooltip>
+          {otherAssistants.length > 0 && (
+            <Dropdown
+              menu={{
+                items: otherAssistants.map((a) => ({
+                  key: a.id,
+                  label: a.name,
+                  icon: <AssistantAvatar assistant={a} size={18} />,
+                  onClick: () => handleMoveSelected(a.id),
+                  disabled: selectedIds.size === 0
+                }))
+              }}
+              trigger={['click']}
+              disabled={selectedIds.size === 0}>
+              <Tooltip title={t('chat.topics.move_to')}>
+                <ManageIconButton disabled={selectedIds.size === 0}>
+                  <FolderOpen size={16} />
+                </ManageIconButton>
+              </Tooltip>
+            </Dropdown>
+          )}
+          <Tooltip title={t('common.delete')}>
+            <ManageIconButton danger onClick={handleDeleteSelected} disabled={selectedIds.size === 0}>
+              <Trash2 size={16} />
+            </ManageIconButton>
+          </Tooltip>
+          <ManageDivider />
+          <Tooltip title={t('common.cancel')}>
+            <ManageIconButton onClick={exitManageMode}>
+              <XIcon size={16} />
+            </ManageIconButton>
+          </Tooltip>
+        </RightGroup>
+      </ManagePanelContent>
+    </ManagePanel>
+  )
+}
+
+// Tailwind components
+const ManagePanel: FC<PropsWithChildren> = ({ children }) => (
+  <div className="absolute bottom-[15px] left-[12px] z-[100] flex w-[calc(var(--assistants-width)-24px)] flex-row items-center rounded-xl bg-[var(--color-background)] px-3 py-2 shadow-[0_4px_12px_rgba(0,0,0,0.15),0_0_0_1px_var(--color-border)]">
+    {children}
+  </div>
+)
+
+const ManagePanelContent: FC<PropsWithChildren> = ({ children }) => (
+  <div className="flex w-full min-w-0 flex-row items-center gap-1 overflow-hidden">{children}</div>
+)
+
+interface ManageIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  danger?: boolean
+}
+
+const ManageIconButton: FC<PropsWithChildren<ManageIconButtonProps>> = ({
+  children,
+  className,
+  danger,
+  disabled,
+  ...props
+}) => (
+  <button
+    {...props}
+    type="button"
+    disabled={disabled}
+    className={cn(
+      'flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-none bg-transparent text-[var(--color-text-2)] transition-all duration-200',
+      disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
+      !disabled && !danger && 'hover:bg-[var(--color-background-mute)] hover:text-[var(--color-text-1)]',
+      danger && 'text-[var(--color-error)]',
+      danger && !disabled && 'hover:bg-[var(--color-error)] hover:text-white [&:hover>svg]:text-white',
+      className
+    )}>
+    {children}
+  </button>
+)
+
+const ManageDivider: FC = () => <div className="mx-1 h-5 w-px bg-[var(--color-border)]" />
+
+const LeftGroup: FC<PropsWithChildren> = ({ children }) => <div className="flex items-center gap-1">{children}</div>
+
+const RightGroup: FC<PropsWithChildren> = ({ children }) => (
+  <div className="ml-auto flex items-center gap-1">{children}</div>
+)
+
+const SelectedBadge: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <span
+    {...props}
+    className={cn(
+      'inline-flex h-[18px] min-w-[18px] cursor-pointer items-center justify-center rounded-[9px] bg-[var(--color-primary)] px-[5px] font-medium text-[11px] text-white transition-opacity duration-200 hover:opacity-[0.85]',
+      className
+    )}>
+    {children}
+  </span>
+)
+
+const SearchInputWrapper: FC<PropsWithChildren> = ({ children }) => (
+  <div className="mx-1 flex min-w-0 flex-1 items-center gap-1">{children}</div>
+)
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  ref?: Ref<HTMLInputElement>
+}
+
+const SearchInput: FC<SearchInputProps> = ({ className, ref, ...props }) => (
+  <input
+    {...props}
+    ref={ref}
+    className={cn(
+      'h-7 min-w-0 flex-1 border-none bg-transparent p-0 text-[13px] text-[var(--color-text-1)] outline-none placeholder:text-[var(--color-text-3)]',
+      className
+    )}
+  />
+)
+
+export default TopicManagePanel

src/renderer/src/pages/home/Tabs/components/Topics.tsx

@@ -1,3 +1,4 @@
+import AssistantAvatar from '@renderer/components/Avatar/AssistantAvatar'
 import { DraggableVirtualList } from '@renderer/components/DraggableList'
 import { CopyIcon, DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import ObsidianExportPopup from '@renderer/components/Popups/ObsidianExportPopup'
@@ -37,8 +38,10 @@ import dayjs from 'dayjs'
 import { findIndex } from 'lodash'
 import {
   BrushCleaning,
+  CheckSquare,
   FolderOpen,
   HelpCircle,
+  ListChecks,
   MenuIcon,
   NotebookPen,
   PackagePlus,
@@ -46,6 +49,7 @@ import {
   PinOffIcon,
   Save,
   Sparkles,
+  Square,
   UploadIcon,
   XIcon
 } from 'lucide-react'
@@ -55,6 +59,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import AddButton from './AddButton'
+import { TopicManagePanel, useTopicManageMode } from './TopicManageMode'
 
 interface Props {
   assistant: Assistant
@@ -81,6 +86,10 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
   const deleteTimerRef = useRef<NodeJS.Timeout>(null)
   const [editingTopicId, setEditingTopicId] = useState<string | null>(null)
 
+  // 管理模式状态
+  const manageState = useTopicManageMode()
+  const { isManageMode, selectedIds, searchText, enterManageMode, exitManageMode, toggleSelectTopic } = manageState
+
   const { startEdit, isEditing, inputProps } = useInPlaceEdit({
     onSave: (name: string) => {
       const topic = assistant.topics.find((t) => t.id === editingTopicId)
@@ -437,6 +446,7 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
           .map((a) => ({
             label: a.name,
             key: a.id,
+            icon: <AssistantAvatar assistant={a} size={18} />,
             onClick: () => onMoveTopic(topic, a)
           }))
       })
@@ -492,28 +502,60 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
     return assistant.topics
   }, [assistant.topics, pinTopicsToTop])
 
+  // Filter topics based on search text (only in manage mode)
+  // Supports: case-insensitive, space-separated keywords (all must match)
+  const deferredSearchText = useDeferredValue(searchText)
+  const filteredTopics = useMemo(() => {
+    if (!isManageMode || !deferredSearchText.trim()) {
+      return sortedTopics
+    }
+    // Split by spaces and filter out empty strings
+    const keywords = deferredSearchText
+      .toLowerCase()
+      .split(/\s+/)
+      .filter((k) => k.length > 0)
+    if (keywords.length === 0) {
+      return sortedTopics
+    }
+    // All keywords must match (AND logic)
+    return sortedTopics.filter((topic) => {
+      const lowerName = topic.name.toLowerCase()
+      return keywords.every((keyword) => lowerName.includes(keyword))
+    })
+  }, [sortedTopics, deferredSearchText, isManageMode])
+
   const singlealone = topicPosition === 'right' && position === 'right'
 
   return (
+    <>
       <DraggableVirtualList
         className="topics-tab"
-      list={sortedTopics}
+        list={filteredTopics}
         onUpdate={updateTopics}
-      style={{ height: '100%', padding: '9px 0 10px 10px' }}
+        style={{ height: '100%', padding: '8px 0 10px 10px', paddingBottom: isManageMode ? 70 : 10 }}
         itemContainerStyle={{ paddingBottom: '8px' }}
         header={
-        <>
+          <HeaderRow>
             <AddButton onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)}>
               {t('chat.add.topic.title')}
             </AddButton>
-          <div className="my-1"></div>
+            <Tooltip title={t('chat.topics.manage.title')} mouseEnterDelay={0.5}>
-        </>
+              <HeaderIconButton
-      }>
+                onClick={isManageMode ? exitManageMode : enterManageMode}
+                className={isManageMode ? 'active' : ''}>
+                <ListChecks size={14} />
+              </HeaderIconButton>
+            </Tooltip>
+          </HeaderRow>
+        }
+        disabled={isManageMode}>
         {(topic) => {
           const isActive = topic.id === activeTopic?.id
           const topicName = topic.name.replace('`', '')
           const topicPrompt = topic.prompt
           const fullTopicPrompt = t('common.prompt') + ': ' + topicPrompt
+          const isSelected = selectedIds.has(topic.id)
+          const canSelect = !topic.pinned
 
           const getTopicNameClassName = () => {
             if (isRenaming(topic.id)) return 'shimmer'
@@ -521,29 +563,62 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
             return ''
           }
 
+          const handleItemClick = () => {
+            if (isManageMode) {
+              if (canSelect) {
+                toggleSelectTopic(topic.id)
+              }
+            } else {
+              onSwitchTopic(topic)
+            }
+          }
+
           return (
-          <Dropdown menu={{ items: getTopicMenuItems }} trigger={['contextMenu']}>
+            <Dropdown menu={{ items: getTopicMenuItems }} trigger={['contextMenu']} disabled={isManageMode}>
               <TopicListItem
                 onContextMenu={() => setTargetTopic(topic)}
-              className={classNames(isActive ? 'active' : '', singlealone ? 'singlealone' : '')}
+                className={classNames(
-              onClick={editingTopicId === topic.id && isEditing ? undefined : () => onSwitchTopic(topic)}
+                  isActive && !isManageMode ? 'active' : '',
+                  singlealone ? 'singlealone' : '',
+                  isManageMode && isSelected ? 'selected' : '',
+                  isManageMode && !canSelect ? 'disabled' : ''
+                )}
+                onClick={editingTopicId === topic.id && isEditing ? undefined : handleItemClick}
                 style={{
                   borderRadius,
-                cursor: editingTopicId === topic.id && isEditing ? 'default' : 'pointer'
+                  cursor:
+                    editingTopicId === topic.id && isEditing
+                      ? 'default'
+                      : isManageMode && !canSelect
+                        ? 'not-allowed'
+                        : 'pointer'
                 }}>
                 {isPending(topic.id) && !isActive && <PendingIndicator />}
                 {isFulfilled(topic.id) && !isActive && <FulfilledIndicator />}
                 <TopicNameContainer>
+                  {isManageMode && (
+                    <SelectIcon className={!canSelect ? 'disabled' : ''}>
+                      {isSelected ? (
+                        <CheckSquare size={16} color="var(--color-primary)" />
+                      ) : (
+                        <Square size={16} color="var(--color-text-3)" />
+                      )}
+                    </SelectIcon>
+                  )}
                   {editingTopicId === topic.id && isEditing ? (
                     <TopicEditInput {...inputProps} onClick={(e) => e.stopPropagation()} />
                   ) : (
                     <TopicName
                       className={getTopicNameClassName()}
                       title={topicName}
-                    onDoubleClick={() => {
+                      onDoubleClick={
+                        isManageMode
+                          ? undefined
+                          : () => {
                               setEditingTopicId(topic.id)
                               startEdit(topic.name)
-                    }}>
+                            }
+                      }>
                       {topicName}
                     </TopicName>
                   )}
@@ -587,12 +662,27 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
                     {fullTopicPrompt}
                   </TopicPromptText>
                 )}
-              {showTopicTime && <TopicTime className="time">{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
+                {showTopicTime && (
+                  <TopicTime className="time">{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>
+                )}
               </TopicListItem>
             </Dropdown>
           )
         }}
       </DraggableVirtualList>
+
+      {/* 管理模式底部面板 */}
+      <TopicManagePanel
+        assistant={assistant}
+        assistants={assistants}
+        activeTopic={activeTopic}
+        setActiveTopic={setActiveTopic}
+        removeTopic={removeTopic}
+        moveTopic={moveTopic}
+        manageState={manageState}
+        filteredTopics={filteredTopics}
+      />
+    </>
   )
 }
 
@@ -640,6 +730,15 @@ const TopicListItem = styled.div`
       box-shadow: none;
     }
   }
+
+  &.selected {
+    background-color: var(--color-primary-bg);
+    box-shadow: inset 0 0 0 1px var(--color-primary);
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
 `
 
 const TopicNameContainer = styled.div`
@@ -648,7 +747,6 @@ const TopicNameContainer = styled.div`
   align-items: center;
   gap: 4px;
   height: 20px;
-  justify-content: space-between;
 `
 
 const TopicName = styled.div`
@@ -659,6 +757,8 @@ const TopicName = styled.div`
   font-size: 13px;
   position: relative;
   will-change: background-position, width;
+  flex: 1;
+  text-align: left;
 
   --color-shimmer-mid: var(--color-text-1);
   --color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent);
@@ -765,3 +865,49 @@ const MenuButton = styled.div`
     font-size: 12px;
   }
 `
+
+const HeaderRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  padding-right: 10px;
+  margin-bottom: 5px;
+`
+
+const HeaderIconButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  border-radius: var(--list-item-border-radius);
+  cursor: pointer;
+  color: var(--color-text-2);
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: var(--color-background-mute);
+    color: var(--color-text-1);
+  }
+
+  &.active {
+    color: var(--color-primary);
+
+    &:hover {
+      background-color: var(--color-background-mute);
+    }
+  }
+`
+
+const SelectIcon = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+
+  &.disabled {
+    opacity: 0.5;
+  }
+`

src/renderer/src/pages/home/Tabs/index.tsx

@@ -145,6 +145,7 @@ const Container = styled.div`
   width: var(--assistants-width);
   transition: width 0.3s;
   height: calc(100vh - var(--navbar-height));
+  position: relative;
 
   &.right {
     height: calc(100vh - var(--navbar-height));