docs: 重构整个文档，提升用户体验，使用户能更好的查看示例和API (#312)

tdesign-blazor · Aug 8, 2023 · 71fa20e · 71fa20e
2 parents 4edb676 + 8894472
commit 71fa20e
Show file tree

Hide file tree

Showing 127 changed files with 1,485 additions and 1,180 deletions.
diff --git a/doc/TDesign.Docs.ServerSide/TDesign.xml b/doc/TDesign.Docs.ServerSide/TDesign.xml
diff --git a/doc/TDesign.Docs.Shared/Components/ApiDocument.razor b/doc/TDesign.Docs.Shared/Components/ApiDocument.razor
@@ -0,0 +1,84 @@
+@{
+    var parameters = ApiDoc.GetParameterApiDoc(ComponentType);
+    if ( parameters.Any() )
+    {        
+        <h2>@(Name) 的参数</h2>
+        <table class="t-table" style="margin-bottom:40px">
+            <thead>
+                <tr>
+                    <th width="10%">名称</th>
+                    <th width="15%">数据类型</th>
+                    <th width="5%">默认值</th>
+                    <th>说明</th>
+                    <th width="100px">必填</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach ( var param in parameters )
+                {
+                    <tr>
+                        <td style="font-weight:bolder;">@param.name</td>
+                        <td>
+                            @if ( string.IsNullOrEmpty(param.type) )
+                            {
+                                <TTag Theme="Theme.Danger">Unkonw</TTag>
+                            }
+                            else
+                            {
+                                <code style="color:darkred">@param.type</code>
+                            }
+                        </td>
+                        <td>
+                            @param.defaultValue
+                        </td>
+                        <td>@param.comment</td>
+                        <td>
+                            @if ( param.requried )
+                            {
+                                <TTag Theme="Theme.Danger">Y</TTag>
+                            }
+                            else
+                            {
+                                <TTag Type="TagType.Outline">N</TTag>
+                            }
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    }
+
+    var methods = ApiDoc.GetMethodApiDoc(ComponentType);
+    if ( methods.Any() )
+    {
+        <h2 style="margin-top:40px">@(Name) 的方法</h2>
+        <table class="t-table">
+            <thead>
+                <tr>
+                    <th width="40%">方法</th>
+                    <th>说明</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach ( var item in methods )
+                {
+                    <tr>
+                        <td style="font-weight:bolder;">
+                        @($"{item.returnType} {item.name}({item.parameters})")
+                        </td>
+                        <td>@item.comment</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    }
+}
+
+
+@code {
+    [EditorRequired][Parameter] public Type ComponentType { get; set; }
+
+    [Parameter]public string? Title{ get; set; }
+
+    string Name => Title ?? ComponentType.Name;
+}
diff --git a/doc/TDesign.Docs.Shared/Components/ComponentAPI.razor b/doc/TDesign.Docs.Shared/Components/ComponentAPI.razor
diff --git a/doc/TDesign.Docs.Shared/Components/PageLayout.razor b/doc/TDesign.Docs.Shared/Components/PageLayout.razor
@@ -0,0 +1,48 @@
+
+<div style="margin-50px;">
+    <h1 style="font-size:36px;margin-bottom:20px; margin-top:40px; display:block;">@Title</h1>
+    <p style="color:gray">
+        @Description
+    </p>
+    <TTab>
+        <TTabItem Title="示例">
+            <TLayout style="height:75vh;overflow-y:auto">
+                <RightSideContent>
+                    @if ( Anchors is not null )
+                    {
+                        <div style="width:20vw;padding:10px;">
+                            <TAnchor style="position: fixed;" Container="#page">
+                                @foreach ( var item in Anchors )
+                                {
+                                    <TAnchorItem Title="@item" Href="@("#"+item)"></TAnchorItem>
+                                }
+                            </TAnchor>
+                        </div>
+                    }
+                </RightSideContent>
+                <ChildContent>
+                    @ChildContent
+                </ChildContent>
+            </TLayout>
+        </TTabItem>
+        <TTabItem Title="API">
+            <div style="height:75vh;overflow-y:auto">
+                @if(ComponentType is not null)
+                {
+                    <ApiDocument ComponentType="@ComponentType"/>
+                }else{
+                    @ApiContent
+                }
+            </div>
+        </TTabItem>
+    </TTab>
+</div>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Description { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public RenderFragment? ApiContent { get; set; }
+    [Parameter] public string[]? Anchors { get; set; }
+    [Parameter]public Type? ComponentType{ get; set; }
+}
diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Basic/ButtonPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Basic/ButtonPage.razor
@@ -1,9 +1,9 @@
 @page "/components/button"
-<LayoutContent AnchorItems="@(new[]{"示例","幽灵按钮","图标按钮","Block 按钮","不同颜色主题按钮","不同状态的按钮","不同尺寸的按钮","不同形状的按钮","OnClick 点击事件","自定义渲染元素","API"})">
-<PageHeader Title="Button 按钮">
-    按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
-</PageHeader>
 
+
+<PageLayout Title="Button 按钮" Description="按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。"
+    ComponentType="typeof(TButton)"
+    Anchors="@(new[]{"示例","幽灵按钮","图标按钮","Block 按钮","不同颜色主题按钮","不同状态的按钮","不同尺寸的按钮","不同形状的按钮","OnClick 点击事件","自定义渲染元素"})">
 <Example Title="示例">
     <RunContent>
 <TButton>普通按钮</TButton>
@@ -420,7 +420,5 @@
 ")
     </CodeContent>
 </Example>
-    <div id="API"></div>
-<ComponentAPI Component="typeof(TButton)"></ComponentAPI>
-</LayoutContent>
+</PageLayout>
 @inject IJSRuntime JS