# dgut机器人创新实验室网站2

**Repository Path**: Sevenfite/lib_web2

## Basic Information

- **Project Name**: dgut机器人创新实验室网站2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-25
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 机器人创新实验室官网

基于 Next.js 14 构建的现代化实验室官网系统，集成了完整的内容管理功能。

## 🚀 功能特性

### 前台展示
- **响应式设计**: 完美适配桌面和移动设备
- **现代化UI**: 使用 Tailwind CSS 和 Framer Motion 动画
- **SEO优化**: 服务端渲染，搜索引擎友好
- **高性能**: 图片优化，懒加载，代码分割

### 管理后台
- **团队成员管理**: 教授、博士、硕士、本科生分类管理
- **项目管理**: 研究项目展示，状态跟踪，成果记录
- **新闻系统**: 富文本编辑，分类管理，发布控制
- **招新管理**: 在线申请表单，申请状态跟踪
- **媒体库**: 文件上传，图片管理，批量操作
- **网站设置**: 主题配置，导航管理，SEO设置

### 技术栈
- **框架**: Next.js 14 (App Router)
- **UI库**: Tailwind CSS + Headless UI
- **动画**: Framer Motion
- **图标**: Heroicons + Lucide React
- **数据库**: SQLite (可扩展为 PostgreSQL/MySQL)
- **语言**: TypeScript
- **表单**: React Hook Form

## 📦 安装和运行

### 环境要求
- Node.js 18+
- npm 或 yarn

### 快速开始

1. **安装依赖**
```bash
npm install
```

2. **初始化数据库**
数据库会在首次运行时自动创建和初始化。

3. **开发模式**
```bash
npm run dev
```

4. **生产构建**
```bash
# ⚠️ 重要：使用正确的构建命令
npm run build      # 正常构建，不会重置数据
# 或者首次部署时使用：
npm run build:fresh  # 包含数据库初始化
npm start
```

5. **访问网站**
- 前台: http://localhost:3000
- 管理后台: http://localhost:3000/admin

### 管理员登录
- 默认用户名: `admin`
- 默认密码: 见 `.env.production` 配置文件
- **重要**: 部署后请立即修改默认密码

**⚠️ 生产环境请务必修改默认密码！**

## 🏗️ 项目结构

```
├── app/                    # Next.js App Router
│   ├── (site)/            # 前台页面路由组
│   ├── admin/             # 管理后台
│   ├── api/               # API 路由
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 首页
├── components/            # React 组件
│   ├── ui/               # 基础UI组件
│   ├── admin/            # 管理后台组件
│   ├── Header.tsx        # 网站头部
│   └── Footer.tsx        # 网站底部
├── lib/                   # 工具函数
│   └── db.ts             # 数据库连接
├── types/                # TypeScript 类型定义
├── data/                 # 数据存储目录
├── public/               # 静态资源
└── utils/                # 通用工具函数
```

## 🔧 配置说明

### 数据库配置
系统默认使用 SQLite，数据库文件存储在 `data/database.sqlite`。

如需使用其他数据库，修改 `lib/db.ts` 中的连接配置。

### 环境变量
创建 `.env.local` 文件：

```env
# JWT 密钥（生产环境必须修改）
JWT_SECRET=your-jwt-secret-key

# 数据库配置（可选）
DATABASE_URL=sqlite:./data/database.sqlite

# 文件上传配置
MAX_FILE_SIZE=10485760  # 10MB
ALLOWED_FILE_TYPES=image/jpeg,image/png,image/gif,video/mp4

# 邮件配置（可选）
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=your-email@example.com
SMTP_PASS=your-password
```

### 主题定制
在管理后台的"网站设置"中可以修改：
- 网站标题和描述
- 主题颜色
- 导航菜单
- 联系信息
- SEO设置

## 📝 使用指南

### 内容管理流程

1. **添加团队成员**
   - 进入"团队成员"页面
   - 点击"添加成员"
   - 填写基本信息和研究领域
   - 上传头像照片

