tdesign-blazor · teacher-zhou · Oct 8, 2022 · Sep 21, 2022 · Sep 21, 2022 · Sep 22, 2022
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,4 +1,4 @@
-name: .NET
+name: 编译 & 测试
 
 on:
   push:
@@ -13,11 +13,13 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
-    - name: Setup .NET
+    - name: 配置 .NET
       uses: actions/setup-dotnet@v2
       with:
         dotnet-version: 6.0.x
-    - name: Restore dependencies
+    - name: 还原包
       run: dotnet restore
-    - name: Build
+    - name: 编译
       run: dotnet build --no-restore
+    - name: 测试
+      run: dotnet test
diff --git a/doc/TDesignBlazor.Docs.Shared/Components/Example.razor b/doc/TDesignBlazor.Docs.Shared/Components/Example.razor
@@ -3,7 +3,7 @@
     <h2>@Title</h2>
     @if (Description is not null)
     {
-        <p>@Description</p>
+            <p>@Description</p>
     }
 
     @*<Tab Position="TDesignBlazor.Position.Top" >
@@ -18,11 +18,11 @@
 
     <Div AdditionalCssClass="demo-wrapper">
         <Div AdditionalCssClass="content" AdditionalStyle="@RunStyle">
-                @RunContent
+            @RunContent
         </Div>
         <Div class="footer">
             <Div class="btn">
-                <Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px" @onclick="e=>ToogleCode()"  style="display: flex;align-content: center;justify-content: center;align-items: center;flex-wrap: nowrap;"/>
+                <Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px"  @onclick="e=>ToogleCode()" />
             </Div>
         </Div>
         <Div class="@CodeClass" style="@GetStyle()">
@@ -37,11 +37,11 @@
     [Parameter] public RenderFragment Description { get; set; }
     [Parameter] public RenderFragment CodeContent { get; set; }
     [Parameter] public RenderFragment RunContent { get; set; }
-    [Parameter]public string? RunStyle{ get; set; }
+    [Parameter] public string? RunStyle { get; set; }
 
     bool Active = false;
 
-    string GetStyle() =>Active?"": "display:none";
+    string GetStyle() => Active ? "" : "display:none";
     string CodeClass => HtmlHelper.CreateCssBuilder().Append("content code")
     //.Append(Active, "code-collapse", "code-expand")
     .ToString()
@@ -55,3 +55,4 @@
         StateHasChanged();
     }
 }
+
diff --git a/doc/TDesignBlazor.Docs.Shared/Layouts/MainLayout.razor b/doc/TDesignBlazor.Docs.Shared/Layouts/MainLayout.razor
@@ -6,7 +6,7 @@
             <LogoContent>
                 <img alt="TDesignBlazor Logo" width="100" src="https://tdesign.gtimg.com/site/TDesign.png">
                 &nbsp;&nbsp;
-                <h3><i>基于 TDesignBlazor 的 Blazor 企业级组件库</i></h3>
+                <h2><i>基于 TDesign 的 Blazor 企业级组件库</i></h2>
             </LogoContent>
             <OperationContent>
                 <a href="https://tdesign.tencent.com/" title="官网" target="_blank" style="text-decoration:none">
@@ -20,7 +20,7 @@
     </HeaderContent>
     <LeftSideContent>
         <div style="overflow-y:auto;height:95vh;overflow-x:hidden">
-        <NavMenu />
+            <NavMenu />
         </div>
     </LeftSideContent>
     <ChildContent>

diff --git a/doc/TDesignBlazor.Docs.Shared/Layouts/NavMenu.razor b/doc/TDesignBlazor.Docs.Shared/Layouts/NavMenu.razor
@@ -37,6 +37,7 @@
         <MenuItem Link="components/loading">Loading 加载</MenuItem>
         <MenuItem Link="components/table">Table 表格</MenuItem>
         <MenuItem Link="components/tag">Tag 标签</MenuItem>
+        <MenuItem Link="components/progress">Progress 进度条</MenuItem>
         <MenuItem Link="/components/image">Image 图片</MenuItem>
 
     </MenuItemGroup>

