Feat: get file list

frontend/components.d.ts

@@ -48,7 +48,6 @@ declare module 'vue' {
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
     CopyButton: typeof import('./src/components/CopyButton.vue')['default']
     DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
-    ErrorCard: typeof import('./src/components/ErrorCard.vue')['default']
     FadeUpAnimation: typeof import('./src/components/FadeUpAnimation.vue')['default']
     IconBtn: typeof import('./src/components/IconBtn.vue')['default']
     InnerCard: typeof import('./src/components/InnerCard.vue')['default']

frontend/src/services/apis/index.ts

@@ -8,12 +8,12 @@ import type { IPanelOverviewResponse } from "../../../../common/global";
 // 用户登录
 export const loginUser = useDefineApi<
   | {
-  // Post
+      // Post
-  data: {
+      data: {
-    username: string;
+        username: string;
-    password: string;
+        password: string;
-  };
+      };
-}
+    }
   | undefined,
   // Response
   {
@@ -41,7 +41,9 @@ export const userInfoApiAdvanced = useDefineApi<
       uuid: string;
       advanced: boolean;
     };
-  }, BaseUserInfo>({
+  },
+  BaseUserInfo
+>({
   url: "/api/auth/"
 });
 
@@ -78,8 +80,8 @@ export const settingInfo = useDefineApi<any, Settings>({
 // 提交设置信息
 export const setSettingInfo = useDefineApi<
   | {
-  data: Settings;
+      data: Settings;
-}
+    }
   | undefined,
   string
 >({
@@ -135,8 +137,8 @@ export const updateUserInstance = useDefineApi<
     data: {
       config: {
         instances: UserInstance[];
-      }
+      };
-      uuid: string
+      uuid: string;
     };
   },
   boolean
@@ -213,3 +215,34 @@ export const connectNode = useDefineApi<
   url: "/api/service/link_remote_service",
   method: "GET"
 });
+
+// 文件管理
+// 获取文件列表
+export const getFileList = useDefineApi<
+  {
+    params: {
+      remote_uuid: string;
+      uuid: string;
+      target: string;
+      page: number;
+      page_size: number;
+      file_name: string;
+    };
+  },
+  {
+    items: {
+      name: string;
+      size: number;
+      time: string;
+      type: number;
+      mode: number;
+    }[];
+    page: number;
+    pageSize: number;
+    total: number;
+    absolutePath: string;
+  }
+>({
+  url: "/api/files/list",
+  method: "GET"
+});

frontend/src/widgets/instance/FileManager.vue

@@ -1,70 +1,66 @@
 <script setup lang="ts">
 import CardPanel from "@/components/CardPanel.vue";
 import type { LayoutCard } from "@/types/index";
-import { ref, computed, reactive } from "vue";
+import { ref, computed, reactive, onMounted } from "vue";
 import { t } from "@/lang/i18n";
+// import type {table} from 'ant-design-vue'
+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";
 
