引入antd

.gitignore

@@ -36,3 +36,4 @@ dist/
 .idea
 .vscode
 pnpm-lock.yaml
+/example.env

options.tsx

@@ -12,10 +12,12 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable"
-import { useStorage } from "@plasmohq/storage/dist/hook"
 import React, { useState } from "react"
 
+import { useStorage } from "@plasmohq/storage/dist/hook"
+
 import SortableItem from "~component/sortableItem"
+import { ThemeProvider } from "~theme"
 
 import "./index.css"
 
@@ -25,49 +27,49 @@ export default function IndexOptions() {
       id: "1",
       value: "csdn",
       label: "csdn",
-      isShow: true,
+      isShow: true
     },
     {
       id: "2",
       value: "zhihu",
       label: "知乎",
-      isShow: true,
+      isShow: true
     },
     {
       id: "3",
       value: "jianshu",
       label: "简书",
-      isShow: true,
+      isShow: true
     },
     {
       id: "4",
       value: "jb51",
       label: "脚本之家",
-      isShow: true,
+      isShow: true
     },
     {
       id: "5",
       value: "cnblogs",
       label: "博客园",
-      isShow: true,
+      isShow: true
     },
     {
       id: "6",
       value: "51cto",
       label: "51CTO",
-      isShow: true,
+      isShow: true
     },
     {
       id: "7",
       value: "php",
       label: "php中文网",
-      isShow: true,
+      isShow: true
     },
     {
       id: "8",
       value: "custom",
       label: "自定义",
-      isShow: true,
+      isShow: true
     }
   ]
   const [items, setItems] = useStorage("app-items", itemsInit)
@@ -100,52 +102,77 @@ export default function IndexOptions() {
   }
 
   function handleReset() {
-    if (confirm('确认重置配置？')) {
+    if (confirm("确认重置配置？")) {
       setItems([...itemsInit])
     }
   }
 
+  console.log("version")
+
   return (
-    <div className="App options">
-      <div className="App-header">
-        <h2 className="title">CodeBox 🎉</h2>
-        <p className="desc">更方便操作网页代码</p>
-      </div>
-      <div className="App-body">
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd}>
-          <SortableContext items={items} strategy={verticalListSortingStrategy}>
-            {items.map((item, index) => (
-              <SortableItem key={item.id} index={index} item={item} onToggleShow={handleToggleShow} />
-            ))}
-          </SortableContext>
-        </DndContext>
-      </div>
-      <div className="App-link">
-        <div className="item">
-          <button className="reset" onClick={handleReset}>重置</button>
+    <ThemeProvider>
+      <div className="App options">
+        <div className="App-header">
+          <h2 className="title">CodeBox 🎉</h2>
+          <p className="desc">更方便操作网页代码</p>
         </div>
-        <div className="item">
-          <a
-            className="btn"
-            href="https://027xiguapi.github.io/code-box/privacy-policy.html"
-            target="_blank"
-            rel="noreferrer">
-            隐私政策📄
-          </a>
+        <div className="App-body">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}>
+            <SortableContext
+              items={items}
+              strategy={verticalListSortingStrategy}>
+              {items.map((item, index) => (
+                <SortableItem
+                  key={item.id}
+                  index={index}
+                  item={item}
+                  onToggleShow={handleToggleShow}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
         </div>
-        <div>
-          <a
-            className="btn"
-            href="https://github.com/027xiguapi/code-box"
-            target="_blank"
-            rel="noreferrer">
-            支持作者更新👍
-          </a>
+        <div className="App-link">
+          <div className="item">
+            版本：{chrome.runtime.getManifest().version}
+          </div>
+          <div className="item">
+            <button className="reset" onClick={handleReset}>
+              重置
+            </button>
+          </div>
+          <div className="item">
+            <a
+              className="btn"
+              href="/tabs/history.html"
+              target="_blank"
+              rel="noreferrer">
+              历史记录🕮
+            </a>
+          </div>
+          <div className="item">
+            <a
+              className="btn"
+              href="https://027xiguapi.github.io/code-box/privacy-policy.html"
+              target="_blank"
+              rel="noreferrer">
+              隐私政策📄
+            </a>
+          </div>
+          <div>
+            <a
+              className="btn"
+              href="https://github.com/027xiguapi/code-box"
+              target="_blank"
+              rel="noreferrer">
+              支持作者更新👍
+            </a>
+          </div>
         </div>
       </div>
-    </div>
+    </ThemeProvider>
   )
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "codebox-免登录一键复制代码(CSDN/知乎/脚本之家/博客园/51CTO博客)",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/51CTO博客/php中文等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
@@ -13,11 +13,14 @@
     "clean": "rimraf build"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.4.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@plasmohq/messaging": "^0.6.2",
     "@plasmohq/storage": "^1.11.0",
+    "antd": "^5.19.4",
+    "dayjs": "^1.11.12",
     "plasmo": "0.88.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -35,7 +38,7 @@
   "manifest": {
     "browser_specific_settings": {
       "gecko": {
-        "id": "458813868@qq.com"
+        "id": "$FIREFOX_EXT_ID"
       }
     },
     "host_permissions": [

popup.tsx

@@ -1,37 +1,50 @@
+import { ThemeProvider } from "~theme"
+
 import Content from "./component/content"
 
 import "./index.css"
 
 export default function IndexPopup() {
   return (
-    <div className="App popup">
-      <div className="App-header">
-        <h2 className="title">CodeBox 🎉</h2>
-        <p className="desc">更方便操作网页代码</p>
-      </div>
-      <div className="App-body">
-        <Content />
-      </div>
-      <div className="App-link">
-        <div className="item">
-          <a
-            className="btn"
-            href="/options.html"
-            target="_blank"
-            rel="noreferrer">
-            更多设置⚙️
-          </a>
+    <ThemeProvider>
+      <div className="App popup">
+        <div className="App-header">
+          <h2 className="title">CodeBox 🎉</h2>
+          <p className="desc">更方便操作网页代码</p>
         </div>
-        <div>
-          <a
-            className="btn"
-            href="https://github.com/027xiguapi/code-box"
-            target="_blank"
-            rel="noreferrer">
-            支持作者更新👍
-          </a>
+        <div className="App-body">
+          <Content />
+        </div>
+        <div className="App-link">
+          <div className="item">
+            <a
+              className="btn"
+              href="/tabs/history.html"
+              target="_blank"
+              rel="noreferrer">
+              历史记录🕮
+            </a>
+          </div>
+          <div className="item">
+            <a
+              className="btn"
+              href="/options.html"
+              target="_blank"
+              rel="noreferrer">
+              更多设置⚙️
+            </a>
+          </div>
+          <div>
+            <a
+              className="btn"
+              href="https://github.com/027xiguapi/code-box"
+              target="_blank"
+              rel="noreferrer">
+              支持作者更新👍
+            </a>
+          </div>
         </div>
       </div>
-    </div>
+    </ThemeProvider>
   )
 }

theme.tsx

@@ -0,0 +1,13 @@
+import ConfigProvider from "antd/es/config-provider"
+import type { ReactNode } from "react"
+
+export const ThemeProvider = ({ children = null as ReactNode }) => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: "#a1701d"
+      }
+    }}>
+    {children}
+  </ConfigProvider>
+)