# idata-dashboard-sh

**Repository Path**: idata-security-health/idata-dashboard-sh

## Basic Information

- **Project Name**: idata-dashboard-sh
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: SJ-test
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-13
- **Last Updated**: 2024-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

和合码

[TOC]

## 项目介绍

### 基础介绍

*待撰写*

### 项目结构

```
idata-dashboard
├─ .env
├─ .env.development
├─ .env.production
├─ .env.staging
├─ .eslintrc.cjs
├─ .git
├─ .gitignore
├─ .husky
├─ .prettierrc.json
├─ README.md
├─ auto-imports.d.ts
├─ components.d.ts
├─ env.d.ts
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
├─ src
│  ├─ App.vue
│  ├─ assets // 静态文件
│  ├─ components // 组件
│  ├─ config // 项目基础配置，如超时时间等
│  ├─ hooks // 勾子与组合式函数
│  ├─ main.ts
│  ├─ mock-data // 暂无用处
│  ├─ plugins // vue插件
│  ├─ router // 路由文件等，当前路由暂未配置，持续迭代
│  ├─ service // 封装接口的文件夹. api文件夹为业务所封装的请求集合；basic为基础请求封装；utils为请求工具。如本地文件请求等
│  ├─ stores // pinia
│  ├─ types // 声明文件，当前仅有一个global
│  ├─ utils // 工具类文件夹
│  └─ views // 界面
├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts
```

### 技术栈

采用技术栈

| 名称         | 简介       |
| ------------ | ---------- |
| Vue3         | 框架       |
| Typescript   |            |
| Element-plus | 三方组件库 |
| echarts      | 三方图表库 |

### 代码检测与格式化

* eslint校验（建议不要修改，防止错乱）

  默认未修改vue3框架初始化时的任何eslint配置，遵循默认即可。

* prettier格式化（建议不要修改，防止错乱）

  默认未修改vue3框架初始化时的任何prettier配置，遵循默认即可。

* git commit（建议不要修改，防止错乱）

  默认采用`husky` 在`pre-commit`时进行代码校验和格式化。格式化脚本在`.husky/pre-commit`中查看

  ```bash
  #!/usr/bin/env sh
  . "$(dirname -- "$0")/_/husky.sh"
  
  npm run type-check
  npm run lint
  npm run format
  ```

## 示例

### 接口请求

采用`axios`做为请求库

#### 已封装的基础请求方法 

路径`src/service/basic/http.ts`

```typescript
// get请求
get<T>(url: string, params?: Record<string, any>) => Promise<ResponseBody<T>>

// post请求
post<T>(url: string, params?: Record<string, any>) => Promise<ResponseBody<T>>
  
// excel导出
exportPost<T>(url: string, params?: Record<string, any>) => Promise<T>
```

简介

* `ReponseBody`为服务端返回的结构体，传入泛型可直接引用

  ```typescript
  export interface ResponseBody<T> {
      data: T
      code: string
      encrypt: boolean
      msg: string
      sno: string
      ts: number
  }
  ```

#### 使用

* 基础使用示例

  ```typescript
  import { post } from './http'
  /**
   * @name 获取纠纷来源数据
   * @param query 查询条件，必填项
   * @return Promise<ResponseBody<DisputeSourceAnalysesBody>>
   */
  export const getDisputeSourceData = (
      query: Record<string, any>
  ): Promise<ResponseBody<DisputeSourceAnalysesBody>> =>
      post<DisputeSourceAnalysesBody>(urls.getDisputeSource, query)
  ```

* 响应式请求

  ```typescript
  // hooks/service/view/useDashboard
  
  /**
   * @name 获取纠纷来源分析数据
   * @param formData
   */
  export const useDisputeSourceData = (formData: Ref<QueryData>) => {
    	// 接口响应数据
      const disputeSourceData = ref()
      // 接口加载状态
      const loadStatus1: Ref<LOAD_STATUS> = ref(LOAD_STATUS.LOADING)
      // 错误状态信息
      const error1: Ref<any> = ref()
  
      const fetch = async () => {
          try {
              loadStatus1.value = LOAD_STATUS.LOADING
              const result = await getDisputeSourceData(toValue(formData))
              if (result.code === '200' && result.data) {
                  disputeSourceData.value = result.data
                  loadStatus1.value = LOAD_STATUS.SUCCESS
              } else {
                  loadStatus1.value = LOAD_STATUS.ERROR
              }
          } catch (err) {
              error1.value = err
              loadStatus1.value = LOAD_STATUS.ERROR
          }
      }
      // 根据传入的formData动态请求接口数据并范围
      if (isRef(formData)) {
          watchEffect(fetch)
      } else {
          fetch()
      }
      return {
          disputeSourceData,
          loadStatus1,
          error1
      }
  }
  
  ```

  ```javascript
  
  // ...code
  // 定义响应式formdata
  const formData: ShallowRef<QueryData> = shallowRef({
      caseSource: '',
      placeCode: '',
      caseType: '',
      beginTime: null,
      endTime: null,
      orgId: Number(orgStore.orgId)
  })
  
  // 界面中请求数据，disputeSourceData直接应用于界面中做为props传递或其他形式渲染
  const { disputeSourceData, loadStatus1, error1 } = useDisputeSourceData(formData)
  
  ```

  

### element-plus使用

* `element-plus`采用按需引入组件形式，已按照`Element`官网教程配置好，直接使用即可

```vue
// test.vue
<template>
	<el-button>Trigger</el-button>
</template>
```

* 当前**未配置**任何形式的css编译工具，如`sass`或`less`等，后续可按需配置与集成。



### 组件开发

组件请放在`/src/components`文件夹下，按类型区分

### 组件使用

* 非入口组件中，建议采用异步加载形式加载其子组件

  ```typescript
  const LineChart = importComponent(() => import('@/components/charts/LineChart/LineChart.vue'))
  ```

  `importComponent`简单封装了Vue中的`defineAsyncComponent`。后续按需丰富此函数，如增加loading，组件个性化配置等。

  ```typescript
  const importComponent = (loader: AsyncComponentLoader) => {
      return defineAsyncComponent({
          loader,
          onError: () => {
              console.log('组件加载失败')
          }
      })
  }
  ```

  

## 待优化的点

* 打包体积
  * 当前默认引用的三方库，如`echarts`和`element-plus `在打包后，都存在体积过大问题，可以考虑cdn形式引入
* 首屏加载
  * 当前首屏加载仅做了一个`loading`过渡动动画，是否可以考虑使用`skeleton`？？

* 兼容性
  * 当前沿用`vite`官网的兼容性指南，在`vite.config.js`中配置了`@vitejs/plugin-legacy`，从而在打包时输出不支持原生`ESM`标签和动态导入的浏览器的打包文件产物。
  * 兼容性可尝试使用`eslint-plugin-compat`和`eslint`等插件来实现在开发过程中即可检测兼容性.
* 其他