tabby-ai-assistant 1.0.5 → 1.0.6

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

@@ -15,18 +15,18 @@ export class AiSettingsTabComponent implements OnInit {
     providerStatus: any = {};
 
     tabs = [
-        { id: 'general', label: '基本设置', icon: 'icon-settings' },
-        { id: 'providers', label: 'AI提供商', icon: 'icon-provider' },
-        { id: 'security', label: '安全设置', icon: 'icon-shield' },
-        { id: 'chat', label: '聊天设置', icon: 'icon-chat' },
-        { id: 'advanced', label: '高级设置', icon: 'icon-advanced' }
+        { 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' }
     ];
 
     constructor(
         private aiService: AiAssistantService,
         private config: ConfigProviderService,
         private logger: LoggerService
-    ) {}
+    ) { }
 
     ngOnInit(): void {
         this.loadSettings();
@@ -95,13 +95,13 @@ export class AiSettingsTabComponent implements OnInit {
      */
     getProviderIcon(providerName: string): string {
         const icons: { [key: string]: string } = {
-            'openai': 'icon-openai',
-            'anthropic': 'icon-anthropic',
-            'minimax': 'icon-minimax',
-            'glm': 'icon-glm',
-            'openai-compatible': 'icon-compatible'
+            'openai': 'fa fa-robot',
+            'anthropic': 'fa fa-brain',
+            'minimax': 'fa fa-microchip',
+            'glm': 'fa fa-language',
+            'openai-compatible': 'fa fa-plug'
         };
-        return icons[providerName] || 'icon-provider';
+        return icons[providerName] || 'fa fa-cloud';
     }
 
     /**

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

@@ -5,11 +5,7 @@
     <div class="settings-section">
         <h4>功能状态</h4>
         <div class="form-check">
-            <input
-                type="checkbox"
-                id="enabled"
-                [(ngModel)]="isEnabled"
-                (change)="updateEnabled(isEnabled)">
+            <input type="checkbox" id="enabled" [(ngModel)]="isEnabled" (change)="updateEnabled(isEnabled)">
             <label for="enabled">
                 <strong>启用AI助手</strong>
                 <p class="form-description">启用或禁用整个AI助手功能</p>
@@ -23,13 +19,11 @@
         <div class="provider-selector">
             <label>选择默认提供商</label>
             <div class="providers-grid">
-                <div
-                    *ngFor="let provider of availableProviders"
-                    class="provider-card"
+                <div *ngFor="let provider of availableProviders" class="provider-card"
                     [class.selected]="selectedProvider === provider.name"
                     (click)="updateDefaultProvider(provider.name)">
                     <div class="provider-header">
-                        <i class="icon-provider"></i>
+                        <i class="fa fa-cloud"></i>
                         <h5>{{ provider.displayName }}</h5>
                     </div>
                     <div class="provider-body">
@@ -61,13 +55,10 @@
         <div class="form-group">
             <label>主题</label>
             <div class="theme-selector">
-                <button
-                    *ngFor="let theme of themes"
-                    class="theme-btn"
-                    [class.active]="this.theme === theme.value"
-                    (click)="updateTheme(theme.value)">
-                    <div class="theme-preview" [attr.data-theme]="theme.value"></div>
-                    <span>{{ theme.label }}</span>
+                <button *ngFor="let themeOption of themes" class="theme-btn"
+                    [class.active]="theme === themeOption.value" (click)="updateTheme(themeOption.value)" type="button">
+                    <div class="theme-preview" [attr.data-theme]="themeOption.value"></div>
+                    <span>{{ themeOption.label }}</span>
                 </button>
             </div>
         </div>
@@ -100,4 +91,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -235,12 +235,15 @@
 
                 kbd {
                     padding: 0.25rem 0.5rem;
-                    background-color: var(--ai-bg-primary);
-                    border: 1px solid var(--ai-border);
+                    background-color: var(--ai-bg-primary, #2a2a40);
+                    border: 1px solid var(--ai-border, #444);
                     border-radius: 0.25rem;
                     font-size: 0.75rem;
                     font-family: monospace;
                     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                    color: var(--ai-dark, #e0e0e0);
+                    display: inline-block;
+                    margin: 0 0.125rem;
                 }
             }
         }
@@ -282,4 +285,4 @@
             }
         }
     }
-}
+}

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

@@ -2,6 +2,7 @@ import { Component, Output, EventEmitter, OnInit } from '@angular/core';
 import { AiAssistantService } from '../../services/core/ai-assistant.service';
 import { ConfigProviderService } from '../../services/core/config-provider.service';
 import { LoggerService } from '../../services/core/logger.service';
+import { ConfigService } from 'tabby-core';
 
 @Component({
     selector: 'app-general-settings',
@@ -12,10 +13,10 @@ export class GeneralSettingsComponent implements OnInit {
     @Output() providerChanged = new EventEmitter<string>();
 
     availableProviders: any[] = [];
-    selectedProvider = '';
-    isEnabled = true;
-    language = 'zh-CN';
-    theme = 'auto';
+    selectedProvider: string = '';
+    isEnabled: boolean = true;
+    language: string = 'zh-CN';
+    theme: string = 'auto';
 
     languages = [
         { value: 'zh-CN', label: '简体中文' },
@@ -29,33 +30,53 @@ export class GeneralSettingsComponent implements OnInit {
         { value: 'dark', label: '深色主题' }
     ];
 
+    // 提供商模板，用于显示名称
+    private providerNames: { [key: string]: string } = {
+        'openai': 'OpenAI',
+        'anthropic': 'Anthropic Claude',
+        'minimax': 'Minimax',
+        'glm': 'GLM (ChatGLM)'
+    };
+
     constructor(
         private aiService: AiAssistantService,
         private config: ConfigProviderService,
+        private tabbyConfig: ConfigService,
         private logger: LoggerService
-    ) {}
+    ) { }
 
     ngOnInit(): void {
         this.loadSettings();
         this.loadProviders();
+        // 应用当前主题
+        this.applyTheme(this.theme);
     }
 
     /**
      * 加载设置
      */
     private loadSettings(): void {
-        this.selectedProvider = this.config.getDefaultProvider();
-        this.isEnabled = this.config.isEnabled();
-        this.language = this.config.get('language', 'zh-CN');
-        this.theme = this.config.get('theme', 'auto');
+        this.selectedProvider = this.config.getDefaultProvider() || '';
+        this.isEnabled = this.config.isEnabled() ?? true;
+        this.language = this.config.get('language', 'zh-CN') || 'zh-CN';
+        this.theme = this.config.get('theme', 'auto') || 'auto';
     }
 
     /**
-     * 加载可用提供商
+     * 加载可用提供商 - 从配置服务读取已配置的提供商
      */
     private loadProviders(): void {
-        const status = this.aiService.getProviderStatus();
-        this.availableProviders = status.all || [];
+        const allConfigs = this.config.getAllProviderConfigs();
+        this.availableProviders = Object.keys(allConfigs)
+            .filter(key => allConfigs[key] && allConfigs[key].apiKey)
+            .map(key => ({
+                name: key,
+                displayName: allConfigs[key].displayName || this.providerNames[key] || key,
+                description: `已配置的 ${this.providerNames[key] || key} 提供商`,
+                enabled: allConfigs[key].enabled !== false
+            }));
+
+        this.logger.info('Loaded providers from config', { count: this.availableProviders.length });
     }
 
     /**
@@ -97,16 +118,28 @@ export class GeneralSettingsComponent implements OnInit {
     }
 
     /**
-     * 应用主题
+     * 应用主题 - 同步 Tabby 主题或手动设置
      */
     private applyTheme(theme: string): void {
-        const body = document.body;
-        body.classList.remove('light-theme', 'dark-theme');
+        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 === 'light') {
-            body.classList.add('light-theme');
-        } else if (theme === 'dark') {
-            body.classList.add('dark-theme');
+        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');
         }
     }
 
@@ -114,10 +147,17 @@ export class GeneralSettingsComponent implements OnInit {
      * 获取提供商状态
      */
     getProviderStatus(providerName: string): { text: string; color: string } {
-        // TODO: 实现真实的健康检查
+        const providerConfig = this.config.getProviderConfig(providerName);
+        if (providerConfig && providerConfig.apiKey) {
+            return {
+                text: providerConfig.enabled !== false ? '已启用' : '已禁用',
+                color: providerConfig.enabled !== false ? '#4caf50' : '#ff9800'
+            };
+        }
         return {
-            text: '正常',
-            color: 'var(--ai-success)'
+            text: '未配置',
+            color: '#9e9e9e'
         };
     }
 }
+

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

@@ -3,34 +3,24 @@
 
     <!-- 可用提供商列表 -->
     <div class="providers-list">
-        <div
-            *ngFor="let providerName of Object.keys(providerTemplates)"
-            class="provider-item"
+        <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="icon-plus"></i>
+                <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"
+                <button *ngIf="hasConfig(providerName)" class="btn btn-secondary"
                     (click)="testConnection(providerName)">
-                    <i class="icon-test"></i>
+                    <i class="fa fa-plug"></i>
                     测试
                 </button>
-                <button
-                    *ngIf="hasConfig(providerName)"
-                    class="btn btn-danger"
-                    (click)="removeProvider(providerName)">
-                    <i class="icon-trash"></i>
+                <button *ngIf="hasConfig(providerName)" class="btn btn-danger" (click)="removeProvider(providerName)">
+                    <i class="fa fa-trash"></i>
                     删除
                 </button>
             </div>
@@ -40,20 +30,15 @@
                 <div class="form-row">
                     <div class="form-group">
                         <label>显示名称</label>
-                        <input
-                            type="text"
-                            class="form-control"
-                            [(ngModel)]="configs[providerName].displayName">
+                        <input type="text" class="form-control" [(ngModel)]="configs[providerName].displayName">
                     </div>
                     <div class="form-group">
                         <label>状态</label>
                         <div class="toggle-switch">
-                            <input
-                                type="checkbox"
-                                [id]="'enabled-' + providerName"
+                            <input type="checkbox" [id]="'enabled-' + providerName"
                                 [checked]="configs[providerName].enabled"
                                 (change)="toggleProviderEnabled(providerName)">
-                            <label [for]="'enabled-' + providerName]">
+                            <label [for]="'enabled-' + providerName">
                                 {{ configs[providerName].enabled ? '已启用' : '已禁用' }}
                             </label>
                         </div>
@@ -65,18 +50,13 @@
                         {{ field.label }}
                         <span *ngIf="isRequired(field)" class="required">*</span>
                     </label>
-                    <input
-                        *ngIf="getFieldType(field) === 'text'"
-                        [type]="isPasswordField(field) ? 'password' : 'text'"
-                        class="form-control"
-                        [placeholder]="field.placeholder || ''"
-                        [value]="getConfigValue(providerName, field.key, field.default)"
-                        (input)="updateConfigValue(providerName, field.key, $any($event.target).value)">
-                    <select
-                        *ngIf="getFieldType(field) === 'select'"
-                        class="form-control"
-                        [value]="getConfigValue(providerName, field.key, field.default)"
-                        (change)="updateConfigValue(providerName, field.key, $any($event.target).value)">
+                    <!-- 文本和密码输入框 -->
+                    <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>
@@ -85,11 +65,11 @@
 
                 <div class="form-actions">
                     <button class="btn btn-primary" (click)="saveConfig(providerName)">
-                        <i class="icon-save"></i>
+                        <i class="fa fa-save"></i>
                         保存配置
                     </button>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -1,60 +1,203 @@
 /* Provider Configuration Styles */
 .provider-config {
-    .form-group {
-        margin-bottom: 1rem;
-    }
+    max-width: 900px;
 
-    .form-label {
+    h3 {
+        margin: 0 0 1.5rem 0;
+        font-size: 1.25rem;
         font-weight: 600;
-        margin-bottom: 0.5rem;
-        display: block;
+        color: var(--ai-dark);
+    }
+
+    .providers-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
     }
 
-    .form-control {
-        width: 100%;
-        padding: 0.5rem;
-        border: 1px solid #ccc;
-        border-radius: 4px;
+    .provider-item {
+        padding: 1.5rem;
+        background-color: var(--ai-bg-secondary);
+        border-radius: 0.5rem;
+        border: 1px solid var(--ai-border);
 
-        &:focus {
-            outline: none;
-            border-color: #007bff;
-            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+        &.configured {
+            border-color: var(--ai-primary);
+            border-width: 2px;
+        }
+
+        .provider-info {
+            margin-bottom: 1rem;
+
+            h4 {
+                margin: 0 0 0.5rem 0;
+                font-size: 1.125rem;
+                font-weight: 600;
+                color: var(--ai-dark);
+            }
+
+            p {
+                margin: 0;
+                font-size: 0.875rem;
+                color: var(--ai-secondary);
+            }
         }
-    }
 
-    .btn {
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: background-color 0.2s;
+        .provider-actions {
+            display: flex;
+            gap: 0.75rem;
+            margin-bottom: 1rem;
 
-        &.btn-primary {
-            background-color: #007bff;
-            color: white;
+            .btn {
+                padding: 0.5rem 1rem;
+                border: none;
+                border-radius: 0.375rem;
+                cursor: pointer;
+                transition: all 0.2s;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.375rem;
+                font-size: 0.875rem;
+                font-weight: 500;
 
-            &:hover {
-                background-color: #0056b3;
+                &.btn-primary {
+                    background-color: var(--ai-primary);
+                    color: white;
+
+                    &:hover {
+                        background-color: #0056b3;
+                    }
+                }
+
+                &.btn-secondary {
+                    background-color: var(--ai-secondary);
+                    color: white;
+
+                    &:hover {
+                        background-color: #5a6268;
+                    }
+                }
+
+                &.btn-danger {
+                    background-color: var(--ai-danger);
+                    color: white;
+
+                    &:hover {
+                        background-color: #c82333;
+                    }
+                }
             }
         }
     }
 
-    .alert {
-        padding: 0.75rem;
-        border-radius: 4px;
-        margin-bottom: 1rem;
+    .config-form {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--ai-border);
 
-        &.alert-danger {
-            background-color: #f8d7da;
-            border: 1px solid #f5c6cb;
-            color: #721c24;
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+            margin-bottom: 1rem;
         }
 
-        &.alert-success {
-            background-color: #d4edda;
-            border: 1px solid #c3e6cb;
-            color: #155724;
+        .form-group {
+            margin-bottom: 1rem;
+
+            label {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--ai-dark);
+                font-size: 0.875rem;
+
+                .required {
+                    color: var(--ai-danger);
+                    margin-left: 0.25rem;
+                }
+            }
+
+            .form-control {
+                width: 100%;
+                padding: 0.625rem 0.75rem;
+                border: 1px solid var(--ai-border);
+                border-radius: 0.375rem;
+                background-color: var(--ai-bg-primary);
+                color: var(--ai-dark);
+                font-size: 0.875rem;
+                transition: border-color 0.2s, box-shadow 0.2s;
+
+                &:focus {
+                    outline: none;
+                    border-color: var(--ai-primary);
+                    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
+                }
+
+                &::placeholder {
+                    color: var(--ai-secondary);
+                    opacity: 0.6;
+                }
+            }
+
+            select.form-control {
+                cursor: pointer;
+                appearance: auto;
+            }
+        }
+
+        .toggle-switch {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            input[type="checkbox"] {
+                width: 1.25rem;
+                height: 1.25rem;
+                accent-color: var(--ai-primary);
+            }
+
+            label {
+                margin: 0;
+                font-weight: normal;
+            }
+        }
+
+        .form-actions {
+            margin-top: 1.5rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--ai-border);
+
+            .btn {
+                padding: 0.625rem 1.25rem;
+                border: none;
+                border-radius: 0.375rem;
+                cursor: pointer;
+                transition: all 0.2s;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.875rem;
+                font-weight: 500;
+
+                &.btn-primary {
+                    background-color: var(--ai-primary);
+                    color: white;
+
+                    &:hover {
+                        background-color: #0056b3;
+                    }
+                }
+            }
         }
     }
 }
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .provider-config {
+        .config-form .form-row {
+            grid-template-columns: 1fr;
+        }
+    }
+}