tabby-ai-assistant 1.0.5 → 1.0.6

package/src/components/common/loading-spinner.component.scss

@@ -0,0 +1,57 @@
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    &.small {
+        padding: 1rem;
+
+        .spinner {
+            width: 24px;
+            height: 24px;
+            border-width: 2px;
+        }
+
+        .spinner-message {
+            font-size: 0.75rem;
+            margin-top: 0.5rem;
+        }
+    }
+
+    &.medium {
+        .spinner {
+            width: 36px;
+            height: 36px;
+            border-width: 3px;
+        }
+    }
+
+    &.large {
+        .spinner {
+            width: 48px;
+            height: 48px;
+            border-width: 4px;
+        }
+    }
+}
+
+.spinner {
+    border: 3px solid var(--ai-border);
+    border-top-color: var(--ai-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.spinner-message {
+    margin-top: 1rem;
+    color: var(--ai-secondary);
+    font-size: 0.875rem;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/components/common/loading-spinner.component.ts

@@ -2,69 +2,8 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'app-loading-spinner',
-    template: `
-        <div class="spinner-container" [ngClass]="size">
-            <div class="spinner"></div>
-            <p *ngIf="message" class="spinner-message">{{ message }}</p>
-        </div>
-    `,
-    styles: [`
-        .spinner-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
-
-            &.small {
-                padding: 1rem;
-
-                .spinner {
-                    width: 24px;
-                    height: 24px;
-                    border-width: 2px;
-                }
-
-                .spinner-message {
-                    font-size: 0.75rem;
-                    margin-top: 0.5rem;
-                }
-            }
-
-            &.medium {
-                .spinner {
-                    width: 36px;
-                    height: 36px;
-                    border-width: 3px;
-                }
-            }
-
-            &.large {
-                .spinner {
-                    width: 48px;
-                    height: 48px;
-                    border-width: 4px;
-                }
-            }
-        }
-
-        .spinner {
-            border: 3px solid var(--ai-border);
-            border-top-color: var(--ai-primary);
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-        }
-
-        .spinner-message {
-            margin-top: 1rem;
-            color: var(--ai-secondary);
-            font-size: 0.875rem;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-    `]
+    templateUrl: './loading-spinner.component.html',
+    styleUrls: ['./loading-spinner.component.scss']
 })
 export class LoadingSpinnerComponent {
     @Input() size: 'small' | 'medium' | 'large' = 'medium';

package/src/components/security/consent-dialog.component.html

@@ -0,0 +1,22 @@
+<div class="consent-dialog">
+    <div class="dialog-header">
+        <i class="fa fa-question-circle"></i>
+        <h3>确认执行</h3>
+    </div>
+    <div class="dialog-content">
+        <p>确定要执行此命令吗？</p>
+        <div class="command-preview">
+            <code>{{ command }}</code>
+        </div>
+        <div class="checkbox-group">
+            <label>
+                <input type="checkbox" [(ngModel)]="rememberChoice">
+                记住我的选择（30天内不再提示）
+            </label>
+        </div>
+    </div>
+    <div class="dialog-footer">
+        <button class="btn btn-secondary" (click)="cancel()">取消</button>
+        <button class="btn btn-primary" (click)="confirm()">确认执行</button>
+    </div>
+</div>

package/src/components/security/consent-dialog.component.scss

@@ -0,0 +1,34 @@
+.consent-dialog {
+    background: var(--ai-bg-primary);
+    border-radius: 0.5rem;
+    max-width: 500px;
+}
+
+.dialog-header {
+    padding: 1.5rem;
+    text-align: center;
+    border-bottom: 1px solid var(--ai-border);
+}
+
+.dialog-content {
+    padding: 1.5rem;
+}
+
+.command-preview {
+    background: var(--ai-bg-secondary);
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    margin: 1rem 0;
+}
+
+.checkbox-group {
+    margin-top: 1rem;
+}
+
+.dialog-footer {
+    padding: 1rem 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    border-top: 1px solid var(--ai-border);
+}

package/src/components/security/consent-dialog.component.ts

@@ -4,61 +4,8 @@ import { RiskLevel } from '../../types/security.types';
 
 @Component({
     selector: 'app-consent-dialog',
-    template: `
-        <div class="consent-dialog">
-            <div class="dialog-header">
-                <i class="icon-help-circle"></i>
-                <h3>确认执行</h3>
-            </div>
-            <div class="dialog-content">
-                <p>确定要执行此命令吗？</p>
-                <div class="command-preview">
-                    <code>{{ command }}</code>
-                </div>
-                <div class="checkbox-group">
-                    <label>
-                        <input type="checkbox" [(ngModel)]="rememberChoice">
-                        记住我的选择（30天内不再提示）
-                    </label>
-                </div>
-            </div>
-            <div class="dialog-footer">
-                <button class="btn btn-secondary" (click)="cancel()">取消</button>
-                <button class="btn btn-primary" (click)="confirm()">确认执行</button>
-            </div>
-        </div>
-    `,
-    styles: [`
-        .consent-dialog {
-            background: var(--ai-bg-primary);
-            border-radius: 0.5rem;
-            max-width: 500px;
-        }
-        .dialog-header {
-            padding: 1.5rem;
-            text-align: center;
-            border-bottom: 1px solid var(--ai-border);
-        }
-        .dialog-content {
-            padding: 1.5rem;
-        }
-        .command-preview {
-            background: var(--ai-bg-secondary);
-            padding: 0.75rem;
-            border-radius: 0.375rem;
-            margin: 1rem 0;
-        }
-        .checkbox-group {
-            margin-top: 1rem;
-        }
-        .dialog-footer {
-            padding: 1rem 1.5rem;
-            display: flex;
-            justify-content: flex-end;
-            gap: 0.5rem;
-            border-top: 1px solid var(--ai-border);
-        }
-    `]
+    templateUrl: './consent-dialog.component.html',
+    styleUrls: ['./consent-dialog.component.scss']
 })
 export class ConsentDialogComponent {
     @Input() command: string = '';

package/src/components/security/password-prompt.component.html

@@ -0,0 +1,19 @@
+<div class="password-prompt">
+    <div class="prompt-header">
+        <i class="fa fa-lock"></i>
+        <h3>密码验证</h3>
+    </div>
+    <div class="prompt-content">
+        <p>请输入密码以执行此高风险操作：</p>
+        <input type="password" class="form-control" [(ngModel)]="password" (keydown.enter)="submit()" placeholder="输入密码"
+            #passwordInput>
+        <div *ngIf="errorMessage" class="error-message">
+            <i class="fa fa-exclamation-circle"></i>
+            {{ errorMessage }}
+        </div>
+    </div>
+    <div class="prompt-footer">
+        <button class="btn btn-secondary" (click)="cancel()">取消</button>
+        <button class="btn btn-primary" (click)="submit()" [disabled]="!password">确认</button>
+    </div>
+</div>

package/src/components/security/password-prompt.component.scss

@@ -0,0 +1,30 @@
+.password-prompt {
+    background: var(--ai-bg-primary);
+    border-radius: 0.5rem;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.prompt-header {
+    padding: 1.5rem;
+    text-align: center;
+    border-bottom: 1px solid var(--ai-border);
+}
+
+.prompt-content {
+    padding: 1.5rem;
+}
+
+.error-message {
+    margin-top: 0.75rem;
+    color: var(--ai-danger);
+    font-size: 0.875rem;
+}
+
+.prompt-footer {
+    padding: 1rem 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    border-top: 1px solid var(--ai-border);
+}

package/src/components/security/password-prompt.component.ts

@@ -3,60 +3,8 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-password-prompt',
-    template: `
-        <div class="password-prompt">
-            <div class="prompt-header">
-                <i class="icon-lock"></i>
-                <h3>密码验证</h3>
-            </div>
-            <div class="prompt-content">
-                <p>请输入密码以执行此高风险操作：</p>
-                <input
-                    type="password"
-                    class="form-control"
-                    [(ngModel)]="password"
-                    (keydown.enter)="submit()"
-                    placeholder="输入密码"
-                    #passwordInput>
-                <div *ngIf="errorMessage" class="error-message">
-                    <i class="icon-alert-circle"></i>
-                    {{ errorMessage }}
-                </div>
-            </div>
-            <div class="prompt-footer">
-                <button class="btn btn-secondary" (click)="cancel()">取消</button>
-                <button class="btn btn-primary" (click)="submit()" [disabled]="!password">确认</button>
-            </div>
-        </div>
-    `,
-    styles: [`
-        .password-prompt {
-            background: var(--ai-bg-primary);
-            border-radius: 0.5rem;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-        .prompt-header {
-            padding: 1.5rem;
-            text-align: center;
-            border-bottom: 1px solid var(--ai-border);
-        }
-        .prompt-content {
-            padding: 1.5rem;
-        }
-        .error-message {
-            margin-top: 0.75rem;
-            color: var(--ai-danger);
-            font-size: 0.875rem;
-        }
-        .prompt-footer {
-            padding: 1rem 1.5rem;
-            display: flex;
-            justify-content: flex-end;
-            gap: 0.5rem;
-            border-top: 1px solid var(--ai-border);
-        }
-    `]
+    templateUrl: './password-prompt.component.html',
+    styleUrls: ['./password-prompt.component.scss']
 })
 export class PasswordPromptComponent {
     @Input() title: string = '密码验证';

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

@@ -6,7 +6,7 @@
             <span>{{ getRiskLevelText() }}</span>
         </div>
         <button type="button" class="close-button" (click)="cancel()">
-            <i class="icon-x"></i>
+            <i class="fa fa-times"></i>
         </button>
     </div>
 
@@ -30,7 +30,7 @@
                 <div class="command-display">
                     <code>{{ command }}</code>
                     <button class="btn-copy" (click)="navigator.clipboard.writeText(command)" title="复制">
-                        <i class="icon-copy"></i>
+                        <i class="fa fa-copy"></i>
                     </button>
                 </div>
             </div>
@@ -45,7 +45,7 @@
                 <label>安全建议:</label>
                 <ul class="suggestions-list">
                     <li *ngFor="let suggestion of suggestions">
-                        <i class="icon-lightbulb"></i>
+                        <i class="fa fa-lightbulb-o"></i>
                         <span>{{ suggestion }}</span>
                     </li>
                 </ul>
@@ -55,7 +55,7 @@
         <!-- 额外警告（高风险） -->
         <div *ngIf="isHighRisk()" class="high-risk-warning">
             <div class="warning-box">
-                <i class="icon-alert-triangle"></i>
+                <i class="fa fa-exclamation-triangle"></i>
                 <div class="warning-content">
                     <strong>⚠️ 重要提示</strong>
                     <p *ngIf="riskLevel === 'critical'">
@@ -72,16 +72,12 @@
     <!-- 底部按钮 -->
     <div class="dialog-footer">
         <button type="button" class="btn btn-secondary" (click)="cancel()">
-            <i class="icon-x"></i>
+            <i class="fa fa-times"></i>
             取消
         </button>
-        <button
-            type="button"
-            class="btn btn-danger"
-            [ngClass]="{ 'btn-critical': isHighRisk() }"
-            (click)="confirm()">
-            <i [class]="isHighRisk() ? 'icon-alert-triangle' : 'icon-check'"></i>
+        <button type="button" class="btn btn-danger" [ngClass]="{ 'btn-critical': isHighRisk() }" (click)="confirm()">
+            <i [class]="isHighRisk() ? 'fa fa-exclamation-triangle' : 'fa fa-check'"></i>
             {{ isHighRisk() ? '仍要执行' : '确认执行' }}
         </button>
     </div>
-</div>
+</div>

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

@@ -272,7 +272,7 @@
             color: white;
 
             &:hover {
-                background-color: darken(#6c757d, 7.5%);
+                background-color: #5a6268;
             }
         }
 
@@ -281,7 +281,7 @@
             color: white;
 
             &:hover {
-                background-color: darken(#dc3545, 7.5%);
+                background-color: #c82333;
             }
         }
 
@@ -292,7 +292,7 @@
 
             &:hover {
                 animation: none;
-                background-color: darken(#dc3545, 10%);
+                background-color: #bd2130;
             }
         }
     }
@@ -300,9 +300,12 @@
 
 /* 动画 */
 @keyframes pulse {
-    0%, 100% {
+
+    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);
     }
@@ -357,4 +360,4 @@
             justify-content: center;
         }
     }
