feat(Term): add Term component

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -77,6 +77,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="10.0.2" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="10.0.1" />
     <PackageReference Include="BootstrapBlazor.Tasks.Dashboard" Version="10.0.0" />
+    <PackageReference Include="BootstrapBlazor.Term" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.UniverIcon" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.UniverSheet" Version="10.0.8" />

src/BootstrapBlazor.Server/Components/Samples/Terms.razor

@@ -0,0 +1,32 @@
+@page "/term"
+@using Microsoft.AspNetCore.Components.Sections
+@inject IStringLocalizer<Terms> Localizer
+
+<h3>@Localizer["Title"]</h3>
+<h4>@Localizer["SubTitle"]</h4>
+
+<Tips>
+    <p>@((MarkupString)Localizer["Tips"].Value)</p>
+</Tips>
+
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
+    <section ignore>
+        <div>@((MarkupString)Localizer["TermDesc"].Value)</div>
+    </section>
+    <Term @ref="_term" OnReceivedAsync="OnReceivedAsync" />
+    <section ignore>
+        <div class="col-12">
+            <Button OnClickWithoutRender="OnCheck">@Localizer["CheckText"]</Button>
+            <Button OnClickWithoutRender="OnTest">@Localizer["TestText"]</Button>
+            <Button OnClickWithoutRender="OnClean">@Localizer["CleanText"]</Button>
+        </div>
+    </section>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["StreamUsageTitle"]" Introduction="@Localizer["StreamUsageIntro"]" Name="Stream">
+    <Term @ref="_termStream" />
+</DemoBlock>
+
+<AttributeTable Type="typeof(Term)"></AttributeTable>
+
+<AttributeTable Type="typeof(TermOptions)"></AttributeTable>

src/BootstrapBlazor.Server/Components/Samples/Terms.razor.cs

@@ -0,0 +1,89 @@
+using System.Text;
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Term 示例
+/// </summary>
+public partial class Terms : IDisposable
+{
+    private Term _term = default!;
+    private Term _termStream = default!;
+    private MemoryStream _ms = new MemoryStream();
+    private CancellationTokenSource? _cancellationTokenSource;
+
+    private async Task OnReceivedAsync(byte[] data)
+    {
+        var str = System.Text.Encoding.UTF8.GetString(data);
+        await _term.Write(str.Replace("\r", "\r\n"));
+    }
+
+    private async Task OnCheck()
+    {
+        await _term.WriteLine($"Check\r\n{DateTime.Now}");
+    }
+
+    private async Task OnTest()
+    {
+        await _term.WriteLine($"Test\r\n{DateTime.Now}");
+    }
+
+    private async Task OnClean()
+    {
+        await _term.Clear();
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await _termStream.Open(_ms);
+
+            _ = Task.Run(async () =>
+            {
+                _cancellationTokenSource ??= new();
+                while (_cancellationTokenSource is { IsCancellationRequested: false })
+                {
+                    try
+                    {
+                        // 模拟流内数据变化
+                        _ms.SetLength(0);
+                        await _ms.WriteAsync(Encoding.UTF8.GetBytes($"{DateTime.Now}\r\n"), _cancellationTokenSource.Token);
+                        _ms.Seek(0, SeekOrigin.Begin);
+                        await Task.Delay(2000);
+                    }
+                    catch { }
+                }
+            });
+        }
+    }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            if (_cancellationTokenSource is { IsCancellationRequested: false })
+            {
+                _cancellationTokenSource.Cancel();
+                _cancellationTokenSource.Dispose();
+                _cancellationTokenSource = null;
+            }
+
+            _ms.Close();
+            _ms.Dispose();
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
+    }
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1406,6 +1406,11 @@ void AddNotice(DemoMenuItem item)
                     Url = "sweet-alert"
                 },
                 new()
