├── typings.d.ts
├── .npmrc
├── tsconfig.json
├── .idea
    ├── .gitignore
    ├── vcs.xml
    ├── modules.xml
    └── produce-readme.iml
├── .gitignore
├── src
    ├── layouts
    │   └── index.tsx
    ├── constants
    │   └── default.ts
    ├── locales
    │   ├── zh-CN.ts
    │   └── en-US.ts
    └── pages
    │   └── index.tsx
├── .umirc.ts
├── tailwind.config.js
├── .versionrc.js
├── tailwind.css
├── package.json
├── CHANGELOG.md
└── README.md


/typings.d.ts:
--------------------------------------------------------------------------------
1 | import 'umi/typings';
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org/
2 | 
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./src/.umi/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /node_modules
 2 | /.env.local
 3 | /.umirc.local.ts
 4 | /config/config.local.ts
 5 | /src/.umi
 6 | /src/.umi-production
 7 | /src/.umi-test
 8 | /dist
 9 | 
10 | /.idea


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/src/layouts/index.tsx:
--------------------------------------------------------------------------------
 1 | import {Outlet} from 'umi';
 2 | import {StyleProvider} from '@ant-design/cssinjs';
 3 | 
 4 | export default function App() {
 5 |     return (
 6 |         <StyleProvider hashPriority="high">
 7 |             <Outlet/>
 8 |         </StyleProvider>
 9 |     );
10 | }
11 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/produce-readme.iml" filepath="$PROJECT_DIR$/.idea/produce-readme.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.umirc.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   npmClient: "npm",
 3 |   tailwindcss: {},
 4 |   plugins: ["@umijs/plugins/dist/tailwindcss","@umijs/plugins/dist/locale"],
 5 |   locale: {
 6 |     enable: true,
 7 |     default: 'en-US',
 8 |     baseSeparator: '-',
 9 |     baseNavigator: false,
10 |     title: false,
11 |     useLocalStorage: true,
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     './src/layouts/*.tsx',
 4 |     './src/pages/*.tsx',
 5 |     './src/components/*.tsx',
 6 |     './src/components/**/*.tsx',
 7 |   ],
 8 |   theme:{
 9 |     extend:{
10 |       width: {
11 |         '5/11': '47.7%',
12 |       }
13 |     }
14 |   },
15 |   corePlugins: {
16 |     preflight: false
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.idea/produce-readme.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.versionrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "types": [
 3 |     { "type": "feat", "section": "✨ Features | 新功能" },
 4 |     { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
 5 |     { "type": "init", "section": "🎉 Init | 初始化" },
 6 |     { "type": "docs", "section": "✏️ Documentation | 文档" },
 7 |     { "type": "style", "section": "💄 Styles | 风格" },
 8 |     { "type": "refactor", "section": "♻️ Code Refactoring | 代码重构" },
 9 |     { "type": "perf", "section": "⚡ Performance Improvements | 性能优化" },
10 |     { "type": "test", "section": "✅ Tests | 测试" },
11 |     { "type": "revert", "section": "⏪ Revert | 回退", "hidden": true },
12 |     { "type": "build", "section": "📦‍ Build System | 打包构建" },
13 |     { "type": "chore", "section": "🚀 Chore | 构建/工程依赖/工具" },
14 |     { "type": "ci", "section": "👷 Continuous Integration | CI 配置" }
15 |   ]
16 | }


--------------------------------------------------------------------------------
/src/constants/default.ts:
--------------------------------------------------------------------------------
 1 | export const DEFAULT_TEMPLATE_ID = [
 2 |     'title-and-description',
 3 |     'installation',
 4 |     'logo',
 5 |     'run-locally',
 6 |     'screenshots',
 7 |     'env-variables',
 8 |     'features',
 9 |     'usage-examples',
10 |     'api',
11 |     'contributing',
12 |     'tests',
13 |     'license',
14 |     'badges',
15 |     'roadmap',
16 |     'authors',
17 |     'acknowledgement',
18 |     'support',
19 |     'feedback',
20 |     'related',
21 |     'demo',
22 |     'tech',
23 |     'optimizations',
24 |     'lessons',
25 |     'faq',
26 |     'used-by',
27 |     'documentation',
28 |     'deployment',
29 |     'appendix',
30 |     'github-intro',
31 |     'github-about-me',
32 |     'github-skills',
33 |     'github-links',
34 |     'github-other',
35 |     'github-stats',
36 |     'github-pins',
37 |     'github-languages',
38 |     'github-streak',
39 |     'github-visitors',
40 |     'github-trophy'
41 | ]


--------------------------------------------------------------------------------
/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body{
 6 |     margin: 0;
 7 |     padding: 0;
 8 | }
 9 | .flex-center{
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 | }
14 | 
15 | .full-screen{
16 |     height: calc(100vh - 80px);
17 | }
18 | 
19 | ::-webkit-scrollbar {
20 |     width: 6px;
21 |     height: 6px;
22 | }
23 | 
24 | ::-webkit-scrollbar-thumb {
25 |     background-color:#0000004d;
26 |     border-radius:2px
27 | }
28 | ::-webkit-scrollbar-thumb:hover{
29 |     background-color:#00000059;
30 | }
31 | 
32 |  ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
33 |     background-color: #e2e2e2;
34 | }
35 | 
36 | .is-select .ant-btn{
37 |     width: 100%;
38 | }
39 | 
40 | .md-editor-toolbar-wrapper{
41 |     height: 56px !important;
42 | }
43 | 
44 | .md-editor-toolbar{
45 |     overflow-x: auto;
46 | }
47 | .md-editor{
48 |     border: none!important;
49 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "author": "yuanli <2865437316@qq.com>",
 4 |   "homepage": "https://imyuanli.github.io/",
 5 |   "version": "2.1.0",
 6 |   "scripts": {
 7 |     "dev": "umi dev",
 8 |     "build": "umi build",
 9 |     "postinstall": "umi setup",
10 |     "setup": "umi setup",
11 |     "start": "npm run dev",
12 |     "release": "standard-version"
13 |   },
14 |   "dependencies": {
15 |     "@ant-design/icons": "^5.0.1",
16 |     "@types/lodash": "^4.14.192",
17 |     "@types/react-beautiful-dnd": "^13.1.4",
18 |     "@vavt/md-editor-extension": "^2.0.0",
19 |     "ahooks": "^3.7.6",
20 |     "antd": "^5.3.2",
21 |     "copy-to-clipboard": "^3.3.3",
22 |     "md-editor-rt": "^2.11.0",
23 |     "nanoid": "^4.0.2",
24 |     "react-beautiful-dnd": "^13.1.1",
25 |     "standard-version": "^9.5.0",
26 |     "umi": "^4.0.63",
27 |     "umi-plugin-react": "^1.15.9"
28 |   },
29 |   "devDependencies": {
30 |     "@types/marked": "^4.0.8",
31 |     "@types/react": "^18.0.0",
32 |     "@types/react-dom": "^18.0.0",
33 |     "@umijs/plugins": "^4.0.63",
34 |     "tailwindcss": "^3",
35 |     "typescript": "^4.1.2"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | ## [2.1.0](https://gitee.com/imyuanli/readme/compare/v2.0.4...v2.1.0) (2023-04-11)
 6 | 
 7 | 
 8 | ### ✨ Features | 新功能
 9 | 
10 | * 新增模板 ([9da1934](https://gitee.com/imyuanli/readme/commit/9da1934165252eceab6e8c08499ddfb9ab8f847b))
11 | 
12 | 
13 | ### 📦‍ Build System | 打包构建
14 | 
15 | * 包版本锁定 ([57d662f](https://gitee.com/imyuanli/readme/commit/57d662fdbd7039e7e628235a30a670f88708ab53))
16 | 
17 | ### [2.0.4](https://gitee.com/imyuanli/readme/compare/v2.0.3...v2.0.4) (2023-04-06)
18 | 
19 | 
20 | ### 📦‍ Build System | 打包构建
21 | 
22 | * 自动化配置更新日志 ([0297a9c](https://gitee.com/imyuanli/readme/commit/0297a9cd1a0a2d7dc60880d6a28bb0f2e213a2a1))
23 | 
24 | 
25 | ### 🐛 Bug Fixes | Bug 修复
26 | 
27 | * 修复重置编辑内容不变的bug ([241e118](https://gitee.com/imyuanli/readme/commit/241e1186ee5cd752bc2472ad986d99edcc5f9a48))
28 | 
29 | ### [2.0.3](https://gitee.com/imyuanli/readme/compare/v2.0.2...v2.0.3) (2023-04-06)
30 | 
31 | 
32 | ### 🚀 Chore | 构建/工程依赖/工具
33 | 
34 | * 更换打版本及自动更新日志工具 ([16cf65a](https://gitee.com/imyuanli/readme/commit/16cf65ab70ce9005895363f3fbf64c5941d8f971))
35 | 
36 | # 2.0.0 (2023-04-06)
37 | 
38 | 
39 | ### Bug Fixes
40 | 
41 | * 修复选中模板无法持久化存储 ([33d5bcb](https://gitee.com/imyuanli/readme/commits/33d5bcbcec94c812905c4604fb45e4fd51546475))
42 | 
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Readme
 3 | 
 4 | Readme 是一个在线编辑器，可以帮助开发人员为他们快速的制作项目的README.md，同时也满足Github个人主页的一些模板
 5 | **[点击这里体验](https://readme.imyuanli.cn)**
 6 | 
 7 | 下面是一些例子
 8 | 
 9 | # 你好, 我是鸢离! 👋
10 | 
11 | <p><img align="left" src="https://github-readme-stats.vercel.app/api/top-langs?username=imyuanli&show_icons=true&locale=en&layout=compact" alt="imyuanli" /></p>
12 | 
13 | <p><img align="center" src="https://github-readme-stats.vercel.app/api?username=imyuanli&show_icons=true&locale=en" alt="imyuanli" /></p>
14 | 
15 | <p><img align="center" src="https://github-readme-streak-stats.herokuapp.com/?user=imyuanli&" alt="imyuanli" /></p>
16 | 
17 | ## 🚀 关于
18 | 我是一个前端开发工程师...
19 | 
20 | 
21 | ## 🛠 技能
22 | Javascript, HTML, CSS...
23 | 
24 | 
25 | ## 🔗 链接
26 | [![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://katherineoelsner.com/)
27 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/)
28 | [![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/)
29 | **[查看更多](https://shields.io/)**
30 | 
31 | ## 其他常见的 Github 简介部分
32 | 
33 | 👩‍💻 我当前就职于 **[名称](https://example.com)**
34 | 
35 | 🧠 我目前在学习 **[名称](https://example.com)**
36 | 
37 | 📄 了解我的经历 **[名称](https://example.com)**
38 | 
39 | 👨‍💻 我所有项目都在 **[名称](https://example.com)**
40 | 
41 | 📝 我定期写的文章在 **[名称](https://example.com)**
42 | 
43 | 👯‍ 我希望能在以下方面进行合作 **[名称](https://example.com)**
44 | 
45 | 🤔 我想寻求帮助的是 **[名称](https://example.com)**
46 | 
47 | 💬 向我咨询 **[名称](https://example.com)**
48 | 
49 | 📫 如何联系我 **[名称](https://example.com)**
50 | 
51 | 😄 代名词 **[名称](https://example.com)**
52 | 
53 | ⚡ 性格方面 **[名称](https://example.com)**
54 | 
55 | 
56 | ## 将imyuanli替换为自己的github名称,readme替换为自己的仓库
57 | 
58 | [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=imyuanli&repo=readme)](https://github.com/anuraghazra/github-readme-stats)
59 | 
60 | **[更多参数](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#github-更多置顶)**
61 | 
62 | ## 将imyuanli替换为自己的github名称
63 | 
64 | [![imyuanli's GitHub stats](https://github-readme-stats.vercel.app/api?username=imyuanli)](https://github.com/anuraghazra/github-readme-stats)
65 | 
66 | **[更多参数](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#github-统计卡片)**
67 | 
68 | ## 将imyuanli替换为自己的github名称
69 | 
70 | [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=imyuanli)](https://github.com/anuraghazra/github-readme-stats)
71 | 
72 | **[更多参数](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#github-热门语言卡片)**
73 | 
74 | ## 将imyuanli替换为自己的github名称
75 | 
76 | [![GitHub Streak](https://github-readme-streak-stats.herokuapp.com?user=imyuanli)](https://git.io/streak-stats)
77 | 
78 | **[更多参数](https://github-readme-streak-stats.herokuapp.com/demo)**
79 | 
80 | ## 将imyuanli替换为自己的github名称
81 | 
82 | ![GitHub Profile Views Counter](https://komarev.com/ghpvc/?username=imyuanli)
83 | 
84 | **[更多参数](https://github.com/antonkomarev/github-profile-views-counter)**
85 | 
86 | ## 将imyuanli替换为自己的github名称
87 | 
88 | [![trophy](https://github-profile-trophy.vercel.app/?username=imyuanli&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)
89 | 
90 | **[更多参数](https://github.com/ryo-ma/github-profile-trophy)**


--------------------------------------------------------------------------------
/src/locales/zh-CN.ts:
--------------------------------------------------------------------------------
  1 | export default {
  2 |     'template': '模板',
  3 |     'edit': '编辑',
  4 |     'preview': '预览',
  5 |     'use': '已使用模板',
  6 |     'no-use': '未使用模板',
  7 |     'btn-text': '自定义模板',
  8 |     'modal-title': '添加自定义模板',
  9 |     'modal-placeholder': '模板名称',
 10 |     'copy-success': '复制成功',
 11 |     'download-success': '下载成功',
 12 |     'reset-title': '恢复初始状态',
 13 |     'reset-text': '是否重置您所有自述文件的模板？',
 14 |     'lang-change-title': '语言切换',
 15 |     'lang-change-text': '切换语言会重置您所有自述文件的模板',
 16 |     'title-and-description.name': '标题和描述',
 17 |     'title-and-description.markdown': `
 18 | # 项目标题
 19 | 
 20 | 简要说明这个项目是做什么的，是为谁做的
 21 | 
 22 | `,
 23 |     'installation.name': '安装',
 24 |     'installation.markdown': `
 25 | ## 安装
 26 | 
 27 | 使用 npm 安装 my-project
 28 | 
 29 | \`\`\`bash
 30 |   npm install my-project
 31 |   cd my-project
 32 | \`\`\`
 33 |     `,
 34 |     'logo.name': 'Logo',
 35 |     'logo.markdown': `
 36 | ![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th5xamgrr6se0x5ro4g6.png)
 37 | 
 38 | `,
 39 |     'run-locally.name': '在本地运行',
 40 |     'run-locally.markdown': `
 41 | ## 在本地运行
 42 | 
 43 | Clone 这个 project
 44 | 
 45 | \`\`\`bash
 46 |   git clone https://link-to-project
 47 | \`\`\`
 48 | 
 49 | 前往项目目录
 50 | 
 51 | \`\`\`bash
 52 |   cd my-project
 53 | \`\`\`
 54 | 
 55 | 安装依赖
 56 | 
 57 | \`\`\`bash
 58 |   npm install
 59 | \`\`\`
 60 | 
 61 | 启动服务器
 62 | 
 63 | \`\`\`bash
 64 |   npm run start
 65 | \`\`\`
 66 | 
 67 | `,
 68 |     'screenshots.name': '截图',
 69 |     'screenshots.markdown': `
 70 | ## 截图
 71 | 
 72 | ![App Screenshot](https://via.placeholder.com/468x300?text=App+Screenshot+Here)
 73 | 
 74 | `,
 75 |     'env-variables.name': '环境变量',
 76 |     'env-variables.markdown': `
 77 | ## 环境变量
 78 | 
 79 | 要运行这个项目，你将需要在你的 .env 文件中添加以下环境变量
 80 | 
 81 | \`API_KEY\`
 82 | 
 83 | \`ANOTHER_API_KEY\`
 84 | 
 85 | `,
 86 |     'features.name': '特性',
 87 |     'features.markdown': `
 88 | ## 特性
 89 | 
 90 | - 光明/黑暗模式切换
 91 | - 在线预览
 92 | - 全屏模式
 93 | - 跨平台
 94 | 
 95 | `,
 96 |     'usage-examples.name': '使用方法/示例',
 97 |     'usage-examples.markdown': `
 98 | ## 使用方法/示例
 99 | 
100 | \`\`\`javascript
101 | import Component from 'my-project'
102 | 
103 | function App() {
104 |   return <Component />
105 | }
106 | \`\`\`
107 | 
108 | `,
109 |     'api.name': 'API 参考',
110 |     'api.markdown': `
111 | ## API 参考
112 | 
113 | #### 获取所有项目
114 | 
115 | \`\`\`http
116 |   GET /api/items
117 | \`\`\`
118 | 
119 | | 参数 | 类型     | 描述                |
120 | | :-------- | :------- | :------------------------- |
121 | | \`api_key\` | \`string\` | **必选**. 你的 API key |
122 | 
123 | #### 获取一个项目
124 | 
125 | \`\`\`http
126 |   GET /api/items/$\{id}
127 | \`\`\`
128 | 
129 | | 参数 | 类型     | 描述                       |
130 | | :-------- | :------- | :-------------------------------- |
131 | | \`id\`      | \`string\` | **必选**. 要获取的项目的 id |
132 | 
133 | #### add(num1, num2)
134 | 
135 | 接受两个数字并返回其总和。
136 | 
137 | `,
138 |     'contributing.name': '贡献',
139 |     'contributing.markdown': `
140 | ## 贡献
141 | 
142 | 我们随时欢迎大家的贡献!
143 | 
144 | 请参阅 \`contributing.md\` 了解如何开始贡献。
145 | 
146 | 请遵守本项目的 \`行为准则\`。
147 | 
148 | `,
149 |     'tests.name': '运行测试',
150 |     'tests.markdown': `
151 | ## 运行测试
152 | 
153 | 要运行测试，运行以下命令
154 | 
155 | \`\`\`bash
156 |   npm run test
157 | \`\`\`
158 | 
159 | `,
160 |     'license.name': '证书',
161 |     'license.markdown': `
162 | ## 证书
163 | 
164 | [MIT](https://choosealicense.com/licenses/mit/)
165 | 
166 | `,
167 |     'badges.name': '徽标',
168 |     'badges.markdown': `
169 | ## 徽标
170 | 
171 | 从以下位置添加徽章：[shields.io](https://shields.io/)
172 | 
173 | [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
174 | [![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
175 | [![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)
176 | 
177 | `,
178 |     'roadmap.name': '路线图',
179 |     'roadmap.markdown': `
180 | ## 路线图
181 | 
182 | - 其他浏览器支持
183 | 
184 | - 增加更多的集成
185 | 
186 | `,
187 |     'authors.name': '作者',
188 |     'authors.markdown': `
189 | ## 作者
190 | 
191 | - [@octokatherine](https://www.github.com/octokatherine)
192 | 
193 | `,
194 |     'acknowledgement.name': '致谢',
195 |     'acknowledgement.markdown': `
196 | ## 致谢
197 | 
198 |  - [非常棒的 Readme 模板](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
199 |  - [非常棒的 README](https://github.com/matiassingers/awesome-readme)
200 |  - [如何写好 readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)
201 | 
202 | `,
203 |     'support.name': '支持',
204 |     'support.markdown': `
205 | ## 支持
206 | 
207 | 如需支持，请发送电子邮件至 fake@fake.com 或加入我们的 Slack 频道。
208 | 
209 | `,
210 |     'feedback.name': '反馈',
211 |     'feedback.markdown': `
212 | ## 反馈
213 | 
214 | 如果你有任何反馈，请联系我们：fake@fake.com
215 | 
216 | `,
217 |     'related.name': '相关',
218 |     'related.markdown': `
219 | ## 相关
220 | 
221 | 以下是一些相关项目
222 | 
223 | [非常棒的 README](https://github.com/matiassingers/awesome-readme)
224 | 
225 | `,
226 |     'demo.name': 'Demo',
227 |     'demo.markdown': `
228 | ## Demo
229 | 
230 | 插入 gif 图片或演示链接
231 | 
232 | `,
233 |     'tech.name': '技术',
234 |     'tech.markdown': `
235 | ## 技术栈
236 | 
237 | **客户端:** React, Redux, TailwindCSS
238 | 
239 | **服务端:** Node, Express
240 | 
241 | `,
242 |     'optimizations.name': '优化',
243 |     'optimizations.markdown': `
244 | ## 优化
245 | 
246 | 你在你的代码中做了哪些优化？如：重构、性能改进、可访问性
247 | 
248 | `,
249 |     'lessons.name': '教训',
250 |     'lessons.markdown': `
251 | ## 经验和教育
252 | 
253 | 你在建设这个项目时学到了什么？你遇到了什么挑战，你是如何克服的？
254 | 
255 | `,
256 |     'faq.name': 'FAQ',
257 |     'faq.markdown': `
258 | ## FAQ
259 | 
260 | #### 问题 1
261 | 
262 | 回答 1
263 | 
264 | #### 问题 2
265 | 
266 | 回答 2
267 | 
268 | `,
269 |     'used-by.name': '谁在使用',
270 |     'used-by.markdown': `
271 | ## 谁在使用
272 | 
273 | 该项目被以下公司使用:
274 | 
275 | - 公司 1
276 | - 公司 2
277 | 
278 | `,
279 |     'documentation.name': '文档',
280 |     'documentation.markdown': `
281 | ## 文档
282 | 
283 | [文档](https://linktodocumentation)
284 | 
285 | `,
286 |     'deployment.name': '开发',
287 |     'deployment.markdown': `
288 | ## 开发
289 | 
290 | 要部署这个项目，请运行
291 | 
292 | \`\`\`bash
293 |   npm run deploy
294 | \`\`\`
295 | 
296 | `,
297 |     'appendix.name': '附录',
298 |     'appendix.markdown': `
299 | ## 附录
300 | 
301 | 任何额外的信息都在这里
302 | 
303 | `,
304 |     'github-intro.name': 'Github - 介绍',
305 |     'github-intro.markdown': `
306 | # 你好, 我是鸢离! 👋
307 | 
308 | `,
309 |     'github-about-me.name': 'Github - 关于我',
310 |     'github-about-me.markdown': `
311 | ## 🚀 关于
312 | 我是一个前端开发工程师...
313 | 
314 | `,
315 |     'github-skills.name': 'Github - 技能',
316 |     'github-skills.markdown': `
317 | ## 🛠 技能
318 | Javascript, HTML, CSS...
319 | 
320 | `,
321 |     'github-links.name': 'Github - 链接',
322 |     'github-links.markdown': `
323 | ## 🔗 链接
324 | [![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://katherineoelsner.com/)
325 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/)
326 | [![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/)
327 |  **[查看更多](https://shields.io/)**
328 | `,
329 |     'github-other.name': 'Github - 其他',
330 |     'github-other.markdown': `
331 | ## 其他常见的 Github 简介部分
332 | 
333 | 👩‍💻 我当前就职于 **[名称](https://example.com)**
334 |         
335 | 🧠 我目前在学习 **[名称](https://example.com)**
336 |             
337 | 📄 了解我的经历 **[名称](https://example.com)**
338 |     
339 | 👨‍💻 我所有项目都在 **[名称](https://example.com)**
340 |     
341 | 📝 我定期写的文章在 **[名称](https://example.com)**
342 | 
343 | 👯‍ 我希望能在以下方面进行合作 **[名称](https://example.com)**
344 | 
345 | 🤔 我想寻求帮助的是 **[名称](https://example.com)**
346 | 
347 | 💬 向我咨询 **[名称](https://example.com)**
348 | 
349 | 📫 如何联系我 **[名称](https://example.com)**
350 | 
351 | 😄 代名词 **[名称](https://example.com)**
352 | 
353 | ⚡ 性格方面 **[名称](https://example.com)**
354 | 
355 | `,
356 |     'github-stats.name': 'Github - 统计卡片',
357 |     'github-stats.markdown': `
358 | ## 将imyuanli替换为自己的github名称 
359 |     
360 | [![imyuanli's GitHub stats](https://github-readme-stats.vercel.app/api?username=imyuanli)](https://github.com/anuraghazra/github-readme-stats)
361 | 
362 |  **[更多参数](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#github-统计卡片)**
363 | `,
364 |     'github-pins.name': 'Github - 更多置顶',
365 |     'github-pins.markdown': `
366 | ## 将imyuanli替换为自己的github名称,readme替换为自己的仓库
367 |     
368 | [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=imyuanli&repo=readme)](https://github.com/anuraghazra/github-readme-stats)
369 | 
370 |  **[更多参数](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#github-更多置顶)**
371 | `,
372 |     'github-languages.name': 'Github - 热门语言卡片',
373 |     'github-languages.markdown': `
374 | ## 将imyuanli替换为自己的github名称
375 | 
376 | [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=imyuanli)](https://github.com/anuraghazra/github-readme-stats)
377 | 
378 |  **[更多参数](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#github-热门语言卡片)**
379 | `,
380 |     'github-streak.name': 'Github - 条纹状数据统计',
381 |     'github-streak.markdown': `
382 | ## 将imyuanli替换为自己的github名称
383 | 
384 | [![GitHub Streak](https://github-readme-streak-stats.herokuapp.com?user=imyuanli)](https://git.io/streak-stats)
385 | 
386 |  **[更多参数](https://github-readme-streak-stats.herokuapp.com/demo)**
387 | `,
388 |     'github-visitors.name': 'Github - 统计观看次数',
389 |     'github-visitors.markdown': `
390 | ## 将imyuanli替换为自己的github名称
391 | 
392 | ![GitHub Profile Views Counter](https://komarev.com/ghpvc/?username=imyuanli)
393 | 
394 |  **[更多参数](https://github.com/antonkomarev/github-profile-views-counter)**
395 | `,
396 |     'github-trophy.name': 'Github - 奖杯统计',
397 |     'github-trophy.markdown': `
398 | ## 将imyuanli替换为自己的github名称
399 | 
400 | [![trophy](https://github-profile-trophy.vercel.app/?username=imyuanli&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)
401 | 
402 |  **[更多参数](https://github.com/ryo-ma/github-profile-trophy)**
403 | `,
404 | };


--------------------------------------------------------------------------------
/src/locales/en-US.ts:
--------------------------------------------------------------------------------
  1 | export default {
  2 |     'template': 'Template',
  3 |     'edit': 'Edit',
  4 |     'preview': 'Preview',
  5 |     'use': 'Template used',
  6 |     'no-use': 'Template not used',
  7 |     'btn-text': 'Custom Template',
  8 |     'modal-title': 'Add Custom Template',
  9 |     'modal-placeholder': 'Template Name',
 10 |     'copy-success': 'copy success',
 11 |     'download-success': 'download success',
 12 |     'reset-title': 'Restore initial state',
 13 |     'reset-text': 'Do you want to reset the templates for all your readme files？',
 14 |     'lang-change-title': 'Language switching',
 15 |     'lang-change-text': 'Switching languages will reset the templates for all your readme files',
 16 |     'title-and-description.name': 'Title and Description',
 17 |     'title-and-description.markdown': `
 18 | # Project Title
 19 | 
 20 | A brief description of what this project does and who it's for
 21 | 
 22 | `,
 23 |     'installation.name': 'Installation',
 24 |     'installation.markdown': `
 25 | ## Installation
 26 | 
 27 | Install my-project with npm
 28 | 
 29 | \`\`\`bash
 30 |   npm install my-project
 31 |   cd my-project
 32 | \`\`\`
 33 |     `,
 34 |     'logo.name': 'Logo',
 35 |     'logo.markdown': `
 36 | ![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th5xamgrr6se0x5ro4g6.png)
 37 | 
 38 | `,
 39 |     'run-locally.name': 'Run Locally',
 40 |     'run-locally.markdown': `
 41 | ## Run Locally
 42 | 
 43 | Clone the project
 44 | 
 45 | \`\`\`bash
 46 |   git clone https://link-to-project
 47 | \`\`\`
 48 | 
 49 | Go to the project directory
 50 | 
 51 | \`\`\`bash
 52 |   cd my-project
 53 | \`\`\`
 54 | 
 55 | Install dependencies
 56 | 
 57 | \`\`\`bash
 58 |   npm install
 59 | \`\`\`
 60 | 
 61 | Start the server
 62 | 
 63 | \`\`\`bash
 64 |   npm run start
 65 | \`\`\`
 66 | 
 67 | `,
 68 |     'screenshots.name': 'Screenshots',
 69 |     'screenshots.markdown': `
 70 | ## Screenshots
 71 | 
 72 | ![App Screenshot](https://via.placeholder.com/468x300?text=App+Screenshot+Here)
 73 | 
 74 | `,
 75 |     'env-variables.name': 'Environment Variables',
 76 |     'env-variables.markdown': `
 77 | ## Environment Variables
 78 | 
 79 | To run this project, you will need to add the following environment variables to your .env file
 80 | 
 81 | \`API_KEY\`
 82 | 
 83 | \`ANOTHER_API_KEY\`
 84 | 
 85 | `,
 86 |     'features.name': 'Features',
 87 |     'features.markdown': `
 88 | ## Features
 89 | 
 90 | - Light/dark mode toggle
 91 | - Live previews
 92 | - Fullscreen mode
 93 | - Cross platform
 94 | 
 95 | `,
 96 |     'usage-examples.name': 'Usage/Examples',
 97 |     'usage-examples.markdown': `
 98 | ## Usage/Examples
 99 | 
100 | \`\`\`javascript
101 | import Component from 'my-project'
102 | 
103 | function App() {
104 |   return <Component />
105 | }
106 | \`\`\`
107 | 
108 | `,
109 |     'api.name': 'API Reference',
110 |     'api.markdown': `
111 | ## API Reference
112 | 
113 | #### Get all items
114 | 
115 | \`\`\`http
116 |   GET /api/items
117 | \`\`\`
118 | 
119 | | Parameter | Type     | Description                |
120 | | :-------- | :------- | :------------------------- |
121 | | \`api_key\` | \`string\` | **Required**. Your API key |
122 | 
123 | #### Get item
124 | 
125 | \`\`\`http
126 |   GET /api/items/$\{id}
127 | \`\`\`
128 | 
129 | | Parameter | Type     | Description                       |
130 | | :-------- | :------- | :-------------------------------- |
131 | | \`id\`      | \`string\` | **Required**. Id of item to fetch |
132 | 
133 | #### add(num1, num2)
134 | 
135 | Takes two numbers and returns the sum.
136 | 
137 | `,
138 |     'contributing.name': 'Contributing',
139 |     'contributing.markdown': `
140 | ## Contributing
141 | 
142 | Contributions are always welcome!
143 | 
144 | See \`contributing.md\` for ways to get started.
145 | 
146 | Please adhere to this project's \`code of conduct\`.
147 | 
148 | `,
149 |     'tests.name': 'Running Tests',
150 |     'tests.markdown': `
151 | ## Running Tests
152 | 
153 | To run tests, run the following command
154 | 
155 | \`\`\`bash
156 |   npm run test
157 | \`\`\`
158 | 
159 | `,
160 |     'license.name': 'License',
161 |     'license.markdown': `
162 | ## License
163 | 
164 | [MIT](https://choosealicense.com/licenses/mit/)
165 | 
166 | `,
167 |     'badges.name': 'Badges',
168 |     'badges.markdown': `
169 | ## Badges
170 | 
171 | Add badges from somewhere like: [shields.io](https://shields.io/)
172 | 
173 | [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
174 | [![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
175 | [![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)
176 | 
177 | `,
178 |     'roadmap.name': 'Roadmap',
179 |     'roadmap.markdown': `
180 | ## Roadmap
181 | 
182 | - Additional browser support
183 | 
184 | - Add more integrations
185 | 
186 | `,
187 |     'authors.name': 'Authors',
188 |     'authors.markdown': `
189 | ## Authors
190 | 
191 | - [@octokatherine](https://www.github.com/octokatherine)
192 | 
193 | `,
194 |     'acknowledgement.name': 'Acknowledgements',
195 |     'acknowledgement.markdown': `
196 | ## Acknowledgements
197 | 
198 |  - [Awesome Readme Templates](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
199 |  - [Awesome README](https://github.com/matiassingers/awesome-readme)
200 |  - [How to write a Good readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)
201 | 
202 | `,
203 |     'support.name': 'Support',
204 |     'support.markdown': `
205 | ## Support
206 | 
207 | For support, email fake@fake.com or join our Slack channel.
208 | 
209 | `,
210 |     'feedback.name': 'Feedback',
211 |     'feedback.markdown': `
212 | ## Feedback
213 | 
214 | If you have any feedback, please reach out to us at fake@fake.com
215 | 
216 | `,
217 |     'related.name': 'Related',
218 |     'related.markdown': `
219 | ## Related
220 | 
221 | Here are some related projects
222 | 
223 | [Awesome README](https://github.com/matiassingers/awesome-readme)
224 | 
225 | `,
226 |     'demo.name': 'Demo',
227 |     'demo.markdown': `
228 | ## Demo
229 | 
230 | Insert gif or link to demo
231 | 
232 | `,
233 |     'tech.name': 'Tech',
234 |     'tech.markdown': `
235 | ## Tech Stack
236 | 
237 | **Client:** React, Redux, TailwindCSS
238 | 
239 | **Server:** Node, Express
240 | 
241 | `,
242 |     'optimizations.name': 'Optimizations',
243 |     'optimizations.markdown': `
244 | ## Optimizations
245 | 
246 | What optimizations did you make in your code? E.g. refactors, performance improvements, accessibility
247 | 
248 | `,
249 |     'lessons.name': 'Lessons',
250 |     'lessons.markdown': `
251 | ## Lessons Learned
252 | 
253 | What did you learn while building this project? What challenges did you face and how did you overcome them?
254 | 
255 | `,
256 |     'faq.name': 'FAQ',
257 |     'faq.markdown': `
258 | ## FAQ
259 | 
260 | #### Question 1
261 | 
262 | Answer 1
263 | 
264 | #### Question 2
265 | 
266 | Answer 2
267 | 
268 | `,
269 |     'used-by.name': 'Used By',
270 |     'used-by.markdown': `
271 | ## Used By
272 | 
273 | This project is used by the following companies:
274 | 
275 | - Company 1
276 | - Company 2
277 | 
278 | `,
279 |     'documentation.name': 'Documentation',
280 |     'documentation.markdown': `
281 | ## Documentation
282 | 
283 | [Documentation](https://linktodocumentation)
284 | 
285 | `,
286 |     'deployment.name': 'Deployment',
287 |     'deployment.markdown': `
288 | ## Deployment
289 | 
290 | To deploy this project run
291 | 
292 | \`\`\`bash
293 |   npm run deploy
294 | \`\`\`
295 | 
296 | `,
297 |     'appendix.name': 'Appendix',
298 |     'appendix.markdown': `
299 | ## Appendix
300 | 
301 | Any additional information goes here
302 | 
303 | `,
304 |     'github-intro.name': 'Github - Introduction',
305 |     'github-intro.markdown': `
306 | # Hi, I'm YuanLi! 👋
307 | 
308 | `,
309 |     'github-about-me.name': 'Github - About Me',
310 |     'github-about-me.markdown': `
311 | ## 🚀 About Me
312 | I'm a front-end development engineer...
313 | 
314 | `,
315 |     'github-skills.name': 'Github - Skills',
316 |     'github-skills.markdown': `
317 | ## 🛠 Skills
318 | Javascript, HTML, CSS...
319 | 
320 | `,
321 |     'github-links.name': 'Github - Links',
322 |     'github-links.markdown': `
323 | ## 🔗 Links
324 | 
325 | [![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://katherineoelsner.com/)
326 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/)
327 | [![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/)
328 | 
329 |  **[view more parameters](https://shields.io/)**
330 | `,
331 |     'github-other.name': 'Github - Other',
332 |     'github-other.markdown': `
333 | ## Other Common Github Profile Sections
334 | 
335 | 👩‍💻 I'm currently working on **[name](https://example.com)**
336 |     
337 | 🤝 I’m looking for help with **[name](https://example.com)**
338 |     
339 | 🧠 I'm currently learning **[name](https://example.com)**
340 |             
341 | 📄 Know about my experiences **[name](https://example.com)**
342 |     
343 | 👨‍💻 All of my projects are available at **[name](https://example.com)**
344 |     
345 | 📝 I regularly write articles on **[name](https://example.com)**
346 | 
347 | 👯  I’m looking to collaborate on **[name](https://example.com)**
348 | 
349 | 🤔 I'm looking for help with **[name](https://example.com)**
350 | 
351 | 💬 Ask me about **[name](https://example.com)**
352 | 
353 | 📫 How to reach me **[name](https://example.com)**
354 | 
355 | 😄 Pronouns **[name](https://example.com)**
356 | 
357 | ⚡ Fun fact **[name](https://example.com)**
358 | 
359 | `,
360 |     'github-stats.name': 'Github - Stats Card',
361 |     'github-stats.markdown': `
362 | ## Replace imyuanli with your own github name
363 | 
364 | [![GitHub stats](https://github-readme-stats.vercel.app/api?username=imyuanli)](https://github.com/anuraghazra/github-readme-stats)
365 | 
366 |  **[view more parameters](https://github.com/anuraghazra/github-readme-stats/blob/master/readme.md#github-stats-card)**
367 | `,
368 |     'github-pins.name': 'Github - Extra Pins',
369 |     'github-pins.markdown': `
370 | ## Replace imyuanli with your own github name and readme with your own warehouse
371 | 
372 | [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=imyuanli&repo=readme)](https://github.com/anuraghazra/github-readme-stats)
373 | 
374 |  **[view more parameters](https://github.com/anuraghazra/github-readme-stats/blob/master/readme.md#github-extra-pins)**
375 | `,
376 |     'github-languages.name': 'Github - Top Languages',
377 |     'github-languages.markdown': `
378 | ## Replace imyuanli with your own github name
379 |  
380 | [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=imyuanli)](https://github.com/anuraghazra/github-readme-stats)
381 | 
382 |  **[view more parameters](https://github.com/anuraghazra/github-readme-stats/blob/master/readme.md#top-languages-card)**
383 | `,
384 |     'github-streak.name': 'Github - Streak Stats',
385 |     'github-streak.markdown': `
386 | ## Replace imyuanli with your own github name
387 | 
388 | [![GitHub Streak](https://github-readme-streak-stats.herokuapp.com?user=imyuanli)](https://git.io/streak-stats)
389 | 
390 |  **[view more parameters](https://github-readme-streak-stats.herokuapp.com/demo)**
391 | `,
392 |     'github-visitors.name': 'Github - Views Counter',
393 |     'github-visitors.markdown': `
394 | ## Replace imyuanli with your own github name
395 |     
396 | ![GitHub Profile Views Counter](https://komarev.com/ghpvc/?username=imyuanli)
397 | 
398 |  **[view more parameters](https://github.com/antonkomarev/github-profile-views-counter)**
399 | `,
400 |     'github-trophy.name': 'Github - Trophy',
401 |     'github-trophy.markdown': `
402 | ## Replace imyuanli with your own github name
403 |     
404 | [![trophy](https://github-profile-trophy.vercel.app/?username=imyuanli&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)
405 | 
406 |  **[view more parameters](https://github.com/ryo-ma/github-profile-trophy)**
407 | `,
408 | };


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, {useEffect, useState} from "react";
  2 | import {DEFAULT_TEMPLATE_ID} from "@/constants/default";
  3 | import {Button, Card, Dropdown, Input, Layout, message, Modal, Select} from "antd";
  4 | import {
  5 |     CopyOutlined,
  6 |     DownloadOutlined,
  7 |     DragOutlined,
  8 |     ExclamationCircleFilled,
  9 |     PlusOutlined,
 10 |     RedoOutlined
 11 | } from "@ant-design/icons";
 12 | import {useLocalStorageState, useSetState} from "ahooks";
 13 | import MdEditor from 'md-editor-rt';
 14 | import 'md-editor-rt/lib/style.css';
 15 | import {DragDropContext, Droppable, Draggable} from "react-beautiful-dnd";
 16 | import {nanoid} from "nanoid";
 17 | import copy from 'copy-to-clipboard'
 18 | import {useIntl, setLocale, getLocale} from "umi";
 19 | 
 20 | const {confirm} = Modal;
 21 | const {Content} = Layout;
 22 | export default function HomePage() {
 23 |     //中英文切换
 24 |     const intl = useIntl();
 25 |     const getIntlValue = (id: any) => intl.formatMessage({id})
 26 | 
 27 |     //初始化默认模板
 28 |     const initDefaultTemplate = () => {
 29 |         return DEFAULT_TEMPLATE_ID.map((id: string) => {
 30 |             return {
 31 |                 id,
 32 |                 name: getIntlValue(`${id}.name`),
 33 |                 markdown: getIntlValue(`${id}.markdown`),
 34 |             }
 35 |         })
 36 |     }
 37 | 
 38 |     //默认模板
 39 |     const [templateList, setTemplateList] = useLocalStorageState<any | undefined>(
 40 |         'templateList',
 41 |         {
 42 |             defaultValue: initDefaultTemplate(),
 43 |         },
 44 |     );
 45 | 
 46 |     //选择的模板
 47 |     const [selectIdArr, setSelectIdArr] = useLocalStorageState<any | undefined>(
 48 |         'selectIdArr',
 49 |         {
 50 |             defaultValue: ['title-and-description'],
 51 |         },
 52 |     );
 53 | 
 54 |     //当前模板
 55 |     const [currentId, setCurrentId] = useLocalStorageState<any | undefined>(
 56 |         'currentId',
 57 |         {
 58 |             defaultValue: 'title-and-description',
 59 |         },
 60 |     );
 61 | 
 62 |     //模板中是否包含已选择的
 63 |     const isHaveInTemplate = (id: string) => selectIdArr.includes(id)
 64 | 
 65 |     //获取已经选择的模板
 66 |     const getSelectTemplate: any = () => selectIdArr.map((id: any) => templateList.find((item: any) => item.id === id))
 67 | 
 68 |     //剩余的值
 69 |     const [state, setState] = useSetState<any>({
 70 |         previewData: '',
 71 |         isModalOpen: false,
 72 |         inputValue: '',
 73 |         lang: getLocale()
 74 |     })
 75 |     const {previewData, isModalOpen, inputValue, lang} = state
 76 | 
 77 |     //选择模板
 78 |     const handleSelectTemplate = (id: string) => {
 79 | 
 80 |         setSelectIdArr([...selectIdArr, id])
 81 |         setCurrentId(id)
 82 |     }
 83 | 
 84 |     //编辑器
 85 |     const [editorData, setEditorData] = useState<any>("")
 86 | 
 87 |     //获取当前md
 88 |     const getCurrentMarkdown = () => {
 89 |         let res: any = "请先选择一个模板来编辑内容"
 90 |         if (currentId) {
 91 |             res = templateList.find((item: any) => item.id == currentId).markdown
 92 |         }
 93 |         setEditorData(res)
 94 |     }
 95 |     useEffect(() => {
 96 |         getCurrentMarkdown()
 97 |     }, [currentId])
 98 | 
 99 |     //更改模板的值
100 |     useEffect(() => {
101 |         if (currentId) {
102 |             const res = [...templateList]
103 |             const filterData = res.find((item: any) => item.id == currentId)
104 |             filterData.markdown = editorData
105 |             setTemplateList([...res])
106 |         }
107 |     }, [editorData])
108 | 
109 |     //预览
110 |     useEffect(() => {
111 |         setState({
112 |             previewData: getSelectTemplate().reduce((pre: any, cur: any) => pre + cur.markdown, '')
113 |         })
114 |     }, [selectIdArr, templateList])
115 | 
116 |     //拖拽
117 |     const onDragEnd = (result: any) => {
118 |         const sourceIndex = result?.source?.index;
119 |         const destinationIndex = result?.destination?.index;
120 |         if (sourceIndex === destinationIndex) {
121 |             return;
122 |         }
123 |         const idArr = [...selectIdArr];
124 |         const [draggedItem] = idArr.splice(sourceIndex, 1);
125 |         idArr.splice(destinationIndex, 0, draggedItem);
126 |         setSelectIdArr([...idArr])
127 |     }
128 | 
129 |     //自定义模板
130 |     const addNewTemplate = () => {
131 |         const res = [...templateList]
132 |         const id = nanoid()
133 |         res.push({
134 |             id,
135 |             name: inputValue,
136 |             markdown: `## ${inputValue}`,
137 |         })
138 |         setTemplateList([...res])
139 |         setSelectIdArr([...selectIdArr, id])
140 |         setCurrentId(id)
141 |         setState({
142 |             isModalOpen: false,
143 |             inputValue: ""
144 |         })
145 |     }
146 | 
147 |     // 清除添加的数据
148 |     const items = [
149 |         {
150 |             key: '1',
151 |             label: '重置',
152 |         },
153 |         {
154 |             key: '2',
155 |             label: '删除',
156 |         },
157 |     ];
158 |     const onMenuClick = (e: any, item: any) => {
159 |         let key = e.key
160 |         if (key == 1) {
161 |             reSetSection(item.id)
162 |         } else {
163 |             deleteSection(item.id)
164 |         }
165 |     };
166 | 
167 |     //重置
168 |     const reSetSection = (id: string) => {
169 |         const defaultRes = initDefaultTemplate().find((item: any) => item.id == id)
170 |         const res = [...templateList]
171 |         const list = res.find((item: any) => item.id == id)
172 |         list.markdown = defaultRes ? defaultRes.markdown : `## ${list.name}`
173 |         setTemplateList([...res])
174 |         getCurrentMarkdown()
175 |     }
176 | 
177 |     //删除
178 |     const deleteSection = (id: string) => {
179 |         const res = selectIdArr.filter((item: any) => item !== id)
180 |         setSelectIdArr([...res])
181 |         if (currentId === id) {
182 |             setCurrentId(null)
183 |         }
184 | 
185 |     }
186 | 
187 |     //恢复默认状态
188 |     const handleRestModal = () => {
189 |         confirm({
190 |             title: getIntlValue('reset-title'),
191 |             icon: <ExclamationCircleFilled/>,
192 |             content: getIntlValue('reset-text'),
193 |             onOk() {
194 |                 restoreInitialState()
195 |             },
196 |         })
197 |     }
198 |     const restoreInitialState = () => {
199 |         const res: any = initDefaultTemplate()
200 |         setTemplateList([...res])
201 |         setSelectIdArr(['title-and-description'])
202 |         setCurrentId('title-and-description')
203 |         const currentMarkdown = () => res.find((item: any) => item.id == currentId)?.markdown
204 |         setEditorData(currentMarkdown)
205 |     }
206 | 
207 |     //复制
208 |     const copyMarkdown = () => {
209 |         copy(previewData)
210 |         message.success(getIntlValue('copy-success'))
211 |     }
212 | 
213 |     //下载
214 |     const downLoadMarkdown = () => {
215 |         const dataStr = `data:application/md;charset=utf-8,` + encodeURIComponent(previewData);
216 |         const download = document.createElement('a');
217 |         download.setAttribute('href', dataStr);
218 |         download.setAttribute('download', 'README.md');
219 |         document.body.appendChild(download);
220 |         download.click();
221 |         download.remove();
222 |         message.success(getIntlValue('download-success'))
223 |     }
224 | 
225 |     //切换语言
226 |     const handleChangeLang = (value: any) => {
227 |         setLocale(value, false)
228 |         setState({lang: getLocale()})
229 |     }
230 | 
231 |     //切换完语言更新页面的值
232 |     useEffect(() => {
233 |         const res: any = initDefaultTemplate()
234 |         setTemplateList([...res])
235 |         const currentMarkdown = () => res.find((item: any) => item.id == currentId)?.markdown
236 |         setEditorData(currentMarkdown)
237 |     }, [lang])
238 | 
239 | 
240 |     return (
241 |         <Layout className={'max-h-screen h-screen'}>
242 |             <header className={'flex justify-end items-center px-9 py-3 bg-gray-700'}>
243 |                 <Select
244 |                     defaultValue={getLocale()}
245 |                     style={{width: 120}}
246 |                     onChange={handleChangeLang}
247 |                     options={[
248 |                         {value: 'zh-CN', label: '中文'},
249 |                         {value: 'en-US', label: 'English'},
250 |                     ]}
251 |                 />
252 |             </header>
253 |             <Content className={'h-[95vh] max-[95vh] px-3'}>
254 |                 <div className={'grid grid-cols-5 gap-2 h-full'}>
255 |                     <Card
256 |                         title={getIntlValue('template')}
257 |                         className={'col-span-1 h-full overflow-hidden'}
258 |                         extra={
259 |                             <Button
260 |                                 onClick={handleRestModal}
261 |                                 type={"primary"}
262 |                                 icon={<RedoOutlined/>}
263 |                             />
264 |                         }
265 |                         bodyStyle={{
266 |                             height: '95%',
267 |                             overflow: 'auto',
268 |                         }}
269 |                     >
270 |                         <div className={'mb-1 text-base'}>{getIntlValue('use')}</div>
271 |                         <div className={'mb-3 w-full'}>
272 |                             <DragDropContext onDragEnd={onDragEnd}>
273 |                                 <Droppable droppableId={nanoid()}>
274 |                                     {(provided: any) => {
275 |                                         return (
276 |                                             <div
277 |                                                 ref={provided.innerRef}
278 |                                                 {...provided.droppableProps}
279 |                                                 className={'is-select w-full'}
280 |                                             >
281 |                                                 {getSelectTemplate().map((item: any, index: any) => {
282 |                                                     return (
283 |                                                         <Draggable
284 |                                                             key={item?.name}
285 |                                                             draggableId={item?.name}
286 |                                                             index={index}
287 |                                                         >
288 |                                                             {(provided: any) => {
289 |                                                                 return (
290 |                                                                     <div
291 |                                                                         ref={provided.innerRef}
292 |                                                                         {...provided.draggableProps}
293 |                                                                         className={'flex-center w-full'}
294 |                                                                     >
295 |                                                                         <Button
296 |                                                                             {...provided.dragHandleProps}
297 |                                                                             type={'text'}
298 |                                                                             icon={<DragOutlined/>}
299 |                                                                         />
300 |                                                                         <Dropdown.Button
301 |                                                                             className={'my-2'}
302 |                                                                             key={index}
303 |                                                                             onClick={() => {
304 |                                                                                 setCurrentId(item.id)
305 |                                                                             }}
306 |                                                                             type={item.id == currentId ? 'primary' : "default"}
307 |                                                                             menu={{
308 |                                                                                 items, onClick: (e) => {
309 |                                                                                     onMenuClick(e, item)
310 |                                                                                 }
311 |                                                                             }}
312 |                                                                         >
313 |                                                                             {item.name}
314 |                                                                         </Dropdown.Button>
315 |                                                                     </div>
316 |                                                                 )
317 |                                                             }}
318 |                                                         </Draggable>
319 |                                                     )
320 |                                                 })}
321 |                                                 {provided.placeholder}
322 |                                             </div>
323 |                                         )
324 |                                     }}
325 |                                 </Droppable>
326 |                             </DragDropContext>
327 |                             <Button
328 |                                 className={'my-1'}
329 |                                 block={true}
330 |                                 icon={<PlusOutlined/>}
331 |                                 onClick={() => {
332 |                                     setState({
333 |                                         isModalOpen: true
334 |                                     })
335 |                                 }}
336 |                             >
337 |                                 <span className={'font-bold'}>{getIntlValue('btn-text')}</span>
338 |                             </Button>
339 |                         </div>
340 |                         <div className={'mb-1 text-base'}>{getIntlValue('no-use')}</div>
341 |                         {templateList.map((item: any) => {
342 |                             if (!isHaveInTemplate(item.id)) {
343 |                                 return (
344 |                                     <Button
345 |                                         className={'my-1'}
346 |                                         block={true}
347 |                                         type="dashed"
348 |                                         key={item.id}
349 |                                         onClick={() => {
350 |                                             handleSelectTemplate(item.id)
351 |                                         }}
352 |                                     >
353 |                                         {item?.name}
354 |                                     </Button>
355 |                                 )
356 |                             }
357 |                         })}
358 |                     </Card>
359 |                     <Card
360 |                         title={getIntlValue('edit')}
361 |                         className={'col-span-2 h-full'}
362 |                         bodyStyle={{
363 |                             padding: 12,
364 |                             height: '95%',
365 |                         }}
366 |                     >
367 |                         <MdEditor
368 |                             editorId={'editor'}
369 |                             modelValue={editorData}
370 |                             preview={false}
371 |                             onChange={setEditorData}
372 |                             showCodeRowNumber={true}
373 |                             style={{height: '100%'}}
374 |                             footers={[]}
375 |                             noUploadImg={true}
376 |                             toolbars={[
377 |                                 'bold',
378 |                                 'underline',
379 |                                 'italic',
380 |                                 'strikeThrough',
381 |                                 'title',
382 |                                 'sub',
383 |                                 'sup',
384 |                                 'quote',
385 |                                 'unorderedList',
386 |                                 'orderedList',
387 |                                 'task',
388 |                                 'codeRow',
389 |                                 'code',
390 |                                 'link',
391 |                                 'image',
392 |                                 'table',
393 |                                 'mermaid',
394 |                                 'pageFullscreen',
395 |                                 'htmlPreview',
396 |                             ]}
397 |                         />
398 |                     </Card>
399 |                     <Card
400 |                         title={getIntlValue('preview')}
401 |                         className={'col-span-2 h-full overflow-hidden'}
402 |                         extra={<div>
403 |                             <Button
404 |                                 icon={<CopyOutlined/>}
405 |                                 type={'primary'}
406 |                                 className={'mr-3'}
407 |                                 onClick={copyMarkdown}
408 |                             />
409 |                             <Button
410 |                                 icon={<DownloadOutlined/>}
411 |                                 type={'primary'}
412 |                                 onClick={downLoadMarkdown}
413 |                             />
414 |                         </div>}
415 |                         bodyStyle={{
416 |                             height: '95%',
417 |                             overflow: 'auto',
418 |                         }}
419 |                     >
420 |                         <MdEditor
421 |                             editorId={'preview'}
422 |                             previewOnly={true}
423 |                             modelValue={previewData}
424 |                             previewTheme={'github'}
425 |                             codeTheme={'github'}
426 |                             showCodeRowNumber={true}
427 |                         />
428 |                     </Card>
429 |                 </div>
430 |             </Content>
431 |             <Modal
432 |                 title={getIntlValue('modal-title')}
433 |                 open={isModalOpen}
434 |                 onOk={addNewTemplate}
435 |                 onCancel={() => {
436 |                     setState({
437 |                         isModalOpen: false,
438 |                         inputValue: "",
439 |                     })
440 |                 }}
441 |             >
442 |                 <Input
443 |                     placeholder={getIntlValue('modal-placeholder')}
444 |                     value={inputValue}
445 |                     onChange={(e: any) => {
446 |                         setState({
447 |                             inputValue: e.target.value
448 |                         })
449 |                     }}
450 |                 />
451 |             </Modal>
452 |         </Layout>
453 |     );
454 | }
455 | 


--------------------------------------------------------------------------------