Skip to content

Commit c358caf

Browse files
author
lucifer
committed
feat: 代码模板
1 parent 3b57155 commit c358caf

16 files changed

+11497
-10047
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

33
# dependencies
4-
/node_modules
4+
node_modules
55
/.pnp
66
.pnp.js
77

‎leetcode-cheat.zip

1.91 MB
Binary file not shown.

‎src/App.js

+99-205
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,26 @@
1-
import React, { useState, Fragment } from "react";
2-
import { Tabs, Tag, Button, Table, Empty, message, Collapse } from "antd";
3-
import marked from "marked";
4-
import hljs from "highlight.js";
1+
import React, { useState } from "react";
2+
import { Button, Table, Empty, Collapse, Tabs } from "antd";
3+
54
import "highlight.js/styles/github.css";
65

7-
import { copy, getColor } from "./utils";
86
import db from "./db/db";
9-
import {
10-
LEETCODE_CN_URL,
11-
LEETCODE_URL,
12-
ISSUES_URL,
13-
CONTRIBUTE_COMPANY_URL,
14-
} from "./constant/index";
7+
import { LEETCODE_CN_URL, LEETCODE_URL } from "./constant/index";
8+
import ProblemDetail from "./Detail";
9+
import TagOrLink from "./TagOrLink";
10+
import tempaltes from "./codeTemplates/index";
11+
import Codes from "./codes";
1512

1613
import "antd/dist/antd.css";
1714
import "./App.css";
1815

16+
const { problems } = db;
1917
const { TabPane } = Tabs;
2018
const { Panel } = Collapse;
21-
22-
const formatCodeToMarkDown = (code, lang) => `\`\`\`${lang}\n${code}\`\`\`\n`;
23-
24-
const { problems, company } = db;
2519
const dataSource = Object.values(problems);
2620

2721
function inLeetCodeWebsite(url) {
2822
return [LEETCODE_CN_URL, LEETCODE_URL].some((u) => url.includes(u));
2923
}
30-
function TagOrLink({ link, text, style, color }) {
31-
return link !== null ? (
32-
<Button type="link" href={link} target="_blank">
33-
{text}
34-
</Button>
35-
) : (
36-
<div style={{ display: "inline-block", ...style }}>
37-
<Tag color={color}>{text}</Tag>
38-
</div>
39-
);
40-
}
4124

4225
const columns = [
4326
{
@@ -69,7 +52,7 @@ const columns = [
6952
display: "inline-block",
7053
margin: "4px 0",
7154
}}
72-
key={tag.id}
55+
key={tag.text}
7356
text={tag.text}
7457
link={tag.link}
7558
color={tag.color}
@@ -81,6 +64,8 @@ const columns = [
8164
},
8265
];
8366

67+
const pages = ["allSolutions", "templates", "detail"];
68+
8469
function App() {
8570
// eslint-disable-next-line
8671
chrome.tabs &&
@@ -94,195 +79,104 @@ function App() {
9479
setInLeetCode(inLeetCodeWebsite(currentUrl));
9580
});
9681

97-
const [problemId, setProblemId] = useState("");
98-
const [hasSolution, setHasSolution] = useState(false);
82+
// const [problemId, setProblemId] = useState("");
83+
const [problemId, setProblemId] = useState("two-sum");
84+
85+
// const [hasSolution, setHasSolution] = useState(false);
86+
const [hasSolution, setHasSolution] = useState(true);
87+
const [page, setPage] = useState("");
9988
const [inLeetCode, setInLeetCode] = useState(true);
10089

101-
if (!inLeetCode)
102-
return (
103-
<div className="container" style={{ textAlign: "center" }}>
104-
<div>快打开力扣，开始刷题吧～</div>
105-
<Button type="link" href={LEETCODE_CN_URL} target="_blank">
106-
力扣中国
107-
</Button>
108-
<Button type="link" href={LEETCODE_URL} target="_blank">
109-
力扣国际
110-
</Button>
111-
</div>
112-
);
90+
if (!inLeetCode) return window.open(LEETCODE_CN_URL + "/problemset/all/");
11391