+                {
+                    Text = Localizer["Terms"],
+                    Url = "term"
+                },
+                new()
                 {
                     Text = Localizer["Timer"],
                     Url = "timer"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -428,6 +428,7 @@
     "Tag": "Tag",
     "TaskDashBoard": "TaskDashBoard",
     "TcpSocketFactory": "ITcpSocketFactory",
+    "Terms": "Terminal",
     "Textarea": "Textarea",
     "Theme": "Theme",
     "ThemeProvider": "IThemeProvider",
@@ -5306,6 +5307,19 @@
     "TaskBoardNormalTitle": "Basic usage",
     "TaskBoardTitle": "Task DashBoard"
   },
+  "BootstrapBlazor.Server.Components.Samples.Terms": {
+    "BasicUsageIntro": "Output text by calling the <code>Write</code> method",
+    "BasicUsageTitle": "Basic Usage",
+    "CheckText": "Check",
+    "CleanText": "Clean",
+    "StreamUsageIntro": "Connect various streams by calling the <code>Open</code> method, this example simulates <b>Shell</b> and verifies input characters",
+    "StreamUsageTitle": "Stream Usage",
+    "SubTitle": "Terminal Component",
+    "TermDesc": "The <code>Term</code> component is a terminal component that establishes a connection with the stream via <code>C#</code> code. The <code>Term</code> component is then responsible for displaying interactive content. In this example, after establishing a connection with a simulated <code>Stream</code> instance in the backend, data is automatically displayed within the component when it is written. When the user enters a command within the component and presses Enter, the backend processes it and displays the result in the component.",
+    "TestText": "Test",
+    "Tips": "This component depends on the <code>BootstrapBlazor.Term</code> extension package. You need to reference it as follows",
+    "Title": "Terminal"
+  },
   "BootstrapBlazor.Server.Components.Samples.TextAreas": {
     "TextAreaAutoScroll": "Automatic scrolling",
     "TextAreaBindWayBindValue": "The binding value",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -428,6 +428,7 @@
     "Tag": "标签 Tag",
     "TaskDashBoard": "任务管理器 TaskDashBoard",
     "TcpSocketFactory": "套接字服务 ITcpSocketFactory",
+    "Terms": "终端 Terminal",
     "Textarea": "多行文本框 Textarea",
     "Theme": "组件主题",
     "ThemeProvider": "主题服务 IThemeProvider",
@@ -5306,6 +5307,19 @@
     "TaskBoardNormalTitle": "基本用法",
     "TaskBoardTitle": "Task DashBoard 任务管理器"
   },
+  "BootstrapBlazor.Server.Components.Samples.Terms": {
+    "BasicUsageIntro": "通过调用 <code>Write</code> 方法输出文本",
+    "BasicUsageTitle": "基础用法",
+    "CheckText": "查询命令（Check）",
+    "CleanText": "清空",
+    "StreamUsageIntro": "通过调用 <code>Open</code> 方法连接各种流，本例模拟 <b>Shell</b> 并回显输入字符",
+    "StreamUsageTitle": "流式处理",
+    "SubTitle": "命令行终端显示组件",
+    "TermDesc": "<code>Term</code> 组件是一个终端组件，通过 <code>C#</code> 代码与流建立联系，然后组件 <code>Term</code> 负责显示交互内容；本例中，与后台一个模拟 <code>Stream</code> 实例建立联系后，当有数据写入时自动显示在组件内，用户在组件内录入命令回车后，由后端处理回显在组件中",
+    "TestText": "测试命令 (Test)",
+    "Tips": "本组件依赖 <code>BootstrapBlazor.Term</code> 扩展包，需要依照下面步骤进行引用",
+    "Title": "Term 命令行"
+  },
   "BootstrapBlazor.Server.Components.Samples.TextAreas": {
     "TextAreaAutoScroll": "自动滚屏",
     "TextAreaBindWayBindValue": "绑定值",

src/BootstrapBlazor.Server/docs.json

@@ -260,7 +260,8 @@
     "select-city": "SelectCities",
     "select-province": "SelectProvinces",
     "hik-vision": "HikVisions",
-    "embed-pdf": "EmbedPDFs"
+    "embed-pdf": "EmbedPDFs",
+    "term": "Terms"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",