概览
约 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