1、顶部增加系统菜单栏，点击弹出新建磁盘，打开磁盘选项。2、左边磁盘增加容量状态显示。3、点击文件夹或者文件显示文件详细信息。
Browse files- index.html +54 -9
index.html
CHANGED
|
@@ -44,8 +44,20 @@
|
|
| 44 |
</style>
|
| 45 |
</head>
|
| 46 |
<body class="bg-gray-100 font-sans">
|
| 47 |
-
<
|
| 48 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
<div class="w-64 bg-white border-r border-gray-300 flex flex-col">
|
| 50 |
<div class="p-4 border-b border-gray-300">
|
| 51 |
<h2 class="text-lg font-semibold">DiskMaster</h2>
|
|
@@ -101,10 +113,9 @@
|
|
| 101 |
</button>
|
| 102 |
</div>
|
| 103 |
</div>
|
| 104 |
-
|
| 105 |
<!-- Main File Browser -->
|
| 106 |
-
<div class="flex-1 overflow-auto bg-white">
|
| 107 |
-
|
| 108 |
<div class="p-4 grid grid-cols-6 gap-4">
|
| 109 |
<!-- Folders -->
|
| 110 |
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
|
|
@@ -143,15 +154,30 @@
|
|
| 143 |
</div>
|
| 144 |
</div>
|
| 145 |
</div>
|
| 146 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 147 |
<!-- Status Bar -->
|
| 148 |
<div class="bg-gray-200 p-1 border-t border-gray-300 text-xs flex justify-between px-2">
|
| 149 |
<div>12 items</div>
|
| 150 |
<div>4.2 GB free of 120 GB</div>
|
| 151 |
</div>
|
| 152 |
-
|
| 153 |
</div>
|
| 154 |
-
|
| 155 |
<script>
|
| 156 |
feather.replace();
|
| 157 |
|
|
@@ -166,11 +192,30 @@
|
|
| 166 |
this.classList.add('bg-blue-100');
|
| 167 |
|
| 168 |
// Update address bar and search placeholder
|
| 169 |
-
const diskName = this.querySelector('
|
| 170 |
document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
|
| 171 |
document.querySelector('input[type="text"]').placeholder = `Search ${diskName}`;
|
| 172 |
});
|
| 173 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 174 |
</script>
|
| 175 |
</body>
|
| 176 |
</html>
|
|
|
|
| 44 |
</style>
|
| 45 |
</head>
|
| 46 |
<body class="bg-gray-100 font-sans">
|
| 47 |
+
<!-- Menu Bar -->
|
| 48 |
+
<div class="bg-gray-200 border-b border-gray-300 text-sm">
|
| 49 |
+
<div class="flex items-center px-2 h-8">
|
| 50 |
+
<div class="relative group">
|
| 51 |
+
<button class="px-2 hover:bg-gray-300 rounded">File</button>
|
| 52 |
+
<div class="hidden group-hover:block absolute bg-white shadow-lg z-10 w-48">
|
| 53 |
+
<button class="block w-full text-left px-4 py-1 hover:bg-blue-100">New Disk</button>
|
| 54 |
+
<button class="block w-full text-left px-4 py-1 hover:bg-blue-100">Open Disk</button>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
<div class="flex h-screen overflow-hidden" style="height: calc(100vh - 2rem)">
|
| 60 |
+
<!-- Sidebar - Disk List -->
|
| 61 |
<div class="w-64 bg-white border-r border-gray-300 flex flex-col">
|
| 62 |
<div class="p-4 border-b border-gray-300">
|
| 63 |
<h2 class="text-lg font-semibold">DiskMaster</h2>
|
|
|
|
| 113 |
</button>
|
| 114 |
</div>
|
| 115 |
</div>
|
|
|
|
| 116 |
<!-- Main File Browser -->
|
| 117 |
+
<div class="flex-1 overflow-auto bg-white" style="height: calc(100% - 8rem)">
|
| 118 |
+
<!-- File Grid View -->
|
| 119 |
<div class="p-4 grid grid-cols-6 gap-4">
|
| 120 |
<!-- Folders -->
|
| 121 |
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
|
|
|
|
| 154 |
</div>
|
| 155 |
</div>
|
| 156 |
</div>
|
| 157 |
+
<!-- Details Panel -->
|
| 158 |
+
<div class="bg-gray-100 border-t border-gray-300 p-4 hidden" id="detailsPanel">
|
| 159 |
+
<h3 class="font-semibold mb-2">File Details</h3>
|
| 160 |
+
<div class="grid grid-cols-2 gap-2 text-sm">
|
| 161 |
+
<div class="text-gray-600">Name:</div>
|
| 162 |
+
<div id="detail-name">-</div>
|
| 163 |
+
<div class="text-gray-600">Type:</div>
|
| 164 |
+
<div id="detail-type">-</div>
|
| 165 |
+
<div class="text-gray-600">Size:</div>
|
| 166 |
+
<div id="detail-size">-</div>
|
| 167 |
+
<div class="text-gray-600">Created:</div>
|
| 168 |
+
<div id="detail-created">-</div>
|
| 169 |
+
<div class="text-gray-600">Modified:</div>
|
| 170 |
+
<div id="detail-modified">-</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
|
| 174 |
<!-- Status Bar -->
|
| 175 |
<div class="bg-gray-200 p-1 border-t border-gray-300 text-xs flex justify-between px-2">
|
| 176 |
<div>12 items</div>
|
| 177 |
<div>4.2 GB free of 120 GB</div>
|
| 178 |
</div>
|
| 179 |
+
</div>
|
| 180 |
</div>
|
|
|
|
| 181 |
<script>
|
| 182 |
feather.replace();
|
| 183 |
|
|
|
|
| 192 |
this.classList.add('bg-blue-100');
|
| 193 |
|
| 194 |
// Update address bar and search placeholder
|
| 195 |
+
const diskName = this.querySelector('div > div:first-child').textContent;
|
| 196 |
document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
|
| 197 |
document.querySelector('input[type="text"]').placeholder = `Search ${diskName}`;
|
| 198 |
});
|
| 199 |
});
|
| 200 |
+
|
| 201 |
+
// File/folder click handler
|
| 202 |
+
document.querySelectorAll('.flex.flex-col.items-center').forEach(item => {
|
| 203 |
+
item.addEventListener('click', function() {
|
| 204 |
+
const panel = document.getElementById('detailsPanel');
|
| 205 |
+
panel.classList.remove('hidden');
|
| 206 |
+
|
| 207 |
+
const name = this.querySelector('span').textContent;
|
| 208 |
+
const isFolder = this.querySelector('[data-feather="folder"]') !== null;
|
| 209 |
+
|
| 210 |
+
document.getElementById('detail-name').textContent = name;
|
| 211 |
+
document.getElementById('detail-type').textContent = isFolder ? 'Folder' : 'File';
|
| 212 |
+
document.getElementById('detail-size').textContent = isFolder ? '-' : (Math.random() * 10).toFixed(1) + ' MB';
|
| 213 |
+
|
| 214 |
+
const now = new Date();
|
| 215 |
+
document.getElementById('detail-created').textContent = now.toLocaleString();
|
| 216 |
+
document.getElementById('detail-modified').textContent = now.toLocaleString();
|
| 217 |
+
});
|
| 218 |
+
});
|
| 219 |
</script>
|
| 220 |
</body>
|
| 221 |
</html>
|