# soliViz

**Repository Path**: kang-zhenbin/soli-viz

## Basic Information

- **Project Name**: soliViz
- **Description**: 大屏可视化学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-15
- **Last Updated**: 2025-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明

> 本项目是 PC 端起步框架

- 整合:
  - `vite`, `vue3`, `vue-router`, `pinia`,
  - `element-plus`, `InspiraUi`
  - `cesium`, `openlayers`,
  - `lodash`, `tailwindcss`, `postcss` , `postcss-px-to-viewport`

## 阅读时可忽略的文件

- `components.json` : 按需安装 InspiraUi 自动产生的,不必在意 (注意，此 json 文件严格限制，不允许添加注释，不然无法继续按需添加 InspiraUi 新组件)
- `jsconfig.json` : InspiraUi 所需要的配置,不必在意
- `lib/utils.js` : InspiraUi 所需要的配置,不必在意
- `@/components/ui/*` : 按需安装 InspiraUi 自动产生的,不必在意
- `tailwin.config.js` : 由于 mastergoMCP 能力生成的代码经常用到 tailwindcss,以及 InspiraUi 也基于此,故有此配置
- `postcss.config.js` : 由于 tailwindcss 依赖于 postcss,故有此配置。并且已经配置好相关 px 转 vw 的内容。

## TODO 规范

- 有时间再写吧（搁置）
- 代码规范
- 文件命名规范

## 如何启动

```bash
    # 下载依赖
    npm install
    # development环境·开发
    npm run dev
    # producttion环境·打包
    npm run build
```

## doc 文档集

> 通过 URL，添加这些常用知识文档集作为对话上下文，提升 AI 的回答质量。

| 文档名称         | 链接                                 |
| ---------------- | ------------------------------------ |
| JS,CSS,HTML 文档 | https://developer.mozilla.org/zh-CN/ |
| Vue.js           | https://vuejs.org/                   |
| Pinia            | https://pinia.vuejs.org/zh/          |
| vue-router       | https://router.vuejs.org/zh/         |
| Vite 构建工具    | https://cn.vitejs.dev/               |
| WotDesignUni     | https://wot-design-uni.pages.dev/    |
| InspiraUi        | https://inspira-ui.com/              |
| ElementPlus      | https://element-plus.org/zh-CN/      |
| Z-Paging         | https://z-paging.zxlee.cn/           |
| VueUse           | https://vueuse.org/                  |
| lodash           | https://www.lodashjs.com/            |

# 二、大屏主题风格定义

## 文字

- 大标题: 42px
- 副标题: 26px
- 小标题: 20px
- 正文: 16px
- 弱化文字: 12px

## 颜色

参考 elementPlus 进行修改

- 基础颜色

  - Primary 主色: rgb(167, 179, 254)
  - Success 成功色: rgb(113, 197, 113)
  - Warning 警告色:rgb(255, 201, 139)
  - Error/Danger 危险色:rgb(255, 138, 138)
  - Info 信息色: rgb(160, 211, 255)

- 渐变色
  - #608EE7 rgb(96, 142, 231) --> #727FF2 rgb(114, 127, 242)

## 表现手法

- 磨砂玻璃
- 微渐变
- 外发光

# 注意事项

## postcss 与行内样式

- PostCSS 天生不支持处理行内样式，这是由其设计目标（处理 CSS 代码）决定的。
- 最佳实践：避免行内样式，使用 class 配合 CSS 类，让 PostCSS 正常处理。
- 必须使用行内样式时：通过工具函数、框架指令 / 钩子手动转换，本质是在代码运行 / 编译阶段动态计算 vw 值。

```javascript

// 工具函数：将px转换为vw
function pxToVw(px, viewportWidth = 1920) {
  return `${(px / viewportWidth) * 100}vw`;
}

// 使用示例

<div :style="{ width: pxToVw(100), height: pxToVw(50) }"></div>


```

- 原理：1vw = 视口宽度的 1%，因此 px 转 vw 的公式为：vw 值 = (px 值 / 设计稿宽度) \* 100。
- 可根据实际设计稿宽度（如 375、1280）调整 viewportWidth 参数。