feat: 添加 Ink UI 组件库集成和现代化界面改进

- 集成 ink-text-input、ink-select-input 等社区组件
- 添加 ink-big-text 和 ink-gradient 实现渐变标题效果
- 使用社区 ink-spinner 和 ink-progress-bar 替换自定义实现
- 重构 InputManager 使用社区组件
- 更新 Header 组件支持大标题显示
- 修改 TableRenderer 基于 ink-table 实现
- 更新构建配置以排除 ink-* 外部依赖
- 添加 Claude 工具权限配置

Author: echoVic

.claude/settings.local.json

@@ -26,7 +26,9 @@
       "WebFetch(domain:jannesklaas.github.io)",
       "Bash(npm view:*)",
       "Bash(for file in src/ui/hooks/useKeyboardInput.ts src/ui/components/ReplInterface.tsx src/ui/ink/Input.tsx src/ui/ink/InputManager.tsx)",
-      "Bash(do echo \"=== $file ===\" grep -n \"useInput\\|key\\.\" \"$file\")"
+      "Bash(do echo \"=== $file ===\" grep -n \"useInput\\|key\\.\" \"$file\")",
+      "Bash(ls:*)",
+      "Bash(xargs:*)"
     ],
     "deny": [],
     "ask": [],

package.json

@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "dev": "bun --watch src/blade.tsx",
-    "build": "rm -rf dist && bun build src/blade.tsx --external react-devtools-core --external react --external react-dom --external ink --external yargs --external chalk --external inquirer --minify --outfile dist/blade.js --target=node",
+    "build": "rm -rf dist && bun build src/blade.tsx --external react-devtools-core --external react --external react-dom --external ink --external ink-* --external yargs --external chalk --external inquirer --minify --outfile dist/blade.js --target=node",
     "start": "bun run dist/blade.js",
     "test": "vitest",
     "test:watch": "vitest --watch",
@@ -100,6 +100,13 @@
     "axios": "^1.12.2",
     "chalk": "^5.4.1",
     "ink": "^6.2.3",
+    "ink-big-text": "^2.0.0",
+    "ink-gradient": "^3.0.0",
+    "ink-multi-select": "^2.0.0",
+    "ink-progress-bar": "^3.0.0",
+    "ink-select-input": "^6.2.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
     "inquirer": "^12.6.3",
     "lodash-es": "^4.17.21",
     "lowlight": "^3.3.0",

pnpm-lock.yaml

@@ -1,25 +1,54 @@
 import { Box, Text } from 'ink';
+import BigText from 'ink-big-text';
+import Gradient from 'ink-gradient';
 import React from 'react';
 
 interface HeaderProps {
   testMode: boolean;
+  useBigText?: boolean; // 是否使用大标题
 }
 
 /**
  * 应用头部组件
  * 显示应用标题、测试模式标识和退出提示
  */
-export const Header: React.FC<HeaderProps> = ({ testMode }) => {
+export const Header: React.FC<HeaderProps> = ({ testMode, useBigText = false }) => {
+  // 渲染大标题版本
+  if (useBigText) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Gradient name="rainbow">
+          <BigText text="BLADE" font="block" />
+        </Gradient>
+        <Box flexDirection="row" justifyContent="space-between" paddingX={2}>
+          <Text color="cyan">⚡ 现代化 AI 编码助手</Text>
+          <Box flexDirection="row" gap={2}>
+            {testMode && (
+              <Text backgroundColor="red" color="white">
+                {' '}
+                TEST{' '}
+              </Text>
+            )}
+            <Text color="gray" dimColor>
+              Press Ctrl+C to exit
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  // 渲染紧凑版本
   return (
     <Box
       flexDirection="row"
       justifyContent="space-between"
       marginBottom={1}
       paddingX={2}
     >
-      <Text color="cyan" bold>
-        ⚡ Blade Code
-      </Text>
+      <Gradient name="pastel">
+        <Text bold>⚡ Blade Code</Text>
+      </Gradient>
       <Box flexDirection="row" gap={2}>
         {testMode && (
           <Text backgroundColor="red" color="white">

src/ui/components/Header.tsx

@@ -1,16 +1,24 @@
 import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
 import React from 'react';
 
 interface InputAreaProps {
   input: string;
   isProcessing: boolean;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
 }
 
 /**
  * 输入区域组件
  * 显示命令输入框和光标
  */
-export const InputArea: React.FC<InputAreaProps> = ({ input, isProcessing }) => {
+export const InputArea: React.FC<InputAreaProps> = ({
+  input,
+  isProcessing,
+  onChange,
+  onSubmit,
+}) => {
   return (
     <Box
       flexDirection="row"
@@ -22,8 +30,20 @@ export const InputArea: React.FC<InputAreaProps> = ({ input, isProcessing }) =>
       <Text color="blue" bold>
         {'> '}
       </Text>
-      <Text>{input}</Text>
-      {isProcessing ? <Text color="yellow">█</Text> : <Text color="white">█</Text>}
+      {onChange && onSubmit ? (
+        <TextInput
+          value={input}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          placeholder="输入命令..."
+          showCursor={!isProcessing}
+        />
+      ) : (
+        <>
+          <Text>{input}</Text>
+          {isProcessing ? <Text color="yellow">█</Text> : <Text color="white">█</Text>}
+        </>
+      )}
     </Box>
   );
 };