# page-template

**Repository Path**: Rickest_Rick/page-template

## Basic Information

- **Project Name**: page-template
- **Description**: page-template
deepfos 单页应用模版。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-08
- **Last Updated**: 2023-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# page-template

`deepfos` 单页应用模版。

## 使用

1. 修改 `page-template` 为具体业务命名，必须以 `page-` 开头，系统识别到 `page-` 开头的路径为单页应用，将具体的请求转发到本项目中
2. 执行 `pnpm i` 安装基本依赖。若后续开发有更多依赖请自行安装
3. 请在 IDE 中配置 `eslint`、`stylelint`、`prettier` 相关代码规范检查的功能
4. `pnpm dev` 启动项目预览

## 基本命令

### `pnpm dev`

启动开发调试

### `pnpm lingui`

提取并编译多语言

流程：

1. `pnpm lingui`
2. 自行翻译缺失的语言，可使用机器翻译
3. 再次执行 `pnpm lingui`

### `pnpm lint`

启动代码规范检查

### `pnpm build`

执行代码编译

## 开发流程

### 定义接口

在 `src/services` 目录中新增接口定义

#### 接口URL组成说明
接口URL = 域名urlPrefix + 服务名serverName + 剩余url
举例：

`src/utils/request.ts`

```tsx
export const listTableServer = extend({
  prefix: `${urlPrefix}/list-table-server1-2`,
});
```

`src/services/listTable.ts`

```tsx
/**
 * 清单表列表查询
 */
export async function getListTableData(data: GetListTableDataOptions): Promise<IFormListData> {
  return listTableServer.post(`/list-table/data`, {
    data,
  });
}
```
#### 常用服务名
```
系统服务:system-server
系统app服务:app-server
系统空间服务:space-server
菜单：menu-server1-0
清单表:list-table-server1-1、list-table-server1-2
明细表:business-form-server1-1、business-form-server1-2
python:python-server2-0
维度:dimension-server1-0、dimension-server1-1、dimension-server1-2
电子表格:deep-table-server1-0、deep-table-server2-0
```

### 使用接口

接口请求使用 `ahooks` 中的 `useRequest`

```tsx
import { HappySpin } from '@deepfos/happy';

const { data, loading, error, mutate } = useRequest(queryMenu);

if (loading) {
  return <HappySpin />;
}

// 处理 data
```

### 新增路由

本项目使用 `react-router@6`。若要新增路由，在 `src/router/systemRoutes.tsx` 中参照示例新增配置：

```
{
  path: '/menu',
  lazy: () => import('@/pages/menu'),
},
```

新增路由：`src/pages/menu/index.tsx`

```tsx
export function Component() {
  // 组件代码
  return <div>Hello world</div>;
}
```

## 开发调试

### 授权

分支一: 开发调试需要保持当前环境的授权，在 `Chrome` 开发者工具/应用栏目/Cookie，拷贝测试环境中的 cookie `xxx_deepfos_token` 至本地开发环境。

分支二: 或者将以下代码粘贴到 `index.html` 中进行单点登录同步授权：

```html
<script
  type="text/javascript"
  src="https://account.deepfos.com/system-account-api/oauth/login/api"
></script>
<script type="text/javascript">
  window.onload = function () {
    if (window.deepfos_users && window.deepfos_users.token) {
      document.cookie = `cloud_deepfos_token=${window.deepfos_users.token};path=/`;
    }
  };
</script>
```

### 调试

`pnpm dev`

启动后输出：

```
  VITE v4.4.7  ready in 1010 ms

➜  Local:   http://localhost:5173/page-template/
➜  Network: http://192.168.26.65:5173/page-template/
➜  press h to show help

```

在浏览器中打开，将测试环境中的所有参数部分拼接在地址栏目后面，举例：

```
http://localhost:5173/page-template/list-table?elementName=req_list&folderId=DIRd61da2a8ccfc&moduleId=LST1_2&sign=YXBwSWQ9a2d3d2duMDAxJnNwYWNlPWtnd3dnbg%3D%3D
```

## 部署流程

## 编译

`pnpm build`

拷贝 `dist` 目录文件至 `nginx` 中 `/usr/share/nginx/html/page-list-table` 目录

### 部署在原有先胜云

在先胜云 `nginx` 中新增配置

以 list-table 举例（以 `page-` 开头）：

```
location /page-list-table {
    try_files $uri $uri/ /page-list-table/index.html;
    root /usr/share/nginx/html/page-list-table;
    index index.html index.htm;
}
```

### 部署在单独环境

在原有的环境上，配置 `nginx` 需要代理请求接口的网关。

### DEMO 
demo中清单表列表查询接口，调用如下
```
export async function getListTableData(data: GetListTableDataOptions): Promise<IFormListData> {
  return listTableServer.post(`/list-table/data`, {
    data,
  });
}
```

## 在菜单中配置

此页面由 iframe 的方式在先胜云中打开，因此在菜单需要配置自定义页面：

https://cloud.deepfos.com/iframe?description=&src=

其中 `src` 字段为链接地址，需要通过 `encodeURIComponent` 转码。