feat:Added functionality to retrieve and save GitHub token (#812)

src/api/githubApi.ts

@@ -0,0 +1,35 @@
+// src/api/githubApi.ts
+let githubToken = '';
+
+export const saveToken = (token: string) => {
+  githubToken = token;
+  localStorage.setItem('github_token', token); // 保存 token 到 localStorage
+};
+
+export const getToken = () => {
+  if (!githubToken) {
+    githubToken = localStorage.getItem('github_token') || '';
+  }
+  return githubToken;
+};
+
+export const githubRequest = async (endpoint: string, options: RequestInit = {}) => {
+  const token = getToken();
+  if (!token) {
+    throw new Error('GitHub Token 未设置');
+  }
+
+  const response = await fetch(`https://api.github.com${endpoint}`, {
+    ...options,
+    headers: {
+      ...options.headers,
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`GitHub 请求失败: ${response.statusText}`);
+  }
+
+  return response.json();
+};

src/pages/Options/GitHubToken.tsx

@@ -0,0 +1,97 @@
+// src/pages/Options/GitHubToken.tsx
+import React, { useState, useEffect } from 'react';
+import TooltipTrigger from '../../components/TooltipTrigger';
+import { saveToken, getToken, githubRequest } from '../../api/githubApi'; // 引入保存和获取 token 的方法
+
+const GitHubToken = () => {
+  const [token, setToken] = useState('');
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  useEffect(() => {
+    const storedToken = getToken();
+    if (storedToken) {
+      setToken(storedToken);
+    }
+  }, []);
+
+  const handleSave = () => {
+    if (!token) {
+      console.error('Token 不能为空');
+      return;
+    }
+
+    saveToken(token); // 保存 token
+    alert('Token 已保存'); // 提示用户 token 已保存
+  };
+
+  const handleTestToken = async () => {
+    try {
+      const userData = await githubRequest('/user');
+      alert(`Token 有效，用户名: ${userData.login}`);
+    } catch (error) {
+      console.error('Token 测试失败:', error);
+      alert('Token 无效或请求失败');
+    }
+  };
+
+  return (
+    <div className="github-token-options Box">
+      <div className="Box-header">
+        <h2 className="Box-title">GitHub Token 配置</h2>
+        <TooltipTrigger content="在此输入您的 GitHub Token 以便进行身份验证。" />
+      </div>
+      <p>提供 GitHub Token 可以确保 HyperCRX 安全、有效地访问和操作用户的 GitHub 数据并进行个性化分析。</p>
+      <div className="collapsible-section">
+        <div
+          className="collapsible-header"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+        >
+          <p>{'如何生成 GitHub Token？'}</p>
+          <span style={{ marginLeft: '5px' }}>{isCollapsed ? '▶' : '▼'}</span>
+        </div>
+        {!isCollapsed && (
+          <div className="instructions Box-body">
+            <ul>
+              <li>
+                1. 登录 GitHub 并进入 <code>Settings</code>。
+              </li>
+              <li>
+                2. 选择 <code>Developer settings</code>。
+              </li>
+              <li>
+                3. 选择 <code>Personal access tokens</code>，点击 <code>Fine-grained tokens</code>，再点击{' '}
+                <code>Generate a personal access token</code>。
+              </li>
+              <li>
+                4. 设置 token 细节：
+                <ul>
+                  <li>
+                    <strong>Note</strong>：描述性名称，如 "HyperCrx Token"。
+                  </li>
+                  <li>
+                    <strong>Expiration</strong>：选择有效期。
+                  </li>
+                  <li>
+                    <strong>Scopes</strong>：选择权限范围，如 <code>repo</code> 和 <code>workflow</code>。
+                  </li>
+                </ul>
+              </li>
+              <li>
+                5. 点击 <code>Generate token</code> 按钮。
+              </li>
+              <li>6. 复制生成的 token 并粘贴到下面的输入框中。</li>
+            </ul>
+          </div>
+        )}
+      </div>
+      <input type="text" value={token} onChange={(e) => setToken(e.target.value)} placeholder="GitHub Token" />
+      <button onClick={handleSave}>保存</button>
+      <button onClick={handleTestToken} style={{ marginLeft: '10px' }}>
+        测试 Token
+      </button>
+    </div>
+  );
+};
+
+export default GitHubToken;

src/pages/Options/Options.css

@@ -1,3 +1,4 @@
+/* src/pages/Options/Options.css */
 .container {
   width: 98vw;
   min-height: calc(100vh - 100px);
@@ -56,3 +57,59 @@ li {
 a {
   color: blue;
 }
+
+.github-token-options {
+  width: 75vw;
+  min-width: 350px;
+  max-width: 600px;
+  background-color: white;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  margin-top: 20px;
+}
+
+.github-token-options .Box-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 25px;
+  margin: -1px -1px 0;
+  background-color: #242a2e;
+  color: white;
+  border: 1px solid #e1e4e8;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.github-token-options .Box-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.github-token-options p {
+  padding: 0 25px;
+}
+
+.github-token-options input {
+  width: calc(100% - 50px);
+  padding: 8px;
+  margin: 10px 25px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.github-token-options button {
+  padding: 8px 16px;
+  margin: 0 25px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.github-token-options button:hover {
+  background-color: #0056b3;
+}

src/pages/Options/Options.tsx

@@ -1,3 +1,4 @@
+// src/pages/Options/index.tsx
 import React, { useState, useEffect } from 'react';
 import { Checkbox, Radio, Space, Row, Col } from 'antd';
 import { importedFeatures } from '../../../README.md';
@@ -7,6 +8,8 @@ import TooltipTrigger from '../../components/TooltipTrigger';
 import './Options.css';
 import { useTranslation } from 'react-i18next';
 import '../../helpers/i18n';
+import GitHubToken from './GitHubToken'; // 引入 GitHubToken 组件
+
 const stacksStyleOptions = {
   headerStack: {
     paddingBottom: '10px',
@@ -146,10 +149,21 @@ const Options = (): JSX.Element => {
               </div>
             </div>
           </Col>
+          <Col
+            span={24}
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <GitHubToken /> {/* 添加 GitHubToken 组件 */}
+          </Col>
         </Row>
       </Space>
     </div>
   );
 };
 
 export default Options;
+