tabby-ai-assistant 1.0.8 → 1.0.10

package/src/services/core/toast.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export interface ToastMessage {
+    id: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    message: string;
+    duration?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ToastService {
+    private toastSubject = new Subject<ToastMessage>();
+    toast$ = this.toastSubject.asObservable();
+
+    show(type: ToastMessage['type'], message: string, duration = 3000): void {
+        const id = `toast-${Date.now()}`;
+        this.toastSubject.next({ id, type, message, duration });
+    }
+
+    success(message: string, duration = 3000): void {
+        this.show('success', message, duration);
+    }
+
+    error(message: string, duration = 5000): void {
+        this.show('error', message, duration);
+    }
+
+    warning(message: string, duration = 4000): void {
+        this.show('warning', message, duration);
+    }
+
+    info(message: string, duration = 3000): void {
+        this.show('info', message, duration);
+    }
+}

package/src/styles/ai-assistant.scss

@@ -2,98 +2,18 @@
  * Tabby AI Assistant 全局样式
  */
 
-// 主题颜色
-:root {
-    --ai-primary: #007bff;
-    --ai-secondary: #6c757d;
-    --ai-success: #28a745;
-    --ai-warning: #ffc107;
-    --ai-danger: #dc3545;
-    --ai-info: #17a2b8;
-    --ai-light: #f8f9fa;
-    --ai-dark: #343a40;
-
-    // 风险级别颜色
-    --ai-risk-low: #28a745;
-    --ai-risk-medium: #ffc107;
-    --ai-risk-high: #fd7e14;
-    --ai-risk-critical: #dc3545;
-
-    // 聊天消息颜色
-    --ai-user-message: #e3f2fd;
-    --ai-assistant-message: #f5f5f5;
-    --ai-system-message: #fff3cd;
-
-    // 背景和边框
-    --ai-bg-primary: #ffffff;
-    --ai-bg-secondary: #f8f9fa;
-    --ai-border: #dee2e6;
-    --ai-border-radius: 0.375rem;
-    --ai-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-}
-
-// 深色主题 - 支持多种类名
-.dark-theme,
-.ai-theme-dark,
-body.ai-theme-dark {
-    --ai-primary: #4dabf7;
-    --ai-secondary: #adb5bd;
-    --ai-success: #51cf66;
-    --ai-warning: #fcc419;
-    --ai-danger: #ff6b6b;
-    --ai-info: #22b8cf;
-    --ai-light: #343a40;
-    --ai-dark: #f8f9fa;
-
-    --ai-risk-low: #51cf66;
-    --ai-risk-medium: #fcc419;
-    --ai-risk-high: #ff922b;
-    --ai-risk-critical: #ff6b6b;
-
-    --ai-user-message: #1e3a5f;
-    --ai-assistant-message: #2d3748;
-    --ai-system-message: #3a3a3a;
-
-    --ai-bg-primary: #1a1a1a;
-    --ai-bg-secondary: #2d2d2d;
-    --ai-border: #4a4a4a;
-    --ai-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
-}
+// 导入主题系统
+@import 'themes';
 
-// 浅色主题
-.light-theme,
-.ai-theme-light,
-body.ai-theme-light {
-    --ai-primary: #007bff;
-    --ai-secondary: #6c757d;
-    --ai-success: #28a745;
-    --ai-warning: #ffc107;
-    --ai-danger: #dc3545;
-    --ai-info: #17a2b8;
-    --ai-light: #f8f9fa;
-    --ai-dark: #343a40;
-
-    --ai-risk-low: #28a745;
-    --ai-risk-medium: #ffc107;
-    --ai-risk-high: #fd7e14;
-    --ai-risk-critical: #dc3545;
-
-    --ai-user-message: #e3f2fd;
-    --ai-assistant-message: #f5f5f5;
-    --ai-system-message: #fff3cd;
-
-    --ai-bg-primary: #ffffff;
-    --ai-bg-secondary: #f8f9fa;
-    --ai-border: #dee2e6;
-    --ai-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-}
+// 主题颜色变量已移至 themes.scss
+// 这里只保留通用样式和组件样式
 
 // 通用样式
 .ai-assistant {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-size: 14px;
     line-height: 1.5;
-    color: var(--ai-dark);
+    color: var(--ai-text-primary);
     background-color: var(--ai-bg-primary);
 
     * {
@@ -208,7 +128,7 @@ body.ai-theme-light {
         font-size: 14px;
         line-height: 1.5;
         background-color: var(--ai-bg-primary);
-        color: var(--ai-dark);
+        color: var(--ai-text-primary);
 
         &:focus {
             outline: none;
@@ -363,7 +283,7 @@ body.ai-theme-light {
                 border: 1px solid var(--ai-border);
                 border-radius: var(--ai-border-radius);
                 background-color: var(--ai-bg-primary);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
 
                 &:focus {
                     outline: none;
@@ -451,7 +371,7 @@ body.ai-theme-light {
         left: 50%;
         transform: translateX(-50%);
         padding: 0.5rem;
-        background-color: var(--ai-dark);
+        background-color: var(--ai-text-primary);
         color: var(--ai-light);
         border-radius: var(--ai-border-radius);
         font-size: 0.875rem;

package/src/styles/themes.scss

@@ -0,0 +1,161 @@
+/**
+ * AI Assistant 主题系统 - 静态样式
+ * CSS 变量由 ThemeService 动态注入到 <style> 元素
+ * 此文件仅包含主题预览和静态样式
+ */
+
+// ============================================
+// 主题预览方块样式
+// ============================================
+.theme-preview {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+
+    // 浅色
+    &[data-theme="light"] {
+        background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
+        border: 1px solid #e0e0e0 !important;
+    }
+
+    // 深色
+    &[data-theme="dark"] {
+        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
+        border: 1px solid #4a4a4a !important;
+    }
+
+    // 跟随系统
+    &[data-theme="auto"] {
+        background: linear-gradient(135deg, #f5f5f5 50%, #1a1a1a 50%) !important;
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 24px;
+            height: 24px;
+            background: linear-gradient(135deg, #fff 50%, #333 50%) !important;
+            border-radius: 50% !important;
+        }
+    }
+
+    // 像素风格
+    &[data-theme="pixel"] {
+        background: #0f380f !important;
+        border: 4px solid #9bbc0f !important;
+        border-radius: 0 !important;
+
+        // 像素网格效果
+        background-image:
+            linear-gradient(90deg, rgba(155, 188, 15, 0.1) 1px, transparent 1px),
+            linear-gradient(rgba(155, 188, 15, 0.1) 1px, transparent 1px) !important;
+        background-size: 8px 8px !important;
+    }
+
+    // 科技风格
+    &[data-theme="tech"] {
+        background: #0a0a0f !important;
+        border: 1px solid #00fff9 !important;
+        box-shadow: 0 0 10px rgba(0, 255, 249, 0.4) !important;
+
+        // 扫描线效果
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(
+                0deg,
+                transparent,
+                transparent 2px,
+                rgba(0, 255, 249, 0.1) 2px,
+                rgba(0, 255, 249, 0.1) 4px
+            ) !important;
+        }
+
+        // 角落装饰
+        &::before {
+            content: '';
+            position: absolute;
+            top: 4px;
+            left: 4px;
+            width: 12px;
+            height: 12px;
+            border-top: 2px solid #00fff9 !important;
+            border-left: 2px solid #00fff9 !important;
+        }
+    }
+
+    &:hover {
+        transform: scale(1.05) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+    }
+
+    &.active {
+        box-shadow: 0 0 0 2px var(--ai-primary, #007bff) !important;
+        transform: scale(1.1) !important;
+    }
+}
+
+// ============================================
+// 主题选择器样式
+// ============================================
+.theme-selector {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+
+    .theme-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        border: 2px solid var(--ai-border, #dee2e6) !important;
+        border-radius: var(--ai-border-radius, 0.375rem) !important;
+        background: var(--ai-bg-primary, #ffffff) !important;
+        cursor: pointer;
+        transition: all 0.2s ease !important;
+
+        &:hover {
+            border-color: var(--ai-primary, #007bff) !important;
+        }
+
+        &.active {
+            border-color: var(--ai-primary, #007bff) !important;
+            background: var(--ai-bg-secondary, #f8f9fa) !important;
+            box-shadow: 0 0 0 2px rgba(var(--ai-primary, #007bff), 0.2) !important;
+        }
+
+        span {
+            font-size: 0.75rem;
+            color: var(--ai-text-primary, #212529) !important;
+        }
+    }
+}
+
+// ============================================
+// 响应式设计
+// ============================================
+@media (max-width: 768px) {
+    .theme-selector {
+        justify-content: center;
+
+        .theme-btn {
+            padding: 0.375rem;
+
+            .theme-preview {
+                width: 48px !important;
+                height: 48px !important;
+            }
+        }
+    }
+}