tabby-ai-assistant 1.0.8 → 1.0.10

package/src/components/settings/general-settings.component.ts

@@ -1,15 +1,20 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { AiAssistantService } from '../../services/core/ai-assistant.service';
 import { ConfigProviderService } from '../../services/core/config-provider.service';
 import { LoggerService } from '../../services/core/logger.service';
+import { ThemeService, ThemeType } from '../../services/core/theme.service';
 import { ConfigService } from 'tabby-core';
+import { TranslateService, SupportedLanguage } from '../../i18n';
 
 @Component({
     selector: 'app-general-settings',
     templateUrl: './general-settings.component.html',
-    styleUrls: ['./general-settings.component.scss']
+    styleUrls: ['./general-settings.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class GeneralSettingsComponent implements OnInit {
+export class GeneralSettingsComponent implements OnInit, OnDestroy {
     @Output() providerChanged = new EventEmitter<string>();
 
     availableProviders: any[] = [];
@@ -18,16 +23,25 @@ export class GeneralSettingsComponent implements OnInit {
     language: string = 'zh-CN';
     theme: string = 'auto';
 
+    // 翻译对象
+    t: any;
+
+    // 本地供应商状态缓存
+    private localProviderStatus: { [key: string]: { text: string; color: string; icon: string; time: number } } = {};
+    private readonly statusCacheDuration = 30000; // 30秒缓存
+    private destroy$ = new Subject<void>();
+
     languages = [
-        { value: 'zh-CN', label: '简体中文' },
-        { value: 'en-US', label: 'English' },
-        { value: 'ja-JP', label: '日本語' }
+        { value: 'zh-CN', label: '简体中文', flag: '🇨🇳' },
+        { value: 'en-US', label: 'English', flag: '🇺🇸' }
     ];
 
     themes = [
         { value: 'auto', label: '跟随系统' },
         { value: 'light', label: '浅色主题' },
-        { value: 'dark', label: '深色主题' }
+        { value: 'dark', label: '深色主题' },
+        { value: 'pixel', label: '像素复古' },
+        { value: 'tech', label: '赛博科技' }
     ];
 
     // 提供商模板，用于显示名称
@@ -35,23 +49,57 @@ export class GeneralSettingsComponent implements OnInit {
         'openai': 'OpenAI',
         'anthropic': 'Anthropic Claude',
         'minimax': 'Minimax',
-        'glm': 'GLM (ChatGLM)'
+        'glm': 'GLM (ChatGLM)',
+        'openai-compatible': 'OpenAI Compatible',
+        'ollama': 'Ollama (本地)',
+        'vllm': 'vLLM (本地)'
     };
 
     constructor(
         private aiService: AiAssistantService,
         private config: ConfigProviderService,
         private tabbyConfig: ConfigService,
-        private logger: LoggerService
-    ) { }
+        private logger: LoggerService,
+        private translate: TranslateService,
+        private themeService: ThemeService
+    ) {
+        this.t = this.translate.t;
+    }
 
     ngOnInit(): void {
+        // 监听语言变化
+        this.translate.translation$.pipe(
+            takeUntil(this.destroy$)
+        ).subscribe(translation => {
+            this.t = translation;
+            // 更新主题翻译
+            this.updateThemeLabels();
+        });
+
         this.loadSettings();
         this.loadProviders();
         // 应用当前主题
         this.applyTheme(this.theme);
     }
 
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     * 更新主题标签翻译
+     */
+    private updateThemeLabels(): void {
+        this.themes = [
+            { value: 'auto', label: this.t.general.themeAuto },
+            { value: 'light', label: this.t.general.themeLight },
+            { value: 'dark', label: this.t.general.themeDark },
+            { value: 'pixel', label: this.t.general.themePixel || '像素复古' },
+            { value: 'tech', label: this.t.general.themeTech || '赛博科技' }
+        ];
+    }
+
     /**
      * 加载设置
      */
@@ -63,22 +111,124 @@ export class GeneralSettingsComponent implements OnInit {
     }
 
     /**
-     * 加载可用提供商 - 从配置服务读取已配置的提供商
+     * 加载可用提供商 - 支持云端和本地供应商
      */
     private loadProviders(): void {
         const allConfigs = this.config.getAllProviderConfigs();
+
+        // 本地供应商列表（不需要 API Key）
+        const localProviders = ['ollama', 'vllm'];
         this.availableProviders = Object.keys(allConfigs)
-            .filter(key => allConfigs[key] && allConfigs[key].apiKey)
+            .filter(key => {
+                const config = allConfigs[key];
+                if (!config) return false;
+
+                // 本地供应商：只需要有配置即可
+                if (localProviders.includes(key)) {
+                    return config.enabled !== false;
+                }
+
+                // 云端供应商：需要 API Key
+                return !!config.apiKey;
+            })
             .map(key => ({
                 name: key,
                 displayName: allConfigs[key].displayName || this.providerNames[key] || key,
-                description: `已配置的 ${this.providerNames[key] || key} 提供商`,
-                enabled: allConfigs[key].enabled !== false
+                description: this.getProviderDescription(key),
+                enabled: allConfigs[key].enabled !== false,
+                isLocal: localProviders.includes(key)
             }));
 
         this.logger.info('Loaded providers from config', { count: this.availableProviders.length });
     }
 
+    /**
+     * 获取供应商描述
+     */
+    private getProviderDescription(key: string): string {
+        const descriptions: { [key: string]: string } = {
+            'openai': '云端 OpenAI GPT 系列模型',
+            'anthropic': '云端 Anthropic Claude 系列模型',
+            'minimax': '云端 Minimax 大模型',
+            'glm': '云端 智谱 ChatGLM 模型',
+            'openai-compatible': '兼容 OpenAI API 的第三方服务',
+            'ollama': '本地运行的 Ollama 服务 (端口 11434)',
+            'vllm': '本地运行的 vLLM 服务 (端口 8000)'
+        };
+        return descriptions[key] || `${this.providerNames[key] || key} 提供商`;
+    }
+
+    /**
+     * 获取云端提供商状态（同步返回）
+     */
+    getProviderStatus(providerName: string): { text: string; color: string; icon: string } {
+        const providerConfig = this.config.getProviderConfig(providerName);
+        if (providerConfig && providerConfig.apiKey) {
+            return {
+                text: providerConfig.enabled !== false ? '已启用' : '已禁用',
+                color: providerConfig.enabled !== false ? '#4caf50' : '#ff9800',
+                icon: providerConfig.enabled !== false ? 'fa-check-circle' : 'fa-pause-circle'
+            };
+        }
+        return { text: '未配置', color: '#9e9e9e', icon: 'fa-question-circle' };
+    }
+
+    /**
+     * 检测本地供应商状态（异步）
+     */
+    private async checkLocalProviderStatus(providerName: string): Promise<boolean> {
+        const urls: { [key: string]: string } = {
+            'ollama': 'http://localhost:11434/v1/models',
+            'vllm': 'http://localhost:8000/v1/models'
+        };
+
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 2000);
+
+            const response = await fetch(urls[providerName], {
+                method: 'GET',
+                signal: controller.signal
+            });
+
+            clearTimeout(timeoutId);
+            return response.ok;
+        } catch {
+            return false;
+        }
+    }
+
+    /**
+     * 获取本地供应商状态（同步返回，异步更新缓存）
+     */
+    getLocalProviderStatus(providerName: string): { text: string; color: string; icon: string } {
+        const now = Date.now();
+        const cached = this.localProviderStatus[providerName];
+
+        // 检查缓存是否有效（30秒内）
+        if (cached && (now - cached.time) < this.statusCacheDuration) {
+            return { text: cached.text, color: cached.color, icon: cached.icon };
+        }
+
+        // 返回默认状态并异步更新
+        const defaultStatus = { text: '检测中...', color: '#ff9800', icon: 'fa-spinner fa-spin' };
+        this.localProviderStatus[providerName] = { ...defaultStatus, time: now };
+
+        // 异步检查实际状态
+        this.checkLocalProviderStatus(providerName).then(isOnline => {
+            const status = isOnline
+                ? { text: '在线', color: '#4caf50', icon: 'fa-check-circle', time: now }
+                : { text: '离线', color: '#f44336', icon: 'fa-times-circle', time: now };
+            this.localProviderStatus[providerName] = status;
+            this.logger.debug('Local provider status updated', { provider: providerName, isOnline });
+        }).catch(() => {
+            const status = { text: '离线', color: '#f44336', icon: 'fa-times-circle', time: now };
+            this.localProviderStatus[providerName] = status;
+        });
+
+        return defaultStatus;
+    }
+
     /**
      * 更新默认提供商
      */
@@ -103,7 +253,7 @@ export class GeneralSettingsComponent implements OnInit {
      */
     updateLanguage(language: string): void {
         this.language = language;
-        this.config.set('language', language);
+        this.translate.setLanguage(language as SupportedLanguage);
         this.logger.info('Language updated', { language });
     }
 
@@ -113,51 +263,14 @@ export class GeneralSettingsComponent implements OnInit {
     updateTheme(theme: string): void {
         this.theme = theme;
         this.config.set('theme', theme);
-        this.applyTheme(theme);
+        this.themeService.applyTheme(theme as ThemeType);
         this.logger.info('Theme updated', { theme });
     }
 
     /**
-     * 应用主题 - 同步 Tabby 主题或手动设置
+     * 应用主题 - 使用 ThemeService
      */
     private applyTheme(theme: string): void {
-        const root = document.documentElement;
-
-        // 移除现有主题类
-        root.classList.remove('ai-theme-light', 'ai-theme-dark');
-        document.body.classList.remove('ai-theme-light', 'ai-theme-dark');
-
-        if (theme === 'auto') {
-            // 跟随 Tabby 主题
-            const tabbyTheme = this.tabbyConfig.store?.appearance?.theme || 'dark';
-            const isDark = tabbyTheme.toLowerCase().includes('dark');
-            const themeClass = isDark ? 'ai-theme-dark' : 'ai-theme-light';
-            root.classList.add(themeClass);
-            document.body.classList.add(themeClass);
-        } else if (theme === 'light') {
-            root.classList.add('ai-theme-light');
-            document.body.classList.add('ai-theme-light');
-        } else {
-            root.classList.add('ai-theme-dark');
-            document.body.classList.add('ai-theme-dark');
-        }
-    }
-
-    /**
-     * 获取提供商状态
-     */
-    getProviderStatus(providerName: string): { text: string; color: string } {
-        const providerConfig = this.config.getProviderConfig(providerName);
-        if (providerConfig && providerConfig.apiKey) {
-            return {
-                text: providerConfig.enabled !== false ? '已启用' : '已禁用',
-                color: providerConfig.enabled !== false ? '#4caf50' : '#ff9800'
-            };
-        }
-        return {
-            text: '未配置',
-            color: '#9e9e9e'
-        };
+        this.themeService.applyTheme(theme as ThemeType);
     }
 }
-

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

@@ -1,75 +1,198 @@
 <div class="provider-config">
-    <h3>AI提供商配置</h3>
+    <h3>{{ t.providers.title }}</h3>
 
-    <!-- 可用提供商列表 -->
-    <div class="providers-list">
-        <div *ngFor="let providerName of Object.keys(providerTemplates)" class="provider-item"
-            [class.configured]="hasConfig(providerName)">
-            <div class="provider-info">
-                <h4>{{ providerTemplates[providerName].name }}</h4>
-                <p>{{ providerTemplates[providerName].description }}</p>
-            </div>
-            <div class="provider-actions">
-                <button *ngIf="!hasConfig(providerName)" class="btn btn-primary" (click)="addProvider(providerName)">
-                    <i class="fa fa-plus"></i>
-                    添加
-                </button>
-                <button *ngIf="hasConfig(providerName)" class="btn btn-secondary"
-                    (click)="testConnection(providerName)">
-                    <i class="fa fa-plug"></i>
-                    测试
-                </button>
-                <button *ngIf="hasConfig(providerName)" class="btn btn-danger" (click)="removeProvider(providerName)">
-                    <i class="fa fa-trash"></i>
-                    删除
-                </button>
-            </div>
+    <!-- 云端提供商分组 -->
+    <div class="provider-section">
+        <div class="section-header">
+            <i class="fa fa-cloud"></i>
+            <h4>{{ t.providers.cloudProviders }}</h4>
+            <span class="section-desc">{{ t.providers.cloudProvidersDesc }}</span>
+        </div>
+
+        <div class="providers-grid">
+            <div *ngFor="let providerName of Object.keys(cloudProviderTemplates)"
+                 class="provider-card"
+                 [class.configured]="hasConfig(providerName)"
+                 [class.expanded]="expandedProvider === providerName">
 
-            <!-- 配置表单 -->
-            <div *ngIf="hasConfig(providerName)" class="config-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label>显示名称</label>
-                        <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName">
+                <!-- 卡片头部 -->
+                <div class="card-header" (click)="toggleExpand(providerName)">
+                    <div class="provider-icon" [class.local]="isLocalProvider(providerName)">
+                        <i class="fa" [ngClass]="getProviderIcon(providerName)"></i>
                     </div>
-                    <div class="form-group">
-                        <label>状态</label>
-                        <div class="toggle-switch">
-                            <input type="checkbox" [id]="'enabled-' + providerName"
-                                [checked]="configs[providerName].enabled"
-                                (change)="toggleProviderEnabled(providerName)">
-                            <label [for]="'enabled-' + providerName">
-                                {{ configs[providerName].enabled ? '已启用' : '已禁用' }}
+                    <div class="provider-info">
+                        <h5>{{ t.providerNames[providerName] || cloudProviderTemplates[providerName].name }}</h5>
+                        <span class="status-badge" [class.active]="configs[providerName]?.enabled">
+                            {{ hasConfig(providerName) ? (configs[providerName]?.enabled ? t.common.enabled : t.common.disabled) : t.common.notConfigured }}
+                        </span>
+                    </div>
+                    <div class="expand-icon">
+                        <i class="fa" [ngClass]="expandedProvider === providerName ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                    </div>
+                </div>
+
+                <!-- 卡片内容（展开时显示） -->
+                <div class="card-body" *ngIf="expandedProvider === providerName">
+                    <div class="config-form">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label>{{ t.providers.displayName }}</label>
+                                <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName" *ngIf="configs[providerName]">
+                            </div>
+                            <div class="form-group">
+                                <label>{{ t.providers.status }}</label>
+                                <div class="toggle-switch">
+                                    <input type="checkbox" [id]="'enabled-' + providerName"
+                                        [checked]="configs[providerName]?.enabled"
+                                        (change)="toggleProviderEnabled(providerName)">
+                                    <label [for]="'enabled-' + providerName">
+                                        {{ configs[providerName]?.enabled ? t.common.enabled : t.common.disabled }}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div *ngFor="let field of cloudProviderTemplates[providerName].fields" class="form-group">
+                            <label>
+                                {{ t.providers[field.key] || field.label }}
+                                <span *ngIf="isRequired(field)" class="required">*</span>
                             </label>
+                            <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">
+                            <button class="btn btn-primary" (click)="saveConfig(providerName)">
+                                <i class="fa fa-save"></i> {{ t.providers.saveConfig }}
+                            </button>
+                            <button class="btn btn-secondary" (click)="testConnection(providerName)">
+                                <i class="fa fa-plug"></i> {{ t.providers.testConnection }}
+                            </button>
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
+    </div>
 
-                <div *ngFor="let field of providerTemplates[providerName].fields" class="form-group">
-                    <label>
-                        {{ 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]">
-                    <!-- 下拉选择框 -->
-                    <select *ngIf="getFieldType(field) === 'select'" class="form-control"
-                        [(ngModel)]="configs[providerName][field.key]">
-                        <option *ngFor="let option of getFieldOptions(field)" [value]="option">
-                            {{ option }}
-                        </option>
-                    </select>
+    <!-- 本地提供商分组 -->
+    <div class="provider-section local">
+        <div class="section-header">
+            <i class="fa fa-server"></i>
+            <h4>{{ t.providers.localProviders }}</h4>
+            <span class="section-desc">{{ t.providers.localProvidersDesc }}</span>
+        </div>
+
+        <div class="providers-grid">
+            <div *ngFor="let providerName of Object.keys(localProviderTemplates)"
+                 class="provider-card"
+                 [class.configured]="hasConfig(providerName)"
+                 [class.expanded]="expandedProvider === providerName">
+
+                <!-- 卡片头部 -->
+                <div class="card-header" (click)="toggleExpand(providerName)">
+                    <div class="provider-icon local">
+                        <i class="fa" [ngClass]="getProviderIcon(providerName)"></i>
+                    </div>
+                    <div class="provider-info">
+                        <h5>{{ t.providerNames[providerName] || localProviderTemplates[providerName].name }}</h5>
+                        <div class="status-row">
+                            <span class="status-badge" [class.active]="configs[providerName]?.enabled">
+                                {{ hasConfig(providerName) ? (configs[providerName]?.enabled ? t.common.enabled : t.common.disabled) : t.common.notConfigured }}
+                            </span>
+                            <!-- 在线状态指示器 -->
+                            <span class="online-status" [style.color]="getLocalStatus(providerName).color">
+                                <i class="fa" [ngClass]="getLocalStatus(providerName).icon"></i>
+                                {{ getLocalStatus(providerName).text }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="expand-icon">
+                        <i class="fa" [ngClass]="expandedProvider === providerName ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                    </div>
                 </div>
 
-                <div class="form-actions">
-                    <button class="btn btn-primary" (click)="saveConfig(providerName)">
-                        <i class="fa fa-save"></i>
-                        保存配置
-                    </button>
+                <!-- 卡片内容（展开时显示） -->
+                <div class="card-body" *ngIf="expandedProvider === providerName">
+                    <div class="config-form">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label>{{ t.providers.displayName }}</label>
+                                <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName" *ngIf="configs[providerName]">
+                            </div>
+                            <div class="form-group">
+                                <label>{{ t.providers.status }}</label>
+                                <div class="toggle-switch">
+                                    <input type="checkbox" [id]="'enabled-' + providerName"
+                                        [checked]="configs[providerName]?.enabled"
+                                        (change)="toggleProviderEnabled(providerName)">
+                                    <label [for]="'enabled-' + providerName">
+                                        {{ configs[providerName]?.enabled ? t.common.enabled : t.common.disabled }}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div *ngFor="let field of localProviderTemplates[providerName].fields" class="form-group">
+                            <label>
+                                {{ t.providers[field.key] || field.label }}
+                                <span *ngIf="isRequired(field)" class="required">*</span>
+                            </label>
+                            <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">
+                            <button class="btn btn-primary" (click)="saveConfig(providerName)">
+                                <i class="fa fa-save"></i> {{ t.providers.saveConfig }}
+                            </button>
+                            <button class="btn btn-info" (click)="testConnection(providerName)">
+                                <i class="fa fa-wifi"></i> {{ t.providers.detectService }}
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>