chore: 题解模板小优化

Author: lucifer

src/contentScript.js

@@ -183,20 +183,23 @@ function insertButton() {
       buttons[i].parentElement.prepend(copyButton);
 
       // const writeSolutionButton = document.createElement("div");
-      const writeSolutionButton = buttons[i].cloneNode(true);
-      writeSolutionButton.innerText = "写题解";
-      writeSolutionButton.style["margin-left"] = "10px";
+      const writeSolutionButton = document.createElement("a");
+      writeSolutionButton.innerText = "去写题解";
+      writeSolutionButton.style["margin-right"] = "20px";
+      writeSolutionButton.style["line-height"] = "32px";
+      let ele = document.querySelector(`[data-cypress="QuestionTitle"]`);
 
       writeSolutionButton.onclick = () => {
         // d: "<a href="/problems/remove-max-number-of-edges-to-keep-graph-fully-traversable/">1579. 保证图可完全遍历</a>"
-        const ele = document.querySelector(`[data-cypress="QuestionTitle"]`);
+        if (!ele) {
+          ele = document.querySelector(`[data-cypress="QuestionTitle"]`);
+        }
         if (!ele) {
           return message.warn({
             content: "获取题目描述失败，请先切换到题目描述标签",
           });
         }
-        const d = document.querySelector(`[data-cypress="QuestionTitle"]`)
-          .innerHTML;
+        const d = ele.innerHTML;
         const title = d.match(/(\d+\. .+)(?=<)/)[1];
         const link = window.location.origin + d.match(/href="(.*?)"/)[1];
         const language = document.querySelector("#lang-select").innerText;
@@ -206,6 +209,13 @@ function insertButton() {
 
         const desc = document.querySelector("#question-detail-main-tabs")
           .children[1].children[0].children[1].innerText;
+        const hide = message.loading("正在存储题目信息，请稍后~", 0);
+        writeSolutionButton.setAttribute("disabled", true);
+        // Dismiss manually and asynchronously
+        setTimeout(() => {
+          hide();
+          writeSolutionButton.removeAttribute("disabled");
+        }, 30000); // 超时 30s 都没好，那就别转了
         getStorage("leetcode-cheatsheet-token")
           .then((res) => res.result.value)
           .then((res) => {
@@ -229,29 +239,37 @@ function insertButton() {
               {
                 token: t,
               }
-            ).then((res) => {
-              if (res.id) {
-                window.open(
-                  `https://leetcode-pp.github.io/leetcode-cheat/?issue_number=${res.id}&tab=solution-template`
-                );
-              } else {
-                message.warn({
-                  content:
-                    "使用 Github API 失败，已为您切换为普通模式，普通模式仅可自动带入题目名称，题目地址以及题解语言。",
-                });
-                setTimeout(() => {
+            )
+              .then((res) => {
+                hide();
+                writeSolutionButton.removeAttribute("disabled");
+                if (res.id) {
                   window.open(
-                    `https://leetcode-pp.github.io/leetcode-cheat/?title=${title}&link=${link}&language=${language}&tab=solution-template`
+                    `https://leetcode-pp.github.io/leetcode-cheat/?issue_number=${res.id}&tab=solution-template`
                   );
-                }, 2000);
-              }
-            });
+                } else {
+                  message.warn({
+                    content:
+                      "使用 Github API 失败，已为您切换为普通模式，普通模式仅可自动带入题目名称，题目地址以及题解语言。",
+                  });
+                  setTimeout(() => {
+                    window.open(
+                      `https://leetcode-pp.github.io/leetcode-cheat/?title=${title}&link=${link}&language=${language}&tab=solution-template`
+                    );
+                  }, 2000);
+                }
+              })
+              .catch(() => {
+                hide();
+                writeSolutionButton.removeAttribute("disabled");
+              });
           });
       };
 
       // ReactDOM.render(<SolutionButton />, writeSolutionButton);
 
       buttons[i].parentElement.prepend(writeSolutionButton);
+      // ele.appendChild(writeSolutionButton);
       return true;
     }
   }

src/solutionTemplate/index.jsx

@@ -28,7 +28,12 @@ const { TextArea } = Input;
 const { Option } = Select;
 
 const slogan = `
-更多题解可以访问我的 LeetCode 题解仓库：https://github.com/azl397985856/leetcode 。 目前已经 40K star 啦。
+
+> 此题解由 [力扣刷题插件](https://leetcode-pp.github.io/leetcode-cheat/?tab=solution-template) 自动生成。 
+
+力扣的小伙伴可以[关注我](https://leetcode-cn.com/u/fe-lucifer/)，这样就会第一时间收到我的动态啦~
+
+以上就是本文的全部内容了。大家对此有何看法，欢迎给我留言，我有时间都会一一查看回答。更多算法套路可以访问我的 LeetCode 题解仓库：https://github.com/azl397985856/leetcode 。 目前已经 40K star 啦。大家也可以关注我的公众号《力扣加加》带你啃下算法这块硬骨头。
 
 关注公众号力扣加加，努力用清晰直白的语言还原解题思路，并且有大量图解，手把手教你识别套路，高效刷题。
 
@@ -60,7 +65,7 @@ function getTemplate({
   link = "",
   desc = "",
   pre = "",
-  company = "",
+  company = "暂无",
   language = "python3",
   code = "",
   keyword = "",
@@ -257,31 +262,33 @@ export default class SolutionTemplate extends PureComponent {
         this.setState({
           isloading: true,
         });
-        getCloundStorage(getUrlParameter("issue_number"), {
-          token: t,
-        })
-          .then((res) => {
-            const { link, title, code, language, desc } = res;
-
-            this.setLanguage(language?.toLowerCase());
-            this.setTemplate(
-              getTemplate({
-                desc,
-                language: language?.toLowerCase(),
-                link,
-                title,
-                code,
-              })
-            );
-            this.setState({
-              isloading: false,
-            });
+        if (getUrlParameter("issue_number")) {
+          getCloundStorage(getUrlParameter("issue_number"), {
+            token: t,
           })
-          .catch(() =>
-            this.setState({
-              isloading: false,
+            .then((res) => {
+              const { link, title, code, language, desc } = res;
+
+              this.setLanguage(language?.toLowerCase());
+              this.setTemplate(
+                getTemplate({
+                  desc,
+                  language: language?.toLowerCase(),
+                  link,
+                  title,
+                  code,
+                })
+              );
+              this.setState({
+                isloading: false,
+              });
             })
-          );
+            .catch(() =>
+              this.setState({
+                isloading: false,
+              })
+            );
+        }
       });
   }
   render() {