{"id":26207076,"url":"https://github.com/better-tcy/react-basics-cms","last_synced_at":"2025-04-15T09:41:55.691Z","repository":{"id":44811493,"uuid":"406297777","full_name":"better-tcy/react-basics-cms","owner":"better-tcy","description":"A CMS template based on React, integrated with JS configuration for generating pages","archived":false,"fork":false,"pushed_at":"2022-12-14T07:05:04.000Z","size":5122,"stargazers_count":53,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T18:54:03.398Z","etag":null,"topics":["admin","react","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/better-tcy.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}},"created_at":"2021-09-14T09:06:19.000Z","updated_at":"2024-02-29T13:26:31.000Z","dependencies_parsed_at":"2023-01-28T19:00:44.900Z","dependency_job_id":null,"html_url":"https://github.com/better-tcy/react-basics-cms","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/better-tcy%2Freact-basics-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Freact-basics-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Freact-basics-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Freact-basics-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/better-tcy","download_url":"https://codeload.github.com/better-tcy/react-basics-cms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249046151,"owners_count":21204006,"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","react","redux"],"created_at":"2025-03-12T05:30:11.952Z","updated_at":"2025-04-15T09:41:55.653Z","avatar_url":"https://github.com/better-tcy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 一.说明\n\n#### 这是一个基于 create-react-app 4.0.3(react 17.0.2)搭建的 CMS 基础模板 :rainbow:\n\n1. 全程使用 hooks 函数式组件\n2. redux + redux-thunk 全局状态管理\n3. 定制项目主题（src-\u003eassets-\u003edata-\u003ethemeConfig.js 或者 craco.config.js）\n4. mock.js 模拟接口\n5. 异常监控功能（基于 sentry）\n6. 配置生成页面（UsePage.js 组件中查看，文档地址：https://better-tcy.github.io/json-page-markdown/ ）\n\n- 传入配置即可生成一套基础页面（增 删 改 查 启用 停用）\n- 组件自动校验传入配置项是否正确\n- 页面上所渲染的功能都可灵活配置\n- 根据权限动态渲染按钮\n- 根据业务需求自定义表格及页面按钮\n- 支持搜索区域多个下拉框联动功能\n\n## 二.目录\n\n#### 1 .husky：git 提交钩子配置\n\n#### 2 public：静态资源文件夹\n\n#### 3 src：项目资源\n\n- assets：项目资源(mock 模拟接口,css 初始化,模拟导航数据,项目使用图片)\n- components：组件(页面公共组件,cms 框架组件)\n- request：网络请求(api 文件夹：接口统一维护，http.js：基于 axios 封装的网络请求)\n- router：路由(index.js 主路由，content 中每个文件对应的是每个一级菜单下所有的路由)\n- store：redux 统一数据管理\n- utils：工具文件夹(业务工具，框架层工具)\n- view：项目所有页面(content 文件中最外层为一级菜单，依次延伸 最后一层.js 文件为具体页面)\n- Appjs：项目主组件\n- index.js：项目入口文件\n\n#### 4 .editorconfig：设置多个编辑器统一编码风格\n\n#### 5 .env：对应模式的环境变量（开发 生产）\n\n#### 6 .eslintrc：ellint 配置\n\n#### 7 .gitignore：使用 git 推送到远程存储库时忽略的所有文件和文件夹的名称\n\n#### 8 .prettierignore：使用 prettier 格式化时所忽略的文件\n\n#### 9 .prettierrc：代码格式化配置\n\n#### 10 commitlint.config.js：检测 git commit 提交规范\n\n#### 11 .craco.config.js:对 webpack babel plugins 的一些配置\n\n#### 12 package.json：当前项目的配置及依赖项\n\n#### 13 README.md：项目文档\n\n#### 14 yarn.lock：项目依赖的具体版本\n\n## 三.目录设计思路及个人开发规范\n\n1. 除 store 文件夹外 所有文件夹使用 - 分割 方式命名 例:frame-work\n2. 路由 path 命名 一级以 - 分割命名 二级以大驼峰命名\n3. 所有具体组件使用大驼峰命名\n4. 变量 函数 文件名 使用小驼峰命名\n5. 图片 样式 class 以 cms_name 格式命名\n6. 使用 on 开头的形式作为 props 中用于回调的属性名称\n7. 层级解耦 request router redux（middleware action reducer）\n8. view 和 request 目录结构一一对应（层级明了）\n9. router 目录中 index.js 为主路由，content 中每个文件对应的是每个一级菜单下所有的路由\n10. store 下的每个 frameWork 文件是操作及保存框架所需公共数据的，每个 business 文件是操作及保存业务所需公共数据的\n11. 大写字母结尾含义：\n\n- Fun：普通函数或方法\n- H：定义请求接口函数\n- M：redux 中间件\n- A：redux 派发 action 函数\n- R：reducer 数据\n- C：模块内公共组件\n\n12. 编写组件从上到下结构顺序：\n\n- 获取 props 数据\n- 用 useImperativeHandle 暴露一些外部 ref 能访问的属性\n- 获取所用到的全局数据(缓存，redux，context 等)\n- 声明 history 及 dispatch\n- 定义 useRef 及 useState 数据(第三方非 react 内部 hook 和自定义 hook 再最上面 其他按照页面所需数据从上到下顺序定义)\n- 其他 let 及 const 变量(按照页面所需数据从上到下顺序定义，函数也同样)\n- 定义页面所需函数(页面公共函数 放到函数区最开始，例如 getTableData 函数)\n- useEffect()\n- jsx 代码\n\n## 四.git 提交规范\n\n提交代码需要使用 `npm run commit | yarn commit`：\n\n- 第一步是选择 type，本次更新的类型\n\n| Type     | 作用                                                                                                                     |\n| -------- | ------------------------------------------------------------------------------------------------------------------------ |\n| feat     | 产品新功能（通常是能够让用户觉察到的变化）：大到新增模块 小到文案或样式调整                                              |\n| fix      | 修复 Bug                                                                                                                 |\n| docs     | 修改文档或注释                                                                                                           |\n| style    | 代码格式调整（空格缩进 尾随逗号等）：对逻辑无影响，比如按照 eslint prettierrc 或团队风格修改代码格式（注意不是 UI 变更） |\n| refactor | 重构（代码优化但不影响产品功能）：比如文件 变量重命名、优化代码设计、代码抽象为函数、消除魔法数字等                      |\n| perf     | 改善性能 性能提升                                                                                                        |\n| test     | 测试相关变更                                                                                                             |\n| build    | 变更项目构建或外部依赖：例如 webpack、gulp、npm 等                                                                       |\n| ci       | 更改持续集成软件的配置文件和 package 中的 scripts 命令                                                                   |\n| chore    | 杂项（其他无法归类的变更）：比如代码合并                                                                                 |\n| revert   | 代码回退                                                                                                                 |\n\n- 第二步选择本次修改的范围（作用域）\n\n![image-two](https://github.com/Betteryourself-tcy/images/blob/master/two.png?raw=true)\n\n- 第三步选择提交的信息\n\n![image-three](https://github.com/Betteryourself-tcy/images/blob/master/three.png?raw=true)\n\n- 第四步提交详细的描述信息\n\n![image-four](https://github.com/Betteryourself-tcy/images/blob/master/four.png?raw=true)\n\n- 第五步是否是一次重大的更改\n\n![image-five](https://github.com/Betteryourself-tcy/images/blob/master/five.png?raw=true)\n\n- 第六步是否影响某个 open issue\n\n![image-six](https://github.com/Betteryourself-tcy/images/blob/master/six.png?raw=true)\n\n### ps:页面渲染内容虽然不多 但是可以参考下整体代码设计 欢迎提出问题 共同进步\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetter-tcy%2Freact-basics-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetter-tcy%2Freact-basics-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetter-tcy%2Freact-basics-cms/lists"}