重置设置

component/items/cssCode.tsx

@@ -7,7 +7,9 @@ import { i18n } from "~tools"
 export default function CssCode(props) {
   let { name } = props
 
-  const [runCss, setRunCss] = useStorage(`${name}-runCss`, false)
+  const [runCss, setRunCss] = useStorage(`${name}-runCss`, (v) =>
+    v === undefined ? false : v
+  )
   const [cssCode, setCssCode, { setRenderValue, setStoreValue, remove }] =
     useStorage(`${name}-cssCode`)
 

component/options/51cto.tsx

@@ -1,3 +1,5 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
 import CssCode from "~component/items/cssCode"
@@ -7,7 +9,7 @@ import EditMarkdown from "~component/items/editMarkdown"
 import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
-export default function Cto51() {
+export default function Cto51({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("51cto-copyCode", (v) =>
     v === undefined ? true : v
   )
@@ -16,6 +18,15 @@ export default function Cto51() {
     (v) => (v === undefined ? true : v)
   )
 
+  function handleReset() {
+    setCopyCode(true)
+    setCloseLoginModal(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("51ctoConfig")}</legend>
@@ -45,11 +56,11 @@ export default function Cto51() {
           htmlFor="51cto-closeLoginModal"
           className="codebox-switch"></label>
       </div>
+      <CssCode name="51cto"></CssCode>
       <ShowTag name="51cto"></ShowTag>
       <EditMarkdown name="51cto"></EditMarkdown>
       <DownloadMarkdown name="51cto"></DownloadMarkdown>
       <DownloadHtml name="51cto"></DownloadHtml>
-      <CssCode name="51cto"></CssCode>
     </fieldset>
   )
 }

component/options/baidu.tsx

@@ -1,15 +1,26 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import { i18n } from "~tools"
 
-export default function Baidu() {
+export default function Baidu({ forwardRef }) {
   const [closeAIBox, setCloseAIBox] = useStorage("baidu-closeAIBox", (v) =>
     v === undefined ? false : v
   )
 
+  function handleReset() {
+    setCloseAIBox(false)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("baiduConfig")}</legend>
@@ -25,6 +36,7 @@ export default function Baidu() {
         />
         <label className="codebox-switch" htmlFor="baidu-closeAIBox"></label>
       </div>
+      <CssCode name="baidu"></CssCode>
       <EditMarkdown name="baidu"></EditMarkdown>
       <DownloadMarkdown name="baidu"></DownloadMarkdown>
       <DownloadHtml name="baidu"></DownloadHtml>

component/options/cnblogs.tsx

@@ -1,3 +1,5 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
 import CssCode from "~component/items/cssCode"
@@ -6,11 +8,19 @@ import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import { i18n } from "~tools"
 
-export default function Cnblogs() {
+export default function Cnblogs({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("cnblogs-copyCode", (v) =>
     v === undefined ? true : v
   )
 
+  function handleReset() {
+    setCopyCode(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("cnblogsConfig")}</legend>
@@ -26,6 +36,7 @@ export default function Cnblogs() {
         />
         <label className="codebox-switch" htmlFor="cnblogs-copyCode"></label>
       </div>
+      <CssCode name="cnblogs"></CssCode>
       <EditMarkdown name="cnblogs"></EditMarkdown>
       <DownloadMarkdown name="cnblogs"></DownloadMarkdown>
       <DownloadHtml name="cnblogs"></DownloadHtml>

component/options/config.tsx

@@ -1,11 +1,12 @@
 import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
+import { useImperativeHandle } from "react"
 
 import { sendToBackground, sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import { i18n } from "~tools"
 
-export default function Config() {
+export default function Config({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("config-copyCode", (v) =>
     v === undefined ? true : v
   )
@@ -19,6 +20,15 @@ export default function Config() {
     })
   }
 
+  function handleReset() {
+    setCopyCode(true)
+    setCloseLog(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("AppConfig")}</legend>

component/options/csdn.tsx

@@ -1,12 +1,15 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
-export default function Csdn() {
+export default function Csdn({ forwardRef }) {
   const [closeAds, setCloseAds] = useStorage("csdn-closeAds", (v) =>
     v === undefined ? true : v
   )
@@ -33,6 +36,20 @@ export default function Csdn() {
     (v) => (v === undefined ? true : v)
   )
 
+  function handleReset() {
+    setCloseAds(true)
+    setCopyCode(true)
+    setCloseFollow(true)
+    setCloseVip(true)
+    setAutoOpenCode(true)
+    setCloseLoginModal(true)
+    setCloseRedirectModal(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("csdnConfig")}</legend>
@@ -124,6 +141,7 @@ export default function Csdn() {
           htmlFor="csdn-closeRedirectModal"
           className="codebox-switch"></label>
       </div>
+      <CssCode name="csdn"></CssCode>
       <ShowTag name="csdn"></ShowTag>
       <EditMarkdown name="csdn"></EditMarkdown>
       <DownloadMarkdown name="csdn"></DownloadMarkdown>

component/options/jb51.tsx

@@ -1,11 +1,14 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import { i18n } from "~tools"
 
-export default function Jb51() {
+export default function Jb51({ forwardRef }) {
   const [closeAds, setCloseAds] = useStorage("jb51-closeAds", (v) =>
     v === undefined ? true : v
   )
@@ -13,6 +16,15 @@ export default function Jb51() {
     v === undefined ? true : v
   )
 
+  function handleReset() {
+    setCopyCode(true)
+    setCloseAds(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("jb51Config")}</legend>
@@ -40,6 +52,7 @@ export default function Jb51() {
         />
         <label className="codebox-switch" htmlFor="jb51-copyCode"></label>
       </div>
+      <CssCode name="jb51"></CssCode>
       <EditMarkdown name="jb51"></EditMarkdown>
       <DownloadMarkdown name="jb51"></DownloadMarkdown>
       <DownloadHtml name="jb51"></DownloadHtml>

component/options/jianshu.tsx

@@ -1,11 +1,14 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import { i18n } from "~tools"
 
-export default function Jianshu() {
+export default function Jianshu({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("jianshu-copyCode", (v) =>
     v === undefined ? true : v
   )
@@ -18,6 +21,16 @@ export default function Jianshu() {
     (v) => (v === undefined ? true : v)
   )
 
+  function handleReset() {
+    setCopyCode(true)
+    setCloseLoginModal(true)
+    setAutoOpenCode(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("jianshuConfig")}</legend>
@@ -61,6 +74,7 @@ export default function Jianshu() {
           className="codebox-switch"
           htmlFor="jianshu-autoOpenCode"></label>
       </div>
+      <CssCode name="jianshu"></CssCode>
       <EditMarkdown name="jianshu"></EditMarkdown>
       <DownloadMarkdown name="jianshu"></DownloadMarkdown>
       <DownloadHtml name="jianshu"></DownloadHtml>

component/options/juejin.tsx

@@ -1,3 +1,4 @@
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
@@ -8,6 +9,7 @@ export default function Juejin() {
   return (
     <fieldset>
       <legend>{i18n("juejinConfig")}</legend>
+      <CssCode name="juejin"></CssCode>
       <ShowTag name="juejin"></ShowTag>
       <EditMarkdown name="juejin"></EditMarkdown>
       <DownloadMarkdown name="juejin"></DownloadMarkdown>

component/options/medium.tsx

@@ -1,3 +1,4 @@
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
@@ -8,6 +9,7 @@ export default function Medium() {
   return (
     <fieldset>
       <legend>{i18n("mediumConfig")}</legend>
+      <CssCode name="medium"></CssCode>
       <ShowTag name="medium"></ShowTag>
       <EditMarkdown name="medium"></EditMarkdown>
       <DownloadMarkdown name="medium"></DownloadMarkdown>

component/options/oschina.tsx

@@ -1,3 +1,4 @@
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
@@ -7,6 +8,7 @@ export default function Oschina() {
   return (
     <fieldset>
       <legend>{i18n("oschinaConfig")}</legend>
+      <CssCode name="oschina"></CssCode>
       <EditMarkdown name="oschina"></EditMarkdown>
       <DownloadMarkdown name="oschina"></DownloadMarkdown>
       <DownloadHtml name="oschina"></DownloadHtml>

component/options/php.tsx

@@ -1,3 +1,5 @@
+import { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
 import CssCode from "~component/items/cssCode"
@@ -6,7 +8,7 @@ import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import { i18n } from "~tools"
 
-export default function Php() {
+export default function Php({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("php-copyCode", (v) =>
     v === undefined ? true : v
   )
@@ -15,6 +17,15 @@ export default function Php() {
     (v) => (v === undefined ? true : v)
   )
 
+  function handleReset() {
+    setCopyCode(true)
+    setCloseLoginModal(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("phpConfig")}</legend>
@@ -42,6 +53,7 @@ export default function Php() {
         />
         <label htmlFor="php-closeLoginModal" className="codebox-switch"></label>
       </div>
+      <CssCode name="php"></CssCode>
       <EditMarkdown name="php"></EditMarkdown>
       <DownloadMarkdown name="php"></DownloadMarkdown>
       <DownloadHtml name="php"></DownloadHtml>

component/options/segmentfault.tsx

@@ -1,3 +1,4 @@
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
@@ -7,6 +8,7 @@ export default function Segmentfault() {
   return (
     <fieldset>
       <legend>{i18n("segmentfaultConfig")}</legend>
+      <CssCode name="segmentfault"></CssCode>
       <EditMarkdown name="segmentfault"></EditMarkdown>
       <DownloadMarkdown name="segmentfault"></DownloadMarkdown>
       <DownloadHtml name="segmentfault"></DownloadHtml>

component/options/sortableItem.tsx

@@ -1,39 +0,0 @@
-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>
-}

component/options/weixin.tsx

@@ -1,3 +1,4 @@
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
@@ -8,6 +9,7 @@ export default function Weixin() {
   return (
     <fieldset>
       <legend>{i18n("weixinConfig")}</legend>
+      <CssCode name="weixin"></CssCode>
       <ShowTag name="weixin"></ShowTag>
       <EditMarkdown name="weixin"></EditMarkdown>
       <DownloadMarkdown name="weixin"></DownloadMarkdown>

component/options/zhihu.tsx

@@ -1,11 +1,14 @@
+import React, { useImperativeHandle } from "react"
+
 import { useStorage } from "@plasmohq/storage/hook"
 
+import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import EditMarkdown from "~component/items/editMarkdown"
 import { i18n } from "~tools"
 
-export default function Zhihu() {
+export default function Zhihu({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("zhihu-copyCode", (v) =>
     v === undefined ? true : v
   )
@@ -18,6 +21,16 @@ export default function Zhihu() {
     (v) => (v === undefined ? true : v)
   )
 
+  function handleReset() {
+    setCopyCode(true)
+    setCloseLoginModal(true)
+    setAutoOpenCode(true)
+  }
+
+  useImperativeHandle(forwardRef, () => ({
+    handleReset
+  }))
+
   return (
     <fieldset>
       <legend>{i18n("zhihuConfig")}</legend>
@@ -59,6 +72,7 @@ export default function Zhihu() {
         />
         <label className="codebox-switch" htmlFor="zhihu-autoOpenCode"></label>
       </div>
+      <CssCode name="zhihu"></CssCode>
       <EditMarkdown name="zhihu"></EditMarkdown>
       <DownloadMarkdown name="weixin"></DownloadMarkdown>
       <DownloadHtml name="weixin"></DownloadHtml>

options/index.tsx

@@ -1,94 +1,57 @@
-import React, { useState } from "react"
+import React, { useRef, useState } from "react"
 
-import SortableItem from "~component/options/sortableItem"
 import { ThemeProvider } from "~theme"
 import { i18n } from "~tools"
 
 import "~index.css"
 
+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 Medium from "~component/options/medium"
+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"
+
 import styles from "./index.module.scss"
 
 export default function IndexOptions() {
-  const items = [
-    {
-      id: "1",
-      value: "csdn",
-      label: "csdn",
-      isShow: true
-    },
-    {
-      id: "2",
-      value: "zhihu",
-      label: "知乎",
-      isShow: true
-    },
-    {
-      id: "3",
-      value: "baidu",
-      label: "百度",
-      isShow: true
-    },
-    {
-      id: "4",
-      value: "jianshu",
-      label: "简书",
-      isShow: true
-    },
-    {
-      id: "5",
-      value: "weixin",
-      label: "微信",
-      isShow: true
-    },
-    {
-      id: "6",
-      value: "jb51",
-      label: "脚本之家",
-      isShow: true
-    },
-    {
-      id: "7",
-      value: "cnblogs",
-      label: "博客园",
-      isShow: true
-    },
-    {
-      id: "8",
-      value: "51cto",
-      label: "51CTO",
-      isShow: true
-    },
-    {
-      id: "9",
-      value: "juejin",
-      label: "掘金",
-      isShow: true
-    },
-    {
-      id: "10",
-      value: "oschina",
-      label: "oschina",
-      isShow: true
-    },
-    {
-      id: "11",
-      value: "segmentfault",
-      label: "思否",
-      isShow: true
-    },
-    {
-      id: "12",
-      value: "custom",
-      label: "自定义",
-      isShow: true
-    },
-    {
-      id: "13",
-      value: "app",
-      label: "app",
-      isShow: true
+  const csdnRef = useRef<any>()
+  const zhihuRef = useRef<any>()
+  const baiduRef = useRef<any>()
+  const juejinRef = useRef<any>()
+  const oschinaRef = useRef<any>()
+  const jianshuRef = useRef<any>()
+  const jb51Ref = useRef<any>()
+  const cnblogsRef = useRef<any>()
+  const cto51Ref = useRef<any>()
+  const phpRef = useRef<any>()
+  const segmentfaultRef = useRef<any>()
+  const weixinRef = useRef<any>()
+  const customRef = useRef<any>()
+  const appRef = useRef<any>()
+
+  function handleReset() {
+    if (confirm("确认重置配置？")) {
+      csdnRef.current && csdnRef.current.handleReset()
+      zhihuRef.current && zhihuRef.current.handleReset()
+      baiduRef.current && baiduRef.current.handleReset()
+      jianshuRef.current && jianshuRef.current.handleReset()
+      jb51Ref.current && jb51Ref.current.handleReset()
+      cnblogsRef.current && cnblogsRef.current.handleReset()
+      cto51Ref.current && cto51Ref.current.handleReset()
+      phpRef.current && phpRef.current.handleReset()
+      appRef.current && appRef.current.handleReset()
     }
-  ]
+  }
 
   return (
     <ThemeProvider>
@@ -98,14 +61,31 @@ export default function IndexOptions() {
           <p className="desc">{i18n("popupDescription")}</p>
         </div>
         <div className="App-body">
-          {items.map((item, index) => (
-            <SortableItem key={item.id} index={index} item={item} />
-          ))}
+          <Csdn forwardRef={csdnRef} />
+          <Zhihu forwardRef={zhihuRef} />
+          <Baidu forwardRef={baiduRef} />
+          <Jianshu forwardRef={jianshuRef} />
+          <Jb51 forwardRef={jb51Ref} />
+          <Cnblogs forwardRef={cnblogsRef} />
+          <Cto51 forwardRef={cto51Ref} />
+          <Juejin />
+          <Php forwardRef={phpRef} />
+          <Oschina />
+          <Segmentfault />
+          <Weixin />
+          <Medium />
+          <Custom />
+          <Config forwardRef={appRef} />
         </div>
         <div className="App-link">
           <div className="item">
             {i18n("version")}：{chrome.runtime.getManifest().version}
           </div>
+          <div className="item">
+            <button className="reset" onClick={handleReset}>
+              {i18n("reset")}
+            </button>
+          </div>
           <div className="item">
             <a
               className="btn"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {