优化文件夹

dev-wan · Sep 11, 2024 · ca5bd4e · ca5bd4e
1 parent b406ac3
commit ca5bd4e
Show file tree

Hide file tree

Showing 22 changed files with 175 additions and 101 deletions.
diff --git a/component/51cto.tsx → component/options/51cto.tsx b/component/51cto.tsx → component/options/51cto.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -56,11 +56,17 @@ export default function Cto51() {
           className="codebox-switch"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}{" "}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/baidu.tsx → component/options/baidu.tsx b/component/baidu.tsx → component/options/baidu.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -38,11 +38,17 @@ export default function Baidu() {
         <label className="codebox-switch" htmlFor="baidu-closeAIBox"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/cnblogs.tsx → component/options/cnblogs.tsx b/component/cnblogs.tsx → component/options/cnblogs.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -38,11 +38,17 @@ export default function Cnblogs() {
         <label className="codebox-switch" htmlFor="cnblogs-copyCode"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/config.tsx → component/options/config.tsx b/component/config.tsx → component/options/config.tsx
diff --git a/component/content.tsx → component/options/content.tsx b/component/content.tsx → component/options/content.tsx
@@ -2,20 +2,20 @@ import React, { useEffect, useState } from "react"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 
-import Cto51 from "~component/51cto"
-import Baidu from "~component/baidu"
-import Cnblogs from "~component/cnblogs"
-import Config from "~component/config"
-import Csdn from "~component/csdn"
-import Custom from "~component/custom"
-import Jb51 from "~component/jb51"
-import Jianshu from "~component/jianshu"
-import Juejin from "~component/juejin"
-import Oschina from "~component/oschina"
-import Php from "~component/php"
-import Segmentfault from "~component/segmentfault"
-import Weixin from "~component/weixin"
-import Zhihu from "~component/zhihu"
+import Cto51 from "~component/options/51cto"
+import Baidu from "~component/options/baidu"
+import Cnblogs from "~component/options/cnblogs"
+import Config from "~component/options/config"
+import Csdn from "~component/options/csdn"
+import Custom from "~component/options/custom"
+import Jb51 from "~component/options/jb51"
+import Jianshu from "~component/options/jianshu"
+import Juejin from "~component/options/juejin"
+import Oschina from "~component/options/oschina"
+import Php from "~component/options/php"
+import Segmentfault from "~component/options/segmentfault"
+import Weixin from "~component/options/weixin"
+import Zhihu from "~component/options/zhihu"
 
 export default function Content() {
   const [csdnIsShow, setCsdnIsShow] = useState<boolean>(false)

diff --git a/component/csdn.tsx → component/options/csdn.tsx b/component/csdn.tsx → component/options/csdn.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined, HeartTwoTone } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -136,11 +136,17 @@ export default function Csdn() {
           className="codebox-switch"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/custom.tsx → component/options/custom.tsx b/component/custom.tsx → component/options/custom.tsx
@@ -15,7 +15,9 @@ export default function Custom() {
   const [codes, setCodes] = useState([])
 
   useEffect(() => {
-    getCodes()
+    if (window.location.protocol != "chrome-extension:") {
+      getCodes()
+    }
   }, [])
 
   async function getCodes() {

diff --git a/component/jb51.tsx → component/options/jb51.tsx b/component/jb51.tsx → component/options/jb51.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -53,11 +53,17 @@ export default function Jb51() {
         <label className="codebox-switch" htmlFor="jb51-copyCode"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/jianshu.tsx → component/options/jianshu.tsx b/component/jianshu.tsx → component/options/jianshu.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -74,11 +74,17 @@ export default function Jianshu() {
           htmlFor="jianshu-autoOpenCode"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/juejin.tsx → component/options/juejin.tsx b/component/juejin.tsx → component/options/juejin.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 
@@ -21,11 +21,17 @@ export default function Juejin() {
     <fieldset>
       <legend>{i18n("juejinConfig")}</legend>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/oschina.tsx → component/options/oschina.tsx b/component/oschina.tsx → component/options/oschina.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 
@@ -21,11 +21,17 @@ export default function Oschina() {
     <fieldset>
       <legend>{i18n("oschinaConfig")}</legend>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/php.tsx → component/options/php.tsx b/component/php.tsx → component/options/php.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -54,11 +54,17 @@ export default function Php() {
         <label htmlFor="php-closeLoginModal" className="codebox-switch"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/segmentfault.tsx → component/options/segmentfault.tsx b/component/segmentfault.tsx → component/options/segmentfault.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 
@@ -21,11 +21,17 @@ export default function Segmentfault() {
     <fieldset>
       <legend>{i18n("segmentfaultConfig")}</legend>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>

diff --git a/component/options/sortableItem.tsx b/component/options/sortableItem.tsx
@@ -0,0 +1,41 @@
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import React from "react"
+
+import Cto51 from "~component/options/51cto"
+import Baidu from "~component/options/baidu"
+import Cnblogs from "~component/options/cnblogs"
+import Config from "~component/options/config"
+import Csdn from "~component/options/csdn"
+import Custom from "~component/options/custom"
+import Jb51 from "~component/options/jb51"
+import Jianshu from "~component/options/jianshu"
+import Juejin from "~component/options/juejin"
+import Oschina from "~component/options/oschina"
+import Php from "~component/options/php"
+import Segmentfault from "~component/options/segmentfault"
+import Weixin from "~component/options/weixin"
+import Zhihu from "~component/options/zhihu"
+
+const itemMap = {
+  csdn: <Csdn />,
+  zhihu: <Zhihu />,
+  baidu: <Baidu />,
+  juejin: <Juejin />,
+  oschina: <Oschina />,
+  jianshu: <Jianshu />,
+  jb51: <Jb51 />,
+  cnblogs: <Cnblogs />,
+  "51cto": <Cto51 />,
+  php: <Php />,
+  segmentfault: <Segmentfault />,
+  weixin: <Weixin />,
+  custom: <Custom />,
+  app: <Config />
+}
+
+export default function SortableItem(props) {
+  const { item } = props
+
+  return <div className="sortableItem">{itemMap[item.value]}</div>
+}
diff --git a/component/weixin.tsx → component/options/weixin.tsx b/component/weixin.tsx → component/options/weixin.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@ant-design/icons"
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/dist/hook"
@@ -38,11 +38,17 @@ export default function Weixin() {
         <label className="codebox-switch" htmlFor="weixin-copyCode"></label>
       </div>
       <div className="item download" onClick={downloadMarkdown}>
-        {i18n("downloadMarkdown")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadMarkdown")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
       <div className="item download" onClick={downloadHtml}>
-        {i18n("downloadHtml")}
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("downloadHtml")}
+        </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
     </fieldset>