Evoliant Docs

简体中文

English

外观

概览

约 1064 字大约 4 分钟

2025-08-16

系统架构

Evoliant 前端基于 Nuxt 4 构建，采用现代化的全栈框架架构，主要包含以下技术栈：

核心技术栈

  • 框架：Nuxt 4 + Vue 3 Composition API
  • 语言：TypeScript（完整类型支持）
  • 样式：Tailwind CSS v4.1.11 + shadcn/ui 组件库
  • 状态管理：Pinia + Supabase 状态同步
  • 认证：@nuxtjs/supabase v1.6.0
  • 包管理：pnpm 10.14.0

核心组件

  • 认证系统：完整的用户注册、登录、角色管理
  • UI 组件库：基于 shadcn/ui 的设计系统
  • 知识图谱：3D 可视化组件（基于 Three.js 和 D3.js）
  • 响应式设计：支持移动端和桌面端
  • 实时功能：Supabase 实时数据同步

项目结构

frontend/
├── app/                    # Nuxt 4 应用目录
│   ├── assets/            # 静态资源
│   │   ├── css/          # 样式文件
│   │   └── images/       # 图片资源
│   ├── components/        # Vue 组件
│   │   ├── ui/           # UI 组件库 (shadcn/ui)
│   │   ├── layout/       # 布局组件
│   │   └── KnowledgeGraph/ # 知识图谱组件
│   ├── composables/       # Vue 组合式函数
│   ├── layouts/          # 页面布局
│   ├── middleware/       # 路由中间件
│   ├── pages/            # 页面组件 (文件路由)
│   ├── plugins/          # Nuxt 插件
│   ├── stores/           # Pinia 状态管理
│   ├── types/            # TypeScript 类型定义
│   └── utils/            # 工具函数
├── lib/                   # 共享库文件
├── public/               # 公共静态资源
├── nuxt.config.ts        # Nuxt 配置
├── tailwind.config.js    # Tailwind CSS 配置
└── package.json          # 依赖管理

技术特性

开发体验

  • TypeScript 全覆盖：严格类型检查，类型安全
  • 文件路由：基于文件系统的自动路由生成
  • 热重载：开发时实时预览
  • 组件自动导入：无需手动导入常用组件
  • SSR/SSG 支持：服务端渲染和静态生成

UI/UX 特性

  • 响应式设计：移动优先的设计理念
  • 主题系统：支持亮色/暗色主题切换
  • 动画系统：流畅的页面过渡和组件动画
  • 无障碍访问：ARIA 标准支持
  • 国际化：多语言支持准备

性能优化

  • 代码分割：自动的路由级代码分割
  • 资源预加载：智能的资源预加载策略
  • 图片优化：自动图片压缩和格式转换
  • 缓存策略：静态资源长期缓存
  • 防抖机制：优化用户交互性能

页面架构

用户角色页面

/                        # 首页
├── /login              # 登录页面
├── /register           # 注册页面
├── /profile            # 个人资料
├── /student/           # 学生页面
│   ├── dashboard       # 学生仪表板
│   ├── courses/        # 课程相关
│   ├── exercises/      # 练习系统
│   └── reports/        # 学习报告
├── /teacher/           # 教师页面
│   ├── dashboard       # 教师仪表板
│   ├── courses/        # 课程管理
│   ├── analysis/       # 数据分析
│   └── reports/        # 教学报告
└── /admin/             # 管理员页面
    ├── dashboard       # 管理仪表板
    ├── users           # 用户管理
    ├── courses         # 课程管理
    └── files           # 文件管理

布局系统

  • app.vue：默认应用布局（包含导航栏和页脚）
  • default.vue：认证后的主要布局

开发环境

本地开发

# 安装依赖
cd frontend && pnpm install

# 启动开发服务器
pnpm dev                # http://localhost:3000

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

代码质量

# TypeScript 类型检查
npx vue-tsc --noEmit

# 代码格式化
pnpm format

# 代码检查
pnpm lint

组件系统

UI 组件库

基于 shadcn/ui 构建的组件库，包含：

  • 基础组件：Button, Input, Card, Dialog 等
  • 表单组件：Select, Checkbox, Radio 等
  • 导航组件：Navbar, Sidebar, Breadcrumb 等
  • 反馈组件：Toast, Alert, Loading 等

业务组件

  • KnowledgeGraph：3D 知识图谱可视化
  • AuthForms：登录注册表单
  • Dashboard：各角色仪表板组件
  • DataTables：数据展示表格

状态管理

Pinia Stores

  • authStore：用户认证状态管理
  • courseStore：课程数据管理
  • uiStore：UI 状态管理（主题、侧边栏等）

Supabase 集成

  • 实时订阅：数据变更自动同步
  • 离线支持：网络断开时的本地缓存
  • 乐观更新：提升用户体验的更新策略

部署配置

构建优化

  • 资源压缩：Brotli 和 Gzip 压缩
  • Tree Shaking：未使用代码自动移除
  • Bundle 分析：构建产物分析工具
  • CDN 优化：静态资源 CDN 部署

环境配置

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,                    // 服务端渲染
  nitro: {
    routeRules: {
      '/': { isr: 300 },        # 首页增量静态生成
      '/_nuxt/**': {            # 静态资源长期缓存
        headers: { 'cache-control': 'max-age=31536000' }
      }
    }
  }
})

性能监控

开发时监控

  • 构建时间：Vite 构建性能分析
  • 包大小：Bundle 大小监控
  • 类型检查：TypeScript 编译性能

运行时监控

  • 页面性能：Core Web Vitals 指标
  • 用户体验：交互响应时间
  • 错误追踪：运行时错误监控
  • 网络请求：API 调用性能分析

版权归属：Evoliant

许可证：MIT