使用Ant Design Blazor

src/JTTools/App.razor

@@ -9,3 +9,5 @@
         </LayoutView>
     </NotFound>
 </Router>
+
+<AntContainer />

src/JTTools/JTTools.csproj

@@ -7,14 +7,14 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="BlazorStrap" Version="1.3.2" />
+    <PackageReference Include="AntDesign" Version="0.3.0" />
     <PackageReference Include="JT1078" Version="1.0.3" />
     <PackageReference Include="JT808" Version="2.2.12" />
-    <PackageReference Include="JT808.Protocol.Extensions.JT1078" Version="2.2.9.1" />
+    <PackageReference Include="JT808.Protocol.Extensions.JT1078" Version="2.2.12" />
     <PackageReference Include="JT808.Protocol.Extensions.JTActiveSafety" Version="1.0.4" />
     <PackageReference Include="JT809" Version="2.1.4-preview5" />
     <PackageReference Include="JT809.Protocol.Extensions.JT1078" Version="2.1.4-preview4" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.7" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.8" />
     <PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
     <PackageReference Include="NLog.Extensions.Logging" Version="1.6.5" />
   </ItemGroup>

src/JTTools/Pages/Index.razor

@@ -1,7 +1,8 @@
 @page "/"
 
-
-<div class="jumbotron">
-    <h1 class="display-5">JTTools(alpha)</h1>
-    <p class="lead">JT808、JT809、JT1078、JT19056、JTNE（新能源）、主动安全（苏标）解析工具</p>
-</div>
+<Title Level="1">JTTools</Title>
+<Paragraph>
+    <Text>
+        JT808、JT809、JT1078、JT19056、JTNE（新能源）、主动安全（苏标）解析工具
+    </Text>
+</Paragraph>

src/JTTools/Pages/JT1078Pack.razor

@@ -0,0 +1,20 @@
+@page "/jt1078pack"
+
+<h3>JT1078扩展808、809组包</h3>
+
+<select class="form-control" Id="exampleFormControlSelect1" @onchange="@OnSelectMsgType">
+    <option value="0x9101">808_打开看视频</option>
+    <option value="0x9102">808_关闭看视频</option>
+</select>
+
+@MsgType
+
+@code {
+
+    string MsgType = "0x9101";
+
+    private void OnSelectMsgType(ChangeEventArgs e)
+    {
+        MsgType = e.Value.ToString();
+    }
+}

src/JTTools/Pages/JT1078Parse.razor

@@ -5,9 +5,9 @@
 @using JTTools.Configs;
 
 <button class="btn btn-primary" @onclick="Query">解析</button>
-<BSAlert Color="Color.Danger" IsOpen="@isOpen" IsDismissible="true" OnDismiss="@OnDismiss">
+<Alert Type="@AlertType.Error" Closable>
     @ErrerMessage
-</BSAlert>
+</Alert>
 <div class="right">
     <textarea class="form-control" @bind="HexData" rows="10"></textarea>
     <pre>

src/JTTools/Pages/JT19056Analyze.razor

@@ -10,9 +10,10 @@
     <option value="down">下行</option>
 </select>
 <button class="btn btn-primary" @onclick="Query">分析</button>
-<BSAlert Color="Color.Danger" IsOpen="@isOpen" IsDismissible="true" OnDismiss="@OnDismiss">
+
+<Alert Type="@AlertType.Error" Closable>
     @ErrerMessage
-</BSAlert>
+</Alert>
 <div class="right">
     <textarea class="form-control" @bind="HexData" rows="10"></textarea>
     <pre>

src/JTTools/Pages/JT808Analyze.razor

@@ -10,25 +10,24 @@
 @inject IJT808Config  config
 @inject JT808_JT1078_Config  jT808_JT1078_Config
 @inject JT808_JTActiveSafety_Config  jT808_JTActiveSafety_Config
+@using OneOf;
 
