应用列表

src/pages/questionAnswer/list/index.tsx

@@ -1,28 +1,183 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import store from './store';
+import { Card, List, Button, Divider  } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { apis } from '@/apis';
 import './style.less';
+import { PaginationConfig } from 'antd/es/pagination';
 
 const QuestionAnswerList: React.FC = () => {
-    const {
-        state,
-        init,
-        reset
-    } = store;
-    const {
-        pageLoading
-    } = state;
+    const defaultData = [
+        {
+            name: '什么是年夜饭',
+            desc: '年夜饭是中国传统文化非常重要的一部分......'
+        }
+    ]
+    interface Item {
+        name: string,
+        desc: string,
+        id: number,
+        createBy: string,
+    }
+
+    const [listLoading, setListLoading] = React.useState(false);
+    const [list, setList] = React.useState<Item[]>([]);
+    const [page, setPage] = React.useState<any>({
+        pageNumber: 1,
+        pageSize: 4,
+        total: 0
+    });
+
+    const api = {
+        fetchList: async () => {
+            setListLoading(true);
+            try {
+                const res = await apis.fetchApplicationList({
+                    pageSize: page.pageSize,
+                    pageNumber: page.pageNumber
+                })
+                setList(res.data.list);
+                setPage({
+                    pageNumber: page.pageNumber,
+                    pageSize: page.pageSize,
+                    total: res.data.total,
+                });
+            } catch (error) {
+                console.error(error);
+            } finally {
+                setListLoading(false);
+            }
+        }
+    }
+
+    const createApplication = () => {
+        console.log('创建应用');
+    };
+
+    const init = async () => {
+        await api.fetchList();
+    }
 
     React.useEffect(() => {
         init();
-        return () => reset();
-    }, []);
+    }, [page.pageSize, page.pageNumber])
+
+    const detailInfo = () => {
+        console.log('详情');
+    }
+
+    const paginationConfig: PaginationConfig = {
+        // 显示数据总量
+        showTotal: (total: number) => {
+            return `共 ${total} 条`;
+        },
+        // 展示分页条数切换
+        showSizeChanger: true,
+        // 指定每页显示条数
+        pageSizeOptions: ['10', '20', '50', '100'],
+        // 快速跳转至某页
+        showQuickJumper: true,
+        current: page.pageNumber,
+        pageSize: page.pageSize,
+        total: page.total,
+        onChange: (pageNumber, pageSize) => {
+            setPage({
+                pageNumber: pageNumber,
+                pageSize: pageSize,
+                total: page.total,
+            });
+        },
+    };
+
+    const HasList: React.FC = () => {
+        return (
+            <div id="showList" className='questionAnswerList' onClick={detailInfo}>
+                {/* <Button
+                    type="primary"
+                    style={{ width: 130, height: 55, fontSize: 22 }}
+                    icon={<PlusOutlined />}
+                    onClick={createApplication}
+                > 创建 </Button> */}
+                <div className='applicationList'>
+                    <List style={{ height: 400 }}
+                        grid={{
+                            gutter: 16,
+                            xs: 1,
+                            sm: 2,
+                            md: 4,
+                            lg: 4,
+                            xl: 6,
+                            xxl: 2, // 展示的列数
+                        }}
+                        dataSource={list}
+                        renderItem={(item) => (
+                            <List.Item>
+                                <div className='card'>
+                                    <div className='title'>{item.name}</div>
+                                    <Divider plain></Divider>
+                                    <div className='desc'>
+                                        {
+                                            item.desc.length > 35 ? item.desc.substring(0, 35) + '......' : item.desc
+                                        }
+                                    </div>
+                                    <div>
+                                        分类：<Button>所有分类</Button>
+                                        <Button type="primary" style={{ width: 100, height: 40, fontSize: 16 }} onClick={createApplication}>管理应用</Button>
+                                        <Button type="primary" style={{ width: 100, height: 40, fontSize: 16 }} onClick={createApplication}>立即使用</Button>
+                                    </div>
+                                    
+                                </div>
+                            </List.Item>
+                        )}
+                        pagination={paginationConfig} // 分页
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    const NoList: React.FC = () => {
+        return (
+            <div className='questionAnswerList'>
+                <div>
+                    <List style={{ height: 400 }}
+                        grid={{
+                            gutter: 16,
+                            xs: 1,
+                            sm: 2,
+                            md: 4,
+                            lg: 4,
+                            xl: 6,
+                            xxl: 4, // 展示的列数
+                        }}
+
+                        dataSource={defaultData}
+                        renderItem={(item) => (
+                            <List.Item>
+                                <Card title={item.name}>
+                                    {item.desc}
+                                </Card>
+                            </List.Item>
+                        )}
+                    />
+                    <Button
+                        type="primary"
+                        style={{ width: 130, height: 55, fontSize: 22 }}
+                        icon={<PlusOutlined />}
+                        onClick={createApplication}
+                    > 创建 </Button>
+                </div>
+            </div>)
+
+    }
 
     return (
-        <div className='questionAnswerList'>
-            问答应用列表
+        <div>
+            {
+                list.length ? <HasList /> : <NoList />
+            }
         </div>
-    );
+    )
 };
 
 export default observer(QuestionAnswerList);

src/pages/questionAnswer/list/store.ts

@@ -1,47 +0,0 @@
-import { makeAutoObservable } from 'mobx';
-import { apis } from '@/apis';
-import { State, ReadonlyState, StateAction, QuestionAnswerListStore } from './types';
-
-// 定义状态
-const stateGenerator = (): ReadonlyState => ({
-    pageLoading: false,
-});
-
-// 修改状态
-const stateActionsGenerator = (state: State): StateAction => {
-    return {
-        setPageLoading: (loading) => {
-            state.pageLoading = loading;
-        },
-    };
-};
-
-// 使用仓库
-const useQuestionAnswerListStore = (): QuestionAnswerListStore => {
-    const state = makeAutoObservable(stateGenerator());
-    const actions = stateActionsGenerator(state);
-
-    const api = {
-
-    }
-
-    // 初始渲染
-    const init = () => {
-
-    }
-
-    // 状态重置
-    const reset = () => {
-        const initialPageLoading = stateGenerator().pageLoading;
-
-        actions.setPageLoading(initialPageLoading);
-    }
-
-    return {
-        state,
-        init,
-        reset
-    };
-};
-
-export default useQuestionAnswerListStore();

src/pages/questionAnswer/list/style.less

@@ -3,4 +3,23 @@
   height: 100%;
   background: #FFFFFF;
   border-radius: @border-radius-base;
+}
+
+.applicationList {
+  width: 1400px;
+  height: 400px;
+  padding-top: 10px;
+}
+
+.card{
+  border: 1px solid blue;
+  height: 210px;
+}
+
+.desc {
+  height: 35px;
+}
+
+.title {
+  height: 45px;
 }

src/pages/questionAnswer/list/types.ts

@@ -1,19 +0,0 @@
-// 定义状态
-export type State = {
-    pageLoading: boolean,
-};
-
-// 只读状态
-export type ReadonlyState = Readonly<State>;
-
-// 修改状态
-export type StateAction = {
-    setPageLoading: (loading: boolean) => void,
-};
-
-// 仓库类型
-export type QuestionAnswerListStore = {
-    state: ReadonlyState,
-    init: () => void,
-    reset: () => void,
-};