Files
continew-admin-ui/src/views/system/config/storage/StorageOss.vue
2025-11-17 21:56:11 +08:00

103 lines
2.8 KiB
Vue

<template>
<div class="list-wrap">
<a-row class="list-row" :gutter="24">
<a-col
v-if="has.hasPermOr(['system:storage:create'])"
:xs="24"
:sm="24"
:md="12"
:lg="8"
:xl="8"
:xxl="6"
class="list-col"
style="min-height: 162px"
>
<CardAdd :type="2" @save-success="search" />
</a-col>
<a-empty v-if="!data.length && !has.hasPermOr(['system:storage:create'])" />
<a-col
v-for="item in data"
:key="item.id"
:xs="24"
:sm="24"
:md="12"
:lg="8"
:xl="8"
:xxl="6"
class="list-col"
style="min-height: 162px"
>
<CardBlock
:loading="loading"
:data="item"
@save-success="search"
>
<template #content>
<a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :widths="['60%']" :rows="3" />
</a-skeleton>
<a-descriptions v-else :column="1">
<a-descriptions-item label="Access Key"><CellCopy :content="item.accessKey" /></a-descriptions-item>
<a-descriptions-item label="Endpoint">
<a-typography-paragraph
:ellipsis="{
rows: 1,
showTooltip: true,
css: true,
}"
>
{{ item.endpoint }}
</a-typography-paragraph>
</a-descriptions-item>
<a-descriptions-item label="Bucket">{{ item.bucketName }}</a-descriptions-item>
<a-descriptions-item label="自定义域名">
<a-typography-paragraph
:ellipsis="{
rows: 1,
showTooltip: true,
css: true,
}"
>
{{ item.domain }}
</a-typography-paragraph>
</a-descriptions-item>
<a-descriptions-item label="启用回收站">{{ item.recycleBinEnabled ? '启用' : '禁用' }}</a-descriptions-item>
<a-descriptions-item label="回收站路径">{{ item.recycleBinPath }}</a-descriptions-item>
</a-descriptions>
</template>
</CardBlock>
</a-col>
</a-row>
</div>
</template>
<script setup lang="ts">
import CardAdd from './components/CardAdd.vue'
import CardBlock from './components/CardBlock.vue'
import type { StorageResp } from '@/apis'
import has from '@/utils/has'
defineProps({
loading: {
type: Boolean,
default: false,
},
data: {
type: Array<StorageResp>,
default: () => [],
},
})
const emit = defineEmits<{
(e: 'save-success'): void
}>()
const search = () => {
emit('save-success')
}
</script>
<style scoped lang="scss">
</style>