tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,371 @@
+.ai-settings-tab {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--ai-bg-primary);
+}
+
+/* 头部 */
+.settings-header {
+    padding: 1.5rem;
+    background-color: var(--ai-bg-secondary);
+    border-bottom: 1px solid var(--ai-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .header-content {
+        flex: 1;
+
+        h2 {
+            margin: 0 0 0.75rem 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--ai-dark);
+
+            .icon-robot {
+                font-size: 1.75rem;
+            }
+        }
+
+        .header-status {
+            display: flex;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+
+            .status-indicator,
+            .provider-info {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.875rem;
+
+                .icon-power {
+                    font-size: 1rem;
+                }
+            }
+
+            .status-indicator {
+                &.enabled {
+                    color: var(--ai-success);
+
+                    .icon-power {
+                        animation: pulse 2s infinite;
+                    }
+                }
+
+                &:not(.enabled) {
+                    color: var(--ai-secondary);
+                }
+            }
+
+            .provider-info {
+                color: var(--ai-secondary);
+            }
+        }
+    }
+
+    .header-actions {
+        display: flex;
+        gap: 0.5rem;
+
+        .btn-icon {
+            width: 40px;
+            height: 40px;
+            border: none;
+            background: transparent;
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            color: var(--ai-secondary);
+
+            &:hover {
+                background-color: var(--ai-border);
+                color: var(--ai-dark);
+            }
+
+            .icon-refresh {
+                animation: spin 2s linear infinite;
+            }
+        }
+    }
+}
+
+/* 标签页导航 */
+.tabs-nav {
+    display: flex;
+    background-color: var(--ai-bg-secondary);
+    border-bottom: 1px solid var(--ai-border);
+    overflow-x: auto;
+
+    .tab-button {
+        padding: 0.75rem 1.5rem;
+        border: none;
+        background: transparent;
+        border-bottom: 2px solid transparent;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        transition: all 0.2s;
+        color: var(--ai-secondary);
+        white-space: nowrap;
+        font-size: 0.875rem;
+        font-weight: 500;
+
+        &:hover {
+            color: var(--ai-dark);
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        &.active {
+            color: var(--ai-primary);
+            border-bottom-color: var(--ai-primary);
+            background-color: rgba(0, 123, 255, 0.05);
+        }
+
+        .icon-settings,
+        .icon-provider,
+        .icon-shield,
+        .icon-chat,
+        .icon-advanced {
+            font-size: 1rem;
+        }
+    }
+}
+
+/* 内容区域 */
+.settings-content {
+    flex: 1;
+    overflow-y: auto;
+
+    .tab-content {
+        padding: 1.5rem;
+    }
+}
+
+/* 高级设置 */
+.advanced-settings {
+    max-width: 800px;
+
+    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);
+        }
+
+        .btn {
+            padding: 0.5rem 1rem;
+            margin-right: 0.75rem;
+            margin-bottom: 0.5rem;
+            border: none;
+            border-radius: 0.375rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.375rem;
+            font-size: 0.875rem;
+
+            &.btn-primary {
+                background-color: var(--ai-primary);
+                color: white;
+
+                &:hover {
+                    background-color: darken(#007bff, 7.5%);
+                }
+            }
+
+            &.btn-warning {
+                background-color: var(--ai-warning);
+                color: var(--ai-dark);
+
+                &:hover {
+                    background-color: darken(#ffc107, 7.5%);
+                }
+            }
+        }
+
+        .log-level-selector {
+            label {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--ai-dark);
+            }
+
+            .form-control {
+                width: 200px;
+                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);
+
+                &:focus {
+                    outline: none;
+                    border-color: var(--ai-primary);
+                }
+            }
+        }
+
+        .system-info {
+            .info-item {
+                display: flex;
+                justify-content: space-between;
+                padding: 0.5rem 0;
+                border-bottom: 1px solid var(--ai-border);
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                label {
+                    font-weight: 500;
+                    color: var(--ai-dark);
+                }
+
+                span {
+                    color: var(--ai-secondary);
+                }
+            }
+        }
+    }
+}
+
+/* 禁用提示 */
+.disabled-message {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+
+    .message-content {
+        text-align: center;
+        max-width: 400px;
+
+        .icon-pause-circle {
+            font-size: 4rem;
+            color: var(--ai-secondary);
+            margin-bottom: 1rem;
+        }
+
+        h3 {
+            margin: 0 0 0.75rem 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--ai-dark);
+        }
+
+        p {
+            margin: 0 0 2rem 0;
+            color: var(--ai-secondary);
+            font-size: 1rem;
+        }
+
+        .btn {
+            padding: 0.75rem 2rem;
+            border: none;
+            border-radius: 0.5rem;
+            background-color: var(--ai-primary);
+            color: white;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1rem;
+
+            &:hover {
+                background-color: darken(#007bff, 7.5%);
+                transform: translateY(-1px);
+            }
+        }
+    }
+}
+
+/* 动画 */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .settings-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+
+        .header-content {
+            width: 100%;
+
+            .header-status {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        }
+
+        .header-actions {
+            width: 100%;
+            justify-content: flex-end;
+        }
+    }
+
+    .tabs-nav {
+        .tab-button {
+            padding: 0.5rem 1rem;
+            font-size: 0.8rem;
+        }
+    }
+
+    .settings-content .tab-content {
+        padding: 1rem;
+    }
+
+    .advanced-settings {
+        .settings-section {
+            padding: 1rem;
+
+            .btn {
+                width: 100%;
+                margin-right: 0;
+                justify-content: center;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,193 @@
+import { Component, 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-ai-settings-tab',
+    templateUrl: './ai-settings-tab.component.html',
+    styleUrls: ['./ai-settings-tab.component.scss']
+})
+export class AiSettingsTabComponent implements OnInit {
+    activeTab = 'general';
+    isEnabled = true;
+    currentProvider = '';
+    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' }
+    ];
+
+    constructor(
+        private aiService: AiAssistantService,
+        private config: ConfigProviderService,
+        private logger: LoggerService
+    ) {}
+
+    ngOnInit(): void {
+        this.loadSettings();
+        this.loadProviderStatus();
+    }
+
+    /**
+     * 加载设置
+     */
+    private loadSettings(): void {
+        this.isEnabled = this.config.isEnabled();
+        const defaultProvider = this.config.getDefaultProvider();
+        this.currentProvider = defaultProvider;
+    }
+
+    /**
+     * 加载提供商状态
+     */
+    private loadProviderStatus(): void {
+        this.providerStatus = this.aiService.getProviderStatus();
+    }
+
+    /**
+     * 切换标签页
+     */
+    switchTab(tabId: string): void {
+        this.activeTab = tabId;
+    }
+
+    /**
+     * 切换启用状态
+     */
+    toggleEnabled(): void {
+        this.isEnabled = !this.isEnabled;
+        this.config.setEnabled(this.isEnabled);
+
+        if (this.isEnabled) {
+            this.logger.info('AI Assistant enabled');
+        } else {
+            this.logger.info('AI Assistant disabled');
+        }
+    }
+
+    /**
+     * 切换提供商
+     */
+    switchProvider(providerName: string): void {
+        if (this.aiService.switchProvider(providerName)) {
+            this.currentProvider = providerName;
+            this.config.setDefaultProvider(providerName);
+            this.loadProviderStatus();
+            this.logger.info('Provider switched', { provider: providerName });
+        }
+    }
+
+    /**
+     * 刷新提供商状态
+     */
+    async refreshProviderStatus(): Promise<void> {
+        this.loadProviderStatus();
+        this.logger.debug('Provider status refreshed');
+    }
+
+    /**
+     * 获取提供商图标类名
+     */
+    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'
+        };
+        return icons[providerName] || 'icon-provider';
+    }
+
+    /**
+     * 获取提供商状态颜色
+     */
+    getProviderStatusColor(healthy: boolean): string {
+        return healthy ? 'var(--ai-success)' : 'var(--ai-danger)';
+    }
+
+    /**
+     * 获取提供商状态文本
+     */
+    getProviderStatusText(healthy: boolean): string {
+        return healthy ? '正常' : '异常';
+    }
+
+    /**
+     * 验证配置
+     */
+    async validateConfig(): Promise<void> {
+        try {
+            const results = await this.aiService.validateConfig();
+            const invalidProviders = results.filter(r => !r.valid);
+
+            if (invalidProviders.length > 0) {
+                alert(`发现 ${invalidProviders.length} 个配置问题，请检查AI提供商设置。`);
+            } else {
+                alert('所有配置验证通过！');
+            }
+        } catch (error) {
+            this.logger.error('Failed to validate config', error);
+            alert('配置验证失败，请检查日志。');
+        }
+    }
+
+    /**
+     * 导出配置
+     */
+    exportConfig(): void {
+        const config = this.config.exportConfig();
+        const blob = new Blob([config], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `ai-assistant-config-${new Date().toISOString().slice(0, 10)}.json`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }
+
+    /**
+     * 导入配置
+     */
+    importConfig(): void {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.onchange = (event) => {
+            const file = (event.target as HTMLInputElement).files?.[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const config = e.target?.result as string;
+                        this.config.importConfig(config);
+                        alert('配置导入成功，请重启插件生效。');
+                        this.loadSettings();
+                        this.loadProviderStatus();
+                    } catch (error) {
+                        alert('配置导入失败，请检查文件格式。');
+                    }
+                };
+                reader.readAsText(file);
+            }
+        };
+        input.click();
+    }
+
+    /**
+     * 重置为默认配置
+     */
+    resetToDefaults(): void {
+        if (confirm('确定要重置所有设置为默认值吗？此操作不可恢复。')) {
+            this.config.reset();
+            this.loadSettings();
+            this.loadProviderStatus();
+            alert('配置已重置为默认值。');
+        }
+    }
+}

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

