fix: 重构 TTable 的代码实现

doc/TDesign.Docs.Shared/Components/ComponentAPI.razor

@@ -5,15 +5,15 @@
     @if (Parameters.Any())
     {
         <h3 style="font-weight: 700;font-size: 20px;line-height: 28px;margin: 48px 0 8px;display: flex;align-items: center;">@Title 的参数</h3>
-        <TTable TItem="Parameter" Data="Parameters">
-            <TTableFieldColumn Value="context?.Name" Header="名称" style="width:200px"></TTableFieldColumn>
-            <TTableFieldColumn Header="类型">
+        <TTable TItem="Parameter" Data="Parameters" >
+            <TTableFieldColumn Field="f=>f.Name" Header="名称" style="width:200px"></TTableFieldColumn>
+            <TTableFieldColumn Field="f=>f.Type" Header="类型">
                 <code>@context?.Type</code>
             </TTableFieldColumn>
 
-            <TTableFieldColumn Value="context?.Description" Header="描述"></TTableFieldColumn>
-            <TTableFieldColumn Value="context?.Default" Header="默认值" style="width:100px"></TTableFieldColumn>
-            <TTableFieldColumn Header="必填" style="width:80px">
+            <TTableFieldColumn Field="f=>f.Description" Header="描述"></TTableFieldColumn>
+            <TTableFieldColumn Field="f=>f.Default" Header="默认值" style="width:100px"></TTableFieldColumn>
+            <TTableFieldColumn Field="f=>f.Required" Header="必填" style="width:80px">
                 @if (context.Required)
                 {
                     <TTag Theme="Theme.Danger">Y</TTag>
@@ -31,9 +31,9 @@
 
         <h3 style="font-weight: 700;font-size: 20px;line-height: 28px;margin: 48px 0 8px;display: flex;align-items: center;">@Title 的方法</h3>
         <TTable TItem="Method" Data="Methods">
-            <TTableFieldColumn Value="context?.Name" Header="名称" AdditionalStyle="width:200px"></TTableFieldColumn>
-            <TTableFieldColumn Value="context?.Parameter" Header="参数" AdditionalStyle="width:200px"></TTableFieldColumn>
-            <TTableFieldColumn Value="context?.Description" Header="描述"></TTableFieldColumn>
+            <TTableFieldColumn Field="f=>f.Name" Header="名称" style="width:200px"></TTableFieldColumn>
+            <TTableFieldColumn Field="f=>f.Parameter" Header="参数" style="width:200px"></TTableFieldColumn>
+            <TTableFieldColumn Field="f=>f.Description" Header="描述"></TTableFieldColumn>
         </TTable>
     }
 </div>

doc/TDesign.Docs.Shared/Layouts/NavMenu.razor

@@ -30,6 +30,7 @@
         <TMenuItem Link="components/input">Input 输入框</TMenuItem>
         <TMenuItem Link="components/inputadornment">InputAdornment 输入装饰器</TMenuItem>
         <TMenuItem Link="components/inputnumber">InputNumber 数字输入框</TMenuItem>
+        <TMenuItem Link="components/inputtag">TagInput 标签输入框</TMenuItem>
         <TMenuItem Link="components/radio">InputRadio 单选框</TMenuItem>
         <TMenuItem Link="components/inputrange">RangeInput 范围输入框</TMenuItem>
         <TMenuItem Link="components/select">Select 选择器</TMenuItem>

doc/TDesign.Docs.Shared/Pages/Components/Input/InputTagPage.razor

@@ -0,0 +1,116 @@
+@page "/components/inputtag"
+
+<LayoutContent AnchorItems="@(new[]{"基础标签输入框","限制标签的数量","不同尺寸的标签","不同的主题颜色","自适应宽度","API"})">
+    <PageHeader Title="TagInput 标签输入框">
+        用于输入文本标签。
+    </PageHeader>
+    <TAlert Theme="Theme.Warning">
+        字段的类型必须是 <code>IEumerable&lt;string></code> 类型。
+    </TAlert>
+    <Example Title="基础标签输入框">
+    <Description></Description>
+    <RunContent>
+            <TInputTag @bind-Value="BasicTags" />
+            <TInputTag @bind-Value="BasicTags" Prefix="标签" />
+            <TInputTag @bind-Value="BasicTags">
+                <PrefixContent>
+                    <TIcon Name="IconName.CheckRectangle" /> 标签
+                </PrefixContent>
+            </TInputTag>
+        @string.Join(",",BasicTags)
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cshtml-razor
+<TInputTag @bind-Value=""BasicTags"" />
+<TInputTag @bind-Value=""BasicTags"" Prefix=""标签"" />
+<TInputTag @bind-Value=""BasicTags"">
+    <PrefixContent>
+        <TIcon Name=""IconName.CheckRectangle"" /> 标签
+    <PrefixContent>
+</TInputTag>
+```
+```cs
+IEnumerable<string> BasicTags { get; set; } = Enumerable.Empty<string>();
+```
+")
+    </CodeContent>
+</Example>
+<Example Title="限制标签的数量">
+    <Description>
+        使用 <code>Max</code> 限制数量。
+    </Description>
+    <RunContent>
+            <TInputTag @bind-Value="LimitTags" Placeholder="最多输入5个" Max="5" />
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cshtml-razor
+<TInputTag @bind-Value=""LimitTags"" Placeholder=""最多输入5个"" Max=""5"" />
+```
+```cs
+IEnumerable<string> LimitTags { get; set; } = Enumerable.Empty<string>();
+```
+")
+    </CodeContent>
+</Example>
+<Example Title="不同尺寸的标签">
+    <Description></Description>
+    <RunContent>
+            <TInputTag @bind-Value="BasicTags" Size="Size.Small" />
+            <TInputTag @bind-Value="BasicTags" Size="Size.Medium" />
+            <TInputTag @bind-Value="BasicTags" Size="Size.Large" />
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cshtml-razor
+<TInputTag @bind-Value=""BasicTags"" Size=""Size.Small"" />
+<TInputTag @bind-Value=""BasicTags"" Size=""Size.Medium"" />
+<TInputTag @bind-Value=""BasicTags"" Size=""Size.Large"" />
+```
+")
+    </CodeContent>
+</Example>
+<Example Title="不同的主题颜色">
+    <Description>
+        设置 <code>Theme</code> 设置不同主题。
+    </Description>
+        <RunContent>
+            <TInputTag @bind-Value="Tags" Theme="Theme.Primary" />
+            <TInputTag @bind-Value="Tags" Theme="Theme.Success" />
+            <TInputTag @bind-Value="Tags" Theme="Theme.Warning" />
+            <TInputTag @bind-Value="Tags" Theme="Theme.Danger" />
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cshtml-razor
+<TInputTag @bind-Value=""Tags"" Theme=""Theme.Primary"" />
+<TInputTag @bind-Value=""Tags"" Theme=""Theme.Success"" />
+<TInputTag @bind-Value=""Tags"" Theme=""Theme.Warning"" />
+<TInputTag @bind-Value=""Tags"" Theme=""Theme.Danger"" />
+```
+")
+    </CodeContent>
+</Example>
+<Example Title="自适应宽度">
+    <Description></Description>
+    <RunContent>
+            <TInputTag AutoWidth @bind-Value="Tags" Theme="Theme.Primary" />
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cshtml-razor
+<TInputTag AutoWidth @bind-Value=""Tags"" Theme=""Theme.Primary"" />
+```
+")
+    </CodeContent>
+</Example>
+<div id="API"></div>
+<ComponentAPI Component="typeof(TInputTag)"/>
+</LayoutContent>
+@code{
+    IEnumerable<string> BasicTags { get; set; } = Enumerable.Empty<string>();
+    IEnumerable<string> LimitTags { get; set; } = Enumerable.Empty<string>();
+    IEnumerable<string> Tags { get; set; } = new List<string> { "Blazor", "Vue", "Angular", "React" };
+    IEnumerable<string> RepeatTag { get; set; } = Enumerable.Empty<string>();
+}

doc/TDesign.Docs.Shared/Pages/TestPage.razor

@@ -2,7 +2,27 @@
 @using Test=TDesign.Docs.Shared.Pages.Components.Data.TablePage
 @layout EmptyLayout
 
+<TTable TItem="Test.User" Data="Test.User.GetData()">
+    <TTableExpandColumn>
+        <h4>Name:@context.Name</h4>
+    </TTableExpandColumn>
+    <TTableCheckboxColumn Field="f=>f.Id" />
+    <TTableFieldColumn Field="f=>f.Id" />
+    <TTableFieldColumn Field="f=>f.Name" />
+    <TTableFieldColumn Field="f=>f.Age" >
+        <FooterContent>
+            底部内容
+        </FooterContent>
+        </TTableFieldColumn>
+    <TTableFieldColumn Field="f=>f.Gender" />
+
+</TTable>
 
-<TPopup Content="Hello" Placement="PopupPlacement.Right">
-    <TButton>Submit</TButton>
-</TPopup>
+@code {
+    IEnumerable<string> Text { get; set; } = Enumerable.Empty<string>();
+
+    void HandleKey(KeyboardEventArgs e)
+    {
+
+    }
+}

doc/TDesign.Docs.Shared/wwwroot/app.css

@@ -6,10 +6,10 @@ code {
     color: red;
     display: inline-block;
     background-color: #f8f8f8;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 10px;
-    padding-right: 10px;
+    /*padding-top: 2px;*/
+    /*padding-bottom: 2px;*/
+    padding-left: 5px;
+    padding-right: 5px;
 }
 :root[theme-mode=dark] code {
     background-color: var(--td-gray-color-11);
@@ -123,6 +123,9 @@ code {
         border-top-right-radius: 5px;
         overflow: auto;
     }
+        .demo-wrapper > .content.code{
+            padding:30px;
+        }
 
         .demo-wrapper > .content.code-collapse {
             transition-duration: .8s;