tabby-ai-assistant 1.0.8 → 1.0.10

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

@@ -1,13 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, 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 { ThemeService, ThemeType } from '../../services/core/theme.service';
+import { TranslateService } from '../../i18n';
 
 @Component({
     selector: 'app-chat-settings',
     templateUrl: './chat-settings.component.html',
-    styleUrls: ['./chat-settings.component.scss']
+    styleUrls: ['./chat-settings.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class ChatSettingsComponent implements OnInit {
+export class ChatSettingsComponent implements OnInit, OnDestroy {
     settings: {
         chatHistoryEnabled: boolean;
         maxChatHistory: number;
@@ -32,23 +37,59 @@ export class ChatSettingsComponent implements OnInit {
         soundEnabled: true
     };
 
-    themes = [
-        { value: 'auto', label: '跟随系统' },
-        { value: 'light', label: '浅色主题' },
-        { value: 'dark', label: '深色主题' }
-    ];
+    // 翻译对象
+    t: any;
 
     fontSizes = [12, 14, 16, 18, 20];
 
+    private destroy$ = new Subject<void>();
+
     constructor(
         private config: ConfigProviderService,
-        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();
     }
 
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     * 更新主题标签翻译
+     */
+    private updateThemeLabels(): void {
+        this.settings.theme = this.config.get('theme', 'auto') ?? 'auto';
+    }
+
+    /**
+     * 获取主题选项
+     */
+    get themes() {
+        return [
+            { 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 || '赛博科技' }
+        ];
+    }
+
     /**
      * 加载设置
      */
@@ -83,22 +124,7 @@ export class ChatSettingsComponent implements OnInit {
     updateTheme(theme: string): void {
         this.settings.theme = theme;
         this.saveSetting('theme', theme);
-        this.applyTheme(theme);
-    }
-
-    /**
-     * 应用主题
-     */
-    private applyTheme(theme: string): void {
-        const body = document.body;
-        body.classList.remove('light-theme', 'dark-theme');
-
-        if (theme === 'light') {
-            body.classList.add('light-theme');
-        } else if (theme === 'dark') {
-            body.classList.add('dark-theme');
-        }
-        // 'auto' 主题由系统决定
+        this.themeService.applyTheme(theme as ThemeType);
     }
 
     /**
@@ -123,10 +149,10 @@ export class ChatSettingsComponent implements OnInit {
      * 清空聊天历史
      */
     clearChatHistory(): void {
-        if (confirm('确定要清空所有聊天记录吗？此操作不可恢复。')) {
+        if (confirm(this.t.chatSettings.clearHistoryConfirm)) {
             localStorage.removeItem('ai-assistant-chat-history');
             this.logger.info('Chat history cleared');
-            alert('聊天记录已清空');
+            alert(this.t.providers.configDeleted);
         }
     }
 
@@ -152,7 +178,7 @@ export class ChatSettingsComponent implements OnInit {
      * 重置为默认设置
      */
     resetToDefaults(): void {
-        if (confirm('确定要重置所有设置为默认值吗？')) {
+        if (confirm(this.t.chatSettings.resetConfirm)) {
             this.settings = {
                 chatHistoryEnabled: true,
                 maxChatHistory: 100,
@@ -173,7 +199,7 @@ export class ChatSettingsComponent implements OnInit {
             });
 
             this.logger.info('Chat settings reset to defaults');
-            alert('设置已重置为默认值');
+            alert(this.t.providers.configSaved);
         }
     }
 }

package/src/components/security/risk-confirm-dialog.component.scss

@@ -26,7 +26,7 @@
         }
 
         span {
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
         }
     }
 
@@ -45,7 +45,7 @@
 
         &:hover {
             background-color: var(--ai-border);
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
         }
     }
 }
@@ -120,7 +120,7 @@
                 display: block;
                 font-weight: 600;
                 margin-bottom: 0.5rem;
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
                 font-size: 0.875rem;
             }
 
@@ -137,7 +137,7 @@
                     flex: 1;
                     font-family: 'Courier New', Courier, monospace;
                     font-size: 0.875rem;
-                    color: var(--ai-dark);
+                    color: var(--ai-text-primary);
                     word-break: break-all;
                 }
 
@@ -156,7 +156,7 @@
 
                     &:hover {
                         background-color: var(--ai-border);
-                        color: var(--ai-dark);
+                        color: var(--ai-text-primary);
                     }
                 }
             }
@@ -169,7 +169,7 @@
                 border-radius: 0.375rem;
                 font-size: 0.875rem;
                 line-height: 1.6;
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
             }
 
             .suggestions-list {
@@ -201,7 +201,7 @@
                         flex: 1;
                         font-size: 0.875rem;
                         line-height: 1.5;
-                        color: var(--ai-dark);
+                        color: var(--ai-text-primary);
                     }
                 }
             }

