增加支持页面

dev-wan · Aug 26, 2024 · 48993c3 · 48993c3
1 parent f0ab699
commit 48993c3
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -19,9 +19,9 @@ https://github.com/027xiguapi/code-box
    - [Edge网上应用商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home?hl=zh-CN)
 2. 搜索：`codebox`
 
-![1723513894421.jpg](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/1723513894421.jpg)
-![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/img.png)
-
+![1723513894421.jpg](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1723513894421.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/img.png)
+![1724640161752](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1724640161752.jpg)
 
 ### 安装方式二：直接安装
 

diff --git a/options/index.tsx b/options/index.tsx
@@ -170,7 +170,7 @@ export default function IndexOptions() {
           <div>
             <a
               className="btn"
-              href="https://github.com/027xiguapi/code-box"
+              href="/tabs/feed.html"
               target="_blank"
               rel="noreferrer">
               {chrome.i18n.getMessage("support")}👍

diff --git a/package.json b/package.json
@@ -41,7 +41,10 @@
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
+    "postcss": "^8.2.1",
+    "postcss-modules": "^4.3.0",
     "prettier": "3.2.4",
+    "sass": "^1.77.8",
     "sharp": "^0.33.4",
     "typescript": "5.3.3"
   },

diff --git a/popup/index.tsx b/popup/index.tsx
@@ -36,7 +36,7 @@ export default function IndexPopup() {
           <div>
             <a
               className="btn"
-              href="https://github.com/027xiguapi/code-box"
+              href="/tabs/feed.html"
               target="_blank"
               rel="noreferrer">
               {chrome.i18n.getMessage("support")}👍

diff --git a/public/1723513894421.jpg → public/webstore/1723513894421.jpg b/public/1723513894421.jpg → public/webstore/1723513894421.jpg
diff --git a/public/webstore/1724640034462.jpg b/public/webstore/1724640034462.jpg
diff --git a/public/webstore/1724640161752.jpg b/public/webstore/1724640161752.jpg
diff --git a/public/img.png → public/webstore/img.png b/public/img.png → public/webstore/img.png
diff --git a/public/wx/qrcode_wx.jpg b/public/wx/qrcode_wx.jpg
diff --git a/public/wx/wx_logo.jpg b/public/wx/wx_logo.jpg
diff --git a/tabs/feed.html b/tabs/feed.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>codexbox-支持</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body></body>
+</html>
diff --git a/tabs/feed.module.scss b/tabs/feed.module.scss
@@ -0,0 +1,17 @@
+.feed {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    :global {
+        .item {
+            text-align: center;
+            .item-img {
+                width: 80%;
+            }
+            .desc {
+                font-size: 16px;
+                display: block;
+            }
+        }
+    }
+}
diff --git a/tabs/feed.tsx b/tabs/feed.tsx
@@ -0,0 +1,53 @@
+import chromeUrl from "raw:~/public/webstore/1723513894421.jpg"
+import githubUrl from "raw:~/public/webstore/1724640034462.jpg"
+import edgeUrl from "raw:~/public/webstore/1724640161752.jpg"
+import firefoxUrl from "raw:~/public/webstore/img.png"
+import qrcodeUrl from "raw:~/public/wx/qrcode_wx.jpg"
+
+import styles from "./feed.module.scss"
+
+export default function FeedPage() {
+  return (
+    <div className={styles.feed}>
+      <div className="item">
+        <h1>微信公众号</h1>
+        <img src={qrcodeUrl} alt="微信公众号" />
+      </div>
+      <div className="item">
+        <h1>github</h1>
+        <a
+          className="desc"
+          href="https://github.com/027xiguapi/code-box"
+          target="_blank">
+          <div className="desc">
+            网站(https://github.com/027xiguapi/code-box)
+          </div>
+          <img src={githubUrl} alt="github" />
+        </a>
+      </div>
+      <div className="item">
+        <h1>应用商店</h1>
+        <a
+          href="https://chrome.google.com/webstore/detail/acnnhjllgegbndgknlliobjlekgilbdf"
+          target="_blank">
+          <div className="desc">Chrome</div>
+          <img className="item-img" src={chromeUrl} alt="Chrome" />
+        </a>
+        <a
+          className="desc"
+          href="https://addons.mozilla.org/zh-CN/firefox/addon/code-box/"
+          target="_blank">
+          <div className="desc">Firefox</div>
+          <img className="item-img" src={firefoxUrl} alt="Firefox" />
+        </a>
+        <a
+          className="desc"
+          href="https://microsoftedge.microsoft.com/addons/detail/code-box/cfpdbfmncaampihkmejogihjkenkonbn"
+          target="_blank">
+          <div className="desc">Edge</div>
+          <img className="item-img" src={edgeUrl} alt="Edge" />
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/tabs/history.css b/tabs/history.css
diff --git a/tabs/history.module.scss b/tabs/history.module.scss
@@ -0,0 +1,14 @@
+.history {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    :global {
+        .content {
+            width: 1000px;
+            margin: 0 auto;
+            .keyword-lighten {
+                background-color: gold;
+            }
+        }
+    }
+}
diff --git a/tabs/history.tsx b/tabs/history.tsx
@@ -12,12 +12,12 @@ import {
 import dayjs from "dayjs"
 import React, { useEffect, useState } from "react"
 
-import "./history.css"
-
 import { useStorage } from "@plasmohq/storage/hook"
 
 import { ThemeProvider } from "~theme"
 
+import styles from "./history.module.scss"
+
 const { Content } = Layout
 
 interface DataType {
@@ -185,12 +185,7 @@ export default function HistoryPage() {
 
   return (
     <ThemeProvider>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          padding: 16
-        }}>
+      <div className={styles.history}>
         <h2>历史列表</h2>
         {/*<div>*/}
         {/*  <a key="list-delete-all" onClick={handleDeleteAll}>*/}