import { Stack, Box, Text } from '@chakra-ui/react';
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Breadcrumb from '../breadcrumb';
import Page from '.';
import { HomeOutlined } from '@ant-design/icons';

<Meta title="布局/页面 Page" component={Page} />

# 页面 Page

用于构建页面的外部包装，包括页面标题和相关页面元素。

## 导入

```typescript
import { Page } from '@ahri-ui/core';
```

## 使用

<Canvas>
  <Story name="默认">
    <Page
      title="123"
      subtitle="副标题"
      contentWrapped
      primaryAction={{ content: '导出' }}
      additionalMetaData="这里是 additionalMetaData"
      additionalNavigation="这里是 additionalNavigation"
      secondaryActions={[{ content: '导出' }, { content: '导出' }]}
      breadcrumb={
        <Breadcrumb>
          <Breadcrumb.Item href="">
            <HomeOutlined />
          </Breadcrumb.Item>
          <Breadcrumb.Item href="">
            <span>广告助手</span>
          </Breadcrumb.Item>
          <Breadcrumb.Item>我的账号</Breadcrumb.Item>
        </Breadcrumb>
      }
      pagination={{ hasNext: true, hasPrevious: true }}
    >
      外面包裹了一层 contentWrapped
    </Page>
  </Story>
</Canvas>

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | string | - |
| subtitle | 副标题 | string | - |
| titleMetadata | 标题后显示重要的非交互式状态信息 | ReactNode | - |
| additionalMetaData | 额外的需要显示的东西 显示在左侧 | ReactNode | - |
| additionalNavigation | 额外的需要显示的东西 显示在右侧 | ReactNode | - |
| breadcrumb | 放置面包屑的地方 | ReactNode | - |
| pagination | 页面级分页 | SimplePaginationProps | - |
| fullWidth | 宽度充满父级 | boolean | false |
| isLoading | 加载 | boolean | false |
| thumbnail | 图片 | ReactNode | - |
| headerStyle | 头部样式 | CSSProperties | - |
| contentProps | 内容属性 | BoxProps | - |
| contentWrapped | 内容外是否包裹一层卡片区域，小屏幕时消失 | boolean | false |
| primaryAction | 主按钮 | ContentButtonProps | - |
| secondaryActions | 次级按钮组 | ContentButtonProps[] | - |
| actionGroups | 下拉菜单 | [MenuGroupDescriptor](#MenuGroupDescriptor)[] | - |
| onBack | 返回按钮回调 | () => void | - |

#### <a name="MenuGroupDescriptor">MenuGroupDescriptor</a>

```
{
  /** 标题 */
  title: React.ReactNode;
  /** 禁用 */
  disabled?: boolean;
  /** 行为 */
  actions: {
    /** 内容 */
    content: React.ReactNode;
    /** 图标 */
    icon?: React.ReactNode;
    /** 禁用 */
    disabled?: boolean;
    /** 点击回调 */
    onClick?: () => void;
  }[];
}
```