47 lines
1.7 KiB
Rust
47 lines
1.7 KiB
Rust
/// Terminal component — demonstrates terminal rendering capability.
|
|
///
|
|
/// In the Tauri+Svelte app, terminals use xterm.js (Canvas addon) via WebView.
|
|
/// Dioxus desktop also uses wry/WebView, so xterm.js embedding IS possible
|
|
/// via `document::eval()` or an iframe. For this prototype, we render a styled
|
|
/// terminal area showing mock output to demonstrate the visual integration.
|
|
///
|
|
/// A production implementation would:
|
|
/// 1. Inject xterm.js via `with_custom_head()` in desktop Config
|
|
/// 2. Use `document::eval()` to create/manage Terminal instances
|
|
/// 3. Bridge PTY output from PtyManager through DioxusEventSink -> eval()
|
|
///
|
|
/// The key insight: Dioxus desktop uses the SAME wry/WebKit2GTK backend as
|
|
/// Tauri, so xterm.js works identically. No Canvas addon difference.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
use crate::state::{TerminalLine, TerminalLineKind};
|
|
|
|
#[component]
|
|
pub fn TerminalArea(lines: Vec<TerminalLine>) -> Element {
|
|
rsx! {
|
|
div { class: "terminal-area",
|
|
for line in lines.iter() {
|
|
div { class: "terminal-line",
|
|
match line.kind {
|
|
TerminalLineKind::Prompt => rsx! {
|
|
span { class: "terminal-prompt", "{line.text}" }
|
|
},
|
|
TerminalLineKind::Output => rsx! {
|
|
span { class: "terminal-output", "{line.text}" }
|
|
},
|
|
}
|
|
}
|
|
}
|
|
|
|
// Blinking cursor
|
|
div { class: "terminal-line",
|
|
span { class: "terminal-prompt", "$ " }
|
|
span {
|
|
style: "color: var(--ctp-text);",
|
|
"\u{2588}"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|