tabby-ai-assistant 1.0.9 → 1.0.10

package/dist/services/core/toast.service.d.ts

@@ -0,0 +1,15 @@
+export interface ToastMessage {
+    id: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    message: string;
+    duration?: number;
+}
+export declare class ToastService {
+    private toastSubject;
+    toast$: import("rxjs").Observable<ToastMessage>;
+    show(type: ToastMessage['type'], message: string, duration?: number): void;
+    success(message: string, duration?: number): void;
+    error(message: string, duration?: number): void;
+    warning(message: string, duration?: number): void;
+    info(message: string, duration?: number): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabby-ai-assistant",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "description": "Tabby终端AI助手插件 - 支持多AI提供商（OpenAI、Anthropic、Minimax、GLM、Ollama、vLLM）",
     "main": "dist/index.js",
     "typings": "dist/index.d.ts",

package/src/components/settings/provider-config.component.html

@@ -37,7 +37,7 @@
                         <div class="form-row">
                             <div class="form-group">
                                 <label>{{ t.providers.displayName }}</label>
-                                <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName">
+                                <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName" *ngIf="configs[providerName]">
                             </div>
                             <div class="form-group">
                                 <label>{{ t.providers.status }}</label>
@@ -57,11 +57,28 @@
                                 {{ t.providers[field.key] || field.label }}
                                 <span *ngIf="isRequired(field)" class="required">*</span>
                             </label>
-                            <input *ngIf="getFieldType(field) === 'text' || getFieldType(field) === 'password'"
-                                [type]="isPasswordField(field) ? 'password' : 'text'"
-                                class="form-control"
-                                [placeholder]="field.placeholder || ''"
-                                [(ngModel)]="configs[providerName][field.key]">
+                            <div class="input-with-toggle" *ngIf="configs[providerName] && (getFieldType(field) === 'text' || getFieldType(field) === 'password')">
+                                <input
+                                    [type]="isPasswordField(field) && !isPasswordVisible(providerName, field.key) ? 'password' : 'text'"
+                                    class="form-control"
+                                    [class]="getInputValidationClass(providerName, field.key)"
+                                    [placeholder]="field.placeholder || ''"
+                                    [(ngModel)]="configs[providerName][field.key]">
+                                <button *ngIf="isPasswordField(field)"
+                                        type="button"
+                                        class="btn-toggle-visibility"
+                                        (click)="togglePasswordVisibility(providerName, field.key)">
+                                    <i class="fa" [ngClass]="isPasswordVisible(providerName, field.key) ? 'fa-eye-slash' : 'fa-eye'"></i>
+                                </button>
+                            </div>
+                            <!-- API Key 验证提示 -->
+                            <div *ngIf="field.key === 'apiKey' && configs[providerName]?.[field.key]"
+                                 class="validation-feedback"
+                                 [class.valid]="validateApiKeyFormat(providerName, configs[providerName][field.key]).valid"
+                                 [class.invalid]="!validateApiKeyFormat(providerName, configs[providerName][field.key]).valid">
+                                <i class="fa" [ngClass]="validateApiKeyFormat(providerName, configs[providerName][field.key]).valid ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
+                                {{ validateApiKeyFormat(providerName, configs[providerName][field.key]).message || '格式正确' }}
+                            </div>
                         </div>
 
                         <div class="form-actions">
@@ -121,7 +138,7 @@
                         <div class="form-row">
                             <div class="form-group">
                                 <label>{{ t.providers.displayName }}</label>
-                                <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName">
+                                <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName" *ngIf="configs[providerName]">
                             </div>
                             <div class="form-group">
                                 <label>{{ t.providers.status }}</label>
@@ -141,11 +158,28 @@
                                 {{ t.providers[field.key] || field.label }}
                                 <span *ngIf="isRequired(field)" class="required">*</span>
                             </label>
-                            <input *ngIf="getFieldType(field) === 'text' || getFieldType(field) === 'password'"
-                                [type]="isPasswordField(field) ? 'password' : 'text'"
-                                class="form-control"
-                                [placeholder]="field.placeholder || ''"
-                                [(ngModel)]="configs[providerName][field.key]">
+                            <div class="input-with-toggle" *ngIf="configs[providerName] && (getFieldType(field) === 'text' || getFieldType(field) === 'password')">
+                                <input
+                                    [type]="isPasswordField(field) && !isPasswordVisible(providerName, field.key) ? 'password' : 'text'"
+                                    class="form-control"
+                                    [class]="getInputValidationClass(providerName, field.key)"
+                                    [placeholder]="field.placeholder || ''"
+                                    [(ngModel)]="configs[providerName][field.key]">
+                                <button *ngIf="isPasswordField(field)"
+                                        type="button"
+                                        class="btn-toggle-visibility"
+                                        (click)="togglePasswordVisibility(providerName, field.key)">
+                                    <i class="fa" [ngClass]="isPasswordVisible(providerName, field.key) ? 'fa-eye-slash' : 'fa-eye'"></i>
+                                </button>
+                            </div>
+                            <!-- API Key 验证提示 -->
+                            <div *ngIf="field.key === 'apiKey' && configs[providerName]?.[field.key]"
+                                 class="validation-feedback"
+                                 [class.valid]="validateApiKeyFormat(providerName, configs[providerName][field.key]).valid"
+                                 [class.invalid]="!validateApiKeyFormat(providerName, configs[providerName][field.key]).valid">
+                                <i class="fa" [ngClass]="validateApiKeyFormat(providerName, configs[providerName][field.key]).valid ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
+                                {{ validateApiKeyFormat(providerName, configs[providerName][field.key]).message || '格式正确' }}
+                            </div>
                         </div>
 
                         <div class="form-actions">

package/src/components/settings/provider-config.component.scss

@@ -302,6 +302,65 @@
     }
 }
 
