# business-dashboard-admin

**Repository Path**: coderlaogu/business-dashboard-admin

## Basic Information

- **Project Name**: business-dashboard-admin
- **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-07-17
- **Last Updated**: 2025-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 创业者之家后台管理端

基于 Next.js 14、TypeScript、Tailwind CSS 和 shadcn/ui 构建的现代化后台管理系统。

## 技术栈

- **框架**: Next.js 14 with App Router
- **语言**: TypeScript
- **样式**: Tailwind CSS
- **UI组件**: shadcn/ui (Radix UI)
- **图标**: Lucide React
- **状态管理**: React hooks
- **数据管理**: 模拟API (可对接真实后端)

## 功能特性

### 🎯 核心功能
- **仪表板**: 系统概览、统计数据、快速操作
- **用户管理**: 用户列表、状态管理、搜索筛选
- **管理员管理**: 管理员账户、权限控制、操作日志
- **内容管理**: 新闻文章管理、分类标签、发布状态
- **商业计划书**: 计划书审核、导出、行业分析
- **系统设置**: 基本配置、安全设置、备份管理

### 🎨 界面特色
- **现代化设计**: 简洁美观的用户界面
- **响应式布局**: 完美适配桌面和移动设备
- **右侧边栏**: 独特的右侧导航设计
- **统一主题**: 一致的设计语言和交互体验
- **暗色模式**: 支持主题切换(待实现)

### 🔧 技术亮点
- **类型安全**: 全面的 TypeScript 支持
- **组件化**: 基于 shadcn/ui 的高质量组件
- **可扩展**: 模块化架构便于功能扩展
- **性能优化**: Next.js 14 App Router 优化
- **开发体验**: 热重载、代码提示、自动格式化

## 快速开始

### 环境要求
- Node.js 18+ 
- pnpm (推荐) 或 npm/yarn

### 安装依赖
```bash
pnpm install
```

### 启动开发服务器
```bash
pnpm dev
```

访问 [http://localhost:3001](http://localhost:3001) 查看应用

### 登录系统
- 访问登录页面：[http://localhost:3001/login](http://localhost:3001/login)
- 测试账户：`admin` / `admin123`
- 🎯 **自动处理CORS**：开发环境无需额外配置
- 🔄 **智能降级**：后端不可用时自动使用模拟数据

### 构建生产版本
```bash
pnpm build
pnpm start
```

## 项目结构

```
business-dashboard-admin/
├── app/                    # Next.js App Router 页面
│   ├── dashboard/         # 仪表板页面
│   ├── users/            # 用户管理页面
│   ├── admins/           # 管理员管理页面
│   ├── news/             # 内容管理页面
│   ├── business-plans/   # 商业计划书页面
│   ├── settings/         # 系统设置页面
│   ├── layout.tsx        # 根布局
│   ├── page.tsx          # 首页(重定向)
│   └── globals.css       # 全局样式
├── components/            # 可复用组件
│   ├── layout/           # 布局组件
│   │   ├── admin-layout.tsx  # 主布局
│   │   ├── header.tsx        # 顶部导航
│   │   └── sidebar.tsx       # 侧边栏
│   └── ui/               # shadcn/ui 组件
├── lib/                  # 工具库
│   ├── api.ts           # API 接口和数据模型
│   └── utils.ts         # 工具函数
├── public/              # 静态资源
└── package.json         # 项目配置
```

## 页面说明

### 1. 仪表板 (`/dashboard`)
- 系统关键指标统计
- 最近用户注册信息
- 系统状态监控
- 快速操作入口

### 2. 用户管理 (`/users`)
- 用户列表展示
- 状态筛选(正常/禁用)
- 搜索功能
- 用户操作(查看/编辑/删除)

### 3. 管理员管理 (`/admins`)
- 管理员账户管理
- 权限控制
- 登录统计
- 安全操作(重置密码/禁用启用)

### 4. 内容管理 (`/news`)
- 新闻文章管理
- 分类和标签
- 发布状态控制
- 统计数据展示

### 5. 商业计划书 (`/business-plans`)
- 计划书审核
- 行业分类统计
- 导出功能
- 状态管理

### 6. 系统设置 (`/settings`)
- 基本信息配置
- 安全设置
- 通知配置
- 备份管理
- 系统监控

## API 集成

### 🔄 智能API架构
系统采用智能降级机制，自动处理后端连接：

1. **开发环境**：通过Next.js代理自动解决CORS问题
2. **后端可用**：直接调用真实API接口
3. **后端不可用**：自动降级使用模拟数据
4. **生产环境**：直接连接后端服务

### 🎯 CORS解决方案
我们通过Next.js API代理完美解决了CORS问题：
- 前端调用：`/api/admin/*`
- 自动转发到：`http://localhost:8232/admin/*`
- 详细说明：参考 [CORS_SOLUTION.md](./CORS_SOLUTION.md)

### 后端API接口规范
```
POST /admin/login           - 管理员登录
GET  /admin/stats           - 仪表板统计  
GET  /admin/users           - 用户列表
GET  /admin/admins          - 管理员列表
GET  /admin/news            - 新闻列表
GET  /admin/business-plans  - 商业计划书列表
```

### 响应格式示例
```json
{
  "success": true,
  "token": "jwt-token",
  "user": {
    "id": 1,
    "username": "admin",
    "nickname": "超级管理员"
  }
}
```

## 自定义配置

### 主题颜色
修改 `tailwind.config.js` 中的颜色配置：

```javascript
theme: {
  extend: {
    colors: {
      primary: "hsl(var(--primary))",
      // 自定义颜色
    }
  }
}
```

### 组件样式
使用 `app/globals.css` 中的 CSS 变量：

```css
:root {
  --primary: 222.2 47.4% 11.2%;
  --secondary: 210 40% 96%;
  /* 更多变量 */
}
```

## 部署

### Vercel (推荐)
```bash
# 连接 GitHub 仓库后自动部署
vercel --prod
```

### Docker
```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3001
CMD ["npm", "start"]
```

### 传统服务器
```bash
pnpm build
pnpm start
```

## 开发指南

### 添加新页面
1. 在 `app/` 目录下创建新文件夹
2. 创建 `page.tsx` 文件
3. 使用 `AdminLayout` 包装页面内容
4. 在 `components/layout/sidebar.tsx` 中添加导航链接

### 添加新组件
1. 在 `components/ui/` 目录下创建组件文件
2. 使用 shadcn/ui 的设计规范
3. 导出组件供其他文件使用

### API 集成
1. 在 `lib/api.ts` 中定义数据类型
2. 实现 API 调用方法
3. 在页面组件中使用 `useEffect` 加载数据

## 贡献

1. Fork 项目
2. 创建功能分支: `git checkout -b feature/new-feature`
3. 提交更改: `git commit -am 'Add new feature'`
4. 推送分支: `git push origin feature/new-feature`
5. 提交 Pull Request

## 许可证

MIT License

## 故障排除

### 登录问题
如果遇到登录问题，请查看 [LOGIN_FIXES.md](./LOGIN_FIXES.md) 获取详细的解决方案。

**常见问题解决**:
1. **hydration警告**: 已修复，组件现在正确处理服务端渲染
2. **JavaScript错误**: 已添加完整的错误边界和空值检查
3. **网络连接问题**: 系统会自动降级到模拟数据

### 调试技巧
- 打开浏览器开发者工具查看详细日志
- 检查网络面板确认API请求状态
- 查看控制台输出了解系统运行状态

## 支持

如有问题或建议，请提交 [Issue](../../issues) 或联系开发团队。