refactor: AiFailPlanCard 样式重构与展开收起交互

app/renderer/src/main/public/locales/en/aiAgent.json

@@ -197,7 +197,8 @@
     "viewReference": "[View Reference]"
   },
   "AiFailPlanCard": {
-    "failureReason": "Failure Reason"
+    "collapse": "Collapse",
+    "expand": "Expand"
   },
   "AIToolList": {
     "all": "All",

app/renderer/src/main/public/locales/zh-TW/aiAgent.json

@@ -197,7 +197,8 @@
     "viewReference": "[檢視文獻]"
   },
   "AiFailPlanCard": {
-    "failureReason": "失敗原因"
+    "collapse": "收起",
+    "expand": "展開"
   },
   "AIToolList": {
     "all": "全部",

app/renderer/src/main/public/locales/zh/aiAgent.json

@@ -197,7 +197,8 @@
     "viewReference": "[查看文献]"
   },
   "AiFailPlanCard": {
-    "failureReason": "失败原因"
+    "collapse": "收起",
+    "expand": "展开"
   },
   "AIToolList": {
     "all": "全部",

app/renderer/src/main/src/pages/ai-agent/components/aiFailPlanCard/AiFailPlanCard.module.scss

@@ -1,24 +1,12 @@
-.ai-fail-plan-wrapper > div:first-child {
-  color: var(--Colors-Use-Error-Primary);
+.ai-fail-plan-wrapper {
+  background-color: var(--Colors-Use-Error-Focus);
 }
-.ai-fail-plan-card {
-  width: 100%;
-  margin: 4px 0;
-  &-title {
-    height: 32px;
-    padding: 6px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 8px 8px 0 0;
-    background-color: var(--Colors-Use-Error-Focus);
-    color: var(--Colors-Use-Error-Primary);
-  }
 
-  &-content {
-    background: var(--Colors-Use-Basic-Background);
-    padding: 8px;
-    border-radius: 0 0 8px 8px;
-    border: 1px solid var(--Colors-Use-Error-Focus);
-  }
+.expand-btn {
+  color: var(--Colors-Use-Neutral-Text-3-Secondary);
+}
+
+.pre-max-height {
+  max-height: 400px;
+  margin-top: 8px;
 }

app/renderer/src/main/src/pages/ai-agent/components/aiFailPlanCard/AiFailPlanCard.tsx

@@ -1,25 +1,38 @@
 import type { FailTaskChatError } from '@/pages/ai-re-act/hooks/aiRender'
-import { type FC } from 'react'
+import type { FC } from 'react'
 import ChatCard from '../ChatCard'
 import styles from './AiFailPlanCard.module.scss'
 import useAINodeLabel from '@/pages/ai-re-act/hooks/useAINodeLabel'
-// import { TaskErrorIcon } from '../../aiTree/icon'
 import { PreWrapper } from '../ToolInvokerCard'
 import { useI18nNamespaces } from '@/i18n/useI18nNamespaces'
+import { OutlineChevronsDownUpIcon, OutlineChevronsUpDownIcon } from '@/assets/icon/outline'
+import { YakitButton } from '@/components/yakitUI/YakitButton/YakitButton'
+import { Tooltip } from 'antd'
+import { useToggle } from 'ahooks'
 
 const AiFailPlanCard: FC<{ item: FailTaskChatError }> = ({ item }) => {
   const { t } = useI18nNamespaces(['aiAgent'])
   const { content } = item
   const { nodeLabel } = useAINodeLabel(item.NodeIdVerbose)
+  const [expand, { toggle }] = useToggle(false)
+
   return (
-    //  titleIcon={<TaskErrorIcon />}
-    <ChatCard className={styles['ai-fail-plan-wrapper']} titleText={nodeLabel}>
-      <div className={styles['ai-fail-plan-card']}>
-        <div className={styles['ai-fail-plan-card-title']}>{t('AiFailPlanCard.failureReason')}</div>
-        <div className={styles['ai-fail-plan-card-content']}>
-          {content && <PreWrapper code={content} autoScrollBottom />}
-        </div>
-      </div>
+    <ChatCard
+      className={styles['ai-fail-plan-wrapper']}
+      titleText={nodeLabel}
+      titleMore={
+        <Tooltip title={expand ? t('AiFailPlanCard.collapse') : t('AiFailPlanCard.expand')}>
+          <YakitButton
+            size="small"
+            type="text"
+            icon={expand ? <OutlineChevronsDownUpIcon /> : <OutlineChevronsUpDownIcon />}
+            onClick={toggle}
+            className={styles['expand-btn']}
+          />
+        </Tooltip>
+      }
+    >
+      {expand && content && <PreWrapper code={content} autoScrollBottom className={styles['pre-max-height']} />}
     </ChatCard>
   )
 }