-<BSBasicForm IsInline="true">
-    <BSFormGroup Class="mb-5 mr-sm-5 mb-sm-0">
-        <select class="form-control" Id="exampleFormControlSelect1" @onchange="@OnSelectProtocolType">
-            <option value="JT808">国标</option>
-            <option value="JT808_JT1078">国标扩展JT1078</option>
-            <option value="JT808_JTAS">国标扩展主动安全(苏标)</option>
-        </select>
-    </BSFormGroup>
-    <BSFormGroup Class="mb-5 mr-sm-5 mb-sm-0">
-        <BSButton Class="btn btn-primary" ButtonType="ButtonType.Button" @onclick="Query">分析</BSButton>
-    </BSFormGroup>
-</BSBasicForm>
-<BSFormGroup>
-    <BSBasicInput InputType="InputType.TextArea" Name="text" Id="exampleText" Rows="10" @bind-Value="HexData" />
-</BSFormGroup>
-<BSAlert Color="Color.Danger" IsOpen="@isOpen" IsDismissible="true" OnDismiss="@OnDismiss">
-    @ErrerMessage
-</BSAlert>
+<Select DefaultValue=@("JT808") Style="width:200px" OnChange="OnSelectProtocolType">
+    <SelectOption Value="JT808">国标</SelectOption>
+    <SelectOption Value="JT808_JT1078">国标扩展JT1078</SelectOption>
+    <SelectOption Value="JT808_JTAS">国标扩展主动安全(苏标)</SelectOption>
+</Select>
+
+<Button Type="primary" @onclick="Query">分析</Button>
+
+<TextArea AllowClear="true" AutoSize="true" MinRows="10" MaxRows="30" @bind-Value="@HexData" />
+
+@if (isOpen)
+{
+    <Alert Type="@AlertType.Error" Closable AfterClose="OnDismiss">
+        @ErrerMessage
+    </Alert>
+}
 
 <div class="right">
     <pre>
@@ -57,12 +56,12 @@
     void OnDismiss()
     {
         isOpen = !isOpen;
-        StateHasChanged();
     }
 
-    private void OnSelectProtocolType(ChangeEventArgs e)
+    private void OnSelectProtocolType(OneOf<string, IEnumerable<string>, LabeledValue, IEnumerable<LabeledValue>> value, 
+        OneOf<SelectOption, IEnumerable<SelectOption>> option)
     {
-        protocolType = e.Value.ToString();
+        protocolType = value.Value.ToString();
     }
 
     protected override void OnInitialized()

src/JTTools/Pages/JT809Parse.razor → src/JTTools/Pages/JT809Analyze.razor

@@ -8,32 +8,39 @@
 @using JT809.Protocol.Exceptions;
 @using JTTools.Configs;
 @using JT809.Protocol.Enums;
+@using OneOf;
 @inject JT809_2011_Config  Config2011
 @inject JT809_2019_Config  Config2019
 
-<select class="form-control" @onchange="@OnSelectVersion">
-    <option value="v2011">2011版本</option>
-    <option value="v2019">2019版本</option>
-</select>
-<select class="form-control" @onchange="@OnSelectEncryptType">
-    <option value="none">未加密</option>
-    <option value="encrypt">加密</option>
-</select>
+<Select DefaultValue=@("v2011") Style="width:200px" OnSelect="OnSelectVersion">
+    <SelectOption Value="v2011">2011版本</SelectOption>
+    <SelectOption Value="v2019">2019版本</SelectOption>
+</Select>
+
+<Select DefaultValue=@("none") Style="width:200px" OnChange="@OnSelectEncryptType">
+    <SelectOption Value="none">未加密</SelectOption>
+    <SelectOption Value="encrypt">加密</SelectOption>
+</Select>
 
 @if (encryptType == "encrypt")
 {
-    <div class="form-group">
-        <input type="text" class="form-control" placeholder="M1" @bind="EncryptOptions.M1">
-        <input type="text" class="form-control" placeholder="IA1" @bind="EncryptOptions.IA1">
-        <input type="text" class="form-control" placeholder="IC1" @bind="EncryptOptions.IC1">
-    </div>
+    @*<Input Placeholder="M1" @bind-Value="@M1" />
+        <Input Placeholder="IA1" @bind-Value="@IA1" />
+        <Input Placeholder="IC1" @bind-Value="@IC1" />*@
 }
