i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-03 23:02:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign usage limits section on about pages (#173)

Browse Source 
- Redesign usage limits card with gradient border and modern styling
- Remove emojis and combine title/subtitle on same line
- Make all 3 language pages (EN/CN/JP) consistent in design
- Update text content with exact localized wording
- Add warning triangle icon in chat panel linking to about page
- Add 'Learn more' link in quota limit toast
- Open about page links in new tab to preserve diagram state
This commit is contained in:
Dayuan Jiang
2025-12-08 20:26:51 +09:00
committed by GitHub
parent 622829b903
commit ac09f9f8f9
5 changed files with 303 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
app/about/cn/page.tsx
View File

@@ -85,12 +85,96 @@ export default function AboutCN() {
</div>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
<p className="text-amber-800">
本应用设计运行于 Claude Opus 4.5
以获得最佳性能。但由于流量超出预期，运行顶级模型的成本变得难以承受。为避免服务中断并控制成本，我已将后端切换至
Claude Haiku 4.5。
</p>
<div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
<div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
{/* Header */}
<div className="mb-4">
<h3 className="text-lg font-bold text-gray-900 tracking-tight">
关于扩容与限制{" "}
<span className="text-sm text-amber-600 font-medium italic font-normal">
(或者说：我的钱包顶不住了)
</span>
</h3>
</div>
{/* Story */}
<div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
<p>
大家对这个项目的热情太高了——看来大家都真的很喜欢画图！但这也带来了一个幸福的烦恼：我们经常触发出上游
AI 接口的频率限制
(TPS/TPM)。一旦超限，系统就会暂停，导致请求失败。
</p>
<p>
作为一个
<span className="font-semibold text-amber-700">
独立开发者
</span>
，目前的 API
费用全是我自己在掏腰包（纯属为爱发电）。为了保证服务能细水长流，同时也为了避免我个人陷入财务危机，我不得不设置以下临时用量限制：
</p>
</div>
{/* Limits Cards */}
<div className="grid grid-cols-2 gap-3 mb-5">
<div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
<div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
Token 用量
</div>
<div className="text-lg font-bold text-gray-900">
5万
<span className="text-sm font-normal text-gray-600">
/分钟
</span>
</div>
<div className="text-lg font-bold text-gray-900">
50万
<span className="text-sm font-normal text-gray-600">
/天
</span>
</div>
</div>
<div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
<div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
每日请求数
</div>
<div className="text-2xl font-bold text-gray-900">
20
</div>
<div className="text-sm text-gray-600">
次
</div>
</div>
</div>
{/* Divider */}
<div className="flex items-center gap-3 my-5">
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
</div>
{/* Sponsorship CTA */}
<div className="text-center">
<h4 className="text-base font-bold text-gray-900 mb-2">
寻求赞助 (求大佬捞一把)
</h4>
<p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
要想彻底解除这些限制，扩容后端是唯一的办法。我正在积极寻求
AI API 提供商或云平台的赞助。
</p>
<p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
作为回报（无论是额度支持还是资金支持），我将在
GitHub 仓库和 Live Demo
网站的显眼位置展示贵公司的 Logo
作为平台赞助商。
</p>
<a
href="mailto:me@jiang.jp"
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
>
联系我
</a>
</div>
</div>
</div>
<p className="text-gray-700">