diff --git a/doc/TDesignBlazor.Docs.Shared/Pages/Components/ProgressPage.razor b/doc/TDesignBlazor.Docs.Shared/Pages/Components/ProgressPage.razor
@@ -0,0 +1,154 @@
+@page "/components/progress"
+
+<PageHeader Title="Progress 进度条">展示操作的当前进度。</PageHeader>
+
+
+<Example Title="线形进度条">
+    <Description>以线形表示进度的组件，可以选择性地配有文字或图标补充显示进度和状态。多用于信息量较为丰富的情况。</Description>
+    <RunContent>
+        <h3>默认在线形外展示进度和状态</h3>
+        <Space Vertical AdditionalStyle="width:100%" Gap="20px">
+            <SpaceItem>
+                <span>默认样式</span>
+                <Progress Value="50" />
+            </SpaceItem>
+            <SpaceItem>
+                <span>100%</span>
+                <Progress Value="100" Status="Status.Success" ShowLabel/>
+            </SpaceItem>
+            <SpaceItem>
+                <span>进度完成</span>
+                <Progress Value="100" Status="Status.Success" />
+            </SpaceItem>
+            <SpaceItem>
+                <span>进度状态发生重大错误</span>
+                <Progress Value="50" Status="Status.Error" />
+            </SpaceItem>
+            <SpaceItem>
+                <span>进度被中断</span>
+                <Progress Value="50" Status="Status.Warning" />
+            </SpaceItem>
+        </Space>
+        <h3>可以在线形内展示进度信息</h3>
+        <Space Vertical AdditionalStyle="width:100%" Gap="20px">
+            <SpaceItem>
+                <span>默认样式</span>
+                <Progress Value="38" Theme="ProgressTheme.Plump" ShowLabel/>
+            </SpaceItem>
+            <SpaceItem>
+                <span>进度0-10%时数字位置出现在目前进度的右边区域</span>
+                <Progress Value="4" Theme="ProgressTheme.Plump" ShowLabel />
+            </SpaceItem>
+        </Space>
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```html
+<h3>默认在线形外展示进度和状态</h3>
+<span>默认样式</span>
+<Progress Value=""50"" />
+
+<span>100%</span>
+<Progress Value=""100"" Status=""Status.Success"" ShowLabel/>
+
+<span>进度完成</span>
+<Progress Value=""100"" Status=""Status.Success"" />
+
+<span>进度状态发生重大错误</span>
+<Progress Value=""50"" Status=""Status.Error"" />
+
+<span>进度被中断</span>
+<Progress Value=""50"" Status=""Status.Warning"" />
+
+
+<h3>可以在线形内展示进度信息</h3>
+<span>默认样式</span>
+<Progress Value=""38"" Theme=""ProgressTheme.Plump"" />
+
+<span>进度0-10%时数字位置出现在目前进度的右边区域</span>
+<Progress Value=""4"" Theme=""ProgressTheme.Plump"" />
+```
+")
+    </CodeContent>
+</Example>
+<Example Title="环形进度条">
+    <Description>以线形表示进度的组件，环内可选择性地配有文字或图标补充显示进度和状态。多用于需要强调进度百分比的情况。</Description>
+    <RunContent>
+        <Space AdditionalStyle="text-align:center" Gap="72px">
+            <SpaceItem>
+                <Span>默认样式</Span>
+                <Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel/>
+            </SpaceItem>
+            <SpaceItem>
+                <Span>不显示数字</Span>
+                <Progress Value="100" Theme="ProgressTheme.Circle" Status="Status.Success" HideLabel/>
+            </SpaceItem>
+            <SpaceItem>
+                <Span>自定义内容</Span>
+                <Progress Value="50" Label="75天" Theme="ProgressTheme.Circle" Status="Status.Success" ShowLabel />
+            </SpaceItem>
+        </Space>
+        <br /><br />
+        <Space AdditionalStyle="text-align:center" Gap="72px">
+            <SpaceItem>
+                <Span>进度完成</Span>
+                <Progress Value="30" Theme="ProgressTheme.Circle" Status="Status.Success" />
+            </SpaceItem>
+            <SpaceItem>
+                <Span>进度状态发生错误</Span>
+                <Progress Value="75" Theme="ProgressTheme.Circle" Status="Status.Error" />
+            </SpaceItem>
+            <SpaceItem>
+                <Span>进度被中断</Span>
+                <Progress Value="50" Theme="ProgressTheme.Circle" Status="Status.Warning" />
+            </SpaceItem>
+        </Space><br /><br />
+        <Space AdditionalStyle="text-align:center" Gap="72px">
+            <SpaceItem>
+                <Span>小尺寸</Span>
+                <Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel Size="Size.Small"/>
+            </SpaceItem>
+            <SpaceItem>
+                <Span>默认尺寸</Span>
+                <Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel Size="Size.Medium" />
+            </SpaceItem>
+            <SpaceItem>
+                <Span>大尺寸</Span>
+                <Progress Value="30" Theme="ProgressTheme.Circle" ShowLabel Size="Size.Large"/>
+            </SpaceItem>
+        </Space>
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```html
+<Span>默认样式</Span>
+<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel/>
+
+<Span>不显示数字</Span>
+<Progress Value=""100"" Theme=""ProgressTheme.Circle"" Status=""Status.Success"" HideLabel/>
+
+<Span>自定义内容</Span>
+<Progress Value=""50"" Label=""75天"" Theme=""ProgressTheme.Circle"" Status=""Status.Success"" ShowLabel />
+
+<Span>进度完成</Span>
+<Progress Value=""30"" Theme=""ProgressTheme.Circle"" Status=""Status.Success"" />
+
+<Span>进度状态发生错误</Span>
+<Progress Value=""75"" Theme=""ProgressTheme.Circle"" Status=""Status.Error"" />
+
+<Span>进度被中断</Span>
+<Progress Value=""50"" Theme=""ProgressTheme.Circle"" Status=""Status.Warning"" />
+
+<Span>小尺寸</Span>
+<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel Size=""Size.Small""/>
+
+<Span>默认尺寸</Span>
+<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel Size=""Size.Medium"" />
+
+<Span>大尺寸</Span>
+<Progress Value=""30"" Theme=""ProgressTheme.Circle"" ShowLabel Size=""Size.Large""/>
+
+```
+")
+    </CodeContent>
+</Example>
diff --git a/src/TDesignBlazor.Test/Components/ProgressTest.cs b/src/TDesignBlazor.Test/Components/ProgressTest.cs
@@ -0,0 +1,98 @@
+using ComponentBuilder;
+
+namespace TDesignBlazor.Test.Components;
+public class ProgressTest : TestBase<Progress>
+{
+    [Fact(DisplayName = "进度条 - 渲染 50% 进度的进度条和样式")]
+    public void Test_Progress_Default()
+    {
+        GetComponent(m => m.Add(p => p.Value, 50)).MarkupMatches(@"
+<div class=""t-progress"">
+    <div class=""t-progress--thin t-progress--status--undefined"">
+        <div class=""t-progress__bar"">
+            <div class=""t-progress__inner"" style=""width:50%""></div>
+        </div>
+        <div class=""t-progress__info""></div>
+    </div>
+</div>
+");
+    }
+
+    [Fact(DisplayName = "进度条 - ShowLabel 参数")]
+    public void Test_Progress_ShowLabel_Parameter()
+    {
+        GetComponent(m => m.Add(p => p.Value, 50).Add(p => p.ShowLabel, true)).MarkupMatches(@"
+<div class=""t-progress"">
+    <div class=""t-progress--thin t-progress--status--undefined"">
+        <div class=""t-progress__bar"">
+            <div class=""t-progress__inner"" style=""width:50%""></div>
+        </div>
+        <div class=""t-progress__info"">50%</div>
+    </div>
+</div>
+");
+    }
+
+    [Fact(DisplayName = "进度条 - Plump 类型时，Value < 10 的样式")]
+    public void Test_Progress_Plump_UnderTen_Label()
+    {
+        GetComponent(m => m.Add(p => p.Value, 5).Add(p => p.ShowLabel, true).Add(p => p.Theme, ProgressTheme.Plump)).MarkupMatches(@"
+<div class=""t-progress"">
+    <div class=""t-progress__bar t-progress--plump t-progress--status--undefined t-progress--under-ten"">
+        <div class=""t-progress__inner"" style=""width:5%""></div>
+        <div class=""t-progress__info"">5%</div>
+    </div>
+</div>
+");
+    }
+
+    [Fact(DisplayName = "进度条 - Plump 类型时，Value >= 10 的样式")]
+    public void Test_Progress_Plump_OverTen_Label()
+    {
+        GetComponent(m => m.Add(p => p.Value, 15).Add(p => p.ShowLabel, true).Add(p => p.Theme, ProgressTheme.Plump)).MarkupMatches(@"
+<div class=""t-progress"">
+    <div class=""t-progress__bar t-progress--plump t-progress--status--undefined t-progress--over-ten"">
+        <div class=""t-progress__inner"" style=""width:15%"">
+            <div class=""t-progress__info"">15%</div>
+        </div>
+    </div>
+</div>
+");
+    }
+
+    [Theory(DisplayName ="进度条 - Status 参数")]
+    [InlineData(new object[] { Status.Warning })]
+    [InlineData(new object[] { Status.Success })]
+    [InlineData(new object[] { Status.Error })]
+    [InlineData(new object[] { Status.Default })]
+    public void Test_Progress_Status_Parameter(Status status)
+    {
+        GetComponent(m => m.Add(p => p.Value, 15).Add(p => p.ShowLabel, true).Add(p => p.Status, status)).MarkupMatches($@"
+<div class=""t-progress"">
+    <div class=""t-progress--thin t-progress--status--{status.ToString().ToLower()}"">
+        <div class=""t-progress__bar"">
+            <div class=""t-progress__inner"" style=""width:15%""></div>
+        </div>
+        <div class=""t-progress__info"">15%</div>
+    </div>
+</div>
+");
+    }
+
+    [Fact(DisplayName ="进度条 - Circle 类型")]
+    public void Test_Progress_Circle()
+    {
+        GetComponent(m => m.Add(p => p.Value, 30).Add(p => p.ShowLabel, true).Add(p => p.Theme, ProgressTheme.Circle).Add(p=>p.Size,Size.Small))
+            .MarkupMatches($@"
+<div class=""t-progress"">
+    <div class=""t-progress--circle t-progress--status--undefined"" style=""width:72px;height:72px;font-size:14px;"">
+        <div class=""t-progress__info"">30%</div>
+        <svg width=""72"" height=""72"" viewBox=""0 0 72 72"">
+            <circle cx=""36"" cy=""36"" r=""34"" stroke-width=""4"" fill=""none"" class=""t-progress__circle-outer""></circle>
+            <circle cx=""36"" cy=""36"" r=""34"" stroke-width=""4"" fill=""none"" stroke-linecap=""round"" transform=""matrix(0,-1,1,0,0,72)"" stroke-dasharray=""64.08849013323179 214.62830044410595"" class=""t-progress__circle-inner""></circle>
+        </svg>
+    </div>
+</div>
+");
+    }
+}