import { Page, Button } from 'components'
import { Layout, Playground, Attributes, MockPage } from 'lib/components'

export const meta = {
  title: '页面 Page',
  group: '布局',
}

## Page / 页面

展示页面内容的通用容器。

<Playground
  desc="内容将会被展示在页面中间。"
  scope={{ Page, MockPage, Button }}
  code={`
() => {
  const Child = () => (
    <>
      <h2>你好，世界。</h2>
      <p>这是一个模拟页面，点击任意处即可关闭。</p>
    </>
  )
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)} auto>显示页面</Button>
      <MockPage visible={visible} onClose={() => setVisible(false)}>
        <Page><Child /></Page>
      </MockPage>
    </>
  )
}
`}
/>

<Playground
  title="内容块"
  desc="添加 `Header` 和 `Footer` 得到更好的布局效果。"
  scope={{ Page, MockPage, Button }}
  code={`
() => {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)} auto>头部和尾部</Button>
      <MockPage visible={visible} onClose={() => setVisible(false)}>
        <Page>
          <Page.Header>
            <h2>头部</h2>
          </Page.Header>
          <Page.Content>
            <h2>你好，世界。</h2>
            <p>这是一个模拟页面，点击任意处即可关闭。</p>
          </Page.Content>
          <Page.Footer>
            <h2>尾部</h2>
          </Page.Footer>
        </Page>
      </MockPage>
    </>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/components/page.mdx">
<Attributes.Title>Page.Props</Attributes.Title>

| 属性            | 描述                 | 类型                              | 推荐值                                  | 默认      |
| --------------- | -------------------- | --------------------------------- | --------------------------------------- | --------- |
| **render**      | 渲染方式             | [PageRenderMode](#pagerendermode) | -                                       | `default` |
| **dotBackdrop** | 在背景中显示装饰样式 | `boolean`                         | -                                       | `false`   |
| **dotSize** | 背景中的点大小 | `CSSProperties`                         | -                        | `1px`   |
| **dotSpace** | 背景中每个点的间距 | `number`                         | -                        | `1`   |
| ...             | 原生属性             | `HTMLAttributes`                  | `'autoFocus', 'name', 'className', ...` | -         |

<Attributes.Title>Page.Header.Props</Attributes.Title>

| 属性       | 描述         | 类型             | 推荐值                                  | 默认    |
| ---------- | ------------ | ---------------- | --------------------------------------- | ------- |
| **center** | 居中对齐内容 | `boolean`        | -                                       | `false` |
| ...        | 原生属性     | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | -       |

<Attributes.Title alias="Page.Body">Page.Content.Props</Attributes.Title>

| 属性 | 描述     | 类型             | 推荐值                                  | 默认 |
| ---- | -------- | ---------------- | --------------------------------------- | ---- |
| ...  | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | -    |

<Attributes.Title>Page.Footer.Props</Attributes.Title>

| 属性 | 描述     | 类型             | 推荐值                                  | 默认 |
| ---- | -------- | ---------------- | --------------------------------------- | ---- |
| ...  | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | -    |

<Attributes.Title>PageRenderMode</Attributes.Title>

```ts
type PageRenderMode =
  | 'default' // 正常渲染
  | 'effect' // 在 effect 第一次触发后渲染
  | 'effect-seo' // 类似于 "effect"，但首屏为 SEO 额外返回字符串
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
