feat(settings): about page

zio/stable
三咲智子 2023-01-03 04:19:36 +08:00
parent 3563b58651
commit c0a2aca98a
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
7 changed files with 146 additions and 59 deletions

View File

@ -1,41 +1,7 @@
<script setup lang="ts">
interface Team {
github: string
display: string
twitter: string
mastodon: string
}
const emit = defineEmits<{
(event: 'close'): void
}>()
const teams: Team[] = [
{
github: 'antfu',
display: 'Anthony Fu',
twitter: 'antfu7',
mastodon: 'antfu@mas.to',
},
{
github: 'patak-dev',
display: 'Patak',
twitter: 'patak_dev',
mastodon: 'patak@webtoo.ls',
},
{
github: 'danielroe',
display: 'Daniel Roe',
twitter: 'danielcroe',
mastodon: 'daniel@roe.dev',
},
{
github: 'sxzz',
display: 'sxzz',
twitter: 'sanxiaozhizi',
mastodon: 'sxzz@mas.to',
},
].sort(() => Math.random() - 0.5)
</script>
<template>

View File

@ -1,9 +1,10 @@
<script lang="ts" setup>
const props = defineProps<{
text?: string
content?: string
description?: string
icon?: string
to: string | Record<string, string>
to?: string | Record<string, string>
command?: boolean
}>()
@ -12,13 +13,19 @@ const router = useRouter()
useCommand({
scope: 'Settings',
name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
name: () => props.text
?? (props.to
? typeof props.to === 'string'
? props.to
: props.to.name
: ''
),
description: () => props.description,
icon: () => props.icon || '',
visible: () => props.command,
visible: () => props.command && props.to,
onActivate() {
router.push(props.to)
router.push(props.to!)
},
})
</script>
@ -28,7 +35,7 @@ useCommand({
:to="to"
exact-active-class="text-primary"
block w-full group focus:outline-none
@click="$scrollToTop"
@click="to ? $scrollToTop() : undefined"
>
<div
w-full flex w-fit px5 py3 md:gap2 gap4 items-center
@ -37,6 +44,7 @@ useCommand({
>
<div flex-1 flex items-center md:gap2 gap4>
<div
v-if="$slots.icon || icon"
flex items-center justify-center flex-shrink-0
:class="$slots.description ? 'w-12 h-12' : ''"
>
@ -50,14 +58,19 @@ useCommand({
<span>{{ text }}</span>
</slot>
</p>
<p v-if="$slots.description" text-sm text-secondary>
<p v-if="$slots.description || description" text-sm text-secondary>
<slot name="description">
{{ description }}
</slot>
</p>
</div>
</div>
<div i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
<p v-if="$slots.content || content" text-sm text-secondary>
<slot name="content">
{{ content }}
</slot>
</p>
<div v-if="to" i-ri:arrow-right-s-line text-xl text-secondary-light class="rtl-flip" />
</div>
</NuxtLink>
</template>

View File

@ -0,0 +1,33 @@
export interface Team {
github: string
display: string
twitter: string
mastodon: string
}
export const teams: Team[] = [
{
github: 'antfu',
display: 'Anthony Fu',
twitter: 'antfu7',
mastodon: 'antfu@mas.to',
},
{
github: 'patak-dev',
display: 'Patak',
twitter: 'patak_dev',
mastodon: 'patak@webtoo.ls',
},
{
github: 'danielroe',
display: 'Daniel Roe',
twitter: 'danielcroe',
mastodon: 'daniel@roe.dev',
},
{
github: 'sxzz',
display: 'sxzz',
twitter: 'sanxiaozhizi',
mastodon: 'sxzz@mas.to',
},
].sort(() => Math.random() - 0.5)

View File

@ -1,5 +1,4 @@
import type { MaybeRef } from '@vueuse/shared'
import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core'
import type { MaybeComputedRef, MaybeRef, UseTimeAgoOptions } from '@vueuse/core'
const formatter = Intl.NumberFormat()
@ -31,7 +30,7 @@ export const useHumanReadableNumber = () => {
}
export const useFormattedDateTime = (
value: MaybeComputedRef<string | Date | undefined | null>,
value: MaybeComputedRef<string | number | Date | undefined | null>,
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
) => {
const { locale } = useI18n()

View File

@ -20,38 +20,38 @@ const isRootPath = computedEager(() => route.name === 'settings')
</div>
</template>
<div xl:w-97 lg:w-78 w-full>
<SettingsNavItem
<SettingsItem
v-if="isHydrated && currentUser "
command
icon="i-ri:user-line"
:text="$t('settings.profile.label')"
to="/settings/profile"
/>
<SettingsNavItem
<SettingsItem
command
icon="i-ri-compasses-2-line"
:text="$t('settings.interface.label')"
to="/settings/interface"
/>
<SettingsNavItem
<SettingsItem
command
icon="i-ri-globe-line"
:text="$t('settings.language.label')"
to="/settings/language"
/>
<SettingsNavItem
<SettingsItem
command
icon="i-ri:settings-2-line"
:text="$t('settings.preferences.label')"
to="/settings/preferences"
/>
<SettingsNavItem
<SettingsItem
command
icon="i-ri-group-line"
:text="$t('settings.users.label')"
to="/settings/users"
/>
<SettingsNavItem
<SettingsItem
command
icon="i-ri:information-line"
:text="$t('settings.about.label')"

View File

@ -1,3 +1,16 @@
<script setup lang="ts">
import buildInfo from 'virtual:build-info'
let showCommit = $ref(false)
const builtTime = useFormattedDateTime(buildInfo.time)
const handleShowCommit = () => {
setTimeout(() => {
showCommit = true
}, 50)
}
</script>
<template>
<MainContent back-on-small-screen>
<template #title>
@ -5,13 +18,76 @@
<span>{{ $t('settings.about.label') }}</span>
</div>
</template>
<div text-center mt-10>
<h1 text-4xl>
🚧
</h1>
<h3 text-xl>
{{ $t('settings.about.label') }}
</h3>
<div flex="~ col gap4" w-full items-center justify-center my5>
<img :alt="$t('app_logo')" src="/logo.svg" w-24 h-24 class="rtl-flip">
<p text-lg>
{{ $t('app_desc_short') }}
</p>
</div>
<template v-if="isHydrated">
<SettingsItem
text="Version"
:to="showCommit ? `https://github.com/elk-zone/elk/commit/${buildInfo.commit}` : undefined"
external target="_blank"
@click="handleShowCommit"
>
<template #content>
<div font-mono>
v{{ buildInfo.version }}
<span v-if="showCommit">({{ buildInfo.commit.slice(0, 7) }})</span>
</div>
</template>
</SettingsItem>
<SettingsItem text="Built time" :content="builtTime" />
</template>
<div h-1px bg-border my2 />
<SettingsItem
:text="$t('nav.show_intro')"
icon="i-ri:article-line"
cursor-pointer
@click="openPreviewHelp"
/>
<SettingsItem
text="Mastodon"
icon="i-ri:mastodon-line"
to="https://m.webtoo.ls/@elk"
external target="_blank"
/>
<SettingsItem
text="Discord"
icon="i-ri:discord-fill"
to="https://chat.elk.zone"
external target="_blank"
/>
<SettingsItem
text="GitHub"
icon="i-ri:github-fill"
to="https://github.com/elk-zone"
external target="_blank"
/>
<div h-1px bg-border my2 />
<template v-if="isHydrated">
<p px5 py3 font-bold text-lg>
Meet the team
</p>
<SettingsItem
v-for="team in teams" :key="team.github"
:text="team.display"
:to="`https://github.com/sponsors/${team.github}`"
external target="_blank"
>
<template #icon>
<img :src="`https://res.cloudinary.com/dchoja2nb/image/twitter_name/h_32,w_32/f_auto/${team.twitter}.jpg`" :alt="team.display" rounded-full w-8 h-8 height="32" width="32">
</template>
</SettingsItem>
</template>
</MainContent>
</template>

View File

@ -12,14 +12,14 @@ definePageMeta({
</div>
</template>
<SettingsNavItem
<SettingsItem
command
icon="i-ri:user-settings-line"
:text="$t('settings.profile.appearance.label')"
:description="$t('settings.profile.appearance.description')"
to="/settings/profile/appearance"
/>
<SettingsNavItem
<SettingsItem
command
icon="i-ri:hashtag"
:text="$t('settings.profile.featured_tags.label')"