package/src/components/settings/ai-settings-tab.component.html

@@ -4,30 +4,30 @@
         <div class="header-content">
             <h2>
                 <i class="fa fa-robot"></i>
-                AI助手设置
+                {{ t.chatInterface.title }}{{ t.settings.title }}
             </h2>
             <div class="header-status">
                 <div class="status-indicator" [class.enabled]="isEnabled">
                     <i class="fa fa-power-off"></i>
-                    <span>{{ isEnabled ? '已启用' : '已禁用' }}</span>
+                    <span>{{ isEnabled ? t.common.enabled : t.common.disabled }}</span>
                 </div>
                 <div class="provider-info" *ngIf="isEnabled">
                     <i class="fa fa-cloud"></i>
-                    <span>当前提供商: {{ currentProvider }}</span>
+                    <span>{{ t.advancedSettings.currentProvider }}: {{ currentProvider }}</span>
                 </div>
             </div>
         </div>
         <div class="header-actions">
-            <button class="btn-icon" (click)="toggleEnabled()" [title]="isEnabled ? '禁用AI助手' : '启用AI助手'">
+            <button class="btn-icon" (click)="toggleEnabled()" [title]="isEnabled ? t.common.disabled : t.common.enabled">
                 <i [class]="isEnabled ? 'fa fa-pause' : 'fa fa-play'"></i>
             </button>
-            <button class="btn-icon" (click)="refreshProviderStatus()" title="刷新状态">
+            <button class="btn-icon" (click)="refreshProviderStatus()" [title]="t.general.shortcutGenerate">
                 <i class="fa fa-refresh"></i>
             </button>
-            <button class="btn-icon" (click)="exportConfig()" title="导出配置">
+            <button class="btn-icon" (click)="exportConfig()" [title]="t.chatInterface.exportChat">
                 <i class="fa fa-download"></i>
             </button>
-            <button class="btn-icon" (click)="importConfig()" title="导入配置">
+            <button class="btn-icon" (click)="importConfig()" [title]="t.common.add">
                 <i class="fa fa-upload"></i>
             </button>
         </div>
@@ -38,7 +38,7 @@
         <button *ngFor="let tab of tabs" class="tab-button" [class.active]="activeTab === tab.id"
             (click)="switchTab(tab.id)">
             <i [class]="tab.icon"></i>
-            <span>{{ tab.label }}</span>
+            <span>{{ t[tab.labelKey.split('.')[0]][tab.labelKey.split('.')[1]] }}</span>
         </button>
     </div>
 
@@ -69,50 +69,50 @@
         <!-- 高级设置 -->
         <div *ngIf="activeTab === 'advanced'" class="tab-content">
             <div class="advanced-settings">
-                <h3>高级设置</h3>
+                <h3>{{ t.advancedSettings.title }}</h3>
 
                 <!-- 配置验证 -->
                 <div class="settings-section">
-                    <h4>配置管理</h4>
+                    <h4>{{ t.advancedSettings.configManagement }}</h4>
                     <button class="btn btn-primary" (click)="validateConfig()">
                         <i class="fa fa-check"></i>
-                        验证配置
+                        {{ t.advancedSettings.validateConfig }}
                     </button>
                     <button class="btn btn-warning" (click)="resetToDefaults()">
                         <i class="fa fa-refresh"></i>
-                        重置为默认
+                        {{ t.advancedSettings.resetDefaults }}
                     </button>
                 </div>
 
                 <!-- 日志设置 -->
                 <div class="settings-section">
-                    <h4>日志设置</h4>
+                    <h4>{{ t.advancedSettings.logSettings }}</h4>
                     <div class="log-level-selector">
-                        <label>日志级别</label>
+                        <label>{{ t.advancedSettings.logLevel }}</label>
                         <select class="form-control" [(ngModel)]="config.logLevel"
                             (change)="config.setLogLevel(config.logLevel)">
-                            <option value="debug">Debug (详细)</option>
-                            <option value="info">Info (信息)</option>
-                            <option value="warn">Warn (警告)</option>
-                            <option value="error">Error (错误)</option>
+                            <option value="debug">{{ t.advancedSettings.logLevels.debug }}</option>
+                            <option value="info">{{ t.advancedSettings.logLevels.info }}</option>
+                            <option value="warn">{{ t.advancedSettings.logLevels.warn }}</option>
+                            <option value="error">{{ t.advancedSettings.logLevels.error }}</option>
                         </select>
                     </div>
                 </div>
 
                 <!-- 系统信息 -->
                 <div class="settings-section">
-                    <h4>系统信息</h4>
+                    <h4>{{ t.advancedSettings.systemInfo }}</h4>
                     <div class="system-info">
                         <div class="info-item">
