在文件管理首页显示容量

*点！按钮显示文字版容量状况
（我实在是找不到一块地方放容量显示）

README.md

@@ -64,6 +64,8 @@
 
 部分安全强化(ACL、RBAC)
 
+首页容量显示(点！按钮)
+
 计划实现的功能
 -------------------
 
@@ -71,6 +73,8 @@
 
 文件存储加密
 
+passwordless
+
 和管理员相关的功能
 
 忘记密码

controllers/HomeController.php

@@ -6,6 +6,7 @@ use app\models\NewFolderForm;
 use app\models\RenameForm;
 use app\models\UploadForm;
 use app\models\ZipForm;
+use app\utils\FileSizeHelper;
 use app\utils\FileTypeDetector;
 use Exception;
 use RecursiveDirectoryIterator;
@@ -75,6 +76,7 @@ class HomeController extends Controller
      */
     public function actionIndex($directory = null): Response|string
     {
+        $model = Yii::$app->user->identity;
 //        if (Yii::$app->user->isGuest) {
 //            Yii::$app->session->setFlash('error','请先登录');
 //            return $this->redirect(Yii::$app->user->loginUrl);
@@ -101,10 +103,16 @@ class HomeController extends Controller
             $rawType = is_file($absolutePath) ? mime_content_type($absolutePath) : null;
             $directoryContents[$key] = ['name' => $item, 'type' => $type, 'lastModified' => $lastModified, 'size' => $size, 'rawType' => $rawType];
         }
+        $usedSpace = FileSizeHelper::getDirectorySize(Yii::getAlias(Yii::$app->params['dataDirectory']) . '/' . Yii::$app->user->id);
+        $vaultUsedSpace = 0;  // 保险箱已用空间，暂时为0
+        $storageLimit = $model->storage_limit;
         return $this->render('index', [
             'directoryContents' => $directoryContents,
             'parentDirectory' => $parentDirectory,
             'directory' => $directory,  // 将$directory传递给视图
+            'usedSpace' => $usedSpace, // B
+            'vaultUsedSpace' => $vaultUsedSpace, // B
+            'storageLimit' => $storageLimit, // MB
         ]);
     }
 

views/home/index.php

@@ -3,6 +3,9 @@
 /* @var $this yii\web\View */
 /* @var $directoryContents array 文件和文件夹内容数组 */
 /* @var $parentDirectory string 父目录 */
+/* @var $usedSpace int */
+/* @var $vaultUsedSpace int */
+/* @var $storageLimit int */
 
 /* @var $directory string 当前路径 */
 
@@ -14,6 +17,7 @@ use app\models\NewFolderForm;
 use app\models\RenameForm;
 use app\models\Share;
 use app\models\ZipForm;
+use app\utils\FileSizeHelper;
 use yii\bootstrap5\ActiveForm;
 use yii\bootstrap5\Html;
 use app\assets\FontAwesomeAsset;
@@ -25,6 +29,13 @@ use yii\web\View;
 
 $this->title = '文件管理';
 $this->params['breadcrumbs'][] = $this->title;
+$totalUsed_F = FileSizeHelper::formatBytes($usedSpace + $vaultUsedSpace); //总已用空间 格式化文本
+$storageLimit_F = FileSizeHelper::formatMegaBytes($storageLimit); //存储限制 格式化文本
+$is_unlimited = ($storageLimit === -1); //检查是否为无限制容量
+$usedPercent = $is_unlimited ? 0 : round($usedSpace / ($storageLimit * 1024 * 1024) * 100); //网盘已用百分比
+$vaultUsedPercent = $is_unlimited ? 0 : round($vaultUsedSpace / ($storageLimit * 1024 * 1024) * 100); //保险箱已用百分比
+$totalUsedPercent = min(($usedPercent + $vaultUsedPercent), 100); //总已用百分比
+
 FontAwesomeAsset::register($this);
 JqueryAsset::register($this);
 ViewerJsAsset::register($this);
@@ -65,16 +76,12 @@ $this->registerCssFile('@web/css/home_style.css');
                     <li><?= Html::button('上传文件', ['class' => 'dropdown-item file-upload-btn']) ?></li>
                     <!--                上传文件功能将会覆盖已存在的同名文件，这点请注意-->
                     <li><?= Html::button('上传文件夹', ['class' => 'dropdown-item folder-upload-btn']) ?></li>
-                    <!--                上传文件夹功能不支持IOS设备以及Firefox for Android，上传时会跳过空文件夹-->
-                    <li>
-                        <hr class="dropdown-divider">
-                    </li>
-                    <li>
-                        <!--尚未实现-->
-                        <?= Html::button('离线下载', ['class' => 'dropdown-item offline-download-btn', 'disabled' => true]) ?>
-                    </li>
                 </ul>
             </div>
+            <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="容量使用情况"
+                    data-bs-placement="bottom" data-bs-content="已用:<?= $totalUsed_F ?>/ <?= $storageLimit_F ?>"><i
+                        class="fa-solid fa-info"></i>
+            </button>
         </div>
     </div>
 

web/js/home_script.js

@@ -669,3 +669,5 @@ $(document).on('click', '.create-collection-btn', function () {
     $('#collectionModal').modal('show');
 });
 
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))