2. **创建研究项目**
   - 进入"项目管理"页面
   - 点击"新建项目"
   - 填写项目详情和成员
   - 设置项目状态和展示顺序

3. **发布新闻动态**
   - 进入"新闻动态"页面
   - 使用富文本编辑器编写内容
   - 设置分类和发布时间
   - 预览并发布

4. **管理招新信息**
   - 进入"招新管理"页面
   - 创建招新公告
   - 设计申请表单
   - 处理在线申请

5. **管理联系方式**
   - 进入"联系方式管理"页面
   - 添加微信群、公众号、邮箱等联系方式
   - 上传二维码图片（可从媒体库选择或直接上传）
   - 设置显示顺序和可见性
   - 修改后实时在前台"联系我们"区域显示

### 媒体文件管理

支持的文件类型：
- 图片: JPG, PNG, GIF
- 视频: MP4, MOV, AVI
- 文档: PDF

建议的图片尺寸：
- 项目封面: 800x600px
- 成员头像: 400x400px
- 新闻配图: 1200x800px

## 🚀 部署指南

### Vercel 部署（推荐）

1. 推送代码到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量
4. 部署完成

### Docker 部署

```dockerfile
# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]
```

```bash
# 构建和运行
docker build -t lab-website .
docker run -p 3000:3000 -v ./data:/app/data lab-website
```

### 传统服务器部署

1. **安装 Node.js 和 PM2**
```bash
# 安装 PM2
npm install -g pm2
```

2. **首次部署**
```bash
# 克隆代码
git clone <your-repo>
cd lab-website

# 安装依赖
npm ci

# 首次部署 - 初始化数据库
npm run build:fresh

# 启动应用
npm run pm2

# 查看状态
pm2 status
```

3. **后续更新部署**
```bash
# 拉取最新代码
git pull origin master

# 安装新依赖（如有）
npm ci

# 构建应用（不会重置数据）
npm run build

# 重启服务
npm run pm2:restart
```

**🚨 重要提醒**：
- **首次部署**使用 `npm run build:fresh` 初始化数据库
- **后续更新**使用 `npm run build` 避免数据丢失
- 重启服务后，所有用户数据（新闻、联系方式等）都会保留

3. **配置 Nginx**
```nginx
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # 静态文件缓存
    location /uploads/ {
        alias /path/to/your/app/public/uploads/;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}
```

## 🔒 安全配置

### 生产环境检查清单

- [ ] 修改默认管理员密码
- [ ] 设置强JWT密钥
- [ ] 配置HTTPS
- [ ] 设置文件上传限制
- [ ] 配置防火墙规则
- [ ] 定期备份数据库
- [ ] 监控系统日志

### 用户权限管理

系统支持三种用户角色：
- **管理员**: 完全访问权限
- **编辑者**: 内容管理权限
- **查看者**: 只读权限

## 🛠️ 开发指南

### 代码规范
- 使用 TypeScript 严格模式
- 遵循 ESLint 规则
- 使用 Prettier 格式化代码
- 组件使用函数式写法

### Git 提交规范
```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具变动
```

### 添加新功能

1. **创建数据模型**
在 `types/index.ts` 中定义接口

2. **创建API路由**
在 `app/api/` 中添加路由处理

3. **创建管理界面**
在 `app/admin/` 中添加管理页面

4. **创建前台展示**
在 `app/` 中添加展示页面

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🆘 支持

如遇问题，请：

1. 查看本文档
2. 搜索已有 [Issues](https://github.com/your-repo/issues)
3. 创建新 Issue 描述问题

## 🙏 致谢

感谢所有为这个项目做出贡献的开发者！

特别感谢：
- [Next.js](https://nextjs.org/) - React 框架
- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
- [Headless UI](https://headlessui.com/) - UI 组件库
- [Framer Motion](https://framer.com/motion/) - 动画库