跳到主要内容

前端架构总览

井云前端是一个基于 Vue 3 的单体仓库（Monorepo）项目，采用现代化的前端技术栈，支持多平台部署。

技术栈​

  • 框架: Vue 3 + TypeScript
  • 构建工具: Vite、Nuxt
  • 包管理: pnpm workspace
  • UI 组件库: TDesign Vue Next、UnoCSS
  • 状态管理: Pinia
  • 路由: Vue Router 4
  • 国际化: Vue I18n
  • 样式: Less、PostCSS、UnoCSS
  • 代码规范: ESLint、Prettier、Oxlint
  • 测试: Playwright

项目架构​

Monorepo 结构​

frontend/
├── hosts/                 # 应用程序目录
│   ├── agent/            # Agent 应用 (Vue 3 + Vite)
│   ├── docs/             # 文档站点 (VitePress)
│   ├── miniApp/          # 小程序应用 (uni-app)
│   ├── platform/         # 平台管理应用 (Vue 3 + Vite)
│   ├── tenant/           # 租户管理应用 (Vue 3 + Vite)
│   ├── web/              # Web 应用 (Nuxt)
│   └── website/          # 官方网站 (Vue 3 + Vite)
├── packages/             # 核心包
│   ├── core/             # 核心功能包
│   ├── di/               # 依赖注入包
│   ├── storage/          # 存储包
│   └── swagger-free/     # Swagger 工具包
└── shared/               # 共享包
    ├── api/              # API 接口包
    ├── hooks/            # 共享 Hooks
    ├── i18n/             # 国际化包
    ├── service/          # 服务层包
    ├── ui/               # UI 组件包
    └── utils/            # 工具函数包

设计原则​

1. 组件化设计​

  • 采用原子设计理念
  • 组件高度可复用
  • 统一的设计语言

2. 类型安全​

  • 全面使用 TypeScript
  • 严格的类型检查
  • 完整的类型定义

3. 性能优化​

  • 代码分割和懒加载
  • 组件级别的缓存
  • 构建产物优化

4. 开发体验​

  • 热重载支持
  • 完整的开发工具链
  • 自动化代码检查

应用架构​

Web 应用 (Nuxt)​

  • SSR/SSG 应用，主要面向用户
  • SEO 优化
  • 服务端渲染支持

管理应用 (Vue 3 + Vite)​

  • 平台管理后台
  • 租户管理后台
  • Agent 应用

小程序应用 (uni-app)​

  • 跨平台小程序
  • 多端适配
  • 原生能力集成

文档站点 (VitePress)​

  • 技术文档
  • API 文档
  • 开发指南

共享架构​

核心包 (packages)​

  • 提供基础功能和工具
  • 跨应用共享
  • 版本统一管理

共享包 (shared)​

  • API 接口封装
  • 通用 Hooks
  • UI 组件库
  • 工具函数

开发规范​

代码规范​

  • ESLint + Prettier
  • 统一的代码风格
  • 自动化代码检查

提交规范​

  • Conventional Commits
  • 语义化版本
  • 自动化发布

分支管理​

  • Git Flow
  • 功能分支开发
  • 代码审核流程