🚀 Quant-交易平台官网项目

📋 项目概述

OpenQuant 是一个基于 Nuxt 3 和 TypeScript 构建的现代化加密货币量化交易平台官网。该项目采用全栈架构设计，集成了完整的用户认证、数据管理、定时任务调度等功能，前后端一体化开发。

🌟 项目亮点

• 全栈开发：Nuxt 3 + Nitro Server + Prisma ORM，前后端一体化
• 企业级认证：JWT 双 token + 设备指纹识别 + Redis 限流
• 数据可视化：ECharts 图表 + 实时数据看板
• 完整部署：Docker + Docker Compose + Supervisor 进程管理

效果预览

动画效果以及完整内容请点击在线演示浏览

部分截图

🛠️ 技术架构

前端技术栈

后端技术栈

🎯 核心功能

1️⃣ 完善的认证授权体系

双 Token 机制

// 短效 Access Token（30分钟）
export const generateAccessToken = (user) => {
  return pkg.sign(
    { userId, userName, email },
    secret,
    { expiresIn: '30m' }
  )
}

// 长效 Refresh Token（7天）
export const generateRefreshToken = () => {
  return randomBytes(32).toString('hex')
}

🔐 安全防护措施

2️⃣ 数据管理模块

用户管理

• ✅ 基于 Prisma 的 CRUD 操作
• ✅ 分页查询、模糊搜索
• ✅ 角色权限管理（RBAC）
• ✅ 用户头像上传（MinIO 对象存储）

定时任务系统

export class TaskModel {
  async createTask(task) { /* 创建任务 */ }
  async getAllTasks() { /* 获取所有任务 */ }
  async getTaskByStatus(status) { /* 按状态查询 */ }
}

• ✅ 任务创建、编辑、删除
• ✅ Cron 表达式调度
• ✅ 任务执行日志记录
• ✅ 支持手动触发、暂停、恢复

3️⃣ 数据可视化看板

首页数据展示

• ✅ 实时涨跌幅榜
• ✅ 数据轮播展示（ECharts 图表）
• ✅ 交互式卡片切换动画
• ✅ 响应式布局，适配多端

性能展示页面

4️⃣ 请求封装与错误处理

export async function useAxiosFetch<T>(url, options) {
  const { data, status, error, refresh } = await useAsyncData<T>(
    cacheKey,
    async () => await service.request({ url, ...options })
  )
  await handleRequestStatus({ status, error, refresh }, options)
  return { data, error, status, refresh, inRequest }
}

✨ 核心特性

5️⃣ 国际化与主题系统

🌍 多语言支持

• 基于 Nuxt i18n 模块
• 支持中英文切换
• 无前缀路由策略
• 语言偏好持久化到 Cookie

🎨 主题切换

export const useTheme = () => {
  const isDark = ref(userTheme.value === 'dark' || colorMode.value === 'dark')
  const toggleTheme = () => { isDark.value = !isDark.value }
  return { isDark, toggleTheme, setTheme }
}

• 亮色 / 暗色主题切换
• Element Plus 主题适配
• 主题偏好持久化

🚢 部署方案

Docker 容器化部署

多阶段构建

# 构建阶段
FROM node:20-alpine AS builder
RUN pnpm prisma generate && pnpm build

# 运行阶段
FROM node:20-alpine AS runner
# 集成 MySQL + Redis + Supervisor

📦 部署特性

💡 关键技术难点

1️⃣ SSR 与客户端状态同步

问题：Nuxt SSR 环境下，服务端渲染和客户端状态可能不一致

解决方案：

• 使用 Nuxt useState 在服务端和客户端共享状态
• 使用 Cookie 同步认证状态
• 设备指纹在客户端生成后持久化存储

2️⃣ 请求缓存与数据一致性

问题：Nuxt useAsyncData 缓存可能导致数据过期

解决方案：

function createCacheKey(url, options) {
  const stableParams = JSON.stringify({ url, method, params, data })
  return `api_${hashString(stableParams)}`
}

• 基于 URL + 参数生成稳定缓存 Key
• 支持手动 refresh() 刷新数据
• 提供 immediate: false 延迟加载选项

3️⃣ 设备指纹跨设备识别

问题：需要识别用户更换设备时的异常登录

解决方案：

• 收集硬件特征（CPU 核心数、GPU 信息）
• 收集环境特征（User-Agent、时区、存储能力）
• SHA256 哈希生成唯一设备 ID
• 设备 ID 不匹配时强制登出

⚡ 性能优化

📝 开发规范

• ✅ 代码规范：ESLint + Prettier + Husky + Lint-staged
• ✅ 提交规范：Commitlint 规范提交信息
• ✅ 类型安全：全项目 TypeScript 类型定义
• ✅ 文档完善：详细的 README、架构文档、部署指南

📊 项目成果

🎓 技术总结

通过该项目，我深入实践了：

• ✅ Nuxt 3 全栈开发模式
• ✅ 企业级认证安全体系设计
• ✅ 大型前端项目架构设计
• ✅ 数据可视化与交互实现
• ✅ Docker 容器化部署
• ✅ 微服务化模块设计

这个项目展现了我在全栈开发、安全设计、性能优化等方面的综合能力。