增加添加文件和新建文件夹功能

index.html

@@ -53,8 +53,11 @@
                     <button class="block w-full text-left px-4 py-1 hover:bg-blue-100">New Disk</button>
                     <button class="block w-full text-left px-4 py-1 hover:bg-blue-100">Open Disk</button>
                     <button class="block w-full text-left px-4 py-1 hover:bg-blue-100">Sign Out</button>
+                    <div class="border-t border-gray-200 my-1"></div>
+                    <button id="newFolderBtn" class="block w-full text-left px-4 py-1 hover:bg-blue-100">New Folder</button>
+                    <button id="newFileBtn" class="block w-full text-left px-4 py-1 hover:bg-blue-100">New File</button>
         </div>
-    </div>
+</div>
 <div class="text-sm font-medium">Welcome, Admin</div>
 </div>
     </div>
@@ -199,15 +202,124 @@
             
             <!-- Status Bar -->
             <div class="bg-gray-200 p-1 border-t border-gray-300 text-xs flex justify-between px-2">
-                <div>12 items</div>
-                <div>4.2 GB free of 120 GB</div>
+            <div id="itemCount">12 items</div>
+<div>4.2 GB free of 120 GB</div>
             </div>
 </div>
     </div>
     <script>
         feather.replace();
+        
+        // New Folder Dialog
+        const newFolderDialog = `
+            <div id="newFolderDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+                <div class="bg-white p-4 rounded shadow-lg w-80">
+                    <h3 class="font-semibold mb-4">Create New Folder</h3>
+                    <input type="text" id="folderName" placeholder="Folder name" class="w-full p-2 border rounded mb-4">
+                    <div class="flex justify-end space-x-2">
+                        <button id="cancelFolderBtn" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
+                        <button id="createFolderBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Create</button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // New File Dialog
+        const newFileDialog = `
+            <div id="newFileDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+                <div class="bg-white p-4 rounded shadow-lg w-80">
+                    <h3 class="font-semibold mb-4">Create New File</h3>
+                    <input type="text" id="fileName" placeholder="File name" class="w-full p-2 border rounded mb-2">
+                    <select id="fileType" class="w-full p-2 border rounded mb-4">
+                        <option value="text">Text File</option>
+                        <option value="image">Image</option>
+                        <option value="document">Document</option>
+                    </select>
+                    <div class="flex justify-end space-x-2">
+                        <button id="cancelFileBtn" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
+                        <button id="createFileBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Create</button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        document.body.insertAdjacentHTML('beforeend', newFolderDialog);
+        document.body.insertAdjacentHTML('beforeend', newFileDialog);
+        
+        // Handle new folder creation
+        document.getElementById('newFolderBtn').addEventListener('click', () => {
+            document.getElementById('newFolderDialog').classList.remove('hidden');
+        });
+        
+        document.getElementById('cancelFolderBtn').addEventListener('click', () => {
+            document.getElementById('newFolderDialog').classList.add('hidden');
+        });
+        
+        document.getElementById('createFolderBtn').addEventListener('click', () => {
+            const folderName = document.getElementById('folderName').value.trim();
+            if (folderName) {
+                const fileGrid = document.querySelector('.grid');
+                const newFolder = `
+                    <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
+                        <i data-feather="folder" class="folder-icon w-12 h-12"></i>
+                        <span class="text-sm mt-1 text-center">${folderName}</span>
+                    </div>
+                `;
+                fileGrid.insertAdjacentHTML('beforeend', newFolder);
+                feather.replace();
+                document.getElementById('newFolderDialog').classList.add('hidden');
+                document.getElementById('folderName').value = '';
+            }
+        });
+        
+        // Handle new file creation
+        document.getElementById('newFileBtn').addEventListener('click', () => {
+            document.getElementById('newFileDialog').classList.remove('hidden');
+        });
+        
+        document.getElementById('cancelFileBtn').addEventListener('click', () => {
+            document.getElementById('newFileDialog').classList.add('hidden');
+        });
+        
+        document.getElementById('createFileBtn').addEventListener('click', () => {
+            const fileName = document.getElementById('fileName').value.trim();
+            const fileType = document.getElementById('fileType').value;
+            
+            if (fileName) {
+                const fileGrid = document.querySelector('.grid');
+                let iconClass = 'file-icon';
+                let iconName = 'file';
+                
+                switch(fileType) {
+                    case 'text':
+                        iconClass = 'doc-icon';
+                        iconName = 'file-text';
+                        break;
+                    case 'image':
+                        iconClass = 'img-icon';
+                        iconName = 'image';
+                        break;
+                    case 'document':
+                        iconClass = 'doc-icon';
+                        iconName = 'file-text';
+                        break;
+                }
+                
+                const newFile = `
+                    <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
+                        <i data-feather="${iconName}" class="${iconClass} w-12 h-12"></i>
+                        <span class="text-sm mt-1 text-center">${fileName}</span>
+                    </div>
+                `;
+                fileGrid.insertAdjacentHTML('beforeend', newFile);
+                feather.replace();
+                document.getElementById('newFileDialog').classList.add('hidden');
+                document.getElementById('fileName').value = '';
+            }
+        });
+        
         // Simulate disk selection
-        document.querySelectorAll('div.px-2.py-1').forEach(item => {
+document.querySelectorAll('div.px-2.py-1').forEach(item => {
 item.addEventListener('click', function() {
                 // Remove active class from all
                 document.querySelectorAll('div.px-2.py-1').forEach(i => {
@@ -241,6 +353,15 @@ document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
                 document.getElementById('detail-modified').textContent = now.toLocaleString();
             });
         });
+
+        // Update item count
+        function updateItemCount() {
+            const count = document.querySelectorAll('.flex.flex-col.items-center').length;
+            document.getElementById('itemCount').textContent = `${count} items`;
+        }
+
+        // Initialize
+        updateItemCount();
     </script>
 </body>
 </html>