开发指南社区网站开发提示词
社区网站开发提示词
通用模板
实现 xx 功能
通过 bun type-check 来检查类型错误并修复 通过类似 curl http://localhost:3000/xx 来获取相应页面的内容并检测是否成功
xxx
对xxx,yyy, zzz 等组件,按最佳实践进行通用化模块化拆解,然后重构这些组件,确保100% 还原原来组件的功能和逻辑。
shadcn/ui 组件使用规范
- 基于 shadcn/ui v2 + Radix UI v1.x + Tailwindcss v4
- 核心规则
- Button 组件
- `variant`: `"default"` | `"destructive"` | `"outline"` | `"secondary"` | `"ghost"` | `"link"`
- `size`: `"default"` | `"sm"` | `"lg"` | `"icon"`
- 使用 `disabled` 属性,不要使用 `loading`
- Badge 组件
- `variant`: `"default"` | `"secondary"` | `"destructive"` | `"outline"`
- ❌ 不要使用 `status` 属性
- 常见错误
- ❌ `variant="primary"` → ✅ `variant="default"`
- ❌ `variant="error"` → ✅ `variant="destructive"`
- ❌ `size="md"` → ✅ `size="default"`
- ❌ `status="info"` → ✅ `variant="secondary"`
(public) 页面开发规范 AI 开发提示词模板
在 src/app/(public)/[locale]/ 下创建一个新的 [页面名称] 页面均需遵循如下要求:
- 使用 container max-w-6xl pt-32 pb-16 作为主容器: `pt-32`: 为固定navbar留出空间
- 包含标准的标题区域布局
- **标题区域**: 使用 `mb-12 pt-8 text-center`
- 标题: `mb-2 font-bold text-5xl`
- 描述: `text-lg opacity-50`
- 实现 generateMetadata 函数用于SEO
- 使用 next-intl 进行国际化
- 对于内部导航链接,应该使用 LocaleLink
- 遵循项目的 shadcn/ui 组件规范
- 确保响应式设计
- 通过 bun type-check 检查类型错误
参考现有页面:
- `src/app/(public)/[locale]/blog/page.tsx` - 博客列表页
- `src/app/(public)/[locale]/contact/page.tsx` - 联系页面
Next-intl 路由问题
1. 需要使用 LocaleLink 代替 Link
// 错误 - 不会自动添加语言前缀
<Link href="/events">Events</Link>
// 正确 - 自动处理国际化路径
<LocaleLink href="/events">Events</LocaleLink>
2. 在 next.config.ts 添加重定向规则
因为 next-intl 的
as-needed
有bug ,在本仓库中无法正确生效
关键步骤:为缺少语言前缀的路径添加重定向到默认语言:
// next.config.ts
async redirects() {
return [
{
source: "/events/:path*",
destination: "/en/events/:path*", // 处理子路径
permanent: false,
},
];
},
创建 app 路由页面时使用以下布局模式:
在 (app)/(account) 路由下创建页面时,页面会自动包含 app navbar。使用此布局结构:
参考: src/app/(app)/app/events/create/page.tsx
一些规范
- 统一使用 UserAvatar 以及 OrganizationLogo