+/* 输入框密码显示切换 */
+.input-with-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .form-control {
+        padding-right: 40px;
+    }
+
+    .btn-toggle-visibility {
+        position: absolute;
+        right: 8px;
+        background: transparent;
+        border: none;
+        color: var(--ai-text-secondary);
+        cursor: pointer;
+        padding: 4px 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+            color: var(--ai-text-primary);
+        }
+    }
+}
+
+/* 表单验证状态 */
+.form-control {
+    &.is-valid {
+        border-color: var(--ai-success, #4caf50);
+    }
+
+    &.is-invalid {
+        border-color: var(--ai-warning, #ff9800);
+    }
+}
+
+.validation-feedback {
+    font-size: 0.85em;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    &.valid {
+        color: var(--ai-success, #4caf50);
+    }
+
+    &.invalid {
+        color: var(--ai-warning, #ff9800);
+    }
+
+    i {
+        font-size: 0.9em;
+    }
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
     .providers-grid {

package/src/components/settings/provider-config.component.ts

@@ -3,6 +3,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ConfigProviderService } from '../../services/core/config-provider.service';
 import { LoggerService } from '../../services/core/logger.service';
+import { ToastService } from '../../services/core/toast.service';
 import { TranslateService } from '../../i18n';
 
 @Component({
@@ -23,10 +24,19 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
     configs: { [key: string]: any } = {};
     expandedProvider: string = '';
     localStatus: { [key: string]: boolean } = {};
+    passwordVisibility: { [key: string]: { [fieldKey: string]: boolean } } = {};
 
     // 翻译对象
     t: any;
 
+    // API Key 格式校验规则
+    private apiKeyPatterns: { [key: string]: RegExp } = {
+        'openai': /^sk-[a-zA-Z0-9]{32,}$/,
+        'anthropic': /^sk-ant-[a-zA-Z0-9-]+$/,
+        'minimax': /^[a-zA-Z0-9]{32,}$/,
+        'glm': /^[a-zA-Z0-9._-]+$/
+    };
+
     private destroy$ = new Subject<void>();
 
     // 云端提供商模板
@@ -101,6 +111,7 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
     constructor(
         private config: ConfigProviderService,
         private logger: LoggerService,
+        private toast: ToastService,
         private translate: TranslateService
     ) {
         this.t = this.translate.t;
@@ -129,6 +140,33 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
      */
     private loadConfigs(): void {
         const allConfigs = this.config.getAllProviderConfigs();
+
+        // 为所有云端供应商初始化默认配置
+        for (const providerName of Object.keys(this.cloudProviderTemplates)) {
+            if (!allConfigs[providerName]) {
+                const template = this.cloudProviderTemplates[providerName];
+                allConfigs[providerName] = {
+                    name: providerName,
+                    displayName: template.name,
+                    enabled: false,
+                    ...this.createDefaultConfig(template.fields)
+                };
+            }
+        }
+
+        // 为所有本地供应商初始化默认配置
+        for (const providerName of Object.keys(this.localProviderTemplates)) {
+            if (!allConfigs[providerName]) {
+                const template = this.localProviderTemplates[providerName];
+                allConfigs[providerName] = {
+                    name: providerName,
+                    displayName: template.name,
+                    enabled: false,
+                    ...this.createDefaultConfig(template.fields)
+                };
+            }
+        }
+
         this.configs = allConfigs;
         this.selectedProvider = this.config.getDefaultProvider();
     }
@@ -187,7 +225,7 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
         const baseURL = this.configs[providerName]?.baseURL || template?.defaultURL;
 
         if (!baseURL) {
-            alert(this.t.providers.baseURL + ': ' + this.t.providers.testError);
+            this.toast.error(this.t.providers.baseURL + ': ' + this.t.providers.testError);
             return;
         }
 
@@ -201,16 +239,16 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
             });
 
             if (response.ok) {
-                alert(`✅ ${template.name}: ${this.t.providers.testSuccess}`);
+                this.toast.success(`${template.name}: ${this.t.providers.testSuccess}`);
                 this.localStatus[providerName] = true;
                 this.logger.info('Local provider test successful', { provider: providerName });
             } else {
-                alert(`❌ ${this.t.providers.testFail}: ${response.status}`);
+                this.toast.error(`${this.t.providers.testFail}: ${response.status}`);
                 this.localStatus[providerName] = false;
             }
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : this.t.providers.testError;
-            alert(`❌ ${template.name}\n\n${this.t.providers.testError}\n${errorMessage}`);
+            this.toast.error(`${template.name}\n\n${this.t.providers.testError}\n${errorMessage}`);
             this.localStatus[providerName] = false;
             this.logger.error('Local provider test failed', { provider: providerName, error: errorMessage });
         }
@@ -224,6 +262,7 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
         if (providerConfig) {
             this.config.setProviderConfig(providerName, providerConfig);
             this.logger.info('Provider config saved', { provider: providerName });
+            this.toast.success(`${this.getProviderTemplate(providerName)?.name || providerName} ${this.t.providers.configSaved || '配置已保存'}`);
         }
     }
 
@@ -277,7 +316,7 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
     async testConnection(providerName: string): Promise<void> {
         const providerConfig = this.configs[providerName];
         if (!providerConfig) {
-            alert(this.t.providers.testError);
+            this.toast.error(this.t.providers.testError);
             return;
         }
 
@@ -291,7 +330,7 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
         const baseURL = providerConfig.baseURL;
 
         if (!apiKey) {
-            alert(this.t.providers.apiKey + ': ' + this.t.providers.testError);
+            this.toast.error(this.t.providers.apiKey + ': ' + this.t.providers.testError);
             return;
         }
 
@@ -314,16 +353,16 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
             });
 
             if (response.ok) {
-                alert(`✅ ${this.t.providers.testSuccess}`);
+                this.toast.success(this.t.providers.testSuccess);
                 this.logger.info('Connection test successful', { provider: providerName });
             } else {
                 const errorData = await response.text();
-                alert(`❌ ${this.t.providers.testFail}\n\nStatus: ${response.status}\n${errorData.substring(0, 200)}`);
+                this.toast.error(`${this.t.providers.testFail}\n\nStatus: ${response.status}\n${errorData.substring(0, 200)}`);
                 this.logger.error('Connection test failed', { provider: providerName, status: response.status });
             }
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : this.t.providers.testError;
-            alert(`❌ ${this.t.providers.testFail}\n\n${errorMessage}`);
+            this.toast.error(`${this.t.providers.testFail}\n\n${errorMessage}`);
             this.logger.error('Connection test error', { provider: providerName, error: errorMessage });
         }
     }
@@ -473,4 +512,56 @@ export class ProviderConfigComponent implements OnInit, OnDestroy {
         }
         this.configs[providerName][key] = value;
     }
