{"id":29290376,"url":"https://github.com/thomas-void0/cta-template-admin","last_synced_at":"2025-07-06T06:04:10.838Z","repository":{"id":61677677,"uuid":"548797560","full_name":"thomas-void0/cta-template-admin","owner":"thomas-void0","description":"基于react18的模板项目，支持路由keepalive，历史访问页签","archived":false,"fork":false,"pushed_at":"2025-06-17T03:23:25.000Z","size":7643,"stargazers_count":43,"open_issues_count":11,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-17T04:26:00.513Z","etag":null,"topics":["antd","react","typescript"],"latest_commit_sha":null,"homepage":"http://rta.thomas-void0.tech/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thomas-void0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-10-10T07:41:18.000Z","updated_at":"2025-05-29T16:25:26.000Z","dependencies_parsed_at":"2024-03-23T00:34:34.059Z","dependency_job_id":"25dda5c7-8d01-42d7-9adc-71bb19c730f3","html_url":"https://github.com/thomas-void0/cta-template-admin","commit_stats":{"total_commits":89,"total_committers":3,"mean_commits":"29.666666666666668","dds":0.1123595505617978,"last_synced_commit":"41904e8c9b24e541f9b51a07b21321c2a5133715"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/thomas-void0/cta-template-admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-void0%2Fcta-template-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-void0%2Fcta-template-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-void0%2Fcta-template-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-void0%2Fcta-template-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomas-void0","download_url":"https://codeload.github.com/thomas-void0/cta-template-admin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-void0%2Fcta-template-admin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260292815,"owners_count":22987504,"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":["antd","react","typescript"],"created_at":"2025-07-06T06:04:05.256Z","updated_at":"2025-07-06T06:04:05.908Z","avatar_url":"https://github.com/thomas-void0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react + vite 模板项目\n\n\u003cimg src=\"https://img.shields.io/npm/v/cta-template-admin.svg\" alt=\"npm package\"\u003e \u003cimg src=\"https://img.shields.io/badge/Vercel-black?style=flat\u0026logo=Vercel\u0026logoColor=white\" alt=\"Vercel\" /\u003e [![Publish](https://github.com/thomas-void0/cta-template-admin/actions/workflows/publish.yml/badge.svg)](https://github.com/thomas-void0/cta-template-admin/actions/workflows/publish.yml) [![Docker Image CI](https://github.com/thomas-void0/cta-template-admin/actions/workflows/docker.yml/badge.svg)](https://github.com/thomas-void0/cta-template-admin/actions/workflows/docker.yml)\n\n\u003c!-- [在线预览](https://th-template.vercel.app/) --\u003e\n\n一个可以实现路由 keepAlive，具有类似浏览器访问页签功能的模板项目。\n\u003c!--  http://47.108.203.65 --\u003e\n\n[在线预览](http://124.223.185.160/) | [vercel online](https://th-template.vercel.app/)\n\n\u003c!-- ![image](https://user-images.githubusercontent.com/48620706/209778605-428a6444-55b2-457a-aa0d-42b2cb908b4c.png) --\u003e\n\n![example](./template/public/example.gif)\n\n# 模板下载使用\n\n可以通过 npx 命令安装此项目\n\n```shell\nnpx create-template-app my-app --template admin\n```\n\n# 一、权限管理\n\n## 路由权限\n\n1. 在`src/config/access.ts`中,同 umi 使用方式一致，配置对应权限对象。\n\n```ts\nimport { InitialStateType } from \"@/core/context/global\";\n\nexport default function accessFactory(\n  initialState: InitialStateType\n): Record\u003cstring, boolean\u003e {\n  // const { accessInfo } = initialState\n\n  return {\n    canNav1: false,\n  };\n}\n```\n\n2. 在`src/routes/index.tsx`中,配置对应的 access key。\n\n```ts\n...\n\npath: 'brandManage',\nname: '品牌管理',\naccess: 'canNav1', // 对应的key\nicon: \u003cBoldOutlined /\u003e,\nlayout: {\n\ttopItemRender: false\n},\n\n...\n```\n\n## 组件权限\n\n在`src/core/Access`中：\n\n1. `Access`组件：用于判断返回的 key，是否包含在后端的权限列表中，进而是否渲染传入的`children`\n\n```tsx\n\u003cAccess access=\"enterprisePrivate-label-batchImport\"\u003e\n  \u003cButton onClick={handleBatchImport}\u003e批量导入\u003c/Button\u003e\n\u003c/Access\u003e\n```\n\n2. `useAccess`hook：返回对应的 access key 是否包含在后端返回的权限列表中。\n\n```ts\nconst noticeUpdateAuth = useAccess(\"notice-update\");\n```\n\n# 二、keepAlive\n\n**注意：**\n\n1. **为了稳定起见 keepAlive 仅仅针对路由级别生效。**\n2. **默认不会开启 keepAlive**\n3. **keepAlive 最多缓存的组件数，默认为 10 个，超过最大数量后会直接删除第一个缓存的组件。**（可以在 core.ts 中配置 maxLength 来扩大缓存容积）\n\n开启方法：\n\n在路由配置中增加`keepAlive：true`选项。\n\n```ts\n{\n\tpath: 'brandRule',\n\tname: '品牌规则',\n\tkeepAlive: true, // 开启\n\telement: lazyLoad(lazy(() =\u003e import('@/pages/BrandManage/BrandRule')))\n},\n```\n\n# 三、页签功能\n\n默认开启页签功能，如果需要关闭此功能。在`core.ts`中配置`isTab: false`。\n\n页签支持拖拽，刷新，关闭等操作。\n\n# 四、环境变量使用\n\n访问: `getEnv()`\n\n在项目根目录下，配置了三种环境文件`.env.development`,`.env.test`,`.env.production`。分别对应本地、测试、生产三个环境。里面已经配置了相应的环境变量和`gateway地址`。\n\n如需更多配置，直接增加对应的字段即可。为了更加友好的提示，增加对应字段后，在`src/typings/vite-env.d.ts`中加入新增字段的类型。\n\n```ts\ninterface ImportMetaEnv {\n  readonly VITE_NODE_ENV: \"development\" | \"test\" | \"production\";\n  readonly VITE_PREFIX_URL: string;\n}\n```\n\n# 五、接口请求\n\n在`src/core/service`中封装了`request`和`requestLegacy`两个请求实例。分别针对`gateway`接口和之前走`nginx`代理的接口。\n\n# 六、开发代理\n\n在`vite.config.ts`中增加自定义代理即可。\n\n```js\n...\n\nserver: {\n\thost: '127.0.0.1',\n\tport: 3000,\n\topen: true,\n\tproxy: {\n\t\t'/api': {\n\t\t\ttarget: proxyTarget.api,\n\t\t\tchangeOrigin: true\n\t\t},\n\t\t'/user': {\n\t\t\ttarget: proxyTarget.nr,\n\t\t\tchangeOrigin: true\n\t\t}\n\t}\n}\n...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-void0%2Fcta-template-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomas-void0%2Fcta-template-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-void0%2Fcta-template-admin/lists"}