1. Tailwind CSS 配置
1.1 自定义主题配置
// tailwind.config.ts
import type { Config } from 'tailwindcss'const config: Config = {content: ['./src/pages/**/*.{js,ts,jsx,tsx,mdx}','./src/components/**/*.{js,ts,jsx,tsx,mdx}','./src/app/**/*.{js,ts,jsx,tsx,mdx}',],theme: {extend: {colors: {primary: {50: '#f0f9ff',100: '#e0f2fe',200: '#bae6fd',300: '#7dd3fc',400: '#38bdf8',500: '#0ea5e9',600: '#0284c7',700: '#0369a1',800: '#075985',900: '#0c4a6e',},secondary: {// 添加次要颜色DEFAULT: '#10b981',},},fontFamily: {sans: ['var(--font-inter)'],},},},plugins: [require('@tailwindcss/forms')],
}export default config1.2 全局样式设置
/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;@layer components {.btn-primary {@apply px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;}.btn-secondary {@apply px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2;}.input-primary {@apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500;}
}2. 布局组件创建
2.1 导航栏组件
// src/components/layout/Navbar.tsx
'use client'import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'const navigation = [{ name: '首页', href: '/' },{ name: 'AI测评', href: '/assessment' },{ name: '情绪检测', href: '/emotion' },{ name: '在线咨询', href: '/consultation' },{ name: '社区', href: '/community' },
]export default function Navbar() {const pathname = usePathname()const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)return (<nav className="bg-white shadow"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div className="flex justify-between h-16"><div className="flex"><div className="flex-shrink-0 flex items-center"><Link href="/" className="text-2xl font-bold text-primary-600">MindAI</Link></div><div className="hidden sm:ml-6 sm:flex sm:space-x-8">{navigation.map((item) => (<Linkkey={item.name}href={item.href}className={`${pathname === item.href? 'border-primary-500 text-gray-900': 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}>{item.name}</Link>))}</div></div>{/* 移动端菜单按钮 */}<div className="sm:hidden"><buttontype="button"className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}><span className="sr-only">打开主菜单</span>{/* 这里可以添加汉堡菜单图标 */}</button></div></div></div>{/* 移动端菜单 */}{isMobileMenuOpen && (<div className="sm:hidden"><div className="pt-2 pb-3 space-y-1">{navigation.map((item) => (<Linkkey={item.name}href={item.href}className={`${pathname === item.href? 'bg-primary-50 border-primary-500 text-primary-700': 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium`}>{item.name}</Link>))}</div></div>)}</nav>)
}2.2 页面布局组件
// src/components/layout/PageLayout.tsx
import Navbar from './Navbar'
import Footer from './Footer'export default function PageLayout({children,
}: {children: React.ReactNode
}) {return (<div className="min-h-screen flex flex-col"><Navbar /><main className="flex-grow"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">{children}</div></main><Footer /></div>)
}2.3 页脚组件
// src/components/layout/Footer.tsx
export default function Footer() {return (<footer className="bg-white border-t"><div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"><div className="grid grid-cols-1 md:grid-cols-4 gap-8"><div><h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">关于我们</h3><p className="mt-4 text-base text-gray-500">MindAI致力于提供智能化的心理健康服务，让每个人都能便捷地获得专业的心理支持。</p></div><div><h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">服务</h3><ul className="mt-4 space-y-4"><li><a href="#" className="text-base text-gray-500 hover:text-gray-900">AI心理测评</a></li><li><a href="#" className="text-base text-gray-500 hover:text-gray-900">情绪分析</a></li><li><a href="#" className="text-base text-gray-500 hover:text-gray-900">在线咨询</a></li></ul></div>{/* 可以添加更多列 */}</div><div className="mt-8 border-t border-gray-200 pt-8"><p className="text-base text-gray-400 text-center">© {new Date().getFullYear()} MindAI. All rights reserved.</p></div></div></footer>)
}3. 路由系统设计
3.1 创建基础页面结构
src/app/
├── page.tsx # 首页
├── assessment/ # AI测评
│ ├── page.tsx # 测评首页
│ ├── [type]/ # 具体测评类型
│ │ └── page.tsx
│ └── result/ # 测评结果
│ └── page.tsx
├── emotion/ # 情绪检测
│ ├── page.tsx
│ └── history/
│ └── page.tsx
├── consultation/ # 在线咨询
│ ├── page.tsx
│ └── [id]/
│ └── page.tsx
└── community/ # 社区
├── page.tsx
└── post/
└── [id]/
└── page.tsx
3.2 实现动态路由示例
// src/app/assessment/[type]/page.tsx
type Props = {params: {type: string}
}export default function AssessmentPage({ params }: Props) {return (<div><h1 className="text-2xl font-bold mb-4">{decodeURIComponent(params.type)}测评</h1>{/* 测评内容 */}</div>)
}4. 响应式设计实现
4.1 创建响应式容器组件
// src/components/ui/Container.tsx
type ContainerProps = {children: React.ReactNodeclassName?: string
}export function Container({ children, className = '' }: ContainerProps) {return (<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${className}`}>{children}</div>)
}4.2 创建响应式卡片组件
// src/components/ui/Card.tsx
type CardProps = {title?: stringchildren: React.ReactNodeclassName?: string
}export function Card({ title, children, className = '' }: CardProps) {return (<div className={`bg-white rounded-lg shadow-sm overflow-hidden ${className}`}>{title && (<div className="px-4 py-5 sm:px-6"><h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3></div>)}<div className="px-4 py-5 sm:p-6">{children}</div></div>)
}5 .启动和测试
5.1 更新根布局
// src/app/layout.tsx
import { Inter } from 'next/font/google'
import PageLayout from '@/components/layout/PageLayout'
import './globals.css'const inter = Inter({ subsets: ['latin'] })export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="zh-CN"><body className={inter.className}><PageLayout>{children}</PageLayout></body></html>)
}5.2 测试响应式布局
在浏览器中调整窗口大小，确保所有组件都能正确响应不同的屏幕尺寸。
6. 下一步计划
- 实现数据库集成
- 创建用户认证系统
- 开发AI功能模块
- 实现具体业务功能
