组件与布局

介绍

本文档详细介绍Kknown项目中的前端组件系统，包括表单、表格、布局等核心组件的功能、属性和使用方法。我们将结合实际代码，说明如何自定义和扩展这些组件，以及如何实现响应式布局与交互。

核心组件

AppLayout

AppLayout是应用的基础布局组件，继承自BaseComponent，主要功能包括：

导航控制：显示返回按钮和当前页面名称
内容区域：通过ChildContent渲染子内容
标签页支持：通过IsTab属性控制是否显示标签页

classDiagram
  class AppLayout {
    +IsHome: bool
    +IsTab: bool
    +TabItems: IEnumerable<TabItem>
    +PageClass: string
    +ChildContent: RenderFragment
    -Context: UIContext
  }
  AppLayout --|> BaseComponent

MainLayout

MainLayout是主页面布局组件，支持多种布局模式：

水平布局模式(LayoutMode.Horizontal)
浮动侧边栏模式(LayoutMode.Float)
可折叠侧边栏模式

classDiagram
  class MainLayout {
    +LayoutClass: string
    +HeaderClass: string
    +MenuClass: string
    +ChildContent: RenderFragment
    +OnLoadMenus: EventCallback
    +OnReloadPage: EventCallback
    +OnSetting: EventCallback
    -collapsed: bool
    -layout: KLayout
    -menu: MainMenu
    -body: MainBody
  }
  MainLayout --|> BaseComponent

AppForm

AppForm是基础表单容器组件，提供：

表单内容区域(ChildContent)
底部操作区域(Action)

<div class="@ClassName">
    @ChildContent
    @if (Action != null)
    {
        <div class="kui-app-form-action">@Action</div>
    }
</div>

KAlert

KAlert是提示组件，支持：

多种提示类型(Type)
国际化文本(Language[Text])
显示控制(Visible)

@if (Visible)
{
    <Alert ShowIcon="true" Style="margin-bottom:10px;" Type="@GetAlertType()" Message="@Language[Text]" />
}

KTable

KTable是功能强大的表格组件，主要特性包括：

支持泛型数据源(TItem)
多种列类型配置
分页和排序功能
行操作按钮
统计行显示

classDiagram
  class KTable {
    +Model: TableModel
    +ScrollY: string
    +ExpandTemplate: RenderFragment<TItem>
    +OnExpand: EventCallback<TItem>
    +OnRow: EventCallback<TItem>
    +OnChange: EventCallback
    +SelectedRows: List<TItem>
    -reload: ReloadContainer
    -table: AntTable
    -totalCount: int
    -dataSource: List<TItem>
    -isQuering: bool
  }
  KTable --|> BaseComponent

布局系统

项目提供了灵活的布局系统，通过LayoutMode枚举支持多种布局方式：

水平布局：导航菜单水平排列在顶部
侧边栏布局：导航菜单垂直排列在左侧
浮动布局：侧边栏可以浮动显示

布局切换通过Context.UserSetting.LayoutMode控制：

@if (Context.UserSetting.LayoutMode == LayoutMode.Horizontal.ToString())
{
    <!-- 水平布局代码 -->
}
else
{
    <!-- 侧边栏布局代码 -->
}

自定义与扩展

自定义表格列

可以通过Model.Columns和Model.Templates自定义表格列：

<Column Title="@title" DataIndex="@item.Id" TData="object" Width="@width"
        Ellipsis="item.Ellipsis" Fixed="@item.ToColumnFixPlacement()">
    @if (template != null)
    {
        @template(context)
    }
    else
    {
        <span>@GetColumnText(item, value)</span>
    }
</Column>

扩展表单操作

通过Action属性可以扩展表单底部操作区域：

<AppForm>
    <ChildContent>
        <!-- 表单内容 -->
    </ChildContent>
    <Action>
        <Button OnClick="Submit">提交</Button>
    </Action>
</AppForm>

响应式设计

布局组件内置响应式支持，通过CSS类和条件渲染实现：

<Sider Theme="Context.UserSetting.ToSiderTheme()" 
       Class="@MenuClass" 
       CollapsedWidth="60" 
       Collapsible NoTrigger>
    <!-- 侧边栏内容 -->
</Sider>

交互实现

表格行操作

通过Model.RowActions配置行操作按钮：

RenderFragment RenderAction(TItem context) => @<span>
    @{
        var actions = Model.RowActions?.Invoke(context);
        foreach (var item in actions)
        {
            <KButton Name="@item.Name" 
                    Danger="item.Danger" 
                    OnClick="e=>OnActionClick(item, context)" />
        }
    }
</span>;

导航交互

通过Context实现页面导航和返回：

<span class="back" @onclick="e=>Context.Back()">
    <Icon Type="left" Theme="IconThemeType.Outline" />
    <span>@Language[Language.Back]</span>
</span>

总结

Kknown的前端组件系统提供了丰富的功能和灵活的扩展方式，通过合理的组件设计和布局系统，可以快速构建复杂的后台管理系统界面。组件间的松耦合设计使得自定义和扩展变得简单，而内置的响应式支持和交互功能则大大提升了开发效率。