rustfs-console/components/object/view.vue

<template>
  <n-page-header @back="router.back()">
    <template #title>
      {{ t('Object Details') }}
    </template>
    <template #extra>
      <div class="flex items-center gap-4 ml-auto">
        <n-button @click="() => download()">
          <Icon name="ri:download-line" class="mr-2" />
          <span>{{ t('Download') }}</span>
        </n-button>

        <n-button @click="() => copySignedUrl()">
          <Icon name="ri:file-copy-line" class="mr-2" />
          <span>{{ t('Copy URL') }}</span>
        </n-button>

        <n-button @click="() => (showPreview = true)">
          <Icon name="ri:eye-line" class="mr-2" />
          <span>{{ t('Preview') }}</span>
        </n-button>

        <n-button @click="() => (showTagView = true)">
          <Icon name="ri:price-tag-3-line" class="mr-2" />
          <span>{{ t('Tags') }}</span>
        </n-button>

        <n-popconfirm @positive-click="deleteObject">
          <template #trigger>
            <n-button ghost type="error">
              <Icon name="ri:delete-bin-7-line" class="mr-2" />
              <span>{{ t('Delete') }}</span>
            </n-button>
          </template>
          {{ t('Delete Confirm', { key }) }}
        </n-popconfirm>

        <n-button @click="() => refresh()">
          <Icon name="ri:refresh-line" class="mr-2" />
          <span>{{ t('Refresh') }}</span>
        </n-button>
      </div>
    </template>
  </n-page-header>
  <n-card :title="t('Info')">
    <div v-if="status === 'pending'" class="flex items-center justify-center">
      <n-spin size="small" />
    </div>
    <n-descriptions :column="1">
      <n-descriptions-item :label="t('Object Name')"
        ><span class="select-all">{{ key }}</span></n-descriptions-item
      >
      <n-descriptions-item :label="t('Object Size')">{{ object?.ContentLength }}</n-descriptions-item>
      <n-descriptions-item :label="t('Object Type')">{{ object?.ContentType }}</n-descriptions-item>
      <!-- <n-descriptions-item label="存储类型">{{ object?.StorageClass }}</n-descriptions-item> -->
      <n-descriptions-item label="ETag"
        ><span class="select-all">{{ object?.ETag }}</span></n-descriptions-item
      >
      <n-descriptions-item :label="t('Last Modified Time')">{{ object?.LastModified }}</n-descriptions-item>
    </n-descriptions>

    <object-preview-modal v-model:show="showPreview" :bucketName="bucketName" :objectKey="key" />

    <!-- tagview -->
    <n-modal v-model:show="showTagView" preset="card" :title="t('Set Tags')" draggable class="max-w-screen-md">
      <n-card class="max-w-screen-md">
        <n-space class="my-4">
          <n-tag
            class="m-2 align-middle"
            v-for="(tag, index) in tags"
            type="info"
            closable
            @close="handledeleteTag(index)"
          >
            {{ tag.Key }}:{{ tag.Value }}
          </n-tag>
        </n-space>
        <n-form ref="formRef" inline class="flex" :label-width="80" :model="tagFormValue">
          <n-form-item :label="t('Tag Key')" path="Key">
            <n-input v-model:value="tagFormValue.Key" :placeholder="t('Tag Key Placeholder')" />
          </n-form-item>
          <n-form-item :label="t('Tag Value')" path="Value">
            <n-input v-model:value="tagFormValue.Value" :placeholder="t('Tag Value Placeholder')" />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" @click="submitTagForm">{{ t('Add') }}</n-button>
            <n-button class="mx-4" @click="showTagView = false">{{ t('Cancel') }}</n-button>
          </n-form-item>
        </n-form>
      </n-card>
    </n-modal>
  </n-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const router = useRouter();
const { $s3Client } = useNuxtApp();
const message = useMessage();
const props = defineProps<{ bucket: string; objectKey: string }>();

const bucketName = computed(() => props.bucket as string);
const { getObjectTagging, putObjectTagging, deleteObjectTagging } = useObject({
  bucket: bucketName.value,
});

// 当前路径的前缀, example: '/folder1/folder2/'
const key = computed(() => decodeURIComponent(props.objectKey as string));

// 预览内容
const showPreview = ref(false);
//  标签
const showTagView = ref(false);
const tagFormValue = ref({
  Key: '',
  Value: '',
});
interface Tag {
  Key: string;
  Value: string;
}
// 获取tags
const tags = ref<Tag[]>([]);
const getTags = async () => {
  const resp: any = await getObjectTagging(key.value);
  tags.value = resp.TagSet || [];
};
getTags();

const dialog = useDialog();
// 删除标签
const handledeleteTag = async (index: number) => {
  dialog.error({
    title: t('Warning'),
    content: t('Delete Tag Confirm'),
    positiveText: t('Confirm'),
    negativeText: t('Cancel'),
    onPositiveClick: async () => {
      putObjectTagging(key.value, {
        TagSet: tags.value.filter((item, keyIndex) => keyIndex !== index),
      })
        .then(() => {
          message.success(t('Tag Update Success'));
          getTags();
        })
        .catch(error => {
          message.error(t('Tag Delete Failed', { error: error.message }));
        });
    },
  });
};

const submitTagForm = async () => {
  const tag = {
    Key: tagFormValue.value.Key,
    Value: tagFormValue.value.Value,
  };
  putObjectTagging(key.value, {
    TagSet: [...tags.value, tag],
  }).then(() => {
    message.success(t('Tag Set Success'));
    getTags();
  });
};

const objectApi = useObject({ bucket: bucketName.value });

// 在服务端获取数据
const { data: object, status, refresh } = useAsyncData(`head-object&${key}`, () => objectApi.headObject(key.value));

const download = async () => {
  const msg = message.loading(t('Getting URL'));
  const url = await objectApi.getSignedUrl(key.value);
  msg.destroy();
  window.open(url, '_blank');
};

const copySignedUrl = async () => {
  const msg = message.loading(t('Getting URL'));
  const url = await objectApi.getSignedUrl(key.value);
  await navigator.clipboard.writeText(url);
  msg.destroy();
  message.success(t('URL Copied'));
};
const deleteObject = async () => {
  await objectApi.deleteObject(key.value);
  message.success(t('Delete Success'));
  router.back();
};
</script>