From c216c81bb7cff82ad762ab8b0d45b847847d9814 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Mon, 2 Jan 2023 23:00:11 +0800 Subject: [PATCH] feat(settings): metadata (#699) Co-authored-by: LittleSound <464388324@qq.com> --- components/account/AccountHeader.vue | 8 +- .../settings/SettingsProfileMetadata.vue | 58 ++++++++++++ composables/icons.ts | 89 +++++++++++-------- pages/settings/profile/appearance.vue | 51 +++++++---- 4 files changed, 146 insertions(+), 60 deletions(-) create mode 100644 components/settings/SettingsProfileMetadata.vue diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue index 3b9305e0..19c33b06 100644 --- a/components/account/AccountHeader.vue +++ b/components/account/AccountHeader.vue @@ -17,10 +17,6 @@ const createdAt = $(useFormattedDateTime(() => account.createdAt, { const namedFields = ref([]) const iconFields = ref([]) -function getFieldNameIcon(fieldName: string) { - const name = fieldName.trim().toLowerCase() - return ACCOUNT_FIELD_ICONS[name] || undefined -} function getFieldIconTitle(fieldName: string) { return fieldName === 'Joined' ? t('account.joined') : fieldName } @@ -48,7 +44,7 @@ watchEffect(() => { const icons: Field[] = [] account.fields?.forEach((field) => { - const icon = getFieldNameIcon(field.name) + const icon = getAccountFieldIcon(field.name) if (icon) icons.push(field) else @@ -122,7 +118,7 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
-
+
diff --git a/components/settings/SettingsProfileMetadata.vue b/components/settings/SettingsProfileMetadata.vue new file mode 100644 index 00000000..d2be0b30 --- /dev/null +++ b/components/settings/SettingsProfileMetadata.vue @@ -0,0 +1,58 @@ + + + diff --git a/composables/icons.ts b/composables/icons.ts index 5eeb904b..379adad7 100644 --- a/composables/icons.ts +++ b/composables/icons.ts @@ -1,41 +1,52 @@ // @unocss-include -export const ACCOUNT_FIELD_ICONS: Record = { - alipay: 'i-ri:alipay-fill', - bilibili: 'i-ri:bilibili-fill', - birth: 'i-ri:calendar-line', - blog: 'i-ri:newspaper-line', - city: 'i-ri:map-pin-2-line', - dingding: 'i-ri:dingding-fill', - discord: 'i-ri:discord-fill', - douban: 'i-ri:douban-fill', - facebook: 'i-ri:facebook-fill', - github: 'i-ri:github-fill', - gitlab: 'i-ri:gitlab-fill', - home: 'i-ri:home-2-line', - instagram: 'i-ri:instagram-line', - joined: 'i-ri:user-add-line', - linkedin: 'i-ri:linkedin-box-fill', - location: 'i-ri:map-pin-2-line', - mastodon: 'i-ri:mastodon-line', - medium: 'i-ri:medium-fill', - patreon: 'i-ri:patreon-fill', - paypal: 'i-ri:paypal-fill', - playstation: 'i-ri:playstation-fill', - portfolio: 'i-ri:link', - qq: 'i-ri:qq-fill', - site: 'i-ri:link', - sponsors: 'i-ri:heart-3-line', - spotify: 'i-ri:spotify-fill', - steam: 'i-ri:steam-fill', - switch: 'i-ri:switch-fill', - telegram: 'i-ri:telegram-fill', - tumblr: 'i-ri:tumblr-fill', - twitch: 'i-ri:twitch-line', - twitter: 'i-ri:twitter-line', - website: 'i-ri:link', - wechat: 'i-ri:wechat-fill', - weibo: 'i-ri:weibo-fill', - xbox: 'i-ri:xbox-fill', - youtube: 'i-ri:youtube-line', - zhihu: 'i-ri:zhihu-fill', +export const accountFieldIcons: Record = Object.fromEntries(Object.entries({ + Alipay: 'i-ri:alipay-fill', + Bilibili: 'i-ri:bilibili-fill', + Birth: 'i-ri:calendar-line', + Blog: 'i-ri:newspaper-line', + City: 'i-ri:map-pin-2-line', + Dingding: 'i-ri:dingding-fill', + Discord: 'i-ri:discord-fill', + Douban: 'i-ri:douban-fill', + Facebook: 'i-ri:facebook-fill', + GitHub: 'i-ri:github-fill', + GitLab: 'i-ri:gitlab-fill', + Home: 'i-ri:home-2-line', + Instagram: 'i-ri:instagram-line', + Joined: 'i-ri:user-add-line', + LinkedIn: 'i-ri:linkedin-box-fill', + Location: 'i-ri:map-pin-2-line', + Mastodon: 'i-ri:mastodon-line', + Medium: 'i-ri:medium-fill', + Patreon: 'i-ri:patreon-fill', + PayPal: 'i-ri:paypal-fill', + PlayStation: 'i-ri:playstation-fill', + Portfolio: 'i-ri:link', + QQ: 'i-ri:qq-fill', + Site: 'i-ri:link', + Sponsors: 'i-ri:heart-3-line', + Spotify: 'i-ri:spotify-fill', + Steam: 'i-ri:steam-fill', + Switch: 'i-ri:switch-fill', + Telegram: 'i-ri:telegram-fill', + Tumblr: 'i-ri:tumblr-fill', + Twitch: 'i-ri:twitch-line', + Twitter: 'i-ri:twitter-line', + Website: 'i-ri:link', + WeChat: 'i-ri:wechat-fill', + Weibo: 'i-ri:weibo-fill', + Xbox: 'i-ri:xbox-fill', + YouTube: 'i-ri:youtube-line', + Zhihu: 'i-ri:zhihu-fill', +}).sort(([a], [b]) => a.localeCompare(b))) + +const accountFieldIconsLowercase = Object.fromEntries( + Object.entries(accountFieldIcons).map(([k, v]) => + [k.toLowerCase(), v], + ), +) + +export const getAccountFieldIcon = (value: string) => { + const name = value.trim().toLowerCase() + return accountFieldIconsLowercase[name] || undefined } diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue index 58e8cd16..05e9b6d9 100644 --- a/pages/settings/profile/appearance.vue +++ b/pages/settings/profile/appearance.vue @@ -1,4 +1,5 @@ @@ -108,6 +117,18 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {