feat(Page): add Title

src/Page/Title/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { useStyles } from './style';
+
+export interface PageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+}
+export const PageTitle: React.FC<PageTitleProps> = ({ className, ...otherProps }) => {
+  const { cx, styles } = useStyles();
+  return <h2 className={cx(styles.root, className)} {...otherProps} />;
+};

src/Page/Title/style.ts

@@ -0,0 +1,18 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(
+  ({ css, token }) => {
+    return {
+      root: css`
+        margin: 0;
+
+        font-family: ${token.fontFamily};
+        font-size: 16px;
+        font-weight: ${token.fontWeightStrong};
+        line-height: ${token.lineHeight};
+        color: ${token.colorText};
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);

src/Page/demos/List.tsx

@@ -1,86 +1,41 @@
-import { Space, Table, Tag } from 'antd';
-import type { TableProps } from 'antd';
-import React from 'react';
+/**
+ * compact: true
+ */
 
-interface DataType {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
-  tags: string[];
-}
+/* eslint-disable no-console */
+import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Button, Input, Page, Space } from '@yuntijs/ui';
+import { useEffect, useState } from 'react';
 
-const columns: TableProps<DataType>['columns'] = [
-  {
-    title: '姓名',
-    dataIndex: 'name',
-    key: 'name',
-    render: text => <a>{text}</a>,
-  },
-  {
-    title: '年龄',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: '地址',
-    dataIndex: 'address',
-    key: 'address',
-  },
-  {
-    title: '标签',
-    key: 'tags',
-    dataIndex: 'tags',
-    render: (_, { tags }) => (
-      <>
-        {tags.map(tag => {
-          let color = tag.length > 5 ? 'geekblue' : 'green';
-          if (tag === 'loser') {
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </>
-    ),
-  },
-  {
-    title: '操作',
-    key: 'action',
-    render: (_, record) => (
-      <Space size="middle">
-        <a>Invite {record.name}</a>
-        <a>Delete</a>
-      </Space>
-    ),
-  },
-];
+import { Table } from './Table';
+import { useStyles } from './style';
 
-const data: DataType[] = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sydney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
+const { Title, Content } = Page;
 
-export const List: React.FC = () => <Table columns={columns} dataSource={data} />;
+const ListPageDemo = () => {
+  const { styles } = useStyles();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setLoading(false), 1500);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <Page className={styles.root} loading={loading}>
+      <Title>插件</Title>
+      <Content>
+        <Space size={12}>
+          <Button icon={<PlusOutlined />} type="primary">
+            创建
+          </Button>
+          <Button icon={<ReloadOutlined />}>刷新</Button>
+          <Input.Search placeholder="请输入关键字搜索" />
+        </Space>
+        <Table />
+      </Content>
+    </Page>
+  );
+};
+
+export default ListPageDemo;

src/Page/demos/Table.tsx

@@ -0,0 +1,86 @@
+import { Table as AntTable, Space, Tag } from 'antd';
+import type { TableProps } from 'antd';
+import React from 'react';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+  tags: string[];
+}
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+    render: text => <a>{text}</a>,
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '地址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: '标签',
+    key: 'tags',
+    dataIndex: 'tags',
+    render: (_, { tags }) => (
+      <>
+        {tags.map(tag => {
+          let color = tag.length > 5 ? 'geekblue' : 'green';
+          if (tag === 'loser') {
+            color = 'volcano';
+          }
+          return (
+            <Tag color={color} key={tag}>
+              {tag.toUpperCase()}
+            </Tag>
+          );
+        })}
+      </>
+    ),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render: (_, record) => (
+      <Space size="middle">
+        <a>Invite {record.name}</a>
+        <a>Delete</a>
+      </Space>
+    ),
+  },
+];
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sydney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+];
+
+export const Table: React.FC = () => <AntTable columns={columns} dataSource={data} />;

src/Page/demos/index.tsx

@@ -13,12 +13,12 @@ import {
 import { Button, Input, Page, Space } from '@yuntijs/ui';
 import { useEffect, useState } from 'react';
 
-import { List } from './List';
+import { Table } from './Table';
 import { useStyles } from './style';
 
 const { Breadcrumb, Header, Content } = Page;
 
-const PageDemo = () => {
+const DetailPageDemo = () => {
   const { styles } = useStyles();
   const [loading, setLoading] = useState(true);
 
@@ -89,10 +89,10 @@ const PageDemo = () => {
           <Button icon={<ReloadOutlined />}>刷新</Button>
           <Input.Search placeholder="请输入关键字搜索" />
         </Space>
-        <List />
+        <Table />
       </Content>
     </Page>
   );
 };
 
-export default PageDemo;
+export default DetailPageDemo;

src/Page/index.md

@@ -63,10 +63,14 @@ const IndexPage = () => {
 export default IndexPage;
 ```
 
-### Simple usage
+### Detail page
 
 <code src="./demos/index.tsx"></code>
 
+### List page
+
+<code src="./demos/List.tsx"></code>
+
 ### Loading sample
 
 <code src="./demos/Loading.tsx"></code>

src/Page/index.ts

@@ -3,6 +3,7 @@ import { PageContent } from './Content';
 import { PageFooter } from './Footer';
 import { PageHeader } from './Header';
 import { Page as InternalPage } from './Page';
+import { PageTitle } from './Title';
 
 export type { PageBreadcrumbProps } from './Breadcrumb';
 export type { PageContentProps } from './Content';
@@ -11,14 +12,17 @@ export { HeaderButtonGroup } from './Header/ButtonGroup';
 export type { PageHeaderProps } from './Header';
 export type { HeaderButtonGroupProps } from './Header/ButtonGroup';
 export type { PageProps } from './Page';
+export type { PageTitleProps } from './Title';
 
 export const Page = InternalPage as typeof InternalPage & {
   Breadcrumb: typeof PageBreadcrumb;
+  Title: typeof PageTitle;
   Header: typeof PageHeader;
   Content: typeof PageContent;
   Footer: typeof PageFooter;
 };
 Page.Breadcrumb = PageBreadcrumb;
+Page.Title = PageTitle;
 Page.Header = PageHeader;
 Page.Content = PageContent;
 Page.Footer = PageFooter;