tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,285 @@
+.general-settings {
+    max-width: 900px;
+
+    h3 {
+        margin: 0 0 1.5rem 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--ai-dark);
+    }
+
+    .settings-section {
+        margin-bottom: 2rem;
+        padding: 1.5rem;
+        background-color: var(--ai-bg-secondary);
+        border-radius: 0.5rem;
+        border: 1px solid var(--ai-border);
+
+        h4 {
+            margin: 0 0 1rem 0;
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: var(--ai-dark);
+        }
+
+        .form-check {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.75rem;
+
+            input[type="checkbox"] {
+                width: 1.25rem;
+                height: 1.25rem;
+                margin-top: 0.125rem;
+                accent-color: var(--ai-primary);
+            }
+
+            label {
+                margin: 0;
+                cursor: pointer;
+
+                strong {
+                    display: block;
+                    margin-bottom: 0.25rem;
+                    color: var(--ai-dark);
+                }
+
+                .form-description {
+                    margin: 0;
+                    font-size: 0.875rem;
+                    color: var(--ai-secondary);
+                }
+            }
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+
+            label {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--ai-dark);
+            }
+
+            .form-control {
+                width: 250px;
+                padding: 0.5rem 0.75rem;
+                border: 1px solid var(--ai-border);
+                border-radius: 0.375rem;
+                background-color: var(--ai-bg-primary);
+                color: var(--ai-dark);
+                font-size: 14px;
+
+                &:focus {
+                    outline: none;
+                    border-color: var(--ai-primary);
+                    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
+                }
+            }
+        }
+
+        .provider-selector {
+            label {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 1rem;
+                color: var(--ai-dark);
+            }
+
+            .providers-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                gap: 1rem;
+
+                .provider-card {
+                    padding: 1rem;
+                    border: 2px solid var(--ai-border);
+                    border-radius: 0.5rem;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    background-color: var(--ai-bg-primary);
+
+                    &:hover {
+                        border-color: var(--ai-primary);
+                        transform: translateY(-2px);
+                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                    }
+
+                    &.selected {
+                        border-color: var(--ai-primary);
+                        background-color: rgba(0, 123, 255, 0.05);
+                    }
+
+                    .provider-header {
+                        display: flex;
+                        align-items: center;
+                        gap: 0.75rem;
+                        margin-bottom: 0.5rem;
+
+                        i {
+                            font-size: 1.5rem;
+                            color: var(--ai-primary);
+                        }
+
+                        h5 {
+                            margin: 0;
+                            font-size: 1rem;
+                            font-weight: 600;
+                            color: var(--ai-dark);
+                        }
+                    }
+
+                    .provider-body {
+                        .provider-desc {
+                            margin: 0 0 0.75rem 0;
+                            font-size: 0.875rem;
+                            color: var(--ai-secondary);
+                        }
+
+                        .provider-meta {
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .status-badge {
+                                font-size: 0.75rem;
+                                font-weight: 500;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .theme-selector {
+            display: flex;
+            gap: 0.75rem;
+            flex-wrap: wrap;
+
+            .theme-btn {
+                padding: 0.75rem;
+                border: 2px solid var(--ai-border);
+                border-radius: 0.5rem;
+                background-color: var(--ai-bg-primary);
+                cursor: pointer;
+                transition: all 0.2s;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 0.5rem;
+                min-width: 100px;
+
+                &:hover {
+                    border-color: var(--ai-primary);
+                }
+
+                &.active {
+                    border-color: var(--ai-primary);
+                    background-color: rgba(0, 123, 255, 0.05);
+                }
+
+                .theme-preview {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 0.375rem;
+                    border: 1px solid var(--ai-border);
+
+                    &[data-theme="light"] {
+                        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+                    }
+
+                    &[data-theme="dark"] {
+                        background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
+                    }
+
+                    &[data-theme="auto"] {
+                        background: linear-gradient(135deg, #ffffff 0%, #2d3748 100%);
+                    }
+                }
+
+                span {
+                    font-size: 0.875rem;
+                    color: var(--ai-dark);
+                }
+            }
+        }
+
+        .hotkey-list {
+            .hotkey-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0.75rem 0;
+                border-bottom: 1px solid var(--ai-border);
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                .hotkey-info {
+                    flex: 1;
+
+                    strong {
+                        display: block;
+                        margin-bottom: 0.25rem;
+                        color: var(--ai-dark);
+                    }
+
+                    .form-description {
+                        margin: 0;
+                        font-size: 0.875rem;
+                        color: var(--ai-secondary);
+                    }
+                }
+
+                kbd {
+                    padding: 0.25rem 0.5rem;
+                    background-color: var(--ai-bg-primary);
+                    border: 1px solid var(--ai-border);
+                    border-radius: 0.25rem;
+                    font-size: 0.75rem;
+                    font-family: monospace;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .general-settings {
+        .settings-section {
+            padding: 1rem;
+
+            .providers-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .theme-selector {
+                .theme-btn {
+                    min-width: 80px;
+                    padding: 0.5rem;
+
+                    .theme-preview {
+                        width: 32px;
+                        height: 32px;
+                    }
+
+                    span {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+
+            .hotkey-list {
+                .hotkey-item {
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 0.5rem;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,123 @@
+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';
+
+@Component({
+    selector: 'app-general-settings',
+    templateUrl: './general-settings.component.html',
+    styleUrls: ['./general-settings.component.scss']
+})
+export class GeneralSettingsComponent implements OnInit {
+    @Output() providerChanged = new EventEmitter<string>();
+
+    availableProviders: any[] = [];
+    selectedProvider = '';
+    isEnabled = true;
+    language = 'zh-CN';
+    theme = 'auto';
+
+    languages = [
+        { value: 'zh-CN', label: '简体中文' },
+        { value: 'en-US', label: 'English' },
+        { value: 'ja-JP', label: '日本語' }
+    ];
+
+    themes = [
+        { value: 'auto', label: '跟随系统' },
+        { value: 'light', label: '浅色主题' },
+        { value: 'dark', label: '深色主题' }
+    ];
+
+    constructor(
+        private aiService: AiAssistantService,
+        private config: ConfigProviderService,
+        private logger: LoggerService
+    ) {}
+
+    ngOnInit(): void {
+        this.loadSettings();
+        this.loadProviders();
+    }
+
+    /**
+     * 加载设置
+     */
+    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');
+    }
+
+    /**
+     * 加载可用提供商
+     */
+    private loadProviders(): void {
+        const status = this.aiService.getProviderStatus();
+        this.availableProviders = status.all || [];
+    }
+
+    /**
+     * 更新默认提供商
+     */
+    updateDefaultProvider(providerName: string): void {
+        this.selectedProvider = providerName;
+        this.config.setDefaultProvider(providerName);
+        this.providerChanged.emit(providerName);
+        this.logger.info('Default provider updated', { provider: providerName });
+    }
+
+    /**
+     * 更新启用状态
+     */
+    updateEnabled(enabled: boolean): void {
+        this.isEnabled = enabled;
+        this.config.setEnabled(enabled);
+        this.logger.info('AI Assistant enabled state changed', { enabled });
+    }
+
+    /**
+     * 更新语言
+     */
+    updateLanguage(language: string): void {
+        this.language = language;
+        this.config.set('language', language);
+        this.logger.info('Language updated', { language });
+    }
+
+    /**
+     * 更新主题
+     */
+    updateTheme(theme: string): void {
+        this.theme = theme;
+        this.config.set('theme', theme);
+        this.applyTheme(theme);
+        this.logger.info('Theme updated', { 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');
+        }
+    }
+
+    /**
+     * 获取提供商状态
+     */
+    getProviderStatus(providerName: string): { text: string; color: string } {
+        // TODO: 实现真实的健康检查
+        return {
+            text: '正常',
+            color: 'var(--ai-success)'
+        };
+    }
+}

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

@@ -0,0 +1,95 @@
+<div class="provider-config">
+    <h3>AI提供商配置</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="icon-plus"></i>
+                    添加
+                </button>
+                <button
+                    *ngIf="hasConfig(providerName)"
+                    class="btn btn-secondary"
+                    (click)="testConnection(providerName)">
+                    <i class="icon-test"></i>
+                    测试
+                </button>
+                <button
+                    *ngIf="hasConfig(providerName)"
+                    class="btn btn-danger"
+                    (click)="removeProvider(providerName)">
+                    <i class="icon-trash"></i>
+                    删除
+                </button>
+            </div>
+
+            <!-- 配置表单 -->
+            <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>
+                    <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 ? '已启用' : '已禁用' }}
+                            </label>
+                        </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'"
+                        [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)">
+                        <option *ngFor="let option of getFieldOptions(field)" [value]="option">
+                            {{ option }}
+                        </option>
+                    </select>
+                </div>
+
+                <div class="form-actions">
+                    <button class="btn btn-primary" (click)="saveConfig(providerName)">
+                        <i class="icon-save"></i>
+                        保存配置
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,60 @@
+/* Provider Configuration Styles */
+.provider-config {
+    .form-group {
+        margin-bottom: 1rem;
+    }
+
+    .form-label {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        display: block;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 0.5rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+
+        &:focus {
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+        }
+    }
+
+    .btn {
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+
+        &.btn-primary {
+            background-color: #007bff;
+            color: white;
+
+            &:hover {
+                background-color: #0056b3;
+            }
+        }
+    }
+
+    .alert {
+        padding: 0.75rem;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+
+        &.alert-danger {
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+        }
+
+        &.alert-success {
+            background-color: #d4edda;
+            border: 1px solid #c3e6cb;
+            color: #155724;
+        }
+    }
+}