feat: Current directory and file numbers (#8781)

frontend/src/components/complex-table/index.vue

@@ -22,7 +22,7 @@
         </div>
 
         <div
-            class="complex-table__pagination flex items-center w-full"
+            class="complex-table__pagination flex items-center w-full sm:flex-row flex-col text-xs sm:text-sm"
             v-if="props.paginationConfig"
             :class="{ '!justify-between': slots.paginationLeft, '!justify-end': !slots.paginationLeft }"
         >

frontend/src/lang/modules/en.ts

@@ -1343,6 +1343,7 @@ const message = {
         taskRunning: 'Running',
     },
     file: {
+        fileDirNum: '{0} directories, {1} files,',
         currentDir: 'Directory',
         dir: 'Folder',
         fileName: 'File name',

frontend/src/lang/modules/ja.ts

@@ -1279,6 +1279,7 @@ const message = {
         errLog: 'エラーログ',
     },
     file: {
+        fileDirNum: '{0} 個のディレクトリ、{1} 個のファイル、',
         currentDir: '現在のディレクトリ',
         dir: 'フォルダ',
         upload: 'アップロード',

frontend/src/lang/modules/ko.ts

@@ -1266,6 +1266,7 @@ const message = {
         errLog: '에러 로그',
     },
     file: {
+        fileDirNum: '총 {0}개 디렉터리, {1}개 파일,',
         currentDir: '현재 디렉터리',
         dir: '폴더',
         upload: '업로드',

frontend/src/lang/modules/ms.ts

@@ -1321,6 +1321,7 @@ const message = {
         errLog: 'Log Ralat',
     },
     file: {
+        fileDirNum: '{0} direktori, {1} fail,',
         currentDir: 'Direktori Semasa',
         dir: 'Folder',
         upload: 'Muat naik',

frontend/src/lang/modules/pt-br.ts

@@ -1305,6 +1305,7 @@ const message = {
         errLog: 'Logs de erro',
     },
     file: {
+        fileDirNum: '{0} diretórios, {1} arquivos,',
         currentDir: 'Diretório atual',
         dir: 'Pasta',
         upload: 'Carregar',

frontend/src/lang/modules/ru.ts

@@ -1309,6 +1309,7 @@ const message = {
         errLog: 'Логи ошибок',
     },
     file: {
+        fileDirNum: '{0} каталогов, {1} файлов,',
         currentDir: 'Текущий каталог',
         dir: 'Папка',
         upload: 'Загрузить',

frontend/src/lang/modules/zh-Hant.ts

@@ -1271,6 +1271,7 @@ const message = {
         taskRunning: '運行中',
     },
     file: {
+        fileDirNum: '共 {0} 個目錄，{1} 個檔案，',
         currentDir: '當前目錄',
         dir: '文件夾',
         upload: '上傳',

frontend/src/lang/modules/zh.ts

@@ -1269,6 +1269,7 @@ const message = {
         taskRunning: '执行中',
     },
     file: {
+        fileDirNum: '共 {0} 个目录，{1} 个文件，',
         currentDir: '当前目录',
         dir: '文件夹',
         fileName: '文件名',

frontend/src/views/host/file-management/code-editor/index.vue

@@ -28,7 +28,7 @@
             </div>
         </template>
         <template #content>
-            <div ref="dialogForm" class="px-4 py-2">
+            <div ref="dialogForm" class="px-4 py-2 code-action">
                 <div class="flex justify-start items-center gap-x-4 card-action">
                     <el-text class="cursor-pointer" @click="handleReset">{{ $t('commons.button.reset') }}</el-text>
                     <el-text class="cursor-pointer ml-0" @click="saveContent()">
@@ -421,6 +421,20 @@ const config = reactive<EditorConfig>({
     minimap: false,
 });
 
+monaco.editor.defineTheme('vs', {
+    base: 'vs',
+    inherit: true,
+    rules: [{ token: '', foreground: 'FFFFFF' }],
+    colors: {
+        'editor.background': '#FFFFFF',
+        'minimap.background': '#f4f4f4',
+        'scrollbar.shadow': '#e1e1e1',
+        'scrollbarSlider.background': '#e1e1e1',
+        'scrollbarSlider.hoverBackground': '#cccccc',
+        'scrollbarSlider.activeBackground': '#bfbfbf',
+    },
+});
+
 const selectTab = ref();
 const fileTabs = ref([]);
 const removeTab = (targetPath: TabPaneName) => {
@@ -1098,6 +1112,9 @@ defineExpose({ acceptParams });
         padding-top: 0 !important;
     }
 }
+.code-action {
+    border-bottom: 1px solid var(--el-border-color-light) !important;
+}
 
 :deep(.el-tabs) {
     --el-tabs-header-height: 28px;
@@ -1110,12 +1127,12 @@ defineExpose({ acceptParams });
         line-height: 27px;
     }
     .el-tabs__nav {
-        border-right: 1px solid var(--el-border-color-light);
-        border-top: none;
-        border-left: none;
-        border-bottom: none;
-        border-radius: 0;
-        box-sizing: border-box;
+        border-right: 1px solid var(--el-border-color-light) !important;
+        border-top: none !important;
+        border-left: none !important;
+        border-bottom: none !important;
+        border-radius: 0 !important;
+        box-sizing: border-box !important;
     }
     .el-tabs__nav,
     .el-tabs__nav-next,
@@ -1123,10 +1140,16 @@ defineExpose({ acceptParams });
         height: 28px;
         line-height: 28px;
     }
-    .el-tabs__item.is-active {
-        color: var(--el-color-primary);
+    .el-tabs__item:hover {
+        color: var(--el-color-primary) !important;
         .el-dropdown {
-            color: var(--el-color-primary);
+            color: var(--el-color-primary) !important;
+        }
+    }
+    .el-tabs__item.is-active {
+        color: var(--el-color-primary) !important;
+        .el-dropdown {
+            color: var(--el-color-primary) !important;
         }
     }
 }

frontend/src/views/host/file-management/index.vue

@@ -227,6 +227,9 @@
                                 </el-table>
                             </div>
                         </el-popover>
+                        <el-button class="btn" @click="calculateSize(req.path)" :loading="disableBtn">
+                            {{ $t('file.calculate') }}
+                        </el-button>
                         <template v-if="hostMount.length == 1">
                             <el-button class="btn" @click.stop="jump(hostMount[0]?.path)">
                                 {{ hostMount[0]?.path }} ({{ $t('file.root') }}) {{ getFileSize(hostMount[0]?.free) }}
@@ -252,9 +255,6 @@
                                 </template>
                             </el-dropdown>
                         </template>
-                        <el-button class="btn" @click="calculateSize(req.path)" :disabled="disableBtn">
-                            {{ $t('file.calculate') }}
-                        </el-button>
                     </el-button-group>
 
                     <el-badge :value="processCount" class="btn" v-if="processCount > 0">
@@ -465,14 +465,22 @@
                         fix
                     />
                     <template #paginationLeft>
-                        <el-button type="primary" link small @click="getDirTotalSize(req.path)">
-                            <span v-if="dirTotalSize == -1">
+                        <div class="flex justify-start items-center">
+                            <el-text small>
+                                {{ $t('file.fileDirNum', [dirNum, fileNum]) }}
+                            </el-text>
+                            <el-text small>
+                                {{ $t('file.currentDir') + $t('file.size') + ' ' }}
+                            </el-text>
+                            <el-button type="primary" link small :loading="calculateBtn">
+                                <span v-if="dirTotalSize == -1" @click="getDirTotalSize(req.path)">
                                     {{ $t('file.calculate') }}
                                 </span>
                                 <span v-else>
-                                {{ $t('file.currentDir') + $t('file.size') + ': ' + getFileSize(dirTotalSize) }}
+                                    {{ getFileSize(dirTotalSize) }}
                                 </span>
                             </el-button>
+                        </div>
                     </template>
                 </ComplexTable>
             </template>
@@ -619,6 +627,9 @@ const hostMount = ref<Dashboard.DiskInfo[]>([]);
 let resizeObserver: ResizeObserver;
 const dirTotalSize = ref(-1);
 const disableBtn = ref(false);
+const calculateBtn = ref(false);
+const dirNum = ref(0);
+const fileNum = ref(0);
 
 const { searchableStatus, searchablePath, searchableInputRef, searchableInputBlur } = useSearchable(paths);
 
@@ -667,6 +678,8 @@ const searchFile = async () => {
 const handleSearchResult = (res: ResultData<File.File>) => {
     paginationConfig.total = res.data.itemTotal;
     data.value = res.data.items;
+    dirNum.value = data.value.filter((item) => item.isDir).length;
+    fileNum.value = data.value.filter((item) => !item.isDir).length;
     req.path = res.data.path;
 };
 
@@ -905,8 +918,10 @@ const getDirTotalSize = async (path: string) => {
     const req = {
         path: path,
     };
+    calculateBtn.value = true;
     const res = await computeDirSize(req);
     dirTotalSize.value = res.data.size;
+    calculateBtn.value = false;
 };
 
 const calculateSize = (path: string) => {