fix：工具按钮展示逻辑

55979b51 · Liu · 33e12ad8 · 55979b51
Commit 55979b51 authored Nov 19, 2025 by Liu
Show whitespace changes
Inline Side-by-side

Showing with 70 additions and 64 deletions

src/components/ChatEditor/index.tsx
+70 -64

No files found.
--- a/src/components/ChatEditor/index.tsx
+++ b/src/components/ChatEditor/index.tsx
@@ -7,6 +7,10 @@ import type { RootState } from '@/store'
 import SendIcon from '@/assets/svg/send.svg?react'
 import { type WithAuthProps, withAuth } from '@/auth/withAuth'
 import { useAppSelector } from '@/store/hook'
+import { fetchToolList } from '@/api/home'
+import dataIcon from '@/assets/data-icon.png'
+import efficiencyIcon from '@/assets/efficiency-icon.png'
+import generalIcon from '@/assets/general-icon.png'
 interface ChatEditorProps {
  onChange?: (value: string) => void
@@ -18,7 +22,7 @@ interface ChatEditorProps {
  initialValue?: string
 }
 // onToolClick
-const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, onChange, onFocus, onSubmit, placeholders, showContentTips = false, initialValue = '' }) => {
+const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, onChange, onFocus, onSubmit, onToolClick, placeholders, showContentTips = false, initialValue = '' }) => {
  // const dispatch = useAppDispatch()
  const [content, setContent] = useState(initialValue)
  const editorRef = useRef<HTMLDivElement>(null)
@@ -26,22 +30,22 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const [isOpenLoginModal, isOpenLoginModalActions] = useToggle()
  const isAsking = useAppSelector((state: RootState) => state.chat.isAsking)
-  // const [toolList, setToolList] = useState<any[]>([])
+  const [toolList, setToolList] = useState<any[]>([])
-  // const [selectedToolId, setSelectedToolId] = useState<string | null>(null)
+  const [selectedToolId, setSelectedToolId] = useState<string | null>(null)
-  // const [isToolBtnActive, setIsToolBtnActive] = useState<boolean>(true)
+  const [isToolBtnActive, setIsToolBtnActive] = useState<boolean>(true)
  // 获取工具列表
-  // const getToolList = async () => {
+  const getToolList = async () => {
-  //   try {
+    try {
-  //     const res = await fetchToolList()
+      const res = await fetchToolList()
-  //     if (res?.data) {
+      if (res?.data) {
-  //       setToolList(res.data)
+        setToolList(res.data)
-  //     }
+      }
-  //   }
+    }
-  //   catch (error) {
+    catch (error) {
-  //     console.error('获取工具列表失败:', error)
+      console.error('获取工具列表失败:', error)
-  //   }
+    }
-  // }
+  }
  const startAnimation = () => {
    intervalRef.current = setInterval(() => {
@@ -74,18 +78,18 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
        // 只在提质增效模式下传递 toolId，通用模式不传
        let toolId: string | undefined
-        // if (!isToolBtnActive && selectedToolId) {
+        if (!isToolBtnActive && selectedToolId) {
-        //   // 提质增效模式：使用选中的 toolId
+          // 提质增效模式：使用选中的 toolId
-        //   toolId = selectedToolId
+          toolId = selectedToolId
-        //   // eslint-disable-next-line no-console
+          // eslint-disable-next-line no-console
-        //   console.log('📤 [ChatEditor] 提质增效模式提交，toolId:', toolId)
+          console.log('📤 [ChatEditor] 提质增效模式提交，toolId:', toolId)
-        // }
+        }
-        // else {
+        else {
-        //   // 通用模式：不传递 toolId
+          // 通用模式：不传递 toolId
-        //   toolId = undefined
+          toolId = undefined
-        //   // eslint-disable-next-line no-console
+          // eslint-disable-next-line no-console
-        //   console.log('📤 [ChatEditor] 通用模式提交，不传递 toolId')
+          console.log('📤 [ChatEditor] 通用模式提交，不传递 toolId')
-        // }
+        }
        onSubmit?.(content.trim(), toolId)
        setContent('')
        if (editorRef.current) {
@@ -114,36 +118,36 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
  }
  // 处理提质增效按钮点击
-  // const handleEfficiencyClick = () => {
+  const handleEfficiencyClick = () => {
-  //   // 查找"提质增效"工具
+    // 查找"提质增效"工具
-  //   const efficiencyTool = toolList.find((tool: any) => tool.toolName === '提质增效')
+    const efficiencyTool = toolList.find((tool: any) => tool.toolName === '提质增效')
-  //   let currentToolId = null
+    let currentToolId = null
-  //   if (efficiencyTool) {
+    if (efficiencyTool) {
-  //     setSelectedToolId(efficiencyTool.toolId)
+      setSelectedToolId(efficiencyTool.toolId)
-  //     currentToolId = efficiencyTool.toolId
+      currentToolId = efficiencyTool.toolId
-  //   }
+    }
-  //   else {
+    else {
-  //     // 如果没有找到"提质增效"工具，使用第一个工具
+      // 如果没有找到"提质增效"工具，使用第一个工具
-  //     if (toolList.length > 0) {
+      if (toolList.length > 0) {
-  //       setSelectedToolId(toolList[0].toolId)
+        setSelectedToolId(toolList[0].toolId)
-  //       currentToolId = toolList[0].toolId
+        currentToolId = toolList[0].toolId
-  //     }
+      }
-  //   }
+    }
-  //   // 切换到工具模式（false 表示工具模式，会切换左侧展示）
+    // 切换到工具模式（false 表示工具模式，会切换左侧展示）
-  //   setIsToolBtnActive(false)
+    setIsToolBtnActive(false)
-  //   // 调用父组件的回调函数，传递工具模式状态和工具ID，以及是否需要改变样式
+    // 调用父组件的回调函数，传递工具模式状态和工具ID，以及是否需要改变样式
-  //   onToolClick?.(false, currentToolId, true)
+    onToolClick?.(false, currentToolId, true)
-  // }
+  }
  // 处理通用模式按钮点击
-  // const handleGeneralClick = () => {
+  const handleGeneralClick = () => {
-  //   // 切换到通用模式（true 表示通用模式，恢复默认不切换左侧）
+    // 切换到通用模式（true 表示通用模式，恢复默认不切换左侧）
-  //   setIsToolBtnActive(true)
+    setIsToolBtnActive(true)
-  //   // 清除选中的工具ID
+    // 清除选中的工具ID
-  //   setSelectedToolId(null)
+    setSelectedToolId(null)
-  //   // 调用父组件的回调函数，传递通用模式状态和工具ID，以及是否需要改变样式
+    // 调用父组件的回调函数，传递通用模式状态和工具ID，以及是否需要改变样式
-  //   onToolClick?.(true, undefined, false)
+    onToolClick?.(true, undefined, false)
-  // }
+  }
  useEffect(() => {
    startAnimation()
@@ -161,9 +165,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
  }, [content])
  // 组件加载时获取工具列表
-  // useEffect(() => {
+  useEffect(() => {
-  //   getToolList()
+    getToolList()
-  // }, [])
+  }, [])
  // 处理initialValue的变化
  useEffect(() => {
@@ -191,9 +195,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
      background: '#FFFFFF',
      border: '1px solid #0a0a0a78',
      boxShadow: '0 8px 12px 0 rgba(235,235,235,0.30)',
+      ...(toolList && toolList.length > 0 ? { height: '102px' } : {}),
    }}
    >
-      {/* height: '102px', */}
      <div
        ref={editorRef}
        contentEditable
@@ -211,9 +215,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
          resize: 'none',
          maxHeight: '48px',
          wordBreak: 'break-all',
+          ...(toolList && toolList.length > 0 ? { marginBottom: '40px' } : {}),
        }}
      >
-          {/* marginBottom: '40px', */}
      </div>
      <Tooltip isOpen={Boolean(token) && showContentTips && !isAsking && !content} color="foreground" content="请输入您的问题📖" placement="top-end">
        <Button className="ask-send" onPress={handleSubmit} radius="full" isDisabled={!content || isAsking} isIconOnly color="primary">
@@ -247,16 +251,17 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
          )}
        </AnimatePresence>
      </div>
+      {toolList && toolList.length > 0 && (
        <div className="absolute left-4 bottom-2 flex items-center gap-3 pointer-events-auto pl-[16px]">
-          {/* <Button
+          <Button
            className="w-[96px] h-[32px] px-3 rounded-full bg-white border border-[#E6E8EB] shadow-none text-[#111827] text-[12px]"
            radius="full"
            variant="bordered"
            startContent={<img src={dataIcon} alt="数据助手" className="w-5 h-5" />}
          >
            数据助手
-          </Button> */}
+          </Button>
-          {/* <Button
+          <Button
            className={`w-[96px] h-[32px] px-3 rounded-full shadow-none text-[12px] transition-all duration-200 ${
              !isToolBtnActive
                ? 'bg-[#F3F7FF] border-[#F3F7FF] text-[#165DFF]'
@@ -281,8 +286,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, 
            onPress={handleGeneralClick}
          >
            通用模式
-          </Button> */}
+          </Button>
        </div>
+      )}
      <LoginModal onClose={handleCloseLoginModal} isOpen={isOpenLoginModal} />
    </div>
  )