From 6c551c3d46969ddfd410d2ea674cd249f8a706f5 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 26 Jan 2021 20:06:09 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat(options):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=80=89=E9=A1=B9=E9=A1=B9=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/options/App.less           |  9 -----
 src/pages/options/Token/index.tsx    | 33 +++++++++++++++++
 src/pages/options/Token/style.less   |  5 +++
 src/pages/options/index.tsx          | 53 +++++++++++++++++++++-------
 src/pages/options/style.less         | 24 +++++++++++++
 src/services/useYuqueTokenService.ts |  6 ++--
 6 files changed, 107 insertions(+), 23 deletions(-)
 delete mode 100644 src/pages/options/App.less
 create mode 100644 src/pages/options/Token/index.tsx
 create mode 100644 src/pages/options/Token/style.less
 create mode 100644 src/pages/options/style.less

diff --git a/src/pages/options/App.less b/src/pages/options/App.less
deleted file mode 100644
index e206c67..0000000
--- a/src/pages/options/App.less
+++ /dev/null
@@ -1,9 +0,0 @@
-
-.app {
-    width: 100vw;
-    height: 100vh;
-
-    .title {
-        text-align: center;
-    }
-}
diff --git a/src/pages/options/Token/index.tsx b/src/pages/options/Token/index.tsx
new file mode 100644
index 0000000..3484af7
--- /dev/null
+++ b/src/pages/options/Token/index.tsx
@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { Button, Input, Space } from 'antd';
+
+import { YuqueTokenService } from '@/services';
+
+import styles from './style.less';
+
+const Token = () => {
+  const { setYuqueToken, token, syncToCloudStorage } = useContext(
+    YuqueTokenService,
+  );
+
+  return (
+    <div className={styles.container}>
+      <Space direction={'vertical'} style={{ display: 'flex' }}>
+        语雀 Token:
+        <Input
+          placeholder={'token'}
+          value={token}
+          onChange={(e) => {
+            setYuqueToken(e.target.value);
+          }}
+          onPressEnter={syncToCloudStorage}
+        />
+        <Button type={'primary'} onClick={syncToCloudStorage}>
+          保存
+        </Button>
+      </Space>
+    </div>
+  );
+};
+
+export default Token;
diff --git a/src/pages/options/Token/style.less b/src/pages/options/Token/style.less
new file mode 100644
index 0000000..1bfb508
--- /dev/null
+++ b/src/pages/options/Token/style.less
@@ -0,0 +1,5 @@
+@import '~theme/index';
+
+.container {
+  //display: flex;
+}
diff --git a/src/pages/options/index.tsx b/src/pages/options/index.tsx
index 857fd20..9fa8652 100644
--- a/src/pages/options/index.tsx
+++ b/src/pages/options/index.tsx
@@ -1,23 +1,52 @@
 import React from 'react';
-import { Button, Input } from 'antd';
+import { Menu } from 'antd';
+import {
+  BulbOutlined,
+  FontColorsOutlined,
+  KeyOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+
 import { useYuqueTokenService, YuqueTokenService } from '@/services';
+import Token from './Token';
 
-import './App.less';
+import styles from './style.less';
 
 const App = () => {
   const yuqueTokenService = useYuqueTokenService();
-  const { setYuqueToken, token, syncToCloudStorage } = yuqueTokenService;
+
   return (
     <YuqueTokenService.Provider value={yuqueTokenService}>
-      语雀 Token:
-      <Input
-        placeholder={'token'}
-        value={token}
-        onChange={(e) => {
-          setYuqueToken(e.target.value);
-        }}
-      />
-      <Button onClick={syncToCloudStorage}>保存</Button>
+      <div className={styles.container}>
+        <h4>Power Yuque 配置面板</h4>
+        <div className={styles.card}>
+          <Menu
+            mode="inline"
+            className={styles.menu}
+            defaultSelectedKeys={['token']}
+          >
+            <Menu.Item key="token">
+              <KeyOutlined /> 语雀 Token
+            </Menu.Item>
+            <Menu.Item key="typographic">
+              <FontColorsOutlined />
+              排版配置
+            </Menu.Item>
+
+            <Menu.Item key="dark">
+              <BulbOutlined />
+              深色模式
+            </Menu.Item>
+            <Menu.Item key="12">
+              <SearchOutlined /> 搜索框
+            </Menu.Item>
+          </Menu>
+
+          <div className={styles.content}>
+            <Token />
+          </div>
+        </div>
+      </div>
     </YuqueTokenService.Provider>
   );
 };
diff --git a/src/pages/options/style.less b/src/pages/options/style.less
new file mode 100644
index 0000000..75e6540
--- /dev/null
+++ b/src/pages/options/style.less
@@ -0,0 +1,24 @@
+@import '~theme/index';
+
+.container {
+  height: 100vh;
+  padding: 24px;
+  background: @background-color-base;
+}
+
+.menu {
+  width: 200px;
+  min-height: 400px;
+  padding-top: 12px;
+}
+
+.card {
+  display: flex;
+  background: @white;
+  border-radius: 4px;
+}
+
+.content {
+  width: 100%;
+  padding: 24px;
+}
diff --git a/src/services/useYuqueTokenService.ts b/src/services/useYuqueTokenService.ts
index 045560e..f54d140 100644
--- a/src/services/useYuqueTokenService.ts
+++ b/src/services/useYuqueTokenService.ts
@@ -1,6 +1,7 @@
 import { useLocalStorageState } from 'ahooks';
 import { getServiceToken } from '@/utils';
 import { useCallback, useEffect } from 'react';
+import { message } from 'antd';
 
 /**
  *  Yuque Token
@@ -10,13 +11,14 @@ export const useYuqueTokenService = () => {
   const [token, setYuqueToken] = useLocalStorageState('yuque_token', '');
 
   const syncToCloudStorage = useCallback(() => {
-    chrome.storage.sync.set({ yuque_token: token }, () => {
+    chrome.storage?.sync.set({ yuque_token: token }, () => {
       chrome.storage.sync.get(console.log);
     });
+    message.success('保存成功');
   }, [token]);
 
   useEffect(() => {
-    chrome.storage.sync.get((data) => {
+    chrome.storage?.sync.get((data) => {
       console.log(data);
       if (data.yuque_token !== token) {
         setYuqueToken(data.yuque_token);