11492
return (
11593
<div className="container">
116-
{hasSolution ? (
117-
<Tabs defaultActiveKey="0">
118-
<TabPane tab="前置知识" key="0">
119-
{problems[problemId].pre.map(({ id, link, text, color }) => (
120-
<TagOrLink key={id} text={text} link={link} color={color} />
121-
))}
122-
</TabPane>
123-
<TabPane tab="关键点" key="1">
124-
{problems[problemId].keyPoints.length === 0 && (
125-
<Fragment>
126-
暂无关键点，
127-
<a href={ISSUES_URL} target="_blank">
128-
点击反馈
129-
</a>
130-
</Fragment>
131-
)}
132-
<ul>
133-
{problems[problemId].keyPoints.map(({ id, link, text }) => (
134-
<li key={id}>{link ? <a href={link}>text</a> : text}</li>
135-
))}
136-
</ul>
137-
</TabPane>
138-
<TabPane tab="公司" key="4">
139-
{problems[problemId].companies.length === 0 && (
140-
<Fragment>
141-
暂无公司资料，
142-
<a href={CONTRIBUTE_COMPANY_URL} target="_blank">
143-
点击反馈
144-
</a>
145-
</Fragment>
146-
)}
147-
<Collapse>
148-
{problems[problemId].companies.map(({ name }) => (
149-
<Panel header={name} key={name}>
150-
<ul>
151-
{company[name].map((id) => (
152-
<li>
153-
<Button
154-
type="link"
155-
href={`${LEETCODE_CN_URL}/problems/${id}`}
156-
target="_blank"
157-
>
158-
{id}
159-
</Button>
160-
</li>
161-
))}
162-
</ul>
163-
</Panel>
164-
))}
165-
</Collapse>
166-
</TabPane>
167-
<TabPane tab="题解" key="2">
168-
<Button
169-
type="link"
170-
href={problems[problemId].solution}
171-
target="_blank"
172-
>
173-
前往 github 题解（国外）
94+
<div>
95+
<div className="guide">
96+
{page !== "" ? (
97+
<Button type="link" onClick={() => setPage("")}>
98+
回到首页
99+
</Button>
100+
) : (
101+
""
102+
)}
103+
{hasSolution && page === "" ? (
104+
<Button type="link" onClick={() => setPage("detail")}>
105+
查看本题题解
174106
</Button>
107+
) : (
108+
""
109+
)}
175110

176-
<Button
177-
type="link"
178-
href={problems[problemId].giteeSolution}
179-
target="_blank"
180-
>
181-
前往 gitee 题解（国内）
111+
{!hasSolution && page !== "allSolutions" && (
112+
<Button type="link" onClick={() => setPage("allSolutions")}>
113+
本题暂未被力扣加加收录，点击查看所有已收录题目~
182114
</Button>
183-
</TabPane>
184-
<TabPane tab="代码" key="3">
185-
<div className="code-block">
186-
<Collapse>
187-
{problems[problemId].code.map((c) => (
188-
<Panel
189-
header={
190-
<div
191-
key={c.text}
192-
className="row"
193-
style={{ marginTop: "10px" }}
194-
>
195-
<span className="language language-js">
196-
{c.language}
197-
</span>
198-
<Button
199-
type="primary"
200-
size="small"
201-
onClick={(e) => {
202-
e.stopPropagation();
203-
copy(c.text, () => {
204-
message.success("复制成功～");
205-
});
206-
}}
207-
>
208-
复制
209-
</Button>
210-
</div>
211-
}
212-
>
213-
<div
214-
dangerouslySetInnerHTML={{
215-
__html: marked(
216-
formatCodeToMarkDown(c.text, c.language),
217-
{
218-
renderer: new marked.Renderer(),
219-
highlight: function () {
220-
const validLanguage = c.language;
221-
return hljs.highlight(validLanguage, c.text)
222-
.value;
223-
},
224-
pedantic: false,
225-
gfm: true,
226-
langPrefix: c.language,
227-
breaks: false,
228-
sanitize: false,
229-
smartLists: true,
230-
smartypants: false,
231-
xhtml: false,
232-
}
233-
),
234-
}}
235-
></div>
236-
</Panel>
237-
))}
238-
</Collapse>
239-
</div>
240-
</TabPane>
115+
)}
241116

242-
<TabPane
243-
tab="可视化调试（敬请期待）"
244-
key="5"
245-
disabled={true}
246-
></TabPane>
117+
<div style={page === "" ? {} : { display: "none" }}>
118+
<h2 style={{ display: "flex", justifyContent: "center" }}>
119+
代码模板(内测中)
120+
</h2>
121+
<Tabs>
122+
{tempaltes.map((tempalte) => (
123+
<TabPane tab={tempalte.title} key={tempalte.title}>
124+
建议先学会之后再用模板。 如果你还不会的话，可以看看我的
125+
<Button type="link" href={tempalte.link} target="_blank">
126+
文章
127+
</Button>
128+
哦~
129+
{tempalte.list.map(({ text, problems, codes }) => (
130+
<Collapse>
131+
<Panel header={<div>{text}</div>} key={text}>
132+
<div>
133+
推荐题目：
134+
<ul>
135+
{problems.map((problem) => (
136+
<li>
137+
<Button type="text">{problem.title}</Button>
138+
<Button
139+
onClick={(e) => e.stopPropagation()}
140+
type="link"
141+
href={`${LEETCODE_CN_URL}/problems/${problem.id}`}
142+
target="_blank"
143+
size="small"
144+
style={{ marginLeft: "10px" }}
145+
>
146+
去默写
147+
</Button>
148+
</li>
149+
))}
150+
</ul>
151+
</div>
152+
<Codes codes={codes} />
153+
</Panel>
154+
</Collapse>
155+
))}
156+
</TabPane>
157+
))}
247158

248-
<TabPane tab="我要反馈" key="6">
249-
<div>当前版本： V 0.1.0</div>
250-
<a
251-
href={ISSUES_URL}
252-
target="_blank"
253-
style={{ marginRight: "20px" }}
254-
>
255-
我想反馈问题
256-
</a>
257-
<a
258-
href={CONTRIBUTE_COMPANY_URL}
259-
target="_blank"
260-
style={{ marginRight: "20px" }}
261-
>
262-
我想贡献公司和岗位信息（免费获得题目咨询服务）
263-
</a>
264-
<a
265-
href="https://tva1.sinaimg.cn/large/007S8ZIlly1gfcuzagjalj30p00dwabs.jpg"
266-
target="_blank"
267-
>
268-
关注更新
269-
</a>
270-
</TabPane>
271-
</Tabs>
272-
) : (
273-
<div>
274-
<Empty description="正在撰写题解...">
275-
<div className="row" style={{ marginTop: "20px" }}>
276-
所有已收录的题目
277-
</div>
278-
<Table
279-
pagination={{ hideOnSinglePage: true }}
280-
dataSource={dataSource}
281-
columns={columns}
282-
/>
283-
</Empty>
159+
<TabPane tab="更多模板后续陆续更新" key="more" disabled></TabPane>
160+
</Tabs>
161+
</div>
284162
</div>
285-
)}
163+
164+
{page === "detail" && <ProblemDetail problemId={problemId} />}
165+
</div>
166+
167+
<div style={page === "allSolutions" ? {} : { display: "none" }}>
168+
<Empty description="正在撰写题解...">
169+
<div className="row" style={{ marginTop: "20px" }}>
170+
所有已收录的题目
171+
</div>
172+
<Table
173+
pagination={{ hideOnSinglePage: true }}
174+
dataSource={dataSource}
175+
rowKey="id"
176+
columns={columns}
177+
/>
178+
</Empty>
179+
</div>
286180
</div>
287181
);
288182
}

0 commit comments

Comments
 (0)