feat(vben5): 增加Oss管理

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:*",

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"
   }
 }

apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json

@@ -129,5 +129,9 @@
   "textTemplating": {
     "title": "文本模板",
     "definitions": "模板定义"
+  },
+  "oss": {
+    "title": "对象存储",
+    "containers": "容器管理"
   }
 }

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>

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:"
+  }
+}

apps/vben5/packages/@abp/oss/src/api/index.ts

@@ -0,0 +1 @@
+export { useContainesApi } from './useContainesApi';

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,
+  };
+}

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>

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>

apps/vben5/packages/@abp/oss/src/components/index.ts

@@ -0,0 +1 @@
+export { default as ContainerTable } from './containers/ContainerTable.vue';

apps/vben5/packages/@abp/oss/src/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './components';
+export * from './types';

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,
+};

apps/vben5/packages/@abp/oss/src/types/index.ts

@@ -0,0 +1 @@
+export * from './containes';

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"]
+}