文档

社区网站开发提示词

通用模板

实现 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 路由问题

// 错误 - 不会自动添加语言前缀
<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