tabby-ai-assistant 1.0.8 → 1.0.9

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

@@ -1,13 +1,17 @@
-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 { 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 +21,20 @@ export class ProviderConfigComponent implements OnInit {
 
     selectedProvider = '';
     configs: { [key: string]: any } = {};
+    expandedProvider: string = '';
+    localStatus: { [key: string]: boolean } = {};
 
-    // 预定义的提供商模板
-    providerTemplates = {
+    // 翻译对象
+    t: any;
+
+    private destroy$ = new Subject<void>();
+
+    // 云端提供商模板
+    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 +44,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 +54,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 +64,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 +73,55 @@ 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 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();
     }
 
     /**
@@ -76,6 +133,89 @@ export class ProviderConfigComponent implements OnInit {
         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) {
+            alert(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) {
+                alert(`✅ ${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.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.localStatus[providerName] = false;
+            this.logger.error('Local provider test failed', { provider: providerName, error: errorMessage });
+        }
+    }
+
     /**
      * 保存配置
      */
@@ -92,7 +232,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 +254,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 +277,13 @@ export class ProviderConfigComponent implements OnInit {
     async testConnection(providerName: string): Promise<void> {
         const providerConfig = this.configs[providerName];
         if (!providerConfig) {
-            alert('请先配置该提供商');
+            alert(this.t.providers.testError);
+            return;
+        }
+
+        // 本地提供商使用不同的测试方法
+        if (this.isLocalProvider(providerName)) {
+            await this.testLocalProvider(providerName);
             return;
         }
 
@@ -141,15 +291,15 @@ export class ProviderConfigComponent implements OnInit {
         const baseURL = providerConfig.baseURL;
 
         if (!apiKey) {
-            alert('请先填写 API Key');
+            alert(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 +314,16 @@ export class ProviderConfigComponent implements OnInit {
             });
 
             if (response.ok) {
-                alert(`✅ ${providerDisplayName} 连接测试成功！`);
+                alert(`✅ ${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)}`);
+                alert(`❌ ${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;
+            alert(`❌ ${this.t.providers.testFail}\n\n${errorMessage}`);
             this.logger.error('Connection test error', { provider: providerName, error: errorMessage });
         }
     }
@@ -286,10 +436,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';
     }
 
     /**

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>

package/src/components/settings/security-settings.component.scss

@@ -2,17 +2,36 @@
 .security-settings {
     h3 {
         margin-bottom: 1.5rem;
-        color: #333;
+        color: var(--ai-text-primary);
+    }
+
+    h4 {
+        font-size: 1.1rem;
+        margin-bottom: 1rem;
+        color: var(--ai-text-primary);
+        border-bottom: 1px solid var(--ai-border);
+        padding-bottom: 0.5rem;
+    }
+
+    .settings-section {
+        margin-bottom: 2rem;
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid var(--ai-border);
+
+        &:last-of-type {
+            border-bottom: none;
+        }
     }
 
     .form-group {
-        margin-bottom: 1.5rem;
+        margin-bottom: 1.25rem;
     }
 
     .form-label {
         font-weight: 600;
         margin-bottom: 0.5rem;
         display: block;
+        color: var(--ai-text-primary);
 
         input[type="checkbox"] {
             margin-right: 0.5rem;
@@ -22,14 +41,16 @@
     .form-control {
         width: 100%;
         padding: 0.5rem;
-        border: 1px solid #ccc;
+        border: 1px solid var(--ai-border);
         border-radius: 4px;
         font-size: 14px;
+        background-color: var(--ai-bg-primary);
+        color: var(--ai-text-primary);
 
         &:focus {
             outline: none;
-            border-color: #007bff;
-            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+            border-color: var(--ai-primary);
+            box-shadow: 0 0 0 0.2rem rgba(var(--ai-primary-rgb, 0, 123, 255), 0.25);
         }
     }
 
@@ -37,7 +58,61 @@
         display: block;
         margin-top: 0.25rem;
         font-size: 12px;
-        color: #6c757d;
+        color: var(--ai-text-secondary);
+    }
+
+    /* 危险命令模式列表 */
+    .pattern-list {
+        margin-bottom: 1rem;
+    }
+
+    .pattern-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        background-color: var(--ai-bg-secondary);
+        border-radius: 4px;
+        margin-bottom: 0.5rem;
+
+        code {
+            font-family: 'Consolas', 'Monaco', monospace;
+            color: var(--ai-danger);
+            font-size: 13px;
+        }
+    }
+
+    .btn-icon {
+        background: none;
+        border: none;
+        color: var(--ai-text-secondary);
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        border-radius: 3px;
+        transition: color 0.2s, background-color 0.2s;
+
+        &:hover {
+            color: var(--ai-danger);
+            background-color: rgba(var(--ai-danger-rgb, 220, 53, 69), 0.1);
+        }
+    }
+
+    .add-pattern {
+        display: flex;
+        gap: 0.5rem;
+
+        .form-control {
+            flex: 1;
+        }
+    }
+
+    /* 操作按钮 */
+    .settings-actions {
+        display: flex;
+        gap: 1rem;
+        margin-top: 2rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid var(--ai-border);
     }
 
     .btn {
@@ -50,11 +125,11 @@
         transition: all 0.2s;
 
         &.btn-primary {
-            background-color: #007bff;
+            background-color: var(--ai-primary);
             color: white;
 
             &:hover {
-                background-color: #0056b3;
+                background-color: var(--ai-primary-hover);
                 transform: translateY(-1px);
             }
 
@@ -62,5 +137,26 @@
                 transform: translateY(0);
             }
         }
+
+        &.btn-secondary {
+            background-color: var(--ai-secondary);
+            color: white;
+
+            &:hover {
+                background-color: var(--ai-secondary);
+                filter: brightness(0.9);
+            }
+        }
+
+        &.btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--ai-border);
+            color: var(--ai-text-secondary);
+
+            &:hover {
+                background-color: var(--ai-bg-secondary);
+                color: var(--ai-text-primary);
+            }
+        }
     }
 }