Feat: optimize table rendering details

frontend/src/services/apis/index.ts

@@ -246,3 +246,23 @@ export const getFileList = useDefineApi<
   url: "/api/files/list",
   method: "GET"
 });
+
+// 获取文件状态
+export const getFileStatus = useDefineApi<
+  {
+    params: {
+      uuid: string;
+      remote_uuid: string;
+    };
+  },
+  {
+    instanceFileTask: number;
+    globalFileTask: number;
+    platform: string;
+    isGlobalInstance: boolean;
+    dist: string[];
+  }
+>({
+  url: "/api/files/status",
+  method: "GET"
+});

frontend/src/tools/fileSize.ts

@@ -0,0 +1,8 @@
+export const convertFileSize = (e: string) =>
+  `${(parseFloat(e) / Math.pow(1024, Math.floor(Math.log(parseFloat(e)) / Math.log(1024)))).toFixed(
+    2
+  )} ${
+    ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][
+      Math.floor(Math.log(parseFloat(e)) / Math.log(1024))
+    ]
+  }`;

frontend/src/widgets/instance/FileManager.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import CardPanel from "@/components/CardPanel.vue";
 import type { LayoutCard } from "@/types/index";
-import { ref, computed, reactive, onMounted } from "vue";
+import { ref, computed, reactive, onMounted, watch } from "vue";
 import { t } from "@/lang/i18n";
 // import type {table} from 'ant-design-vue'
+import { convertFileSize } from "@/tools/fileSize";
 import dayjs from "dayjs";
 import { DownOutlined, SearchOutlined } from "@ant-design/icons-vue";
 import BetweenMenus from "@/components/BetweenMenus.vue";
 import { useScreen } from "@/hooks/useScreen";
 import { arrayFilter } from "@/tools/array";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
-import { getFileList as getFileListApi } from "@/services/apis";
+import { getFileList as getFileListApi, getFileStatus as getFileStatusApi } from "@/services/apis";
+import { throttle } from "lodash";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -29,6 +31,14 @@ const operationForm = ref({
   total: 0
 });
 
+const fileStatus = ref<{
+  instanceFileTask: number;
+  globalFileTask: number;
+  platform: string;
+  isGlobalInstance: boolean;
+  dist: string[];
+}>();
+
 const dataSource = ref<
   {
     name: string;
@@ -63,6 +73,8 @@ const columns = computed(() => {
       title: t("大小"),
       dataIndex: "size",
       key: "size",
+      customRender: (e: { text: number }) =>
+        e.text == 0 ? "--" : convertFileSize(e.text.toString()),
       minWidth: "200px",
       condition: () => !screen.isPhone.value
     },
@@ -91,7 +103,7 @@ const columns = computed(() => {
       dataIndex: "mode",
       key: "mode",
       minWidth: "200px",
-      condition: () => !screen.isPhone.value
+      condition: () => !screen.isPhone.value && fileStatus.value?.platform !== "win32"
     },
     {
       align: "center",
@@ -139,14 +151,38 @@ breadcrumbs.push({
   disabled: false
 });
 
+watch(
+  () => operationForm.value.name,
+  throttle(() => {
+    getFileList();
+  }, 1000)
+);
+
 const handleTableChange = (e: { current: number; pageSize: number }) => {
   operationForm.value.current = e.current;
   operationForm.value.pageSize = e.pageSize;
   getFileList();
 };
 
+const { execute } = getFileStatusApi();
+
+setInterval(async () => {
+  await getFileStatus();
+}, 3000);
+
+const getFileStatus = async () => {
+  const res = await execute({
+    params: {
+      remote_uuid: daemonId || "",
+      uuid: instanceId || ""
+    }
+  });
+  fileStatus.value = res.value;
+};
+
 onMounted(() => {
   getFileList();
+  getFileStatus();
 });
 </script>
 
@@ -207,6 +243,9 @@ onMounted(() => {
               :row-selection="rowSelection"
               :data-source="dataSource"
               :columns="columns"
+              :scroll="{
+                x: 'max-content'
+              }"
               :pagination="{
                 current: operationForm.current,
                 pageSize: operationForm.pageSize,