[Question] 想在一个新增的面板里渲染一个终端，没有交互，只需接收并打印子进程的标准输出，可以复用 @opensumi/ide-terminal-next 这个包吗？应该如何复用呢？有相关示例吗？

[fanweiren1217]

描述你的问题（Describe you question here）
背景：在 IDE 中会在子进程中调用某 CLI，现期望增加一个终端面板，来接收执行 CLI 命令时产生的标准输出流，同时 IDE 也可往终端面板中打印一些日志

问：为何想用终端面板渲染输出流？
答：想保留类似 vscode 终端中的渲染效果

[erha19]

@fanweiren1217 不建议，终端模块实现相对复杂，目前没有相关实例，只有一个修改终端环境变量的示例 https://github.com/opensumi/opensumi-module-samples/tree/main/modules/terminal-env

另外，如果只是输出内容，也可以考虑用 Output 面板，集成特定的 Log 语法插件来实现一些语法的高亮效果（Output 输出是复用了编辑器组件，可实现语法高亮），使用示例见：

https://github.com/opensumi/opensumi-module-samples/tree/main/modules/editor-title

如果这些都不满足，你也可以自行修改，可以 fork 这个包的实现，组织结构可以参考 https://github.com/opensumi/opensumi-module-samples

[fanweiren1217]

@erha19 Output 面板无法实现真实终端下的动态效果比如进度更新，我看@opensumi/ide-terminal-next 这个包是基于 xterm 实现的，直接接入 xterm 是不是简单些

[erha19]

@fanweiren1217 可以直接接入 xterm 去搞，会比修改 @opensumi/ide-terminal-next 简单点，这里面还有大量插件适配逻辑，较为复杂。

[MMhunter]

我们的实践是使用 xterm 来写自己的 terminal 实例，但是可以通过注入 @opensumi/ide-terminal-next 内的 TerminalTheme 来让这个 terminal 的样式和内嵌终端一致（理论上应该还可以共用更多 options 和 addon）

import { TerminalTheme } from '@opensumi/ide-terminal-next/lib/browser/terminal.theme';
import { Injectable, Autowired, INJECTOR_TOKEN } from '@opensumi/di';
import { Terminal, ITerminalOptions } from 'xterm';

@Injectable({multiple: true})
export class CustomTerminalWrapper {
   
      @Autowired(TerminalTheme)
      private termTheme: TerminalTheme;

      _term: Terminal;

      constructor(private dom: HTMLElement) {
            this._term = new Terminal({
              theme: this.termTheme.terminalTheme,
              rightClickSelectsWord: false,
            });
            this._term.open(this.dom);
        }

}

[fanweiren1217]

我们的实践是使用 xterm 来写自己的 terminal 实例，但是可以通过注入 @opensumi/ide-terminal-next 内的 TerminalTheme 来让这个 terminal 的样式和内嵌终端一致（理论上应该还可以共用更多 options 和 addon）

import { TerminalTheme } from '@opensumi/ide-terminal-next/lib/browser/terminal.theme';
import { Injectable, Autowired, INJECTOR_TOKEN } from '@opensumi/di';
import { Terminal, ITerminalOptions } from 'xterm';

@Injectable({multiple: true})
export class CustomTerminalWrapper {
   
      @Autowired(TerminalTheme)
      private termTheme: TerminalTheme;

      _term: Terminal;

      constructor(private dom: HTMLElement) {
            this._term = new Terminal({
              theme: this.termTheme.terminalTheme,
              rightClickSelectsWord: false,
            });
            this._term.open(this.dom);
        }

}

感谢

[Augustjoe]

@fanweiren1217 请问您实现您想要的效果了吗？ 如果实现了，可不可以介绍下您实现的方式？我们也有类似的需求。谢谢。