Mplan ea47eec47c refactor: organize features and standardize frontend tooling
Colocate feature views, components, stores, and upload logic; centralize shared map utilities without changing API behavior.

Add ESLint, Prettier, EditorConfig, and VS Code settings; standardize four-space indentation and document the project structure and checks.

Validation: npm run check, npm run build, and git diff --check.
2026-09-29 18:05:56 +08:00
2026-07-18 20:49:09 +08:00

OpenCloud 前端

Vue 3 + TypeScript + Vite 前端,通过 FastAPI 提供认证、云图、图鉴、个人主页和管理后台数据。

本地开发

  1. 在相邻的 opencloud-backend 项目中启动 FastAPI 服务。
  2. 复制 .env.example 为 .env,配置高德地图 Key;如果后端不在默认地址,修改 VITE_API_URL。
  3. 安装依赖并启动前端:
npm install
npm run dev

默认后端地址为 http://localhost:8000/api/v1。 开发服务器和本地 Preview 都固定使用 http://localhost:5173,与后端默认 CORS 配置保持一致。运行 Preview 前请先停止开发服务器。

检查与构建

npm run check
npm run build

check 依次执行 ESLint、Prettier 格式检查、项目样式检查和 TypeScript 类型检查。也可以单独运行:

npm run lint          # 检查 JS、TS 和 Vue 代码,警告也会导致失败
npm run lint:fix      # 自动修复可修复的代码问题
npm run format:check  # 检查格式,不修改文件
npm run format        # 格式化源码、配置和文档
npm run check:styles  # 检查项目视觉规范
npm run typecheck     # Vue / TypeScript 类型检查

ESLint 使用 flat config,启用 JavaScript、TypeScript 和 Vue 推荐规则;Prettier 负责格式,使用 4 个空格缩进、单引号和无分号风格。通过 eslint-config-prettier 关闭冲突的格式规则,构建产物、依赖、环境文件和工具管理的目录不参与格式化。

VS Code 用户可安装工作区推荐的 Vue、ESLint、Prettier 扩展,保存时自动格式化并执行 ESLint 修复。

配置参考:Vue ESLint 官方指南、typescript-eslint 入门、Prettier 安装指南。

项目结构

业务代码按功能集中在 src/features/:页面、组件、store 和 composable 放入各自所属模块。跨业务的地图控件集中在 src/shared/map/,应用导航位于 src/components/layout/,API 客户端、全局样式和公共类型保留独立目录。

新增或移动文件时,参见目录结构与依赖约定。

S
Description
No description provided
https://cloud.catpl.top Readme
1.1 MiB
Languages
Vue 83.1%
TypeScript 10.5%
CSS 5.1%
JavaScript 1.2%
HTML 0.1%