Skip to content

Commit 27f8299

Browse files
ArgoZhangArgoZhang
authored
doc(OnlineSheet): add OnlineSheet sample code (#5510)
* doc: 增加在线协作示例 * refactor: 增加协作者后台服务 * doc: 增加在线协作示例菜单 * chore: 更新依赖 * doc: 增加分隔栏
1 parent e7156e9 commit 27f8299

17 files changed

+269
-11
lines changed

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
6565
<PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
6666
<PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
67-
<PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta02" />
67+
<PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta04" />
6868
<PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.3" />
6969
<PackageReference Include="BootstrapBlazor.WinBox" Version="9.0.7" />
7070
</ItemGroup>

‎src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
</div>
1010
<TutorialsNavMenu></TutorialsNavMenu>
1111
<Wwads IsVertical="true"></Wwads>
12+
<LayoutSplitebar Min="220" Max="330" ContainerSelector=".section"></LayoutSplitebar>
1213
</aside>
1314

1415
<section class="main">

‎src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor.css

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
.section {
2-
--bb-sidebar-width: 0;
3-
}
4-
5-
.main {
1+
.main {
62
padding: 1rem;
73
}
84

@@ -24,7 +20,7 @@
2420

2521
@media (min-width: 768px) {
2622
.section {
27-
--bb-sidebar-width: 300px;
23+
--bb-layout-sidebar-width: 300px;
2824
display: flex;
2925
flex-direction: row;
3026
-webkit-font-smoothing: antialiased;
@@ -35,7 +31,7 @@
3531
}
3632

3733
.sidebar {
38-
width: var(--bb-sidebar-width);
34+
width: var(--bb-layout-sidebar-width);
3935
height: calc(100vh);
4036
position: sticky;
4137
top: 0;
@@ -44,7 +40,8 @@
4440
}
4541

4642
.main {
47-
flex: 1;
43+
flex: 1 1 0%;
44+
min-width: 0px;
4845
height: 100%;
4946
}
5047
}

‎src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs

+5
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,11 @@ protected override async Task OnInitializedAsync()
105105
{
106106
Text = Localizer["AdminSummary"],
107107
Url = "tutorials/admin",
108+
},
109+
new()
110+
{
111+
Text = Localizer["OnlineSheet"],
112+
Url = "tutorials/online-sheet",
108113
}
109114
]);
110115
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@page "/OnlineSheet"
2+
<h3>OnlineSheet</h3>
3+
4+
@code {
5+
6+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.cs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
using Microsoft.AspNetCore.Components;
2+
3+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
4+
5+
public partial class OnlineSheet : ComponentBase
6+
{
7+
}
8+

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+


‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@namespace BootstrapBlazor.Server.Components.Samples.Tutorials
2+
3+
<div class="bb-contributor">
4+
<img src="@Contributor.Avatar" />
5+
<div class="bb-contributor-main">
6+
<div class="bb-contributor-item">
7+
<label>姓名：</label>
8+
<span>@Contributor.Name</span>
9+
</div>
10+
<div class="bb-contributor-item">
11+
<label>姓名：</label>
12+
<span>@Contributor.Description</span>
13+
</div>
14+
</div>
15+
</div>
16+

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.cs

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
7+
8+
/// <summary>
9+
/// Online sheet sample code
10+
/// </summary>
11+
public partial class OnlineContributor
12+
{
13+
/// <summary>
14+
/// Gets or sets Contributor
15+
/// </summary>
16+
[Parameter]
17+
[NotNull]
18+
public Contributor? Contributor { get; set; }
19+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineContributor.razor.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.bb-contributor {
2+
display: flex;
3+
flex-direction: row;
4+
}
5+
6+
.bb-contributor img {
7+
border-radius: 50%;
8+
width: 56px;
9+
margin-right: .5rem;
10+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@namespace BootstrapBlazor.Server.Components.Samples.Tutorials
2+
@page "/tutorials/online-sheet"
3+
4+
<div class="bb-online-sheet-demo">
5+
<UniverSheet @ref="_sheetExcel" Data="@_data" OnReadyAsync="OnReadyAsync"></UniverSheet>
6+
</div>

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.cs

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
7+
8+
/// <summary>
9+
/// Online sheet sample code
10+
/// </summary>
11+
public partial class OnlineSheet : ComponentBase, IDisposable
12+
{
13+
[Inject, NotNull]
14+
private IWebHostEnvironment? WebHost { get; set; }
15+
16+
[Inject, NotNull]
17+
private ToastService? ToastService { get; set; }
18+
19+
[Inject, NotNull]
20+
private IStringLocalizer<OnlineSheet>? Localizer { get; set; }
21+
22+
[Inject]
23+
[NotNull]
24+
private IDispatchService<Contributor>? DispatchService { get; set; }
25+
26+
[NotNull]
27+
private UniverSheet? _sheetExcel = null;
28+
29+
private UniverSheetData? _data = null;
30+
31+
private bool _inited = false;
32+
33+
/// <summary>
34+
/// <inheritdoc/>
35+
/// </summary>
36+
protected override void OnInitialized()
37+
{
38+
base.OnInitialized();
39+
40+
var reportFile = Path.Combine(WebHost.WebRootPath, "univer-sheet", "report.json");
41+
if (File.Exists(reportFile))
42+
{
43+
var sheetData = File.ReadAllText(reportFile);
44+
45+
_data = new UniverSheetData()
46+
{
47+
Data = sheetData
48+
};
49+
}
50+
}
51+
52+
private async Task OnReadyAsync()
53+
{
54+
_inited = true;
55+
await ToastService.Information(Localizer["ToastOnReadyTitle"], Localizer["ToastOnReadyContent"]);
56+
DispatchService.Subscribe(Dispatch);
57+
}
58+
59+
private async Task Dispatch(DispatchEntry<Contributor> entry)
60+
{
61+
if (!_inited)
62+
{
63+
return;
64+
}
65+
66+
if (entry.Entry != null)
67+
{
68+
await ToastService.Show(new ToastOption()
69+
{
70+
Title = "Dispatch 服务测试",
71+
ChildContent = BootstrapDynamicComponent.CreateComponent<OnlineContributor>(new Dictionary<string, object?>()
72+
{
73+
{ "Contributor", entry.Entry }
74+
}).Render(),
75+
Category = ToastCategory.Information,
76+
Delay = 3000,
77+
ForceDelay = true
78+
});
79+
80+
DispatchService.UnSubscribe(Dispatch);
81+
82+
await _sheetExcel.PushDataAsync(entry.Entry.Data);
83+
}
84+
}
85+
86+
private void Dispose(bool disposing)
87+
{
88+
if (disposing)
89+
{
90+
DispatchService.UnSubscribe(Dispatch);
91+
}
92+
}
93+
94+
/// <summary>
95+
/// <inheritdoc/>
96+
/// </summary>
97+
public void Dispose()
98+
{
99+
Dispose(true);
100+
GC.SuppressFinalize(this);
101+
}
102+
}
103+

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet/OnlineSheet.razor.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.bb-online-sheet-demo {
2+
margin: -1rem;
3+
height: calc(100vh - var(--bs-header-height));
4+
}

‎src/BootstrapBlazor.Server/Extensions/ServiceCollectionExtensions.cs

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ void Invoke(BootstrapBlazorOptions option)
4444
// 增加后台任务服务
4545
services.AddTaskServices();
4646
services.AddHostedService<ClearTempFilesService>();
47+
services.AddHostedService<MockOnlineContributor>();
4748

4849
// 增加通用服务
4950
services.AddBootstrapBlazorServices();

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"WaterfallSummary": "Waterfall",
2222
"TranslateSummary": "Translate",
2323
"DrawingSummary": "Drawing",
24-
"AdminSummary": "Admin"
24+
"AdminSummary": "Admin",
25+
"OnlineSheet": "UniverSheet"
2526
},
2627
"BootstrapBlazor.Server.Components.Components.Pre": {
2728
"LoadingText": "Loading ...",
@@ -7017,5 +7018,9 @@
70177018
"ToastOnReadyContent": "The sheet is ready for push data.",
70187019
"PluginTitle": "Plugins",
70197020
"PluginIntro": "Set custom plugins by setting the <code>Plugins</code> parameter"
7021+
},
7022+
"BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet": {
7023+
"ToastOnReadyTitle": "Collaboration Notification",
7024+
"ToastOnReadyContent": "After 4 seconds the table is updated by other writers to change the content"
70207025
}
70217026
}

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"WaterfallSummary": "瀑布流图片 Waterfall",
2222
"TranslateSummary": "翻译工具 Translate",
2323
"DrawingSummary": "画图 Drawing",
24-
"AdminSummary": "中台 Admin"
24+
"AdminSummary": "中台 Admin",
25+
"OnlineSheet": "在线表格 UniverSheet"
2526
},
2627
"BootstrapBlazor.Server.Components.Components.Pre": {
2728
"LoadingText": "正在加载 ...",
@@ -7017,5 +7018,9 @@
70177018
"ToastOnReadyContent": "表格组件已就绪，可进行后续数据推送等操作",
70187019
"PluginTitle": "自定义插件",
70197020
"PluginIntro": "通过设置 <code>Plugins</code> 参数设置自己的插件"
7021+
},
7022+
"BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet": {
7023+
"ToastOnReadyTitle": "在线表格协作通知",
7024+
"ToastOnReadyContent": "4 秒后表格更新其他写作人员更改内容"
70207025
}
70217026
}

