feat(TopicsTab): double click topic name to edit (#9382)

* feat(TopicsTab): 添加双击话题名称开始编辑功能 * feat(话题标签): 添加通过弹窗重命名话题的功能 * refactor(TopicsTab): 移除未使用的topicEdit参数 * style(TopicsTab): 调整主题名称容器的样式和输入框边框移除主题编辑输入框的边框和阴影效果，并设置固定高度 * feat(i18n): 添加话题重命名提示文本并支持在弹窗中显示为话题编辑功能添加多语言提示文本，说明双击可快速重命名在PromptPopup组件中新增extraNode属性以支持显示额外提示信息 * docs(i18n): 为话题重命名提示添加"提示"前缀
2026-01-01 09:49:03 +08:00 · 2025-08-21 23:46:30 +08:00 · 2025-08-21 23:46:30 +08:00 · daaf685c9e
commit daaf685c9e
parent 9c2a88179b
11 changed files with 45 additions and 22 deletions
--- a/src/renderer/src/components/Popups/PromptPopup.tsx
+++ b/src/renderer/src/components/Popups/PromptPopup.tsx
@ -1,6 +1,6 @@
 import { Input, Modal } from 'antd'
 import { TextAreaProps } from 'antd/es/input'
-import { useRef, useState } from 'react'
+import { ReactNode, useRef, useState } from 'react'

 import { Box } from '../Layout'
 import { TopView } from '../TopView'
@ -11,6 +11,7 @@ interface PromptPopupShowParams {
  defaultValue?: string
  inputPlaceholder?: string
  inputProps?: TextAreaProps
+  extraNode?: ReactNode
 }

 interface Props extends PromptPopupShowParams {
@ -23,6 +24,7 @@ const PromptPopupContainer: React.FC<Props> = ({
  defaultValue = '',
  inputPlaceholder = '',
  inputProps = {},
+  extraNode = null,
  resolve
 }) => {
  const [value, setValue] = useState(defaultValue)
@ -88,6 +90,7 @@ const PromptPopupContainer: React.FC<Props> = ({
        rows={1}
        {...inputProps}
      />
+      {extraNode}
    </Modal>
  )
 }
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "Enter new name",
-        "title": "Edit Name"
+        "title": "Edit Name",
+        "title_tip": "Tips: Double-click the topic name to rename it directly in place"
      },
      "export": {
        "image": "Export as image",
--- a/src/renderer/src/i18n/locales/ja-jp.json
+++ b/src/renderer/src/i18n/locales/ja-jp.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "新しい名前を入力",
-        "title": "名前を編集"
+        "title": "名前を編集",
+        "title_tip": "ヒント: トピック名をダブルクリックすると、直接その場で名前を変更できます"
      },
      "export": {
        "image": "画像としてエクスポート",
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "Введите новый заголовок",
-        "title": "Редактировать заголовок"
+        "title": "Редактировать заголовок",
+        "title_tip": "Совет: двойной щелчок по названию темы позволяет переименовать её на месте"
      },
      "export": {
        "image": "Экспорт как изображение",
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "输入新名称",
-        "title": "编辑话题名"
+        "title": "编辑话题名",
+        "title_tip": "提示: 双击话题名可以直接就地重命名"
      },
      "export": {
        "image": "导出为图片",
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "輸入新名稱",
-        "title": "編輯名稱"
+        "title": "編輯名稱",
+        "title_tip": "提示：雙擊話題名可以直接就地重新命名"
      },
      "export": {
        "image": "匯出為圖片",
--- a/src/renderer/src/i18n/translate/el-gr.json
+++ b/src/renderer/src/i18n/translate/el-gr.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "Εισαγάγετε το νέο όνομα",
-        "title": "Επεξεργασία ονόματος θέματος"
+        "title": "Επεξεργασία ονόματος θέματος",
+        "title_tip": "Συμβουλές: Διπλό κλικ στο όνομα του θέματος για να το μετονομάσετε απευθείας"
      },
      "export": {
        "image": "Εξαγωγή ως εικόνα",
--- a/src/renderer/src/i18n/translate/es-es.json
+++ b/src/renderer/src/i18n/translate/es-es.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "Introduce nuevo nombre",
-        "title": "Editar nombre del tema"
+        "title": "Editar nombre del tema",
+        "title_tip": "Consejos: hacer doble clic en el nombre del tema permite cambiar el nombre directamente en el lugar"
      },
      "export": {
        "image": "Exportar como imagen",
--- a/src/renderer/src/i18n/translate/fr-fr.json
+++ b/src/renderer/src/i18n/translate/fr-fr.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "Entrez un nouveau nom",
-        "title": "Modifier le nom du sujet"
+        "title": "Modifier le nom du sujet",
+        "title_tip": "Conseil : double-cliquez sur le nom du sujet pour le renommer directement sur place"
      },
      "export": {
        "image": "Exporter sous forme d'image",
--- a/src/renderer/src/i18n/translate/pt-pt.json
+++ b/src/renderer/src/i18n/translate/pt-pt.json
@ -584,7 +584,8 @@
      },
      "edit": {
        "placeholder": "Digite novo nome",
-        "title": "Editar nome do tópico"
+        "title": "Editar nome do tópico",
+        "title_tip": "Dicas: Clique duas vezes no nome do tópico para renomeá-lo diretamente no local"
      },
      "export": {
        "image": "Exportar como imagem",
--- a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
@ -222,9 +222,19 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic,
        key: 'rename',
        icon: <EditIcon size={14} />,
        disabled: isRenaming(topic.id),
-        onClick() {
-          setEditingTopicId(topic.id)
-          topicEdit.startEdit(topic.name)
+        async onClick() {
+          const name = await PromptPopup.show({
+            title: t('chat.topics.edit.title'),
+            message: '',
+            defaultValue: topic?.name || '',
+            extraNode: (
+              <div style={{ color: 'var(--color-text-3)', marginTop: 8 }}>{t('chat.topics.edit.title_tip')}</div>
+            )
+          })
+          if (name && topic?.name !== name) {
+            const updatedTopic = { ...topic, name, isNameManuallyEdited: true }
+            updateTopic(updatedTopic)
+          }
        }
      },
      {
@ -448,7 +458,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic,
    assistants,
    assistant,
    updateTopic,
-    topicEdit,
    activeTopic.id,
    setActiveTopic,
    onPinTopic,
@ -519,7 +528,13 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic,
                    onClick={(e) => e.stopPropagation()}
                  />
                ) : (
-                  <TopicName className={getTopicNameClassName()} title={topicName}>
+                  <TopicName
+                    className={getTopicNameClassName()}
+                    title={topicName}
+                    onDoubleClick={() => {
+                      setEditingTopicId(topic.id)
+                      topicEdit.startEdit(topic.name)
+                    }}>
                    {topicName}
                  </TopicName>
                )}
@ -622,6 +637,7 @@ const TopicNameContainer = styled.div`
  flex-direction: row;
  align-items: center;
  gap: 4px;
+  height: 20px;
  justify-content: space-between;
 `

@ -675,19 +691,14 @@ const TopicName = styled.div`

 const TopicEditInput = styled.input`
  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border: none;
  color: var(--color-text-1);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 6px;
  width: 100%;
  outline: none;
-
-  &:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px var(--color-primary-alpha);
-  }
+  padding: 0;
 `

 const PendingIndicator = styled.div.attrs({