From 6f3b2c8d9252d2b007518013e89e19bb8019dc77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E4=BA=AE?= <787615673@qq.com>
Date: Sat, 14 Mar 2026 13:02:13 +0800
Subject: [PATCH 1/4] =?UTF-8?q?style(DocumentSidebar):=20=E7=AE=80?=
 =?UTF-8?q?=E5=8C=96=E6=96=87=E4=BB=B6=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E7=A7=BB=E9=99=A4=E6=B8=90=E5=8F=98=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除文件侧边栏中的渐变背景和阴影效果，改用更简洁的纯色设计
调整选中状态和悬停状态的样式，统一颜色方案
优化图标和文本的显示效果，提升视觉一致性
---
 .../folder/components/RenderFile.tsx          | 69 ++++++++-----------
 1 file changed, 28 insertions(+), 41 deletions(-)

diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
index 060be8d2..5c19e9e9 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
@@ -122,20 +122,14 @@ export const RenderFile: React.FC<{
       <div style={style} {...listeners}>
         <div
           className={cn(
-            'flex items-center py-2 px-3 text-sm cursor-pointer relative group box-border',
-            'transition-all duration-300 ease-out rounded-lg mx-2 my-0.5 hover:z-[100]',
-            isSelected && [
-              'bg-blue-500/10 dark:bg-blue-400/15',
-              'text-blue-700 dark:text-blue-300',
-              'border-2 border-blue-500 dark:border-blue-400',
-              'shadow-sm shadow-blue-500/20',
-            ],
+            'flex items-center py-0.5 px-2 text-xs cursor-pointer relative group box-border',
+            'transition-all duration-300 ease-out rounded-lg mx-1 my-0.5 hover:z-[100]',
+            isSelected && ['bg-[#f0f0f0] dark:bg-[#2a2d2e]', 'text-[#333]', 'border-transparent'],
             !isSelected && [
-              'hover:bg-gradient-to-r hover:from-blue-50/80 hover:via-blue-100/60 hover:to-blue-50/80',
+              'hover:bg-[#f0f0f0] dark:hover:bg-[#2a2d2e]',
               'dark:hover:from-blue-900/20 dark:hover:via-blue-800/30 dark:hover:to-blue-900/20',
-              'hover:shadow-md hover:shadow-blue-200/40 dark:hover:shadow-blue-900/30',
-              'hover:transform hover:scale-[1.01]',
-              'text-slate-700 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-300',
+              'dark:text-slate-300',
+              'text-[#333] dark:text-[#cccccc]',
               'border-2 border-transparent',
             ],
             isOverlay && 'border-lime-500 border-2',
@@ -154,8 +148,8 @@ export const RenderFile: React.FC<{
                   'w-5 h-5 rounded-md flex items-center justify-center group/chevron',
                   'transition-all duration-300 transform hover:scale-110',
                   isSelected
-                    ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                    : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                    ? 'hover:bg-[#e0e0e0] text-[#333]'
+                    : 'hover:bg-[#f5f5f5] dark:hover:bg-[#3a3a3a] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
                 )}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -180,27 +174,25 @@ export const RenderFile: React.FC<{
             {isFolder ? (
               <div
                 className={cn(
-                  'w-5 h-5 rounded-md flex items-center justify-center',
-                  'transition-all duration-300 group-hover:scale-110',
+                  'w-5 h-5 rounded flex items-center justify-center',
                   isExpanded
-                    ? 'bg-gradient-to-br from-amber-400 to-orange-500 shadow-md shadow-amber-500/30'
-                    : 'bg-gradient-to-br from-yellow-400 to-amber-500 shadow-md shadow-yellow-500/30',
+                    ? 'text-[#666666] dark:text-[#999999]'
+                    : 'text-[#666666] dark:text-[#999999]',
                 )}
               >
                 <Icon
                   name={isExpanded ? 'FolderOpen' : 'Folder'}
-                  className="h-3.5 w-3.5 text-white drop-shadow-sm"
+                  className={cn('h-3.5 w-3.5', isSelected && 'text-[#333]')}
                 />
               </div>
             ) : (
               <div
                 className={cn(
-                  'w-5 h-5 rounded-md flex items-center justify-center',
-                  'bg-gradient-to-br from-blue-400 to-indigo-500',
-                  'shadow-md shadow-blue-500/30 transition-all duration-300 group-hover:scale-110',
+                  'w-5 h-5 rounded flex items-center justify-center',
+                  'text-[#666666] dark:text-[#999999]',
                 )}
               >
-                <Icon name="FileText" className="h-3.5 w-3.5 text-white drop-shadow-sm" />
+                <Icon name="FileText" className={cn('h-3.5 w-3.5', isSelected && 'text-[#333]')} />
               </div>
             )}
           </div>
@@ -232,9 +224,7 @@ export const RenderFile: React.FC<{
                       'px-0 py-0',
                       'cursor-pointer pointer-events-none',
                       'truncate',
-                      isSelected
-                        ? 'text-blue-700 dark:text-blue-300'
-                        : 'text-slate-700 dark:text-slate-300 group-hover:text-blue-700 dark:group-hover:text-blue-300',
+                      isSelected ? 'text-[#333]' : 'text-[#333] dark:text-[#cccccc]',
                     ],
               )}
               defaultValue={file.name}
@@ -270,8 +260,8 @@ export const RenderFile: React.FC<{
                   className={cn(
                     'p-1.5 rounded-lg transition-all duration-300 transform hover:scale-110',
                     isSelected
-                      ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                      : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                      ? 'hover:bg-[#e0e0e0] text-[#333]'
+                      : 'hover:bg-[#f5f5f5] dark:hover:bg-[#3a3a3a] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
                     'shadow-sm hover:shadow-md',
                   )}
                   onClick={(e) => {
@@ -286,8 +276,8 @@ export const RenderFile: React.FC<{
                   className={cn(
                     'p-1.5 rounded-lg transition-all duration-300 transform hover:scale-110',
                     isSelected
-                      ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                      : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                      ? 'hover:bg-[#e0e0e0] text-[#333]'
+                      : 'hover:bg-[#e8e8e8] dark:hover:bg-[#2a2d2e] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
                     'shadow-sm hover:shadow-md',
                   )}
                   onClick={(e) => {
@@ -313,8 +303,8 @@ export const RenderFile: React.FC<{
                 className={cn(
                   'p-1.5 rounded-lg',
                   isSelected
-                    ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                    : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                    ? 'hover:bg-[#e0e0e0] text-[#333]'
+                    : 'hover:bg-[#e8e8e8] dark:hover:bg-[#2a2d2e] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
                 )}
               />
             </div>
@@ -347,20 +337,17 @@ export const RenderFile: React.FC<{
               {isAddingNewItem && (
                 <div
                   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',
+                    'flex items-center px-3 text-sm',
+                    'bg-[#f0f5f9] dark:bg-[#1e3a5f]',
+                    'border border-[#3b82f6] rounded-lg',
+                    'shadow-sm',
                   )}
                   style={{ paddingLeft: `${(depth + 1) * 16 + 12}px` }}
                 >
-                  <div className="w-6 h-6 mr-2 flex-shrink-0 flex items-center justify-center">
+                  <div className="w-6 mr-2 flex-shrink-0 flex items-center justify-center">
                     <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',
+                        'w-5 h-5 rounded flex items-center justify-center text-[#666666] dark:text-[#999999]',
                       )}
                     >
                       <Icon

From 1baaa8502118cd717ce70694db6224ab1badaa4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E4=BA=AE?= <787615673@qq.com>
Date: Mon, 16 Mar 2026 11:13:58 +0800
Subject: [PATCH 2/4] =?UTF-8?q?style(=E6=96=87=E6=A1=A3=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F):=20=E7=BB=9F=E4=B8=80=E6=96=87=E4=BB=B6=E6=A0=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=B8=BA=E7=AE=80=E7=BA=A6?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除渐变背景和阴影效果，使用统一的中性色系
调整间距和图标颜色以提升视觉一致性
优化暗黑模式下的颜色对比度
---
 .../DocumentSidebar/folder/FileItemMenu.tsx   | 24 +++++-----
 .../folder/components/ContextMenu.tsx         | 12 ++---
 .../folder/components/DocumentGroupHeader.tsx | 12 ++---
 .../folder/components/FileTree.tsx            | 16 +++----
 .../folder/components/GroupedFileTree.tsx     | 47 +++++++++----------
 .../folder/components/RenderFile.tsx          | 12 ++---
 6 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
index d3a2299d..cc61b82b 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
+++ b/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>
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx
index ab436856..1595af77 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx
+++ b/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>
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
index d8cc2143..3792bec1 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
+++ b/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>
 
         {/* 分组名称 */}
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
index 995fc614..2e6820c8 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
+++ b/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="取消"
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
index 0a2fd915..02fcf04b 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
+++ b/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,12 +219,12 @@ 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
@@ -235,15 +232,15 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
                               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">
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
index 5c19e9e9..19069ab0 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
@@ -142,7 +142,7 @@ export const RenderFile: React.FC<{
         >
           {/* 展开/折叠图标 - 只为文件夹显示 */}
           {isFolder && (
-            <div className="mr-2 w-5 h-5 flex-shrink-0 flex items-center justify-center">
+            <div className="w-5 h-5 flex-shrink-0 flex items-center justify-center">
               <button
                 className={cn(
                   'w-5 h-5 rounded-md flex items-center justify-center group/chevron',
@@ -170,7 +170,7 @@ export const RenderFile: React.FC<{
           )}
 
           {/* 文件/文件夹图标 - 更精美的设计 */}
-          <div className="w-6 h-6 mr-3 flex-shrink-0 flex items-center justify-center">
+          <div className="w-6 h-6  flex-shrink-0 flex items-center justify-center">
             {isFolder ? (
               <div
                 className={cn(
@@ -326,7 +326,7 @@ export const RenderFile: React.FC<{
             {/* 连接线 */}
             <div
               className={cn(
-                `absolute left-6   w-px`,
+                `absolute left-2   w-px`,
                 'bg-gradient-to-b from-slate-200 via-slate-300 to-transparent',
                 'dark:from-slate-600 dark:via-slate-500',
               )}
@@ -338,8 +338,8 @@ export const RenderFile: React.FC<{
                 <div
                   className={cn(
                     'flex items-center px-3 text-sm',
-                    'bg-[#f0f5f9] dark:bg-[#1e3a5f]',
-                    'border border-[#3b82f6] rounded-lg',
+                    'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
+                    'border border-[#999999] rounded-lg',
                     'shadow-sm',
                   )}
                   style={{ paddingLeft: `${(depth + 1) * 16 + 12}px` }}
@@ -365,7 +365,7 @@ export const RenderFile: React.FC<{
                         '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',
-                        'px-3 py-2 text-sm rounded-lg transition-all duration-300',
+                        'px-3 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',
                       )}

From 52dd30861ac733c5b1519a4835f9a6af59f62c21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E4=BA=AE?= <787615673@qq.com>
Date: Mon, 16 Mar 2026 13:41:31 +0800
Subject: [PATCH 3/4] =?UTF-8?q?style(=E4=BE=A7=E8=BE=B9=E6=A0=8F):=20?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=96=87=E4=BB=B6=E6=A0=91=E5=92=8C=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B9=E7=9A=84=E6=96=87=E6=9C=AC=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=92=8C=E8=83=8C=E6=99=AF=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DocumentSidebar/folder/FileItemMenu.tsx    |  2 +-
 .../folder/components/DocumentGroupHeader.tsx  | 11 +----------
 .../folder/components/FileTree.tsx             |  4 +---
 .../folder/components/GroupedFileTree.tsx      |  4 ++--
 .../folder/components/RenderFile.tsx           | 18 +++++++++---------
 5 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
index cc61b82b..3f216c09 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
@@ -148,7 +148,7 @@ const FileItemMenu = ({
     >
       <button
         ref={buttonRef}
-        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"
+        className="p-1 rounded-full hover:bg-[#e0e0e0] dark:hover:bg-[#444444] text-[#333] hover:text-[#333] transition-colors opacity-0 group-hover:opacity-100"
         onClick={handleMenuClick}
         title="更多操作"
       >
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
index 3792bec1..70d82d1c 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
@@ -36,16 +36,7 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
   };
 
   const getGroupColor = () => {
-    switch (type) {
-      case 'personal':
-        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
-      case 'organization':
-        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
-      case 'shared':
-        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
-      default:
-        return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
-    }
+    return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
   };
 
   return (
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
index 2e6820c8..acd4b0ff 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
@@ -75,9 +75,7 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
         <div className="w-6 h-6 mr-2 flex-shrink-0 flex items-center justify-center">
           <div
             className={cn(
-              'w-5 h-5 rounded-md flex items-center justify-center',
-              'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
-              'shadow-sm',
+              'w-5 h-5 rounded flex items-center justify-center text-[#333] dark:text-[#cccccc]',
             )}
           >
             <Icon
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
index 02fcf04b..036e4ee6 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
@@ -73,7 +73,7 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
         className={cn(
           'flex items-center py-2 px-3 text-sm mx-2 my-0.5',
           'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
-          'border border-[#999999] dark:border-[#555555] rounded-lg',
+          'border border-[#cccccc] dark:border-[#555555] rounded-lg',
           'shadow-sm',
           'overflow-hidden',
         )}
@@ -99,7 +99,7 @@ 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-[#999999] dark:border-[#555555]',
+              'border-2 border-[#cccccc] 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',
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
index 19069ab0..0f7246a8 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
@@ -149,7 +149,7 @@ export const RenderFile: React.FC<{
                   'transition-all duration-300 transform hover:scale-110',
                   isSelected
                     ? 'hover:bg-[#e0e0e0] text-[#333]'
-                    : 'hover:bg-[#f5f5f5] dark:hover:bg-[#3a3a3a] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
+                    : 'hover:bg-[#e0e0e0] dark:hover:bg-[#3a3a3a] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                 )}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -176,8 +176,8 @@ export const RenderFile: React.FC<{
                 className={cn(
                   'w-5 h-5 rounded flex items-center justify-center',
                   isExpanded
-                    ? 'text-[#666666] dark:text-[#999999]'
-                    : 'text-[#666666] dark:text-[#999999]',
+                    ? 'text-[#333] dark:text-[#cccccc]'
+                    : 'text-[#333] dark:text-[#cccccc]',
                 )}
               >
                 <Icon
@@ -189,7 +189,7 @@ export const RenderFile: React.FC<{
               <div
                 className={cn(
                   'w-5 h-5 rounded flex items-center justify-center',
-                  'text-[#666666] dark:text-[#999999]',
+                  'text-[#333] dark:text-[#cccccc]',
                 )}
               >
                 <Icon name="FileText" className={cn('h-3.5 w-3.5', isSelected && 'text-[#333]')} />
@@ -261,7 +261,7 @@ export const RenderFile: React.FC<{
                     'p-1.5 rounded-lg transition-all duration-300 transform hover:scale-110',
                     isSelected
                       ? 'hover:bg-[#e0e0e0] text-[#333]'
-                      : 'hover:bg-[#f5f5f5] dark:hover:bg-[#3a3a3a] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
+                      : 'hover:bg-[#e0e0e0] dark:hover:bg-[#3a3a3a] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                     'shadow-sm hover:shadow-md',
                   )}
                   onClick={(e) => {
@@ -277,7 +277,7 @@ export const RenderFile: React.FC<{
                     'p-1.5 rounded-lg transition-all duration-300 transform hover:scale-110',
                     isSelected
                       ? 'hover:bg-[#e0e0e0] text-[#333]'
-                      : 'hover:bg-[#e8e8e8] dark:hover:bg-[#2a2d2e] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
+                      : 'hover:bg-[#e0e0e0] dark:hover:bg-[#2a2d2e] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                     'shadow-sm hover:shadow-md',
                   )}
                   onClick={(e) => {
@@ -304,7 +304,7 @@ export const RenderFile: React.FC<{
                   'p-1.5 rounded-lg',
                   isSelected
                     ? 'hover:bg-[#e0e0e0] text-[#333]'
-                    : 'hover:bg-[#e8e8e8] dark:hover:bg-[#2a2d2e] text-[#717171] dark:text-[#858585] hover:text-[#333] dark:hover:text-[#cccccc]',
+                    : 'hover:bg-[#e0e0e0] dark:hover:bg-[#2a2d2e] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                 )}
               />
             </div>
@@ -339,7 +339,7 @@ export const RenderFile: React.FC<{
                   className={cn(
                     'flex items-center px-3 text-sm',
                     'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
-                    'border border-[#999999] rounded-lg',
+                    'border border-[#cccccc] dark:border-[#555555] rounded-lg',
                     'shadow-sm',
                   )}
                   style={{ paddingLeft: `${(depth + 1) * 16 + 12}px` }}
@@ -347,7 +347,7 @@ export const RenderFile: React.FC<{
                   <div className="w-6 mr-2 flex-shrink-0 flex items-center justify-center">
                     <div
                       className={cn(
-                        'w-5 h-5 rounded flex items-center justify-center text-[#666666] dark:text-[#999999]',
+                        'w-5 h-5 rounded flex items-center justify-center text-[#333] dark:text-[#cccccc]',
                       )}
                     >
                       <Icon

From 7baae316389111c7a303a05c66f5705f5a818106 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E4=BA=AE?= <787615673@qq.com>
Date: Mon, 16 Mar 2026 13:56:25 +0800
Subject: [PATCH 4/4] =?UTF-8?q?refactor(DocumentSidebar):=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84getGroupColor?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=B9=B6=E5=86=85=E8=81=94=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../folder/components/DocumentGroupHeader.tsx              | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
index 70d82d1c..5cd87082 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
@@ -35,10 +35,6 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
     }
   };
 
-  const getGroupColor = () => {
-    return 'bg-[#e0e0e0] dark:bg-[#3a3a3a]';
-  };
-
   return (
     <div
       className={cn(
@@ -66,8 +62,7 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
         <div
           className={cn(
             'w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0',
-            'bg-gradient-to-br shadow-sm',
-            getGroupColor(),
+            'bg-gradient-to-br shadow-sm bg-[#e0e0e0] dark:bg-[#3a3a3a]',
           )}
         >
           <Icon name={getGroupIcon() as any} className="w-3 h-3 text-[#333] dark:text-[#cccccc]" />