feat(UniverIcon): add UniverIcon component (#5557)

* doc: 增加 UniverIcon 组件 * doc: 更新本地化资源文件 * chore: 增加 UniverIcon 依赖包 * doc: 增加 UniverIcon 菜单 * doc: 增加菜单多语言支持 * chore: 更新包 * refactor: 微调样式 * refactor: 增加 IconLayout 母版页 * doc: 更新样式表路径 * test: 更新单元测试
dotnetcore · Mar 7, 2025 · 6d8ca20 · 6d8ca20
1 parent dbe0b7e
commit 6d8ca20
Show file tree

Hide file tree

Showing 12 changed files with 543 additions and 0 deletions.
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -64,6 +64,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
+    <PackageReference Include="BootstrapBlazor.UniverIcon" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta05" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.WinBox" Version="9.0.7" />

diff --git a/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor
@@ -0,0 +1,4 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+
+@Body
diff --git a/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor.cs
@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Layout;
+
+/// <summary>
+/// Icon Layout Component
+/// </summary>
+public partial class IconLayout
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIconList.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIconList.razor
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor
@@ -0,0 +1,27 @@
+@page "/univer-icon"
+@layout MainLayout
+@inject IStringLocalizer<UniverIcons> Localizer
+
+<h3>@Localizer["UniverIconTitle"]</h3>
+
+<h4>@Localizer["UniverIconDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.UniverIcon" />
+
+<Tips class="mt-3">
+    <ul class="ul-demo">
+        <li>@Localizer["P1"]</li>
+        <li>@Localizer["P2"]</li>
+    </ul>
+    <div>@Localizer["P3"]</div>
+</Tips>
+
+<Pre>&lt;link href="_content/BootstrapBlazor.UniverIcon/BootstrapBlazor.UniverIcon.bundle.scp.css" rel="stylesheet"&gt;</Pre>
+
+<Pre>&lt;UniverIcon Name="create-copy-single"&gt;&lt;/UniverIcon&gt;</Pre>
+
+<div>@((MarkupString)Localizer["Icons"].Value)</div>
+
+<div class="icon-list">
+    <UniverIconList></UniverIconList>
+</div>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor.cs
@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples.Icons;
+
+/// <summary>
+/// OctIcons 图标示例
+/// </summary>
+public partial class UniverIcons
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/_Imports.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/_Imports.razor
@@ -0,0 +1 @@
+@layout IconLayout
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -1583,6 +1583,12 @@ void AddIcons(DemoMenuItem item)
                 {
                     Text = Localizer["OctIcon"],
                     Url = "oct-icon"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["UniverIcon"],
+                    Url = "univer-icon"
                 }
             };
             AddBadge(item);

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4856,6 +4856,7 @@
     "Affix": "Affix",
     "Watermark": "Watermark",
     "OctIcon": "Oct Icons",
+    "UniverIcons": "Univer Icons",
     "Typed": "Typed",
     "UniverSheet": "UniverSheet"
   },
@@ -6781,6 +6782,15 @@
     "P3": "Please copy the following code segement",
     "Icons": "For icon list, please visit <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[portal]</a>"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcons": {
+    "UniverIconTitle": "Univer Svg Icon Lib",
+    "UniverIconDescription": "Icons used by Univer",
+    "CopiedTooltipText": "Copied",
+    "P1": "1. After referencing the extension package, add the package built-in style file to open the icon",
+    "P2": "2. Enable css isolation and automatically reference component styles after compilation",
+    "P3": "Please copy the following code segement",
+    "Icons": "For icon list, please visit <a href=\"https://univer.ai/en-US/icons\" target=\"_blank\">[portal]</a>"
+  },
   "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": {
     "IconsTitle": "Icon",
     "IconsDescription": "Supports font icons, vector SVG icons, and Image pictures",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4856,6 +4856,7 @@
     "Affix": "固钉组件 Affix",
     "Watermark": "水印组件 Watermark",
     "OctIcon": "Oct Icons",
+    "UniverIcon": "Univer Icons",
     "Typed": "打字机效果 Typed",
     "UniverSheet": "表格组件 UniverSheet"
   },
@@ -6781,6 +6782,15 @@
     "P3": "请拷贝下方样式即可",
     "Icons": "图标列表请通过 <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[传送门]</a> 查看"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcons": {
+    "UniverIconTitle": "Univer Icon 图标库",
+    "UniverIconDescription": "Icons used by Univer",
+    "CopiedTooltipText": "拷贝成功",
+    "P1": "1. 引用扩展组件包后添加包内置样式文件开启图标",
+    "P2": "2. 开启样式隔离，编译后自动引用组件样式",
+    "P3": "请拷贝下方样式即可",
+    "Icons": "图标列表请通过 <a href=\"https://univer.ai/en-US/icons\" target=\"_blank\">[传送门]</a> 查看"
+  },
   "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": {
     "IconsTitle": "Icon 图标",
     "IconsDescription": "同时支持字体图标、矢量 Svg 图标、以及 Image 图片",

diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -369,3 +369,24 @@ code {
     --bd-callout-code-color: #e685b5;
     --bd-pre-bg: #1b1f22;
 }
+
+.icon-list {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+    .icon-list > div {
+        padding: 1rem 30px;
+        border: 1px solid var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        margin: 0.25rem;
+        cursor: pointer;
+        transition: background-color .3s linear;
+    }
+
+        .icon-list > div:hover {
+            background-color: var(--bb-primary-color);
+            color: #fff;
+        }
diff --git a/test/UnitTest/Services/BootstrapBlazorRootRegisterServiceTest.cs b/test/UnitTest/Services/BootstrapBlazorRootRegisterServiceTest.cs
@@ -28,6 +28,7 @@ public void Subscribe_Ok()
         var service = new BootstrapBlazorRootRegisterService();
         var identifier = new object();
         service.Subscribe(identifier, new BootstrapBlazorRootOutlet());
+        service.Subscribe(identifier, new BootstrapBlazorRootOutlet());
         service.Unsubscribe(new object());
     }