@@ -0,0 +1,103 @@
+<div class="general-settings">
+    <h3>基本设置</h3>
+
+    <!-- 启用状态 -->
+    <div class="settings-section">
+        <h4>功能状态</h4>
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="enabled"
+                [(ngModel)]="isEnabled"
+                (change)="updateEnabled(isEnabled)">
+            <label for="enabled">
+                <strong>启用AI助手</strong>
+                <p class="form-description">启用或禁用整个AI助手功能</p>
+            </label>
+        </div>
+    </div>
+
+    <!-- 默认提供商 -->
+    <div class="settings-section">
+        <h4>默认AI提供商</h4>
+        <div class="provider-selector">
+            <label>选择默认提供商</label>
+            <div class="providers-grid">
+                <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>
+                        <h5>{{ provider.displayName }}</h5>
+                    </div>
+                    <div class="provider-body">
+                        <p class="provider-desc">{{ provider.description || 'AI模型提供商' }}</p>
+                        <div class="provider-meta">
+                            <span class="status-badge" [style.color]="getProviderStatus(provider.name).color">
+                                {{ getProviderStatus(provider.name).text }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 界面设置 -->
+    <div class="settings-section">
+        <h4>界面设置</h4>
+
+        <div class="form-group">
+            <label>语言</label>
+            <select class="form-control" [(ngModel)]="language" (change)="updateLanguage(language)">
+                <option *ngFor="let lang of languages" [value]="lang.value">
+                    {{ lang.label }}
+                </option>
+            </select>
+        </div>
+
+        <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>
+            </div>
+        </div>
+    </div>
+
+    <!-- 快捷键提示 -->
+    <div class="settings-section">
+        <h4>快捷键</h4>
+        <div class="hotkey-list">
+            <div class="hotkey-item">
+                <div class="hotkey-info">
+                    <strong>打开AI助手</strong>
+                    <p class="form-description">打开聊天界面</p>
+                </div>
+                <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>
+            </div>
+            <div class="hotkey-item">
+                <div class="hotkey-info">
+                    <strong>生成命令</strong>
+                    <p class="form-description">从选择生成命令</p>
+                </div>
+                <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>
+            </div>
+            <div class="hotkey-item">
+                <div class="hotkey-info">
+                    <strong>解释命令</strong>
+                    <p class="form-description">解释当前选择</p>
+                </div>
+                <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd>
+            </div>
+        </div>
+    </div>
+</div>