-<button class="btn btn-primary" @onclick="Query">解析</button>
-<BSAlert Color="Color.Danger" IsOpen="@isOpen" IsDismissible="true" OnDismiss="@OnDismiss">
-    @ErrerMessage
-</BSAlert>
+<Button Type="primary" @onclick="Query">分析</Button>
+
+@if (isOpen)
+{
+    <Alert Type="@AlertType.Error" Closable AfterClose="OnDismiss">
+        @ErrerMessage
+    </Alert>
+}
+
+@HexData
+
 <div class="right">
-    <textarea class="form-control" @bind="HexData" rows="10"></textarea>
+    <TextArea AllowClear="true" AutoSize="true" MinRows="10" MaxRows="30" @bind-Value="@HexData" />
     <pre>
          @Json
     </pre>
@@ -47,7 +54,7 @@
 
     private string HexData2019 = "5B 00 00 00 C9 00 00 06 82 17 00 01 34 15 F4 01 00 00 00 00 00 27 0F 00 00 00 00 5E 02 A5 07 B8 D4 C1 41 31 32 33 34 35 00 00 00 00 00 00 00 00 00 00 00 00 00 02 17 01 00 00 00 8B 01 02 03 04 05 06 07 08 09 10 11 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 E7 D3 5D";
 
-    private string HexData = "";
+    private string HexData  = "";
 
     private string Json;
 
@@ -61,29 +68,35 @@
 
     private bool isOpen = false;
 
+    private uint? M1;
+    private uint? IA1;
+    private uint? IC1;
+
     void OnDismiss()
     {
         isOpen = !isOpen;
         StateHasChanged();
     }
 
-    private void OnSelectVersion(ChangeEventArgs e)
+    public void OnSelectVersion(OneOf<string, LabeledValue> value, SelectOption option)
     {
-        version = e.Value.ToString();
-        switch (version)
-        {
-            case "v2011":
-                HexData = HexData2011;
-                break;
-            case "v2019":
-                HexData = HexData2019;
-                break;
-        }
+        HexData = new Random().Next(1, 100).ToString();
+        //this.version = value.Value.ToString();
+        //switch (version)
+        //{
+        //    case "v2011":
+        //        this.HexData = HexData2011;
+        //        break;
+        //    case "v2019":
+        //        this.HexData = HexData2019;
+        //        break;
+        //}
     }
 
-    private void OnSelectEncryptType(ChangeEventArgs e)
+    private void OnSelectEncryptType(OneOf<string, IEnumerable<string>, LabeledValue, IEnumerable<LabeledValue>> value,
+        OneOf<SelectOption, IEnumerable<SelectOption>> option)
     {
-        encryptType = e.Value.ToString();
+        encryptType = value.Value.ToString();
     }
 
     protected override void OnInitialized()

src/JTTools/Pages/_Host.cshtml

@@ -10,18 +10,17 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="keywords" content="JT808|gb808|JT809|gb809|JT1078|JTT1078|JT19056|gb19056|在线解析工具"/>
-    <meta name="description" content="道路运输车辆卫星定位协议在线解析工具"/>
+    <meta name="keywords" content="JT808|gb808|JT809|gb809|JT1078|JTT1078|JT19056|gb19056|在线解析工具" />
+    <meta name="description" content="道路运输车辆卫星定位协议在线解析工具" />
     <title>JTTools解析工具</title>
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-    <link href="css/site.css" rel="stylesheet" />
+    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
 </head>
 <body>
     <app>
         <component type="typeof(App)" render-mode="ServerPrerendered" />
     </app>
