Feat: 优化了filetree的样式

apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx

@@ -106,35 +106,35 @@ const FileItemMenu = ({
       label: '分享',
       action: () => onShare?.(file),
       show: !!onShare,
-      className: 'text-blue-600 hover:bg-blue-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Download',
       label: '下载',
       action: () => onDownload?.(file),
       show: !!onDownload && file.type === 'file',
-      className: 'text-green-600 hover:bg-green-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Copy',
       label: '复制',
       action: () => onDuplicate?.(file),
       show: !!onDuplicate,
-      className: 'text-gray-600 hover:bg-gray-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Pencil',
       label: '重命名',
       action: () => onRename?.(file),
       show: !!onRename,
-      className: 'text-gray-600 hover:bg-gray-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Trash',
       label: '删除',
       action: () => onDelete?.(file),
       show: !!onDelete,
-      className: 'text-red-600 hover:bg-red-50',
+      className: 'text-[#cc0000] hover:bg-[#ffe6e6] dark:hover:bg-[#442222]',
       divider: true,
     },
   ].filter((item) => item.show);
@@ -148,29 +148,31 @@ const FileItemMenu = ({
     >
       <button
         ref={buttonRef}
-        className="p-1 rounded-full hover:bg-gray-200 text-gray-500 hover:text-gray-700 transition-colors opacity-0 group-hover:opacity-100"
+        className="p-1 rounded-full hover:bg-[#e0e0e0] dark:hover:bg-[#444444] text-[#666666] hover:text-[#333] transition-colors opacity-0 group-hover:opacity-100"
         onClick={handleMenuClick}
         title="更多操作"
       >
-        <Icon name="EllipsisVertical" className="h-4 w-4" />
+        <Icon name="EllipsisVertical" className="h-3.5 w-3.5" />
       </button>
 
       {isOpen && (
         <div
           ref={menuRef}
-          className="absolute right-0 top-full mt-1 z-50 bg-white shadow-lg rounded-lg border border-gray-200 py-1 min-w-[140px]"
+          className="absolute right-0 top-full mt-1 z-50 bg-[#ffffff] dark:bg-[#2a2d2e] shadow-md rounded-lg border border-[#e0e0e0] dark:border-[#444444] py-1 min-w-[140px] text-xs"
         >
           {menuItems.map((item, index) => (
             <div key={item.label}>
-              {item.divider && index > 0 && <div className="border-t border-gray-200 my-1" />}
+              {item.divider && index > 0 && (
+                <div className="border-t border-[#e0e0e0] dark:border-[#444444] my-1" />
+              )}
               <button
                 className={cn(
-                  'w-full text-left px-3 py-2 text-sm flex items-center transition-colors',
+                  'w-full text-left px-3 py-1.5 text-xs flex items-center transition-colors',
                   item.className,
                 )}
                 onClick={() => handleMenuItemClick(item.action)}
               >
-                <Icon name={item.icon as any} className="h-4 w-4 mr-2" />
+                <Icon name={item.icon as any} className="h-3.5 w-3.5 mr-1.5" />
                 {item.label}
               </button>
             </div>

apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx

@@ -132,8 +132,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
               )}
               onClick={() => onCreateFile(targetFile.id)}
             >
-              <div className="w-5 h-5 rounded-md bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
-                <Icon name="FilePlus" className="h-3 w-3 text-white" />
+              <div className="w-5 h-5 rounded-md bg-[#e0e0e0] dark:bg-[#3a3a3a] flex items-center justify-center">
+                <Icon name="FilePlus" className="h-3 w-3 text-[#333]" />
               </div>
               <span>新建文件</span>
             </button>
@@ -147,8 +147,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
               )}
               onClick={() => onCreateFolder(targetFile.id)}
             >
-              <div className="w-5 h-5 rounded-md bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center">
-                <Icon name="FolderPlus" className="h-3 w-3 text-white" />
+              <div className="w-5 h-5 rounded-md bg-[#e0e0e0] dark:bg-[#3a3a3a] flex items-center justify-center">
+                <Icon name="FolderPlus" className="h-3 w-3 text-[#333]" />
               </div>
               <span>新建文件夹</span>
             </button>
@@ -165,8 +165,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
           )}
           onClick={() => onRename(targetFile?.id || '')}
         >
-          <div className="w-5 h-5 rounded-md bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
-            <Icon name="Pencil" className="h-3 w-3 text-white" />
+          <div className="w-5 h-5 rounded-md bg-[#e0e0e0] dark:bg-[#3a3a3a] flex items-center justify-center">
+            <Icon name="Pencil" className="h-3 w-3 text-[#333]" />
           </div>
           <span>重命名</span>
         </button>

apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx

@@ -38,20 +38,20 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
   const getGroupColor = () => {
     switch (type) {
       case 'personal':
-        return 'from-blue-500 to-indigo-600';
+        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
       case 'organization':
-        return 'from-purple-500 to-pink-600';
+        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
       case 'shared':
-        return 'from-green-500 to-emerald-600';
+        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
       default:
-        return 'from-slate-500 to-slate-600';
+        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
     }
   };
 
   return (
     <div
       className={cn(
-        'flex items-center justify-between px-3 py-2.5 mx-2 my-1',
+        'flex items-center justify-between py-2.5 mx-2 my-1',
         'cursor-pointer select-none group',
         'rounded-lg transition-all duration-200',
         'hover:bg-gradient-to-r hover:from-slate-100/80 hover:to-slate-50/80',
@@ -79,7 +79,7 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
             getGroupColor(),
           )}
         >
-          <Icon name={getGroupIcon() as any} className="w-3 h-3 text-white" />
+          <Icon name={getGroupIcon() as any} className="w-3 h-3 text-[#333] dark:text-[#cccccc]" />
         </div>
 
         {/* 分组名称 */}

apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx

@@ -76,13 +76,13 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
           <div
             className={cn(
               'w-5 h-5 rounded-md flex items-center justify-center',
-              'bg-gradient-to-br from-emerald-400 to-green-500',
-              'shadow-md shadow-emerald-500/30',
+              'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+              'shadow-sm',
             )}
           >
             <Icon
               name={newItemType === 'folder' ? 'Folder' : 'FileText'}
-              className="h-3.5 w-3.5 text-white drop-shadow-sm"
+              className="h-3.5 w-3.5 text-[#333]"
             />
           </div>
         </div>
@@ -113,9 +113,8 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-green-500 to-emerald-600',
-                'text-white shadow-lg shadow-green-500/30',
-                'hover:from-green-600 hover:to-emerald-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={() => onFinishCreateNewItem()}
               title="确认"
@@ -125,9 +124,8 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-red-500 to-pink-600',
-                'text-white shadow-lg shadow-red-500/30',
-                'hover:from-red-600 hover:to-pink-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={onCancelCreateNewItem}
               title="取消"

apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx

@@ -72,10 +72,9 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
         data-new-item-container
         className={cn(
           'flex items-center py-2 px-3 text-sm mx-2 my-0.5',
-          'bg-gradient-to-r from-green-50 via-emerald-50/80 to-green-50',
-          'dark:from-green-900/20 dark:via-emerald-900/20 dark:to-green-900/20',
-          'border border-green-200/60 dark:border-green-700/50 rounded-lg',
-          'shadow-md shadow-green-200/20 dark:shadow-green-800/20',
+          'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
+          'border border-[#999999] dark:border-[#555555] rounded-lg',
+          'shadow-sm',
           'overflow-hidden',
         )}
         onClick={(e) => e.stopPropagation()}
@@ -84,13 +83,13 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
           <div
             className={cn(
               'w-5 h-5 rounded-md flex items-center justify-center',
-              'bg-gradient-to-br from-emerald-400 to-green-500',
-              'shadow-md shadow-emerald-500/30',
+              'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+              'shadow-sm',
             )}
           >
             <Icon
               name={newItemType === 'folder' ? 'Folder' : 'FileText'}
-              className="h-3.5 w-3.5 text-white drop-shadow-sm"
+              className="h-3.5 w-3.5 text-[#333]"
             />
           </div>
         </div>
@@ -100,12 +99,12 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
             type="text"
             className={cn(
               'flex-1 bg-white/90 dark:bg-slate-700/90 backdrop-blur-sm',
-              'border-2 border-green-400/70 dark:border-green-500/70',
-              'focus:border-green-500 dark:focus:border-green-400',
-              'focus:ring-2 focus:ring-green-500/30 dark:focus:ring-green-400/30',
+              'border-2 border-[#999999] dark:border-[#555555]',
+              'focus:border-[#333] dark:focus:border-[#cccccc]',
+              'focus:ring-2 focus:ring-[#333]/30 dark:focus:ring-[#cccccc]/30',
               'px-3 py-2 text-sm rounded-lg transition-all duration-300',
               'text-slate-900 dark:text-slate-100',
-              'shadow-lg shadow-green-200/30 dark:shadow-green-800/20',
+              'shadow-sm',
               'min-w-0',
             )}
             value={newItemName}
@@ -119,9 +118,8 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-green-500 to-emerald-600',
-                'text-white shadow-lg shadow-green-500/30',
-                'hover:from-green-600 hover:to-emerald-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={() => onFinishCreateNewItem()}
               title="确认"
@@ -131,9 +129,8 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-red-500 to-pink-600',
-                'text-white shadow-lg shadow-red-500/30',
-                'hover:from-red-600 hover:to-pink-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={onCancelCreateNewItem}
               title="取消"
@@ -222,28 +219,28 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
                         <div className="relative">
                           <div
                             className={cn(
-                              'w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg',
+                              'w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm',
                               group.type === 'shared'
-                                ? 'bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-900/20 dark:to-emerald-900/30'
+                                ? 'bg-[#f0f0f0] dark:bg-[#2a2d2e]'
                                 : group.type === 'organization'
-                                  ? 'bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/30'
-                                  : 'bg-gradient-to-br from-blue-50 to-cyan-100 dark:from-blue-900/20 dark:to-cyan-900/30',
+                                  ? 'bg-[#f0f0f0] dark:bg-[#2a2d2e]'
+                                  : 'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
                             )}
                           >
                             <Icon
                               name={group.type === 'shared' ? 'Share2' : 'FolderOpen'}
                               className={cn(
                                 'w-8 h-8',
                                 group.type === 'shared'
-                                  ? 'text-green-500 dark:text-green-400'
+                                  ? 'text-[#333] dark:text-[#cccccc]'
                                   : group.type === 'organization'
-                                    ? 'text-purple-500 dark:text-purple-400'
-                                    : 'text-blue-500 dark:text-blue-400',
+                                    ? 'text-[#333] dark:text-[#cccccc]'
+                                    : 'text-[#333] dark:text-[#cccccc]',
                               )}
                             />
                           </div>
                           {/* 装饰性光点 */}
-                          <div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full opacity-70 blur-sm"></div>
+                          <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#999999] rounded-full opacity-50"></div>
                         </div>
 
                         <div className="space-y-1">