-defineProps<{
+const props = defineProps<{
   card: LayoutCard;
 }>();
 
+const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
+const instanceId = getMetaOrRouteValue("instanceId");
+const daemonId = getMetaOrRouteValue("daemonId");
+
 const screen = useScreen();
 
 const operationForm = ref({
-  name: ""
+  name: "",
+  current: 1,
+  pageSize: 10,
+  total: 0
 });
 
-const dataSource = [
+const dataSource = ref<
   {
-    key: "1",
+    name: string;
-    name: "测试文件名1",
+    type: number;
-    size: "1824 MB",
+    size: number;
-    permission: 777,
+    time: string;
-    modifyTime: new Date().getTime(),
+    mode: number;
-    createTime: new Date().getTime()
+  }[]
-  },
+>();
-  {
-    key: "1",
-    name: "测试文件名2",
-    size: "1824 MB",
-    permission: 777,
-    modifyTime: new Date().getTime(),
-    createTime: new Date().getTime()
-  },
-  {
-    key: "1",
-    name: "测试文件名3",
-    size: "1824 MB",
-    permission: 777,
-    modifyTime: new Date().getTime(),
-    createTime: new Date().getTime()
-  },
-  {
-    key: "1",
-    name: "测试文件名4",
-    size: "1824 MB",
-    permission: 777,
-    modifyTime: new Date().getTime(),
-    createTime: new Date().getTime()
-  }
-];
 
 const columns = computed(() => {
   return arrayFilter([
     {
       align: "center",
-      title: "文件名",
+      title: t("文件名"),
       dataIndex: "name",
       key: "name",
       minWidth: "200px"
     },
     {
       align: "center",
-      title: "大小",
+      title: t("文件类型"),
+      dataIndex: "type",
+      key: "type",
+      customRender: (e: { text: number }) => {
+        return e.text == 1 ? t("文件") : t("目录");
+      },
+      minWidth: "200px"
+    },
+    {
+      align: "center",
+      title: t("大小"),
       dataIndex: "size",
       key: "size",
       minWidth: "200px",
@@ -72,37 +68,57 @@ const columns = computed(() => {
     },
     {
       align: "center",
-      title: "修改时间",
+      title: t("修改时间"),
-      dataIndex: "modifyTime",
+      dataIndex: "time",
-      key: "modifyTime",
+      key: "time",
+      customRender: (e: { text: string }) => {
+        return dayjs(e.text).format("YYYY-MM-DD HH:mm:ss");
+      },
+      minWidth: "200px",
+      condition: () => !screen.isPhone.value
+    },
+    // {
+    //   align: "center",
+    //   title: t("创建时间"),
+    //   dataIndex: "createTime",
+    //   key: "createTime",
+    //   minWidth: "200px",
+    //   condition: () => !screen.isPhone.value
+    // },
+    {
+      align: "center",
+      title: t("权限"),
+      dataIndex: "mode",
+      key: "mode",
       minWidth: "200px",
       condition: () => !screen.isPhone.value
     },
     {
       align: "center",
-      title: "创建时间",
+      title: t("操作"),
-      dataIndex: "createTime",
+      dataIndex: "action",
-      key: "createTime",
-      minWidth: "200px",
-      condition: () => !screen.isPhone.value
-    },
-    {
-      align: "center",
-      title: "权限",
-      dataIndex: "permission",
-      key: "permission",
-      minWidth: "200px",
-      condition: () => !screen.isPhone.value
-    },
-    {
-      align: "center",
-      title: "TXT_CODE_fe731dfc",
       key: "action",
       minWidth: "200px"
     }
   ]);
 });
 
+const getFileList = async () => {
+  const { execute } = getFileListApi();
+  const res = await execute({
+    params: {
+      remote_uuid: daemonId || "",
+      uuid: instanceId || "",
+      page: operationForm.value.current - 1,
+      page_size: operationForm.value.pageSize,
+      file_name: operationForm.value.name,
+      target: encodeURI(breadcrumbs[breadcrumbs.length - 1].path)
+    }
+  });
+  dataSource.value = res.value?.items || [];
+  operationForm.value.total = res.value?.total || 0;
+};
+
 const rowSelection = () => {};
 
 const handleChangeDir = (dir: string) => {
@@ -122,15 +138,15 @@ breadcrumbs.push({
   name: "/",
   disabled: false
 });
-breadcrumbs.push({
+
-  path: "/workspace",
+const handleTableChange = (e: { current: number; pageSize: number }) => {
-  name: "workspace",
+  operationForm.value.current = e.current;
-  disabled: false
+  operationForm.value.pageSize = e.pageSize;
-});
+  getFileList();
-breadcrumbs.push({
+};
-  path: "/workspace/test files",
+
-  name: "test files",
+onMounted(() => {
-  disabled: false
+  getFileList();
 });
 </script>
 
@@ -187,7 +203,19 @@ breadcrumbs.push({
                 </a-breadcrumb-item>
               </a-breadcrumb>
             </div>
-            <a-table :row-selection="rowSelection" :data-source="dataSource" :columns="columns">
+            <a-table
+              :row-selection="rowSelection"
+              :data-source="dataSource"
+              :columns="columns"
+              :pagination="{
+                current: operationForm.current,
+                pageSize: operationForm.pageSize,
+                total: operationForm.total,
+                hideOnSinglePage: false,
+                showSizeChanger: true
+              }"
+              @change="handleTableChange($event)"
+            >
               <!-- eslint-disable-next-line vue/no-unused-vars -->
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'action'">