From c371d294a75bedbb6be511e7954af8f7f306b759 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Sun, 27 Apr 2025 13:53:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(vben5):=20=E5=A2=9E=E5=8A=A0Oss?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/vben5/apps/app-antd/package.json         |   1 +
 .../app-antd/src/locales/langs/en-US/abp.json |   4 +
 .../app-antd/src/locales/langs/zh-CN/abp.json |   4 +
 .../src/views/oss/containers/index.vue        |  15 ++
 apps/vben5/packages/@abp/oss/package.json     |  39 ++++
 apps/vben5/packages/@abp/oss/src/api/index.ts |   1 +
 .../@abp/oss/src/api/useContainesApi.ts       |  46 +++++
 .../components/containers/ContainerModal.vue  |  55 +++++
 .../components/containers/ContainerTable.vue  | 190 ++++++++++++++++++
 .../packages/@abp/oss/src/components/index.ts |   1 +
 apps/vben5/packages/@abp/oss/src/index.ts     |   3 +
 .../packages/@abp/oss/src/types/containes.ts  |  38 ++++
 .../packages/@abp/oss/src/types/index.ts      |   1 +
 apps/vben5/packages/@abp/oss/tsconfig.json    |   6 +
 14 files changed, 404 insertions(+)
 create mode 100644 apps/vben5/apps/app-antd/src/views/oss/containers/index.vue
 create mode 100644 apps/vben5/packages/@abp/oss/package.json
 create mode 100644 apps/vben5/packages/@abp/oss/src/api/index.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/containers/ContainerModal.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/containers/ContainerTable.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/index.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/index.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/types/containes.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/types/index.ts
 create mode 100644 apps/vben5/packages/@abp/oss/tsconfig.json

diff --git a/apps/vben5/apps/app-antd/package.json b/apps/vben5/apps/app-antd/package.json
index 0d22aff5b..7a5e41b08 100644
--- a/apps/vben5/apps/app-antd/package.json
+++ b/apps/vben5/apps/app-antd/package.json
@@ -36,6 +36,7 @@
     "@abp/localization": "workspace:*",
     "@abp/notifications": "workspace:*",
     "@abp/openiddict": "workspace:*",
+    "@abp/oss": "workspace:*",
     "@abp/permissions": "workspace:*",
     "@abp/platform": "workspace:*",
     "@abp/request": "workspace:*",
