370 lines
14 KiB
JavaScript
370 lines
14 KiB
JavaScript
/**
|
||
* terminal-core-view/index.js
|
||
*
|
||
* 微信小程序终端渲染组件。
|
||
* 消费 @remoteconn/terminal-core 构建产物（dist-miniprogram/index.js），
|
||
* 通过 setData({rows, cursor}) 驱动 rich-text 渲染。
|
||
*
|
||
* 外部属性（properties）：
|
||
* - gatewayUrl {string} 网关 WebSocket 地址
|
||
* - gatewayToken {string} 网关鉴权 Token
|
||
*
|
||
* 外部方法（通过组件引用调用）：
|
||
* - connect(params) 开始连接，params: { host, port, username, password? }
|
||
* - disconnect(reason?) 断开连接
|
||
* - sendInput(data) 发送输入
|
||
*/
|
||
|
||
const path = '../../../../packages/terminal-core/dist-miniprogram/index';
|
||
let TerminalCore, InputBridge, OutputBuffer, SessionMachine, sanitizeTerminalOutput, calcSize;
|
||
try {
|
||
const core = require(path);
|
||
TerminalCore = core.TerminalCore;
|
||
InputBridge = core.InputBridge;
|
||
OutputBuffer = core.OutputBuffer;
|
||
SessionMachine = core.SessionMachine;
|
||
sanitizeTerminalOutput = core.sanitizeTerminalOutput;
|
||
calcSize = core.calcSize;
|
||
} catch(e) {
|
||
console.error('[terminal-core-view] 无法加载 terminal-core，请先执行 build:miniprogram', e);
|
||
}
|
||
|
||
const { WxTransport } = require('../../utils/wxTransport');
|
||
const { createWxInputBridge } = require('../../utils/wxInputBridge');
|
||
const { createWxMeasureAdapter } = require('../../utils/wxMeasureAdapter');
|
||
|
||
// ── 颜色渲染 ──────────────────────────────────────────────────────────────────
|
||
const ANSI16 = [
|
||
'#000000','#cc0000','#00aa00','#aaaa00',
|
||
'#0000ee','#cc00cc','#00aaaa','#aaaaaa',
|
||
'#555555','#ff5555','#55ff55','#ffff55',
|
||
'#5555ff','#ff55ff','#55ffff','#ffffff',
|
||
];
|
||
|
||
function p256ToCss(idx) {
|
||
if (idx < 16) return ANSI16[idx] || '#000';
|
||
if (idx >= 232) {
|
||
const v = 8 + (idx - 232) * 10;
|
||
return 'rgb(' + v + ',' + v + ',' + v + ')';
|
||
}
|
||
const i = idx - 16;
|
||
const b = i % 6, g = Math.floor(i / 6) % 6, r = Math.floor(i / 36);
|
||
const ch = function(x) { return x === 0 ? 0 : 55 + x * 40; };
|
||
return 'rgb(' + ch(r) + ',' + ch(g) + ',' + ch(b) + ')';
|
||
}
|
||
|
||
function colorToCss(c, isFg) {
|
||
if (!c) return isFg ? 'inherit' : 'transparent';
|
||
switch (c.mode) {
|
||
case 'default': return isFg ? 'inherit' : 'transparent';
|
||
case 'p16': return ANSI16[c.value] || 'inherit';
|
||
case 'p256': return p256ToCss(c.value);
|
||
case 'rgb': return '#' + ((c.value & 0xffffff) | 0x1000000).toString(16).slice(1);
|
||
default: return 'inherit';
|
||
}
|
||
}
|
||
|
||
const FLAG_BOLD = 1;
|
||
const FLAG_DIM = 2;
|
||
const FLAG_ITALIC = 4;
|
||
const FLAG_UNDERLINE = 8;
|
||
const FLAG_INVERSE = 16;
|
||
const FLAG_INVISIBLE = 32;
|
||
const FLAG_STRIKETHROUGH = 64;
|
||
const FLAG_OVERLINE = 128;
|
||
|
||
/** 将一行 cells 转换为 rich-text 节点数组 */
|
||
function lineToNodes(cells) {
|
||
const nodes = [];
|
||
let i = 0;
|
||
while (i < cells.length) {
|
||
const cell = cells[i];
|
||
if (!cell) { i++; continue; }
|
||
|
||
const flags = cell.flags || 0;
|
||
const inverse = !!(flags & FLAG_INVERSE);
|
||
|
||
let fg = cell.fg, bg = cell.bg;
|
||
if (inverse) { const tmp = fg; fg = bg; bg = tmp; }
|
||
|
||
let style = '';
|
||
const fgCss = colorToCss(fg, true);
|
||
const bgCss = colorToCss(bg, false);
|
||
if (fgCss !== 'inherit') style += 'color:' + fgCss + ';';
|
||
if (bgCss !== 'transparent') style += 'background:' + bgCss + ';';
|
||
if (flags & FLAG_BOLD) style += 'font-weight:bold;';
|
||
if (flags & FLAG_DIM) style += 'opacity:0.6;';
|
||
if (flags & FLAG_ITALIC) style += 'font-style:italic;';
|
||
if (flags & FLAG_UNDERLINE) style += 'text-decoration:underline;';
|
||
if (flags & FLAG_STRIKETHROUGH) style += 'text-decoration:line-through;';
|
||
if (flags & FLAG_INVISIBLE) style += 'color:transparent;';
|
||
|
||
// 合并相邻相同 style 的 cells
|
||
let text = cell.char || ' ';
|
||
i++;
|
||
while (i < cells.length) {
|
||
const next = cells[i];
|
||
if (!next) break;
|
||
const nFlags = next.flags || 0;
|
||
// 简单比较：只有标志和颜色模式全相同才合并
|
||
if (nFlags !== flags ||
|
||
JSON.stringify(next.fg) !== JSON.stringify(fg) ||
|
||
JSON.stringify(next.bg) !== JSON.stringify(bg)) break;
|
||
text += next.char || ' ';
|
||
i++;
|
||
}
|
||
|
||
nodes.push({
|
||
type: 'node',
|
||
name: 'span',
|
||
attrs: style ? { style: style } : {},
|
||
children: [{ type: 'text', text: text }],
|
||
});
|
||
}
|
||
return nodes;
|
||
}
|
||
|
||
// ── 组件定义 ──────────────────────────────────────────────────────────────────
|
||
Component({
|
||
properties: {
|
||
gatewayUrl: { type: String, value: '' },
|
||
gatewayToken: { type: String, value: '' },
|
||
},
|
||
|
||
data: {
|
||
rows: [], // Array<{ html: Array }>
|
||
cursor: { row: -1, left: 0, visible: false },
|
||
scrollTop: 9999999, // 滚到底
|
||
state: 'idle',
|
||
latencyMs: 0,
|
||
title: '',
|
||
inputValue: '',
|
||
},
|
||
|
||
lifetimes: {
|
||
attached: function() {
|
||
this._init();
|
||
},
|
||
detached: function() {
|
||
this._dispose();
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
// ── 初始化 ───────────────────────────────────────────────────────────────
|
||
_init: function() {
|
||
const self = this;
|
||
|
||
// Core
|
||
self._core = TerminalCore ? new TerminalCore(80, 24) : null;
|
||
self._buffer = OutputBuffer ? new OutputBuffer({ maxEntries: 500, maxBytes: 256 * 1024 }) : null;
|
||
self._machine = SessionMachine ? new SessionMachine() : null;
|
||
self._inputBridge = InputBridge ? new InputBridge() : null;
|
||
self._wxBridge = createWxInputBridge();
|
||
self._transport = null;
|
||
self._offTransport = null;
|
||
self._lastRevision = -1;
|
||
self._charW = 7.8; // 默认字符宽度 px (monospace 13px 近似)
|
||
self._lineH = 16.25; // 行高 px (13px * 1.25)
|
||
|
||
// 订阅 core 事件
|
||
if (self._core) {
|
||
self._core.on('bell', function() { wx.vibrateShort({ type: 'light' }); });
|
||
self._core.on('titleChange', function(t) {
|
||
self.setData({ title: t });
|
||
});
|
||
}
|
||
|
||
// 测量适配器
|
||
self._measure = createWxMeasureAdapter(self, '#tc-viewport', self._charW, self._lineH);
|
||
self._measure.onResize(function() {
|
||
self._doFit();
|
||
});
|
||
|
||
// 输入桥接事件订阅
|
||
self._wxBridge.on('key', function(p) {
|
||
if (!self._inputBridge) return;
|
||
const seq = self._inputBridge.mapKey(p.key, p.code, p.ctrlKey, p.altKey, p.shiftKey, p.metaKey);
|
||
if (seq !== null) self.sendInput(seq);
|
||
});
|
||
self._wxBridge.on('input', function(p) {
|
||
if (p.isComposing) return;
|
||
if (p.data) self.sendInput(p.data);
|
||
self.setData({ inputValue: '' });
|
||
});
|
||
self._wxBridge.on('paste', function(p) {
|
||
if (!self._inputBridge) return;
|
||
const seq = self._inputBridge.mapPaste(p.text);
|
||
self.sendInput(seq);
|
||
});
|
||
self._wxBridge.on('compositionend', function(p) {
|
||
if (p.data) self.sendInput(p.data);
|
||
self.setData({ inputValue: '' });
|
||
});
|
||
|
||
// 启动渲染循环（50ms ≈ 20fps，setData 有限流）
|
||
self._renderTimer = setInterval(function() { self._renderFrame(); }, 50);
|
||
|
||
// 启动测量轮询
|
||
self._measure.startPoll(600);
|
||
},
|
||
|
||
_dispose: function() {
|
||
if (this._renderTimer) { clearInterval(this._renderTimer); this._renderTimer = null; }
|
||
this._measure && this._measure.stopPoll();
|
||
this._offTransport && this._offTransport();
|
||
this._transport && this._transport._cleanup && this._transport._cleanup();
|
||
},
|
||
|
||
// ── 尺寸适配 ─────────────────────────────────────────────────────────────
|
||
_doFit: function() {
|
||
if (!calcSize || !this._core) return;
|
||
const { widthPx: contW, heightPx: contH } = this._measure.measureContainer();
|
||
if (contW < 10 || contH < 10) return;
|
||
const { widthPx: charW, heightPx: lineH } = this._measure.measureChar();
|
||
const { cols, rows } = calcSize(contW, contH, charW, lineH);
|
||
this._core.resize(cols, rows);
|
||
this._charW = charW;
|
||
if (this._transport && this.data.state === 'connected') {
|
||
this._transport.resize(cols, rows);
|
||
}
|
||
},
|
||
|
||
// ── 渲染帧 ───────────────────────────────────────────────────────────────
|
||
_renderFrame: function() {
|
||
if (!this._core) return;
|
||
const snap = this._core.snapshot();
|
||
if (snap.revision === this._lastRevision) return;
|
||
this._lastRevision = snap.revision;
|
||
|
||
const rows = snap.lines.map(function(line) {
|
||
return { html: lineToNodes(line.cells) };
|
||
});
|
||
|
||
// 光标位置（像素）
|
||
const cursorLeft = snap.cursor.x * this._charW;
|
||
const cursorRow = snap.cursor.y; // 相对可视区行号
|
||
|
||
this.setData({
|
||
rows: rows,
|
||
cursor: { row: cursorRow, left: cursorLeft, visible: snap.cursor.visible },
|
||
title: snap.title || this.data.title,
|
||
});
|
||
},
|
||
|
||
// ── 公开 API ──────────────────────────────────────────────────────────────
|
||
connect: function(params) {
|
||
const self = this;
|
||
if (!WxTransport) { console.error('[tc-view] WxTransport 未加载'); return; }
|
||
|
||
self._transport = new WxTransport({
|
||
gatewayUrl: self.properties.gatewayUrl,
|
||
gatewayToken: self.properties.gatewayToken,
|
||
});
|
||
|
||
self._offTransport = self._transport.on(function(event) {
|
||
if (event.type === 'stdout' || event.type === 'stderr') {
|
||
const sanitized = sanitizeTerminalOutput ? sanitizeTerminalOutput(event.data) : event.data;
|
||
if (sanitized) {
|
||
self._buffer && self._buffer.push(sanitized);
|
||
self._core && self._core.write(sanitized);
|
||
}
|
||
} else if (event.type === 'control') {
|
||
if (event.action === 'connected') {
|
||
self._machine && self._machine.tryTransition('connected');
|
||
self.setData({ state: 'connected', latencyMs: 0 });
|
||
self._doFit();
|
||
} else if (event.action === 'pong') {
|
||
// latency 由 WxTransport 内部 _pingAt 计算
|
||
} else if (event.action === 'disconnect') {
|
||
self._machine && self._machine.tryTransition('disconnected');
|
||
self.setData({ state: 'disconnected' });
|
||
}
|
||
} else if (event.type === 'error') {
|
||
self._machine && self._machine.tryTransition('error');
|
||
self.setData({ state: 'error' });
|
||
}
|
||
});
|
||
|
||
self._machine && self._machine.tryTransition('connecting');
|
||
self.setData({ state: 'connecting' });
|
||
|
||
self._transport.connect(params).catch(function(err) {
|
||
console.error('[tc-view] connect error', err);
|
||
self.setData({ state: 'error' });
|
||
});
|
||
},
|
||
|
||
disconnect: function(reason) {
|
||
if (this._transport) {
|
||
this._transport.disconnect(reason || 'manual');
|
||
}
|
||
this._machine && this._machine.tryTransition('disconnected');
|
||
this.setData({ state: 'disconnected' });
|
||
},
|
||
|
||
sendInput: function(data) {
|
||
if (this.data.state !== 'connected' || !this._transport) return;
|
||
this._transport.send(data);
|
||
},
|
||
|
||
// ── WXML 事件处理 ─────────────────────────────────────────────────────────
|
||
onInput: function(e) {
|
||
const value = e.detail.value || '';
|
||
const prev = this._prevInputValue || '';
|
||
// 计算增量字符
|
||
if (value.length > prev.length) {
|
||
const delta = value.slice(prev.length);
|
||
this._wxBridge.triggerInput(delta, e.detail.isComposing);
|
||
}
|
||
this._prevInputValue = value;
|
||
},
|
||
|
||
onConfirm: function() {
|
||
this._prevInputValue = '';
|
||
this._wxBridge.triggerConfirm();
|
||
},
|
||
|
||
onSend: function() {
|
||
const val = this.data.inputValue;
|
||
if (val) {
|
||
this._wxBridge.triggerInput(val, false);
|
||
this._wxBridge.triggerConfirm();
|
||
this.setData({ inputValue: '' });
|
||
this._prevInputValue = '';
|
||
}
|
||
},
|
||
|
||
onInputBlur: function() { /* no-op */ },
|
||
onKeyboardChange: function() { /* no-op */ },
|
||
|
||
// ── 滚动事件 ──────────────────────────────────────────────────────────────
|
||
onScrollToLower: function() {
|
||
this._autoScroll = true;
|
||
},
|
||
onScrollToUpper: function() {
|
||
this._autoScroll = false;
|
||
},
|
||
onScroll: function() { /* handled by upper/lower events */ },
|
||
|
||
// ── 触控工具栏 ────────────────────────────────────────────────────────────
|
||
onTapUp: function() { this._wxBridge.triggerKey('ArrowUp', 'ArrowUp'); },
|
||
onTapDown: function() { this._wxBridge.triggerKey('ArrowDown', 'ArrowDown'); },
|
||
onTapLeft: function() { this._wxBridge.triggerKey('ArrowLeft', 'ArrowLeft'); },
|
||
onTapRight: function() { this._wxBridge.triggerKey('ArrowRight', 'ArrowRight'); },
|
||
onTapTab: function() { this._wxBridge.triggerKey('Tab', 'Tab'); },
|
||
onTapEnter: function() { this._wxBridge.triggerConfirm(); },
|
||
onTapCtrlC: function() { this.sendInput('\u0003'); },
|
||
onTapCtrlD: function() { this.sendInput('\u0004'); },
|
||
onTapEsc: function() { this.sendInput('\x1b'); },
|
||
onTapPaste: function() {
|
||
const self = this;
|
||
wx.getClipboardData({
|
||
success: function(res) {
|
||
if (res.data) self._wxBridge.triggerPaste(res.data);
|
||
},
|
||
});
|
||
},
|
||
},
|
||
});
|