{"id":18379010,"url":"https://github.com/tnfe/tntweb-admin","last_synced_at":"2025-04-06T22:32:28.345Z","repository":{"id":41099260,"uuid":"347867531","full_name":"tnfe/tntweb-admin","owner":"tnfe","description":"react admin management system template","archived":false,"fork":false,"pushed_at":"2022-11-12T12:59:38.000Z","size":80323,"stargazers_count":39,"open_issues_count":2,"forks_count":17,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-22T07:43:31.032Z","etag":null,"topics":["admin-dashboard","admin-template","admin-ui","concent","react-admin","react-admin-template","react-pro"],"latest_commit_sha":null,"homepage":"https://tnfe.github.io/tntweb-admin/","language":"CSS","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/tnfe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-15T06:55:38.000Z","updated_at":"2024-10-15T08:25:07.000Z","dependencies_parsed_at":"2023-01-21T17:47:47.761Z","dependency_job_id":null,"html_url":"https://github.com/tnfe/tntweb-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Ftntweb-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Ftntweb-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Ftntweb-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Ftntweb-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tnfe","download_url":"https://codeload.github.com/tnfe/tntweb-admin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563902,"owners_count":20958971,"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":["admin-dashboard","admin-template","admin-ui","concent","react-admin","react-admin-template","react-pro"],"created_at":"2024-11-06T00:36:41.235Z","updated_at":"2025-04-06T22:32:26.889Z","avatar_url":"https://github.com/tnfe.png","language":"CSS","readme":"\u003cp align=\"center\"\u003e\n   \u003cimg width=\"460\" src=\"https://raw.githubusercontent.com/fantasticsoul/assets/master/c2pro/tnt-long.png\"\u003e\n\u003c/p\u003e\n\n## 概述\n[tntweb-admin](https://tnfe.github.io/tntweb-admin)是一个帮用户整合[concent](https://github.com/concentjs/concent)和[react](https://github.com/facebook/react)相关生态库并内置了最佳实践指导的项目，以便提供给用户开箱即用的体验，包括但不局限于以下功能：\n- 常用concent api示范\n- model目录组织示范\n- ts整合示范\n- 测试用例书写示范\n\n\u003e 本项目使用webpack开发与构建，同时也提供了基于vite的[vite-concent-pro](https://github.com/tnfe/vite-concent-pro)版本，两者src源码一样，推荐给喜欢尝试vite的朋友\n\n## 预览\n[在线示例](https://tnfe.github.io/concent-pro)\n\u003cbr/\u003e\n![](https://raw.githubusercontent.com/fantasticsoul/assets/master/c2pro/ccpro4.png)\n\u003cbr/\u003e\n![](https://raw.githubusercontent.com/fantasticsoul/assets/master/c2pro/ccpro5.png)\n\u003cbr/\u003e\n![](https://raw.githubusercontent.com/fantasticsoul/assets/master/c2pro/ccpro6.png)\n\n## 安装与运行\n- 拉取项目代码\n```bash\ngit clone https://github.com/tnfe/concent-pro.git\ncd concent-pro\n```\n\n- 安装相关依赖\n```bash\nnpm i --registry=https://registry.npmjs.org\n```  \n\n- 启动与调试项目\n```bash\nnpm start （包含启动前端 和 mock服务）\n// 如需分开启动\nnpm run api （启动mock服务）\nnpm run app （启动前端）\n```\n\n- 测试与格式校验\n```bash\nnpm run test (jest测试)\nnpm run lint (eslint校验)\nnpm run lintfix (eslint修复)\n```\n- 代码提交与推送\n```\ngit commit -am 'xxxx_msg' (触发 husky钩子 pre-commit: npm run lintfix)\ngit push (触发 husky钩子 pre-commit: npm run test)\n```\n\n## 添加页面\n- 添加菜单与路由   \n`src/configs/menus`里添加路由对应的菜单信息\n- 添加路由页面    \n`src/pages`目录下添加页面组件\n\u003e 可参考 `src/pages/_DemoTempalte`查看示例代码，启动项目后 访问 localhost:3000/template可以访问该组件页面\n\n## 添加模块\n模块可在`src/models`目录下添加，也可以在pages/XxxComp里就近添加业务模块，需注意都要在`src/models/index.ts`文件里暴露出去，\n模块名统一维护在`src/configs/c2Mods.ts`文件\n\n- 添加模块名\n```\n// src/configs/c2Mods.ts文件\nexport const HELLO = modName('Hello');\nexport type T_HELLO = typeof HELLO;\n```\n- 添加多文件模块\n在`src/models`下添加目录`hello`，将模块的`state`,`reducer`,`computed`拆开写\n```txt\n|____models              \n| |____hello             \n| | |____state.ts\n| | |____reducer.ts\n| | |____computed.ts\n| | |____index.ts\n```\n\n定义状态【必需】\n```ts\nfunction getInitialState() {\n  return {\n    str: '',\n    loading: false,\n  };\n}\nexport type St = ReturnType\u003ctypeof getInitialState\u003e;\nexport default getInitialState;\n```\n\n定义方法【可选】\n```ts\nimport { St } from './state';\nimport { VoidPayload, AC } from 'types/store';\nimport { T_HELLO } from 'configs/c2Mods';\nimport { delay } from 'utils/timer';\n\ntype IAC = AC\u003cT_HELLO\u003e;\n\nexport function simpleChange(payload:string, moduleState:St, ac:IAC){\n    return {str:payload};\n}\n\nexport async function complexChange(payload:string, moduleState:St, ac:IAC){\n    await ac.setState({loading:true});\n    await delay(2000);\n    // 下面两句可合写为：return {str:payload, loading: false};\n    ac.dispatch(simpleChange, payload); // 当前文件内复用其他reducer逻辑\n    return { loading: false };\n}\n```\n\n定义计算【可选】\n```ts\nimport { St } from './state';\n\n// only value change will triiger this function to execute again\nexport function reversedStr({ str }: St) {\n  return str.split('').reverse().join('');\n}\n```\n\n`src/models/hello/index.ts`文件暴露模块\n```ts\nimport { HELLO } from 'configs/c2Mods';\nimport state from './state';\nimport * as computed from './computed';\nimport * as reducer from './reducer';\n\nexport default {\n  [HELLO]: {\n    state,\n    computed,\n    reducer,\n  }\n};\n \n```\n\n`src/models/index.ts`文件引入模块合并到根模块\n```\nimport global from './global'; // 覆写concent内置的$$global模块\nimport Hello from './hello';\n\nconst toExport = {\n  ...Hello,\n  ...global,\n};\n\nexport default toExport;\n```\n\n任务组件使用`useC2Mod`消费模块数据，使用模块方法\n```ts\nimport { useC2Mod } from 'services/concent';\nimport { HELLO } from 'configs/c2Mods';\n\nexport function SomeComp(){\n    // state:数据，mr:方法\n    const { state, mr } = useC2Mod(HELLO);\n}\n```\n\n\n## 编码建议\n1 pages里拆分的组件如不涉及到跨页面复用，推荐就近放置，如后期复用在移到`components/**`下   \n2 page模块状态推荐就近放置\n\n## 技术栈\n### 运行时依赖\n* [react 16.13.1](https://github.com/facebook/react) 组件化编程ui基础库   \n* [react-router v5](https://github.com/ReactTraining/react-router) react路由方案 \n* [concent v2](https://github.com/concentjs/concent) 内置依赖收集，高性能、渐进式的react开发框架\n* [react-router-concent v2](https://github.com/concentjs/react-router-concent) 桥接react-router和concent的中间库\n* [ant-design v4](https://github.com/ant-design/ant-design) react基础ui组件库\n\n### 开发依赖\n* [create-react-app v3](https://github.com/facebook/create-react-app)   \n* [mocker-api v1.13](https://github.com/jaywcjlove/mocker-api)    \n* eslint\n* webpack\n* typescript\n* jest\n* husky\n\n## 根目录结构\n```\n|____config             # CRA webpack相关配置[由npm run eject弹出]   \n|____mock               # mock api配置\n|____public             # webpack-dev-server 静态资源目录\n|____scripts            # npm 脚本\n|____src                # 项目源码\n```\n\n## src目录结构\n```\n|____configs\n| |____constant           # 各种常量定义处目录\n| |____runConcent.ts      # 启动concent\n| |____menus.ts           # 站点菜单配置(包含了路由)\n| \n|____index.tsx            # app入口文件\n|____utils                # 通用的非业务相关工具函数集合（可以进一步按用途分类）\n|____models               # [[business models(全局模块配置)]]\n| |____index.js           # 如需全局各个组件共享的model，可提升到此处导出（model可就近放置也可放到models目录下）\n| |____global             # [[ 一个标准的模块文件(可以copy到各处，只需修改meta里的模块名即可 ]]\n| | |____index.ts         # 模型导出文件\n| | |____reducer.ts       # 修改模块数据方法(可选)\n| | |____computed.ts      # 模块数据的计算函数(可选)\n| | |____watch.ts         # 模块数据的观察函数(可选)\n| | |____lifecycle.ts     # 模块生命周期配置(可选)\n| | |____state.ts         # 模块状态(必需)\n| | |____meta.ts          # 模块元数据文件- 导出整个模块的描述对象、相关类型、钩子等\n| |____...\n| |\n|____components           # [[多个页面复用的基础组件集合]]\n|\n|____pages                # [[页面组件，通常也是路由组件]]\n| |____PageFoo\n|   |____ model           # 当前页面的model定义，方便就近打开就近查看（定义可见models/global）\n|   |____ dumb            # 当前页面的一些业务笨组件（如果出现多个页面重用则可以进一步调整到components/dumb下）\n|\n|____types                # 类型定义目录\n| |____store              # store相关的各种类型推导文件(这是一个固定的文件，无需用户改动)\n| |____mods               # 模型推导辅助文件，无需用户修改\n| |____ev-map             # 事件相关的类型定义\n| |____domain             # 业务领域相关的对象类型定义，通常是后端返回的对象\n| |____biz                # 其他一些全局通用的前端定义的对象类型\n|\n|\n|____services             # [[services，涉及业务io相关、业务通用逻辑相关下沉到此处]]\n| |____domain             # 领域模型相关服务\n| | |____user\n| | |____ticket\n| |____common-func        # 和领域无关的基础业务函数集合\n| |____http               # 其他业务基础服务\n| |____...\n```\n\n## 浏览器兼容\n\nModern browsers and IE10.\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --- | --- | --- | --- | --- |\n| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftnfe%2Ftntweb-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftnfe%2Ftntweb-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftnfe%2Ftntweb-admin/lists"}