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

front/composables/useFeatureMeta.ts

@@ -1,6 +1,7 @@
 import { LucideShare, LucideImageMinus, LucideArrowRightLeft } from 'lucide-vue-next'
 import useMyAppConfig from '@/composables/useMyAppConfig'
 import type { FileHandleKey, TextHandleKey } from '../components/Preprocessing/types'
+import generateRandomColors from '@/lib/generateRandomColors'
 
 export type FeatureKey = FileHandleKey | TextHandleKey
 
@@ -8,7 +9,6 @@ export type FeatureMeta = {
     key: FeatureKey
     label: string
     icon: any
-    className: string
 }
 
 const allFeatureMeta = (t: (key: string) => string): FeatureMeta[] => [
@@ -16,25 +16,21 @@ const allFeatureMeta = (t: (key: string) => string): FeatureMeta[] => [
         key: 'file-share',
         label: t('page.upload.file.handleType.file-share'),
         icon: LucideShare,
-        className: 'bg-green-300',
     },
     {
         key: 'file-image-compress',
         label: t('page.upload.file.handleType.file-image-compress'),
         icon: LucideImageMinus,
-        className: 'bg-red-300',
     },
     {
         key: 'file-image-convert',
         label: t('page.upload.file.handleType.file-image-convert'),
         icon: LucideArrowRightLeft,
-        className: 'bg-purple-300',
     },
     {
         key: 'text-share',
         label: t('page.upload.text.handleType.text-share'),
         icon: LucideShare,
-        className: 'bg-green-300',
     },
 ]
 
@@ -44,6 +40,8 @@ export function useFeatureMeta() {
 
     return computed(() => {
         const enabledKeys = appConfig.value?.features ?? []
-        return allFeatureMeta(t).filter((meta) => enabledKeys.includes(meta.key))
+        const result = allFeatureMeta(t).filter((meta) => enabledKeys.includes(meta.key))
+        const colors = generateRandomColors(result.length)
+        return result.map((meta, index) => ({ ...meta, style: { backgroundColor: colors[index] } }))
     })
 }