磁盘图标下方增加容量进度条样式

index.html

@@ -64,23 +64,47 @@
             </div>
             <div class="flex-1 overflow-y-auto">
                 <div class="p-2">
-                    <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
-                        <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
-                        <span>Local Disk (C:)</span>
+                    <div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
+                        <div class="flex items-center">
+                            <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
+                            <span>Local Disk (C:)</span>
+                        </div>
+                        <div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+                            <div class="h-full bg-blue-500" style="width: 65%"></div>
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">82.4 GB / 120 GB</div>
                     </div>
-                    <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
-                        <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
-                        <span>Data (D:)</span>
+                    <div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
+                        <div class="flex items-center">
+                            <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
+                            <span>Data (D:)</span>
+                        </div>
+                        <div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+                            <div class="h-full bg-green-500" style="width: 32%"></div>
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">128 GB / 400 GB</div>
                     </div>
-                    <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
-                        <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
-                        <span>Backup (E:)</span>
+                    <div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
+                        <div class="flex items-center">
+                            <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
+                            <span>Backup (E:)</span>
+                        </div>
+                        <div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+                            <div class="h-full bg-yellow-500" style="width: 78%"></div>
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">780 GB / 1 TB</div>
                     </div>
-                    <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
-                        <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
-                        <span>External (F:)</span>
+                    <div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
+                        <div class="flex items-center">
+                            <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
+                            <span>External (F:)</span>
+                        </div>
+                        <div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+                            <div class="h-full bg-red-500" style="width: 15%"></div>
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">30 GB / 200 GB</div>
                     </div>
-                </div>
+</div>
             </div>
         </div>
 
@@ -180,20 +204,19 @@
     </div>
     <script>
         feather.replace();
-        
         // Simulate disk selection
-        document.querySelectorAll('.flex.items-center.px-2.py-1').forEach(item => {
-            item.addEventListener('click', function() {
+        document.querySelectorAll('div.px-2.py-1').forEach(item => {
+item.addEventListener('click', function() {
                 // Remove active class from all
-                document.querySelectorAll('.flex.items-center.px-2.py-1').forEach(i => {
-                    i.classList.remove('bg-blue-100');
+                document.querySelectorAll('div.px-2.py-1').forEach(i => {
+i.classList.remove('bg-blue-100');
                 });
                 // Add to clicked
                 this.classList.add('bg-blue-100');
                 
                 // Update address bar and search placeholder
-                const diskName = this.querySelector('div > div:first-child').textContent;
-                document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
+                const diskName = this.querySelector('div > span').textContent;
+document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
                 document.querySelector('input[type="text"]').placeholder = `Search ${diskName}`;
             });
         });