feat(settings): metadata (#699)

Co-authored-by: LittleSound <464388324@qq.com>
zio/stable
三咲智子 Kevin Deng 2023-01-02 23:00:11 +08:00 committed by GitHub
parent f942ddc5a3
commit c216c81bb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 146 additions and 60 deletions

View File

@ -17,10 +17,6 @@ const createdAt = $(useFormattedDateTime(() => account.createdAt, {
const namedFields = ref<Field[]>([])
const iconFields = ref<Field[]>([])
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)
</div>
<div v-if="iconFields.length" flex="~ wrap gap-4">
<div v-for="field in iconFields" :key="field.name" flex="~ gap-1" items-center>
<div text-secondary :class="getFieldNameIcon(field.name)" :title="getFieldIconTitle(field.name)" />
<div text-secondary :class="getAccountFieldIcon(field.name)" :title="getFieldIconTitle(field.name)" />
<ContentRich text-sm filter-saturate-0 :content="field.value" :emojis="account.emojis" />
</div>
</div>

View File

@ -0,0 +1,58 @@
<script setup lang="ts">
import type { UpdateCredentialsParams } from 'masto'
const { form } = defineModel<{
form: {
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
}
}>()
const fieldIcons = computed(() =>
Array.from({ length: 4 }, (_, i) =>
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
),
)
</script>
<template>
<div flex="~ col gap4">
<div v-for="i in 4" :key="i" flex="~ gap3" items-center>
<CommonDropdown placement="left">
<CommonTooltip content="Pick a icon">
<button btn-action-icon>
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
</button>
</CommonTooltip>
<template #popper>
<div flex="~ wrap gap-1" max-w-50 m2>
<CommonTooltip
v-for="(icon, text) in accountFieldIcons"
:key="icon"
:content="text"
>
<template v-if="text !== 'Joined'">
<div btn-action-icon @click="form.fieldsAttributes[i - 1].name = text">
<div text-xl :class="icon" />
</div>
</template>
</CommonTooltip>
</div>
</template>
</CommonDropdown>
<input
v-model="form.fieldsAttributes[i - 1].name"
type="text"
p2 border-rounded w-full bg-transparent
outline-none border="~ base"
placeholder="Label"
>
<input
v-model="form.fieldsAttributes[i - 1].value"
type="text"
p2 border-rounded w-full bg-transparent
outline-none border="~ base"
placeholder="Content"
>
</div>
</div>
</template>

View File

@ -1,41 +1,52 @@
// @unocss-include
export const ACCOUNT_FIELD_ICONS: Record<string, string> = {
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<string, string> = 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
}

View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import type { UpdateCredentialsParams } from 'masto'
import { useForm } from 'slimeform'
definePageMeta({
@ -7,26 +8,34 @@ definePageMeta({
keepalive: false,
})
const acccount = $computed(() => currentUser.value?.account)
const account = $computed(() => currentUser.value?.account)
const onlineSrc = $computed(() => ({
avatar: acccount?.avatar || '',
header: acccount?.header || '',
avatar: account?.avatar || '',
header: account?.header || '',
}))
const { form, reset, submitter, dirtyFields, isError } = useForm({
form: () => ({
displayName: acccount?.displayName ?? '',
note: acccount?.source.note.replaceAll('\r', '') ?? '',
form: () => {
// For complex types of objects, a deep copy is required to ensure correct comparison of initial and modified values
const fieldsAttributes = Array.from({ length: 4 }, (_, i) => {
return { ...account?.fields?.[i] || { name: '', value: '' } }
})
return {
displayName: account?.displayName ?? '',
note: account?.source.note.replaceAll('\r', '') ?? '',
avatar: null as null | File,
header: null as null | File,
avatar: null as null | File,
header: null as null | File,
// These look more like account and privacy settings than appearance settings
// discoverable: false,
// bot: false,
// locked: false,
}),
fieldsAttributes,
// These look more like account and privacy settings than appearance settings
// discoverable: false,
// bot: false,
// locked: false,
}
},
})
watch(isMastoInitialised, async (val) => {
@ -41,7 +50,7 @@ watch(isMastoInitialised, async (val) => {
const isCanSubmit = computed(() => !isError.value && !isEmptyObject(dirtyFields.value))
const { submit, submitting } = submitter(async ({ dirtyFields }) => {
const res = await useMasto().accounts.updateCredentials(dirtyFields.value)
const res = await useMasto().accounts.updateCredentials(dirtyFields.value as UpdateCredentialsParams)
.then(account => ({ account }))
.catch((error: Error) => ({ error }))
@ -51,7 +60,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
return
}
setAccountInfo(acccount!.id, res.account)
setAccountInfo(account!.id, res.account)
reset()
})
</script>
@ -108,6 +117,18 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
<textarea v-model="form.note" maxlength="500" min-h-10ex input-base />
</label>
<!-- metadata -->
<div space-y-2>
<div font-medium>
Profile metadata
</div>
<div text-sm text-secondary>
You can have up to 4 items displayed as a table on your profile
</div>
<SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
</div>
<!-- submit -->
<div text-right>
<button