-                            <label>插件版本:</label>
-                            <span>1.0.0</span>
+                            <label>{{ t.advancedSettings.pluginVersion }}:</label>
+                            <span>{{ pluginVersion }}</span>
                         </div>
                         <div class="info-item">
-                            <label>支持的提供商:</label>
+                            <label>{{ t.advancedSettings.supportedProviders }}:</label>
                             <span>{{ providerStatus.count }}</span>
                         </div>
                         <div class="info-item">
-                            <label>当前提供商:</label>
+                            <label>{{ t.advancedSettings.currentProvider }}:</label>
                             <span>{{ currentProvider }}</span>
                         </div>
                     </div>
@@ -125,12 +125,12 @@
     <div class="disabled-message" *ngIf="!isEnabled">
         <div class="message-content">
             <i class="fa fa-pause-circle fa-3x"></i>
-            <h3>AI助手已禁用</h3>
-            <p>点击上方按钮启用AI助手功能</p>
+            <h3>{{ t.chatInterface.title }} {{ t.common.disabled }}</h3>
+            <p>{{ t.general.enableAssistantDesc }}</p>
             <button class="btn btn-primary" (click)="toggleEnabled()">
                 <i class="fa fa-play"></i>
-                启用AI助手
+                {{ t.general.enableAssistant }}
             </button>
         </div>
     </div>
-</div>
+</div>

package/src/components/settings/ai-settings-tab.component.scss

@@ -24,7 +24,7 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
 
             .icon-robot {
                 font-size: 1.75rem;
@@ -58,12 +58,12 @@
                 }
 
                 &:not(.enabled) {
-                    color: var(--ai-secondary);
+                    color: var(--ai-text-secondary);
                 }
             }
 
             .provider-info {
-                color: var(--ai-secondary);
+                color: var(--ai-text-secondary);
             }
         }
     }
@@ -83,11 +83,11 @@
             justify-content: center;
             cursor: pointer;
             transition: all 0.2s;
-            color: var(--ai-secondary);
+            color: var(--ai-text-secondary);
 
             &:hover {
                 background-color: var(--ai-border);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
             }
 
             .icon-refresh {
@@ -114,13 +114,13 @@
         gap: 0.5rem;
         cursor: pointer;
         transition: all 0.2s;
-        color: var(--ai-secondary);
+        color: var(--ai-text-secondary);
         white-space: nowrap;
         font-size: 0.875rem;
         font-weight: 500;
 
         &:hover {
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
             background-color: rgba(0, 0, 0, 0.05);
         }
 
@@ -158,7 +158,7 @@
         margin: 0 0 1.5rem 0;
         font-size: 1.25rem;
         font-weight: 600;
-        color: var(--ai-dark);
+        color: var(--ai-text-primary);
     }
 
     .settings-section {
@@ -172,7 +172,7 @@
             margin: 0 0 1rem 0;
             font-size: 1.125rem;
             font-weight: 600;
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
         }
 
         .btn {
@@ -200,7 +200,7 @@
 
             &.btn-warning {
                 background-color: var(--ai-warning);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
 
                 &:hover {
                     background-color: #e0a800;
@@ -213,20 +213,34 @@
                 display: block;
                 font-weight: 500;
                 margin-bottom: 0.5rem;
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
             }
 
             .form-control {
                 width: 200px;
-                padding: 0.5rem 0.75rem;
-                border: 1px solid var(--ai-border);
+                padding: 0.5rem 2rem 0.5rem 0.75rem;
+                border: 2px solid var(--ai-border);
                 border-radius: 0.375rem;
-                background-color: var(--ai-bg-primary);
-                color: var(--ai-dark);
+                background-color: var(--ai-bg-secondary);
+                color: var(--ai-text-primary);
+                font-size: 0.875rem;
+                appearance: none;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23adb5bd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: right 0.75rem center;
+                cursor: pointer;
 
                 &:focus {
                     outline: none;
                     border-color: var(--ai-primary);
+                    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+                }
+
+                // 下拉选项样式
+                option {
+                    background-color: var(--ai-bg-secondary);
+                    color: var(--ai-text-primary);
+                    padding: 0.5rem;
                 }
             }
         }
@@ -244,11 +258,11 @@
 
                 label {
                     font-weight: 500;
-                    color: var(--ai-dark);
+                    color: var(--ai-text-primary);
                 }
 
                 span {
-                    color: var(--ai-secondary);
+                    color: var(--ai-text-secondary);
                 }
             }
         }
@@ -269,7 +283,7 @@
 
         .icon-pause-circle {
             font-size: 4rem;
-            color: var(--ai-secondary);
+            color: var(--ai-text-secondary);
             margin-bottom: 1rem;
         }
 
