{"id":26982907,"url":"https://github.com/wealthtooltip/kmgames-front-stage","last_synced_at":"2025-04-03T16:36:22.191Z","repository":{"id":284163452,"uuid":"702754165","full_name":"WealthTooltip/kmgames-front-stage","owner":"WealthTooltip","description":"Bet on your favorite sports like football and basketball, plus popular esports games. Enjoy live betting, a user-friendly interface, and secure transactions. Access our site on mobile for betting on-the-go. Join us today for exciting promotions and a thrilling betting experience!","archived":false,"fork":false,"pushed_at":"2025-03-21T19:03:05.000Z","size":18665,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T14:26:01.159Z","etag":null,"topics":["aws","gcp","i18n","material-ui","mongodb","react","tailwindcss","typescript","vue"],"latest_commit_sha":null,"homepage":"https://www.6w1ht1.vip:8443/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WealthTooltip.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-10T00:25:00.000Z","updated_at":"2025-03-24T11:55:51.000Z","dependencies_parsed_at":"2025-03-24T14:36:15.522Z","dependency_job_id":null,"html_url":"https://github.com/WealthTooltip/kmgames-front-stage","commit_stats":null,"previous_names":["wealthtooltip/kmgames-front-stage"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WealthTooltip%2Fkmgames-front-stage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WealthTooltip%2Fkmgames-front-stage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WealthTooltip%2Fkmgames-front-stage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WealthTooltip%2Fkmgames-front-stage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WealthTooltip","download_url":"https://codeload.github.com/WealthTooltip/kmgames-front-stage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247038981,"owners_count":20873441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","gcp","i18n","material-ui","mongodb","react","tailwindcss","typescript","vue"],"created_at":"2025-04-03T16:36:21.670Z","updated_at":"2025-04-03T16:36:22.180Z","avatar_url":"https://github.com/WealthTooltip.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KMG FONT-END 2C 项目开发指南 #\n\n### 技术栈\n框架体系：\n`react - v1.18.12 / redux / typescript - v4.0`\n\n其他：\n`webpack / scss / lodash / axios`\n\n### 安装工程\n`npm start`\n\n### 启动工程\n`npm run build` -\u003e `编译/打包/开发模式` -\u003e `开发模式` -\u003e `对应项目-对应客户端`\n\n### 开发/打包配置\n参见 `/deployment/projects.config.js`\n\n### 插件\n请在VS CODE中安装以下插件，来激活团队IDE配置与格式化配置`Prettier`, `EditorConfig`\n\n### 跨域\n`默认开发时的API接口为：webpack - proxy`\n\n### 基本目录结构\n\u003cpre\u003e\nweb-main\n  |- assets\n  |- cli\n  |- deployment\n  |- src\n  |   |- assets\n  |   |- core (核心文件，影响全平台全端)\n  |       |-actions     * redux行为\n  |       |-apis        * 接口相关\n  |       |-constants   * 常量（配置等）\n  |       |-middleware  * redux中间件\n  |       |-mocks       * 模拟接口数据，临时存放\n  |       |-helpers     * 工具类\n  |       |-i18n        * 国际化目录\n  |       |-hooks       * React HOOK - 提供视图层主体逻辑\n  |       |-reducers    * redux reducer\n  |       |-schemas     * TS全局声明\n  |       |-store       * redux store\n  |       |-types       * redux types\n  |       |-templates   * 公共模板\n  |          |-mobile   * 手机端模板\n  |          |-desktop  * PC端模板\n  |          |-static   * 静态模板\n  |       |\n  |   |- views (视图文件，影响单个项目或单个端)\n  |       |-kmg（视图工程）\n  |         |-assets  * 静态资源\n  |         |-public  * 公共配置 - 影响单个项目\n  |         |-desktop * PC端视图\n  |         |-mobile  * H5端视图\n  :       :    :\n\u003c/pre\u003e\n\n### 配置管理\n为了最大程度复用和分离平台与端的耦合，配置采用三层配置并使用继承与复写来\n- 公共配置：`core/constants/configs` - 该配置影响全平台\n- 项目配置：`views/{platform}/public/configs.ts` - 影响某平台（不分端），在此配置中引用公共配置，并向下导出\n- 客户端配置：`views/{platform}/{client}/configs.ts` - 影响单平台单端，在此配置中引用项目配置\n\n例：全平台公共配置 DEFAULT_AGENT_CODE，但其中A平台有URL差异，则在【项目配置】中进行变量复写\n```javascript\nimport CONFIG from '@constants/configs';\n\nexport const DEFAULT_AGENT_CODE = '000222'\n\nexport default {\n  ...CONFIG,\n DEFAULT_AGENT_CODE\n}\n```\n相同，如果只是客户端级别差异，则在【客户端配置】中进行复写\n\n### 别名\n对于不同工程的私有路径，如何在公共组件中进行区分，例如：\nKMG前台平台配置文件路径：`src/views/kmg/desktop/config.ts`\nKMG后台配置文件路径：`src/views/kmg-backend/desktop/config.ts`\n在公共组件中要使用对应的配置文件就需要用到别名进行处理\n```javascript\n\n// projects.config.js\nconst kmg = {\n  client: client === 'pc' ? 'desktop' : 'mobile',\n  base: 'mc',\n}\n\n// webpack\nconst alias = {\n  '@this': path.join(__dirname, `../src/views/${CONFIG.base}/${CONFIG.client}`)\n}\n\n// component\nimport CONFIGS from '@this/config'\n```\n\n### 接口缓存\n对于接口数据缓存，添加了以下参数进行拓展：\n```javascript\n/**\n * 请求缓存相关\n * @param expires      缓存时间 单位 分钟\n * @param forward      当有缓存数据时，是否仍然请求去更新当前缓存\n * @param isUserBind   该缓存是否绑定当前用户\n * @param cacheClear   是否弃用当前缓存数据，重新缓存\n */\n```\n### 接口超时处理\n接口超时处理如下图所示：\n```javascript\n/**\n * 请求超时相关\n * @param timeout         自定义超时时间 单位 s\n * @param timeoutCallback 自定义超时回调函数\n * @param maxRetry        最大重试次数\n */\n```\n![avatar](./assets/markdown/timeout.png)\n\n### 页面白屏异常处理\n对于页面/子组件在render过程中发成报错造成的白屏，针对多个项目在 `/views/$client/components/PageHOC` 中使用 class component 中 `componentDidCatch` 生命周期将其捕获，后经\n`/views/$client/pages/Error` 将其错误信息进行友好抛出，核心代码如下：\n```javascript\nclass ErrorHandler extends React.Component {\n\n  constructor(props: any) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  componentDidCatch(error: any) {\n    this.setState({ hasError: error })\n  }\n\n  render() {\n    if ((this.state as any).hasError) {\n      return \u003cErrorScreen log={(this.state as any).hasError} /\u003e\n    }\n    return (this.props as any).children\n  }\n}\n```\n\n### React HOOK\nReact hook作为本次重构的核心，在解耦合中起了重要的作用，已将在class component中以下部分移植到HOOK中\n- 所有HOC相关的操作\n- 所有services的操作\n- 不区分客户端的组件生命周期管理\n- redux相关操作\n- `aHook` 库作为常用的 hook 被添加使用  [官方文档](https://ahooks.js.org/guide)\n\n### 样式管理\n#### 目录\n对于大多数【页面】/【组件】，在同一目录下都一一对应一个style scss文件相依赖，例如：\n- 首页 `home/index.tsx` 在其同一目录中 `home/style.scss` 与之对应\n- banner `template/desktop/components/banner/index.tsx` 在其同一目录中 `/style.scss` 与之对应\n\n#### 主要的依赖结构\n![avatar](./assets/markdown/scss.png)\n\n#### 模块化\n为了避免相同className导致不同组件间样式冲突，每个组件或者页面都使用css模块化进行root节点类命名\n```scss\n:local(.wrapper){\n\n}\n```\n```javascript\nimport css from './style.scss';\nreturn (\n  \u003cdiv className={css.wrapper}\u003e\n  \u003c/div\u003e\n)\n```\n\n#### 头部引用规范\n对于依赖引用，应按照如下顺序从上之下进行引用\n- ts定义文件 `import { TAction } from './_actionTypes.d.ts'`\n- 第三方库 `import dayJs from 'dayjs'` / `import QR from 'qrcode.react'` etc..\n- 逻辑层HOOK `import useLogin from '@hooks/useLogin'`\n- 组件 `import Popup from '@this/shadow/Popup'` / `import Child from '../Child'` etc...\n- 帮助/全局类 `import G from '@constants/global'` / `import { formatDate } from '@helpers/unit'` etc...\n- 样式 `import css from './style.scss'`\n一个相对完整的示例如下：\n```javascript\nimport { TAction } from './_actionTypes.d.ts'\nimport { useParams } from 'react-router';\nimport usePromotion from \"@core/hooks/usePromotion\";\nimport usePublicState from \"@core/hooks/usePublicState\";\nimport PageHOC from \"@this/components/PageHOC\";\nimport { SkeletonLoader, NoData } from '@this/shadow/Loading';\nimport Banner from '@this/shadow/Banner';\nimport Select from '@this/shadow/Select';\nimport G from '@constans/global'\nimport css from './style.scss';\n```\n\n#### 文件注释规范\n推荐使用VS Code头部注释插件：【koroFileHeader】并添加以下配置到 IDE SETTINGS 中\n```JSON\n// 头部注释\n\"fileheader.customMade\": {\n  \"Author\": \"${your name}.GE\",\n  \"Date\": \"Do not edit\",\n  \"LastEditors\": \"${your name}.GE\",\n  \"FilePath\": \"Do not edit\",\n  \"Description\": \"\",\n},\n// 函数注释\n\"fileheader.cursorMode\": {\n  \"Author\": \"${your name}.GE\",\n  \"Date\": \"Do not edit\",\n  \"description\": \"\",\n  \"param\": \"\",\n  \"return\": \"\",\n},\n```\n\n#### CLI 子工程\n\n\n#### 影子组件\n\n\n#### 公共组件样式差异化\n\n\n#### 公共组件结构（功能）差异化\n\n\n#### redux store 状态差异化\n\n\n#### 国际化\n\n\n#### 开发新平台步骤\n\n\n#### 约束（以下行为在开发过程中不允许出现）\n\n\n#### 其他规范\n# 2024-04-04\n# 2024-04-04\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwealthtooltip%2Fkmgames-front-stage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwealthtooltip%2Fkmgames-front-stage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwealthtooltip%2Fkmgames-front-stage/lists"}