+
+    /**
+     * 切换密码字段可见性
+     */
+    togglePasswordVisibility(providerName: string, fieldKey: string): void {
+        if (!this.passwordVisibility[providerName]) {
+            this.passwordVisibility[providerName] = {};
+        }
+        this.passwordVisibility[providerName][fieldKey] = !this.passwordVisibility[providerName][fieldKey];
+    }
+
+    /**
+     * 获取密码字段可见性状态
+     */
+    isPasswordVisible(providerName: string, fieldKey: string): boolean {
+        return this.passwordVisibility[providerName]?.[fieldKey] ?? false;
+    }
+
+    /**
+     * 验证 API Key 格式
+     */
+    validateApiKeyFormat(providerName: string, apiKey: string): { valid: boolean; message: string } {
+        if (!apiKey || apiKey.trim().length === 0) {
+            return { valid: false, message: this.t?.providers?.apiKeyRequired || 'API Key 不能为空' };
+        }
+
+        const pattern = this.apiKeyPatterns[providerName];
+        if (pattern && !pattern.test(apiKey)) {
+            const hints: { [key: string]: string } = {
+                'openai': 'OpenAI API Key 应以 sk- 开头',
+                'anthropic': 'Anthropic API Key 应以 sk-ant- 开头',
+                'minimax': 'Minimax API Key 应为 32 位以上的字母数字',
+                'glm': 'GLM API Key 格式不正确'
+            };
+            return { valid: false, message: hints[providerName] || 'API Key 格式可能不正确' };
+        }
+
+        return { valid: true, message: '' };
+    }
+
+    /**
+     * 获取输入框的验证状态类
+     */
+    getInputValidationClass(providerName: string, fieldKey: string): string {
+        if (fieldKey !== 'apiKey') return '';
+
+        const value = this.configs[providerName]?.[fieldKey];
+        if (!value || value.trim().length === 0) return '';
+
+        const result = this.validateApiKeyFormat(providerName, value);
+        return result.valid ? 'is-valid' : 'is-invalid';
+    }
 }

package/src/services/core/toast.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export interface ToastMessage {
+    id: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    message: string;
+    duration?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ToastService {
+    private toastSubject = new Subject<ToastMessage>();
+    toast$ = this.toastSubject.asObservable();
+
+    show(type: ToastMessage['type'], message: string, duration = 3000): void {
+        const id = `toast-${Date.now()}`;
+        this.toastSubject.next({ id, type, message, duration });
+    }
+
+    success(message: string, duration = 3000): void {
+        this.show('success', message, duration);
+    }
+
+    error(message: string, duration = 5000): void {
+        this.show('error', message, duration);
+    }
+
+    warning(message: string, duration = 4000): void {
+        this.show('warning', message, duration);
+    }
+
+    info(message: string, duration = 3000): void {
+        this.show('info', message, duration);
+    }
+}