update demo and readme

2023-05-12 13:48:57 +08:00 · 2023-05-12 13:48:57 +08:00 · 676a1c59d8
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -16,23 +16,23 @@ https://antblazor.com/demo-reuse-tabs/

 ## 前置条件

-先按照 Ant Design 的文档安装 AntDesign 组件 Nuget 包。
+先按照[ Ant Design 的文档 ](https://antblazor.com/docs/introduce)安装 AntDesign 组件 Nuget 包并在 IOC 容器注册依赖。

 ## 基础使用

 1. 首先，使用 `dotnet new` 命令创建一个 Blazor 项目。

-2. 修改项目中的 `App.razor` 文件，使用 `ReuseTabsRouteView` 替换 `RouteView`。
+2. 修改项目中的 `App.razor` 文件，使用 `<CascadingValue Value="routeData">` 包裹 `RouteView`。

   ```diff
   <Router AppAssembly="@typeof(Program).Assembly">
       <Found Context="routeData">
-   -       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
-   +       <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-       </Found>
+   +       <CascadingValue Value="routeData">
+               <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+   +        </CascadingValue>
+      </Found>
       ...
   </Router>
-
   ```

 3. 修改 `MainLayout.razor` 文件, 增加 `ReuseTabs` 组件。注意 `@Body` 是不需要的。
@ -70,15 +70,19 @@ https://antblazor.com/demo-reuse-tabs/
 - 如果需要使用模板来设置复杂的标题, 则需要页面组件实现 `IReuseTabsPage` 接口和 `GetPageTitle` 方法，就返回动态的标题了。

  ```diff
-  @page "/"
+  @page "/order/{OrderNo:int}"
  + @implements IReuseTabsPage

  <h1>Hello, world!</h1>

  @code{
+      
+      [Parameter]
+      public int OrderNo { get; set; }
+
  +   public RenderFragment GetPageTitle() =>
  +       @<div>
-  +           <Icon Type="home"/> Home
+  +           <Icon Type="home"/> Order No. @OrderNo
  +       </div>
  +   ;
  }
@ -96,7 +100,7 @@ ReuseTabs 可以集成 Blazor 的身份验证组件。
    $ dotnet add package AntDesign.Components.Authentication
    ```

-3. 把 `AuthorizeRouteView` 替换为 `AuthorizeReuseTabsRouteView`。
+3. 用 `<CascadingValue Value="routeData">` 包裹  `AuthorizeReuseTabsRouteView`。

    ```diff
    <CascadingAuthenticationState>
@ -131,3 +135,26 @@ ReuseTabs 可以集成 Blazor 的身份验证组件。
@page "/counter"
 + @attribute [ReuseTabsPage(Ignore = true)]
 ```
+
+更多配置请查看 API。
+
+## API
+
+### ReuseTabsPageAttribute 特性
+
+| 属性 | 描述 | 类型 | 默认值 | 
+| --- | --- | --- | --- |
+| Title | 消失在tab上的固定标题 | string | current path |
+| Ignore | 如果 `Ignore=true`, 页面将不会显示在tab中，而是跟原来一样在整个页面展示。 | boolean | false |
+| Closable | 是否显示关闭按钮并且不可被关闭。 | boolean | false |
+| Pin | 是否固定加载页面，并不可被关闭。一般用于主页或默认页。 | boolean | false |
+
+### ReuseTabsService 服务，在页面组件中注入使用。
+
+| 方法 | Description | 
+| --- | --- | 
+| ClosePage(string key) | 关闭指定key的页面，key 就是 url。 
+| CloseOther(string key) | 关闭除了指定key的页面，或者设置了 `Cloasable=false` 或 `Pin=true` 的页面。
+| CloseAll() | 关闭除了设置了 `Cloasable=false` 或者 `Pin=true` 的页面。  
+| CloseCurrent() | 关闭当前页面。 |
+| Update() | 更新 Tab 状态。当 `GetPageTitle()` 中引用的变量发生变化时，需要调用 `Update()` 来更新 tab 的显示。 | 
--- a/README.md
+++ b/README.md
@ -16,23 +16,23 @@ https://antblazor.com/demo-reuse-tabs/

 ## Prerequisites

-Follow the installation steps of AntDesign and install the AntDesign dependencies.
+Follow the [installation steps of AntDesign](https://antblazor.com/docs/introduce) and install the AntDesign dependencies.

 ## Basic case

 1. First of all, create a blazor project using `dotnet new` command.

-2. Modify the `App.razor` file, replace the `RouteView` with `ReuseTabsRouteView`.
+2. Modify the `App.razor` file, warp the `RouteView` with `<CascadingValue Value="routeData">`.

   ```diff
   <Router AppAssembly="@typeof(Program).Assembly">
       <Found Context="routeData">
-   -       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
-   +       <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-       </Found>
+   +       <CascadingValue Value="routeData">
+               <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+   +        </CascadingValue>
+      </Found>
       ...
   </Router>
-
   ```

 3. Then modify the `MainLayout.razor` file, add the `ReuseTabs` component. Note that `@Body` is not required at this case.
@ -67,18 +67,22 @@ Follow the installation steps of AntDesign and install the AntDesign dependencie
  + @attribute [ReuseTabsPageTitle("Counter")]
  ```

- If you want to use a template, then implement the `IReuseTabsPage` interface and implement the method
+- If you want to use a template or variables, then implement the `IReuseTabsPage` interface and implement the method

  ```diff
-  @page "/"
+  @page "/order/{OrderNo:int}"
  + @implements IReuseTabsPage

  <h1>Hello, world!</h1>

  @code{
+      
+      [Parameter]
+      public int OrderNo { get; set; }
+
  +   public RenderFragment GetPageTitle() =>
  +       @<div>
-  +           <Icon Type="home"/> Home
+  +           <Icon Type="home"/> Order No. @OrderNo
  +       </div>
  +   ;
  }
@ -96,16 +100,15 @@ ReuseTabs can be integrated with Blazor's Authentication component.
    $ dotnet add package AntDesign.Components.Authentication
    ```

-3. Replace `AuthorizeRouteView` with `AuthorizeReuseTabsRouteView`.
+3. Warp the `AuthorizeRouteView` with `<CascadingValue Value="routeData">`.

    ```diff
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
-    -            <AuthorizeRouteView RouteData="@routeData" 
-    DefaultLayout="@typeof(MainLayout)" />
-    +            <AuthorizeReuseTabsRouteVie
-    RouteData="@routeData"   DefaultLayout="@typeof(MainLayout)" />
+    +           <CascadingValue Value="routeData">
+                    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    +           </CascadingValue>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
@ -118,7 +121,7 @@ ReuseTabs can be integrated with Blazor's Authentication component.

 The rest of the configuration is the same as the official documentation and ReuseTabs.

-## More options
+## More configurations

 You can set more options by using `ReuseTabsPage` attribute above pages.

@ -133,3 +136,26 @@ If you want to ignore any pages, you can setting the `Ignore=true` in `ReuseTabs
@page "/counter"
 + @attribute [ReuseTabsPage(Ignore = true)]
 ```
+
+See the API for more configurations.
+
+## API
+
+### ReuseTabsPageAttribute
+
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- |
+| Title | The fixed title show on tab. | string | current path |
+| Ignore | If `Ignore=true`, the page is not displayed in tab, but in the entire page. | boolean | false |
+| Closable | Whether the delete button can be displayed. | boolean | false |
+| Pin | Whether the page is fixed to load and avoid closing, usually used on the home page or default page. | boolean | false |
+
+### ReuseTabsService
+
+| Method | Description | Type | Default | 
+| --- | --- | --- | --- |
+| ClosePage(string key) | Close the page with the specified key. | string | current path |
+| CloseOther(string key) | Close all pages except those that specify key, `Cloasable=false`, or `Pin=true`. | boolean | false |
+| CloseAll() | Close all pages except those that `Cloasable=false` or `Pin=true`. | boolean | false |
+| CloseCurrent() | Close current page. | boolean | false |
+| Update() | Update the state of current tab. When the variable referenced in `GetPageTitle()` changes, `Update()` needs to be called to update the tab display. | boolean | false |
--- a/reuse-tabs.sln
+++ b/reuse-tabs.sln
@ -8,6 +8,10 @@ EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AntDesign.TabView", "src\AntDesign.TabView\AntDesign.TabView.csproj", "{F3C68267-A66B-43F6-BEA2-22DF33F08790}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{A3658C20-CF70-43CA-AD06-F39BEACE405F}"
+	ProjectSection(SolutionItems) = preProject
+		README-zh_CN.md = README-zh_CN.md
+		README.md = README.md
+	EndProjectSection
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
--- a/src/AntDesign.TabView/AntDesign.TabView.csproj
+++ b/src/AntDesign.TabView/AntDesign.TabView.csproj
@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
 	<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
  </PropertyGroup>

  <ItemGroup>
-    <PackageReference Include="AntDesign" Version="0.10.2" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
+    <PackageReference Include="AntDesign" Version="0.14.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
  </ItemGroup>

 </Project>
--- a/src/AntDesign.TabView/App.razor
+++ b/src/AntDesign.TabView/App.razor
@ -1,6 +1,8 @@
 <Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
-        <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <CascadingValue Value="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        </CascadingValue>
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
--- a/src/AntDesign.TabView/Pages/Index.razor
+++ b/src/AntDesign.TabView/Pages/Index.razor
@ -1,6 +1,8 @@
@page "/"
+@page "/{OrderNo:int}"
@implements IReuseTabsPage
@attribute [ReuseTabsPage(Closable = false)]
+@inject ReuseTabsService tabService;

 <h1>Hello, world!</h1>

@ -9,9 +11,12 @@ Welcome to your new app.
 <SurveyPrompt Title="How is Blazor working for you?" />

@code {
+    [Parameter]
+    public int OrderNo { get; set; }
+
    public RenderFragment GetPageTitle() =>
    @<div>
-        <Icon Type="home" /> Home
-    </div>
+        <Icon Type="home" /> Order @OrderNo
+        </div>
    ;
 }
--- a/src/AntDesign.TabView/Shared/NavMenu.razor
+++ b/src/AntDesign.TabView/Shared/NavMenu.razor
@ -12,6 +12,11 @@
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="/111" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Order 111
+            </NavLink>
+        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter