add: Monaco编辑器

Frontend/Frontend.csproj

@@ -8,6 +8,7 @@
 
     <ItemGroup>
       <PackageReference Include="AntDesign" Version="0.15.5" />
+      <PackageReference Include="BlazorMonaco" Version="3.1.0" />
     </ItemGroup>
 
     <ItemGroup>

Frontend/Pages/Editor.razor

@@ -0,0 +1,19 @@
+@page "/editor"
+
+<Layout>
+    <Content>
+        <div class="editor-zone">
+            <StandaloneCodeEditor ConstructionOptions="GetEditorConstructionOptions" Id="my-editor-instance"/>
+        </div>
+    </Content>
+</Layout>
+
+@code {
+    private StandaloneEditorConstructionOptions GetEditorConstructionOptions(StandaloneCodeEditor editor)
+    {
+        return new StandaloneEditorConstructionOptions
+        {
+            Language = "yaml"
+        };
+    }
+}

Frontend/Pages/Editor.razor.css

@@ -0,0 +1,3 @@
+.editor-zone {
+    min-height: calc(100vh - 64px);
+}

Frontend/Pages/_Host.cshtml

@@ -27,7 +27,10 @@
     <a class="dismiss">🗙</a>
 </div>
 
-<script src="_framework/blazor.server.js"></script>
 <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
+<script src="_content/BlazorMonaco/jsInterop.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
+<script src="_framework/blazor.server.js"></script>
 </body>
 </html>

Frontend/_Imports.razor

@@ -2,5 +2,8 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
 @using AntDesign
+@using BlazorMonaco
+@using BlazorMonaco.Editor
+@using BlazorMonaco.Languages
 @using Frontend
 @using Frontend.Shared

Frontend/wwwroot/css/site.css

@@ -30,3 +30,7 @@
 body {
     overflow: hidden;
 }
+
+.monaco-editor-container {
+    min-height: 100%;
+}