文件管理添加剩余空间显示

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

src/components/FileManageDialog.vue

@@ -13,7 +13,7 @@
   >
     <q-card
       class="overflow-hidden"
-      style="overflow-y: scroll; max-width: 70vw; max-height: 80vh"
+      style="overflow-y: scroll; max-width: 70vw; max-height: 85vh"
     >
       <q-card-section class="q-ma-none q-pa-sm">
         <div class="row">
@@ -174,11 +174,12 @@
       <q-separator />
 
       <q-card-section
-        style="max-height: 50vh; width: 70vw; max-height: 80vh"
+        style="width: 70vw; max-height: 85vh"
         class="scroll q-pa-none q-ma-none"
       >
         <q-table
-          style="height: 69vh"
+          style="height: 68vh"
+          class="q-mb-md"
           v-show="!uploading"
           :rows="files"
           :columns="columns"
@@ -260,6 +261,28 @@
               </div>
             </q-td>
           </template>
+          <template v-slot:pagination="scope">
+            <div class="col-2 text-h6">
+              {{ $t("file count") }}: {{ file_count }}
+            </div>
+            <div class="col-2 text-h6 q-mx-md">&nbsp;&nbsp;&nbsp;&nbsp;</div>
+            <div class="col-2 text-h6">
+              {{ $t("directoriy count") }}: {{ directory_count }}
+            </div>
+            <div v-if="free_space" class="col-2 text-h6 q-mx-md">
+              &nbsp;&nbsp;&nbsp;&nbsp;
+            </div>
+
+            <div class="col-2 text-h6" v-if="free_space">
+              {{ $t("free space") }}:
+              <span v-if="free_space / 1024 / 1024 / 1024 > 0">
+                {{ (free_space / 1024 / 1024 / 1024).toFixed(1) }}GB
+              </span>
+              <span v-else>
+                {{ (free_space / 1024 / 1024).toFixed(1) }}MB
+              </span>
+            </div>
+          </template>
         </q-table>
         <div v-show="uploading" class="row q-ma-sm">
           <q-space />
@@ -460,6 +483,10 @@ export default defineComponent({
     let resolve_value: any = null;
     const filters: Ref<string[]> = ref([]);
 
+    const free_space = ref(0);
+    const file_count = ref(0);
+    const directory_count = ref(0);
+
     const clipboard = reactive(new _ClipboardType()); // 剪切板全路径
 
     const disk_options = ref([
@@ -550,20 +577,47 @@ export default defineComponent({
     const _show_files = (response: any) => {
       if (response) {
         if (response.status == 200) {
-          const file_entitys = response.data as FileEntity[];
+          interface IRsponseData {
+            files: FileEntity[];
+            free: number;
+          }
+          let file_entitys: FileEntity[] = [];
+          let free = 0;
+
+          if (Array.isArray(response.data)) {
+            file_entitys = response.data as FileEntity[];
+          } else {
+            const resposne_data = response.data as IRsponseData;
+            file_entitys = resposne_data.files;
+            free = resposne_data.free;
+          }
+          free_space.value = free;
           if (Array.isArray(file_entitys)) {
+            directory_count.value = 0;
+            file_count.value = 0;
             if (filters.value.length == 0) {
               files.value = file_entitys;
+              for (const item of file_entitys) {
+                if (item) {
+                  if (item.is_directory) {
+                    ++directory_count.value;
+                  } else {
+                    ++file_count.value;
+                  }
+                }
+              }
             } else {
               files.value = [];
               for (const item of file_entitys) {
                 if (item) {
                   if (item.is_directory) {
                     files.value.push(item);
+                    ++directory_count.value;
                   } else {
                     for (const filter of filters.value) {
                       if (item.name.endsWith(filter)) {
                         files.value.push(item);
+                        ++file_count.value;
                         break;
                       }
                     }
@@ -711,6 +765,9 @@ export default defineComponent({
       path,
       prev_path,
       paths,
+      free_space,
+      file_count,
+      directory_count,
       target_dom,
       upload_url,
       uploader,

src/i18n/zh-CN/index.ts

@@ -434,4 +434,7 @@ export default {
     "请使用粘贴命令粘贴到其它目录",
   _cut2: "移动",
   "cut to colipboard success": "成功剪切到剪切板",
+  "file count": "文件数量",
+  "directoriy count": "文件夹数量",
+  "free space": "剩余空间",
 };