style(ui): 美化编辑器代码显示

- 添加 CodeMirror 编辑器全局样式（字体、行号、高亮、搜索面板等）
- 添加 Diff 编辑器样式（删除/新增行高亮、行内变更等）
- CodeEditor 优化：Tab 栏动画、文件图标着色、底部状态栏
- DiffEditor 优化：头部布局、变更统计、操作类型标签

packages/ui/src/components/CodeEditor.tsx

@@ -13,7 +13,7 @@ import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';
 import { markdown } from '@codemirror/lang-markdown';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { X, Save, Circle, FileCode, MousePointerClick } from 'lucide-react';
+import { X, Save, Circle, FileCode, MousePointerClick, Code2 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { toast } from 'sonner';
 import { cn } from '../utils/cn.js';
@@ -154,6 +154,32 @@ export function CodeEditor({
     return [getLanguageExtension(activeTab.language)].flat();
   }, [activeTab]);
 
+  // 获取文件图标颜色
+  const getFileIconColor = (language: string) => {
+    switch (language) {
+      case 'typescript':
+      case 'tsx':
+        return 'text-blue-500';
+      case 'javascript':
+      case 'jsx':
+        return 'text-yellow-500';
+      case 'python':
+        return 'text-green-500';
+      case 'json':
+        return 'text-orange-500';
+      case 'html':
+        return 'text-red-500';
+      case 'css':
+      case 'scss':
+      case 'less':
+        return 'text-purple-500';
+      case 'markdown':
+        return 'text-cyan-500';
+      default:
+        return 'text-fg-muted';
+    }
+  };
+
   if (tabs.length === 0) {
     return (
       <div className={cn('flex flex-col items-center justify-center h-full bg-surface-base', className)}>
@@ -163,14 +189,14 @@ export function CodeEditor({
           transition={{ duration: 0.3 }}
           className="text-center max-w-xs"
         >
-          <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-surface-subtle flex items-center justify-center">
-            <FileCode size={32} className="text-fg-subtle" />
+          <div className="w-20 h-20 mx-auto mb-5 rounded-2xl bg-gradient-to-br from-surface-subtle to-surface-muted flex items-center justify-center shadow-inner">
+            <Code2 size={36} className="text-fg-subtle" />
           </div>
-          <h3 className="text-fg font-medium mb-2">No files open</h3>
-          <p className="text-fg-muted text-sm mb-4">
+          <h3 className="text-fg font-semibold text-lg mb-2">No files open</h3>
+          <p className="text-fg-muted text-sm mb-5 leading-relaxed">
             Select a file from the explorer to view and edit its contents
           </p>
-          <div className="flex items-center justify-center gap-2 text-xs text-fg-subtle">
+          <div className="flex items-center justify-center gap-2 text-xs text-fg-subtle bg-surface-subtle px-4 py-2 rounded-full">
             <MousePointerClick size={14} />
             <span>Click a file to open</span>
           </div>
@@ -182,61 +208,77 @@ export function CodeEditor({
   return (
     <div className={cn('flex flex-col h-full bg-surface-base', className)}>
       {/* Tab Bar */}
-      <div className="flex items-center border-b border-line bg-surface-subtle overflow-x-auto">
+      <div className="flex items-center border-b border-line bg-surface-subtle/80 backdrop-blur-sm overflow-x-auto scrollbar-hide">
         <AnimatePresence mode="popLayout">
           {tabs.map((tab) => {
             const isActive = tab.id === activeTabId;
             const isModified = hasUnsavedChanges(tab);
             const isSaving = saving === tab.id;
+            const iconColor = getFileIconColor(tab.language);
 
             return (
               <motion.div
                 key={tab.id}
                 layout
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.9 }}
-                transition={{ duration: 0.15 }}
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10, scale: 0.95 }}
+                transition={{ duration: 0.15, ease: 'easeOut' }}
                 className={cn(
-                  'flex items-center gap-1.5 px-3 py-2 border-r border-line cursor-pointer group min-w-0',
-                  'hover:bg-surface-muted transition-colors',
-                  isActive && 'bg-surface-base border-b-2 border-b-primary-500'
+                  'relative flex items-center gap-2 px-3.5 py-2.5 cursor-pointer group min-w-0',
+                  'hover:bg-surface-muted/50 transition-all duration-150',
+                  isActive
+                    ? 'bg-surface-base shadow-sm'
+                    : 'border-r border-line/50'
                 )}
                 onClick={() => onTabChange(tab.id)}
               >
-                {/* 修改指示器 */}
-                {isModified && !isSaving && (
-                  <Circle size={8} className="fill-orange-400 text-orange-400 flex-shrink-0" />
-                )}
-                {isSaving && (
-                  <div className="w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin flex-shrink-0" />
+                {/* 活动标签顶部指示条 */}
+                {isActive && (
+                  <motion.div
+                    layoutId="activeTabIndicator"
+                    className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-primary-500 to-primary-400"
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                  />
                 )}
 
+                {/* 文件图标 */}
+                <FileCode size={14} className={cn('flex-shrink-0', isActive ? iconColor : 'text-fg-subtle')} />
+
                 {/* 文件名 */}
                 <span
                   className={cn(
-                    'text-sm truncate max-w-[150px]',
-                    isActive ? 'text-fg' : 'text-fg-muted'
+                    'text-sm truncate max-w-[140px] transition-colors',
+                    isActive ? 'text-fg font-medium' : 'text-fg-muted'
                   )}
                   title={tab.path}
                 >
                   {tab.name}
                 </span>
 
-                {/* 关闭按钮 */}
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onTabClose(tab.id);
-                  }}
-                  className={cn(
-                    'p-0.5 rounded hover:bg-surface-emphasis transition-colors flex-shrink-0',
-                    'opacity-0 group-hover:opacity-100',
-                    isActive && 'opacity-100'
-                  )}
-                >
-                  <X size={14} className="text-fg-muted" />
-                </button>
+                {/* 修改指示器 / 保存中 / 关闭按钮 */}
+                <div className="flex items-center gap-1 flex-shrink-0">
+                  {isSaving ? (
+                    <div className="w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
+                  ) : isModified ? (
+                    <Circle size={8} className="fill-orange-400 text-orange-400" />
+                  ) : null}
+
+                  {/* 关闭按钮 */}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTabClose(tab.id);
+                    }}
+                    className={cn(
+                      'p-1 rounded-md hover:bg-surface-emphasis/80 transition-all duration-150 flex-shrink-0',
+                      'opacity-0 group-hover:opacity-100',
+                      isActive && 'opacity-60 hover:opacity-100'
+                    )}
+                  >
+                    <X size={12} className="text-fg-muted" />
+                  </button>
+                </div>
               </motion.div>
             );
           })}
@@ -251,10 +293,11 @@ export function CodeEditor({
             whileTap={{ scale: 0.95 }}
             onClick={() => handleSave(activeTab)}
             disabled={saving === activeTab.id}
-            className="ml-auto mr-2 p-1.5 rounded hover:bg-surface-muted transition-colors"
+            className="ml-auto mr-3 px-3 py-1.5 rounded-md bg-primary-500/10 hover:bg-primary-500/20 transition-colors flex items-center gap-1.5"
             title="Save (Cmd+S)"
           >
-            <Save size={16} className="text-fg-muted" />
+            <Save size={14} className="text-primary-500" />
+            <span className="text-xs text-primary-500 font-medium">Save</span>
           </motion.button>
         )}
       </div>
@@ -294,10 +337,32 @@ export function CodeEditor({
               completionKeymap: true,
               lintKeymap: true,
             }}
-            className="h-full text-sm"
+            className="h-full"
           />
         )}
       </div>
+
+      {/* Status Bar */}
+      {activeTab && (
+        <div className="flex items-center justify-between px-4 py-1.5 border-t border-line bg-surface-subtle/60 text-xs">
+          <div className="flex items-center gap-4">
+            {/* 语言 */}
+            <span className="text-fg-muted capitalize">{activeTab.language}</span>
+            {/* 行数 */}
+            <span className="text-fg-subtle">
+              {activeTab.content.split('\n').length} lines
+            </span>
+          </div>
+          <div className="flex items-center gap-4">
+            {/* 编码 */}
+            <span className="text-fg-subtle">UTF-8</span>
+            {/* 路径 */}
+            <span className="text-fg-subtle truncate max-w-[300px]" title={activeTab.path}>
+              {activeTab.path}
+            </span>
+          </div>
+        </div>
+      )}
     </div>
   );
 }