-
+    <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
     <div id="blazor-error-ui">
         <environment include="Staging,Production">
             An error has occurred. This application may no longer respond until reloaded.
@@ -33,5 +32,6 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.server.js"></script>
+
 </body>
 </html>

src/JTTools/Program.cs

@@ -11,7 +11,6 @@ using Microsoft.AspNetCore.Builder;
 using Microsoft.Extensions.DependencyInjection;
 using Newtonsoft.Json.Serialization;
 using JTTools.Configs;
-using BlazorStrap;
 using Newtonsoft.Json;
 
 namespace JTTools
@@ -39,28 +38,7 @@ namespace JTTools
                     {
                         services.AddRazorPages();
                         services.AddServerSideBlazor();
-                        services.AddControllers()
-                                //Microsoft.AspNetCore.Mvc.NewtonsoftJson
-                                .AddNewtonsoftJson(jsonOptions =>
-                                {
-                                    jsonOptions.SerializerSettings.Converters.Add(new ByteArrayHexConverter());
-                                    jsonOptions.SerializerSettings.ContractResolver = new DefaultContractResolver();
-                                    //jsonOptions.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
-                                })
-                                //.AddJsonOptions(jsonOptions =>
-                                //{
-                                //    jsonOptions.JsonSerializerOptions.MaxDepth = 64;
-
-                                //    jsonOptions.JsonSerializerOptions.Converters.Add(new ByteArrayHexTextJsonConverter());
-                                //})
-                                ;
-                        services.AddCors(options =>
-                                     options.AddPolicy("Domain", builder =>
-                                     builder.WithOrigins(hostingContext.Configuration.GetSection("AllowedOrigins").Value.Split(","))
-                                     .AllowAnyMethod()
-                                     .AllowAnyHeader()
-                                     .AllowAnyOrigin()));
-                        services.AddBootstrapCss();
+                        services.AddAntDesign();
                     })
                     .ConfigureKestrel(ksOptions =>
                     {
@@ -85,11 +63,9 @@ namespace JTTools
                     })
                     .Configure(app => {
                         app.UseRouting();
-                        app.UseCors("Domain");
                         app.UseStaticFiles();
                         app.UseEndpoints(endpoints =>
                         {
-                            endpoints.MapControllers();
                             endpoints.MapBlazorHub();
                             endpoints.MapFallbackToPage("/_Host");
                         });

src/JTTools/Shared/MainLayout.razor

@@ -1,19 +1,43 @@
 @inherits LayoutComponentBase
 
-<div class="sidebar">
-    <NavMenu />
-</div>
+<Layout>
 
-<div class="main">
-    <div class="top-row px-4">
-        <iframe id="github-star" style="border:none;vertical-align: middle;" width="105" height="20" src="https://ghbtns.com/github-btn.html?user=SmallChi&amp;repo=JTTools&amp;type=watch&amp;count=true"></iframe>
-    </div>
+    <Sider Breakpoint="@BreakpointType.Lg"
+           CollapsedWidth="0"
+           OnBreakpoint="broken => {
+            Console.WriteLine(broken);
+        }"
+           OnCollapse="collapsed => {
+            Console.WriteLine(collapsed);
+        }">
+        <div class="logo" />
+        <NavMenu />
+    </Sider>
+    <Layout>
+        <Header Class="site-layout-sub-header-background" Style="padding: 0;">
+            <iframe id="github-star" style="border:none;vertical-align: middle;" width="105" height="20" src="https://ghbtns.com/github-btn.html?user=SmallChi&amp;repo=JTTools&amp;type=watch&amp;count=true"></iframe>
+        </Header>
+        <Content Style=" margin: 24px 16px 0;">
+            <div class="site-layout-background" style="padding: 24px; min-height: 360px">
+                @Body
+            </div>
+        </Content>
+        <Footer Style="text-align: center;"><a href="http://www.beian.miit.gov.cn" target="_blank">Copyright © 2015-2020 SmallChi. All Rights Reserved. 粤ICP备19128140号-1</a></Footer>
+    </Layout>
+</Layout>
 
