fpi-componentAppearance
Vue 3 + TypeScript + Vite H5
node 16.4.0 及以上 npm 7.18.1 及以上
介绍
本模版是用于水产品的H5通用模版，模版内部包含权限控制，登陆逻辑，地图相关，工作台以及诸多通用组件。如果无需地图可以查看底部删除地图介绍。
权限配置以及菜单配置相关：
菜单权限
请求地址： http://wgms.dev.fpi-inc.site/bsp-permission-server/api/v1.0/permissions/systemMenus
菜单code： wgmsCcbApp
配置地址：http://wgms.dev.fpi-inc.site/simple-user-center-web/#/permission/resource
图层权限：
请求接口： http://wgms.dev.fpi-inc.site/wgms-base-server/api/v1.0/config/menuConfig/user
菜单取值： menuConfigDetail['013']
配置地址：http://wgms.dev.fpi-inc.site/wgms-base-web/#/system-config/DisplayScheme
默认方案（挂图含藻类监测）- 环境要素配置 - 秀水卫士-地图
地图底图配置：
请求接口： http://wgms.dev.fpi-inc.site/wgms-base-web/api/v1.0/config/systemConfig/006 菜单code： 006
配置地址：http://wgms.dev.fpi-inc.site/wgms-base-web/#/map-config/BaseMapConfig 基础底图配置 深色地图
相关配置在 config/index 内部
安装完依赖后需重新打开vscode文件错误提示就会消失
此模版需要配合按照的vscode插件：
stylelint css样式检查插件eslint js，ts代码检查Volar vue3相关unocss css原子化提示插件
1.内置检查
stylelint eslint commitLint 请设置vscode保存自动检查语法
commitlint 提交规范请查看commitlint.config.js文件，通用格式： feat: 增加了新功能
2.config及关于启动代理：
在vite.config.ts内修改proxy后，还需要在config/index.ts内修改相应的请求地址:
// const defaultHost = 'https://wgms-test.fpi-inc.site'
const defaultHost = 'http://wgms.dev.fpi-inc.site'// const defaultHost = 'https://wgms-test.fpi-inc.site'
const defaultHost = 'http://wgms.dev.fpi-inc.site'线上环境无需修改config，会自动读取当前运行地址 isMustLogin 是否需要登录项目 在本地开发时可以设置为false进行无登录开发
3.文件及变量命名规则：
文件：
文件夹 map，map-service 小写横杠 ts文件名称： map.ts，map-service.ts 小写横杠
vue文件名称： map.vue，map-service.vue 小写横杠
ts类型：
普通类型大写开头， Ts结尾： PublicTs MapTsapi请求相关namespace类型，全大写，_连接，以API_REQUEST或API_RESPONSE结尾(由于此api命名空间会注入全局，所以希望严格准守命名规则不然容易污染全局)，例如：
PUBLIC_API_REQUEST // REQUEST请求参数namespace
PUBLIC_API_RESPONSE // RESPONSE响应参数namespace 命名空间内部类型命名可以自定义，可以以请求方法的名称命名
4.api请求说明
目录结构：
├─ api // 存放api接口文件
│ ├─ map // api的个个模块文件夹
│ │ ├─ index.ts // 存放接口api
│ │ └─ types.d.ts // 存放接口传参类型，相应类型
│ ├─ public
│ │ ├─ index.ts
│ │ └─ types.d.ts
│ ├─ index.ts // 全部api模块导入
├─ service
│ ├─ base-serve.ts // 服务文件
│ ├─ request.ts // 请求核心，请求拦截，响应拦截，请求控制器
│ └─ types.ts // api核心类型├─ api // 存放api接口文件
│ ├─ map // api的个个模块文件夹
│ │ ├─ index.ts // 存放接口api
│ │ └─ types.d.ts // 存放接口传参类型，相应类型
│ ├─ public
│ │ ├─ index.ts
│ │ └─ types.d.ts
│ ├─ index.ts // 全部api模块导入
├─ service
│ ├─ base-serve.ts // 服务文件
│ ├─ request.ts // 请求核心，请求拦截，响应拦截，请求控制器
│ └─ types.ts // api核心类型使用：
javascript
// 配置
export const getSystemMenus = (data: PUBLIC_API_REQUEST.getSystemMenus, option:apiObjTs={} ) => {
return Request<PUBLIC_API_RESPONSE.getSystemMenus>({
url: '/api/v1.0/permissions/systemMenus', // 请求地址
server: 'bspPermissionServer', // 服务地址，默认可以在config内配置
method: 'post', // 请求类型 默认get
headers: { // 请求头
'Content-Type': 'application/json'
},
isIntercept: true // 是否推入全局的请求拦截队列 拦截方法见下：
baseURL: '/api', // 代理 默认/api 可以不传，除非你要本地调试自定义代理
data, // 请求参数 get类型要传params
...option // 自定义扩展参数
})
}
// 引入
import * as publicApi from '@/api/public'
// import { getSystemMenus } from '@/api/public' // 单个请求导入
// import { PublicApi } from '@/api' // 通过index导入整个请求文件夹
const systemCode = 'wgmsAnalysisDiagnose'
// 根据权限获取菜单信息
const getHttpAuth = async () => {
const data = await publicApi.getSystemMenus(
{ systemCode },
{
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'token': window.localStorage.getItem('token') || ''
}
}
)
}// 配置
export const getSystemMenus = (data: PUBLIC_API_REQUEST.getSystemMenus, option:apiObjTs={} ) => {
return Request<PUBLIC_API_RESPONSE.getSystemMenus>({
url: '/api/v1.0/permissions/systemMenus', // 请求地址
server: 'bspPermissionServer', // 服务地址，默认可以在config内配置
method: 'post', // 请求类型 默认get
headers: { // 请求头
'Content-Type': 'application/json'
},
isIntercept: true // 是否推入全局的请求拦截队列 拦截方法见下：
baseURL: '/api', // 代理 默认/api 可以不传，除非你要本地调试自定义代理
data, // 请求参数 get类型要传params
...option // 自定义扩展参数
})
}
// 引入
import * as publicApi from '@/api/public'
// import { getSystemMenus } from '@/api/public' // 单个请求导入
// import { PublicApi } from '@/api' // 通过index导入整个请求文件夹
const systemCode = 'wgmsAnalysisDiagnose'
// 根据权限获取菜单信息
const getHttpAuth = async () => {
const data = await publicApi.getSystemMenus(
{ systemCode },
{
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'token': window.localStorage.getItem('token') || ''
}
}
)
}请求拦截，拦截队列清空：
javascript
import { useAxiosStore } from '@/store/axios';
const axiosStore = useAxiosStore()
axiosStore.clearIntercept(1) // 拦截最新一条请求，并删除
axiosStore.clearIntercept() // 拦截全部并清空拦截队列import { useAxiosStore } from '@/store/axios';
const axiosStore = useAxiosStore()
axiosStore.clearIntercept(1) // 拦截最新一条请求，并删除
axiosStore.clearIntercept() // 拦截全部并清空拦截队列5.路由
所有view文件夹下非 components文件夹下的vue文件都会被根据路径设置为按需引入的路由
javascript
├─ views
├─ home.vue // 解析为路由 path: /home name: home （注意避免名称重复）
├─ form
│ ├─ top.vue // 解析为路由 path: /form/top name: top （注意避免名称重复）
│ ├─ components // 存放该路由业务相关组件
│ │ ├─ button-list-vue // 不会被解析为路由，会被动态引入组件引入 模版内可以直接使用无需引入（注意避免名称重复）├─ views
├─ home.vue // 解析为路由 path: /home name: home （注意避免名称重复）
├─ form
│ ├─ top.vue // 解析为路由 path: /form/top name: top （注意避免名称重复）
│ ├─ components // 存放该路由业务相关组件
│ │ ├─ button-list-vue // 不会被解析为路由，会被动态引入组件引入 模版内可以直接使用无需引入（注意避免名称重复）6.组件
内置组件：svg-icon, common-tag,date-picker-select, empty-common,fpi-check-pop, fpi-date-group-picker,fpi-date-picker, loading-mask,nav-bar, popup-table,single-select, tab-bar。
7.目录结构
vue3-template
├─ public
├─ src
│ ├─ api // 请求api
│ ├─ assets // 静态资源包括 fontFamily images svg等等
│ ├─ components // 公共通用性组件
│ ├─ config // 服务相关以及线上环境配置信息
│ ├─ layouts // 页面布局组件
│ ├─ router // 动态路由逻辑
│ ├─ service // 请求封装
│ ├─ store // pinia
│ ├─ styles // 公共样式 以及unocss公共文件
│ ├─ types // 公共类型
│ ├─ utils // 所有工具类
│ ├─ views // 路由页面
│ ├─ symbols.ts // 全局唯一标识数据存储 例如定义provide key
│ ├─ App.vue
│ ├─ main.ts
│ └─ auto-import.d.tsvue3-template
├─ public
├─ src
│ ├─ api // 请求api
│ ├─ assets // 静态资源包括 fontFamily images svg等等
│ ├─ components // 公共通用性组件
│ ├─ config // 服务相关以及线上环境配置信息
│ ├─ layouts // 页面布局组件
│ ├─ router // 动态路由逻辑
│ ├─ service // 请求封装
│ ├─ store // pinia
│ ├─ styles // 公共样式 以及unocss公共文件
│ ├─ types // 公共类型
│ ├─ utils // 所有工具类
│ ├─ views // 路由页面
│ ├─ symbols.ts // 全局唯一标识数据存储 例如定义provide key
│ ├─ App.vue
│ ├─ main.ts
│ └─ auto-import.d.ts!!!!!!!!!!!!!!!!!!注意：
所有的components文件夹下的组件名称都不要重复 所有的view下的路由组件（也就是非components组件）的名称相互间都不要重复
unocss https://uno.antfu.me
8.删除地图介绍
目录删除
- 删除以下目录的全部map相关文件或者文件夹
vue3-template
├─ public
│ ├─ static
│ │ ├─ map 文件夹
├─ src
│ ├─ api
│ │ ├─ map 文件夹
│ ├─ assets
│ │ ├─ images
│ │ │ ├─ map 文件夹
│ ├─ components
│ │ ├─ map 文件夹
│ ├─ store
│ │ ├─ map.ts 文件
│ ├─ types
│ │ ├─ map.ts 文件
│ ├─ utils
│ │ ├─ map 文件夹
│ ├─ views
│ │ ├─ map 文件夹vue3-template
├─ public
│ ├─ static
│ │ ├─ map 文件夹
├─ src
│ ├─ api
│ │ ├─ map 文件夹
│ ├─ assets
│ │ ├─ images
│ │ │ ├─ map 文件夹
│ ├─ components
│ │ ├─ map 文件夹
│ ├─ store
│ │ ├─ map.ts 文件
│ ├─ types
│ │ ├─ map.ts 文件
│ ├─ utils
│ │ ├─ map 文件夹
│ ├─ views
│ │ ├─ map 文件夹- 删除 index.html 内的所有map文件引入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- <link rel="stylesheet" href="/static/map/mapbox-gl-v22.css"> -->
<title>秀水卫士</title>
<style>
#app {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<!-- <script src="/static/map/mapbox-gl-v22.js" type="text/javascript"></script>
<script src="/static/map/turf.min.js"></script>
<script src="/static/map/kriging.js"></script> -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- <link rel="stylesheet" href="/static/map/mapbox-gl-v22.css"> -->
<title>秀水卫士</title>
<style>
#app {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<!-- <script src="/static/map/mapbox-gl-v22.js" type="text/javascript"></script>
<script src="/static/map/turf.min.js"></script>
<script src="/static/map/kriging.js"></script> -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</body>
</html>贡献者
水产品-马佳辉
水产品-王田