tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,360 @@
+.risk-confirm-dialog {
+    background-color: var(--ai-bg-primary);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+/* 头部 */
+.dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--ai-border);
+
+    .risk-indicator {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        font-size: 1.125rem;
+        font-weight: 600;
+
+        i {
+            font-size: 1.5rem;
+        }
+
+        span {
+            color: var(--ai-dark);
+        }
+    }
+
+    .close-button {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        border-radius: 0.375rem;
+        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);
+        }
+    }
+}
+
+/* 内容 */
+.dialog-content {
+    padding: 1.5rem;
+    max-height: 60vh;
+    overflow-y: auto;
+
+    /* 风险警告 */
+    .risk-warning {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1.5rem;
+        border: 1px solid;
+
+        &.medium-risk {
+            background-color: rgba(255, 193, 7, 0.1);
+            border-color: var(--ai-warning);
+            color: #856404;
+
+            .warning-icon i {
+                color: var(--ai-warning);
+            }
+        }
+
+        &.high-risk {
+            background-color: rgba(253, 126, 20, 0.1);
+            border-color: var(--ai-risk-high);
+            color: var(--ai-risk-high);
+
+            .warning-icon i {
+                color: var(--ai-risk-high);
+            }
+        }
+
+        .warning-icon {
+            flex-shrink: 0;
+            font-size: 2rem;
+        }
+
+        .warning-text {
+            flex: 1;
+
+            h4 {
+                margin: 0 0 0.5rem 0;
+                font-size: 1.125rem;
+                font-weight: 600;
+            }
+
+            p {
+                margin: 0;
+                font-size: 0.875rem;
+                line-height: 1.5;
+            }
+        }
+    }
+
+    /* 命令信息 */
+    .command-info {
+        .info-section {
+            margin-bottom: 1.5rem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            label {
+                display: block;
+                font-weight: 600;
+                margin-bottom: 0.5rem;
+                color: var(--ai-dark);
+                font-size: 0.875rem;
+            }
+
+            .command-display {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                background-color: var(--ai-bg-secondary);
+                border: 1px solid var(--ai-border);
+                border-radius: 0.375rem;
+                padding: 0.75rem;
+
+                code {
+                    flex: 1;
+                    font-family: 'Courier New', Courier, monospace;
+                    font-size: 0.875rem;
+                    color: var(--ai-dark);
+                    word-break: break-all;
+                }
+
+                .btn-copy {
+                    width: 28px;
+                    height: 28px;
+                    border: none;
+                    background: transparent;
+                    border-radius: 0.25rem;
+                    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);
+                    }
+                }
+            }
+
+            .explanation {
+                margin: 0;
+                padding: 0.75rem;
+                background-color: var(--ai-bg-secondary);
+                border: 1px solid var(--ai-border);
+                border-radius: 0.375rem;
+                font-size: 0.875rem;
+                line-height: 1.6;
+                color: var(--ai-dark);
+            }
+
+            .suggestions-list {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+
+                li {
+                    display: flex;
+                    align-items: flex-start;
+                    gap: 0.5rem;
+                    padding: 0.5rem;
+                    margin-bottom: 0.5rem;
+                    background-color: var(--ai-bg-secondary);
+                    border-radius: 0.375rem;
+                    border: 1px solid var(--ai-border);
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    i {
+                        color: var(--ai-info);
+                        font-size: 1rem;
+                        margin-top: 0.125rem;
+                    }
+
+                    span {
+                        flex: 1;
+                        font-size: 0.875rem;
+                        line-height: 1.5;
+                        color: var(--ai-dark);
+                    }
+                }
+            }
+        }
+    }
+
+    /* 高风险警告 */
+    .high-risk-warning {
+        margin-top: 1.5rem;
+
+        .warning-box {
+            display: flex;
+            gap: 1rem;
+            padding: 1rem;
+            background-color: rgba(220, 53, 69, 0.1);
+            border: 1px solid var(--ai-danger);
+            border-radius: 0.5rem;
+            color: var(--ai-danger);
+
+            i {
+                font-size: 1.5rem;
+                color: var(--ai-danger);
+            }
+
+            .warning-content {
+                flex: 1;
+
+                strong {
+                    display: block;
+                    margin-bottom: 0.5rem;
+                    font-size: 1rem;
+                }
+
+                p {
+                    margin: 0;
+                    font-size: 0.875rem;
+                    line-height: 1.6;
+                }
+            }
+        }
+    }
+}
+
+/* 底部按钮 */
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    border-top: 1px solid var(--ai-border);
+    background-color: var(--ai-bg-secondary);
+    border-radius: 0 0 0.5rem 0.5rem;
+
+    .btn {
+        padding: 0.5rem 1.5rem;
+        border: none;
+        border-radius: 0.375rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+
+        &.btn-secondary {
+            background-color: var(--ai-secondary);
+            color: white;
+
+            &:hover {
+                background-color: darken(#6c757d, 7.5%);
+            }
+        }
+
+        &.btn-danger {
+            background-color: var(--ai-danger);
+            color: white;
+
+            &:hover {
+                background-color: darken(#dc3545, 7.5%);
+            }
+        }
+
+        &.btn-critical {
+            background-color: var(--ai-danger);
+            color: white;
+            animation: pulse 2s infinite;
+
+            &:hover {
+                animation: none;
+                background-color: darken(#dc3545, 10%);
+            }
+        }
+    }
+}
+
+/* 动画 */
+@keyframes pulse {
+    0%, 100% {
+        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
+    }
+    50% {
+        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .risk-confirm-dialog {
+        max-width: 100%;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    .dialog-header {
+        padding: 1rem;
+
+        .risk-indicator {
+            font-size: 1rem;
+
+            i {
+                font-size: 1.25rem;
+            }
+        }
+    }
+
+    .dialog-content {
+        padding: 1rem;
+
+        .risk-warning {
+            .warning-icon {
+                font-size: 1.5rem;
+            }
+
+            .warning-text {
+                h4 {
+                    font-size: 1rem;
+                }
+
+                p {
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+
+    .dialog-footer {
+        padding: 1rem;
+        flex-direction: column-reverse;
+
+        .btn {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}

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

@@ -0,0 +1,96 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { RiskLevel } from '../../types/security.types';
+
+@Component({
+    selector: 'app-risk-confirm-dialog',
+    templateUrl: './risk-confirm-dialog.component.html',
+    styleUrls: ['./risk-confirm-dialog.component.scss']
+})
+export class RiskConfirmDialogComponent {
+    @Input() command: string = '';
+    @Input() explanation: string = '';
+    @Input() riskLevel: RiskLevel = RiskLevel.MEDIUM;
+    @Input() suggestions: string[] = [];
+
+    @Output() confirmed = new EventEmitter<boolean>();
+
+    constructor(public activeModal: NgbActiveModal) {}
+
+    /**
+     * 确认执行
+     */
+    confirm(): void {
+        this.confirmed.emit(true);
+        this.activeModal.close(true);
+    }
+
+    /**
+     * 取消执行
+     */
+    cancel(): void {
+        this.confirmed.emit(false);
+        this.activeModal.dismiss(false);
+    }
+
+    /**
+     * 获取风险级别文本
+     */
+    getRiskLevelText(): string {
+        switch (this.riskLevel) {
+            case RiskLevel.LOW:
+                return '低风险';
+            case RiskLevel.MEDIUM:
+                return '中风险';
+            case RiskLevel.HIGH:
+                return '高风险';
+            case RiskLevel.CRITICAL:
+                return '极风险';
+            default:
+                return '未知风险';
+        }
+    }
+
+    /**
+     * 获取风险级别颜色
+     */
+    getRiskLevelColor(): string {
+        switch (this.riskLevel) {
+            case RiskLevel.LOW:
+                return 'var(--ai-risk-low)';
+            case RiskLevel.MEDIUM:
+                return 'var(--ai-risk-medium)';
+            case RiskLevel.HIGH:
+                return 'var(--ai-risk-high)';
+            case RiskLevel.CRITICAL:
+                return 'var(--ai-risk-critical)';
+            default:
+                return 'var(--ai-secondary)';
+        }
+    }
+
+    /**
+     * 获取风险级别图标
+     */
+    getRiskLevelIcon(): string {
+        switch (this.riskLevel) {
+            case RiskLevel.LOW:
+                return 'icon-check-circle';
+            case RiskLevel.MEDIUM:
+                return 'icon-warning';
+            case RiskLevel.HIGH:
+                return 'icon-alert-triangle';
+            case RiskLevel.CRITICAL:
+                return 'icon-alert-octagon';
+            default:
+                return 'icon-help-circle';
+        }
+    }
+
+    /**
+     * 是否为高风险
+     */
+    isHighRisk(): boolean {
+        return this.riskLevel === RiskLevel.HIGH || this.riskLevel === RiskLevel.CRITICAL;
+    }
+}

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

@@ -0,0 +1,140 @@
+<div class="ai-settings-tab">
+    <!-- 头部 -->
+    <div class="settings-header">
+        <div class="header-content">
+            <h2>
+                <i class="icon-robot"></i>
+                AI助手设置
+            </h2>
+            <div class="header-status">
+                <div class="status-indicator" [class.enabled]="isEnabled">
+                    <i class="icon-power"></i>
+                    <span>{{ isEnabled ? '已启用' : '已禁用' }}</span>
+                </div>
+                <div class="provider-info" *ngIf="isEnabled">
+                    <i class="icon-provider"></i>
+                    <span>当前提供商: {{ currentProvider }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="header-actions">
+            <button class="btn-icon" (click)="toggleEnabled()" [title]="isEnabled ? '禁用AI助手' : '启用AI助手'">
+                <i [class]="isEnabled ? 'icon-pause' : 'icon-play'"></i>
+            </button>
+            <button class="btn-icon" (click)="refreshProviderStatus()" title="刷新状态">
+                <i class="icon-refresh"></i>
+            </button>
+            <button class="btn-icon" (click)="exportConfig()" title="导出配置">
+                <i class="icon-export"></i>
+            </button>
+            <button class="btn-icon" (click)="importConfig()" title="导入配置">
+                <i class="icon-import"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- 标签页导航 -->
+    <div class="tabs-nav" *ngIf="isEnabled">
+        <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>
+        </button>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="settings-content" *ngIf="isEnabled">
+        <!-- 基本设置 -->
+        <div *ngIf="activeTab === 'general'" class="tab-content">
+            <app-general-settings (providerChanged)="switchProvider($event)"></app-general-settings>
+        </div>
+
+        <!-- AI提供商设置 -->
+        <div *ngIf="activeTab === 'providers'" class="tab-content">
+            <app-provider-config
+                [providerStatus]="providerStatus"
+                (refreshStatus)="refreshProviderStatus()"
+                (switchProvider)="switchProvider($event)">
+            </app-provider-config>
+        </div>
+
+        <!-- 安全设置 -->
+        <div *ngIf="activeTab === 'security'" class="tab-content">
+            <app-security-settings></app-security-settings>
+        </div>
+
+        <!-- 聊天设置 -->
+        <div *ngIf="activeTab === 'chat'" class="tab-content">
+            <app-chat-settings></app-chat-settings>
+        </div>
+
+        <!-- 高级设置 -->
+        <div *ngIf="activeTab === 'advanced'" class="tab-content">
+            <div class="advanced-settings">
+                <h3>高级设置</h3>
+
+                <!-- 配置验证 -->
+                <div class="settings-section">
+                    <h4>配置管理</h4>
+                    <button class="btn btn-primary" (click)="validateConfig()">
+                        <i class="icon-check"></i>
+                        验证配置
+                    </button>
+                    <button class="btn btn-warning" (click)="resetToDefaults()">
+                        <i class="icon-refresh"></i>
+                        重置为默认
+                    </button>
+                </div>
+
+                <!-- 日志设置 -->
+                <div class="settings-section">
+                    <h4>日志设置</h4>
+                    <div class="log-level-selector">
+                        <label>日志级别</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>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- 系统信息 -->
+                <div class="settings-section">
+                    <h4>系统信息</h4>
+                    <div class="system-info">
+                        <div class="info-item">
+                            <label>插件版本:</label>
+                            <span>1.0.0</span>
+                        </div>
+                        <div class="info-item">
+                            <label>支持的提供商:</label>
+                            <span>{{ providerStatus.count }}</span>
+                        </div>
+                        <div class="info-item">
+                            <label>当前提供商:</label>
+                            <span>{{ currentProvider }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 禁用提示 -->
+    <div class="disabled-message" *ngIf="!isEnabled">
+        <div class="message-content">
+            <i class="icon-pause-circle"></i>
+            <h3>AI助手已禁用</h3>
+            <p>点击上方按钮启用AI助手功能</p>
+            <button class="btn btn-primary" (click)="toggleEnabled()">
+                <i class="icon-play"></i>
+                启用AI助手
+            </button>
+        </div>
+    </div>
+</div>