Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/sxzz/midden. Archive posts and media across platforms, with tenant accounts and Telegram access
Something went wrong. Try again.
2.7 kB · 104 lines
Vue
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105<script setup vapor lang="ts">import { computed } from 'vue'import { groupCollections } from '../presentation'import CollectionFilters from './CollectionFilters.vue'import CollectionRow from './CollectionRow.vue'import CollectionSkeleton from './ui/CollectionSkeleton.vue'import ListButton from './ui/ListButton.vue'import ListSection from './ui/ListSection.vue'import type { Collection, Usage } from '../api'const props = defineProps<{ items: Collection[] showSensitive?: boolean query: string loading: boolean error: string next: string usage?: Usage}>()defineEmits<{ search: [query: string] open: [id: string] more: [] retry: []}>()const groups = computed(() => groupCollections(props.items))const empty = computed( () => !props.loading && !props.error && !props.items.length,)const size = (n: number) => n >= 1073741824 ? `${(n / 1073741824).toFixed(1)} GB` : `${(n / 1048576).toFixed(0)} MB`const storage = computed(() => props.usage ? `已用 ${size(props.usage.used_bytes)}，共 ${size(props.usage.limit_bytes)}${ props.usage.reserved_bytes ? `，${size(props.usage.reserved_bytes)} 正在保存` : '' }` : '',)</script>
<template> <CollectionFilters :key="query" :query="query" @search="$emit('search', $event)" /> <ListSection v-if="error"> <p class="banner" role="alert">{{ error }}</p> <ListButton label="重试" @select="$emit('retry')" /> </ListSection> <ListSection v-for="group in groups" :key="group.label" :title="group.label"> <CollectionRow v-for="a in group.items" :key="a.id" :collection="a" :show-sensitive="showSensitive" @open="$emit('open', $event)" /> </ListSection> <p v-if="empty" class="empty"> {{ query ? '没有匹配的收藏。换个关键词，或清除筛选。' : '这里还是空的。在对话里把链接发给机器人，就会保存到这里。' }} </p> <ListSection v-if="loading"><CollectionSkeleton /></ListSection> <ListSection v-if="next && !loading"> <ListButton :label="loading ? '加载中…' : '加载更多'" :disabled="loading" @select="$emit('more')" /> </ListSection>
<p v-if="storage" class="footnote">{{ storage }}</p></template>
<style scoped>.banner { margin: 0; padding: 14px var(--inset); font-size: 15px; line-height: 1.5;}.empty { margin: 0; padding: 48px 32px; text-align: center; font-size: 15px; line-height: 1.7; color: var(--subtle);}.footnote { margin: 0 0 16px; padding: 0 calc(var(--gutter) + 4px); text-align: center; font-size: 13px; color: var(--subtle);}</style>