工程目录图
整体结构说明
src下的目录说明
src
- assets 静态资源文件
- common 定义共通的状态和数据,代码如下
import { PAGEID } from "~/route/pageConfig"; export enum ENV { DEVELOPMENT = 'development', PRODUCTION = 'production', TEST = 'test', } export const Config = { urlApi: '/HAG4030A', illegal: `^(?![\\s\\S]*(\\\\n)|[\\s\\S]*(\\\\t)|[\\s\\S]*(\\t))[\\s\\S]*$`, illegalCharacter: `^(?![\\s\\S]*(\\\\n)|[\\s\\S]*(\\\\t)|[\\s\\S]*(\\t)[\\s\\S]*(\\n))[\\s\\S]*$`, hankaku: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォッャュョー゙゚ 。、!#%&()*+,-./:;<=>?@[]^_\`{|}~・「」$"'\\r\n`, youon: 'ァィゥェォャュョッ', pattarn: /^1[3456789]\d{9}$/, YYYYMMDD: /^([0-9]{4})\/([0-1][0-9])\/([0-3][0-9])$/, YYYYMM: /^([0-9]{4})\/([0-1][0-9])$/, YYMMDD: /^([0-9]{2})\/([0-1][0-9])\/([0-3][0-9])$/, YYMM: /^([0-9]{2})\/([0-1][0-9])$/, MMDD: /^([0-1][0-9])\/([0-3][0-9])$/, ROLLIST: /^\[(\{"rolCd":"[^({|}|,|")]+","rolKj":"[^({|}|,|")]+","shmFl":"[^({|}|,|")]+","hnbTenKb":"[^({|}|,|")]+"\},)*(\{"rolCd":"[^({|}|,|")]+","rolKj":"[^({|}|,|")]+","shmFl":"[^({|}|,|")]+","hnbTenKb":"[^({|}|,|")]+"\}\])$/g, yyyymmdd: /^([0-9]{4})([0-1][0-9])([0-3][0-9])$/, yyyymm: /^([0-9]{4})([0-1][0-9])$/, yymmdd: /^([0-9]{2})([0-1][0-9])([0-3][0-9])$/, yymm: /^([0-9]{2})([0-1][0-9])$/, mmdd: /^([0-1][0-9])([0-3][0-9])$/, tel: /^(\+?81|0)\d{1,4}[ -]?\d{1,4}[ -]?\d{4}$/, }; export const Constants = { STORAGE_PREFIX: 'persist:', STORAGE_ROOT: 'root', STORAGE_BUSSINESS_COMMON: 'busesCommon', STORAGE_KEY_CLEAR_FLG: 'clearFlg', STORAGE_CLEAR_FLG_VAL_TRUE: '1', STORAGE_KEY_DIRECT_URL_ACCESS: 'direct_url_access', STORAGE_KEY_GMN_SNI_FLG: 'gmn_sni_flg', STR_TRUE:'true' } export const singlePage: string[] = [ PAGEID.XARPAGE0010 ] export const ButtonState = { // 照会 BUTTEN_DO_REF_BTN: 'doRefBtn', // 検索 BUTTEN_DO_SRH_BTN: 'doSrhBtn', // 履歴 BUTTEN_GO_RIREKI_BTN: 'goRirekiBtn', // 修正 BUTTEN_DO_UPD_BTN: 'doUpdBtn', // 戻る BUTTEN_BACK_BTN: 'backBtn', // 一覧 BUTTEN_GO_ICHIRAN_BTN: 'goIchiranBtn', }
components 组件文件
- common 共通的组件 如图所示
- error 报错的画面
import * as React from 'react'; export default React.memo(function NotFoundPage() { return ( <> <h3 style={{textAlign:'center'}}> <span style={{color:'#33717f'}}>システムエラー画面 -404-</span> </h3> <h4>エラー通知</h4> <table> <tr> <td>システムエラーが発生しました。システム管理者に連絡してください。</td> </tr> </table> </>; ) });
- menu 首页
- page 画面文件
hooks 自定义hook
- redux 全局状态管理器
- route 路由文件
- utils 共用的方法