‎src/BootstrapBlazor.Server/Services/MockOnlineContributor.cs

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
using Longbow.Tasks;
7+
8+
namespace BootstrapBlazor.Server.Services;
9+
10+
class MockOnlineContributor(IDispatchService<Contributor> dispatchService) : BackgroundService
11+
{
12+
/// <summary>
13+
/// 运行任务
14+
/// </summary>
15+
/// <param name="stoppingToken"></param>
16+
/// <returns></returns>
17+
protected override Task ExecuteAsync(CancellationToken stoppingToken)
18+
{
19+
TaskServicesManager.GetOrAdd("OnlineSheet", (provider, token) =>
20+
{
21+
dispatchService.Dispatch(new DispatchEntry<Contributor>()
22+
{
23+
Name = "OnlineSheet-Demo",
24+
Entry = new Contributor()
25+
{
26+
Name = "Argo Zhang",
27+
Avatar = "/images/Argo-C.png",
28+
Description = "正在更新单元格 A8",
29+
Data = new UniverSheetData()
30+
{
31+
CommandName = "UpdateRange",
32+
Data = new
33+
{
34+
Range = "A8",
35+
Value = $"{DateTime.Now: yyyy-MM-dd HH:mm:ss} Argo 更新此单元格"
36+
}
37+
}
38+
}
39+
});
40+
return Task.CompletedTask;
41+
}, TriggerBuilder.Build(Cron.Secondly(5)));
42+
43+
return Task.CompletedTask;
44+
}
45+
}
46+
47+
/// <summary>
48+
/// Contributor
49+
/// </summary>
50+
public class Contributor
51+
{
52+
/// <summary>
53+
/// Gets or sets Name
54+
/// </summary>
55+
public string? Name { get; set; }
56+
57+
/// <summary>
58+
/// Gets or sets Avatar
59+
/// </summary>
60+
public string? Avatar { get; set; }
61+
62+
/// <summary>
63+
/// Gets or sets Description
64+
/// </summary>
65+
public string? Description { get; set; }
66+
67+
/// <summary>
68+
/// Gets or sets Sheet data
69+
/// </summary>
70+
public UniverSheetData? Data { get; set; }
71+
}

0 commit comments

Comments
 (0)