142 lines
2.7 KiB
Vue
142 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<MkPagination
|
|
v-slot="{ items }"
|
|
:pagination="pagination"
|
|
class="urempief"
|
|
:class="{ grid: viewMode === 'grid' }"
|
|
>
|
|
<MkA
|
|
v-for="file in items"
|
|
:key="file.id"
|
|
v-tooltip.mfm="
|
|
`${file.type}\n${bytes(file.size)}\n${new Date(
|
|
file.createdAt
|
|
).toLocaleString()}\nby ${
|
|
file.user ? '@' + Acct.toString(file.user) : 'system'
|
|
}`
|
|
"
|
|
:to="`/admin/file/${file.id}`"
|
|
class="file _button"
|
|
>
|
|
<div v-if="file.isSensitive" class="sensitive-label">
|
|
{{ i18n.ts.sensitive }}
|
|
</div>
|
|
<MkDriveFileThumbnail
|
|
class="thumbnail"
|
|
:file="file"
|
|
fit="contain"
|
|
/>
|
|
<div v-if="viewMode === 'list'" class="body">
|
|
<div>
|
|
<small style="opacity: 0.7">{{ file.name }}</small>
|
|
</div>
|
|
<div>
|
|
<MkAcct v-if="file.user" :user="file.user" />
|
|
<div v-else>{{ i18n.ts.system }}</div>
|
|
</div>
|
|
<div>
|
|
<span style="margin-right: 1em">{{ file.type }}</span>
|
|
<span>{{ bytes(file.size) }}</span>
|
|
</div>
|
|
<div>
|
|
<span
|
|
>{{ i18n.ts.registeredDate }}:
|
|
<MkTime :time="file.createdAt" mode="detail"
|
|
/></span>
|
|
</div>
|
|
</div>
|
|
</MkA>
|
|
</MkPagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import * as Acct from "calckey-js/built/acct";
|
|
import MkSwitch from "@/components/ui/switch.vue";
|
|
import MkPagination from "@/components/MkPagination.vue";
|
|
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
|
import bytes from "@/filters/bytes";
|
|
import * as os from "@/os";
|
|
import { i18n } from "@/i18n";
|
|
|
|
const props = defineProps<{
|
|
pagination: any;
|
|
viewMode: "grid" | "list";
|
|
}>();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@keyframes sensitive-blink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.urempief {
|
|
margin-top: var(--margin);
|
|
|
|
&.list {
|
|
> .file {
|
|
display: flex;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
> .thumbnail {
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
|
|
> .body {
|
|
margin-left: 0.3em;
|
|
padding: 8px;
|
|
flex: 1;
|
|
|
|
@media (max-width: 500px) {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
|
grid-gap: 12px;
|
|
margin: var(--margin) 0;
|
|
|
|
> .file {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
|
|
> .thumbnail {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
> .sensitive-label {
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 8px;
|
|
left: 8px;
|
|
padding: 2px 4px;
|
|
background: #ff0000bf;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
font-size: 85%;
|
|
animation: sensitive-blink 1s infinite;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|