style(ui): 优化界面样式和主题配色细节

- 移除 App 组件中无用的 theme 依赖以减少重渲染
- 为状态提示文字添加左边距增强视觉效果
- 调整 DropdownMenu 组件中选中项标签字体加粗改为普通
- 修改 MessageView 中状态行的颜色由 theme.text 改为 theme.primary
- 更换 MessageView 中文本符号以提升美观度
- 更新主题色板中的 success、error、info 颜色值以及边框和渐变色
- PromptInput 组件中多处添加 marginLeft 进行缩进优化
- 根据焦点状态动态调整输入框底部边框颜色
- 在 SessionList 中根据搜索状态调整提示文字颜色为主色或次色

Author: hqwlkj

src/ui/components/DropdownMenu/index.tsx

@@ -161,7 +161,7 @@ const DropdownMenu = React.memo(function DropdownMenu({
               <Box width={labelColumnWidth} flexShrink={0}>
                 <Text color={isActive ? effectiveActiveColor : undefined} wrap="truncate-end">
                   {isActive ? "> " : "  "}
-                  {item.selected !== undefined ? (item.selected ? "●" : "○") : null} <Text bold>{item.label}</Text>
+                  {item.selected !== undefined ? (item.selected ? "●" : "○") : null} <Text>{item.label}</Text>
                   {item.statusIndicator ? (
                     <Text color={item.statusIndicator.color}> {item.statusIndicator.symbol}</Text>
                   ) : null}

src/ui/components/MessageView/index.tsx

@@ -46,13 +46,13 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
       if (collapsed !== false) {
         return (
           <Box marginLeft={1} marginBottom={1} marginY={0}>
-            <StatusLine width={width} bulletColor={theme.text} name="Thinking" params={summary} />
+            <StatusLine width={width} bulletColor={theme.primary} name="Thinking" params={summary} />
           </Box>
         );
       }
       return (
         <Box marginLeft={1} flexDirection="column" marginBottom={1} marginY={0}>
-          <StatusLine width={width} bulletColor={theme.text} name="Thinking" params={content ? "" : summary} />
+          <StatusLine width={width} bulletColor={theme.primary} name="Thinking" params={content ? "" : summary} />
           <Box flexDirection="column" marginLeft={2}>
             {content ? <Text dimColor>{renderMarkdown(content)}</Text> : null}
           </Box>
@@ -165,7 +165,7 @@ function StatusLine({
     <Box gap={1} width={containerWidth}>
       <Box alignSelf="stretch">
         <Text key="bullet" color={bulletColor}>
-          ✧
+          ✦
         </Text>
       </Box>
       <Box flexGrow={1} width={contentWidth} gap={1}>

src/ui/theme/presets.ts

@@ -4,15 +4,15 @@ import type { ThemeTokens } from "./types";
 export const DEFAULT_THEME: ThemeTokens = {
   primary: "#229ac3",
   secondary: "#229ac3e6",
-  success: "#52c41a",
-  error: "#f5222d",
+  success: "#1a7f37",
+  error: "#d1242f",
   warning: "#fa8c16",
-  info: "#2f54eb",
+  info: "#0969da",
   text: "#3D4149",
   textDim: "#646A71",
   code: "#787f8a",
-  border: "#ABADB1",
-  gradients: ["#229ac3", "#7c3aed"],
+  border: "#999",
+  gradients: ["#229ac3", "#8250df"],
 };
 
 /** 预设主题映射表 */

src/ui/views/App.tsx

@@ -636,9 +636,7 @@ function App({ projectRoot, initialPrompt, onRestart }: AppProps): React.ReactEl
       return [welcomeItem, ...messages];
     }
     return messages;
-    // theme 作为依赖确保主题切换时 Static 子组件重渲染
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, showWelcome, view, messages, welcomeItem, theme]);
+  }, [mode, showWelcome, view, messages, welcomeItem]);
 
   const handleQuestionAnswers = useCallback(
     (answers: AskUserQuestionAnswers) => {
@@ -723,12 +721,12 @@ function App({ projectRoot, initialPrompt, onRestart }: AppProps): React.ReactEl
         }}
       </Static>
       {statusLine ? (
-        <Box>
+        <Box marginLeft={2}>
           <Text dimColor>{statusLine}</Text>
         </Box>
       ) : null}
       {errorLine ? (
-        <Box>
+        <Box marginLeft={2}>
           <Text color={theme.error}>Error: {errorLine}</Text>
         </Box>
       ) : null}

src/ui/views/PromptInput.tsx

@@ -722,19 +722,21 @@ export const PromptInput = React.memo(function PromptInput({
     [showMenu, showSkillsDropdown, showModelDropdown, openRawModelDropdown, showFileMentionMenu]
   );
 
+  const isFocused = useMemo(() => !disabled && hasTerminalFocus, [disabled, hasTerminalFocus]);
+
   const matchedCommand = slashToken ? findExactSlashCommand(slashItems, slashToken) : null;
   const inlineHint = matchedCommand?.args ? ` ${matchedCommand.args.join(ARGS_SEPARATOR)}` : "";
 
   return (
     <Box flexDirection="column" width={screenWidth}>
       {imageUrls.length > 0 ? (
-        <Box>
+        <Box marginLeft={2}>
           <Text color={theme.info}>{formatImageAttachmentStatus(imageUrls.length)}</Text>
           <Text dimColor>{` (${IMAGE_ATTACHMENT_CLEAR_HINT})`}</Text>
         </Box>
       ) : null}
       {selectedSkills.length > 0 ? (
-        <Box>
+        <Box marginLeft={2}>
           <Text color={theme.info} wrap="truncate-end">
             {formatSelectedSkillsStatus(selectedSkills)}
           </Text>
@@ -748,12 +750,10 @@ export const PromptInput = React.memo(function PromptInput({
         borderBottom={true}
         borderLeft={false}
         borderRight={false}
-        borderColor={theme.border}
+        borderColor={isFocused ? theme.primary : theme.border}
       >
         <PromptPrefixLine busy={busy} />
-        <Text>
-          {renderBufferWithCursor(buffer, !disabled && hasTerminalFocus, placeholder, pastesRef.current, theme.warning)}
-        </Text>
+        <Text>{renderBufferWithCursor(buffer, isFocused, placeholder, pastesRef.current, theme.warning)}</Text>
         {inlineHint ? <Text dimColor>{inlineHint}</Text> : null}
       </Box>
       <RawModelDropdown
@@ -792,7 +792,7 @@ export const PromptInput = React.memo(function PromptInput({
       />
       <SlashCommandMenu width={screenWidth} items={slashMenu} activeIndex={menuIndex} />
       {!showFooterText && (
-        <Box>
+        <Box marginLeft={2}>
           <Text dimColor>{footerText}</Text>
         </Box>
       )}

src/ui/views/SessionList.tsx

@@ -211,7 +211,9 @@ export function SessionList({ sessions, onSelect, onCancel, onDelete }: Props):
           </Box>
           {/* Search bar */}
           <Box marginTop={hasActiveSearch || searchQuery ? 0 : 0}>
-            <Text dimColor>{searchQuery ? `Search: ${searchQuery}` : "Type to search\u2026"}</Text>
+            <Text dimColor color={searchQuery ? theme.primary : theme.textDim}>
+              {searchQuery ? `Search: ${searchQuery}` : "Type to search\u2026"}
+            </Text>
             {searchQuery ? <Text bold>|</Text> : null}
           </Box>
         </Box>