forked from drone/command-center-dashboard
README.md
@@ -4,57 +4,6 @@ 本项目基于 **Vue 3** 开发，依赖 **Node.js 18 以上** 版本，并集成 **Cesium** 进行三维地图渲染。项目采用 **企业版 Blandx 前端框架** 进行二次开发，并使用 **rem** 进行响应式适配，以确保在不同设备上的良好体验。 ## 环境要求 - **Node.js**：18 及以上 - **Vue 版本**：Vue 3 - **依赖管理**： pnpm - **Cesium**：用于三维地图可视化 ## 项目启动 ### 1. 克隆仓库 ```sh git clone git://139.196.74.78/drone/command-center-dashboard.git cd command-center-dashboard ``` ### 2. 安装依赖 ```sh pnpm install ``` ### 3. 运行开发环境 ```sh pnpm dev ``` ### 4. 构建项目 ```sh pnpm build ``` ## 目录结构 ```bash ├── public # 静态资源目录 ├── src # 源代码目录 │ ├── assets # 资源文件 │ ├── components # 组件 │ ├── views # 视图页面 │ ├── router # 路由配置 │ ├── store # Vuex 状态管理 │ ├── main.js # 入口文件 │ ├── App.vue # 根组件 ├── package.json # 依赖管理 ├── vite.config.mjs # Vue 配置文件 ├── README.md # 项目说明 ``` ## 主要技术栈 - **Vue 3**：前端框架 @@ -64,11 +13,26 @@ - **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+英文冒号+空格+xxxxx** | 类型 | 说明 | 示例 | | -------- | ---------------------------- | -------------------------- | @@ -77,17 +41,17 @@ | docs | 文档更新 | docs: 更新 README 文件 | | style | 代码格式化（不影响代码逻辑） | style: 格式化代码 | | refactor | 代码重构（不影响代码功能） | refactor: 重构用户管理模块 | | revert | 撤销之前的提交 | revert: 撤销上次提交 | | chore | 构建过程或辅助工具的变动 | chore: 更新依赖包 | | perf | 性能优化 | perf: 优化数据加载速度 | | test | 添加或修改测试 | test: 添加单元测试 | | chore | 构建过程或辅助工具的变动 | chore: 更新依赖包 | | ci | 持续集成相关配置更改 | ci: 配置 GitHub Actions | | revert | 撤销之前的提交 | revert: 撤销上次提交 | ## 目录结构与命名规则 项目采用 **大写开头的驼峰命名（PascalCase）** 方式，以保持统一性和可读性。 #### **1️⃣ 公共组件**（`components/`） #### **📌 公共组件**（`components/`） - **存放全局复用的组件** @@ -102,7 +66,7 @@ ├── Table.vue ``` #### **2️⃣ 页面组件**（按页面分类存放） #### **📌 页面组件**（按页面分类存放） - **每个页面独立文件夹，内部组件放在子文件夹** @@ -124,54 +88,58 @@ │ │ ├── HomeBottomLink.vue # 首页底部链接组件 ``` ## **样式规范说明** ## **屏幕适配说明** 本项目的适配策略如下： - **宽度适配**：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。 - **高度适配**：采用 `vh`，需使用 `hToV()` 方法进行转换。 - **字体大小适配**：同样使用 `wToR()` 方法，以保证不同屏幕下的良好显示效果。 ------ ### **📌 类名中的样式** - **宽度**：自动转换为 `rem`，无需额外处理。 - **高度**：需要使用 `hToV()` 方法进行转换。 本项目的适配策略如下：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。 示例： ``` <style scoped lang="scss"> height: hToV(100); // 100px 转换为 vh width: 100px; // 自动转换为 rem </style> ``` ------ ### **📌 行内样式或 JavaScript 动态设置样式** - **高度**：使用 `hToV()` 进行 `vh` 适配。 - **宽度**：使用 `wToR()` 进行 `rem` 适配。 示例： ``` <div :style="{ height: hToV(50), width: wToR(50) }">test</div> <div :style="{ height: pxToRem(50), width: pxToRem(50) }">test</div> <script> import { hToV, wToR } from '@/utils/pxConver'; import { pxToRem } from '@/utils/rem'; export default { mounted() { this.style = { height: hToV(50), width: wToR(50) }; 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 图标** 如果需要设置 **字体大小**，也应使用 `wToR()` 进行转换，以确保在不同分辨率设备上表现一致。 将 **SVG 文件** 拷贝到以下目录： ``` /src/assets/svg/ ``` 例如，将 `user.svg` 放入该目录。 ------ ### **📌 2. 在组件中使用 SVG 图标** 使用 `SvgIcon` 组件加载 SVG 图标，并支持**自定义颜色和尺寸**： ``` <SvgIcon name="user" class="userClass" /> ``` 🔹 `name`：对应 `/src/assets/svg/` 目录下的 SVG 文件名（无需后缀 `.svg`）。 🔹 `class`：可选，设置图标类名。
