@becrafter/prompt-manager 0.2.4-dev.5 → 0.2.4

package/packages/web/css/terminal.css

@@ -1,1218 +0,0 @@
-/* 终端样式 */
-.terminal-area {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  background: var(--bg);
-  position: relative;
-  height: 100%;
-  min-width: 0;
-}
-
-.terminal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--border);
-  background: #1a1a1a;
-  min-height: 60px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.terminal-header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.terminal-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #e0e0e0;
-  margin: 0;
-}
-
-.terminal-status {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  color: #9e9e9e;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 4px 12px;
-  border-radius: 16px;
-  margin-right: 4px;
-  padding: 8px;
-}
-
-.status-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #4caf50;
-  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
-  transition: all 0.3s ease;
-}
-
-.status-indicator.connected {
-  background: #4caf50;
-  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
-  animation: pulse 2s infinite;
-}
-
-.status-indicator.disconnected {
-  background: #f44336;
-  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
-}
-
-.status-indicator.reconnecting {
-  background: #ff9800;
-  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
-  animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
-  }
-}
-
-.terminal-header-right {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.terminal-header-right .btn {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #e0e0e0;
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 13px;
-  transition: all 0.2s ease;
-}
-
-.terminal-header-right .btn:hover {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.2);
-  color: #fff;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.terminal-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg);
-  min-height: 0;
-  overflow: hidden;
-}
-
-.terminal-output {
-  flex: 1;
-  padding: 20px;
-  overflow-y: auto;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-  font-size: 13px;
-  line-height: 1.4;
-  background: #000000;
-  color: #ffffff;
-}
-
-.terminal-welcome {
-  text-align: center;
-  padding: 40px 20px;
-  color: #666;
-}
-
-.welcome-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-}
-
-.welcome-text {
-  font-size: 18px;
-  font-weight: 600;
-  color: #ffffff;
-  margin-bottom: 8px;
-}
-
-.welcome-hint {
-  font-size: 14px;
-  color: #666;
-}
-
-.terminal-line {
-  margin-bottom: 4px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.terminal-line.terminal-error {
-  color: #ff6b6b;
-}
-
-.terminal-line.terminal-success {
-  color: #51cf66;
-}
-
-.terminal-line.terminal-info {
-  color: #74c0fc;
-}
-
-.terminal-input-area {
-  padding: 12px 20px;
-  background: #000000;
-  border-top: 1px solid #333;
-}
-
-.terminal-prompt {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-  font-size: 13px;
-}
-
-.prompt-symbol {
-  color: #51cf66;
-  font-weight: bold;
-  user-select: none;
-  white-space: nowrap;
-}
-
-#terminalInput {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: #ffffff;
-  font-family: inherit;
-  font-size: 13px;
-  padding: 8px 0;
-  min-width: 0;
-}
-
-#terminalInput::placeholder {
-  color: #666;
-}
-
-#terminalInput:focus {
-  outline: none;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .terminal-header {
-    padding: 12px 16px;
-  }
-
-  .terminal-title {
-    font-size: 18px;
-  }
-
-  .terminal-output {
-    padding: 16px;
-    font-size: 12px;
-  }
-
-  .terminal-input-area {
-    padding: 8px 16px;
-  }
-
-  .terminal-welcome {
-    padding: 20px 10px;
-  }
-
-  .welcome-icon {
-    font-size: 32px;
-  }
-
-  .terminal-toolbar {
-    padding: 6px 12px;
-  }
-  
-  .terminal-status {
-    font-size: 11px;
-  }
-  
-  .terminal-actions .btn {
-    width: 22px;
-    height: 22px;
-    font-size: 10px;
-  }
-  
-  .xterm {
-    padding: 6px;
-    font-size: 12px !important;
-  }
-
-  .xterm-char-measure-element {
-    font-size: 12px !important;
-  }
-}
-
-/* XTerm.js 终端组件样式 */
-.xterm-container {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: #000000;
-  /* border-radius: 6px; */
-  overflow: hidden;
-}
-
-.terminal-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  /* background: rgba(255, 255, 255, 0.05); */
-  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  position: relative;
-  overflow: visible; /* 确保展开的按钮可见 */
-}
-
-/* 已删除重复的 terminal-status 和 status-indicator 样式，这些在上面已有定义 */
-
-.terminal-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.terminal-actions .btn {
-  width: 22px;
-  height: 22px;
-  font-size: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #b0b0b0;
-  border-radius: 6px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  margin: 0 2px;
-}
-
-.terminal-actions .btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
-  color: #fff;
-  transform: scale(1.05);
-}
-
-.terminal-actions .btn:active {
-  transform: scale(0.95);
-}
-
-/* 可展开的按钮组样式 - 连接状态触发展开 */
-.terminal-status {
-  position: relative;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-radius: 16px;
-  padding: 8px;
-  border: 1px solid transparent;
-}
-
-.terminal-status:hover {
-  background: rgba(255, 255, 255, 0.05);
-  transform: scale(1.02);
-  border-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 0 8px rgba(0, 162, 255, 0.2);
-}
-
-.action-buttons-expanded {
-  position: absolute;
-  left: -82px; /* 在terminal-actions左侧定位 (74px按钮宽度 + 8px间距) */
-  top: 50%;
-  transform: translateY(-50%) translateX(-20px); /* 初始位置向左偏移隐藏 */
-  display: flex;
-  gap: 4px;
-  opacity: 0;
-  /* visibility: hidden; */
-  transition: all 0.3s ease;
-  pointer-events: none;
-  z-index: 10;
-  white-space: nowrap; /* 防止换行 */
-}
-
-.action-buttons-expanded .btn {
-  transform: scale(0.8);
-  transition: all 0.3s ease;
-}
-
-/* 悬停时展开按钮组 - 扩大hover区域到整个toolbar */
-.terminal-toolbar:hover .action-buttons-expanded {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(-50%) translateX(-8px); /* 从左侧滑入到正确位置 (-82px + 102px = 20px) */
-  pointer-events: auto;
-}
-
-.terminal-toolbar:hover .action-buttons-expanded .btn {
-  transform: scale(1);
-}
-
-/* 错开动画效果 */
-.terminal-toolbar:hover .action-buttons-expanded .btn:nth-child(1) {
-  transition-delay: 0.05s;
-}
-
-.terminal-toolbar:hover .action-buttons-expanded .btn:nth-child(2) {
-  transition-delay: 0.1s;
-}
-
-.terminal-toolbar:hover .action-buttons-expanded .btn:nth-child(3) {
-  transition-delay: 0.15s;
-}
-
-.terminal-toolbar:hover .action-buttons-expanded .btn:nth-child(4) {
-  transition-delay: 0.2s;
-}
-
-/* 鼠标离开时的收敛动画 */
-.terminal-toolbar:not(:hover) .action-buttons-expanded .btn:nth-child(1) {
-  transition-delay: 0.15s;
-}
-
-.terminal-toolbar:not(:hover) .action-buttons-expanded .btn:nth-child(2) {
-  transition-delay: 0.1s;
-}
-
-.terminal-toolbar:not(:hover) .action-buttons-expanded .btn:nth-child(3) {
-  transition-delay: 0.05s;
-}
-
-.terminal-toolbar:not(:hover) .action-buttons-expanded .btn:nth-child(4) {
-  transition-delay: 0s;
-}
-
-/* XTerm.js 样式覆盖 */
-.xterm {
-  padding: 12px;
-  font-feature-settings: "liga" 0;
-  position: relative;
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  font-family: "SF Mono", Monaco, "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", "Courier New", monospace;
-  line-height: 1.2;
-  letter-spacing: 0.01em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-.xterm:focus {
-  outline: none;
-}
-
-.xterm .xterm-viewport {
-  background-color: transparent;
-  overflow-y: scroll;
-  cursor: default;
-  position: absolute;
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.xterm .xterm-screen {
-  position: relative;
-}
-
-/* 隐藏 xterm 的 textarea 输入元素 */
-.xterm textarea {
-  position: absolute !important;
-  opacity: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
-  left: -9999px !important;
-  top: -9999px !important;
-  border: none !important;
-  outline: none !important;
-  resize: none !important;
-  overflow: hidden !important;
-  pointer-events: none !important;
-  -webkit-appearance: none !important;
-  appearance: none !important;
-}
-
-.xterm .xterm-screen canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.xterm .xterm-scroll-area {
-  visibility: hidden;
-}
-
-.xterm-char-measure-element {
-  display: inline-block;
-  visibility: hidden;
-  position: absolute;
-  top: 0;
-  left: -9999em;
-  line-height: normal;
-}
-
-.xterm.enable-mouse-events {
-  cursor: default;
-}
-
-.xterm.xterm-cursor-pointer {
-  cursor: pointer;
-}
-
-.xterm.column-select.focus {
-  cursor: crosshair;
-}
-
-.xterm .xterm-accessibility,
-.xterm .xterm-message {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 10;
-  color: transparent;
-}
-
-.xterm .live-region {
-  position: absolute;
-  left: -9999px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
-.xterm-dim {
-  opacity: 0.5;
-}
-
-.xterm-underline {
-  text-decoration: underline;
-}
-
-.xterm-strikethrough {
-  text-decoration: line-through;
-}
-
-.xterm-screen .xterm-decoration-container .xterm-decoration.top {
-  z-index: 2;
-  position: relative;
-}
-
-.xterm-decoration-overview-ruler {
-  z-index: 6;
-  position: absolute;
-  top: 0;
-  right: 0;
-  pointer-events: none;
-}
-
-.xterm-decoration-top {
-  z-index: 2;
-  position: relative;
-}
-
-/* 搜索框样式 */
-.xterm-search {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: rgba(30, 30, 30, 0.95);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  padding: 8px;
-  display: none;
-  z-index: 1000;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.xterm-search.show {
-  display: block;
-}
-
-.xterm-search input {
-  background: transparent;
-  border: none;
-  color: #d4d4d4;
-  outline: none;
-  font-size: 12px;
-  width: 200px;
-}
-
-.xterm-search .btn {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-  color: #ccc;
-  font-size: 11px;
-  padding: 4px 8px;
-  margin-left: 4px;
-  cursor: pointer;
-}
-
-.xterm-search .btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: #fff;
-}
-
-/* 主题切换动画 */
-.terminal-focused {
-  box-shadow: 0 0 0 2px rgba(36, 114, 200, 0.3);
-}
-
-/* xterm容器样式 */
-.xterm-container .xterm {
-  height: 100% !important;
-  width: 100% !important;
-}
-
-.xterm-container .terminal-toolbar {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  z-index: 100;
-  border-radius: 8px;
-}
-
-
-/* 图标样式（使用Unicode字符代替图标字体） */
-.icon-back::before { content: "←"; }
-.icon-opencode::before { content: "⚡"; }
-.icon-refresh::before { content: "↻"; }
-.icon-clear::before { content: "✕"; }
-.icon-search::before { content: "🔍"; }
-.icon-theme::before { content: "🌙"; }
-.icon-menu::before { content: "☰"; }
-
-/* 终端加载状态样式 */
-.terminal-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
-  color: #e0e0e0;
-  font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Monaco, 'Menlo', 'Consolas', 'Courier New', monospace;
-  z-index: 10;
-}
-
-.terminal-loading .loading-spinner {
-  width: 48px;
-  height: 48px;
-  border: 3px solid rgba(255, 255, 255, 0.1);
-  border-top: 3px solid #4a9eff;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  margin-bottom: 20px;
-  box-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
-}
-
-.terminal-loading p {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 500;
-  opacity: 0.9;
-  letter-spacing: 0.5px;
-}
-
-/* 为全局loading-spinner添加特定样式，避免冲突 */
-.loading-overlay .loading-spinner {
-  width: 50px;
-  height: 50px;
-  border: 4px solid rgba(57, 57, 57, 0.08);
-  border-top: 4px solid rgba(57, 57, 57, 0.4);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 20px;
-  box-shadow: none;
-}
-
-/* 终端错误状态样式 */
-.terminal-error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
-  text-align: center;
-  padding: 20px;
-  background: #2d1b1b;
-  color: #ff6b6b;
-  border-radius: 4px;
-  font-family: 'Consolas', 'Courier New', monospace;
-  margin: 10px;
-}
-
-.terminal-error h3 {
-  margin: 0 0 10px 0;
-  color: #ff8787;
-}
-
-.terminal-error p {
-  margin: 5px 0;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.terminal-error ul {
-  margin: 10px 0;
-  padding-left: 20px;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.terminal-error li {
-  margin: 3px 0;
-  font-size: 12px;
-  opacity: 0.9;
-}
-
-.terminal-error button {
-  margin-top: 15px;
-  padding: 8px 16px;
-  background: #ff6b6b;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  transition: background-color 0.2s;
-}
-
-.terminal-error button:hover {
-  background: #ff5252;
-}
-
-/* xterm.js helper 容器 - 必须设置正确的 z-index */
-.xterm .xterm-helpers {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5; /* 必须高于 canvas (z-index: 1) */
-  pointer-events: none;
-}
-
-/* textarea 输入框 - 关键修复：字体匹配 + 去除边框 */
-.xterm .xterm-helper-textarea {
-  position: absolute;
-  opacity: 0;
-  left: -9999em; /* 默认在屏幕外，xterm.js 会动态调整 */
-  top: 0;
-  width: 0;
-  height: 0;
-  z-index: -5; /* 默认在 canvas 下面 */
-  white-space: nowrap; /* 防止换行，IME 必需 */
-  overflow: hidden;
-  resize: none;
-
-  /* 关键修复：字体必须与终端完全匹配（Issue #3034） */
-  font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 
-                 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
-  font-size: 14px !important;
-  line-height: 1.2 !important;
-  letter-spacing: 0 !important;
-
-  /* 关键修复：去除边框（Issue #3058） */
-  border: 0px !important;
-  outline: none !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-/* composition 预览视图 - IME 窗口 */
-.xterm .composition-view {
-  background: #000;
-  color: #FFF;
-  display: none;
-  position: absolute;
-  white-space: nowrap;
-  z-index: 1; /* 在 canvas 上面 */
-  pointer-events: none;
-}
-
-.xterm.composing .composition-view {
-  display: block;
-}
-
-/* 为xterm设置合适的等宽字体，解决字体重叠问题 */
-.xterm {
-  font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Monaco, 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
-  font-size: 14px !important;
-  line-height: 1.2 !important;
-  letter-spacing: 0 !important;
-  font-feature-settings: "liga" 0, "calt" 0 !important;
-  -webkit-font-feature-settings: "liga" 0, "calt" 0 !important;
-  -moz-font-feature-settings: "liga" 0, "calt" 0 !important;
-  font-weight: 400 !important;
-  -webkit-font-smoothing: antialiased !important;
-  -moz-osx-font-smoothing: grayscale !important;
-  text-rendering: optimizeLegibility !important;
-}
-
-/* 确保字符渲染正确，防止重叠 */
-.xterm .xterm-screen {
-  font-family: inherit !important;
-  font-size: inherit !important;
-  line-height: 1.2 !important;
-}
-
-.xterm .xterm-viewport {
-  font-family: inherit !important;
-}
-
-/* 修复canvas渲染的字体 */
-.xterm .xterm-screen canvas {
-  font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Monaco, 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
-  image-rendering: pixelated !important;
-  image-rendering: -moz-crisp-edges !important;
-  image-rendering: crisp-edges !important;
-  /* 强制启用硬件加速 */
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  /* 优化 Canvas 渲染质量 */
-  -webkit-font-smoothing: antialiased !important;
-  -moz-osx-font-smoothing: grayscale !important;
-}
-
-/* 字符测量元素使用相同字体 */
-.xterm-char-measure-element {
-  font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Monaco, 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
-  font-size: 14px !important;
-  line-height: 1.2 !important;
-}
-
-/* 行高设置 */
-.xterm-rows {
-  line-height: 1.2 !important;
-}
-
-.xterm-row {
-  height: 1.2em !important;
-  line-height: 1.2 !important;
-}
-
-.xterm-char {
-  width: 0.6em !important;
-  height: 1.2em !important;
-}
-
-/* 确保输入框字体一致 */
-.xterm textarea {
-  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
-  font-size: 14px !important;
-}
-
-/* 修复中文字符显示 */
-.xterm-unicode {
-  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'PingFang SC', 'Microsoft YaHei', monospace !important;
-}
-
-/* ============================================
-   主题配置
-   ============================================ */
-
-/* 暗色主题优化 */
-.xterm.theme-dark {
-  background: #0a0a0a !important;
-  color: #f0f0f0 !important;
-}
-
-/* 浅色主题优化 */
-.xterm.theme-light {
-  background: #ffffff !important;
-  color: #1a1a1a !important;
-}
-
-/* ============================================
-   光标样式优化
-   ============================================ */
-
-/* 深色主题光标 - 增强对比度和可见性 */
-.xterm.theme-dark .xterm-cursor {
-  background: rgba(255, 255, 255, 0.9) !important;
-  border: 1px solid rgba(0, 0, 0, 0.3) !important;
-  width: 10px !important;
-  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6) !important;
-  display: block !important; /* 确保在IME期间也可见 */
-}
-
-/* 浅色主题光标 - 增强对比度和可见性 */
-.xterm.theme-light .xterm-cursor {
-  background: rgba(0, 0, 0, 0.85) !important;
-  border: 1px solid rgba(0, 0, 0, 0.2) !important;
-  width: 10px !important;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4) !important;
-  display: block !important;
-}
-
-
-
-.xterm .xterm-rows > div {
-  position: relative;
-}
-
-.xterm .xterm-rows > div.xterm-focus .xterm-selection,
-.xterm .xterm-rows .xterm-selection {
-  background-color: rgba(74, 144, 226, 0.4) !important;
-}
-
-/* 浅色主题下的选中效果 - VS Code风格高对比度 */
-.xterm.theme-light .xterm-rows > div.xterm-focus .xterm-selection,
-.xterm.theme-light .xterm-rows .xterm-selection {
-  background-color: rgba(74, 144, 226, 0.4) !important; /* 更明显的蓝色选中 */
-  border: 1px solid rgba(74, 144, 226, 0.6) !important; /* 添加明显的边框 */
-}
-
-/* 深色主题下的选中效果 - VS Code风格高对比度 */
-.xterm.theme-dark .xterm-rows > div.xterm-focus .xterm-selection,
-.xterm.theme-dark .xterm-rows .xterm-selection {
-  background-color: rgba(74, 144, 226, 0.6) !important; /* 更高的透明度，类似VS Code */
-  border: 1px solid rgba(74, 144, 226, 0.8) !important; /* 添加明显的边框 */
-}
-
-/* xterm-selection span 选中样式 */
-.xterm .xterm-selection span {
-  background-color: inherit !important;
-}
-
-/* 确保浅色主题下的选中文字可见 - 使用深色文字增强对比 */
-.xterm.theme-light .xterm-selection span {
-  color: #000000 !important;
-  font-weight: 600 !important;
-  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
-}
-
-/* 确保深色主题下的选中文字可见 - 使用浅色文字增强对比 */
-.xterm.theme-dark .xterm-selection span {
-  color: #ffffff !important;
-  font-weight: 600 !important;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8) !important;
-}
-
-/* 强制覆盖选中样式 - 浅色主题 */
-body .xterm.theme-light .xterm-selection,
-body .xterm.theme-light .xterm-rows .xterm-selection,
-body .xterm.theme-light .xterm-rows > div .xterm-selection,
-body .xterm.theme-light .xterm-screen .xterm-selection,
-body div.xterm.theme-light .xterm-selection {
-  background-color: rgba(24, 144, 255, 0.25) !important;
-  border: 1px solid rgba(24, 144, 255, 0.4) !important;
-}
-
-/* 强制覆盖选中样式 - 深色主题 */
-body .xterm.theme-dark .xterm-selection,
-body .xterm.theme-dark .xterm-rows .xterm-selection,
-body .xterm.theme-dark .xterm-rows > div .xterm-selection,
-body .xterm.theme-dark .xterm-screen .xterm-selection,
-body div.xterm.theme-dark .xterm-selection {
-  background-color: rgba(100, 181, 246, 0.35) !important;
-  border: 1px solid rgba(100, 181, 246, 0.5) !important;
-}
-
-/* 选中文字颜色 - 浅色主题 */
-body .xterm.theme-light .xterm-selection span,
-body .xterm.theme-light .xterm-selection .xterm-char {
-  color: #000000 !important;
-  font-weight: 600 !important;
-  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
-}
-
-/* 选中文字颜色 - 深色主题 */
-body .xterm.theme-dark .xterm-selection span,
-body .xterm.theme-dark .xterm-selection .xterm-char {
-  color: #ffffff !important;
-  font-weight: 600 !important;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8) !important;
-}
-
-/* ============================================
-   滚动条样式优化
-   ============================================ */
-
-.xterm .xterm-viewport::-webkit-scrollbar {
-  width: 8px !important;
-  height: 8px !important;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-track {
-  background: transparent !important;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.4) !important;
-  border-radius: 4px !important;
-  transition: background-color 0.2s ease !important;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-  background: rgba(128, 128, 128, 0.6) !important;
-}
-
-/* 浅色主题滚动条 */
-.xterm.theme-light .xterm-viewport::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2) !important;
-}
-
-.xterm.theme-light .xterm-viewport::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3) !important;
-}
-
-/* 深色主题滚动条 */
-.xterm.theme-dark .xterm-viewport::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2) !important;
-}
-
-.xterm.theme-dark .xterm-viewport::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3) !important;
-}
-
-/* ============================================
-   响应式字体大小调整
-   ============================================ */
-
-@media (max-width: 480px) {
-  .xterm {
-    font-size: 11px !important;
-  }
-  
-  .xterm-char-measure-element {
-    font-size: 11px !important;
-  }
-}
-
-/* ============================================
-   高DPI屏幕优化
-   ============================================ */
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .xterm .xterm-screen canvas {
-    /* 高DPI屏幕使用自动渲染以获得更好的清晰度 */
-    image-rendering: auto !important;
-    /* 确保在高DPI屏幕上使用正确的缩放 */
-    transform: translateZ(0);
-  }
-}
-
-/* Canvas 渲染器优化 - 确保正确的层级和定位 */
-.xterm .xterm-screen {
-  position: relative !important;
-  overflow: hidden !important;
-}
-
-/* 确保 Canvas 渲染器优先于 DOM 元素 */
-.xterm .xterm-screen canvas {
-  position: relative !important;
-  z-index: 1 !important;
-}
-
-/* 隐藏 DOM 渲染元素（当使用 Canvas 时） */
-.xterm.xterm-canvas-mode .xterm-rows {
-  display: none !important;
-}
-
-/* ============================================
-   终端容器样式
-   ============================================ */
-
-/* 浅色主题容器 */
-.terminal-content.theme-light {
-  background: #ffffff !important;
-}
-
-
-/* ============================================
-   终端工具栏样式（保留上面的完整定义）
-   ============================================ */
-
-.renderer-info {
-  font-size: 11px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  cursor: help;
-  transition: all 0.2s ease;
-}
-
-.renderer-info:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-/* 浅色主题工具栏 */
-.theme-light .terminal-toolbar {
-  background: rgba(0, 0, 0, 0.05);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.theme-light .terminal-status {
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.theme-light .terminal-actions .btn {
-  background: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.theme-light .terminal-actions .btn:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 1);
-}
-
-/* ============================================
-   终端加载和错误状态（已删除重复注释，这些样式在上面已有定义）
-   ============================================ */
-
-/* ============================================
-   终端容器样式（已删除重复定义，保留上面的完整定义）
-   ============================================ */
-
-/* 隐藏xterm默认光标，使用自定义样式 */
-.xterm-cursor-block,
-.xterm-cursor-bar {
-  display: none !important;
-}
-
-/* ============================================
-   ASCII 艺术动画效果
-   ============================================ */
-
-/* 彩虹渐变动画 */
-@keyframes rainbow-shift {
-  0% { filter: hue-rotate(0deg); }
-  25% { filter: hue-rotate(90deg); }
-  50% { filter: hue-rotate(180deg); }
-  75% { filter: hue-rotate(270deg); }
-  100% { filter: hue-rotate(360deg); }
-}
-
-/* 文字发光效果 */
-@keyframes text-glow {
-  0%, 100% {
-    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
-  }
-  50% {
-    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
-  }
-}
-
-/* 打字机效果 */
-@keyframes typewriter {
-  from { width: 0; }
-  to { width: 100%; }
-}
-
-/* 闪烁效果 */
-@keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
-}
-
-/* 渐变背景动画 */
-@keyframes gradient-bg {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-
-/* 为终端容器添加背景渐变动画 */
-.terminal-area {
-  background: linear-gradient(-45deg, #1a1a1a, #2a2a2a, #1a1a1a, #0a0a0a);
-  background-size: 400% 400%;
-  animation: gradient-bg 15s ease infinite;
-}
-
-/* 终端容器内的特殊样式 */
-.terminal-area .xterm-screen {
-  /* 为ASCII艺术添加特殊效果 */
-  position: relative;
-}
-
-/* 为特定的ASCII艺术行添加动画类 */
-.terminal-area .ascii-art-line {
-  transition: all 0.3s ease;
-}
-
-/* 添加悬停效果 */
-.terminal-area:hover {
-  filter: brightness(1.1);
-}
-
-/* 光标闪烁动画 */
-.terminal-cursor-blink {
-  animation: blink 1s infinite;
-}
-
-/* 彩虹文字效果 */
-.rainbow-text {
-  animation: rainbow-shift 3s linear infinite;
-  background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
-  background-size: 400% 400%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  animation: rainbow-shift 3s linear infinite, text-glow 2s ease-in-out infinite alternate;
-}
-
-/* 发光边框效果 */
-.ascii-art-border {
-  filter: drop-shadow(0 0 10px rgba(0, 162, 255, 0.5));
-  animation: text-glow 3s ease-in-out infinite alternate;
-}
-
-/* 脉冲效果 */
-@keyframes pulse-glow {
-  0% {
-    filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.3));
-  }
-  50% {
-    filter: drop-shadow(0 0 20px rgba(0, 162, 255, 0.8));
-  }
-  100% {
-    filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.3));
-  }
-}
-
-.ascii-art-pulse {
-  animation: pulse-glow 2s ease-in-out infinite;
-}
-
-/* 波浪效果 */
-@keyframes wave {
-  0%, 100% { transform: translateY(0px); }
-  25% { transform: translateY(-2px); }
-  50% { transform: translateY(-4px); }
-  75% { transform: translateY(-2px); }
-}
-
-.ascii-art-wave {
-  animation: wave 4s ease-in-out infinite;
-}