forked from drone/command-center-dashboard
README.md
@@ -1 +1,145 @@ ### node 18.0.0 以上 # 指挥调度平台（大屏） ## 项目简介 本项目基于 **Vue 3** 开发，依赖 **Node.js 18 以上** 版本，并集成 **Cesium** 进行三维地图渲染。项目采用 **企业版 Blandx 前端框架** 进行二次开发，并使用 **rem** 进行响应式适配，以确保在不同设备上的良好体验。 ## 主要技术栈 - **Vue 3**：前端框架 - **Vue Router**：前端路由管理 - **Vuex**：状态管理 - **Cesium**：三维地图可视化 - **Axios**：HTTP 请求库 - **Element UI Plus**：UI 组件库 ## 项目启动 1. 克隆仓库 git clone git://139.196.74.78/drone/command-center-dashboard.git cd command-center-dashboard 2. 安装依赖 pnpm install 3. 运行开发环境 pnpm dev 4. 构建项目 pnpm build:dev 或 pnpm build:prod ## Git提交前缀 **feat+英文冒号+空格+xxxxx** | 类型 | 说明 | 示例 | | -------- | ---------------------------- | -------------------------- | | feat | 新增功能 | feat: 添加用户登录功能 | | fix | 修复 bug | fix: 修复登录页面样式问题 | | docs | 文档更新 | docs: 更新 README 文件 | | style | 代码格式化（不影响代码逻辑） | style: 格式化代码 | | refactor | 代码重构（不影响代码功能） | refactor: 重构用户管理模块 | | revert | 撤销之前的提交 | revert: 撤销上次提交 | | chore | 构建过程或辅助工具的变动 | chore: 更新依赖包 | | perf | 性能优化 | perf: 优化数据加载速度 | | test | 添加或修改测试 | test: 添加单元测试 | | ci | 持续集成相关配置更改 | ci: 配置 GitHub Actions | ## 目录结构与命名规则 项目采用 **大写开头的驼峰命名（PascalCase）** 方式，以保持统一性和可读性。 #### **📌 公共组件**（`components/`） - **存放全局复用的组件** - 命名方式：`PascalCase.vue` - **示例**： ``` components/ ├── Button.vue ├── Modal.vue ├── Table.vue ``` #### **📌 页面组件**（按页面分类存放） - **每个页面独立文件夹，内部组件放在子文件夹** - **页面文件夹名：PascalCase** - **页面组件命名：与文件夹名一致** - **子组件按作用命名，保持层级清晰** - **示例**： ``` pages/ ├── Home/ │ ├── Home.vue # 首页主组件 │ ├── HomeTop.vue # 首页顶部组件 │ ├── HomeBottom/ │ │ ├── HomeBottom.vue # 首页底部主组件 │ │ ├── HomeBottomLink.vue # 首页底部链接组件 ``` ## **屏幕适配说明** 本项目的适配策略如下：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。 示例： ``` <div :style="{ height: pxToRem(50), width: pxToRem(50) }">test</div> <script> import { pxToRem } from '@/utils/rem'; export default { mounted() { this.style = { height: pxToRem(50), width: pxToRem(50) }; }, }; </script> <style scoped lang="scss"> height: 100px; // 自动转换为 10rem width: 100px; // 自动转换为10rem </style> ``` ## **SVG 图标使用指南** 本项目使用 **`vite-plugin-svg-icons`** 插件进行 SVG 图标管理，支持按需加载，减少体积，提高渲染效率。 ------ ### **📌 1. 添加 SVG 图标** 将 **SVG 文件** 拷贝到以下目录： ``` /src/assets/svg/ ``` 例如，将 `user.svg` 放入该目录。 ------ ### **📌 2. 在组件中使用 SVG 图标** 使用 `SvgIcon` 组件加载 SVG 图标，并支持**自定义颜色和尺寸**： ``` <SvgIcon name="user" class="userClass" /> ``` 🔹 `name`：对应 `/src/assets/svg/` 目录下的 SVG 文件名（无需后缀 `.svg`）。 🔹 `class`：可选，设置图标类名。
