{"id":23589640,"url":"https://github.com/itroads/react-admin-ts-starter","last_synced_at":"2025-05-07T13:01:20.850Z","repository":{"id":40293025,"uuid":"191865725","full_name":"Itroads/react-admin-ts-starter","owner":"Itroads","description":"react-admin-typescript-starter","archived":false,"fork":false,"pushed_at":"2022-12-10T21:10:55.000Z","size":1954,"stargazers_count":11,"open_issues_count":24,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T10:11:54.425Z","etag":null,"topics":["admin","pages","react","react-router","redux","tabs","typescript"],"latest_commit_sha":null,"homepage":null,"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/Itroads.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":"2019-06-14T02:49:15.000Z","updated_at":"2021-12-13T09:35:19.000Z","dependencies_parsed_at":"2023-01-26T11:16:36.880Z","dependency_job_id":null,"html_url":"https://github.com/Itroads/react-admin-ts-starter","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/Itroads%2Freact-admin-ts-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Itroads%2Freact-admin-ts-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Itroads%2Freact-admin-ts-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Itroads%2Freact-admin-ts-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Itroads","download_url":"https://codeload.github.com/Itroads/react-admin-ts-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252883219,"owners_count":21819157,"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","pages","react","react-router","redux","tabs","typescript"],"created_at":"2024-12-27T06:16:52.046Z","updated_at":"2025-05-07T13:01:20.775Z","avatar_url":"https://github.com/Itroads.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-admin-ts-starter\n\nReact + Typescript 开发的后端多页脚手架\n![react-admin-scaffold](https://github.com/Itroads/assets/blob/master/react-admin-scaffold/README/rast-show.png \"react-admin-scaffold\")\n\n# 前言\n关于这个脚手架项目：  \n1. 为了公司多个产品模块能够统一，这样维护起来比较轻松  \n2. 公司产品的上一个版本用 layui 开发，有 Tab 多页（所以...）  \n3. 为了和市面上大众UI区分开（虽然可以用 Antd，然后覆盖样式，个人不推荐），内置了需要的组件和部分特色功能  \n4. 内置皮肤（与内置组件结合），继承原来产品的意志  \n\n如果发现不妥之处，麻烦 `issues` 指出。\n\n# 如何使用？\n\n`git clone https://github.com/Itroads/react-admin-ts-starter.git`\n\n`cd react-admin-ts-starter`\n\n`yarn`\n\n`yarn start`\n\n# 有哪些特别之处？\n* 多 Tab 页，灵活切换\n* 内置部分组件（其中 Modal 组件，可拖动，范围可设定）\n* 内置皮肤，也可以自定义\n* 可支持，左中右结构，就像 win 上的很多应用那样，当然这是可选项\n\n# 内置组件说明\n## Modal  \n### Params 参数说明\n\n| 参数名称 | 类型 | 说明 | 是否必须 |\n|:----|:-----:|:-----:| :-------:|\n| `Component` | `Component` | 弹窗显示的组件内容 | 必须 |\n| `options` | `Object` | width?:string, height?:string, imgSrc:any, title:string |必须 |\n| `ParentFn` | `Function` | 父组件传入的方法，如：点击确定，所触发的方法 | 必须 |\n| `dataToChildren` | `Any` | 父组件传递给子组件的值 | 必须 |\n| `localDialog` | `Object` | ref:React.RefObject\u003cHTMLDivElement\u003e, tabId:string, addFn:Fn, delFn:Fn。不传则为全局弹窗 | 可选 |\n\n\n``` javascript\nimport React, { Component } from 'react'\nimport createModal from '../../components/modal'\nimport CreatNewRole from './creatNewRole'\n\nclass Demo extends Component {\n\tconstructor(props: any) {\n\t    super(props)\n\t    this.container = React.createRef();\n\t}\n\t\n    public container: React.RefObject\u003cHTMLDivElement\u003e;\n   \n\tshowNewModal () {\n\t    createModal(CreatNewRole,{\n          width: '650px',\n          height: '360px',\n          imgSrc: require('../../assets/logo.png'),\n          title: '添加角色'\n        },this.creatRole, '',{\n\t      ref: this.container, \n\t      tabId: this.props.activeTabId, // 来自 store\n\t      addFn: this.props.addDialogData, // 来自 store\n\t      delFn: this.props.deleteDialogData // 来自 store\n    \t })\n  \t}\n  \t\n  \trender() {\n\t  \treturn (\n\t  \t\t\u003cdiv ref={this.container}\u003e\n\t  \t\t...\n\t  \t\t\u003c/div\u003e\n\t  \t)\n  }\n}\n```  \n\n**注意**：包裹弹出组件的父节点，要设置 `position: relative;` ，因为遮罩层采用绝对定位。所以，遮罩范围，取决于设置了相对位置的父节点。  \n**弹窗内部的组件，可通过调用 `this.props.close()` 来关闭弹窗**\n\n\n## Alert\n\n### Params\n\n一共包含四个子组件：\n`createConfirm` `createInfo` `createWarning` `createError`  \n和一个供外部调用的关闭方法 `clearAlert`，直接调用即可 `clearAlert()`\n\n| 属性名称 | 类型 | 说明 | 是否必须 | 范围 |\n|:----|:-----:|:-----:| :-------:|:---:|\n| `msg` | `String` | 弹窗的文字描述信息 | 必须 | 通用 |\n| `cb` | `Function` | `Confirm` 弹窗，点击确定的回调方法 | 必须 | `Confirm` |\n\n``` javascript\nimport React, { Component } from 'react'\nimport { createConfirm, createInfo, createWarning, createError, clearAllAlert } from '@components/alert/alert'\n\nclass Demo extends Component {\n\n\t/**\n   * confirm 点击确认按钮的回调\n   * @param {any} params \n   */\n  confirmCallBack (params) {\n    console.log('test', params)\n    clearAllAlert()\n  }\n\n  showNewConfirm () {\n    createConfirm('确定要删除xxx ？', this.confirmCallBack.bind(this, 123))\n  }\n\n  showNewInfo () {\n    createInfo('确定要删除xxx ？')\n  }\n\n  showNewWarning () {\n    createWarning('警告信息')\n  }\n\n  showNewError () {\n    createError('错误信息')\n  }\n  \n  render() {\n  \treturn (\n  \t\t...\n  \t)\n  }\n\n}\n```  \n\n## Toast\n\n### Params\n\n| 属性名称 | 类型 | 说明 | 是否必须 |\n|:----|:-----:|:-----:| :-------:|\n| `text` | `String` | 弹窗的文字描述信息 | 必须 |\n| `time` | `Number` | `Toast` 弹窗，指定时间后消失，默认1500毫秒 | 可选 |\n\n### Demo\n\n``` javascript\nimport React, { Component } from 'react'\nimport Modal from '@components/modal/modal'\n\nclass Demo extends Component {\n\tshowToast () {\n      createToast('账号或密码错误账号或密码错误', 2000)\n  \t}\n  \t\n  \trender() {\n\t  \treturn (\n\t  \t\t...\n\t  \t)\n   }\n}\n\n```  \n\n## Menu\n\n### Params\n\n| 属性名称 | 类型 | 说明 | 是否必须 |\n|:----|:-----:|:-----:| :-------:|\n| `data` | `Array` | 菜单数据 | 必须 |\n| `activeTabId` | `String` | 当前页面的ID，来自 Store | 可选 |\n| `openOrToggleTabBox` | `Function` | 左侧菜单导航，处理 tabBox 方法，来自 store | 可选 |\n| `operateCallBack` | `Function ` | 右侧操作菜单回调函数 | 可选 |\n| `tabModalCount` | `Number` | 当前 tab 页的弹窗数量 | 可选 |\n\n### Demo\n\n#### 左侧菜单\n\n``` javascript\nimport * as React from 'react'\nimport { connect } from 'react-redux'\nimport { addTabBox, setDefaultTab } from '../../reducers/tabBoxReducer'\n\nclass Demo extends Component {\n\t\n  \trender() {\n\t  \treturn (\n\t  \t\t\u003cMenu \n\t  \t\tdata={this.state.data} \n\t  \t\tactiveTabId={this.props.activeTabId} \t\t\topenOrToggleTabBox={this.props.addTabBox}\n\t  \t\t/\u003e\t  \t\n\t  \t)\n   }\n}\n\nconst mapStateToProps = (state: any) =\u003e ({\n  activeTabId: state.tabBoxState.activeTabId\n})\n\nconst mapDispatchToProps = (dispatch: any) =\u003e ({\n  addTabBox: (tabItem: ITabItem) =\u003e dispatch(addTabBox(tabItem)),\n  setDefaultTab: (tabItem: ITabItem) =\u003e dispatch(setDefaultTab(tabItem))\n})\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Demo)\n\n\n```  \n\n#### 右侧菜单\n\n``` javascript\nimport * as React from 'react'\nimport { connect } from 'react-redux'\nimport { addDialogData, deleteDialogData } from '../../../../reducers/modalReducer'\n\nclass Demo extends Component {\n\t\n  \trender() {\n\t  \treturn (\n\t  \t\t\u003cMenu \n\t  \t\tdata={this.state.rightMenuData} \n\t  \t\toperateCallBack={(value: string) =\u003e this.menuOperate(value)} \t\t\ttabModalCount={this.props.modalState ? \t\t\t\tthis.props.modalState[this.props.activeTabId] : null} \n\t  \t\t/\u003e\t\n\t  \t)\n   }\n}\n\nconst mapStateToProps = (state: any) =\u003e ({\n  activeTabId: state.adminTabBoxState.activeTabId,\n  modalState: state.modalState\n})\n\nconst mapDispatchToProps = (dispatch: any) =\u003e ({\n  addDialogData: (key: string) =\u003e dispatch(addDialogData(key)),\n  deleteDialogData: (key: string) =\u003e dispatch(deleteDialogData(key))\n})\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Demo)\n\n\n```  \n\n# 你可能存在的疑惑？\n\n## 皮肤设置？\n打开 `/src/utils`  \n\n```  \n-utils\n\t-skin-files\n\t\t-darkBlack.ts // 输出皮肤样式的对象\n\t\t-darkBlue.ts\n\t\t...\n\t-skin.ts // 输出全局的，皮肤样式\n\n```\n\n发挥你的设计灵感吧！:smiling_imp:  \n\n## 哪里控制 Tab 页面？\n\n打开 `/src/pages/home/pageBox.tsx` 我想，里面的注释，应该足够解释了\n\n## 如何实现的多Tab页？\n核心就是 redux 状态管理，尽在 `/src/reducers`，里面的注释可以帮你解惑\n\n\n\n**特别报道：** 爝神的 Node 框架 [Daruk](https://github.com/darukjs/daruk) 震撼登场！\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitroads%2Freact-admin-ts-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitroads%2Freact-admin-ts-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitroads%2Freact-admin-ts-starter/lists"}