From d26d70246030aa3e77fdad4dad4c6fe3b2fbc140 Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Sun, 17 Aug 2025 11:49:45 +0800
Subject: [PATCH 1/6] fix(OAuth): correct user info endpoint URL and format
 code

---
 content/Community/LinuxDoConnect.mdx | 36 ++++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/Community/LinuxDoConnect.mdx b/content/Community/LinuxDoConnect.mdx
index a393cda..4ffb5db 100644
--- a/content/Community/LinuxDoConnect.mdx
+++ b/content/Community/LinuxDoConnect.mdx
@@ -3,7 +3,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
- 
+
 # Linux DO Connect
 
 OAuth（Open Authorization）是一个开放的网络授权标准，目前最新版本为 OAuth 2.0。我们日常使用的第三方登录（如 Google 账号登录）就采用了该标准。OAuth 允许用户授权第三方应用访问存储在其他服务提供商（如 Google）上的信息，无需在不同平台上重复填写注册信息。用户授权后，平台可以直接访问用户的账户信息进行身份验证，而用户无需向第三方应用提供密码。
@@ -79,7 +79,7 @@ const CLIENT_SECRET = '你的Client Secret';
 const REDIRECT_URI = '你的回调地址';
 const AUTH_URL = 'https://connect.linux.do/oauth2/authorize';
 const TOKEN_URL = 'https://connect.linux.do/oauth2/token';
-const USER_INFO_URL = 'https://connect.linux.do/oauth2/userinfo';
+const USER_INFO_URL = 'https://connect.linux.do/api/user';
 
 // 第一步：生成授权链接
 function getAuthUrl() {
@@ -89,7 +89,7 @@ function getAuthUrl() {
     response_type: 'code',
     scope: 'user'
   });
-  
+
   return AUTH_URL + '?' + params.toString();
 }
 
@@ -103,7 +103,7 @@ async function getAccessToken(code) {
       redirect_uri: REDIRECT_URI,
       grant_type: 'authorization_code'
     });
-    
+
     return response.data;
   } catch (error) {
     console.error('获取访问令牌失败:', error.response ? error.response.data : error.message);
@@ -119,7 +119,7 @@ async function getUserInfo(accessToken) {
         Authorization: 'Bearer ' + accessToken
       }
     });
