# base-web 水利大平台前端 ``` 项目依托于Vite搭建的Vue + TypeScript + Pinia + Antd框架. 应用node环境为V16版本 Vue官方和TypeScript官方推荐使用VS code开发，提供了更好的TS类型提示和管理 vs code安装必要插件 1、Vite 强化Vite开发，自启动服务 2、Volar 是官方的 VSCode 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。 3、TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件 【禁止个人随便修改src文件夹之外的其他文件，GIT检查会回滚删除】 ``` ``` 注：当前项目的UI框架用的最新版，不再支持Chrome内核低于100版本的浏览器，如有样式问题，请升级或下载最新版Chrome浏览器https://www.google.cn/intl/zh-CN/chrome/ 【由于Antd的UI框架中使用了where选择器，仅支持Chrome内核88版以上】 ``` ``` js 注意： 1、开发环境：需要自主请求后台(如:img标签src请求等) 页面最上方添加添加请求根路径 const baseUrl = import.meta.env.VITE_BASE_URL; 环境变量配置： 直接在.env.development和.env.development添加VITE_开头的名称 并且在env.d.ts中的ImportMetaEnv接口内添加指定对象并添加注释 并在引用处前加上`${baseUrl}/XXX` 2、解决打包跨域问题【打包部署的时候需要在nginx配置针对.env.production配置中的根路径代理，删除请求的prodApi一级路径】 nginx代理配置示例： #上传大小 client_max_body_size 1024m; #gzip on; server { listen 8710; server_name localhost; location / { root html; index index.html index.htm; try_files $uri $uri/ @router; } location @router { rewrite ^.*$ /index.html last; } location /prodApi/ { rewrite ^/b/(.*)$ /$1 break; proxy_pass http://127.0.0.1:8088/; } } 3、HTTP请求 【多参数】请使用post方式提交 【单一参数】为降低后端序列化性能开销，后端采用单参数接收方式，前端请使用postFormData或postQueryString方式提交 4、GIS开发 所有地图和图层都不要使用响应式对象 5、安全配置 打包之后，nginx部署环境配置中需要添加下面的请求头 add_header X-Frame-Options DENY; add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload"; add_header Referrer-Policy "origin"; add_header Content-Security-Policy value; add_header X-Permitted-Cross-Domain-Policies "none"; add_header X-XSS-Protection "X-XSS-Protection: 1;mode=block"; add_header X-Download-Options noopen; add_header X-Content-Type-Options "nosniff"; ``` ## 主题切换板块 ``` 我们的项目包含了一个主题切换功能，让用户可以自由选择不同的配色方案。提供了以下几种主题： Home页面的样式目前在src/assets/css/theme/dark的文件夹中，有一个暗黑主题样式，主要用于表单、表格、分页组件的样式 注意 ！！ 在组件内使用@import引入时，style标签中一定要加上scoped属性，这样就不会影响全局样式 Main页面的样式目前在src/assets/css/theme/blue|green的文件夹中，针对绿色和蓝色都有一套自己的浅色和暗黑色，如需换肤，在main页面操作主题样式即可 ``` ## 系统说明 ``` 本框架在基于非一级大版本换代的情况下，保证组件的升级能力和替代性，全框架和控件的可控性作为优先考虑 引入任何资源和封装，需要统一报备，确保全系统自主可控，保障不会影响框架的迭代能力 文档主要强化前端的资源索引能力，降低非核心人员的后续开发运维的难度和成本 !!!注!!! 开发过程使用方法、组件等，请先从公共组件库和系统工具包查找，个人引入的重复功能会定期审查，并要求删除或合并； ``` ## 第三方组件 > - [**sm-crypto-v2 前端的SM加密库**](https://www.npmjs.com/package/sm-crypto-v2?activeTab=readme) > - [**vue3-seamless-scroll 基于vue3开发的新版本自动滚动插件**](https://www.npmjs.com/package/vue3-seamless-scroll) > - [**tinymce-vue V5 基于vue3的富文本**](https://www.tiny.cloud/docs/tinymce/6/vue-cloud) 注意：tinymce-vue需要在账号domain下添加IP/域名白名单 > - [**pinia 新一代状态管理，相比vuex，具有更好的ts类型推导**](https://pinia.web3doc.top/introduction.html) > - [**@supermap/iclient-leaflet 超图的Leaflet版本**](https://iclient.supermap.io/web/introduction/leafletDevelop.html#Ready) > - [**echarts 图表**](https://echarts.apache.org/zh/index.html) 需注意水球插件 最后更新日期 on Sep 18 2021 支持的最后版本为echarts5.2.1 !!!!!!!!! > - [**echarts-liquidfill 水球样式**](https://github.com/ecomfe/echarts-liquidfill) > - [**vue-codemirror 前端在线代码编辑器**](https://github.com/surmon-china/vue-codemirror/) > - [**xgplayer 西瓜视频播放器**](https://v2.h5player.bytedance.com) > - [**snowflake-id 雪花算法生成唯一ID**](https://www.npmjs.com/package/snowflake-id) > - [**Markedjs Markdown文档解析**](https://github.com/markedjs/marked) 注意：如需添加第三方组件，需要报备提供相关开源版权信息和打包后增加的大小等信息，否则会定期清理 <escape> <table> <tr> <th>类型</th> <th>名称</th> <th>版本号</th> <th>日期</th> <th>开源协议</th> <th>备注</th> </tr> <tr> <td>基础框架</td> <td>Vue</td> <td>3.3.4</td> <td>2023-05-18</td> <td>MIT License</td> <td></td> </tr> <tr> <td>前端开发与构建工具</td> <td>Vite</td> <td>4.4.9</td> <td>2023-08-07</td> <td>MIT License</td> <td></td> </tr> <tr> <td>增强编程语言</td> <td>TypeScript</td> <td>5.2.2</td> <td>2023-08-25</td> <td>Apache License 2.0</td> <td></td> </tr> <tr> <td>UI框架</td> <td>ant-design-vue</td> <td>4.0.1</td> <td>2023-08-22</td> <td>MIT License</td> <td></td> </tr> <tr> <td>状态管理</td> <td>Pinia</td> <td>2.1.4</td> <td>2023-06-14</td> <td>MIT License</td> <td></td> </tr> <tr> <td>加密工具</td> <td>jsencrypt</td> <td>3.3.2</td> <td>2023-02-27</td> <td>MIT License</td> <td></td> </tr> <tr> <td>HTTP工具</td> <td>axios</td> <td>1.4.0</td> <td>2023-04-28</td> <td>MIT License</td> <td></td> </tr> <tr> <td>CSS预处理</td> <td>less</td> <td>4.1.3</td> <td>2022-09-09</td> <td>Apache License 2.0</td> <td></td> </tr> <tr> <td>图表工具</td> <td>echarts</td> <td>5.4.2</td> <td>2023-03-23</td> <td>Apache License 2.0</td> <td></td> </tr> <tr> <td>前端在线代码编辑器</td> <td>vue-codemirror</td> <td>6.1.1</td> <td>2022-08-28</td> <td>MIT License</td> <td></td> </tr> <tr> <td>西瓜视频播放器</td> <td>xgplayer</td> <td>3.0.8</td> <td>2023-08-15</td> <td>MIT License</td> <td></td> </tr> <tr> <td>雪花算法生成唯一ID</td> <td>snowflake-id</td> <td>1.1.0</td> <td>2019-02-28</td> <td>MIT License</td> <td></td> </tr> <tr> <td>Markdown文档解析</td> <td>Marked.js</td> <td>9.0.3</td> <td>2023-09-18</td> <td>MIT License</td> <td></td> </tr> </table> </escape> ## 强化使用 F1 输入markdown，选择开启右侧预览 ## vite命令 ### 项目启动 npx vite --port=4000 ## 项目命令 ### 资源下载 npm install ### 项目启动 npm run dev ### 项目打包 npm run build # 一、外层文件 ## 1、[外部资源](public) * ### [超图二维GIS](public/supermap) ## 2、配置文件 * ### [开发环境配置文件](.env.development) | [生产环境配置文件](.env.production) | [项目入口文件](index.html) | [项目描述文件](package.json) | [Vite配置文件](vite.config.ts) # 二、[项目主体](src) ``` 根目录：src - api 后台数据接口 - config axios、http封装 - 其它 业务API接口封装 - assets 资源目录 - component 封装组件 - router 路由配置及守卫 - store 状态管理插件Pinia配置 - utils 公共设置 - compositions 公共资源集合（减少各页面资源引入分组数量） - gis 地图工具 - interface 自定义接口对象(主要应用于TypeScript实现对象提示) - tools 公共工具 - commonData 公共静态数据 - commonMethod 公共方法和对象 - commonValidator 公共数据校验 - layoutConfig 公共格式配置 - resize 自适应高度封装hooks - typewriter 打字机效果工具 - views 页面显示资源 ``` ## 1、[数据接口](src/api) * #### [axios配置](src/api/config) | [公共API](src/api/common) ### 2、[资源目录](src/assets) * #### [css文件目录](src/assets/css) * ##### [css主题文件](src/assets/css/theme) * #### [ts文件目录(存放各页面非【公共工具类】的提取方法)](src/assets/ts) * #### [img图片目录](src/assets/img) ### 3、[自定义组件](src/component) * #### [公共组件](src/component/common) * ##### [省市县乡镇四级联动下拉列表组件](src/component/common/AreaCascaderFullSelect.vue) | [省市县三级联动下拉列表组件](src/component/common/AreaCascaderFullSelect3.vue) * ##### [【当前用户】省市县乡镇四级联动下拉列表组件](src/component/common/AreaCascaderSelect.vue) | [【当前用户】省市县三级联动下拉列表组件](src/component/common/AreaCascaderSelect3.vue) * ##### [公共Table页面模板](src/component/common/CommonTable.vue) | [左右结构模板](src/component/common/LRStructure.vue) * ##### [自由滚动组件](src/component/common/ScrollTable.vue) | [多列自由滚动组件](src/component/common/ScrollTableMulticolumn.vue) * #### [系统功能组件](src/component/system) * #### [用户功能组件](src/component/user) * #### [GIS组件](src/component/gis) ### 4、[路由组件](src/router) * #### [路由配置](src/router/index.ts) | [路由守卫](src/router/beforeEach.ts) | [管理模式路由清单](src/router/routerList.ts) ### 5、[状态管理Pinia](src/store) * #### [主要状态配置](src/store/storeIndex.ts) * #### [权限状态配置](src/store/authStore.ts) ### 6、[系统工具包](src/utils) * #### [Compositions API简化包](src/utils/compositions) * ##### [资源导入整合包](src/utils/compositions/commonComposition.ts) * #### [自定义接口](src/utils/interface) * #### [自定义工具](src/utils/tools) * ##### [公共静态数据](src/utils/tools/commonData.ts) | [公共方法对象](src/utils/tools/commonMethod.ts) | [公共表单校验](src/utils/tools/commonValidator.ts) * ##### [公共静态数据](src/utils/tools/commonData.ts) | [公共页面格式](src/utils/tools/layoutConfig.ts) | [页面自适应高度Hooks](src/utils/tools/resize.ts) ### 7、[App配置首页](src/App.vue) ### 8、[App资源引用首页](src/main.ts) # 三、业务模块 ## (一)登录服务 * ### [登录页面](src/views/Login.vue) ## (二)系统管理服务 [系统管理服务](src/views/systemService) * ### 租户管理 [页面](src/views/systemService/tenant/SysTenantInfo.vue) | [API](src/api/systemService/tenant/SysTenantInfoApi.ts) * ### 人员管理 [页面](src/views/systemService/tenant/SysPersonnelInfo.vue) | [API](src/api/systemService/tenant/SysPersonnelInfoApi.ts) | [人员租户维护组件](src/component/tenant/BindPersonnelTenant.vue) * ### 用户管理 [页面](src/views/systemService/system/user/User.vue) | [API](src/api/systemService/system/userApi.ts) * ### 角色管理 [页面](src/views/systemService/system/role/Role.vue) | [API](src/api/systemService/system/roleApi.ts) | [角色菜单维护组件](src/component/system/RoleMenuAuth.vue) * ### 菜单管理 [页面](src/views/systemService/system/menu/Menu.vue) | [API](src/api/systemService/system/menuApi.ts) * ### 字典管理 [页面](src/views/systemService/system/dict/Dict.vue) | [API](src/api/systemService/system/dictApi.ts) * ### 部门管理 [页面](src/views/systemService/system/department) | [API](src/api/systemService/system/departmentApi.ts) * ### 行政区划管理 [页面](src/views/systemService/area/AdministrativeDivision.vue) | [API](src/api/systemService/area/AdministrativeDivisionApi.ts) ## (三)调度任务服务 [调度任务服务](src/views/scheduleService) * ### 调度任务管理 [页面](src/views/scheduleService/ScheduleTaskInfo.vue) | [日志](src/component/scheduleService/ScheduleLog.vue) | [API](src/api/scheduleService/ScheduleTaskInfoApi.ts) ## (四)消息服务 [消息服务](src/views/messageService) * ### 消息管理 [页面](src/views/messageService/message/SysMessageB.vue) | [API](src/api/messageService/message/SysMessageBApi.ts) * ### 已推送消息管理 [页面](src/views/messageService/message/SysMessagePushed.vue) | [API](src/api/messageService/message/SysMessagePushedApi.ts) ## (五)证书服务 [证书服务](src/views/licenseService) * ### 证书基本信息管理 [页面](src/views/licenseService/LicenseBaseInfo.vue) | [API](src/api/licenseService/LicenseBaseInfoApi.ts) ## (六)日志服务 [日志服务](src/views/logService) * ### [日志统一API](src/api/logService/log/logApi.ts) * ### [登录日志](src/views/logService/log/loginLog.vue) | [操作日志](src/views/logService/log/operationLog.vue) | [日志分析](src/views/logService/log/logStatistics.vue) ## (七)基础信息服务 [基础信息服务](src/views/basicService) * ### 基本信息 [目录](src/views/basicService/base) * #### 河道基本信息管理 [页面](src/views/basicService/base/ProRiverB.vue) | [API](src/api/basicService/base/ProRiverBApi.ts) * #### 测站基本信息管理 [页面](src/views/basicService/base/StStbprpB.vue) | [API](src/api/basicService/base/StStbprpBApi.ts) * ### 实时数据 [目录](src/views/basicService/realtime) * #### 河道实时数据 [页面](src/views/basicService/realtime/StRiverR.vue) | [API](src/api/basicService/realtime/StRiverRApi.ts) * #### 水库实时数据 [页面](src/views/basicService/realtime/StRsvrR.vue) | [API](src/api/basicService/realtime/StRsvrRApi.ts)