✨ 动态更新容量进度条

resources/js/app.js

@@ -15,6 +15,25 @@ window.utils = {
 
         return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
     },
+    /**
+     * 更新进度条
+     * @param size 增加的字节(kb)
+     * @param total 总共有多少字节(kb)
+     */
+    setCapacityProgress(size, total) {
+        let $progress = $('#capacity-progress');
+        if ($progress.length) {
+            let used = parseFloat($progress.find('progress').val()) + size;
+            $progress.find('progress').val(used);
+            $progress.find('span.used').text(utils.formatSize(used * 1024));
+
+            if (total !== undefined && typeof total === 'number') {
+                total = parseFloat($progress.find('progress').attr('max')) + total;
+                $progress.find('progress').attr('max', total);
+                $progress.find('span.total').text(utils.formatSize(total * 1024));
+            }
+        }
+    },
     guid() {
         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
             let r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);

resources/views/components/upload.blade.php

@@ -197,6 +197,7 @@
                         $('#links [data-tab="' + key + '"]').append('<p class="whitespace-nowrap select-all mt-1 bg-gray-50 hover:bg-gray-200 text-gray-600 rounded px-2 py-1 cursor-pointer overflow-scroll scrollbar-none">' + links[key].toString() + '</p>')
                     }
                     $links.show();
+                    utils.setCapacityProgress(response.data.size);
                 } else {
                     setStatus(data, UPLOAD_ERROR, "上传失败, " + response.message);
                     // 重新显示上传按钮

resources/views/images.blade.php

@@ -658,7 +658,12 @@
                                 data: selected,
                             }).then(response => {
                                 if (response.data.status) {
-                                    ds.getSelection().map(item => $(item).remove());
+                                    let size = 0;
+                                    ds.getSelection().map(item => {
+                                        size += $(item).data('json').size;
+                                        $(item).remove();
+                                    });
+                                    utils.setCapacityProgress(-size);
                                     $headerTitle.text('我的图片');
                                     $photos.justifiedGallery(gridConfigs).removeClass('reset');
                                     toastr.success(response.data.message);

resources/views/layouts/sidebar.blade.php

@@ -71,10 +71,14 @@
             </div>
         </div>
 
-        <div class="flex flex-col space-y-2 mb-5 px-5 w-full mt-10">
+        <div id="capacity-progress" class="flex flex-col space-y-2 mb-5 px-5 w-full mt-10">
             <p class="text-gray-700 text-sm">容量使用</p>
-            <progress class="w-full h-1.5 bg-gary-300" value="90" max="100"></progress>
-            <p class="text-gray-700 text-sm truncate" title="0.00 Bytes / 1.00 GB">0.00 Bytes / 1.00 GB</p>
+            <progress class="w-full h-1.5 bg-gary-300" value="{{ Auth::user()->images->sum('size') }}" max="{{ Auth::user()->capacity }}"></progress>
+            <p class="text-gray-700 text-sm truncate">
+                <span class="used">{{ \App\Utils::formatSize(Auth::user()->images->sum('size') * 1024) }}</span>
+                /
+                <span class="total">{{ \App\Utils::formatSize(Auth::user()->capacity * 1024) }}</span>
+            </p>
         </div>
     </div>
 </nav>