feat(desktop): add Electron desktop pet for Claude CLI
- Electron + React + TypeScript 桌面宠物外壳 - xterm.js + node-pty 直接对接 Claude CLI 进程 - 宠物 orb(80x80)可拖拽,点击展开终端面板 - CRT 复古终端主题(扫描线、文字发光) - 全局快捷键 Cmd+Shift+C 显隐 - 窗口位置自动保存 - 中华田园犬吉祥物 icon(AI 生成) - Makefile 新增 `make app` 打包命令
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* CRT Terminal Effects */
|
||||
.crt-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.crt-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.08),
|
||||
rgba(0, 0, 0, 0.08) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.crt-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
/* Terminal text glow */
|
||||
.xterm-viewport {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.xterm-screen {
|
||||
text-shadow: 0 0 2px rgba(74, 222, 128, 0.3), 0 0 4px rgba(74, 222, 128, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Flicker animation */
|
||||
@keyframes flicker {
|
||||
0% { opacity: 0.98; }
|
||||
5% { opacity: 0.95; }
|
||||
10% { opacity: 0.98; }
|
||||
15% { opacity: 0.96; }
|
||||
20% { opacity: 0.99; }
|
||||
50% { opacity: 0.98; }
|
||||
52% { opacity: 0.93; }
|
||||
54% { opacity: 0.98; }
|
||||
100% { opacity: 0.98; }
|
||||
}
|
||||
|
||||
.crt-flicker {
|
||||
animation: flicker 4s infinite;
|
||||
}
|
||||
|
||||
/* Scanline sweep */
|
||||
@keyframes scanline {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
|
||||
.crt-scanline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgba(74, 222, 128, 0.08),
|
||||
transparent
|
||||
);
|
||||
animation: scanline 8s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
/* Pet Orb Animations */
|
||||
@keyframes orbBreathe {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.06); }
|
||||
}
|
||||
|
||||
@keyframes orbThink {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); }
|
||||
25% { transform: scale(1.1) rotate(-5deg); }
|
||||
75% { transform: scale(1.1) rotate(5deg); }
|
||||
}
|
||||
|
||||
@keyframes orbType {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
25% { transform: translateY(-2px); }
|
||||
75% { transform: translateY(1px); }
|
||||
}
|
||||
|
||||
@keyframes orbGlow {
|
||||
0%, 100% { box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4), inset 0 2px 4px rgba(255,255,255,0.2); }
|
||||
50% { box-shadow: 0 4px 24px rgba(74, 222, 128, 0.6), inset 0 2px 4px rgba(255,255,255,0.3); }
|
||||
}
|
||||
Reference in New Issue
Block a user