Skip to content

Commit c9b1e6f

Browse files
byodianbyodian
committed
chore: add sponsor page
1 parent 4bc8a95 commit c9b1e6f

File tree

16 files changed

+516
-11
lines changed

16 files changed

+516
-11
lines changed

‎public/images/alipay_qrcode.png

442 KB
Loading

‎public/images/wechat_qrcode.png

467 KB
Loading

‎src/app/globals.css

+11
Original file line numberDiff line numberDiff line change
@@ -255,3 +255,14 @@ html[data-platform=windows] ::-webkit-scrollbar-thumb {
255255
html[data-platform=windows] ::-webkit-scrollbar-thumb:hover {
256256
background-color: var(--scrollbar-thumb-hover)
257257
}
258+
259+
260+
261+
@layer base {
262+
* {
263+
@apply border-border outline-ring;
264+
}
265+
body {
266+
@apply bg-background text-foreground;
267+
}
268+
}

‎src/app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function RootLayout({
7272
}>) {
7373
return (
7474
<html lang="en" className="h-full break-words overflow-hidden" data-platform={getPlatform()}>
75-
<body className={cn('h-full overflow-hidden antialiased', notoSansSc.variable, zCoolKuaiLe.variable)}>
75+
<body className={cn('h-full antialiased', notoSansSc.variable, zCoolKuaiLe.variable)}>
7676
<NextAppDirEmotionCacheProvider options={{ key: 'tss' }}>
7777
{children}
7878
<Toaster />

‎src/app/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,8 @@ export default function Home() {
190190
<Preview ref={previewRef} contents={contents} className="w-full flex flex-col m-auto" />
191191
</div>
192192
</TabsContent>
193-
<TabsContent value="workspace" forceMount className="data-[state=inactive]:hidden sm:flex-grow sm:!block overflow-auto">
194-
<div className="h-full flex-grow flex justify-center items-start bg-card text-card-foreground">
193+
<TabsContent value="workspace" forceMount className="data-[state=inactive]:hidden flex-grow sm:!block overflow-auto">
194+
<div className={cn('min-h-full flex-grow flex justify-center bg-card text-card-foreground', contents.length > 0 && 'items-start')}>
195195
<Workspace
196196
contents={contents}
197197
setContents={setContents}

‎src/app/sponsor/components/sponsor-hero.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Image from 'next/image'
2+
3+
export function SponsorHero() {
4+
return (
5+
<div className="mb-12">
6+
<div className="mb-8 text-center">
7+
<h1 className="mb-6 text-3xl font-bold tracking-tight">成为 OneIMG 的赞助者</h1>
8+
<p className="mb-2 text-lg">
9+
OneIMG 是采用 MIT 许可的开源项目，使用完全免费。
10+
</p>
11+
<p className="text-lg">
12+
项目维护和新功能开发需要大量努力，只有在赞助者的支持下才能持续进行。
13+
</p>
14+
</div>
15+
16+
<div className="p-6">
17+
<div className="flex flex-col md:flex-row gap-8 items-center justify-center">
18+
<div className="flex-shrink-0 h-[330px]">
19+
<Image
20+
src="/images/alipay_qrcode.png"
21+
alt="赞助二维码"
22+
width={200}
23+
height={200}
24+
className="rounded-lg shadow-sm h-full"
25+
/>
26+
</div>
27+
<div className="flex-shrink-0 h-[330px]">
28+
<Image
29+
src="/images/wechat_qrcode.png"
30+
alt="赞助二维码"
31+
width={200}
32+
height={200}
33+
className="rounded-lg shadow-sm h-full"
34+
/>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
)
40+
}

‎src/app/sponsor/components/sponsor-list.tsx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { CircleUserRoundIcon } from 'lucide-react'
2+
import {
3+
Table,
4+
TableBody,
5+
TableCaption,
6+
TableCell,
7+
TableHead,
8+
TableHeader,
9+
TableRow,
10+
} from '@/components/ui/table'
11+
12+
import { Badge } from '@/components/ui/badge'
13+
import { Button } from '@/components/ui/button'
14+
interface Sponsor {
15+
id: string
16+
name: string
17+
tier: 'diamond' | 'gold' | 'silver' | 'bronze'
18+
logo: string
19+
website: string
20+
description: string
21+
amount: number
22+
}
23+
24+
const sponsors: Sponsor[] = [
25+
{
26+
id: '1',
27+
name: '微信用户 st***9',
28+
tier: 'bronze',
29+
logo: '/sponsors/tech-corp.png',
30+
website: '',
31+
description: 'oneimg 好用',
32+
amount: 66.66,
33+
},
34+
]
35+
36+
const tierColors = {
37+
diamond: 'bg-violet-100 text-violet-800',
38+
gold: 'bg-yellow-100 text-yellow-800',
39+
silver: 'bg-gray-100 text-gray-800',
40+
bronze: 'bg-orange-100 text-orange-800',
41+
}
42+
43+
const tierNames = {
44+
diamond: '钻石赞助者',
45+
gold: '金牌赞助者',
46+
silver: '银牌赞助者',
47+
bronze: '铜牌赞助者',
48+
}
49+
50+
export function SponsorList() {
51+
return (
52+
<div className="rounded-md border w-[960px] mx-auto">
53+
<Table>
54+
<TableCaption className="mb-4">赞助时，您可以留下想分享的话语或宣传内容。</TableCaption>
55+
<TableHeader>
56+
<TableRow>
57+
<TableHead className="w-[100px]">Logo</TableHead>
58+
<TableHead>用户</TableHead>
59+
<TableHead>级别</TableHead>
60+
<TableHead>金额(¥)</TableHead>
61+
<TableHead className="hidden md:table-cell">备注</TableHead>
62+
</TableRow>
63+
</TableHeader>
64+
<TableBody>
65+
{sponsors.map(sponsor => (
66+
<TableRow key={sponsor.id}>
67+
<TableCell>
68+
<Button variant="ghost" className="">
69+
<CircleUserRoundIcon className="w-6 h-6"/>
70+
</Button>
71+
</TableCell>
72+
<TableCell>
73+
<a
74+
href={sponsor.website}
75+
target="_blank"
76+
rel="noopener noreferrer"
77+
className="font-medium hover:underline">
78+
{sponsor.name}
79+
</a>
80+
</TableCell>
81+
<TableCell>
82+
<Badge className={tierColors[sponsor.tier]}>
83+
{tierNames[sponsor.tier]}
84+
</Badge>
85+
</TableCell>
86+
<TableCell>
87+
{sponsor.amount}
88+
</TableCell>
89+
<TableCell className="hidden md:table-cell text-muted-foreground">
90+
{sponsor.description}
91+
</TableCell>
92+
</TableRow>
93+
))}
94+
</TableBody>
95+
</Table>
96+
</div>
97+
)
98+
}

‎src/app/sponsor/page.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { Metadata } from 'next'
2+
import Image from 'next/image'
3+
import { SponsorHero } from './components/sponsor-hero'
4+
import { SponsorList } from './components/sponsor-list'
5+
import { Logo } from '@/components/logo'
6+
import { Button } from '@/components/ui/button'
7+
8+
export const metadata: Metadata = {
9+
title: '赞助列表',
10+
}
11+
12+
export default function SponsorPage() {
13+
return (
14+
<div className="flex flex-col h-full">
15+
<header className="h-[58px] flex gap-4 items-center px-4 border-b border-b-gray-200">
16+
<div>
17+
<Button variant="ghost">
18+
<a href="/" rel="noreferrer">
19+
<Logo type="full" />
20+
</a>
21+
</Button>
22+
</div>
23+
<div className="ml-auto">
24+
<Button size="sm" asChild variant="ghost" className="py-2 px-2">
25+
<a href="https://github.com/byodian/oneimg" target="_blank" rel="noreferrer">
26+
<Image src="/images/github.svg" alt="github icon" className="w-4 h-4 mr-2" width={24} height={24} />
27+
<span>Github</span>
28+
</a>
29+
</Button>
30+
</div>
31+
32+
</header>
33+
<main className="overflow-auto h-[calc(100%-58px)]">
34+
<div className="container mx-auto py-8 px-4 overflow-auto">
35+
<SponsorHero />
36+
<SponsorList />
37+
</div>
38+
</main>
39+
</div>
40+
)
41+
}

‎src/components/header/header.tsx

+28-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { BookOpen, ChevronDown, Download, Folder, ImageDown, LinkIcon, MessageSquareMore, Trash2, TriangleAlert } from 'lucide-react'
3+
import { BookOpen, ChevronDown, CoffeeIcon, Download, Folder, ImageDown, LinkIcon, MessageSquareMore, Trash2, TriangleAlert } from 'lucide-react'
44
// import Link from 'next/link'
55
import { useEffect, useRef, useState } from 'react'
66
import Image from 'next/image'
@@ -306,8 +306,23 @@ export function Header(props: HeaderProps) {
306306
<BookOpen className="w-4 h-4 mr-2" />
307307
<span>指南</span>
308308
</MenubarItem>
309-
<MenubarItem asChild className="">
310-
<a href="https://support.qq.com/product/673291" target="_blank" rel="noreferrer">
309+
<Tooltip delayDuration={0}>
310+
<TooltipTrigger className="w-full px-2 py-1.5 hidden sm:block">
311+
<div className="flex items-center text-sm">
312+
<MessageSquareMore className="w-4 h-4 mr-2" />
313+
<span>反馈建议</span>
314+
</div>
315+
</TooltipTrigger>
316+
<TooltipContent side="right" sideOffset={-50}>
317+
<div className="rounded-sm px-2 py-1.5 text-white bg-black text-sm">
318+
<p>您有任何问题或改进建议，</p>
319+
<p>可以发送电子邮件至 support@oneimgai.com</p>
320+
<p>或者添加微信 <span className="font-bold">byo952</span> 与我们取得联系。</p>
321+
</div>
322+
</TooltipContent>
323+
</Tooltip>
324+
<MenubarItem asChild className="sm:hidden">
325+
<a href="mailto:support@oneimgai.com?subject=改进建议或问题反馈&body=您好，%0A%0A我想反馈以下问题或提供一些改进建议： %0A%0A[请在这里描述您的问题或建议]%0A%0A系统信息%0A操作系统：%0A浏览器：%0A应用版本：%0A%0A谢谢！" target="_blank" rel="noreferrer">
311326
<MessageSquareMore className="w-4 h-4 mr-2" />
312327
<span>反馈建议</span>
313328
</a>
@@ -398,12 +413,19 @@ export function Header(props: HeaderProps) {
398413
</MenubarMenu >
399414
</Menubar >
400415
<div className="flex flex-wrap gap-2 ml-auto">
401-
<Button size="sm" asChild variant="ghost" className="py-2 px-2">
416+
<Button size="sm" asChild variant="ghost" className="py-2 px-2 hidden md:block">
402417
<a href="https://github.com/byodian/oneimg" target="_blank" rel="noreferrer">
403-
<Image src="/images/github.svg" alt="github icon" className="w-6 h-6" width={24} height={24} />
418+
<Image src="/images/github.svg" alt="github icon" className="w-4 h-4 mr-2" width={24} height={24} />
419+
<span>Github</span>
420+
</a>
421+
</Button>
422+
<Button size="sm" asChild variant="ghost" className="py-2 px-2">
423+
<a href="/sponsor" rel="noreferrer">
424+
<CoffeeIcon className="w-4 h-4 mr-2" />
425+
<span>赞助</span>
404426
</a>
405427
</Button>
406-
<Button size="sm" onClick={handleImageExportDialogOpen}>
428+
<Button size="sm" onClick={handleImageExportDialogOpen} className="hidden md:flex">
407429
<ImageDown className="w-4 h-4 mr-2" />
408430
<span>导出图片</span>
409431
</Button>

0 commit comments

Comments
 (0)