diff --git a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
index e7becde31..bf18b9eae 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
@@ -129,5 +129,9 @@
   "textTemplating": {
     "title": "Text Templating",
     "definitions": "Definitions"
+  },
+  "oss": {
+    "title": "Object storage",
+    "containers": "Containers"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
index e2ee0db57..8cdbf8324 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
@@ -129,5 +129,9 @@
   "textTemplating": {
     "title": "文本模板",
     "definitions": "模板定义"
+  },
+  "oss": {
+    "title": "对象存储",
+    "containers": "容器管理"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/views/oss/containers/index.vue b/apps/vben5/apps/app-antd/src/views/oss/containers/index.vue
new file mode 100644
index 000000000..f9dbfea0d
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/oss/containers/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { ContainerTable } from '@abp/oss';
+
+defineOptions({
+  name: 'Vben5OssContainers',
+});
+</script>
+
+<template>
+  <Page>
+    <ContainerTable />
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/oss/package.json b/apps/vben5/packages/@abp/oss/package.json
new file mode 100644
index 000000000..9bf32f938
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@abp/oss",
+  "version": "9.0.4",
+  "homepage": "https://github.com/colinin/abp-next-admin",
+  "bugs": "https://github.com/colinin/abp-next-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/colinin/abp-next-admin.git",
+    "directory": "packages/@abp/oss"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@abp/components": "workspace:*",
+    "@abp/core": "workspace:*",
+    "@abp/features": "workspace:*",
+    "@abp/request": "workspace:*",
+    "@abp/ui": "workspace:*",
+    "@ant-design/icons-vue": "catalog:",
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "ant-design-vue": "catalog:",
+    "vue": "catalog:*",
+    "vxe-table": "catalog:"
+  }
+}
diff --git a/apps/vben5/packages/@abp/oss/src/api/index.ts b/apps/vben5/packages/@abp/oss/src/api/index.ts
new file mode 100644
index 000000000..cba485d84
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/api/index.ts
@@ -0,0 +1 @@
+export { useContainesApi } from './useContainesApi';
diff --git a/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts b/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts
new file mode 100644
index 000000000..6043b7435
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts
@@ -0,0 +1,46 @@
+import type {
+  GetOssContainersInput,
+  OssContainerDto,
+  OssContainersResultDto,
+} from '../types/containes';
+
+import { useRequest } from '@abp/request';
+
+export function useContainesApi() {
+  const { cancel, request } = useRequest();
+
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/oss-management/containes/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  function getApi(name: string): Promise<OssContainerDto> {
+    return request<OssContainerDto>(`/api/oss-management/containes/${name}`, {
+      method: 'GET',
+    });
+  }
+
+  function getListApi(
+    input?: GetOssContainersInput,
+  ): Promise<OssContainersResultDto> {
+    return request<OssContainersResultDto>(`/api/oss-management/containes`, {
+      method: 'GET',
+      params: input,
+    });
+  }
+
+  function createApi(name: string): Promise<OssContainerDto> {
+    return request<OssContainerDto>(`/api/oss-management/containes/${name}`, {
+      method: 'POST',
+    });
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/oss/src/components/containers/ContainerModal.vue b/apps/vben5/packages/@abp/oss/src/components/containers/ContainerModal.vue
new file mode 100644
index 000000000..1f6abca21
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/containers/ContainerModal.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { OssContainerDto } from '../../types';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useContainesApi } from '../../api';
+
+const emits = defineEmits<{
+  (event: 'change', data: OssContainerDto): void;
+}>();
+
+const { cancel, createApi } = useContainesApi();
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('AbpOssManagement.DisplayName:Name'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  onCancel: cancel,
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+});
+
+async function onSubmit(values: Record<string, any>) {
+  try {
+    modalApi.setState({ submitting: true });
+    const dto = await createApi(values.name);
+    message.success($t('AbpUi.SavedSuccessfully'));
+    emits('change', dto);
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal :title="$t('AbpOssManagement.Containers:Create')">
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/oss/src/components/containers/ContainerTable.vue b/apps/vben5/packages/@abp/oss/src/components/containers/ContainerTable.vue
new file mode 100644
index 000000000..ebef3e3f6
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/containers/ContainerTable.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { OssContainerDto } from '../../types/containes';
+
+import { defineAsyncComponent, h, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { formatToDateTime } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useContainesApi } from '../../api/useContainesApi';
+
+defineOptions({
+  name: 'ContainerTable',
+});
+
+const { cancel, deleteApi, getListApi } = useContainesApi();
+
+const selectedKeys = ref<string[]>([]);
+
+const formOptions: VbenFormProps = {
+  collapsed: true,
+  collapsedRows: 2,
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+      },
+      fieldName: 'filter',
+      formItemClass: 'col-span-3 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<OssContainerDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpOssManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'creationDate',
+      formatter({ cellValue }) {
+        return cellValue ? formatToDateTime(cellValue) : '';
+      },
+      minWidth: 120,
+      title: $t('AbpOssManagement.DisplayName:CreationDate'),
+    },
+    {
+      align: 'left',
+      field: 'lastModifiedDate',
+      formatter({ cellValue }) {
+        return cellValue ? formatToDateTime(cellValue) : '';
+      },
+      minWidth: 120,
+      title: $t('AbpOssManagement.DisplayName:LastModifiedDate'),
+    },
+    {
+      align: 'left',
+      field: 'size',
+      minWidth: 150,
+      title: $t('AbpOssManagement.DisplayName:Size'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 150,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        const res = await getListApi({
+          maxResultCount: page.pageSize,
+          skipCount: (page.currentPage - 1) * page.pageSize,
+          ...formValues,
+        });
+        return {
+          totalCount: res.maxKeys,
+          items: res.containers,
+        };
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    // import: true,
+    refresh: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<OssContainerDto> = {
+  checkboxAll: (params) => {
+    selectedKeys.value = params.records.map((record) => record.name);
+  },
+  checkboxChange: (params) => {
+    selectedKeys.value = params.records.map((record) => record.name);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [ContainerModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./ContainerModal.vue'),
+  ),
+});
+
+function onCreate() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+function onDelete(row: OssContainerDto) {
+  Modal.confirm({
+    centered: true,
+    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name]),
+    onCancel: () => {
+      cancel();
+    },
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      await gridApi.query();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+</script>
+
+<template>
+  <Grid :table-title="$t('AbpOssManagement.Containers')">
+    <template #toolbar-tools>
+      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+        {{ $t('AbpOssManagement.Containers:Create') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Button
+          :icon="h(DeleteOutlined)"
+          danger
+          block
+          type="link"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+      </div>
+    </template>
+  </Grid>
+  <ContainerModal @change="() => gridApi.query()" />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/oss/src/components/index.ts b/apps/vben5/packages/@abp/oss/src/components/index.ts
new file mode 100644
index 000000000..8f45d9807
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/index.ts
@@ -0,0 +1 @@
+export { default as ContainerTable } from './containers/ContainerTable.vue';
diff --git a/apps/vben5/packages/@abp/oss/src/index.ts b/apps/vben5/packages/@abp/oss/src/index.ts
new file mode 100644
index 000000000..314dad0cd
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/index.ts
@@ -0,0 +1,3 @@
+export * from './api';
+export * from './components';
+export * from './types';
diff --git a/apps/vben5/packages/@abp/oss/src/types/containes.ts b/apps/vben5/packages/@abp/oss/src/types/containes.ts
new file mode 100644
index 000000000..d882b7d72
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/types/containes.ts
@@ -0,0 +1,38 @@
+import type { PagedAndSortedResultRequestDto } from '@abp/core';
+
+interface OssContainerDto {
+  creationDate: Date;
+  lastModifiedDate?: Date;
+  metadata: Record<string, string>;
+  name: string;
+  size: number;
+}
+
+interface OssContainersResultDto {
+  containers: OssContainerDto[];
+  marker?: string;
+  maxKeys?: number;
+  nextMarker?: string;
+  prefix?: string;
+}
+
+interface GetOssContainersInput extends PagedAndSortedResultRequestDto {
+  marker?: string;
+  prefix?: string;
+}
+
+interface GetOssObjectsInput extends PagedAndSortedResultRequestDto {
+  bucket?: string;
+  delimiter?: string;
+  encodingType?: string;
+  marker?: string;
+  mD5?: string;
+  prefix?: string;
+}
+
+export type {
+  GetOssContainersInput,
+  GetOssObjectsInput,
+  OssContainerDto,
+  OssContainersResultDto,
+};
diff --git a/apps/vben5/packages/@abp/oss/src/types/index.ts b/apps/vben5/packages/@abp/oss/src/types/index.ts
new file mode 100644
index 000000000..6100a918d
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/types/index.ts
@@ -0,0 +1 @@
+export * from './containes';
diff --git a/apps/vben5/packages/@abp/oss/tsconfig.json b/apps/vben5/packages/@abp/oss/tsconfig.json
new file mode 100644
index 000000000..ce1a891fb
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

From 90db54b54a1f4be959181b1aade2ac81adef803c Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Mon, 28 Apr 2025 20:03:04 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(vben5):=20=E5=A2=9E=E5=8A=A0=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-antd/src/locales/langs/en-US/abp.json |   3 +-
 .../app-antd/src/locales/langs/zh-CN/abp.json |   3 +-
 .../app-antd/src/views/oss/objects/index.vue  |  15 +
 apps/vben5/packages/@abp/oss/package.json     |   5 +
 apps/vben5/packages/@abp/oss/src/api/index.ts |   1 +
 .../@abp/oss/src/api/useContainesApi.ts       |  15 +
 .../@abp/oss/src/api/useObjectsApi.ts         |  50 +++
 .../packages/@abp/oss/src/components/index.ts |   1 +
 .../oss/src/components/objects/FileList.vue   | 282 +++++++++++++++++
 .../components/objects/FileUploadModal.vue    | 286 ++++++++++++++++++
 .../src/components/objects/FolderModal.vue    |  66 ++++
 .../oss/src/components/objects/FolderTree.vue | 192 ++++++++++++
 .../oss/src/components/objects/ObjectPage.vue |  34 +++
 .../@abp/oss/src/constants/permissions.ts     |  18 ++
 apps/vben5/packages/@abp/oss/src/global.d.ts  |   1 +
 .../packages/@abp/oss/src/types/objects.ts    |  50 +++
 16 files changed, 1020 insertions(+), 2 deletions(-)
 create mode 100644 apps/vben5/apps/app-antd/src/views/oss/objects/index.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/api/useObjectsApi.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/objects/FileList.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/objects/FileUploadModal.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/objects/FolderModal.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/objects/FolderTree.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue
 create mode 100644 apps/vben5/packages/@abp/oss/src/constants/permissions.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/global.d.ts
 create mode 100644 apps/vben5/packages/@abp/oss/src/types/objects.ts

diff --git a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
index bf18b9eae..d6145c3b6 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
@@ -132,6 +132,7 @@
   },
   "oss": {
     "title": "Object storage",
-    "containers": "Containers"
+    "containers": "Containers",
+    "objects": "Files"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
index 8cdbf8324..8edd4ab47 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
@@ -132,6 +132,7 @@
   },
   "oss": {
     "title": "对象存储",
-    "containers": "容器管理"
+    "containers": "容器管理",
+    "objects": "文件管理"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/views/oss/objects/index.vue b/apps/vben5/apps/app-antd/src/views/oss/objects/index.vue
new file mode 100644
index 000000000..7cbd43a2f
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/oss/objects/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { ObjectPage } from '@abp/oss';
+
+defineOptions({
+  name: 'Vben5OssObjects',
+});
+</script>
+
+<template>
+  <Page>
+    <ObjectPage />
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/oss/package.json b/apps/vben5/packages/@abp/oss/package.json
index 9bf32f938..ad7022566 100644
--- a/apps/vben5/packages/@abp/oss/package.json
+++ b/apps/vben5/packages/@abp/oss/package.json
@@ -17,6 +17,9 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
+    },
+    "./global": {
+      "types": "./global.d.ts"
     }
   },
   "dependencies": {
@@ -32,8 +35,10 @@
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/stores": "workspace:*",
     "ant-design-vue": "catalog:",
     "vue": "catalog:*",
+    "vue-simple-uploader": "catalog:",
     "vxe-table": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/@abp/oss/src/api/index.ts b/apps/vben5/packages/@abp/oss/src/api/index.ts
index cba485d84..b72d0ebb1 100644
--- a/apps/vben5/packages/@abp/oss/src/api/index.ts
+++ b/apps/vben5/packages/@abp/oss/src/api/index.ts
@@ -1 +1,2 @@
 export { useContainesApi } from './useContainesApi';
+export { useObjectsApi } from './useObjectsApi';
diff --git a/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts b/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts
index 6043b7435..0fb560cf3 100644
--- a/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts
+++ b/apps/vben5/packages/@abp/oss/src/api/useContainesApi.ts
@@ -1,8 +1,10 @@
 import type {
   GetOssContainersInput,
+  GetOssObjectsInput,
   OssContainerDto,
   OssContainersResultDto,
 } from '../types/containes';
+import type { OssObjectsResultDto } from '../types/objects';
 
 import { useRequest } from '@abp/request';
 
@@ -30,6 +32,18 @@ export function useContainesApi() {
     });
   }
 
+  function getObjectsApi(
+    input: GetOssObjectsInput,
+  ): Promise<OssObjectsResultDto> {
+    return request<OssObjectsResultDto>(
+      `/api/oss-management/containes/objects`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
   function createApi(name: string): Promise<OssContainerDto> {
     return request<OssContainerDto>(`/api/oss-management/containes/${name}`, {
       method: 'POST',
@@ -42,5 +56,6 @@ export function useContainesApi() {
     deleteApi,
     getApi,
     getListApi,
+    getObjectsApi,
   };
 }
diff --git a/apps/vben5/packages/@abp/oss/src/api/useObjectsApi.ts b/apps/vben5/packages/@abp/oss/src/api/useObjectsApi.ts
new file mode 100644
index 000000000..67bb1a608
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/api/useObjectsApi.ts
@@ -0,0 +1,50 @@
+import type {
+  CreateOssObjectInput,
+  GetOssObjectInput,
+  OssObjectDto,
+} from '../types/objects';
+
+import { useRequest } from '@abp/request';
+
+export function useObjectsApi() {
+  const { cancel, request } = useRequest();
+
+  function createApi(input: CreateOssObjectInput): Promise<OssObjectDto> {
+    const formData = new window.FormData();
+    formData.append('bucket', input.bucket);
+    formData.append('fileName', input.fileName);
+    formData.append('overwrite', String(input.overwrite));
+    input.expirationTime &&
+      formData.append('expirationTime', input.expirationTime.toString());
+    input.path && formData.append('path', input.path);
+    input.file && formData.append('file', input.file);
+    return request<OssObjectDto>(`/api/oss-management/objects`, {
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data;charset=utf-8',
+      },
+      method: 'POST',
+    });
+  }
+
+  function generateUrlApi(input: GetOssObjectInput): Promise<string> {
+    return request<string>('/api/oss-management/objects/generate-url', {
+      method: 'GET',
+      params: input,
+    });
+  }
+
+  function deleteApi(input: GetOssObjectInput): Promise<void> {
+    return request('/api/oss-management/objects', {
+      method: 'DELETE',
+      params: input,
+    });
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    generateUrlApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/oss/src/components/index.ts b/apps/vben5/packages/@abp/oss/src/components/index.ts
index 8f45d9807..af5101805 100644
--- a/apps/vben5/packages/@abp/oss/src/components/index.ts
+++ b/apps/vben5/packages/@abp/oss/src/components/index.ts
@@ -1 +1,2 @@
 export { default as ContainerTable } from './containers/ContainerTable.vue';
+export { default as ObjectPage } from './objects/ObjectPage.vue';
diff --git a/apps/vben5/packages/@abp/oss/src/components/objects/FileList.vue b/apps/vben5/packages/@abp/oss/src/components/objects/FileList.vue
new file mode 100644
index 000000000..019a84e87
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/objects/FileList.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { OssContainerDto } from '../../types/containes';
+import type { OssObjectDto } from '../../types/objects';
+
+import { defineAsyncComponent, h, nextTick, ref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { formatToDateTime, isNullOrWhiteSpace } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useObjectsApi } from '../../api';
+import { useContainesApi } from '../../api/useContainesApi';
+import { OssObjectPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'FileList',
+});
+
+const props = defineProps<{
+  bucket: string;
+  path: string;
+}>();
+
+const kbUnit = 1 * 1024;
+const mbUnit = kbUnit * 1024;
+const gbUnit = mbUnit * 1024;
+
+const { hasAccessByCodes } = useAccess();
+const { cancel, getObjectsApi } = useContainesApi();
+const { deleteApi, generateUrlApi } = useObjectsApi();
+
+const selectedKeys = ref<string[]>([]);
+
+const gridOptions: VxeGridProps<OssContainerDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpOssManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'isFolder',
+      formatter: ({ cellValue }) => {
+        return cellValue
+          ? $t('AbpOssManagement.DisplayName:Folder')
+          : $t('AbpOssManagement.DisplayName:Standard');
+      },
+      minWidth: 150,
+      title: $t('AbpOssManagement.DisplayName:FileType'),
+    },
+    {
+      align: 'left',
+      field: 'size',
+      formatter: ({ cellValue }) => {
+        const size = Number(cellValue);
+        if (size > gbUnit) {
+          let gb = Math.round(size / gbUnit);
+          if (gb < 1) {
+            gb = 1;
+          }
+          return `${gb} GB`;
+        }
+        if (size > mbUnit) {
+          let mb = Math.round(size / mbUnit);
+          if (mb < 1) {
+            mb = 1;
+          }
+          return `${mb} MB`;
+        }
+        let kb = Math.round(size / kbUnit);
+        if (kb < 1) {
+          kb = 1;
+        }
+        return `${kb} KB`;
+      },
+      minWidth: 150,
+      title: $t('AbpOssManagement.DisplayName:Size'),
+    },
+    {
+      align: 'left',
+      field: 'creationDate',
+      formatter({ cellValue }) {
+        return cellValue ? formatToDateTime(cellValue) : '';
+      },
+      minWidth: 120,
+      title: $t('AbpOssManagement.DisplayName:CreationDate'),
+    },
+    {
+      align: 'left',
+      field: 'lastModifiedDate',
+      formatter({ cellValue }) {
+        return cellValue ? formatToDateTime(cellValue) : '';
+      },
+      minWidth: 120,
+      title: $t('AbpOssManagement.DisplayName:LastModifiedDate'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 200,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        const res = await getObjectsApi({
+          bucket: props.bucket,
+          maxResultCount: page.pageSize,
+          prefix: props.path,
+          skipCount: (page.currentPage - 1) * page.pageSize,
+        });
+        return {
+          totalCount: res.maxKeys,
+          items: res.objects,
+        };
+      },
+    },
+    autoLoad: false,
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: false,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<OssContainerDto> = {
+  checkboxAll: (params) => {
+    selectedKeys.value = params.records.map((record) => record.name);
+  },
+  checkboxChange: (params) => {
+    selectedKeys.value = params.records.map((record) => record.name);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridEvents,
+  gridOptions,
+});
+
+const [FileUploadModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./FileUploadModal.vue'),
+  ),
+});
+
+function onUpload() {
+  modalApi.setData({
+    bucket: props.bucket,
+    path: props.path,
+  });
+  modalApi.open();
+}
+
+function onDelete(row: OssObjectDto) {
+  Modal.confirm({
+    centered: true,
+    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name]),
+    onCancel: () => {
+      cancel();
+    },
+    onOk: async () => {
+      await deleteApi({
+        bucket: props.bucket,
+        mD5: false,
+        object: row.name,
+        path: row.path,
+      });
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      await gridApi.query();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+async function onDownload(row: OssObjectDto) {
+  const downloadUrl = await generateUrlApi({
+    bucket: props.bucket,
+    mD5: false,
+    object: row.name,
+    path: row.path,
+  });
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = downloadUrl;
+  link.setAttribute('download', row.name);
+  document.body.append(link);
+  link.click();
+}
+
+watch(
+  () => props.bucket,
+  (bucket) => {
+    nextTick(() => {
+      gridApi.setGridOptions({
+        toolbarConfig: {
+          refresh: !isNullOrWhiteSpace(bucket),
+        },
+      });
+      if (!isNullOrWhiteSpace(bucket)) {
+        gridApi.query();
+      }
+    });
+  },
+);
+
+watch(
+  () => props.path,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      nextTick(() => {
+        gridApi.query();
+      });
+    }
+  },
+);
+</script>
+
+<template>
+  <Grid :table-title="$t('AbpOssManagement.FileList')">
+    <template #toolbar-tools>
+      <Button
+        v-if="props.path"
+        :icon="h(UploadOutlined)"
+        type="primary"
+        @click="onUpload"
+      >
+        {{ $t('AbpOssManagement.Objects:UploadFile') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Button
+          v-if="
+            !row.isFolder && hasAccessByCodes([OssObjectPermissions.Download])
+          "
+          :icon="h(DownloadOutlined)"
+          block
+          type="link"
+          @click="onDownload(row)"
+        >
+          {{ $t('AbpOssManagement.Objects:Download') }}
+        </Button>
+        <Button
+          v-if="hasAccessByCodes([OssObjectPermissions.Delete])"
+          :icon="h(DeleteOutlined)"
+          danger
+          block
+          type="link"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+      </div>
+    </template>
+  </Grid>
+  <FileUploadModal @file-uploaded="() => gridApi.query()" />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/oss/src/components/objects/FileUploadModal.vue b/apps/vben5/packages/@abp/oss/src/components/objects/FileUploadModal.vue
new file mode 100644
index 000000000..69b38a1f8
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/objects/FileUploadModal.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { VxeComponentStyleType } from 'vxe-table';
+
+import { h, ref, useTemplateRef, watch } from 'vue';
+import uploader from 'vue-simple-uploader';
+import 'vue-simple-uploader/dist/style.css';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useRefresh } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import { isNullOrWhiteSpace } from '@abp/core';
+import {
+  CaretRightOutlined,
+  DeleteOutlined,
+  PauseOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Tag, Tooltip } from 'ant-design-vue';
+import { VxeColumn, VxeTable } from 'vxe-table';
+
+const emits = defineEmits<{
+  (event: 'fileUploaded', file: any): void;
+}>();
+const Uploader = uploader.Uploader;
+const UploaderDrop = uploader.UploaderDrop;
+const UploaderList = uploader.UploaderList;
+const UploaderUnsupport = uploader.UploaderUnsupport;
+
+interface ModalState {
+  bucket: string;
+  path: string;
+}
+
+const selectBtn = useTemplateRef<any>('selectBtn');
+const uploaderWrap = useTemplateRef<any>('uploaderWrap');
+
+const { refresh } = useRefresh();
+const accessStore = useAccessStore();
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  draggable: true,
+  footer: false,
+  onCancel: () => {
+    uploaderWrap.value?.uploader.cancel();
+  },
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      onInit();
+    }
+  },
+});
+
+const options = ref({
+  chunkRetryInterval: null,
+  headers: {},
+  initialPaused: true,
+  maxChunkRetries: 3,
+  permanentErrors: [400, 401, 403, 404, 415, 500, 501],
+  processParams: (params: any) => params,
+  processResponse: (response: any, cb: any) => {
+    if (!isNullOrWhiteSpace(response)) {
+      const error = JSON.parse(response);
+      if (error.code !== '0') {
+        cb(true, error.message);
+        return;
+      }
+    }
+    cb(null, response);
+  },
+  successStatuses: [200, 201, 202, 204, 205],
+  target: '/api/oss-management/objects/upload',
+  testChunks: false,
+});
+
+function onInit() {
+  const state = modalApi.getData<ModalState>();
+  options.value = {
+    ...options.value,
+    headers: {
+      Authorization: accessStore.accessToken,
+    },
+    processParams: (params: any) => {
+      params.bucket = state.bucket;
+      params.path = state.path;
+      return params;
+    },
+  };
+}
+
+function onSelectFiles() {
+  selectBtn.value?.click();
+}
+
+function onResume(file: any) {
+  if (file.error) {
+    file.errorMsg = '';
+    file.retry();
+  } else {
+    file.resume();
+  }
+}
+
+function onPause(file: any) {
+  file.pause();
+}
+
+function onDelete(file: any) {
+  file.cancel();
+}
+
+function onFileSubmitted(_: any, files: any[]) {
+  files.forEach((f) => {
+    f.paused = true;
+    f.completed = false;
+    f.progress = 0;
+    f.progressText = '0 %';
+  });
+}
+
+function onUploadProgress(_: any, file: any) {
+  if (file._prevUploadedSize) {
+    const progress = Math.floor((file._prevUploadedSize / file.size) * 100);
+    file.progress = progress;
+    file.progressText = `${progress} %`;
+    file.completed = progress === 100;
+  }
+}
+
+function onUploadError(_rootFile: any, file: any, message: any, chunk: any) {
+  if (chunk?.xhr?.status === 401) {
+    // 401 错误代码刷新页面, 由axios拦截器刷新token
+    refresh();
+  } else {
+    file.errorMsg = message;
+  }
+}
+
+function onUploadSuccess(_rootFile: any, file: any) {
+  emits('fileUploaded', file);
+}
+
+function formatSize(size: number) {
+  if (size < 1024) {
+    return `${size.toFixed(0)} bytes`;
+  } else if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(0)} KB`;
+  } else if (size < 1024 * 1024 * 1024) {
+    return `${(size / 1024 / 1024).toFixed(1)} MB`;
+  } else {
+    return `${(size / 1024 / 1024 / 1024).toFixed(1)} GB`;
+  }
+}
+
+function rowStyle(params: any): VxeComponentStyleType {
+  // console.log('上传状态 --->', params.row.status);
+  if (params.row.error) {
+    return {
+      background: '#ffe0e0',
+    };
+  }
+  const startColor = 'rgba(255, 200, 200, 0.7)';
+  const endColor = 'rgba(200, 255, 200, 0.7)';
+  return {
+    background: `linear-gradient(
+      to right,
+      ${startColor} 0%,
+      ${endColor} ${params.row.progress}%,
+      transparent ${params.row.progress}%,
+      transparent 100%
+    )`,
+    backgroundSize: '100% 100%',
+    transition: 'background 0.5s ease',
+  };
+}
+
+watch(
+  () => [selectBtn.value, uploaderWrap.value],
+  ([button, wrap]) => {
+    if (button && wrap) {
+      wrap.uploader.assignBrowse(button);
+    }
+  },
+);
+</script>
+
+<template>
+  <Modal :title="$t('AbpOssManagement.Objects:UploadFile')">
+    <Uploader
+      :options="options"
+      ref="uploaderWrap"
+      @file-error="onUploadError"
+      @file-progress="onUploadProgress"
+      @file-success="onUploadSuccess"
+      @files-submitted="onFileSubmitted"
+    >
+      <UploaderUnsupport />
+      <UploaderDrop>
+        <div class="flex flex-row gap-2">
+          <input ref="selectBtn" style="display: none" />
+          <Button type="primary" @click="onSelectFiles">
+            {{ $t('AbpOssManagement.Upload:SelectFile') }}
+          </Button>
+        </div>
+      </UploaderDrop>
+      <UploaderList>
+        <template #default="{ fileList }">
+          <VxeTable :data="fileList" :row-style="rowStyle">
+            <VxeColumn type="seq" width="70" />
+            <VxeColumn
+              field="name"
+              :title="$t('AbpOssManagement.DisplayName:Name')"
+            />
+            <VxeColumn
+              field="size"
+              :title="$t('AbpOssManagement.DisplayName:Size')"
+              width="100"
+            >
+              <template #default="{ row }">
+                <span>{{ formatSize(row.size) }}</span>
+              </template>
+            </VxeColumn>
+            <VxeColumn
+              field="status"
+              :title="$t('AbpOssManagement.DisplayName:Status')"
+              width="180"
+            >
+              <template #default="{ row }">
+                <Tag v-if="row.completed" color="green">
+                  {{ $t('AbpOssManagement.Upload:Completed') }}
+                </Tag>
+                <Tooltip v-else-if="row.error" :title="row.errorMsg">
+                  <Tag color="red">
+                    {{ $t('AbpOssManagement.Upload:Error') }}
+                  </Tag>
+                </Tooltip>
+                <Tag v-else-if="row.paused" color="orange">
+                  {{ $t('AbpOssManagement.Upload:Pause') }}
+                </Tag>
+                <span v-else>{{
+                  `${row.progressText} ${formatSize(row.averageSpeed)}/s`
+                }}</span>
+              </template>
+            </VxeColumn>
+            <VxeColumn
+              fixed="right"
+              field="action"
+              :title="$t('AbpUi.Actions')"
+              width="100"
+            >
+              <template #default="{ row }">
+                <div class="flex flex-row">
+                  <div v-if="!row.completed">
+                    <Button
+                      v-if="row.paused || row.error"
+                      :icon="h(CaretRightOutlined)"
+                      @click="onResume(row)"
+                      type="link"
+                    />
+                    <Button
+                      v-else
+                      :icon="h(PauseOutlined)"
+                      @click="onPause(row)"
+                      type="link"
+                    />
+                  </div>
+                  <Button
+                    :icon="h(DeleteOutlined)"
+                    @click="onDelete(row)"
+                    type="link"
+                    danger
+                  />
+                </div>
+              </template>
+            </VxeColumn>
+          </VxeTable>
+        </template>
+      </UploaderList>
+    </Uploader>
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/oss/src/components/objects/FolderModal.vue b/apps/vben5/packages/@abp/oss/src/components/objects/FolderModal.vue
new file mode 100644
index 000000000..983087636
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/objects/FolderModal.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { OssObjectDto } from '../../types/objects';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useObjectsApi } from '../../api';
+
+interface ModalState {
+  bucket: string;
+  path?: string;
+}
+
+const emits = defineEmits<{
+  (event: 'change', data: OssObjectDto): void;
+}>();
+
+const { createApi } = useObjectsApi();
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('AbpOssManagement.DisplayName:Name'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+});
+
+async function onSubmit(values: Record<string, any>) {
+  try {
+    const state = modalApi.getData<ModalState>();
+    modalApi.setState({ submitting: true });
+    const dto = await createApi({
+      bucket: state.bucket,
+      fileName: values.name,
+      overwrite: false,
+      path: state.path,
+    });
+    message.success($t('AbpUi.SavedSuccessfully'));
+    emits('change', dto);
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal :title="$t('AbpOssManagement.Objects:CreateFolder')">
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/oss/src/components/objects/FolderTree.vue b/apps/vben5/packages/@abp/oss/src/components/objects/FolderTree.vue
new file mode 100644
index 000000000..4da8b4514
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/objects/FolderTree.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { EventDataNode, Key } from 'ant-design-vue/es/vc-tree/interface';
+import type { TreeProps } from 'ant-design-vue/es/vc-tree/props';
+
+import type { OssContainerDto } from '../../types';
+import type { OssObjectDto } from '../../types/objects';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Button, Card, DirectoryTree, Empty, Select } from 'ant-design-vue';
+
+import { useContainesApi } from '../../api';
+
+const emits = defineEmits<{
+  (event: 'bucketChange', data: string): void;
+  (event: 'folderChange', data: string): void;
+}>();
+
+interface Folder {
+  children?: Folder[];
+  isLeaf?: boolean;
+  key: string;
+  name: string;
+  path?: string;
+  title: string;
+}
+
+const { getListApi: getContainersApi, getObjectsApi } = useContainesApi();
+
+const [FolderModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(() => import('./FolderModal.vue')),
+});
+
+const rootFolder: Folder = {
+  isLeaf: false,
+  key: './',
+  name: './',
+  path: '',
+  title: $t('AbpOssManagement.Objects:Root'),
+  children: [],
+};
+
+const bucket = ref<string>('');
+const loadedFolders = ref<string[]>([]);
+const expandedFolders = ref<string[]>([]);
+const selectedFolders = ref<string[]>([]);
+const containers = ref<OssContainerDto[]>([]);
+const folders = ref<Folder[]>([
+  {
+    ...rootFolder,
+  },
+]);
+
+const onLoadChildFolders: TreeProps['loadData'] = async (treeNode) => {
+  let path = '';
+  if (treeNode.dataRef?.path) {
+    path = path + treeNode.dataRef?.path;
+  }
+  if (treeNode.dataRef?.name) {
+    path = path + treeNode.dataRef?.name;
+  }
+  try {
+    treeNode.dataRef!.children = await getFolders(bucket.value!, path);
+  } catch {
+    treeNode.dataRef!.children = [];
+  }
+  folders.value = [...folders.value];
+  loadedFolders.value = [...loadedFolders.value, treeNode.key.toString()];
+};
+
+async function onInit() {
+  const getContainersRes = await getContainersApi({
+    maxResultCount: 1000,
+  });
+  containers.value = getContainersRes.containers;
+}
+
+async function getFolders(bucket: string, path?: string) {
+  const { objects } = await getObjectsApi({
+    bucket,
+    delimiter: '/',
+    maxResultCount: 1000,
+    prefix: path ?? '',
+  });
+  return objects
+    .filter((f) => f.isFolder)
+    .map((folder) => {
+      return {
+        isLeaf: false,
+        key: `${folder.path ?? ''}${folder.name}`,
+        name: folder.name,
+        path: folder.path,
+        title: folder.name,
+        children: [],
+      };
+    });
+}
+
+function onFolderExpand(
+  _: Key[],
+  info: {
+    expanded: boolean;
+    node: EventDataNode;
+  },
+) {
+  if (!info.expanded) {
+    const keys = loadedFolders.value;
+    const findIndex = keys.lastIndexOf(info.node.key.toString());
+    findIndex !== -1 && keys.splice(findIndex);
+    loadedFolders.value = keys;
+  }
+}
+
+function onFolderChange(selectedKeys: Key[]) {
+  if (selectedKeys.length === 1) {
+    emits('folderChange', selectedKeys[0]!.toString());
+  }
+}
+
+async function onBucketChange(bucket: string) {
+  emits('bucketChange', bucket);
+  expandedFolders.value = [];
+  loadedFolders.value = [];
+  folders.value = [
+    {
+      ...rootFolder,
+    },
+  ];
+}
+
+function onCreate() {
+  modalApi.setData({
+    bucket: bucket.value,
+    path: selectedFolders.value[0],
+  });
+  modalApi.open();
+}
+
+function onFolderCreated(ossObject: OssObjectDto) {
+  const keys = expandedFolders.value;
+  const findIndex = keys.lastIndexOf(ossObject.path);
+  if (findIndex !== -1) {
+    keys.splice(findIndex);
+    expandedFolders.value = keys;
+    loadedFolders.value = [];
+  }
+}
+
+onMounted(onInit);
+</script>
+
+<template>
+  <Card :title="$t('AbpOssManagement.Containers')">
+    <div class="flex flex-col gap-2">
+      <Select
+        :placeholder="$t('AbpOssManagement.Containers:Select')"
+        :options="containers"
+        :field-names="{ label: 'name', value: 'name' }"
+        v-model:value="bucket"
+        @change="(e) => onBucketChange(e!.toString())"
+      />
+      <Button v-if="bucket" block type="primary" ghost @click="onCreate">
+        {{ $t('AbpOssManagement.Objects:CreateFolder') }}
+      </Button>
+      <DirectoryTree
+        v-if="bucket"
+        block-node
+        v-model:expanded-keys="expandedFolders"
+        v-model:selected-keys="selectedFolders"
+        :loaded-keys="loadedFolders"
+        :tree-data="folders"
+        :load-data="onLoadChildFolders"
+        @select="onFolderChange"
+        @expand="onFolderExpand"
+      />
+      <Empty v-else />
+    </div>
+  </Card>
+  <FolderModal @change="onFolderCreated" />
+</template>
+
+<style scoped lang="scss">
+:deep(.ant-tree) {
+  .ant-tree-title {
+    word-break: break-word;
+    white-space: normal;
+  }
+}
+</style>
diff --git a/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue b/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue
new file mode 100644
index 000000000..63a9c4efa
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from 'vue';
+
+const FolderTree = defineAsyncComponent(() => import('./FolderTree.vue'));
+const FileList = defineAsyncComponent(() => import('./FileList.vue'));
+
+const bucket = ref('');
+const path = ref('');
+
+function onBucketChange(val: string) {
+  bucket.value = val;
+  path.value = '';
+}
+
+function onFolderChange(val: string) {
+  path.value = val;
+}
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <div style="width: 30%">
+      <FolderTree
+        @bucket-change="onBucketChange"
+        @folder-change="onFolderChange"
+      />
+    </div>
+    <div style="width: 70%">
+      <FileList :bucket="bucket" :path="path" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/oss/src/constants/permissions.ts b/apps/vben5/packages/@abp/oss/src/constants/permissions.ts
new file mode 100644
index 000000000..4d60a901e
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/constants/permissions.ts
@@ -0,0 +1,18 @@
+/** 容器权限 */
+export const ContainerPermissions = {
+  /** 新增 */
+  Create: 'AbpOssManagement.Container.Create',
+  Default: 'AbpOssManagement.Container',
+  /** 删除 */
+  Delete: 'AbpOssManagement.Container.Delete',
+};
+/** 容器权限 */
+export const OssObjectPermissions = {
+  /** 新增 */
+  Create: 'AbpOssManagement.OssObject.Create',
+  Default: 'AbpOssManagement.OssObject',
+  /** 删除 */
+  Delete: 'AbpOssManagement.OssObject.Delete',
+  /** 下载 */
+  Download: 'AbpOssManagement.OssObject.Download',
+};
diff --git a/apps/vben5/packages/@abp/oss/src/global.d.ts b/apps/vben5/packages/@abp/oss/src/global.d.ts
new file mode 100644
index 000000000..a0956a4a5
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/global.d.ts
@@ -0,0 +1 @@
+declare module 'vue-simple-uploader';
diff --git a/apps/vben5/packages/@abp/oss/src/types/objects.ts b/apps/vben5/packages/@abp/oss/src/types/objects.ts
new file mode 100644
index 000000000..da6d2cf28
--- /dev/null
+++ b/apps/vben5/packages/@abp/oss/src/types/objects.ts
@@ -0,0 +1,50 @@
+interface OssObjectDto {
+  creationDate: Date;
+  isFolder: boolean;
+  lastModifiedDate?: Date;
+  mD5?: string;
+  metadata: Record<string, string>;
+  name: string;
+  path: string;
+  size: number;
+}
+
+interface CreateOssObjectInput {
+  bucket: string;
+  expirationTime?: string;
+  file?: File;
+  fileName: string;
+  overwrite: boolean;
+  path?: string;
+}
+
+interface GetOssObjectInput {
+  bucket: string;
+  mD5: boolean;
+  object: string;
+  path?: string;
+}
+
+interface BulkDeleteOssObjectInput {
+  bucket: string;
+  object: string;
+  path?: string;
+}
+
+interface OssObjectsResultDto {
+  bucket: string;
+  delimiter?: string;
+  marker?: string;
+  maxKeys: number;
+  nextMarker?: string;
+  objects: OssObjectDto[];
+  prefix?: string;
+}
+
+export type {
+  BulkDeleteOssObjectInput,
+  CreateOssObjectInput,
+  GetOssObjectInput,
+  OssObjectDto,
+  OssObjectsResultDto,
+};