@@ -277,12 +291,12 @@
             margin: 0 0 0.75rem 0;
             font-size: 1.5rem;
             font-weight: 600;
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
         }
 
         p {
             margin: 0 0 2rem 0;
-            color: var(--ai-secondary);
+            color: var(--ai-text-secondary);
             font-size: 1rem;
         }
 

package/src/components/settings/ai-settings-tab.component.ts

@@ -1,38 +1,77 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, 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 { TranslateService } from '../../i18n';
+
+// 动态读取 package.json 中的版本号
+declare const require: (path: string) => any;
+const packageJson = require('../../../package.json');
+const PLUGIN_VERSION = packageJson.version;
 
 @Component({
     selector: 'app-ai-settings-tab',
     templateUrl: './ai-settings-tab.component.html',
-    styleUrls: ['./ai-settings-tab.component.scss']
+    styleUrls: ['./ai-settings-tab.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class AiSettingsTabComponent implements OnInit {
+export class AiSettingsTabComponent implements OnInit, OnDestroy {
     activeTab = 'general';
     isEnabled = true;
     currentProvider = '';
     providerStatus: any = {};
+    pluginVersion: string = PLUGIN_VERSION;
+
+    // 翻译对象
+    t: any;
+
+    // Tab 定义（使用翻译 key）
+    tabs: { id: string; labelKey: string; icon: string }[] = [];
 
-    tabs = [
-        { id: 'general', label: '基本设置', icon: 'fa fa-cog' },
-        { id: 'providers', label: 'AI提供商', icon: 'fa fa-cloud' },
-        { id: 'security', label: '安全设置', icon: 'fa fa-shield' },
-        { id: 'chat', label: '聊天设置', icon: 'fa fa-comments' },
-        { id: 'advanced', label: '高级设置', icon: 'fa fa-sliders' }
-    ];
+    private destroy$ = new Subject<void>();
 
     constructor(
         private aiService: AiAssistantService,
         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.updateTabLabels();
+        });
+
         this.loadSettings();
         this.loadProviderStatus();
     }
 
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     * 更新 Tab 标签
+     */
+    private updateTabLabels(): void {
+        this.tabs = [
+            { id: 'general', labelKey: 'settings.generalTab', icon: 'fa fa-cog' },
+            { id: 'providers', labelKey: 'settings.providersTab', icon: 'fa fa-cloud' },
+            { id: 'security', labelKey: 'settings.securityTab', icon: 'fa fa-shield' },
+            { id: 'chat', labelKey: 'settings.chatTab', icon: 'fa fa-comments' },
+            { id: 'advanced', labelKey: 'settings.advancedTab', icon: 'fa fa-sliders' }
+        ];
+    }
+
     /**
      * 加载设置
      */
@@ -115,7 +154,7 @@ export class AiSettingsTabComponent implements OnInit {
      * 获取提供商状态文本
      */
     getProviderStatusText(healthy: boolean): string {
-        return healthy ? '正常' : '异常';
+        return healthy ? this.t.common.enabled : this.t.common.disabled;
     }
 
     /**
@@ -127,13 +166,13 @@ export class AiSettingsTabComponent implements OnInit {
             const invalidProviders = results.filter(r => !r.valid);
 
             if (invalidProviders.length > 0) {
-                alert(`发现 ${invalidProviders.length} 个配置问题，请检查AI提供商设置。`);
+                alert(`${this.t.advancedSettings.validateConfig}: ${invalidProviders.length} ${this.t.chatSettings.resetConfirm}`);
             } else {
-                alert('所有配置验证通过！');
+                alert(this.t.providers.testSuccess);
             }
         } catch (error) {
             this.logger.error('Failed to validate config', error);
-            alert('配置验证失败，请检查日志。');
+            alert(this.t.chatInterface.errorPrefix);
         }
     }
 
@@ -166,11 +205,11 @@ export class AiSettingsTabComponent implements OnInit {
                     try {
                         const config = e.target?.result as string;
                         this.config.importConfig(config);
-                        alert('配置导入成功，请重启插件生效。');
+                        alert(this.t.providers.configSaved);
                         this.loadSettings();
                         this.loadProviderStatus();
                     } catch (error) {
-                        alert('配置导入失败，请检查文件格式。');
+                        alert(this.t.chatInterface.errorPrefix);
                     }
                 };
                 reader.readAsText(file);
@@ -183,11 +222,11 @@ export class AiSettingsTabComponent implements OnInit {
      * 重置为默认配置
      */
     resetToDefaults(): void {
-        if (confirm('确定要重置所有设置为默认值吗？此操作不可恢复。')) {
+        if (confirm(this.t.chatSettings.resetConfirm)) {
             this.config.reset();
             this.loadSettings();
             this.loadProviderStatus();
-            alert('配置已重置为默认值。');
+            alert(this.t.providers.configSaved);
         }
     }
 }