feat: add official preset orange theme and disabled API input

- Add Anthropic orange theme styling for official preset buttons
- Auto-disable API Key input field when official preset is selected
- Add isOfficial field for precise official preset identification
- Enhance UX: official login requires no manual API Key input

src/components/AddProviderModal.css

@@ -133,6 +133,18 @@
   color: white;
 }
 
+/* 官方按钮橙色主题（Anthropic 风格） */
+.preset-btn.official {
+  border: 1px solid #d97706;
+  color: #d97706;
+}
+
+.preset-btn.official:hover,
+.preset-btn.official.selected {
+  background: #d97706;
+  color: white;
+}
+
 .form-group {
   margin-bottom: 1.25rem;
 }

src/components/ProviderForm.tsx

@@ -170,6 +170,10 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   const showApiKey =
     selectedPreset !== null || hasApiKeyField(formData.settingsConfig);
 
+  // 判断当前选中的预设是否是官方
+  const isOfficialPreset = selectedPreset !== null && 
+    providerPresets[selectedPreset]?.isOfficial === true;
+
   // 初始时从配置中同步 API Key（编辑模式）
   useEffect(() => {
     if (initialData) {
@@ -225,18 +229,20 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
               <div className="presets">
                 <label>一键导入（只需要填写 key）</label>
                 <div className="preset-buttons">
-                  {providerPresets.map((preset, index) => (
+                  {providerPresets.map((preset, index) => {
-                    <button
+                    return (
-                      key={index}
+                      <button
-                      type="button"
+                        key={index}
-                      className={`preset-btn ${
+                        type="button"
-                        selectedPreset === index ? "selected" : ""
+                        className={`preset-btn ${
-                      }`}
+                          selectedPreset === index ? "selected" : ""
-                      onClick={() => applyPreset(preset, index)}
+                        } ${preset.isOfficial ? "official" : ""}`}
-                    >
+                        onClick={() => applyPreset(preset, index)}
-                      {preset.name}
+                      >
-                    </button>
+                        {preset.name}
-                  ))}
+                      </button>
+                    );
+                  })}
                 </div>
               </div>
             )}
@@ -264,8 +270,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 id="apiKey"
                 value={apiKey}
                 onChange={(e) => handleApiKeyChange(e.target.value)}
-                placeholder="只需要填这里，下方配置会自动填充"
+                placeholder={isOfficialPreset 
+                  ? "官方登录无需填写 API Key，直接保存即可"
+                  : "只需要填这里，下方配置会自动填充"
+                }
+                disabled={isOfficialPreset}
                 autoComplete="off"
+                style={isOfficialPreset ? { 
+                  backgroundColor: '#f5f5f5', 
+                  cursor: 'not-allowed',
+                  color: '#999'
+                } : {}}
               />
             </div>
 

src/config/providerPresets.ts

@@ -5,9 +5,19 @@ export interface ProviderPreset {
   name: string;
   websiteUrl: string;
   settingsConfig: object;
+  isOfficial?: boolean; // 标识是否为官方预设
 }
 
 export const providerPresets: ProviderPreset[] = [
+  {
+    name: "Claude官方登录",
+    websiteUrl: "https://www.anthropic.com/claude-code",
+    settingsConfig: {
+      env: {
+      },
+    },
+    isOfficial: true, // 明确标识为官方预设
+  },
   {
     name: "DeepSeek v3.1",
     websiteUrl: "https://platform.deepseek.com",