fix(terminal): improve dimensions handling and add system theme for xterm
All checks were successful
Beta Release / beta (push) Successful in 47s
All checks were successful
Beta Release / beta (push) Successful in 47s
💘 Generated with Crush Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>
This commit is contained in:
Augustin
@@ -1,73 +1,69 @@
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { Terminal as XTerm } from '@xterm/xterm'
|
||||
import { FitAddon } from '@xterm/addon-fit'
|
||||
import { WebLinksAddon } from '@xterm/addon-web-links'
|
||||
import { Plus, X, Monitor, Globe, ChevronDown, Pencil, Trash2, Search, Copy, Send, Eye } from 'lucide-react'
|
||||
import '@xterm/xterm/css/xterm.css'
|
||||
import { useI18n } from '../i18n'
|
||||
|
||||
const MAX_TABS = 7
|
||||
const SHELL_MAX_TOKENS = 100000
|
||||
const TABS_STORAGE_KEY = 'muyue_shell_tabs'
|
||||
const TERMINAL_BUFFER_KEY = 'muyue_terminal_buffers'
|
||||
|
||||
function renderContent(text) {
|
||||
const parts = []
|
||||
const codeBlockRegex = /(```[\s\S]*?```)/g
|
||||
let match
|
||||
let lastIndex = 0
|
||||
while ((match = codeBlockRegex.exec(text)) !== null) {
|
||||
if (match.index > lastIndex) {
|
||||
parts.push({ type: 'text', content: text.slice(lastIndex, match.index) })
|
||||
}
|
||||
const full = match[1]
|
||||
const firstNewline = full.indexOf('\n')
|
||||
const lang = firstNewline > -1 ? full.slice(3, firstNewline).trim() : ''
|
||||
const code = firstNewline > -1 ? full.slice(firstNewline + 1, -3) : full.slice(3, -3)
|
||||
parts.push({ type: 'code', lang, content: code })
|
||||
lastIndex = match.index + full.length
|
||||
}
|
||||
if (lastIndex < text.length) {
|
||||
const remaining = text.slice(lastIndex)
|
||||
const openBlock = remaining.match(/```(\w*)\n?([\s\S]*)$/)
|
||||
if (openBlock) {
|
||||
if (openBlock.index > 0) {
|
||||
parts.push({ type: 'text', content: remaining.slice(0, openBlock.index) })
|
||||
}
|
||||
parts.push({ type: 'code', lang: openBlock[1] || '', content: openBlock[2] || '' })
|
||||
} else {
|
||||
parts.push({ type: 'text', content: remaining })
|
||||
}
|
||||
}
|
||||
return parts
|
||||
impo
|
||||
// === Style thème système pour xterm ===
|
||||
function getCSSVariable(varName) {
|
||||
if (typeof document === 'undefined') return null;
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim() || null;
|
||||
}
|
||||
|
||||
function formatText(text) {
|
||||
let html = text
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
function parseHexColor(hex) {
|
||||
if (!hex || hex.startsWith('var(')) return null;
|
||||
hex = hex.replace('#', '');
|
||||
if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
|
||||
if (hex.length !== 6) return null;
|
||||
const r = parseInt(hex.slice(0, 2), 16);
|
||||
const g = parseInt(hex.slice(2, 4), 16);
|
||||
const b = parseInt(hex.slice(4, 6), 16);
|
||||
return { r, g, b };
|
||||
}
|
||||
|
||||
html = html
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
|
||||
.replace(/^### (.+)$/gm, '<h4 class="msg-h4">$1</h4>')
|
||||
.replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
|
||||
.replace(/^# (.+)$/gm, '<h2 class="msg-h2">$1</h2>')
|
||||
.replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">• $1</div>')
|
||||
.replace(/^\s*(\d+)[.)] (.+)$/gm, '<div class="msg-step"><span class="msg-step-num">$1</span> $2</div>')
|
||||
.replace(/\n/g, '<br/>')
|
||||
function toRgbString(hex) {
|
||||
const c = parseHexColor(hex);
|
||||
if (!c) return '#000000';
|
||||
return `#${c.r.toString(16).padStart(2, '0')}${c.g.toString(16).padStart(2, '0')}${c.b.toString(16).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
html = html
|
||||
.replace(/<br\/>\s*<br\/>/g, '<br/>')
|
||||
.replace(/<br\/>\s*(<h[234]|<div class="msg-)/g, '$1')
|
||||
.replace(/(<\/h[234]|<\/div>)\s*<br\/>/g, '$1')
|
||||
.replace(/\s+on\w+=["'][^"']*["']/gi, '')
|
||||
.replace(/javascript:/gi, '')
|
||||
.replace(/data:/gi, '')
|
||||
function buildSystemTheme() {
|
||||
const bg = getCSSVariable('--bg-base') || '#0F0D10';
|
||||
const fg = getCSSVariable('--text-primary') || '#EAE0E2';
|
||||
const accent = getCSSVariable('--accent-light') || '#FF1A5E';
|
||||
const accentDim = getCSSVariable('--accent-dim') || '#6B2033';
|
||||
const success = '#00E676';
|
||||
const warning = '#FFD740';
|
||||
const error = getCSSVariable('--accent-bright') || '#FF1744';
|
||||
const bgSurface = getCSSVariable('--bg-surface') || bg;
|
||||
const bgElevated = getCSSVariable('--bg-elevated') || bgSurface;
|
||||
const textSecondary = getCSSVariable('--text-secondary') || fg;
|
||||
const textTertiary = getCSSVariable('--text-tertiary') || textSecondary;
|
||||
|
||||
return html
|
||||
return {
|
||||
background: toRgbString(bg),
|
||||
foreground: toRgbString(fg),
|
||||
cursor: toRgbString(accent),
|
||||
cursorAccent: toRgbString(bg),
|
||||
selectionBackground: `${toRgbString(accentDim)}44`,
|
||||
selectionForeground: '#FFFFFF',
|
||||
black: toRgbString(bgElevated),
|
||||
red: toRgbString(error),
|
||||
green: toRgbString(success),
|
||||
yellow: toRgbString(warning),
|
||||
blue: toRgbString(getCSSVariable('--accent') || '#448AFF'),
|
||||
magenta: toRgbString(accent),
|
||||
cyan: '#00BCD4',
|
||||
white: toRgbString(fg),
|
||||
brightBlack: toRgbString(bgSurface),
|
||||
brightRed: toRgbString(accent),
|
||||
brightGreen: toRgbString(success),
|
||||
brightYellow: toRgbString(warning),
|
||||
brightBlue: toRgbString(getCSSVariable('--accent-muted') || '#82B1FF'),
|
||||
brightMagenta: toRgbString(getCSSVariable('--accent-soft') || '#FF80AB'),
|
||||
brightCyan: '#84FFFF',
|
||||
brightWhite: '#FFFFFF',
|
||||
};
|
||||
}
|
||||
|
||||
const THEMES = {
|
||||
system: buildSystemTheme(),
|
||||
default: {
|
||||
background: '#0A0A0C', foreground: '#EAE0E2', cursor: '#FF0033',
|
||||
cursorAccent: '#0A0A0C', selectionBackground: '#FF003344', selectionForeground: '#ffffff',
|
||||
@@ -125,11 +121,14 @@ const THEMES = {
|
||||
}
|
||||
|
||||
function getTheme(themeName) {
|
||||
return THEMES[themeName] || THEMES.default
|
||||
if (themeName === 'system' || themeName === 'default') {
|
||||
return buildSystemTheme()
|
||||
}
|
||||
return THEMES[themeName] || buildSystemTheme()
|
||||
}
|
||||
|
||||
function createTerminal(container, settings = {}) {
|
||||
const theme = getTheme(settings.theme || 'default')
|
||||
const theme = getTheme(settings.theme || 'system')
|
||||
const term = new XTerm({
|
||||
cursorBlink: true,
|
||||
fontSize: settings.fontSize || 12,
|
||||
@@ -240,7 +239,7 @@ export default function Shell({ api }) {
|
||||
const { t } = useI18n()
|
||||
const tabsRef = useRef({})
|
||||
const nextIdRef = useRef(1)
|
||||
const settingsRef = useRef({ fontSize: 12, fontFamily: "'JetBrains Mono', 'Fira Code', monospace", theme: 'default' })
|
||||
const settingsRef = useRef({ fontSize: 12, fontFamily: "'JetBrains Mono', 'Fira Code', monospace", theme: 'system' })
|
||||
const pendingCommandsRef = useRef({})
|
||||
|
||||
const [tabs, setTabs] = useState(() => {
|
||||
@@ -291,7 +290,7 @@ export default function Shell({ api }) {
|
||||
const [terminalSettings, setTerminalSettings] = useState({
|
||||
fontSize: 12,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace",
|
||||
theme: 'default',
|
||||
theme: 'system',
|
||||
})
|
||||
|
||||
useEffect(() => { settingsRef.current = terminalSettings }, [terminalSettings])
|
||||
@@ -356,7 +355,7 @@ export default function Shell({ api }) {
|
||||
setTerminalSettings({
|
||||
fontSize: d.terminal.font_size || 12,
|
||||
fontFamily: d.terminal.font_family || "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace",
|
||||
theme: d.terminal.theme || 'default',
|
||||
theme: d.terminal.theme || 'system',
|
||||
})
|
||||
}
|
||||
}).catch(() => {})
|
||||
|
||||
@@ -1058,3 +1058,76 @@ input::placeholder { color: var(--text-disabled); }
|
||||
word-break: break-word;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* === XTerm Custom Styling === */
|
||||
/* Styles for xterm.js integrated with Muyue theme */
|
||||
.shell-xterm-instance .xterm {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.shell-xterm-instance .xterm-viewport {
|
||||
background-color: var(--bg-base) !important;
|
||||
}
|
||||
|
||||
.shell-xterm-instance .xterm-screen {
|
||||
background-color: var(--bg-base);
|
||||
}
|
||||
|
||||
/* Scrollbar styling for xterm */
|
||||
.shell-xterm-instance .xterm-viewport::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.shell-xterm-instance .xterm-viewport::-webkit-scrollbar-track {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.shell-xterm-instance .xterm-viewport::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-dim);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.shell-xterm-instance .xterm-viewport::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-dark);
|
||||
}
|
||||
|
||||
/* Selection styling */
|
||||
.shell-xterm-instance .xterm-selection {
|
||||
background: var(--accent-dim) !important;
|
||||
}
|
||||
|
||||
/* Focus ring styling */
|
||||
.shell-xterm-instance .xterm:focus .xterm-helper-text-container {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Ensure consistent font rendering */
|
||||
.shell-xterm-instance .xterm .xterm-char-measure-element {
|
||||
font-family: var(--font-mono) !important;
|
||||
}
|
||||
|
||||
/* Bell animation styling */
|
||||
.shell-xterm-instance .xterm-bell {
|
||||
animation: xterm-bell-flash 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes xterm-bell-flash {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Cursor styling */
|
||||
.shell-xterm-instance .xterm-cursor {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Link styling for web links addon */
|
||||
.shell-xterm-instance .xterm-link {
|
||||
color: var(--accent-light) !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.shell-xterm-instance .xterm-link:hover {
|
||||
color: var(--accent-muted) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user