跳到主要内容

井云前端项目

井云前端是基于 Vue 3 的现代化 Monorepo 项目，采用 pnpm workspace 管理多个应用和共享包，支持多平台部署。

🏗️ 架构概览​

技术栈​

  • 框架: 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

项目结构​

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

📱 应用说明​

Web 应用​

  • 技术栈: Nuxt 3 + TypeScript
  • 功能: 主要面向用户的 SSR/SSG 应用
  • 特点: SEO 友好，服务端渲染

平台管理应用​

  • 技术栈: Vue 3 + Vite
  • 功能: 平台级管理后台
  • 特点: 权限管理、数据可视化

租户管理应用​

  • 技术栈: Vue 3 + Vite
  • 功能: 租户级管理后台
  • 特点: 多租户支持、个性化配置

Agent 应用​

  • 技术栈: Vue 3 + Vite
  • 功能: 智能代理应用
  • 特点: AI 集成、实时交互

小程序应用​

  • 技术栈: uni-app
  • 功能: 跨平台小程序
  • 特点: 多端发布、组件化开发

官方网站​

  • 技术栈: Vue 3 + Vite
  • 功能: 企业官网
  • 特点: 响应式设计、内容管理

📦 共享包​

核心包​

  • @jingyun/core: 核心功能模块
  • @jingyun/di: 依赖注入框架
  • @jingyun/storage: 存储抽象层
  • @jingyun/swagger-free: Swagger 工具

共享包​

  • @jingyun/api: API 接口定义
  • @jingyun/hooks: 通用 Hooks
  • @jingyun/i18n: 国际化资源
  • @jingyun/service: 服务层抽象
  • @jingyun/ui: UI 组件库
  • @jingyun/utils: 工具函数库

🚀 快速开始​

环境要求​

  • Node.js >= 18.0.0
  • pnpm >= 9.0.0

安装依赖​

pnpm install

开发命令​

# Web 应用
cd hosts/web && pnpm dev

# 平台管理应用
cd hosts/platform && pnpm dev

# 租户管理应用
cd hosts/tenant && pnpm dev

# Agent 应用
cd hosts/agent && pnpm dev

# 小程序应用
cd hosts/miniApp && pnpm dev:mp

# 官方网站
cd hosts/website && pnpm dev

📋 开发规范​

代码规范​

  • 使用 TypeScript 进行类型安全开发
  • 遵循 ESLint 和 Prettier 配置
  • 使用 Oxlint 进行代码检查

分支管理​

  • 主分支：main
  • 开发分支：develop
  • 功能分支：feature/*
  • 修复分支：hotfix/*

提交规范​

  • 遵循 Conventional Commits 规范
  • 使用语义化的提交信息

🔧 构建部署​

构建命令​

# 构建所有应用
pnpm build:all

# 构建特定应用
cd hosts/platform && pnpm build

# Docker 构建
cd hosts/platform && pnpm build:docker

部署配置​

  • 各应用都有对应的环境配置文件
  • 支持 Docker 容器化部署
  • 集成 CI/CD 自动化部署

📚 相关文档​