feat: 直接跳到对应标签

Author: lucifer

src/App.js

@@ -15,7 +15,7 @@ import TagOrLink from "./TagOrLink";
 import tempaltes from "./codeTemplates/index";
 import checkUpdate from "./checkUpdates";
 
-import { isInExtension } from "./utils";
+import { isInExtension, getUrlParameter } from "./utils";
 // import drawTree from "canvas-binary-tree";
 import "antd/dist/antd.css";
 import "./App.css";
@@ -76,7 +76,7 @@ const columns = [
     ),
   },
 ];
-
+const initialTab = getUrlParameter("tab") || "code-template";
 function App() {
   // eslint-disable-next-line
   chrome.tabs &&
@@ -103,6 +103,8 @@ function App() {
   const [hasSolution, setHasSolution] = useState(false);
   const [inSelected, setInSelected] = useState(false); // 是否被精选题解（其实就是合集）收录
   const [page, setPage] = useState("");
+  const [tab, setTab] = useState(initialTab);
+
   // const [inLeetCode, setInLeetCode] = useState(true);
 
   // if (!inLeetCode) return window.open(LEETCODE_CN_URL + "/problemset/all/");
@@ -199,9 +201,9 @@ function App() {
         </>
       )}
       {page === "" && (
-        <Tabs type="card">
-          <TabPane key="code-template" tab="代码模板">
-            <CodeTemplates page={page} tempaltes={tempaltes}></CodeTemplates>
+        <Tabs type="card" activeKey={tab}>
+          <TabPane key="code-template" tab="代码模板" onTabClick={setTab}>
+            <CodeTemplates tempaltes={tempaltes}></CodeTemplates>
           </TabPane>
           <TabPane key="data-structure-vis" tab="数据结构可视化">
             <DataStrutureVis></DataStrutureVis>

src/contentScript.js

@@ -137,18 +137,14 @@ function insertButton() {
         const title = d.match(/(\d+\. .+)(?=<)/)[1];
         const link = "https://leetcode-cn.com" + d.match(/href="(.*?)"/)[1];
         const language = document.querySelector("#lang-select").innerText;
-        let code = document.querySelector(
-          ".monaco-scrollable-element,.editor-scrollable"
-        ).innerText;
-
-        if (code.length > 2000) {
-          code = "";
-        }
+        // let code = document.querySelector(
+        //   ".monaco-scrollable-element,.editor-scrollable"
+        // ).innerText;
 
         // const desc = document.querySelector("#question-detail-main-tabs")
         //   .children[1].children[0].children[1].innerText;
         window.open(
-          `https://leetcode-pp.github.io/leetcode-cheat/?link=${link}&title=${title}&language=${language}code=${code}`
+          `https://leetcode-pp.github.io/leetcode-cheat/?link=${link}&title=${title}&language=${language}&tab=solution-template`
         );
       };
 

src/dataStructureVis/index.jsx

@@ -509,7 +509,7 @@ export default function DataStrutureVis() {
         <Button
           type="link"
           target="_blank"
-          href="https://leetcode-pp.github.io/leetcode-cheat/"
+          href="https://leetcode-pp.github.io/leetcode-cheat/?tab=data-structure-vis"
         >
           去网站使用
         </Button>

src/solutionTemplate/index.jsx

@@ -94,6 +94,7 @@ ${desc}
 ${displayLanguage(language)} Code:
 
 \`\`\`${language === "python3" ? "python" : language}
+
 ${code}
 
 \`\`\`
@@ -201,10 +202,10 @@ export default function SolutionTemplate() {
         <>
           <ul>
             <li>
-              由于浏览器 url 传参限制，题目信息暂时不会带过来。另外如果代码大于
-              2000 字符，也不会带过来。
+              由于浏览器 url
+              传参限制，题目信息和代码暂时不会自动带过来。后续考虑使用服务器转存实现自动带入的功能。
             </li>
-            <li>后续考虑支持更多主题，以及用户自定义主题功能~</li>
+            <li>后续考虑支持更多主题，以及用户自定义主题功能。</li>
           </ul>
           <div className="line">
             编程语言：