优化options页header，新增外部链接

scriptscat · Jun 1, 2023 · 951833e · 951833e
1 parent 81e46b1
commit 951833e
Showing 1 changed file with 85 additions and 18 deletions.
diff --git a/src/pages/components/layout/MainLayout.tsx b/src/pages/components/layout/MainLayout.tsx
@@ -22,7 +22,13 @@ import {
 } from "@arco-design/web-react/icon";
 import { editor } from "monaco-editor";
 import React, { ReactNode, useRef, useState } from "react";
-import { RiFileCodeLine, RiTerminalBoxLine, RiTimerLine } from "react-icons/ri";
+import {
+  RiFileCodeLine,
+  RiTerminalBoxLine,
+  RiTimerLine,
+  RiLinkM,
+  RiPlayListAddLine,
+} from "react-icons/ri";
 import "./index.css";
 
 export function switchLight(mode: string) {
@@ -99,12 +105,10 @@ const MainLayout: React.FC<{
           {pageName === "options" && (
             <Dropdown
               droplist={
-                <Menu>
+                <Menu style={{ maxHeight: "100%", width: "calc(100% + 10px)" }}>
                   <Menu.Item key="/script/editor">
                     <a href="#/script/editor">
-                      <Space>
-                        <RiFileCodeLine /> 添加普通脚本
-                      </Space>
+                      <RiFileCodeLine /> 添加普通脚本
                     </a>
                   </Menu.Item>
                   <Menu.Item key="background">
@@ -137,7 +141,82 @@ const MainLayout: React.FC<{
                 }}
                 className="!text-size-sm"
               >
-                新建脚本 <IconDown />
+                <RiPlayListAddLine /> 新建脚本 <IconDown />
+              </Button>
+            </Dropdown>
+          )}
+          {pageName === "options" && (
+            <Dropdown
+              droplist={
+                // 取消最大高度限制防止内容过多出现滚动条 / 增加10px宽度提升美观  下同
+                <Menu style={{ maxHeight: "100%", width: "calc(100% + 10px)" }}>
+                  <Menu.Item key="scriptcat/docs/use/">
+                    <a
+                      href="https://docs.scriptcat.org/docs/use/"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <RiFileCodeLine /> 使用指南
+                    </a>
+                  </Menu.Item>
+                  <Menu.Item key="scriptcat/docs/dev/">
+                    <a
+                      href="https://docs.scriptcat.org/docs/dev/"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <RiFileCodeLine /> API文档
+                    </a>
+                  </Menu.Item>
+                  <Menu.Item key="scriptcat/docs/learn/">
+                    <a
+                      href="https://learn.scriptcat.org/docs/%E7%AE%80%E4%BB%8B/"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <RiFileCodeLine /> 开发指南
+                    </a>
+                  </Menu.Item>
+                  <Menu.Item key="scriptcat/userscript">
+                    <a
+                      href="https://scriptcat.org/search"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <IconLink /> 脚本站
+                    </a>
+                  </Menu.Item>
+                  <Menu.Item key="tampermonkey/bbs">
+                    <a
+                      href="https://bbs.tampermonkey.net.cn/"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <IconLink /> 社区论坛
+                    </a>
+                  </Menu.Item>
+                  <Menu.Item key="GitHub">
+                    <a
+                      href="https://github.com/scriptscat/scriptcat"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <IconGithub /> GitHub
+                    </a>
+                  </Menu.Item>
+                </Menu>
+              }
+              position="bl"
+            >
+              <Button
+                type="text"
+                size="small"
+                style={{
+                  color: "var(--color-text-1)",
+                }}
+                className="!text-size-sm"
+              >
+                <RiLinkM /> 外部链接 <IconDown />
               </Button>
             </Dropdown>
           )}
@@ -180,18 +259,6 @@ const MainLayout: React.FC<{
               className="!text-size-lg"
             />
           </Dropdown>
-          <Button
-            type="text"
-            size="small"
-            icon={<IconGithub />}
-            iconOnly
-            style={{
-              color: "var(--color-text-1)",
-            }}
-            className="!text-size-lg"
-            href="https://github.com/scriptscat/scriptcat"
-            target="_blank"
-          />
         </Space>
       </Layout.Header>
       <Layout