fix(前端): 修复详情面板中长文本和代码块的溢出问题

调整 CSS 属性以改善长文本、代码块和工具调用结果的显示。将 `word-break: break-word` 改为 `break-all` 并添加 `overflow-wrap: anywhere`，确保长单词或 URL 能正确换行。为 `.value` 及其子元素添加 `max-width: 100%` 和 `overflow-x: auto` 以防止水平溢出，并新增 `.toolResult` 和 `.resultContent` 样式来优化工具调用结果的展示。

.claude/settings.local.json

@@ -20,5 +20,6 @@
     ],
     "deny": [],
     "ask": []
-  }
+  },
+  "outputStyle": "Explanatory"
 }

frontend/react-template/src/components/DetailPanel/DetailPanel.module.css

@@ -80,12 +80,32 @@
   font-size: 14px;
   line-height: 1.6;
   color: var(--text-primary);
-  word-break: break-word;
+  word-break: break-all;
+  overflow-wrap: anywhere;
   background: var(--bg-surface-hover);
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-md);
   border: 1px solid var(--border-light);
-  white-space: pre-line;
+  white-space: pre-wrap;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.value * {
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  white-space: pre-wrap;
+}
+
+.value pre,
+.value code {
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  overflow-x: auto;
+  max-width: 100%;
 }
 
 .value p {
@@ -128,9 +148,26 @@
   border-radius: var(--radius-sm);
   margin: 0;
   white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-all;
+  overflow-x: auto;
+  max-width: 100%;
   color: var(--text-secondary);
 }
 
+.toolResult {
+  background: var(--bg-surface-hover);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  padding: var(--space-sm);
+  overflow: hidden;
+}
+
+.resultContent {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
 .messages {
   display: flex;
   flex-direction: column;