-    
+
     return response.data;
   } catch (error) {
     console.error('获取用户信息失败:', error.response ? error.response.data : error.message);
@@ -132,15 +132,15 @@ async function main() {
   // 1. 首先生成授权URL并让用户访问
   const authUrl = getAuthUrl();
   console.log('请访问此URL授权: ' + authUrl);
-  
+
   // 2. 用户授权后，从回调URL获取code参数
   const code = '用户授权后回调URL中的code参数';
-  
+
   try {
     // 3. 使用code获取访问令牌
     const tokenData = await getAccessToken(code);
     const accessToken = tokenData.access_token;
-    
+
     // 4. 使用访问令牌获取用户信息
     if (accessToken) {
       const userInfo = await getUserInfo(accessToken);
@@ -243,7 +243,7 @@ function getAuthUrl($clientId, $redirectUri) {
 // 使用授权码获取用户信息 (合并获取令牌和用户信息步骤)
 function getUserInfoWithCode($code, $clientId, $clientSecret, $redirectUri) {
     global $TOKEN_URL, $USER_INFO_URL;
-    
+
     // 1. 获取访问令牌
     $ch = curl_init($TOKEN_URL);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
@@ -255,25 +255,25 @@ function getUserInfoWithCode($code, $clientId, $clientSecret, $redirectUri) {
         'redirect_uri' => $redirectUri,
         'grant_type' => 'authorization_code'
     ]));
-    
+
     $tokenResponse = curl_exec($ch);
     curl_close($ch);
-    
+
     $tokenData = json_decode($tokenResponse, true);
     if (!isset($tokenData['access_token'])) {
         return ['error' => '获取访问令牌失败', 'details' => $tokenData];
     }
-    
+
     // 2. 获取用户信息
     $ch = curl_init($USER_INFO_URL);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
     curl_setopt($ch, CURLOPT_HTTPHEADER, [
         'Authorization: Bearer ' . $tokenData['access_token']
     ]);
-    
+
     $userResponse = curl_exec($ch);
     curl_close($ch);
-    
+
     return json_decode($userResponse, true);
 }
 
@@ -285,12 +285,12 @@ echo "<a href='$authUrl'>使用 Linux Do 登录</a>";
 // 2. 处理回调并获取用户信息
 if (isset($_GET['code'])) {
     $userInfo = getUserInfoWithCode(
-        $_GET['code'], 
-        $CLIENT_ID, 
-        $CLIENT_SECRET, 
+        $_GET['code'],
+        $CLIENT_ID,
+        $CLIENT_SECRET,
         $REDIRECT_URI
     );
-    
+
     if (isset($userInfo['error'])) {
         echo '错误: ' . $userInfo['error'];
     } else {

From bd70c04ecc2216652d2718c2c218c7ba1f57a97b Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Sun, 17 Aug 2025 11:55:22 +0800
Subject: [PATCH 2/6] fix(OAuth): correct request headers and body in
 getAccessToken

---
 content/Community/LinuxDoConnect.mdx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/content/Community/LinuxDoConnect.mdx b/content/Community/LinuxDoConnect.mdx
index 4ffb5db..7010efc 100644
--- a/content/Community/LinuxDoConnect.mdx
+++ b/content/Community/LinuxDoConnect.mdx
@@ -96,12 +96,20 @@ function getAuthUrl() {
 // 第二步：使用授权码获取访问令牌
 async function getAccessToken(code) {
   try {
-    const response = await axios.post(TOKEN_URL, {
+    const form = new URLSearchParams({
       client_id: CLIENT_ID,
       client_secret: CLIENT_SECRET,
       code: code,
       redirect_uri: REDIRECT_URI,
       grant_type: 'authorization_code'
+    }).toString();
+
+    const response = await axios.post(TOKEN_URL, form, {
+      // 提醒：需正确配置请求头，否则无法正常获取访问令牌
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Accept': 'application/json'
+      }
     });
 
     return response.data;

From 044db163df4d952f59bc6574371c4887e48758be Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Sun, 17 Aug 2025 12:41:09 +0800
Subject: [PATCH 3/6] fix(OAuth): improve comments and example flow

---
 content/Community/LinuxDoConnect.mdx | 56 +++++++++++++++++-----------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/content/Community/LinuxDoConnect.mdx b/content/Community/LinuxDoConnect.mdx
index 7010efc..e3da4e4 100644
--- a/content/Community/LinuxDoConnect.mdx
+++ b/content/Community/LinuxDoConnect.mdx
@@ -67,21 +67,22 @@ OAuth（Open Authorization）是一个开放的网络授权标准，目前最新
 
 <CodeTabs
   codes={{
-    JavaScript: `// 安装所需库
+    JavaScript: `// 安装第三方请求库（或使用原生的 Fetch API），本例中使用 axios
 // npm install axios
 
-// 使用 OAuth2 获取 Linux Do 用户信息
+// 通过 OAuth2 获取 Linux Do 用户信息的参考流程
 const axios = require('axios');
+const readline = require('readline');
 
-// 配置信息
-const CLIENT_ID = '你的Client ID';
-const CLIENT_SECRET = '你的Client Secret';
+// 配置信息（建议通过环境变量配置，避免使用硬编码）
+const CLIENT_ID = '你的 Client ID';
+const CLIENT_SECRET = '你的 Client Secret';
 const REDIRECT_URI = '你的回调地址';
 const AUTH_URL = 'https://connect.linux.do/oauth2/authorize';
 const TOKEN_URL = 'https://connect.linux.do/oauth2/token';
 const USER_INFO_URL = 'https://connect.linux.do/api/user';
 
-// 第一步：生成授权链接
+// 第一步：生成授权 URL
 function getAuthUrl() {
   const params = new URLSearchParams({
     client_id: CLIENT_ID,
@@ -90,10 +91,23 @@ function getAuthUrl() {
     scope: 'user'
   });
 
-  return AUTH_URL + '?' + params.toString();
+  return \`\${AUTH_URL}?\${params.toString()}\`;
+}
+
+// 第二步：获取 code 参数
+function getCode() {
+  return new Promise((resolve) => {
+    // 本例中使用终端输入来模拟流程，仅供本地测试
+    // 请在实际应用中替换为真实的处理逻辑
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    rl.question('从回调 URL 中提取出 code，粘贴到此处并按回车：', (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
 }
 
-// 第二步：使用授权码获取访问令牌
+// 第三步：使用 code 参数获取访问令牌
 async function getAccessToken(code) {
   try {
     const form = new URLSearchParams({
@@ -114,50 +128,50 @@ async function getAccessToken(code) {
 
     return response.data;
   } catch (error) {
-    console.error('获取访问令牌失败:', error.response ? error.response.data : error.message);
+    console.error(\`获取访问令牌失败：\${error.response ? JSON.stringify(error.response.data) : error.message}\`);
     throw error;
   }
 }
 
-// 第三步：使用访问令牌获取用户信息
+// 第四步：使用访问令牌获取用户信息
 async function getUserInfo(accessToken) {
   try {
     const response = await axios.get(USER_INFO_URL, {
       headers: {
-        Authorization: 'Bearer ' + accessToken
+        Authorization: \`Bearer \${accessToken}\`
       }
     });
 
     return response.data;
   } catch (error) {
-    console.error('获取用户信息失败:', error.response ? error.response.data : error.message);
+    console.error(\`获取用户信息失败：\${error.response ? JSON.stringify(error.response.data) : error.message}\`);
     throw error;
   }
 }
 
-// 使用示例
+// 主流程
 async function main() {
-  // 1. 首先生成授权URL并让用户访问
+  // 1. 生成授权 URL，前端引导用户访问授权页
   const authUrl = getAuthUrl();
-  console.log('请访问此URL授权: ' + authUrl);
+  console.log(\`请访问此 URL 授权：\${authUrl}\n\`);
 
-  // 2. 用户授权后，从回调URL获取code参数
-  const code = '用户授权后回调URL中的code参数';
+  // 2. 用户授权后，从回调 URL 获取 code 参数
+  const code = await getCode();
 
   try {
-    // 3. 使用code获取访问令牌
+    // 3. 使用 code 参数获取访问令牌
     const tokenData = await getAccessToken(code);
     const accessToken = tokenData.access_token;
 
     // 4. 使用访问令牌获取用户信息
     if (accessToken) {
       const userInfo = await getUserInfo(accessToken);
-      console.log(JSON.stringify(userInfo, null, 2));
+      console.log(\`\n获取用户信息成功：\${JSON.stringify(userInfo, null, 2)}\`);
     } else {
-      console.log('获取访问令牌失败:', tokenData);
+      console.log(\`\n获取访问令牌失败：\${JSON.stringify(tokenData)}\`);
     }
   } catch (error) {
-    console.error('发生错误:', error);
+    console.error('发生错误：', error);
   }
 }
 

From 4df2bebe4279a063adad6f5ff58dc5ff57851058 Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Sun, 17 Aug 2025 13:49:43 +0800
Subject: [PATCH 4/6] fix(OAuth): align changes from JavaScript example to
 Python

---
 content/Community/LinuxDoConnect.mdx | 118 +++++++++++++++++----------
 1 file changed, 73 insertions(+), 45 deletions(-)

diff --git a/content/Community/LinuxDoConnect.mdx b/content/Community/LinuxDoConnect.mdx
index e3da4e4..3a5625f 100644
--- a/content/Community/LinuxDoConnect.mdx
+++ b/content/Community/LinuxDoConnect.mdx
@@ -176,22 +176,22 @@ async function main() {
 }
 
 main();`,
-        Python: `# 安装所需库
-pip install requests
+        Python: `# 安装第三方请求库，本例中使用 requests
+# pip install requests
 
-# 使用 OAuth2 获取 Linux Do 用户信息
+# 通过 OAuth2 获取 Linux Do 用户信息的参考流程
 import requests
 import json
 
-# 配置信息
-CLIENT_ID = '你的Client ID'
-CLIENT_SECRET = '你的Client Secret'
+# 配置信息（建议通过环境变量配置，避免使用硬编码）
+CLIENT_ID = '你的 Client ID'
+CLIENT_SECRET = '你的 Client Secret'
 REDIRECT_URI = '你的回调地址'
 AUTH_URL = 'https://connect.linux.do/oauth2/authorize'
 TOKEN_URL = 'https://connect.linux.do/oauth2/token'
-USER_INFO_URL = 'https://connect.linux.do/oauth2/userinfo'
+USER_INFO_URL = 'https://connect.linux.do/api/user'
 
-# 第一步：生成授权链接
+# 第一步：生成授权 URL
 def get_auth_url():
     params = {
         'client_id': CLIENT_ID,
@@ -199,47 +199,75 @@ def get_auth_url():
         'response_type': 'code',
         'scope': 'user'
     }
-    auth_url = f'{AUTH_URL}?{'&'.join(f'{k}={v}' for k, v in params.items())}'
+    auth_url = f"{AUTH_URL}?{'&'.join(f'{k}={v}' for k, v in params.items())}"
     return auth_url
 
-# 第二步：使用授权码获取访问令牌
-def get_access_token(code):
-    data = {
-        'client_id': CLIENT_ID,
-        'client_secret': CLIENT_SECRET,
-        'code': code,
-        'redirect_uri': REDIRECT_URI,
-        'grant_type': 'authorization_code'
-    }
-    response = requests.post(TOKEN_URL, data=data)
-    return response.json()
+# 第二步：获取 code 参数
+def get_code():
+    # 本例中使用终端输入来模拟流程，仅供本地测试
+    # 请在实际应用中替换为真实的处理逻辑
+    return input('从回调 URL 中提取出 code，粘贴到此处并按回车：').strip()
 
-# 第三步：使用访问令牌获取用户信息
+# 第三步：使用 code 参数获取访问令牌
+def get_access_token(code):
+    try:
+        data = {
+            'client_id': CLIENT_ID,
+            'client_secret': CLIENT_SECRET,
+            'code': code,
+            'redirect_uri': REDIRECT_URI,
+            'grant_type': 'authorization_code'
+        }
+        # 提醒：需正确配置请求头，否则无法正常获取访问令牌
+        headers = {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Accept': 'application/json'
+        }
+        response = requests.post(TOKEN_URL, data=data, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"获取访问令牌失败：{e}")
+        return None
+
+# 第四步：使用访问令牌获取用户信息
 def get_user_info(access_token):
-    headers = {
-        'Authorization': f'Bearer {access_token}'
-    }
-    response = requests.get(USER_INFO_URL, headers=headers)
-    return response.json()
-
-# 使用示例
-# 1. 首先生成授权URL并让用户访问
-auth_url = get_auth_url()
-print(f'请访问此URL授权: {auth_url}')
-
-# 2. 用户授权后，从回调URL获取code参数
-code = '用户授权后回调URL中的code参数'
-
-# 3. 使用code获取访问令牌
-token_data = get_access_token(code)
-access_token = token_data.get('access_token')
-
-# 4. 使用访问令牌获取用户信息
-if access_token:
-    user_info = get_user_info(access_token)
-    print(json.dumps(user_info, indent=2))
-else:
-    print('获取访问令牌失败:', token_data)`,
+    try:
+        headers = {
+            'Authorization': f'Bearer {access_token}'
+        }
+        response = requests.get(USER_INFO_URL, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"获取用户信息失败：{e}")
+        return None
+
+# 主流程
+if __name__ == '__main__':
+    # 1. 生成授权 URL，前端引导用户访问授权页
+    auth_url = get_auth_url()
+    print(f'请访问此 URL 授权：{auth_url}\n')
+
+    # 2. 用户授权后，从回调 URL 获取 code 参数
+    code = get_code()
+
+    # 3. 使用 code 参数获取访问令牌
+    token_data = get_access_token(code)
+    if token_data:
+        access_token = token_data.get('access_token')
+
+        # 4. 使用访问令牌获取用户信息
+        if access_token:
+            user_info = get_user_info(access_token)
+            if user_info:
+                print(f"\n获取用户信息成功：{json.dumps(user_info, indent=2)}")
+            else:
+                print("\n获取用户信息失败")
+        else:
+            print(f"\n获取访问令牌失败：{json.dumps(token_data, indent=2)}")
+    else:
+        print("\n获取访问令牌失败")`,
 
     PHP: `// 使用 OAuth2 获取 Linux Do 用户信息
 

From b183db3b7786585393745b09f1ece695aea15166 Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Sun, 17 Aug 2025 13:51:31 +0800
Subject: [PATCH 5/6] fix(OAuth): align changes from JavaScript example to PHP

---
 content/Community/LinuxDoConnect.mdx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/content/Community/LinuxDoConnect.mdx b/content/Community/LinuxDoConnect.mdx
index 3a5625f..1ae00d8 100644
--- a/content/Community/LinuxDoConnect.mdx
+++ b/content/Community/LinuxDoConnect.mdx
@@ -269,17 +269,17 @@ if __name__ == '__main__':
     else:
         print("\n获取访问令牌失败")`,
 
-    PHP: `// 使用 OAuth2 获取 Linux Do 用户信息
+    PHP: `// 通过 OAuth2 获取 Linux Do 用户信息的参考流程
 
 // 配置信息
-$CLIENT_ID = '你的Client ID';
-$CLIENT_SECRET = '你的Client Secret';
+$CLIENT_ID = '你的 Client ID';
+$CLIENT_SECRET = '你的 Client Secret';
 $REDIRECT_URI = '你的回调地址';
 $AUTH_URL = 'https://connect.linux.do/oauth2/authorize';
 $TOKEN_URL = 'https://connect.linux.do/oauth2/token';
-$USER_INFO_URL = 'https://connect.linux.do/oauth2/userinfo';
+$USER_INFO_URL = 'https://connect.linux.do/api/user';
 
-// 生成授权链接
+// 生成授权 URL
 function getAuthUrl($clientId, $redirectUri) {
     global $AUTH_URL;
     return $AUTH_URL . '?' . http_build_query([
@@ -290,7 +290,7 @@ function getAuthUrl($clientId, $redirectUri) {
     ]);
 }
 
-// 使用授权码获取用户信息 (合并获取令牌和用户信息步骤)
+// 使用 code 参数获取用户信息（合并获取令牌和获取用户信息的步骤）
 function getUserInfoWithCode($code, $clientId, $clientSecret, $redirectUri) {
     global $TOKEN_URL, $USER_INFO_URL;
 
@@ -305,6 +305,10 @@ function getUserInfoWithCode($code, $clientId, $clientSecret, $redirectUri) {
         'redirect_uri' => $redirectUri,
         'grant_type' => 'authorization_code'
     ]));
+    curl_setopt($ch, CURLOPT_HTTPHEADER, [
+        'Content-Type: application/x-www-form-urlencoded',
+        'Accept: application/json'
+    ]);
 
     $tokenResponse = curl_exec($ch);
     curl_close($ch);
@@ -327,8 +331,8 @@ function getUserInfoWithCode($code, $clientId, $clientSecret, $redirectUri) {
     return json_decode($userResponse, true);
 }
 
-// 使用示例
-// 1. 生成授权链接
+// 主流程
+// 1. 生成授权 URL
 $authUrl = getAuthUrl($CLIENT_ID, $REDIRECT_URI);
 echo "<a href='$authUrl'>使用 Linux Do 登录</a>";
 

From 2e917cccf35a45e931db705e760a92324a4b2fb8 Mon Sep 17 00:00:00 2001
From: Gophlet <z@v1c0.com>
Date: Sun, 17 Aug 2025 19:54:17 +0800
Subject: [PATCH 6/6] fix(CodeTabs): refactor code structure and apply changes
 to related MDX docs

---
 .../animate-ui/components/code-tabs.tsx       | 84 +++++++------------
 content/AI/Fuclaude/Fuclaude.mdx              | 36 +++++---
 content/AI/OAIFree/AccessToken.mdx            | 26 ++++--
 content/AI/OAIFree/Chat2APIOAIFree.mdx        | 26 ++++--
 content/AI/OAIFree/NewOAIFree.mdx             | 44 +++++++---
 content/AI/OAIFree/ShareOAIFree.mdx           | 20 +++--
 content/AI/OAIFree/ShareToken.mdx             | 36 +++++---
 content/Community/LinuxDoConnect.mdx          | 27 ++++--
 content/Community/LinuxDoLottery.mdx          |  9 +-
 9 files changed, 191 insertions(+), 117 deletions(-)

diff --git a/components/animate-ui/components/code-tabs.tsx b/components/animate-ui/components/code-tabs.tsx
index 70f990b..0740d0f 100644
--- a/components/animate-ui/components/code-tabs.tsx
+++ b/components/animate-ui/components/code-tabs.tsx
@@ -4,19 +4,17 @@ import * as React from 'react';
 import { useTheme } from 'next-themes';
 
 import { cn } from '@/lib/utils';
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  TabsContents,
-  type TabsProps,
-} from '@/components/animate-ui/components/tabs';
+import { Tabs, TabsContent, TabsList, TabsTrigger, TabsContents, type TabsProps } from '@/components/animate-ui/components/tabs';
 import { CopyButton } from '@/components/animate-ui/buttons/copy';
 
-type CodeTabsProps = {
-  codes: Record<string, string>;
+type CodeItem = {
+  name: string;
   lang?: string;
+  code: string;
+};
+
+type CodeTabsProps = {
+  codes: CodeItem[];
   themes?: {
     light: string;
     dark: string;
@@ -27,10 +25,9 @@ type CodeTabsProps = {
 
 function CodeTabs({
   codes,
-  lang = 'bash',
   themes = {
     light: 'github-light',
-    dark: 'github-dark',
+    dark: 'github-dark'
   },
   className,
   defaultValue,
@@ -42,13 +39,8 @@ function CodeTabs({
 }: CodeTabsProps) {
   const { resolvedTheme } = useTheme();
 
-  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<
-    string,
-    string
-  > | null>(null);
-  const [selectedCode, setSelectedCode] = React.useState<string>(
-    value ?? defaultValue ?? Object.keys(codes)[0] ?? '',
-  );
+  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<string, string> | null>(null);
+  const [selectedCode, setSelectedCode] = React.useState<string>(value ?? defaultValue ?? codes[0]?.name ?? '');
 
   React.useEffect(() => {
     async function loadHighlightedCode() {
@@ -56,35 +48,37 @@ function CodeTabs({
         const { codeToHtml } = await import('shiki');
         const newHighlightedCodes: Record<string, string> = {};
 
-        for (const [command, val] of Object.entries(codes)) {
-          const highlighted = await codeToHtml(val, {
-            lang,
+        for (const codeItem of codes) {
+          const highlighted = await codeToHtml(codeItem.code, {
+            lang: codeItem.lang || codeItem.name.toLowerCase(),
             themes: {
               light: themes.light,
-              dark: themes.dark,
+              dark: themes.dark
             },
-            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
+            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light'
           });
 
-          newHighlightedCodes[command] = highlighted;
+          newHighlightedCodes[codeItem.name] = highlighted;
         }
 
         setHighlightedCodes(newHighlightedCodes);
       } catch (error) {
         console.error('Error highlighting codes', error);
-        setHighlightedCodes(codes);
+        // 降级处理：创建简单的文本映射
+        const fallbackCodes: Record<string, string> = {};
+        codes.forEach((item) => {
+          fallbackCodes[item.name] = item.code;
+        });
+        setHighlightedCodes(fallbackCodes);
       }
     }
     loadHighlightedCode();
-  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);
+  }, [resolvedTheme, themes.light, themes.dark, codes]);
 
   return (
     <Tabs
       data-slot="install-tabs"
-      className={cn(
-        'w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden',
-        className,
-      )}
+      className={cn('w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden', className)}
       {...props}
       value={selectedCode}
       onValueChange={(val) => {
@@ -100,39 +94,21 @@ function CodeTabs({
         <div className="flex gap-x-3 h-full">
           {highlightedCodes &&
             Object.keys(highlightedCodes).map((code) => (
-              <TabsTrigger
-                key={code}
-                value={code}
-                className="text-muted-foreground data-[state=active]:text-current px-0"
-              >
+              <TabsTrigger key={code} value={code} className="text-muted-foreground data-[state=active]:text-current px-0">
                 {code}
               </TabsTrigger>
             ))}
         </div>
 
         {copyButton && highlightedCodes && (
-          <CopyButton
-            content={codes[selectedCode]}
-            size="sm"
-            variant="ghost"
-            className="-me-2 bg-transparent hover:bg-black/5 dark:hover:bg-white/10"
-            onCopy={onCopy}
-          />
+          <CopyButton content={codes.find((item) => item.name === selectedCode)?.code || ''} size="sm" variant="ghost" className="-me-2 bg-transparent hover:bg-black/5 dark:hover:bg-white/10" onCopy={onCopy} />
         )}
       </TabsList>
       <TabsContents data-slot="install-tabs-contents">
         {highlightedCodes &&
           Object.entries(highlightedCodes).map(([code, val]) => (
-            <TabsContent
-              data-slot="install-tabs-content"
-              key={code}
-              className="w-full text-sm flex items-center p-4 overflow-auto"
-              value={code}
-            >
-              <div
-                className="[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px]"
-                dangerouslySetInnerHTML={{ __html: val }}
-              />
+            <TabsContent data-slot="install-tabs-content" key={code} className="w-full text-sm flex items-center p-4 overflow-auto" value={code}>
+              <div className="[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px]" dangerouslySetInnerHTML={{ __html: val }} />
             </TabsContent>
           ))}
       </TabsContents>
@@ -140,4 +116,4 @@ function CodeTabs({
   );
 }
 
-export { CodeTabs, type CodeTabsProps };
+export { CodeTabs, type CodeTabsProps, type CodeItem };
diff --git a/content/AI/Fuclaude/Fuclaude.mdx b/content/AI/Fuclaude/Fuclaude.mdx
index cf40233..b2075a7 100644
--- a/content/AI/Fuclaude/Fuclaude.mdx
+++ b/content/AI/Fuclaude/Fuclaude.mdx
@@ -44,14 +44,21 @@ import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
 <br></br>
 
 <CodeTabs
-  codes={{
-    Curl: `curl 'http://YOURDOMAIN/manage-api/auth/oauth_token' \\
+  codes={[
+    {
+      name: "Curl",
+      lang: "bash",
+      code: `curl 'http://YOURDOMAIN/manage-api/auth/oauth_token' \\
     -H 'Content-Type: application/json' \\
     -d '{
         "session_key": SESSION_KEY,
         "unique_name": UNIQUE_NAME
-    }'`,
-    Python: `import requests
+    }'`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `import requests
 
 domain = 'YOURDOMAIN'  # 替换为你的域名
 session_key = 'SESSION_KEY'  # 替换为你的 Session Token
@@ -65,8 +72,12 @@ response = requests.post(
         'unique_name': unique_name
     })
 
-login_url = response.json().get('login_url')`,
-    Javascript: `const domain = 'YOURDOMAIN';  // 替换为你的域名
+login_url = response.json().get('login_url')`
+    },
+    {
+      name: "Javascript",
+      lang: "javascript",
+      code: `const domain = 'YOURDOMAIN';  // 替换为你的域名
 const sessionKey = 'SESSION_KEY';  // 替换为你的 Session Token
 const uniqueName = 'UNIQUE_NAME';  // 替换为你的独一无二的名称
 
@@ -93,7 +104,8 @@ fetch(url, {
 .catch(error => {
     console.error('Error:', error);
 });`
-  }}
+    }
+  ]}
 />
 
 ## 部署使用
@@ -109,8 +121,11 @@ fetch(url, {
 <br></br>
 
 <CodeTabs
-  codes={{
-    'Docker-compose': `version: '3'
+  codes={[
+    {
+      name: "Docker-compose",
+      lang: "yaml",
+      code: `version: '3'
 services:
   fuclaude:
     image: pengzhile/fuclaude
@@ -130,5 +145,6 @@ services:
       - FUCLAUDE_SIGNUP_ENABLED=false  # 启用或禁用用户注册（true/false）
       - FUCLAUDE_SHOW_SESSION_KEY=false  # 显示或隐藏会话密钥（true/false）
     restart: unless-stopped`
-  }}
+    }
+  ]}
 />
\ No newline at end of file
diff --git a/content/AI/OAIFree/AccessToken.mdx b/content/AI/OAIFree/AccessToken.mdx
index c5dda45..c6e5755 100644
--- a/content/AI/OAIFree/AccessToken.mdx
+++ b/content/AI/OAIFree/AccessToken.mdx
@@ -42,18 +42,29 @@ import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
 <br></br>
 
 <CodeTabs
-  codes={{
-    Curl: `curl -X POST "https://token.oaifree.com/api/auth/refresh" \\
-     -d "refresh_token=YOUR_REFRESH_TOKEN"`,
-    Python: `import json
+  codes={[
+    {
+      name: "Curl",
+      lang: "bash",
+      code: `curl -X POST "https://token.oaifree.com/api/auth/refresh" \\
+     -d "refresh_token=YOUR_REFRESH_TOKEN"`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `import json
 import requests
 
 response = requests.post(
     'https://token.oaifree.com/api/auth/refresh',
     data={'refresh_token': YOUR_REFRESH_TOKEN}
 )
-access_token = response.json().get('access_token')`,
-    Javascript: `const refreshToken = 'YOUR_REFRESH_TOKEN';
+access_token = response.json().get('access_token')`
+    },
+    {
+      name: "Javascript",
+      lang: "javascript",
+      code: `const refreshToken = 'YOUR_REFRESH_TOKEN';
 
 fetch('https://token.oaifree.com/api/auth/refresh', {
     method: 'POST',
@@ -68,7 +79,8 @@ fetch('https://token.oaifree.com/api/auth/refresh', {
     console.log(accessToken);
 })
 .catch(error => console.error('Error:', error));`
-  }}
+    }
+  ]}
 />
 
 <br></br>
diff --git a/content/AI/OAIFree/Chat2APIOAIFree.mdx b/content/AI/OAIFree/Chat2APIOAIFree.mdx
index 4ef36c2..6754d6a 100644
--- a/content/AI/OAIFree/Chat2APIOAIFree.mdx
+++ b/content/AI/OAIFree/Chat2APIOAIFree.mdx
@@ -32,8 +32,11 @@ API 调用方式与 OpenAI 官方完全一致，只需将 base_url 修改为 OAI
 <br></br>
 
 <CodeTabs
-  codes={{
-    Curl: `curl https://api.oaifree.com/v1 \\
+  codes={[
+    {
+      name: "Curl",
+      lang: "bash",
+      code: `curl https://api.oaifree.com/v1 \\
       -H 'Content-Type: application/json' \\
       -H 'Authorization: Bearer <access token>' \\  # 替换为你的 ACCESS TOKEN
       -d '{
@@ -42,8 +45,12 @@ API 调用方式与 OpenAI 官方完全一致，只需将 base_url 修改为 OAI
           {"role": "system", "content": "You are a helpful assistant."},
           {"role": "user", "content": "What is a LLM?"}
         ]
-      }'`,
-    Python: `from openai import OpenAI
+      }'`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `from openai import OpenAI
 
 client = OpenAI(
     api_key='<access token>',  # 替换为你的 ACCESS TOKEN
@@ -56,8 +63,12 @@ response = client.chat.completions.create(
     {'role': 'system', 'content': 'You are a helpful assistant.'},
     {'role': 'user', 'content': 'What is a LLM?'}
   ]
-)`,
-    Javascript: `const response = await fetch('https://api.oaifree.com/v1', {
+)`
+    },
+    {
+      name: "Javascript",
+      lang: "javascript",
+      code: `const response = await fetch('https://api.oaifree.com/v1', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
@@ -71,5 +82,6 @@ response = client.chat.completions.create(
     ]
   })
 });`
-  }}
+    }
+  ]}
 />
diff --git a/content/AI/OAIFree/NewOAIFree.mdx b/content/AI/OAIFree/NewOAIFree.mdx
index 4787bb6..b2a6026 100644
--- a/content/AI/OAIFree/NewOAIFree.mdx
+++ b/content/AI/OAIFree/NewOAIFree.mdx
@@ -48,14 +48,21 @@ import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
 <br></br>
 
 <CodeTabs
-  codes={{
-    Curl: `curl 'https://YOURDOMAIN/api/auth/oauth_token' \\
+  codes={[
+    {
+      name: "Curl",
+      lang: "bash",
+      code: `curl 'https://YOURDOMAIN/api/auth/oauth_token' \\
     -H 'Origin: https://YOURDOMAIN' \\
     -H 'Content-Type: application/json' \\
     -d '{
         "share_token": SHARE_TOKEN
-    }'`,
-    Python: `import requests
+    }'`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `import requests
 
 domain = 'YOURDOMAIN' # 例如：new.oaifree.com
 share_token = 'SHARE_TOKEN' # 通过 Share Token 服务获取
@@ -70,8 +77,12 @@ data = {
 }
 
 response = requests.post(url, headers=headers, json=data)
-response.json().get('login_url')`,
-    Javascript: `const domain = 'YOURDOMAIN'; // 例如：new.oaifree.com
+response.json().get('login_url')`
+    },
+    {
+      name: "Javascript",
+      lang: "javascript",
+      code: `const domain = 'YOURDOMAIN'; // 例如：new.oaifree.com
 const shareToken = 'SHARE_TOKEN'; // 通过 Share Token 服务获取
 
 const url = \`https://\${domain}/api/auth/oauth_token\`;
@@ -96,7 +107,8 @@ fetch(url, {
 .catch(error => {
     // 处理错误
 });`
-  }}
+    }
+  ]}
 />
 
 ## 反代镜像服务
@@ -104,19 +116,27 @@ fetch(url, {
 <br></br>
 
 <CodeTabs
-  codes={{
-    'Cloudflare Worker': `export default {
+  codes={[
+    {
+      name: "Cloudflare Worker",
+      lang: "javascript",
+      code: `export default {
     async fetch(request, env) {
     const url = new URL(request.url);
     url.host = 'new.oaifree.com';
     return fetch(new Request(url, request))
   }
 }
-`,
-    'Nginx': `location / {
+`
+    },
+    {
+      name: "Nginx",
+      lang: "nginx",
+      code: `location / {
     proxy_pass https://new.oaifree.com;
     proxy_ssl_server_name on;
 }
 `
-  }}
+    }
+  ]}
 />
diff --git a/content/AI/OAIFree/ShareOAIFree.mdx b/content/AI/OAIFree/ShareOAIFree.mdx
index f5d9445..e6c174f 100644
--- a/content/AI/OAIFree/ShareOAIFree.mdx
+++ b/content/AI/OAIFree/ShareOAIFree.mdx
@@ -30,17 +30,24 @@ import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
 <br></br>
 
 <CodeTabs
-  codes={{
-    Curl: `curl -X PUT 'https://shared.oaifree.com/share/tokens' \\
+  codes={[
+    {
+      name: "Curl",
+      lang: "bash",
+      code: `curl -X PUT 'https://shared.oaifree.com/share/tokens' \\
     -H 'Content-Type: application/json' \\
     -d '{
         "tokens": [
             "fk-1",
-            "fk-2", 
+            "fk-2",
             "access token"
         ]
-    }'`,
-    Python: `import requests
+    }'`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `import requests
 
 url = 'https://shared.oaifree.com/share/tokens'
 headers = {
@@ -57,5 +64,6 @@ response = requests.put(url, headers=headers, json=data)
 
 print(response.status_code)
 print(response.json())`
-  }}
+    }
+  ]}
 />
diff --git a/content/AI/OAIFree/ShareToken.mdx b/content/AI/OAIFree/ShareToken.mdx
index 2813e48..07fd38a 100644
--- a/content/AI/OAIFree/ShareToken.mdx
+++ b/content/AI/OAIFree/ShareToken.mdx
@@ -40,8 +40,11 @@ Share Token 起源于始皇的旧版镜像 Pandora，它的作用是映射一个
 <br></br>
 
 <CodeTabs
-  codes={{
-    Curl: `curl -X POST "https://chat.oaifree.com/token/register" \\
+  codes={[
+    {
+      name: "Curl",
+      lang: "bash",
+      code: `curl -X POST "https://chat.oaifree.com/token/register" \\
      -H "Content-Type: application/x-www-form-urlencoded" \\
      -d "access_token=ACCESS_TOKEN" \\
      -d "unique_name=UNIQUE_NAME" \\
@@ -52,8 +55,12 @@ Share Token 起源于始皇的旧版镜像 Pandora，它的作用是映射一个
      -d "reset_limit=false" \\
      -d "show_conversations=true" \\
      -d "site_limit=" \\
-     -d "temporary_chat=true"`,
-    Python: `import json
+     -d "temporary_chat=true"`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `import json
 import requests
 
 data = {
@@ -70,8 +77,12 @@ data = {
 }
 
 response = requests.post('https://chat.oaifree.com/token/register', headers={'Content-Type': 'application/x-www-form-urlencoded'}, data=data)
-token_key = response.json().get('token_key')`,
-    Javascript: `const data = {
+token_key = response.json().get('token_key')`
+    },
+    {
+      name: "Javascript",
+      lang: "javascript",
+      code: `const data = {
     access_token: 'ACCESS_TOKEN',  // 用户的访问令牌
     unique_name: 'UNIQUE_NAME',  // 独一无二的共享令牌名称
     expire_in: 0,  // 共享令牌的过期秒数，为0取Access Token过期时间，负数吊销分享令牌
@@ -97,7 +108,8 @@ fetch('https://chat.oaifree.com/token/register', {
     console.log(token_key);
 })
 .catch(error => console.error('Error:', error));`
-  }}
+    }
+  ]}
 />
 
 - 返回字段
@@ -105,8 +117,11 @@ fetch('https://chat.oaifree.com/token/register', {
 <br></br>
 
 <CodeTabs
-  codes={{
-    json: `
+  codes={[
+    {
+      name: "json",
+      lang: "json",
+      code: `
 {
     'access_token': （字符串）共享令牌的访问令牌,
     'expire_at': （整型）共享令牌的过期时间，以Unix时间戳表示,
@@ -122,5 +137,6 @@ fetch('https://chat.oaifree.com/token/register', {
     'user_id': （字符串）用户的唯一标识符
 }
 `
-}}
+    }
+  ]}
 />
diff --git a/content/Community/LinuxDoConnect.mdx b/content/Community/LinuxDoConnect.mdx
index 1ae00d8..5bb3add 100644
--- a/content/Community/LinuxDoConnect.mdx
+++ b/content/Community/LinuxDoConnect.mdx
@@ -66,8 +66,11 @@ OAuth（Open Authorization）是一个开放的网络授权标准，目前最新
 <br></br>
 
 <CodeTabs
-  codes={{
-    JavaScript: `// 安装第三方请求库（或使用原生的 Fetch API），本例中使用 axios
+  codes={[
+    {
+      name: "JavaScript",
+      lang: "javascript",
+      code: `// 安装第三方请求库（或使用原生的 Fetch API），本例中使用 axios
 // npm install axios
 
 // 通过 OAuth2 获取 Linux Do 用户信息的参考流程
@@ -175,8 +178,12 @@ async function main() {
   }
 }
 
-main();`,
-        Python: `# 安装第三方请求库，本例中使用 requests
+main();`
+    },
+    {
+      name: "Python",
+      lang: "python",
+      code: `# 安装第三方请求库，本例中使用 requests
 # pip install requests
 
 # 通过 OAuth2 获取 Linux Do 用户信息的参考流程
@@ -267,9 +274,12 @@ if __name__ == '__main__':
         else:
             print(f"\n获取访问令牌失败：{json.dumps(token_data, indent=2)}")
     else:
-        print("\n获取访问令牌失败")`,
-
-    PHP: `// 通过 OAuth2 获取 Linux Do 用户信息的参考流程
+        print("\n获取访问令牌失败")`
+    },
+    {
+      name: "PHP",
+      lang: "php",
+      code: `// 通过 OAuth2 获取 Linux Do 用户信息的参考流程
 
 // 配置信息
 $CLIENT_ID = '你的 Client ID';
@@ -352,7 +362,8 @@ if (isset($_GET['code'])) {
         // 处理用户登录逻辑...
     }
 }`
-  }}
+    }
+  ]}
 />
 
 ## 使用说明
diff --git a/content/Community/LinuxDoLottery.mdx b/content/Community/LinuxDoLottery.mdx
index e9503ea..6fbbc53 100644
--- a/content/Community/LinuxDoLottery.mdx
+++ b/content/Community/LinuxDoLottery.mdx
@@ -94,8 +94,10 @@ import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
 <br></br>
 
 <CodeTabs
-  codes={{
-    Text: `抽奖主题：[描述抽奖主题]
+  codes={[
+    {
+      name: "Text",
+      code: `抽奖主题：[描述抽奖主题]
 
 **🏆 奖品详情：**
 
@@ -123,7 +125,8 @@ import { CodeTabs } from '@/components/animate-ui/components/code-tabs'
 所有规则及抽奖结果由活动发起人和论坛[管理团队](https://linux.do/about)最终解释。
 
 **期待您的积极参与，祝您好运！如有任何疑问，欢迎随时联系抽奖发起人。**`
-  }}
+    }
+  ]}
 />
 
 请注意，关于抽奖活动的所有规则及其执行，最终解释权归管理团队所有。我们保留随时修改或补充抽奖规则的权利，以应对任何突发情况或保证活动的公正性。任何规则的变动将及时公布。