增加 AI 总结文章

component/options/config.tsx

@@ -1,11 +1,12 @@
-import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
+import { BookOutlined, DownloadOutlined, StarTwoTone } from "@ant-design/icons"
 import { useImperativeHandle } from "react"
 
-import { sendToContentScript } from "@plasmohq/messaging"
+import { sendToBackground, sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import DownloadImages from "~component/items/downloadImages"
 import { i18n } from "~tools"
+import { getSummary } from "~utils/coze"
 
 export default function Config({ forwardRef }) {
   const [copyCode, setCopyCode] = useStorage("config-copyCode", (v) =>
@@ -21,6 +22,18 @@ export default function Config({ forwardRef }) {
     })
   }
 
+  function getSummary() {
+    sendToContentScript({
+      name: "app-get-summary"
+    })
+    sendToBackground({
+      name: "sidepanel",
+      body: {
+        active: true
+      }
+    })
+  }
+
   function handleReset() {
     setCopyCode(true)
     setCloseLog(true)
@@ -65,6 +78,13 @@ export default function Config({ forwardRef }) {
         </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
+      <div className="item download" onClick={getSummary}>
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          总结文章
+        </span>
+        <BookOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
+      </div>
     </fieldset>
   )
 }

contents/custom.tsx

@@ -24,6 +24,7 @@ import { useStorage } from "@plasmohq/storage/hook"
 import ValidateContent from "~component/contents/validateContent"
 import { ThemeProvider } from "~theme"
 import { addCss, saveHtml, saveMarkdown, scrollToTop, setIcon } from "~tools"
+import { getSummary } from "~utils/coze"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { downloadAllImagesAsZip } from "~utils/downloadAllImg"
 import { savePdf } from "~utils/downloadPdf"
@@ -55,6 +56,7 @@ let instance = null
 export default function CustomOverlay() {
   const [cssCode, runCss] = useCssCodeHook("custom")
   const [content, setContent] = useContent()
+  const [summary, setSummary] = useStorage("app-summary", "")
   const [validTime, setValidTime] = useStorage("app-validTime", "1730390400")
   const [isCurrentDom, setIsCurrentDom] = useState<boolean>(false)
   const [rect, setRect] = useState<any>(() => {
@@ -89,6 +91,14 @@ export default function CustomOverlay() {
     if (req.name == "app-downloadImages") {
       await downloadImages(req.body?.onProgress)
     }
+    if (req.name == "app-get-summary") {
+      setSummary("")
+      const res = await getSummary(location.href)
+      if (res.code == 0) {
+        const result = JSON.parse(res.data)
+        setSummary(result)
+      }
+    }
     if (req.name == "app-full-page-screenshot") {
       if (confirm("确认下载？")) {
         const { scrollHeight, clientHeight } = document.documentElement

package.json

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

sidepanel/index.module.scss

@@ -16,6 +16,15 @@
         .valid {
             color: red;
         }
+        .summary {
+            .title {
+                font-size: 16px;
+                margin: 10px 0;
+            }
+            .content {
+                font-size: 14px;
+            }
+        }
         .contentTitle {
             margin: 15px 0 10px 0;
         }

sidepanel/index.tsx

@@ -2,24 +2,22 @@ import { ThemeProvider } from "~theme"
 
 import "~index.css"
 
-import {
-  DownloadOutlined,
-  KeyOutlined,
-  PushpinOutlined
-} from "@ant-design/icons"
-import dayjs from "dayjs"
-import { useRef, useState } from "react"
+import { DownloadOutlined, PushpinOutlined } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import ValidateContent from "~component/contents/validateContent"
-import { verifyTOTP } from "~utils/2FA"
 
 import styles from "./index.module.scss"
 
 function IndexSidePanel() {
   const [codes] = useStorage("app-codes", [])
+  const [summary, setSummary] = useStorage("app-summary", {
+    title: "",
+    score: "",
+    content: ""
+  })
 
   function pinCode(index) {
     sendToContentScript({ name: `custom-scrollIntoViewCode`, body: { index } })
@@ -37,6 +35,16 @@ function IndexSidePanel() {
           <ValidateContent></ValidateContent>
         </div>
         <div className="content">
+          {summary.content ? (
+            <div className="summary">
+              <div className="title">
+                {summary.title}(评分：{summary.score})
+              </div>
+              <div className="content">{summary.content}</div>
+            </div>
+          ) : (
+            <></>
+          )}
           <h1 className="contentTitle">导航</h1>
           {codes.map((code, index) => (
             <div

utils/coze.ts

@@ -0,0 +1,27 @@
+const cozeUrl = process.env.PLASMO_PUBLIC_COZE_URL
+const token = process.env.PLASMO_PUBLIC_COZE_TOKEN
+const workflowId = process.env.PLASMO_PUBLIC_COZE_WORKFLOWID
+const appId = process.env.PLASMO_PUBLIC_COZE_APPID
+
+export async function getSummary(url: string) {
+  const data = {
+    workflow_id: workflowId,
+    app_id: appId,
+    parameters: {
+      url: url
+    }
+  }
+  try {
+    const res = await fetch(cozeUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(data)
+    }).then((response) => response.json()) // 解析返回的 JSON 数据
+    return res
+  } catch (error) {
+    console.error("Error:", error)
+  }
+}