yx lin
9 months ago
committed by
GitHub
GitHub
385 changed files with 21267 additions and 2653 deletions
@ -0,0 +1,37 @@ |
|||
<script setup lang="ts"> |
|||
import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben/icons'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { VbenIconButton } from '@vben-core/shadcn-ui'; |
|||
|
|||
defineOptions({ |
|||
name: 'ThirdPartyLogin', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="w-full sm:mx-auto md:max-w-md"> |
|||
<div class="mt-4 flex items-center justify-between"> |
|||
<span class="border-input w-[35%] border-b dark:border-gray-600"></span> |
|||
<span class="text-muted-foreground text-center text-xs uppercase"> |
|||
{{ $t('authentication.thirdPartyLogin') }} |
|||
</span> |
|||
<span class="border-input w-[35%] border-b dark:border-gray-600"></span> |
|||
</div> |
|||
|
|||
<div class="mt-4 flex flex-wrap justify-center"> |
|||
<VbenIconButton class="mb-3"> |
|||
<MdiWechat /> |
|||
</VbenIconButton> |
|||
<VbenIconButton class="mb-3"> |
|||
<MdiQqchat /> |
|||
</VbenIconButton> |
|||
<VbenIconButton class="mb-3"> |
|||
<MdiGithub /> |
|||
</VbenIconButton> |
|||
<VbenIconButton class="mb-3"> |
|||
<MdiGoogle /> |
|||
</VbenIconButton> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { LoggingTable } from '@abp/auditing'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5AuditingLoggings', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<LoggingTable /> |
|||
</Page> |
|||
</template> |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { DataDictionaryTable } from '@abp/platform'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5PlatformDataDictionaries', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<DataDictionaryTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { LayoutTable } from '@abp/platform'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5PlatformLayouts', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<LayoutTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { MenuTable } from '@abp/platform'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5PlatformMenus', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<MenuTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { JobInfoTable } from '@abp/tasks'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5TasksJobInfos', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<JobInfoTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { TemplateDefinitionTable } from '@abp/text-templating'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5TextTemplatingDefinitions', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<TemplateDefinitionTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { WebhookDefinitionTable } from '@abp/webhooks'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5WebhooksDefinitions', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<WebhookDefinitionTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { WebhookGroupDefinitionTable } from '@abp/webhooks'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5WebhooksGroupDefinitions', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<WebhookGroupDefinitionTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { WebhookSendAttemptTable } from '@abp/webhooks'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5WebhooksSendAttempts', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<WebhookSendAttemptTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { WebhookSubscriptionTable } from '@abp/webhooks'; |
|||
|
|||
defineOptions({ |
|||
name: 'Vben5WebhooksSubscriptions', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<WebhookSubscriptionTable /> |
|||
</Page> |
|||
</template> |
|||
@ -1,2 +1,3 @@ |
|||
export { useAuditLogsApi } from './useAuditLogsApi'; |
|||
export { useEntityChangesApi } from './useEntityChangesApi'; |
|||
export { useLoggingsApi } from './useLoggingsApi'; |
|||
|
|||
@ -0,0 +1,38 @@ |
|||
import type { PagedResultDto } from '@abp/core'; |
|||
|
|||
import type { LogDto, LogGetListInput } from '../types/loggings'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useLoggingsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
|
|||
/** |
|||
* 获取系统日志 |
|||
* @param id 日志id |
|||
*/ |
|||
function getApi(id: string): Promise<LogDto> { |
|||
return request<LogDto>(`/api/auditing/logging/${id}`, { |
|||
method: 'GET', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 获取系统日志分页列表 |
|||
* @param input 参数 |
|||
*/ |
|||
function getPagedListApi( |
|||
input: LogGetListInput, |
|||
): Promise<PagedResultDto<LogDto>> { |
|||
return request<PagedResultDto<LogDto>>('/api/auditing/logging', { |
|||
method: 'GET', |
|||
params: input, |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
getApi, |
|||
getPagedListApi, |
|||
}; |
|||
} |
|||
@ -1,2 +1,3 @@ |
|||
export { default as AuditLogTable } from './audit-logs/AuditLogTable.vue'; |
|||
export { default as EntityChangeDrawer } from './entity-changes/EntityChangeDrawer.vue'; |
|||
export { default as LoggingTable } from './loggings/LoggingTable.vue'; |
|||
|
|||
@ -0,0 +1,138 @@ |
|||
<script setup lang="ts"> |
|||
import type { LogDto, LogLevel } from '../../types/loggings'; |
|||
|
|||
import { ref } from 'vue'; |
|||
|
|||
import { useVbenDrawer } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { formatToDateTime } from '@abp/core'; |
|||
import { Descriptions, Tabs, Tag } from 'ant-design-vue'; |
|||
|
|||
import { useLoggingsApi } from '../../api/useLoggingsApi'; |
|||
|
|||
defineOptions({ |
|||
name: 'LoggingDrawer', |
|||
}); |
|||
|
|||
defineProps<{ |
|||
logLevelOptions: { color: string; label: string; value: LogLevel }[]; |
|||
}>(); |
|||
const TabPane = Tabs.TabPane; |
|||
const DescriptionsItem = Descriptions.Item; |
|||
|
|||
const activedTab = ref('basic'); |
|||
const logModel = ref<LogDto>({} as LogDto); |
|||
|
|||
const { getApi } = useLoggingsApi(); |
|||
const [Drawer, drawerApi] = useVbenDrawer({ |
|||
class: 'w-auto', |
|||
onCancel() { |
|||
drawerApi.close(); |
|||
}, |
|||
onConfirm: async () => { |
|||
drawerApi.close(); |
|||
}, |
|||
onOpenChange: async (isOpen: boolean) => { |
|||
if (isOpen) { |
|||
try { |
|||
logModel.value = {} as LogDto; |
|||
drawerApi.setState({ loading: true }); |
|||
const dto = drawerApi.getData<LogDto>(); |
|||
await onGet(dto.fields.id); |
|||
} finally { |
|||
drawerApi.setState({ loading: false }); |
|||
} |
|||
} |
|||
}, |
|||
title: $t('AbpAuditLogging.AuditLog'), |
|||
}); |
|||
async function onGet(id: string) { |
|||
const dto = await getApi(id); |
|||
logModel.value = dto; |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<Drawer> |
|||
<div style="width: 800px"> |
|||
<Tabs v-model="activedTab"> |
|||
<TabPane key="basic" :tab="$t('AbpAuditLogging.Operation')"> |
|||
<Descriptions |
|||
:colon="false" |
|||
:column="1" |
|||
bordered |
|||
size="small" |
|||
:label-style="{ minWidth: '110px' }" |
|||
> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.TimeStamp')"> |
|||
{{ formatToDateTime(logModel.timeStamp) }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.Level')"> |
|||
<Tag :color="logLevelOptions[logModel.level]?.color"> |
|||
{{ logLevelOptions[logModel.level]?.label }} |
|||
</Tag> |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.Message')" :span="2"> |
|||
{{ logModel.message }} |
|||
</DescriptionsItem> |
|||
</Descriptions> |
|||
</TabPane> |
|||
<TabPane key="fields" :tab="$t('AbpAuditLogging.Fields')"> |
|||
<Descriptions |
|||
:colon="false" |
|||
:column="1" |
|||
bordered |
|||
size="small" |
|||
:label-style="{ minWidth: '110px' }" |
|||
> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.ApplicationName')"> |
|||
{{ logModel.fields.application }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.MachineName')"> |
|||
{{ logModel.fields.machineName }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.Environment')"> |
|||
{{ logModel.fields.environment }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.ProcessId')"> |
|||
{{ logModel.fields.processId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.ThreadId')"> |
|||
{{ logModel.fields.threadId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.Context')"> |
|||
{{ logModel.fields.context }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.ActionId')"> |
|||
{{ logModel.fields.actionId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.MethodName')"> |
|||
{{ logModel.fields.actionName }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.RequestId')"> |
|||
{{ logModel.fields.requestId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.RequestPath')"> |
|||
{{ logModel.fields.requestPath }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.ConnectionId')"> |
|||
{{ logModel.fields.connectionId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.CorrelationId')"> |
|||
{{ logModel.fields.correlationId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.ClientId')"> |
|||
{{ logModel.fields.clientId }} |
|||
</DescriptionsItem> |
|||
<DescriptionsItem :label="$t('AbpAuditLogging.UserId')"> |
|||
{{ logModel.fields.userId }} |
|||
</DescriptionsItem> |
|||
</Descriptions> |
|||
</TabPane> |
|||
</Tabs> |
|||
</div> |
|||
</Drawer> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,345 @@ |
|||
<script setup lang="ts"> |
|||
import type { SortOrder } from '@abp/core'; |
|||
import type { VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { VbenFormProps } from '@vben/common-ui'; |
|||
|
|||
import type { LogDto } from '../../types/loggings'; |
|||
|
|||
import { defineAsyncComponent, h, reactive, ref } from 'vue'; |
|||
|
|||
import { useVbenDrawer } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { formatToDateTime } from '@abp/core'; |
|||
import { useVbenVxeGrid } from '@abp/ui'; |
|||
import { EditOutlined } from '@ant-design/icons-vue'; |
|||
import { Button, Tag } from 'ant-design-vue'; |
|||
|
|||
import { useLoggingsApi } from '../../api/useLoggingsApi'; |
|||
import { SystemLogPermissions } from '../../constants/permissions'; |
|||
import { LogLevel } from '../../types/loggings'; |
|||
|
|||
defineOptions({ |
|||
name: 'LoggingTable', |
|||
}); |
|||
const { getPagedListApi } = useLoggingsApi(); |
|||
|
|||
const selectedKeys = ref<string[]>([]); |
|||
const logLevelOptions = reactive([ |
|||
{ |
|||
color: 'purple', |
|||
label: 'Trace', |
|||
value: LogLevel.Trace, |
|||
}, |
|||
{ |
|||
color: 'blue', |
|||
label: 'Debug', |
|||
value: LogLevel.Debug, |
|||
}, |
|||
{ |
|||
color: 'green', |
|||
label: 'Information', |
|||
value: LogLevel.Information, |
|||
}, |
|||
{ |
|||
color: 'orange', |
|||
label: 'Warning', |
|||
value: LogLevel.Warning, |
|||
}, |
|||
{ |
|||
color: 'red', |
|||
label: 'Error', |
|||
value: LogLevel.Error, |
|||
}, |
|||
{ |
|||
color: '#f50', |
|||
label: 'Critical', |
|||
value: LogLevel.Critical, |
|||
}, |
|||
{ |
|||
color: '', |
|||
label: 'None', |
|||
value: LogLevel.None, |
|||
}, |
|||
]); |
|||
const formOptions: VbenFormProps = { |
|||
// 默认展开 |
|||
collapsed: true, |
|||
collapsedRows: 2, |
|||
fieldMappingTime: [ |
|||
[ |
|||
'timeStamp', |
|||
['startTime', 'endTime'], |
|||
['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'], |
|||
], |
|||
], |
|||
schema: [ |
|||
{ |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: logLevelOptions, |
|||
}, |
|||
fieldName: 'level', |
|||
label: $t('AbpAuditLogging.Level'), |
|||
}, |
|||
{ |
|||
component: 'RangePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
}, |
|||
fieldName: 'timeStamp', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpAuditLogging.TimeStamp'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'application', |
|||
label: $t('AbpAuditLogging.ApplicationName'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'machineName', |
|||
label: $t('AbpAuditLogging.MachineName'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'environment', |
|||
label: $t('AbpAuditLogging.Environment'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'requestId', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpAuditLogging.RequestId'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'requestPath', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpAuditLogging.RequestPath'), |
|||
labelWidth: 150, |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'correlationId', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpAuditLogging.CorrelationId'), |
|||
}, |
|||
{ |
|||
component: 'Checkbox', |
|||
componentProps: { |
|||
render: () => { |
|||
return h('span', $t('AbpAuditLogging.HasException')); |
|||
}, |
|||
}, |
|||
fieldName: 'hasException', |
|||
label: $t('AbpAuditLogging.HasException'), |
|||
}, |
|||
], |
|||
// 控制表单是否显示折叠按钮 |
|||
showCollapseButton: true, |
|||
// 按下回车时是否提交表单 |
|||
submitOnEnter: true, |
|||
wrapperClass: 'grid-cols-4', |
|||
}; |
|||
|
|||
const gridOptions: VxeGridProps<LogDto> = { |
|||
columns: [ |
|||
{ |
|||
align: 'left', |
|||
field: 'applicationName', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.application; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.ApplicationName'), |
|||
width: 150, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'timeStamp', |
|||
formatter: ({ cellValue }) => { |
|||
return cellValue ? formatToDateTime(cellValue) : cellValue; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.TimeStamp'), |
|||
width: 150, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'level', |
|||
slots: { default: 'level' }, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.Level'), |
|||
width: 120, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'message', |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.Message'), |
|||
width: 500, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'machineName', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.machineName; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.MachineName'), |
|||
width: 140, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'environment', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.environment; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.Environment'), |
|||
width: 150, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'requestId', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.requestId; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.RequestId'), |
|||
width: 200, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'requestPath', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.requestPath; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.RequestPath'), |
|||
width: 300, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'connectionId', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.connectionId; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.ConnectionId'), |
|||
width: 150, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'correlationId', |
|||
formatter: ({ row }) => { |
|||
return row.fields?.correlationId; |
|||
}, |
|||
sortable: true, |
|||
title: $t('AbpAuditLogging.CorrelationId'), |
|||
width: 240, |
|||
}, |
|||
{ |
|||
field: 'action', |
|||
fixed: 'right', |
|||
slots: { default: 'action' }, |
|||
title: $t('AbpUi.Actions'), |
|||
width: 180, |
|||
}, |
|||
], |
|||
exportConfig: {}, |
|||
keepSource: true, |
|||
proxyConfig: { |
|||
ajax: { |
|||
query: async ({ page }, formValues) => { |
|||
return await getPagedListApi({ |
|||
maxResultCount: page.pageSize, |
|||
skipCount: (page.currentPage - 1) * page.pageSize, |
|||
...formValues, |
|||
}); |
|||
}, |
|||
}, |
|||
response: { |
|||
total: 'totalCount', |
|||
list: 'items', |
|||
}, |
|||
}, |
|||
sortConfig: { |
|||
remote: true, |
|||
}, |
|||
toolbarConfig: { |
|||
custom: true, |
|||
export: true, |
|||
// import: true, |
|||
refresh: true, |
|||
zoom: true, |
|||
}, |
|||
}; |
|||
|
|||
const gridEvents: VxeGridListeners<LogDto> = { |
|||
checkboxAll: (params) => { |
|||
selectedKeys.value = params.records.map((x) => x.fields.id); |
|||
}, |
|||
checkboxChange: (params) => { |
|||
selectedKeys.value = params.records.map((x) => x.fields.id); |
|||
}, |
|||
sortChange: onSort, |
|||
}; |
|||
|
|||
const [Grid, gridApi] = useVbenVxeGrid({ |
|||
formOptions, |
|||
gridEvents, |
|||
gridOptions, |
|||
}); |
|||
const [LoggingDrawer, logDrawerApi] = useVbenDrawer({ |
|||
connectedComponent: defineAsyncComponent(() => import('./LoggingDrawer.vue')), |
|||
}); |
|||
|
|||
function onUpdate(row: LogDto) { |
|||
logDrawerApi.setData(row); |
|||
logDrawerApi.open(); |
|||
} |
|||
|
|||
function onSort(params: { field: string; order: SortOrder }) { |
|||
const sorting = params.order ? `${params.field} ${params.order}` : undefined; |
|||
gridApi.query({ sorting }); |
|||
} |
|||
|
|||
function onFilter(field: string, value: any) { |
|||
gridApi.formApi.setFieldValue(field, value); |
|||
gridApi.formApi.validateAndSubmitForm(); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<Grid :table-title="$t('AbpAuditLogging.Logging')"> |
|||
<template #level="{ row }"> |
|||
<Tag :color="logLevelOptions[row.level]?.color"> |
|||
<a |
|||
class="link" |
|||
href="javaScript:void(0);" |
|||
@click="onFilter('level', row.level)" |
|||
>{{ logLevelOptions[row.level]?.label }} |
|||
</a> |
|||
</Tag> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<Button |
|||
:icon="h(EditOutlined)" |
|||
block |
|||
type="link" |
|||
v-access:code="[SystemLogPermissions.Default]" |
|||
@click="onUpdate(row)" |
|||
> |
|||
{{ $t('AbpAuditLogging.ShowLogDialog') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
<LoggingDrawer :log-level-options="logLevelOptions" /> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -1,2 +1,3 @@ |
|||
export * from './audit-logs'; |
|||
export * from './entity-changes'; |
|||
export * from './loggings'; |
|||
|
|||
@ -0,0 +1,65 @@ |
|||
interface LogExceptionDto { |
|||
class?: string; |
|||
depth?: number; |
|||
helpUrl?: string; |
|||
hResult?: number; |
|||
message?: string; |
|||
source?: string; |
|||
stackTrace?: string; |
|||
} |
|||
|
|||
interface LogFieldDto { |
|||
actionId?: string; |
|||
actionName?: string; |
|||
application?: string; |
|||
clientId?: string; |
|||
connectionId?: string; |
|||
context?: string; |
|||
correlationId?: string; |
|||
environment?: string; |
|||
id: string; |
|||
machineName?: string; |
|||
processId?: number; |
|||
requestId?: string; |
|||
requestPath?: string; |
|||
threadId?: number; |
|||
userId?: string; |
|||
} |
|||
|
|||
enum LogLevel { |
|||
Critical = 5, |
|||
Debug = 1, |
|||
Error = 4, |
|||
Information = 2, |
|||
None = 6, |
|||
Trace = 0, |
|||
Warning = 3, |
|||
} |
|||
|
|||
interface LogDto { |
|||
exceptions: LogExceptionDto[]; |
|||
fields: LogFieldDto; |
|||
level: LogLevel; |
|||
message: string; |
|||
timeStamp: Date; |
|||
} |
|||
|
|||
interface LogGetListInput { |
|||
application?: string; |
|||
context?: string; |
|||
correlationId?: string; |
|||
endTime?: Date; |
|||
environment?: string; |
|||
hasException?: boolean; |
|||
level?: LogLevel; |
|||
machineName?: string; |
|||
processId?: number; |
|||
requestId?: string; |
|||
requestPath?: string; |
|||
startTime?: Date; |
|||
threadId?: number; |
|||
} |
|||
|
|||
export type { LogDto, LogExceptionDto, LogFieldDto, LogGetListInput }; |
|||
|
|||
export { LogLevel }; |
|||
@ -0,0 +1,82 @@ |
|||
<script lang="ts" setup> |
|||
import { |
|||
computed, |
|||
nextTick, |
|||
onBeforeUnmount, |
|||
onDeactivated, |
|||
ref, |
|||
unref, |
|||
watch, |
|||
} from 'vue'; |
|||
|
|||
import { preferences } from '@vben/preferences'; |
|||
|
|||
import VditorPreview from 'vditor'; |
|||
|
|||
const props = defineProps<{ |
|||
class?: string; |
|||
value: string; |
|||
}>(); |
|||
const viewerRef = ref<HTMLDivElement>(); |
|||
const vditorPreviewRef = ref<VditorPreview>(); |
|||
|
|||
const skinName = computed(() => { |
|||
return preferences.theme.mode === 'light' ? 'light' : 'dark'; |
|||
}); |
|||
|
|||
function init() { |
|||
const viewerEl = unref(viewerRef) as HTMLDivElement; |
|||
const isDark = skinName.value === 'dark'; |
|||
VditorPreview.preview(viewerEl, props.value, { |
|||
hljs: { |
|||
style: isDark ? 'dracula' : 'github', |
|||
}, |
|||
mode: isDark ? 'dark' : 'light', |
|||
theme: { |
|||
current: isDark ? 'dark' : 'light', |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
watch( |
|||
() => skinName.value, |
|||
(val) => { |
|||
const isDark = val === 'dark'; |
|||
VditorPreview.setContentTheme(isDark ? 'dark' : 'light', ''); |
|||
VditorPreview.setCodeTheme(isDark ? 'dracula' : 'github'); |
|||
init(); |
|||
}, |
|||
); |
|||
|
|||
watch( |
|||
() => props.value, |
|||
(v, oldValue) => { |
|||
v !== oldValue && nextTick(init); |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
}, |
|||
); |
|||
|
|||
function destroy() { |
|||
const vditorInstance = unref(vditorPreviewRef); |
|||
if (!vditorInstance) return; |
|||
try { |
|||
vditorInstance?.destroy?.(); |
|||
} catch {} |
|||
vditorPreviewRef.value = undefined; |
|||
} |
|||
|
|||
onBeforeUnmount(destroy); |
|||
onDeactivated(destroy); |
|||
</script> |
|||
|
|||
<template> |
|||
<div ref="viewerRef" id="markdownViewer" :class="$props.class"></div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.markdown-viewer { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -1 +1,2 @@ |
|||
export { default as MarkdownEditor } from './Editor.vue'; |
|||
export { default as MarkdownViewer } from './Viewer.vue'; |
|||
|
|||
@ -0,0 +1,44 @@ |
|||
{ |
|||
"name": "@abp/oss", |
|||
"version": "9.1.3", |
|||
"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" |
|||
}, |
|||
"./global": { |
|||
"types": "./global.d.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:*", |
|||
"@vben/stores": "workspace:*", |
|||
"ant-design-vue": "catalog:", |
|||
"vue": "catalog:*", |
|||
"vue-simple-uploader": "catalog:", |
|||
"vxe-table": "catalog:" |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
export { useContainesApi } from './useContainesApi'; |
|||
export { useObjectsApi } from './useObjectsApi'; |
|||
@ -0,0 +1,61 @@ |
|||
import type { |
|||
GetOssContainersInput, |
|||
GetOssObjectsInput, |
|||
OssContainerDto, |
|||
OssContainersResultDto, |
|||
} from '../types/containes'; |
|||
import type { OssObjectsResultDto } from '../types/objects'; |
|||
|
|||
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 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', |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
createApi, |
|||
deleteApi, |
|||
getApi, |
|||
getListApi, |
|||
getObjectsApi, |
|||
}; |
|||
} |
|||
@ -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, |
|||
}; |
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,2 @@ |
|||
export { default as ContainerTable } from './containers/ContainerTable.vue'; |
|||
export { default as ObjectPage } from './objects/ObjectPage.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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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', |
|||
}; |
|||
@ -0,0 +1 @@ |
|||
declare module 'vue-simple-uploader'; |
|||
@ -0,0 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './types'; |
|||
@ -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, |
|||
}; |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue