70 lines
2.4 KiB
Plaintext
70 lines
2.4 KiB
Plaintext
<!--
|
|
terminal-core-view — 微信小程序终端渲染组件。
|
|
消费 TerminalCore.snapshot() 通过 setData 驱动 rich-text 渲染。
|
|
-->
|
|
<view class="tc-root" id="tc-root">
|
|
<!-- 终端输出区 -->
|
|
<scroll-view
|
|
class="tc-viewport"
|
|
id="tc-viewport"
|
|
scroll-y
|
|
scroll-top="{{scrollTop}}"
|
|
bindscrolltoupper="onScrollToUpper"
|
|
bindscrolltolower="onScrollToLower"
|
|
bindscroll="onScroll"
|
|
>
|
|
<view class="tc-lines">
|
|
<block wx:for="{{rows}}" wx:key="index">
|
|
<view class="tc-row" style="position: relative;">
|
|
<!-- 光标行叠加 -->
|
|
<view
|
|
wx:if="{{cursor.visible && cursor.row === index}}"
|
|
class="tc-cursor"
|
|
style="left: {{cursor.left}}px;"
|
|
></view>
|
|
<rich-text class="tc-rich-row" nodes="{{item.html}}"></rich-text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 触控辅助工具栏 -->
|
|
<view class="tc-touch-bar">
|
|
<button class="tc-key" bindtap="onTapUp" size="mini">▲</button>
|
|
<button class="tc-key" bindtap="onTapDown" size="mini">▼</button>
|
|
<button class="tc-key" bindtap="onTapLeft" size="mini">◀</button>
|
|
<button class="tc-key" bindtap="onTapRight" size="mini">▶</button>
|
|
<button class="tc-key" bindtap="onTapTab" size="mini">Tab</button>
|
|
<button class="tc-key tc-key-enter" bindtap="onTapEnter" size="mini">↵</button>
|
|
<button class="tc-key" bindtap="onTapCtrlC" size="mini">^C</button>
|
|
<button class="tc-key" bindtap="onTapCtrlD" size="mini">^D</button>
|
|
<button class="tc-key" bindtap="onTapEsc" size="mini">Esc</button>
|
|
<button class="tc-key" bindtap="onTapPaste" size="mini">粘贴</button>
|
|
</view>
|
|
|
|
<!-- 输入栏 -->
|
|
<view class="tc-input-bar">
|
|
<input
|
|
class="tc-input"
|
|
type="text"
|
|
confirm-type="send"
|
|
placeholder="输入命令…"
|
|
value="{{inputValue}}"
|
|
bindinput="onInput"
|
|
bindconfirm="onConfirm"
|
|
bindblur="onInputBlur"
|
|
bindkeyboardheightchange="onKeyboardChange"
|
|
cursor-spacing="20"
|
|
adjust-position
|
|
/>
|
|
<button class="tc-send-btn" size="mini" bindtap="onSend">发</button>
|
|
</view>
|
|
|
|
<!-- 状态栏 -->
|
|
<view class="tc-status-bar">
|
|
<text class="tc-state-chip tc-state-{{state}}">{{state}}</text>
|
|
<text wx:if="{{latencyMs > 0}}" class="tc-state-chip">{{latencyMs}}ms</text>
|
|
<text wx:if="{{title}}" class="tc-title">{{title}}</text>
|
|
</view>
|
|
</view>
|