7b9b0c490b
## Phase 19 Omni-Terminal (Wave 0-6 全部完成) ### 核心功能 - SSE 狀態機 (7-State 設計，10/10 分) - GenUI 動態渲染 (6 張卡片 + Zod Schema 驗證) - 核鑰 UX (長按授權 + 風險分級) - Terminal Telemetry (Sentry 整合) ### P0-P2 修復 - P0: Singleton → FastAPI Depends 依賴注入 - P1: Zod Schema 升級 (7 個驗證 Schema) - P1: 錯誤分類碼聚合 (Sentry fingerprint) - P2: Slow Query 監控 (5s 警告 / 10s 嚴重) ### 測試 - test_terminal_service.py: 54 項測試全通過 - 意圖分類: 42 個測試案例 (9 種 IntentType) ### 文檔 - ADR-031: SSE 架構實作紀錄 - ADR-032: GenUI 渲染實作紀錄 - Skills: v1.9 (後端 Terminal 章節) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
253 lines
9.0 KiB
TypeScript
253 lines
9.0 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
const config: Config = {
|
|
content: [
|
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'../../packages/lewooogo-ui/src/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
// 移除 darkMode - 全面採用明亮主題
|
|
theme: {
|
|
extend: {
|
|
// ==================== Nothing.tech Light Theme Colors ====================
|
|
colors: {
|
|
// 核心色彩 - 明亮主題
|
|
nothing: {
|
|
black: '#111111', // 主文字色
|
|
white: '#FFFFFF', // 純白背景
|
|
cream: '#FAFAFA', // 極淺灰背景
|
|
red: '#FF3300', // 警示橘紅 (高對比)
|
|
gray: {
|
|
50: '#FAFAFA',
|
|
100: '#F5F5F5',
|
|
200: '#E5E5E5',
|
|
300: '#D4D4D4',
|
|
400: '#A3A3A3',
|
|
500: '#737373',
|
|
600: '#525252',
|
|
700: '#404040',
|
|
800: '#333333', // 次要文字
|
|
900: '#111111', // 主要文字
|
|
},
|
|
},
|
|
status: {
|
|
healthy: '#22C55E', // 綠色 - 健康
|
|
thinking: '#8B5CF6', // 紫色 - AI 思考中
|
|
syncing: '#3B82F6', // 藍色 - 同步中
|
|
warning: '#F59E0B', // 黃色 - 警告
|
|
critical: '#FF3300', // 橘紅 - 嚴重
|
|
idle: '#A3A3A3', // 灰色 - 閒置
|
|
},
|
|
// 智慧之眼 - OpenClaw 品牌藍
|
|
claw: {
|
|
blue: '#4A90D9', // 智慧之眼核心藍
|
|
'blue-light': '#6BA3E0', // 淺藍光暈
|
|
'blue-glow': 'rgba(74, 144, 217, 0.3)', // 發光效果
|
|
},
|
|
},
|
|
|
|
// ==================== Typography ====================
|
|
fontFamily: {
|
|
display: ['var(--font-mono)', 'JetBrains Mono', 'monospace'],
|
|
heading: ['Inter', 'system-ui', 'sans-serif'],
|
|
body: ['Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['var(--font-mono)', 'JetBrains Mono', 'Fira Code', 'monospace'],
|
|
// DSEG7 點陣字體 - 用於核心指標數字顯示
|
|
'dot-matrix': ['DSEG7-Classic', 'var(--font-mono)', 'monospace'],
|
|
},
|
|
|
|
// Nothing.tech 高對比墨水色
|
|
textColor: {
|
|
ink: '#111111',
|
|
'ink-secondary': '#525252',
|
|
},
|
|
|
|
fontSize: {
|
|
'display-xl': ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
|
|
'display-lg': ['2.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
|
|
'display-md': ['1.75rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
|
|
'display-sm': ['1.25rem', { lineHeight: '1.3', letterSpacing: '0' }],
|
|
},
|
|
|
|
// ==================== Light Glassmorphism ====================
|
|
backdropBlur: {
|
|
glass: '16px',
|
|
'glass-heavy': '24px',
|
|
},
|
|
|
|
backgroundColor: {
|
|
'glass-white': 'rgba(255, 255, 255, 0.70)',
|
|
'glass-light': 'rgba(250, 250, 250, 0.80)',
|
|
},
|
|
|
|
borderColor: {
|
|
'glass-border': 'rgba(0, 0, 0, 0.08)',
|
|
'glass-border-hover': 'rgba(0, 0, 0, 0.15)',
|
|
},
|
|
|
|
// ==================== Animations ====================
|
|
// Phase 19.A: Terminal Animation System
|
|
// @see lib/constants/animations.ts
|
|
animation: {
|
|
'breathe': 'breathe 2s ease-in-out infinite',
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'pulse-3s': 'pulse3s 0.5s ease-in-out 6', // 6 iterations x 0.5s = 3s total
|
|
'fade-in': 'fadeIn 200ms ease-out',
|
|
'slide-in-right': 'slideInRight 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-in-up': 'slideInUp 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'scan': 'scan 2s linear infinite',
|
|
// Magic UI Effects
|
|
'border-beam': 'border-beam var(--duration, 6s) linear infinite',
|
|
'ripple': 'ripple 600ms linear',
|
|
'shimmer': 'shimmer 2s linear infinite',
|
|
// Phase 19: Terminal Animations
|
|
'terminal-open': 'terminal-open 250ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'terminal-close': 'terminal-close 200ms ease-out',
|
|
'typing-cursor': 'typing-cursor 530ms ease-in-out infinite',
|
|
'thinking-dot': 'thinking-dot 1200ms ease-in-out infinite',
|
|
'message-slide-in': 'message-slide-in 200ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'stream-char': 'stream-char 100ms ease-out',
|
|
},
|
|
|
|
keyframes: {
|
|
breathe: {
|
|
'0%, 100%': { opacity: '0.5' },
|
|
'50%': { opacity: '1' },
|
|
},
|
|
// Timeline 最新項目閃爍 (3秒後停止)
|
|
pulse3s: {
|
|
'0%, 100%': { opacity: '1', backgroundColor: 'transparent' },
|
|
'50%': { opacity: '0.7', backgroundColor: 'rgba(139, 92, 246, 0.05)' },
|
|
},
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideInRight: {
|
|
'0%': { transform: 'translateX(100%)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
slideInUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
scan: {
|
|
'0%': { transform: 'translateX(-100%)' },
|
|
'100%': { transform: 'translateX(100%)' },
|
|
},
|
|
// Magic UI Border Beam
|
|
'border-beam': {
|
|
'0%': { '--start': '0' },
|
|
'100%': { '--start': '1' },
|
|
},
|
|
// Ripple effect for button clicks
|
|
ripple: {
|
|
'0%': { transform: 'scale(0)', opacity: '0.5' },
|
|
'100%': { transform: 'scale(4)', opacity: '0' },
|
|
},
|
|
// Shimmer effect
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '-200% 0' },
|
|
'100%': { backgroundPosition: '200% 0' },
|
|
},
|
|
// Phase 19: Terminal Keyframes
|
|
'terminal-open': {
|
|
'0%': { opacity: '0', transform: 'translateY(20px) scale(0.98)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0) scale(1)' },
|
|
},
|
|
'terminal-close': {
|
|
'0%': { opacity: '1', transform: 'translateY(0) scale(1)' },
|
|
'100%': { opacity: '0', transform: 'translateY(20px) scale(0.98)' },
|
|
},
|
|
'typing-cursor': {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0' },
|
|
},
|
|
'thinking-dot': {
|
|
'0%, 80%, 100%': { opacity: '0.3', transform: 'scale(0.8)' },
|
|
'40%': { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
'message-slide-in': {
|
|
'0%': { opacity: '0', transform: 'translateX(-10px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
'stream-char': {
|
|
'0%': { opacity: '0', transform: 'translateY(2px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
|
|
// ==================== Spacing & Layout ====================
|
|
borderRadius: {
|
|
'glass': '12px',
|
|
'card': '10px',
|
|
'button': '6px',
|
|
},
|
|
|
|
boxShadow: {
|
|
'glass': '0 4px 24px rgba(0, 0, 0, 0.06)',
|
|
'glass-hover': '0 8px 32px rgba(0, 0, 0, 0.10)',
|
|
'card': '0 2px 12px rgba(0, 0, 0, 0.04)',
|
|
'card-hover': '0 4px 20px rgba(0, 0, 0, 0.08)',
|
|
'glow-red': '0 0 16px rgba(255, 51, 0, 0.3)',
|
|
'glow-green': '0 0 16px rgba(34, 197, 94, 0.3)',
|
|
'glow-blue': '0 0 16px rgba(59, 130, 246, 0.3)',
|
|
'glow-purple': '0 0 16px rgba(139, 92, 246, 0.3)',
|
|
},
|
|
|
|
// ==================== Z-Index Scale ====================
|
|
// Phase 19: 已遷移至 lib/constants/z-index.ts
|
|
// 使用 inline style={{ zIndex: Z_INDEX.XXX }} 取代 Tailwind classes
|
|
// @see lib/constants/z-index.ts
|
|
},
|
|
},
|
|
plugins: [
|
|
// Custom plugin for light glass effect
|
|
function ({ addUtilities }: { addUtilities: Function }) {
|
|
addUtilities({
|
|
// 白色磨砂玻璃 (主要卡片)
|
|
'.glass-card': {
|
|
background: 'rgba(255, 255, 255, 0.70)',
|
|
backdropFilter: 'blur(16px)',
|
|
'-webkit-backdrop-filter': 'blur(16px)',
|
|
border: '1px solid rgba(0, 0, 0, 0.08)',
|
|
borderRadius: '12px',
|
|
boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
|
|
},
|
|
'.glass-card-hover': {
|
|
background: 'rgba(255, 255, 255, 0.80)',
|
|
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.10)',
|
|
borderColor: 'rgba(0, 0, 0, 0.12)',
|
|
},
|
|
// 頂部導航列
|
|
'.glass-header': {
|
|
background: 'rgba(255, 255, 255, 0.85)',
|
|
backdropFilter: 'blur(20px)',
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
|
borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
|
|
},
|
|
// Copilot 面板
|
|
'.glass-copilot': {
|
|
background: 'rgba(250, 250, 250, 0.90)',
|
|
backdropFilter: 'blur(20px)',
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
|
border: '1px solid rgba(139, 92, 246, 0.2)',
|
|
borderRadius: '12px',
|
|
boxShadow: '0 4px 24px rgba(139, 92, 246, 0.1)',
|
|
},
|
|
// AI 思考指示器
|
|
'.ai-indicator': {
|
|
animation: 'breathe 2s ease-in-out infinite',
|
|
},
|
|
// 狀態指示點
|
|
'.status-dot': {
|
|
width: '8px',
|
|
height: '8px',
|
|
borderRadius: '50%',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
export default config
|