From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
README.md | 148 +++++++++++++++++++------------------------------
1 files changed, 58 insertions(+), 90 deletions(-)
diff --git a/README.md b/README.md
index ac20020..aeb8b24 100644
--- a/README.md
+++ b/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()` 进行转换，以确保在不同分辨率设备上表现一致。
\ No newline at end of file
+将 **SVG 文件** 拷贝到以下目录：
+
+```
+/src/assets/svg/
+```
+
+例如，将 `user.svg` 放入该目录。
+
+------
+
+### **📌 2. 在组件中使用 SVG 图标**
+
+使用 `SvgIcon` 组件加载 SVG 图标，并支持**自定义颜色和尺寸**：
+
+```
+<SvgIcon name="user" class="userClass" />
+```
+
+ 🔹 `name`：对应 `/src/assets/svg/` 目录下的 SVG 文件名（无需后缀 `.svg`）。
+
+ 🔹 `class`：可选，设置图标类名。
--
Gitblit v1.9.3