GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance About component with feature display and loading states, and refactor feature handling in share drawers for improved user experience

Browse Source
This commit is contained in:
keven1024
2026-04-05 09:46:56 +08:00
parent 28abd8d1a2
commit 7f74441f5d
7 changed files with 54 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/components/About/AboutBaseInfo.vue
View File

@@ -4,12 +4,14 @@ import { Skeleton } from '@/components/ui/skeleton'
import getFileSize from '~/lib/getFileSize'
import SparkMD5 from 'spark-md5'
import useMyAppConfig from '@/composables/useMyAppConfig'
import { useFeatureMeta } from '@/composables/useFeatureMeta'
import Progress from '~/components/ui/progress/Progress.vue'
import renderI18n from '~/lib/renderI18n'
import { I18nT } from 'vue-i18n'
const { locale } = useI18n()
const appConfig = useMyAppConfig()
const featureMeta = useFeatureMeta()
const { data, isLoading } = useQuery({
queryKey: ['about'],
queryFn: async () => {
@@ -107,6 +109,29 @@ const genUserAvatar = (email: string) => {
</div>
</div>
</template>
<template v-if="isLoading">
<Skeleton class="w-full h-24 rounded-xl" />
</template>
<template v-else>
<div class="rounded-xl bg-white/50 flex flex-col p-3 gap-3">
<div class="font-semibold">{{ t('page.about.enabledFeatures') }}</div>
<div v-if="featureMeta.length" class="flex flex-row flex-wrap gap-2">
<div
v-for="feature in featureMeta"
:key="feature.key"
class="flex flex-row items-center gap-2 rounded-full bg-black/5 px-2 py-1 text-sm font-medium"
>
<div class="flex size-6 items-center justify-center rounded-full text-black/80" :style="feature.style">
<component :is="feature.icon" class="size-3.5" />
</div>
<span>{{ feature.label }}</span>
</div>
</div>
<div v-else class="text-sm opacity-75">
{{ t('page.about.enabledFeaturesEmpty') }}
</div>
</div>
</template>
<template v-if="isLoading">
<Skeleton class="w-full h-16 rounded-xl" />
</template>

3
front/components/Drawer/FileShareDrawer.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { cx } from 'class-variance-authority'
import showDrawer from '@/lib/showDrawer'
import FileShareHandle from '@/components/Preprocessing/FileShareHandle.vue'
import ImageConvertHandle from '@/components/Preprocessing/ImageConvertHandle.vue'
@@ -84,7 +83,7 @@ const actions = computed(() =>
}
"
>
<div :class="cx('size-14 flex justify-center items-center rounded-full mx-3', item?.className)">
<div class="size-14 flex justify-center items-center rounded-full mx-3" :style="item?.style">
<component :is="item?.icon" />
</div>
<div class="text-xs truncate w-full text-center">{{ item?.label }}</div>

6
front/components/Drawer/TextShareDrawer.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { cx } from 'class-variance-authority'
import showDrawer from '@/lib/showDrawer'
import TextShareHandle from '@/components/Preprocessing/TextShareHandle.vue'
import { useFeatureMeta, type FeatureKey } from '@/composables/useFeatureMeta'
@@ -38,7 +37,8 @@ const actionHandlers: Partial<Record<FeatureKey, ActionHandler>> = {
const actions = computed(() =>
featureMeta.value
.filter((meta) => {
const handler = actionHandlers?.[meta.key]
const { key } = meta || {}
const handler = actionHandlers?.[key]
return handler && (!handler.condition || handler.condition())
})
.map((meta) => ({ ...meta, onClick: actionHandlers[meta.key]!.onClick }))
@@ -58,7 +58,7 @@ const actions = computed(() =>
}
"
>
<div :class="cx('size-14 flex justify-center items-center rounded-full mx-3', item?.className)">
<div class="size-14 flex justify-center items-center rounded-full mx-3" :style="item?.style">
<component :is="item?.icon" />
</div>
<div class="text-xs truncate w-full text-center">{{ item?.label }}</div>