-    <div class="content px-4">
-        @Body
-    </div>
+<style>
+    #components-layout-demo-responsive .logo {
+        height: 32px;
+        background: rgba(255, 255, 255, 0.2);
+        margin: 16px;
+    }
 
-    <div class="footer">
-        <a href="http://www.beian.miit.gov.cn" target="_blank">Copyright © 2015-2020 SmallChi. All Rights Reserved. 粤ICP备19128140号-1</a>
-    </div>
-</div>
+    .site-layout-sub-header-background {
+        background: #fff;
+    }
+
+    .site-layout-background {
+        background: #fff;
+    }
+</style>

src/JTTools/Shared/NavMenu.razor

@@ -1,47 +1,20 @@
-<div class="top-row pl-4 navbar navbar-dark">
-    <a class="navbar-brand" href="">JTTools</a>
-    <button class="navbar-toggler" @onclick="ToggleNavMenu">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-</div>
-
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
-    <ul class="nav flex-column">
-        <li class="nav-item px-3">
-            <BSNavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
-            </BSNavLink>
-        </li>
-        <li class="nav-item px-3">
-            <BSNavLink class="nav-link" href="jt808">
-                <span aria-hidden="true"></span>JT808分析工具
-            </BSNavLink>
-        </li>
-        <li class="nav-item px-3">
-            <BSNavLink class="nav-link" href="jt809">
-                <span aria-hidden="true"></span>JT809分析工具
-            </BSNavLink>
-        </li>
-        <li class="nav-item px-3">
-            <BSNavLink class="nav-link" href="jt1078">
-                <span aria-hidden="true"></span>JT1078分析工具
-            </BSNavLink>
-        </li>
-        <li class="nav-item px-3">
-            <BSNavLink class="nav-link" href="jt19056">
-                <span aria-hidden="true"></span>JT19056分析工具
-            </BSNavLink>
-        </li>
-    </ul>
-</div>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
-}
+<Menu Theme="MenuTheme.Dark" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[]{"home"})>
+    <MenuItem Key="home" RouterLink="" RouterMatch="NavLinkMatch.All">
+        <span class="nav-text">Home</span>
+    </MenuItem>
+    <MenuItem Key="jt808" RouterLink="jt808">
+        <span class="nav-text">JT808分析工具</span>
+    </MenuItem>
+    <MenuItem Key="jt809" RouterLink="jt809">
+        <span class="nav-text">JT809分析工具</span>
+    </MenuItem>
+    <MenuItem Key="jt1078" RouterLink="jt1078">
+        <span class="nav-text">JT1078分析工具</span>
+    </MenuItem>
+    <MenuItem Key="jt1078pack" RouterLink="jt1078pack">
+        <span class="nav-text">JT1078组包工具</span>
+    </MenuItem>
+    <MenuItem Key="jt19056" RouterLink="jt19056">
+        <span class="nav-text">JT19056分析工具</span>
+    </MenuItem>
+</Menu>

src/JTTools/Shared/SurveyPrompt.razor

@@ -1,16 +0,0 @@
-<div class="alert alert-secondary mt-4" role="alert">
-    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
-    <strong>@Title</strong>
-
-    <span class="text-nowrap">
-        Please take our
-        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2112271">brief survey</a>
-    </span>
-    and tell us what you think.
-</div>
-
-@code {
-    // Demonstrates how a parent component can supply parameters
-    [Parameter]
-    public string Title { get; set; }
-}

src/JTTools/_Imports.razor

@@ -7,4 +7,4 @@
 @using Microsoft.JSInterop
 @using JTTools
 @using JTTools.Shared
-@using BlazorStrap
+@using AntDesign