黑暗模式 优化

src/pages/resource/bucket/index.jsx

@@ -73,6 +73,7 @@ const StorageManager = () => {
   const [newFileName, setNewFileName] = useState("");
   const [currentPath, setCurrentPath] = useState(""); // 添加当前路径状态
   const [pathHistory, setPathHistory] = useState([]); // 添加路径历史记录
+  const [isUploading, setIsUploading] = useState(false); // 添加上传loading状态
 
   // 文件图标映射
   const getFileIcon = (file) => {
@@ -144,7 +145,6 @@ const StorageManager = () => {
   // 预览文件
   const previewFile = async (file) => {
     try {
-      // Handle PDF and other binary files
       if (file.metadata?.mimetype === 'application/pdf' || 
           file.metadata?.mimetype.includes('msword') ||
           file.metadata?.mimetype.includes('spreadsheet')) {
@@ -173,6 +173,7 @@ const StorageManager = () => {
     multiple: true,
     showUploadList: false,
     customRequest: async ({ file, onSuccess, onError }) => {
+      setIsUploading(true); // 开始上传时设置状态
       try {
         const originalName = file.name;
         const fileName = handleFileName(originalName);
@@ -199,6 +200,8 @@ const StorageManager = () => {
       } catch (error) {
         message.error(`${file.name} 上传失败: ${error.message}`);
         onError(error);
+      } finally {
+        setIsUploading(false); // 上传完成后重置状态
       }
     },
     beforeUpload: (file) => {
@@ -460,22 +463,22 @@ const StorageManager = () => {
   // 修改文件列表渲染
   const renderFileList = () => (
     <div 
-      className="flex-1 overflow-y-auto rounded-lg shadow-sm" 
+      className="flex-1 overflow-y-auto rounded-lg shadow-sm " 
       id="scrollableDiv"
     >
-      {/* 面包屑导航 */}
+      {/* 面包屑导航样式优化 */}
       {currentPath && (
-        <div className="p-4 border-b border-gray-100">
+        <div className="p-4 border-b border-gray-100 dark:border-gray-700">
           <div className="flex items-center space-x-2 text-sm">
             <Button 
               type="link" 
               onClick={handleBack}
-              className="px-0"
+              className="px-0 text-blue-500 dark:text-blue-400"
             >
               返回上级
             </Button>
-            <span className="text-gray-500">/</span>
-            <span className="text-gray-900">{currentPath}</span>
+            <span className="text-gray-500 dark:text-gray-400">/</span>
+            <span className="text-gray-900 dark:text-gray-100">{currentPath}</span>
           </div>
         </div>
       )}
@@ -504,8 +507,8 @@ const StorageManager = () => {
             <List.Item
               className={`
                 relative group cursor-pointer transition-colors duration-200
-                hover:bg-gray-50 
-                ${selectedFile?.name === file.name ? "bg-blue-50" : ""}
+                hover:bg-gray-50 dark:hover:bg-gray-700
+                ${selectedFile?.name === file.name ? "bg-blue-50 dark:bg-gray-700" : ""}
               `}
               onClick={() => file.metadata?.isFolder ? handleFolderClick(file.name) : previewFile(file)}
             >
@@ -563,7 +566,7 @@ const StorageManager = () => {
                   </div>
                 }
                 description={
-                  <div className="text-xs text-gray-500 space-x-4">
+                  <div className="text-xs text-gray-500 dark:text-gray-400 space-x-4">
                     <span>{file.metadata?.isFolder ? '文件夹' : `类型: ${file.metadata?.mimetype}`}</span>
                     {!file.metadata?.isFolder && (
                       <>
@@ -581,7 +584,6 @@ const StorageManager = () => {
     </div>
   );
 
-  // 渲染文件类型标签
   const renderTypeTags = () => (
     <div className="flex flex-wrap gap-2">
       {Object.entries({ 全部: null, ...FILE_TYPES, 其他: null }).map(([type]) => (
@@ -596,24 +598,29 @@ const StorageManager = () => {
       ))}
     </div>
   );
-
   return (
-    <div className="flex h-screen bg-gray-50">
-      <div className="w-1/3 p-4 flex flex-col space-y-4">
-        <div className="rounded-lg shadow-sm overflow-hidden">
+    <div className="flex h-full ">
+      <div className="w-1/3 p-2 flex flex-col space-y-4   h-full overflow-auto ">
+        <div className="rounded-lg shadow-sm  p-4 ">
           <Dragger
             {...uploadProps}
-            className="px-6 py-8 hover:bg-gray-50 transition-colors group"
+            className={`px-6 py-8 group
+              ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
+            disabled={isUploading}
           >
             <div className="space-y-3 text-center">
-              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 group-hover:bg-blue-100 transition-colors">
-                <InboxOutlined className="text-3xl text-blue-500" />
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full  group-hover:bg-blue-100 dark:group-hover:bg-blue-800 transition-colors">
+                {isUploading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <InboxOutlined className="text-3xl text-blue-500 dark:text-blue-400" />
+                )}
               </div>
               <div>
-                <p className="text-base font-medium text-gray-900">
-                  点击或拖拽文件上传
+                <p className="text-base font-medium text-gray-900 dark:text-gray-100">
+                  {isUploading ? '正在上传...' : '点击或拖拽文件上传'}
                 </p>
-                <p className="mt-1 text-sm text-gray-500">
+                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                   支持单个或批量上传，文件大小不超过50MB
                 </p>
               </div>
@@ -621,7 +628,6 @@ const StorageManager = () => {
           </Dragger>
         </div>
 
-        {/* 搜索和筛选区域 */}
         <div className="space-y-3">
           <Search
             placeholder="搜索文件名..."
@@ -630,7 +636,7 @@ const StorageManager = () => {
             className="w-full"
             size="large"
           />
-          <div className="bg-white p-3 rounded-lg shadow-sm">
+          <div className="  p-3 rounded-lg shadow-sm">
             {renderTypeTags()}
           </div>
         </div>
@@ -646,20 +652,20 @@ const StorageManager = () => {
       </div>
 
       {/* 右侧预览区域 */}
-      <div className="flex-1 p-4 bg-white border-l border-gray-200">
+      <div className="flex-1 p-4  border-l border-gray-200">
         {selectedFile ? (
           <>
             <div className="mb-4 pb-4 border-b border-gray-200">
               <Space size="middle" align="center">
                 <Space>
-                  <span className="text-lg font-medium text-gray-900">
+                  <span className="text-lg font-medium ">
                     {selectedFile.name}
                   </span>
                   <Button
                     type="text"
                     icon={<EditOutlined />}
                     onClick={startRename}
-                    className="text-gray-500 hover:text-blue-500"
+                    className="text-gray-500 dark:text-gray-100 hover:text-blue-500"
                   />
                 </Space>
                 {isHtml(selectedFile) && (