tabby-ai-assistant 1.0.8 → 1.0.10

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

@@ -1,13 +1,18 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+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({
     selector: 'app-provider-config',
     templateUrl: './provider-config.component.html',
-    styleUrls: ['./provider-config.component.scss']
+    styleUrls: ['./provider-config.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class ProviderConfigComponent implements OnInit {
+export class ProviderConfigComponent implements OnInit, OnDestroy {
     @Input() providerStatus: any = {};
     @Output() refreshStatus = new EventEmitter<void>();
     @Output() switchProvider = new EventEmitter<string>();
@@ -17,12 +22,29 @@ export class ProviderConfigComponent implements OnInit {
 
     selectedProvider = '';
     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>();
 
-    // 预定义的提供商模板
-    providerTemplates = {
+    // 云端提供商模板
+    cloudProviderTemplates = {
         'openai': {
             name: 'OpenAI',
             description: 'OpenAI GPT模型',
+            icon: 'fa-robot',
             fields: [
                 { key: 'apiKey', label: 'API Key', type: 'password', required: true },
                 { key: 'baseURL', label: 'Base URL', type: 'text', default: 'https://api.openai.com/v1', required: false },
@@ -32,6 +54,7 @@ export class ProviderConfigComponent implements OnInit {
         'anthropic': {
             name: 'Anthropic Claude',
             description: 'Anthropic Claude模型',
+            icon: 'fa-comments',
             fields: [
                 { key: 'apiKey', label: 'API Key', type: 'password', required: true },
                 { key: 'baseURL', label: 'Base URL', type: 'text', default: 'https://api.anthropic.com', required: false },
@@ -41,6 +64,7 @@ export class ProviderConfigComponent implements OnInit {
         'minimax': {
             name: 'Minimax',
             description: 'Minimax AI模型',
+            icon: 'fa-brain',
             fields: [
                 { key: 'apiKey', label: 'API Key', type: 'password', required: true },
                 { key: 'baseURL', label: 'Base URL', type: 'text', default: 'https://api.minimaxi.com/anthropic', required: false },
@@ -50,6 +74,7 @@ export class ProviderConfigComponent implements OnInit {
         'glm': {
             name: 'GLM (ChatGLM)',
             description: '智谱AI ChatGLM模型',
+            icon: 'fa-network-wired',
             fields: [
                 { key: 'apiKey', label: 'API Key', type: 'password', required: true },
                 { key: 'baseURL', label: 'Base URL', type: 'text', default: 'https://open.bigmodel.cn/api/paas/v4', required: false },
@@ -58,13 +83,56 @@ export class ProviderConfigComponent implements OnInit {
         }
     };
 
+    // 本地提供商模板（不需要 API Key）
+    localProviderTemplates = {
+        'ollama': {
+            name: 'Ollama (本地)',
+            description: '本地运行的 Ollama 服务，支持 Llama、Qwen 等模型',
+            icon: 'fa-server',
+            defaultURL: 'http://localhost:11434/v1',
+            fields: [
+                { key: 'baseURL', label: 'Base URL', type: 'text', default: 'http://localhost:11434/v1', required: true, placeholder: '例如: http://localhost:11434/v1' },
+                { key: 'model', label: 'Model', type: 'text', default: 'llama3.1', required: false, placeholder: '例如: llama3.1, qwen2.5, mistral' }
+            ]
+        },
+        'vllm': {
+            name: 'vLLM (本地)',
+            description: '本地运行的 vLLM 服务，适合生产部署',
+            icon: 'fa-database',
+            defaultURL: 'http://localhost:8000/v1',
+            fields: [
+                { key: 'baseURL', label: 'Base URL', type: 'text', default: 'http://localhost:8000/v1', required: true, placeholder: '例如: http://localhost:8000/v1' },
+                { key: 'apiKey', label: 'API Key (可选)', type: 'password', required: false },
+                { key: 'model', label: 'Model', type: 'text', default: 'meta-llama/Llama-3.1-8B', required: false, placeholder: 'HuggingFace 模型路径' }
+            ]
+        }
+    };
+
     constructor(
         private config: ConfigProviderService,
-        private logger: LoggerService
-    ) { }
+        private logger: LoggerService,
+        private toast: ToastService,
+        private translate: TranslateService
+    ) {
+        this.t = this.translate.t;
+    }
 
     ngOnInit(): void {
+        // 监听语言变化
+        this.translate.translation$.pipe(
+            takeUntil(this.destroy$)
+        ).subscribe(translation => {
+            this.t = translation;
+        });
+
         this.loadConfigs();
+        // 检测本地供应商状态
+        this.checkLocalProviderStatus();
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
 
     /**
@@ -72,10 +140,120 @@ export class ProviderConfigComponent implements OnInit {
      */
     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();
     }
 
+    /**
+     * 切换展开/折叠
+     */
+    toggleExpand(providerName: string): void {
+        this.expandedProvider = this.expandedProvider === providerName ? '' : providerName;
+    }
+
+    /**
+     * 检查是否是本地提供商
+     */
+    isLocalProvider(providerName: string): boolean {
+        return providerName in this.localProviderTemplates;
+    }
+
+    /**
+     * 检测本地供应商状态
+     */
+    private async checkLocalProviderStatus(): Promise<void> {
+        const localUrls: { [key: string]: string } = {
+            'ollama': 'http://localhost:11434/v1/models',
+            'vllm': 'http://localhost:8000/v1/models'
+        };
+
+        for (const [name, url] of Object.entries(localUrls)) {
+            try {
+                const controller = new AbortController();
+                setTimeout(() => controller.abort(), 2000);
+
+                const response = await fetch(url, { signal: controller.signal });
+                this.localStatus[name] = response.ok;
+            } catch {
+                this.localStatus[name] = false;
+            }
+        }
+    }
+
+    /**
+     * 获取本地供应商在线状态
+     */
+    getLocalStatus(providerName: string): { text: string; color: string; icon: string } {
+        const isOnline = this.localStatus[providerName];
+        return isOnline
+            ? { text: '在线', color: '#4caf50', icon: 'fa-check-circle' }
+            : { text: '离线', color: '#f44336', icon: 'fa-times-circle' };
+    }
+
+    /**
+     * 测试本地提供商连接
+     */
+    async testLocalProvider(providerName: string): Promise<void> {
+        const template = this.localProviderTemplates[providerName];
+        const baseURL = this.configs[providerName]?.baseURL || template?.defaultURL;
+
+        if (!baseURL) {
+            this.toast.error(this.t.providers.baseURL + ': ' + this.t.providers.testError);
+            return;
+        }
+
+        const testingMessage = `${this.t.providers.testConnection} ${template.name}...`;
+        this.logger.info(testingMessage);
+
+        try {
+            const response = await fetch(`${baseURL}/models`, {
+                method: 'GET',
+                signal: AbortSignal.timeout(5000)
+            });
+
+            if (response.ok) {
+                this.toast.success(`${template.name}: ${this.t.providers.testSuccess}`);
+                this.localStatus[providerName] = true;
+                this.logger.info('Local provider test successful', { provider: providerName });
+            } else {
+                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;
+            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 });
+        }
+    }
+
     /**
      * 保存配置
      */
@@ -84,6 +262,7 @@ export class ProviderConfigComponent implements OnInit {
         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 || '配置已保存'}`);
         }
     }
 
@@ -92,7 +271,11 @@ export class ProviderConfigComponent implements OnInit {
      */
     addProvider(providerName: string): void {
         if (!this.configs[providerName]) {
-            const template = this.providerTemplates[providerName];
+            // 检查是云端还是本地提供商
+            let template = this.cloudProviderTemplates[providerName];
+            if (!template) {
+                template = this.localProviderTemplates[providerName];
+            }
             if (template) {
                 const newConfig = {
                     name: providerName,
@@ -110,7 +293,7 @@ export class ProviderConfigComponent implements OnInit {
      * 删除提供商
      */
     removeProvider(providerName: string): void {
-        if (confirm(`确定要删除 ${this.providerTemplates[providerName]?.name} 的配置吗？`)) {
+        if (confirm(this.t.providers.deleteConfirm)) {
             delete this.configs[providerName];
             this.config.deleteProviderConfig(providerName);
             this.logger.info('Provider config removed', { provider: providerName });
@@ -133,7 +316,13 @@ export class ProviderConfigComponent implements OnInit {
     async testConnection(providerName: string): Promise<void> {
         const providerConfig = this.configs[providerName];
         if (!providerConfig) {
-            alert('请先配置该提供商');
+            this.toast.error(this.t.providers.testError);
+            return;
+        }
+
+        // 本地提供商使用不同的测试方法
+        if (this.isLocalProvider(providerName)) {
+            await this.testLocalProvider(providerName);
             return;
         }
 
@@ -141,15 +330,15 @@ export class ProviderConfigComponent implements OnInit {
         const baseURL = providerConfig.baseURL;
 
         if (!apiKey) {
-            alert('请先填写 API Key');
+            this.toast.error(this.t.providers.apiKey + ': ' + this.t.providers.testError);
             return;
         }
 
-        const template = (this.providerTemplates as any)[providerName];
+        const template = this.cloudProviderTemplates[providerName];
         const providerDisplayName = template?.name || providerName;
 
         // 显示测试中状态
-        const testingMessage = `正在测试 ${providerDisplayName} 的连接...`;
+        const testingMessage = `${this.t.providers.testConnection} ${providerDisplayName}...`;
         this.logger.info(testingMessage);
 
         try {
@@ -164,16 +353,16 @@ export class ProviderConfigComponent implements OnInit {
             });
 
             if (response.ok) {
-                alert(`✅ ${providerDisplayName} 连接测试成功！`);
+                this.toast.success(this.t.providers.testSuccess);
                 this.logger.info('Connection test successful', { provider: providerName });
             } else {
                 const errorData = await response.text();
-                alert(`❌ ${providerDisplayName} 连接测试失败\n\n状态码: ${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 : '未知错误';
-            alert(`❌ ${providerDisplayName} 连接测试失败\n\n错误: ${errorMessage}`);
+            const errorMessage = error instanceof Error ? error.message : this.t.providers.testError;
+            this.toast.error(`${this.t.providers.testFail}\n\n${errorMessage}`);
             this.logger.error('Connection test error', { provider: providerName, error: errorMessage });
         }
     }
@@ -286,10 +475,18 @@ export class ProviderConfigComponent implements OnInit {
     }
 
     /**
-     * 获取提供商模板
+     * 获取提供商模板（支持云端和本地）
      */
     getProviderTemplate(providerName: string): any {
-        return this.providerTemplates[providerName];
+        return this.cloudProviderTemplates[providerName] || this.localProviderTemplates[providerName];
+    }
+
+    /**
+     * 获取提供商图标
+     */
+    getProviderIcon(providerName: string): string {
+        const template = this.getProviderTemplate(providerName);
+        return template?.icon || 'fa-cog';
     }
 
     /**
@@ -315,4 +512,56 @@ export class ProviderConfigComponent implements OnInit {
         }
         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/components/settings/security-settings.component.html

@@ -1,51 +1,82 @@
 <div class="security-settings">
-    <h3>Security Settings</h3>
+    <h3>{{ t.security.title }}</h3>
 
-    <div class="form-group">
-        <label class="form-label">
-            <input type="checkbox" [(ngModel)]="enablePasswordProtection">
-            Enable Password Protection
-        </label>
-        <small class="form-text text-muted">
-            Require password for high-risk commands
-        </small>
+    <!-- 密码保护 -->
+    <div class="settings-section">
+        <h4>{{ t.security.accessControl }}</h4>
+        <div class="form-group">
+            <label class="form-label">
+                <input type="checkbox" [(ngModel)]="settings.enablePasswordProtection">
+                {{ t.security.passwordProtection }}
+            </label>
+            <small class="form-text text-muted">
+                {{ t.security.passwordProtectionDesc }}
+            </small>
+        </div>
+        <div class="form-group" *ngIf="settings.enablePasswordProtection">
+            <label class="form-label">{{ t.security.setPassword }}</label>
+            <input type="password" class="form-control" [(ngModel)]="password" [placeholder]="t.security.passwordPlaceholder">
+        </div>
     </div>
 
-    <div class="form-group" *ngIf="enablePasswordProtection">
-        <label class="form-label">Set Password</label>
-        <input type="password" class="form-control" [(ngModel)]="password" placeholder="Enter password">
+    <!-- 风险评估 -->
+    <div class="settings-section">
+        <h4>{{ t.security.riskAssessment }}</h4>
+        <div class="form-group">
+            <label class="form-label">
+                <input type="checkbox" [(ngModel)]="settings.enableRiskAssessment">
+                {{ t.security.riskAssessment }}
+            </label>
+            <small class="form-text text-muted">
+                {{ t.security.riskAssessmentDesc }}
+            </small>
+        </div>
+        <div class="form-group">
+            <label class="form-label">{{ t.security.defaultRiskLevel }}</label>
+            <select class="form-control" [(ngModel)]="settings.defaultRiskLevel">
+                <option value="low">{{ t.security.riskLow }}</option>
+                <option value="medium">{{ t.security.riskMedium }}</option>
+                <option value="high">{{ t.security.riskHigh }}</option>
+            </select>
+        </div>
     </div>
 
-    <div class="form-group">
-        <label class="form-label">
-            <input type="checkbox" [(ngModel)]="enableRiskAssessment">
-            Enable Risk Assessment
-        </label>
-        <small class="form-text text-muted">
-            Automatically assess command risk levels
-        </small>
+    <!-- 用户授权 -->
+    <div class="settings-section">
+        <h4>{{ t.security.userConsent }}</h4>
+        <div class="form-group">
+            <label class="form-label">
+                <input type="checkbox" [(ngModel)]="settings.enableConsentPersistence">
+                {{ t.security.rememberConsent }}
+            </label>
+            <small class="form-text text-muted">
+                {{ t.security.rememberConsentDesc }} {{ settings.consentExpiryDays }} {{ t.security.consentExpiryDays }}
+            </small>
+        </div>
     </div>
 
-    <div class="form-group">
-        <label class="form-label">Default Risk Level</label>
-        <select class="form-control" [(ngModel)]="defaultRiskLevel">
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-        </select>
+    <!-- 危险命令模式 -->
+    <div class="settings-section">
+        <h4>{{ t.security.dangerousPatterns }}</h4>
+        <div class="pattern-list">
+            <div *ngFor="let pattern of dangerousPatterns; let i = index" class="pattern-item">
+                <code>{{ pattern }}</code>
+                <button type="button" class="btn-icon" (click)="removeDangerousPattern(i)">
+                    <i class="fa fa-times"></i>
+                </button>
+            </div>
+        </div>
+        <div class="form-group add-pattern">
+            <input type="text" class="form-control" [(ngModel)]="newPattern" [placeholder]="t.security.patternPlaceholder">
+            <button type="button" class="btn btn-secondary" (click)="addDangerousPattern(newPattern)">
+                {{ t.security.addPattern }}
+            </button>
+        </div>
     </div>
 
-    <div class="form-group">
-        <label class="form-label">
-            <input type="checkbox" [(ngModel)]="enableConsentPersistence">
-            Persist User Consent
-        </label>
-        <small class="form-text text-muted">
-            Remember user consent for 30 days
-        </small>
+    <!-- 操作按钮 -->
+    <div class="settings-actions">
+        <button class="btn btn-primary" (click)="saveSettings()">{{ t.common.save }}</button>
+        <button class="btn btn-outline" (click)="resetToDefaults()">{{ t.security.resetDefaults }}</button>
     </div>
-
-    <button class="btn btn-primary" (click)="saveSettings()">
-        Save Settings
-    </button>
 </div>