feat: add acknowlegements page
This commit is contained in:
YunYouJun
@@ -61,5 +61,9 @@ onBeforeMount(() => {
|
||||
云游君
|
||||
</ion-text>
|
||||
</ion-item>
|
||||
|
||||
<ion-item router-link="/about/acknowledgements">
|
||||
<ion-label>致谢名单</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</template>
|
||||
|
||||
143
app/constants/acknowledgements.ts
Normal file
143
app/constants/acknowledgements.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* 致谢名单配置
|
||||
*/
|
||||
|
||||
export interface Acknowledgement {
|
||||
/**
|
||||
* 描述或贡献说明
|
||||
*/
|
||||
description?: string
|
||||
/**
|
||||
* 头像或Logo URL
|
||||
*/
|
||||
avatar?: string
|
||||
/**
|
||||
* 社交媒体链接
|
||||
*/
|
||||
links?: {
|
||||
/**
|
||||
* 链接类型（用于显示图标）
|
||||
*/
|
||||
type?: 'github' | 'bilibili' | 'weibo' | 'twitter' | 'wechat' | 'blog' | 'website' | 'email'
|
||||
/**
|
||||
* 显示文本
|
||||
*/
|
||||
label: string
|
||||
/**
|
||||
* 链接地址
|
||||
*/
|
||||
href: string
|
||||
/**
|
||||
* 打开方式
|
||||
*/
|
||||
target?: '_blank' | '_self'
|
||||
}[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 个人致谢名单（简单列表）
|
||||
*/
|
||||
export interface PersonalAcknowledgement {
|
||||
/**
|
||||
* 姓名
|
||||
*/
|
||||
name: string
|
||||
/**
|
||||
* 个人链接（可选）
|
||||
*/
|
||||
link?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 致谢名单
|
||||
*/
|
||||
export const acknowledgements: Acknowledgement[] = [
|
||||
{
|
||||
description: '提供优质的菜谱数据来源',
|
||||
links: [
|
||||
{
|
||||
type: 'bilibili',
|
||||
label: '哔哩哔哩 美食专区',
|
||||
href: 'https://www.bilibili.com/blackboard/dynamic/306882',
|
||||
target: '_blank',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: '感谢所有为本项目贡献代码、提出建议的开发者们',
|
||||
links: [
|
||||
{
|
||||
type: 'github',
|
||||
label: 'Contributors',
|
||||
href: 'https://github.com/YunYouJun/cook/graphs/contributors',
|
||||
target: '_blank',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: '以下开源项目使得项目得以快速实现',
|
||||
links: [
|
||||
{
|
||||
type: 'website',
|
||||
label: 'Nuxt',
|
||||
href: 'https://nuxt.com',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
type: 'website',
|
||||
label: 'Vue',
|
||||
href: 'https://vuejs.org',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
type: 'website',
|
||||
label: 'UnoCSS',
|
||||
href: 'https://unocss.dev',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
type: 'website',
|
||||
label: 'Ionic Framework',
|
||||
href: 'https://ionicframework.com',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
type: 'website',
|
||||
label: 'Capacitor',
|
||||
href: 'https://capacitorjs.com',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
type: 'website',
|
||||
label: 'VueUse',
|
||||
href: 'https://vueuse.org',
|
||||
target: '_blank',
|
||||
},
|
||||
// 其他
|
||||
{
|
||||
type: 'website',
|
||||
label: '其他',
|
||||
href: 'https://github.com/YunYouJun/cook/blob/main/package.json',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
/**
|
||||
* 个人致谢名单
|
||||
*/
|
||||
export const personalAcknowledgements: PersonalAcknowledgement[] = [
|
||||
{
|
||||
name: 'Runny',
|
||||
link: 'https://weibo.com/runny',
|
||||
},
|
||||
{
|
||||
name: '麒麟',
|
||||
},
|
||||
{
|
||||
name: '晴方啾',
|
||||
},
|
||||
{
|
||||
name: '课代表阿伟',
|
||||
},
|
||||
]
|
||||
@@ -6,6 +6,7 @@ export const lastDbUpdated = '2023-11-11 19:51:02'
|
||||
|
||||
export const icp = '苏ICP备17038157号'
|
||||
|
||||
export * from './acknowledgements'
|
||||
export * from './links'
|
||||
|
||||
export const ionDarkClass = 'ion-palette-dark'
|
||||
|
||||
116
app/pages/about/acknowledgements.vue
Normal file
116
app/pages/about/acknowledgements.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import type { PersonalAcknowledgement } from '~/constants/acknowledgements'
|
||||
import { acknowledgements, personalAcknowledgements } from '~/constants/acknowledgements'
|
||||
|
||||
// 图标映射表（提取为常量以提升性能）
|
||||
const ICON_MAP: Record<string, string> = {
|
||||
github: 'i-ri-github-line',
|
||||
bilibili: 'i-ri-bilibili-line',
|
||||
weibo: 'i-ri-weibo-line',
|
||||
twitter: 'i-ri-twitter-x-line',
|
||||
wechat: 'i-ri-wechat-2-line',
|
||||
blog: 'i-ri-article-line',
|
||||
website: 'i-ri-global-line',
|
||||
email: 'i-ri-mail-line',
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据链接类型返回对应的图标类名
|
||||
*/
|
||||
function getIconClass(type?: string): string {
|
||||
return ICON_MAP[type || 'website'] || 'i-ri-links-line'
|
||||
}
|
||||
|
||||
function getLinkKey(ackIndex: number, linkIndex: number): string {
|
||||
return `link-${ackIndex}-${linkIndex}`
|
||||
}
|
||||
|
||||
function getPersonKey(person: PersonalAcknowledgement, index: number): string {
|
||||
return person.link ? `${person.name}-${person.link}` : `${person.name}-${index}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button default-href="/about" />
|
||||
</ion-buttons>
|
||||
<ion-title>致谢</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- 个人致谢名单 -->
|
||||
<ion-list-header>
|
||||
<ion-label class="text-sm op-50">
|
||||
感谢以下朋友在项目早期的支持与帮助
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-list v-if="personalAcknowledgements.length > 0" :inset="true">
|
||||
<!-- 使用 ion-item 展示每个个人 -->
|
||||
<ion-item
|
||||
v-for="(person, index) in personalAcknowledgements"
|
||||
:key="getPersonKey(person, index)"
|
||||
:href="person.link"
|
||||
:target="person.link ? '_blank' : undefined"
|
||||
:button="!!person.link"
|
||||
:detail="!!person.link"
|
||||
lines="full"
|
||||
>
|
||||
<div slot="start" class="h-6 w-6 inline-flex items-center justify-center text-5 color-[var(--ion-color-medium)]" i-ri-user-3-line />
|
||||
<ion-label>
|
||||
<h3 class="m-0 text-[17px] color-[var(--ion-text-color)] font-normal">
|
||||
{{ person.name }}
|
||||
</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<!-- 团队/组织致谢 -->
|
||||
<template v-for="(ack, index) in acknowledgements" :key="index">
|
||||
<ion-list-header>
|
||||
<ion-label class="tracking-wide uppercase opacity-50 text-[13px]! font-medium!">
|
||||
{{ ack.description }}
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-list :inset="true">
|
||||
<!-- 链接列表 -->
|
||||
<ion-item
|
||||
v-for="(link, linkIndex) in ack.links"
|
||||
:key="getLinkKey(index, linkIndex)"
|
||||
:href="link.href"
|
||||
:target="link.target || '_blank'"
|
||||
:detail="true"
|
||||
button
|
||||
>
|
||||
<div v-if="link.type" slot="start" class="inline-flex" :class="getIconClass(link.type)" />
|
||||
<ion-label>{{ link.label }}</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</template>
|
||||
|
||||
<!-- 底部说明 -->
|
||||
<div class="px-4 pb-8 pt-4">
|
||||
<p class="m-0 text-center text-[13px] leading-[1.4] opacity-50">
|
||||
感谢所有支持和帮助过本项目的人们 ❤️
|
||||
</p>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ion-list-header {
|
||||
ion-label {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
ion-list {
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user