diff --git a/admin/src/pages/course/card-list/_mock.ts b/admin/src/pages/course/card-list/_mock.ts
new file mode 100644
index 0000000..0c828c3
--- /dev/null
+++ b/admin/src/pages/course/card-list/_mock.ts
@@ -0,0 +1,120 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Request, Response } from 'express';
+import type { CardListItemDataType } from './data';
+
+const titles = [
+ 'Alipay',
+ 'Angular',
+ 'Ant Design',
+ 'Ant Design Pro',
+ 'Bootstrap',
+ 'React',
+ 'Vue',
+ 'Webpack',
+];
+const avatars = [
+ 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+ 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+ 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+ 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+ 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+ 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+ 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+ 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+ 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+ '那是一种内在的东西， 他们到达不了，也无法触及的',
+ '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+ '生命就像一盒巧克力，结果往往出人意料',
+ '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+ '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+
+const user = [
+ '付小小',
+ '曲丽丽',
+ '林东东',
+ '周星星',
+ '吴加好',
+ '朱偏右',
+ '鱼酱',
+ '乐哥',
+ '谭小仪',
+ '仲尼',
+];
+
+function fakeList(count: number): CardListItemDataType[] {
+ const list = [];
+ for (let i = 0; i < count; i += 1) {
+ list.push({
+ id: `fake-list-${i}`,
+ owner: user[i % 10],
+ title: titles[i % 8],
+ avatar: avatars[i % 8],
+ cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+ status: ['active', 'exception', 'normal'][i % 3] as
+ | 'normal'
+ | 'exception'
+ | 'active'
+ | 'success',
+ percent: Math.ceil(Math.random() * 50) + 50,
+ logo: avatars[i % 8],
+ href: 'https://ant.design',
+ updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+ createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+ subDescription: desc[i % 5],
+ description:
+ '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+ activeUser: Math.ceil(Math.random() * 100000) + 100000,
+ newUser: Math.ceil(Math.random() * 1000) + 1000,
+ star: Math.ceil(Math.random() * 100) + 100,
+ like: Math.ceil(Math.random() * 100) + 100,
+ message: Math.ceil(Math.random() * 10) + 10,
+ content:
+ '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+ members: [
+ {
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+ name: '曲丽丽',
+ id: 'member1',
+ },
+ {
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+ name: '王昭君',
+ id: 'member2',
+ },
+ {
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+ name: '董娜娜',
+ id: 'member3',
+ },
+ ],
+ });
+ }
+
+ return list;
+}
+
+function getFakeList(req: Request, res: Response) {
+ const params = req.query as any;
+
+ const count = Number(params.count) * 1 || 20;
+
+ const result = fakeList(count);
+ return res.json({
+ data: {
+ list: result,
+ },
+ });
+}
+
+export default {
+ 'GET /api/card_fake_list': getFakeList,
+};
diff --git a/admin/src/pages/course/card-list/index.tsx b/admin/src/pages/course/card-list/index.tsx
new file mode 100644
index 0000000..f321ddb
--- /dev/null
+++ b/admin/src/pages/course/card-list/index.tsx
@@ -0,0 +1,104 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Card, List, Typography } from 'antd';
+import { PageContainer } from '@ant-design/pro-layout';
+import { useRequest } from 'umi';
+import { queryFakeList } from './service';
+import type { CardListItemDataType } from './data';
+import styles from './style.less';
+
+const { Paragraph } = Typography;
+
+const CardList = () => {
+ const { data, loading } = useRequest(() => {
+ return queryFakeList({
+ count: 8,
+ });
+ });
+
+ const list = data?.list || [];
+
+ const content = (
+
+
+ 段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，
+ 提供跨越设计与开发的体验解决方案。
+
+
+
+
+
+
>
+ rowKey="id"
+ loading={loading}
+ grid={{
+ gutter: 16,
+ xs: 1,
+ sm: 2,
+ md: 3,
+ lg: 3,
+ xl: 4,
+ xxl: 4,
+ }}
+ dataSource={[nullData, ...list]}
+ renderItem={(item) => {
+ if (item && item.id) {
+ return (
+
+ 操作一, 操作二]}
+ >
+ }
+ title={{item.title}}
+ description={
+
+ {item.description}
+
+ }
+ />
+
+
+ );
+ }
+ return (
+
+
+
+ );
+ }}
+ />
+ 
{' '}
+ 快速开始
+ 
{' '}
+ 产品简介
+ 
{' '}
+ 产品文档
+