✨ feat(options): 优化选项项设计

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;

src/pages/options/Token/style.less

@@ -0,0 +1,5 @@
+@import '~theme/index';
+
+.container {
+  //display: flex;
+}

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>
   );
 };

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;
+}

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);