-}
+}

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

@@ -15,7 +15,7 @@ export class RiskConfirmDialogComponent {
 
     @Output() confirmed = new EventEmitter<boolean>();
 
-    constructor(public activeModal: NgbActiveModal) {}
+    constructor(public activeModal: NgbActiveModal) { }
 
     /**
      * 确认执行
@@ -75,15 +75,15 @@ export class RiskConfirmDialogComponent {
     getRiskLevelIcon(): string {
         switch (this.riskLevel) {
             case RiskLevel.LOW:
-                return 'icon-check-circle';
+                return 'fa fa-check-circle';
             case RiskLevel.MEDIUM:
-                return 'icon-warning';
+                return 'fa fa-exclamation-triangle';
             case RiskLevel.HIGH:
-                return 'icon-alert-triangle';
+                return 'fa fa-exclamation-circle';
             case RiskLevel.CRITICAL:
-                return 'icon-alert-octagon';
+                return 'fa fa-ban';
             default:
-                return 'icon-help-circle';
+                return 'fa fa-question-circle';
         }
     }
 

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

@@ -3,42 +3,39 @@
     <div class="settings-header">
         <div class="header-content">
             <h2>
-                <i class="icon-robot"></i>
+                <i class="fa fa-robot"></i>
                 AI助手设置
             </h2>
             <div class="header-status">
                 <div class="status-indicator" [class.enabled]="isEnabled">
-                    <i class="icon-power"></i>
+                    <i class="fa fa-power-off"></i>
                     <span>{{ isEnabled ? '已启用' : '已禁用' }}</span>
                 </div>
                 <div class="provider-info" *ngIf="isEnabled">
-                    <i class="icon-provider"></i>
+                    <i class="fa fa-cloud"></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>
+                <i [class]="isEnabled ? 'fa fa-pause' : 'fa fa-play'"></i>
             </button>
             <button class="btn-icon" (click)="refreshProviderStatus()" title="刷新状态">
-                <i class="icon-refresh"></i>
+                <i class="fa fa-refresh"></i>
             </button>
             <button class="btn-icon" (click)="exportConfig()" title="导出配置">
-                <i class="icon-export"></i>
+                <i class="fa fa-download"></i>
             </button>
             <button class="btn-icon" (click)="importConfig()" title="导入配置">
-                <i class="icon-import"></i>
+                <i class="fa fa-upload"></i>
             </button>
         </div>
     </div>
 
     <!-- 标签页导航 -->
     <div class="tabs-nav" *ngIf="isEnabled">
-        <button
-            *ngFor="let tab of tabs"
-            class="tab-button"
-            [class.active]="activeTab === tab.id"
+        <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>
@@ -54,9 +51,7 @@
 
         <!-- AI提供商设置 -->
         <div *ngIf="activeTab === 'providers'" class="tab-content">
-            <app-provider-config
-                [providerStatus]="providerStatus"
-                (refreshStatus)="refreshProviderStatus()"
+            <app-provider-config [providerStatus]="providerStatus" (refreshStatus)="refreshProviderStatus()"
                 (switchProvider)="switchProvider($event)">
             </app-provider-config>
         </div>
@@ -80,11 +75,11 @@
                 <div class="settings-section">
                     <h4>配置管理</h4>
                     <button class="btn btn-primary" (click)="validateConfig()">
-                        <i class="icon-check"></i>
+                        <i class="fa fa-check"></i>
                         验证配置
                     </button>
                     <button class="btn btn-warning" (click)="resetToDefaults()">
-                        <i class="icon-refresh"></i>
+                        <i class="fa fa-refresh"></i>
                         重置为默认
                     </button>
                 </div>
@@ -94,7 +89,8 @@
                     <h4>日志设置</h4>
                     <div class="log-level-selector">
                         <label>日志级别</label>
-                        <select class="form-control" [(ngModel)]="config.logLevel" (change)="config.setLogLevel(config.logLevel)">
+                        <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>
@@ -128,13 +124,13 @@
     <!-- 禁用提示 -->
     <div class="disabled-message" *ngIf="!isEnabled">
         <div class="message-content">
-            <i class="icon-pause-circle"></i>
+            <i class="fa fa-pause-circle fa-3x"></i>
             <h3>AI助手已禁用</h3>
             <p>点击上方按钮启用AI助手功能</p>
             <button class="btn btn-primary" (click)="toggleEnabled()">
-                <i class="icon-play"></i>
+                <i class="fa fa-play"></i>
                 启用AI助手
             </button>
         </div>
     </div>
-</div>
+</div>

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

@@ -194,7 +194,7 @@
                 color: white;
 
                 &:hover {
-                    background-color: darken(#007bff, 7.5%);
+                    background-color: #0069d9;
                 }
             }
 
@@ -203,7 +203,7 @@
                 color: var(--ai-dark);
 
                 &:hover {
-                    background-color: darken(#ffc107, 7.5%);
+                    background-color: #e0a800;
                 }
             }
         }
@@ -301,7 +301,7 @@
             font-size: 1rem;
 
             &:hover {
-                background-color: darken(#007bff, 7.5%);
+                background-color: #0069d9;
                 transform: translateY(-1px);
             }
         }
@@ -310,9 +310,12 @@
 
 /* 动画 */
 @keyframes pulse {
-    0%, 100% {
+
+    0%,
+    100% {
         opacity: 1;
     }
+
     50% {
         opacity: 0.5;
     }
@@ -368,4 +371,4 @@
             }
         }
     }
-}
+}