fix: 修复分页显示问题

JackySoft · Aug 28, 2024 · 245b9f3 · 245b9f3
1 parent f7a69be
commit 245b9f3
Show file tree

Hide file tree

Showing 7 changed files with 636 additions and 392 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@ant-design/plots": "^1.2.6",
     "@types/qs": "^6.9.15",
     "ahooks": "^3.7.8",
-    "antd": "^5.17.2",
+    "antd": "^5.20.3",
     "axios": "^0.27.2",
     "less": "^4.2.0",
     "lodash-es": "^4.17.21",
@@ -65,8 +65,8 @@
     "react-router-dom": "^6.21.2",
     "standard-version": "^9.5.0",
     "vite": "^5.0.8",
-    "vite-plugin-svgr": "^4.2.0",
     "vite-plugin-externals-new": "^1.5.5",
+    "vite-plugin-svgr": "^4.2.0",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

diff --git a/packages/admin/src/pages/console/index.tsx b/packages/admin/src/pages/console/index.tsx
@@ -80,11 +80,12 @@ function Console() {
         </Spin>
         {total > 0 ? (
           <Pagination
-            style={{ textAlign: 'right', marginTop: 16 }}
+            style={{ marginTop: 16 }}
             total={total}
             current={current}
             pageSize={12}
             showTotal={(total) => `总共 ${total} 条`}
+            align="end"
             onChange={handleChange}
           />
         ) : (

diff --git a/packages/editor/src/pages/home/LibList.tsx b/packages/editor/src/pages/home/LibList.tsx
@@ -1,4 +1,4 @@
-import { Button, Skeleton, Space, Pagination, Form } from 'antd';
+import { Button, Skeleton, Space, Pagination, Form, Empty } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { UserOutlined, CodeOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
@@ -101,24 +101,34 @@ export default () => {
 
   return (
     <div className={style.libWrap}>
-      <SearchBar form={form} from="组件" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
-      <div className={style.libList}>
-        <Skeleton loading={loading} active paragraph={{ rows: 3 }}>
-          {list.map((item) => (
-            <LibItem item={item} key={item.id} />
-          ))}
-        </Skeleton>
-      </div>
-      <div className={style.paginationContainer}>
-        <Pagination
-          total={total}
-          current={current}
-          pageSize={pageSize}
-          showTotal={(total) => `总共 ${total} 条`}
-          onChange={handleChange}
-          showSizeChanger
-        />
-      </div>
+      {total > 0 ? (
+        <>
+          <SearchBar form={form} from="组件" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
+          <div className={style.libList}>
+            <Skeleton loading={loading} active paragraph={{ rows: 3 }}>
+              {list.map((item) => (
+                <LibItem item={item} key={item.id} />
+              ))}
+            </Skeleton>
+          </div>
+          <Pagination
+            total={total}
+            current={current}
+            pageSize={pageSize}
+            showSizeChanger
+            showTotal={(total) => `总共 ${total} 条`}
+            align="end"
+            style={{ marginTop: 20 }}
+            onChange={handleChange}
+          />
+        </>
+      ) : (
+        <Empty style={{ marginTop: 100 }}>
+          <Button type="dashed" icon={<PlusOutlined />} onClick={handleCreate}>
+            新建组件
+          </Button>
+        </Empty>
+      )}
       <CreateLib createRef={createLibRef} update={() => getList(1, pageSize)} />
     </div>
   );

diff --git a/packages/editor/src/pages/home/PageList.tsx b/packages/editor/src/pages/home/PageList.tsx
@@ -167,53 +167,52 @@ export default function Index() {
   return (
     <>
       <Layout.Content className={styles.pageList}>
-        <SearchBar form={form} from="页面" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
-        <div className={styles.pagesContent}>
-          <Spin spinning={loading} size="large">
-            <Row gutter={[20, 20]}>
-              {content.map((item: PageItem, index: number) => {
-                return (
-                  <Col span={6} key={item.id || index}>
-                    <SectionItem item={item} />
-                  </Col>
-                );
-              })}
-            </Row>
-          </Spin>
-          <Image
-            style={{ display: 'none' }}
-            preview={{
-              visible: showPreview,
-              src: previewUrl,
-              onVisibleChange: (value) => {
-                setShowPreview(value);
-              },
-            }}
-          />
-        </div>
-
-        <div className={styles.paginationContainer}>
-          {total > 0 ? (
+        {total > 0 ? (
+          <>
+            <SearchBar form={form} from="页面" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
+            <div className={styles.pagesContent}>
+              <Spin spinning={loading} size="large">
+                <Row gutter={[20, 20]}>
+                  {content.map((item: PageItem, index: number) => {
+                    return (
+                      <Col span={6} key={item.id || index}>
+                        <SectionItem item={item} />
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </Spin>
+              <Image
+                style={{ display: 'none' }}
+                preview={{
+                  visible: showPreview,
+                  src: previewUrl,
+                  onVisibleChange: (value) => {
+                    setShowPreview(value);
+                  },
+                }}
+              />
+            </div>
             <Pagination
-              style={{ textAlign: 'right' }}
               total={total}
               current={current}
               showSizeChanger
               pageSize={pageSize}
               pageSizeOptions={['12', '16', '20', '50']}
               showTotal={(total) => `总共 ${total} 条`}
+              align="end"
               onChange={handleChange}
             />
-          ) : (
-            !loading && (
-              <Empty style={{ marginTop: 100 }}>
-                <Button type="dashed" icon={<PlusOutlined />} onClick={handleCreate}>
-                  创建页面
-                </Button>
-              </Empty>
-            )
-          )}
-        </div>
+          </>
+        ) : (
+          !loading && (
+            <Empty style={{ marginTop: 100 }}>
+              <Button type="dashed" icon={<PlusOutlined />} onClick={handleCreate}>
+                创建页面
+              </Button>
+            </Empty>
+          )
+        )}
         {/* 新建页面 */}
         <CreatePage title="创建页面" createRef={creatPageRef} update={() => getList(1, pageSize)} />
       </Layout.Content>

diff --git a/packages/editor/src/pages/home/ProjectList.tsx b/packages/editor/src/pages/home/ProjectList.tsx
@@ -166,41 +166,42 @@ export default function Index() {
   return (
     <>
       <Layout.Content className={styles.project}>
-        <SearchBar form={form} from="项目" submit={handleSearch} refresh={getList} onCreate={() => navigate('/project/0/config')} />
-        <div className={styles.projectList}>
-          <Spin spinning={loading} size="large">
-            <Row gutter={[20, 20]}>
-              {projectList.map((item: Project.ProjectItem, index) => {
-                return (
-                  <Col span={6} key={item.id || index}>
-                    <CardItem item={item} isAuth={item.id ? true : false} />
-                  </Col>
-                );
-              })}
-            </Row>
-          </Spin>
-        </div>
-        <div className={styles.paginationContainer}>
-          {total > 0 ? (
+        {total > 0 ? (
+          <>
+            <SearchBar form={form} from="项目" submit={handleSearch} refresh={getList} onCreate={() => navigate('/project/0/config')} />
+            <div className={styles.projectList}>
+              <Spin spinning={loading} size="large">
+                <Row gutter={[20, 20]}>
+                  {projectList.map((item: Project.ProjectItem, index) => {
+                    return (
+                      <Col span={6} key={item.id || index}>
+                        <CardItem item={item} isAuth={item.id ? true : false} />
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </Spin>
+            </div>
             <Pagination
               total={total}
               current={current}
               pageSize={pageSize}
+              showSizeChanger
               pageSizeOptions={['12', '16', '20', '50']}
               showTotal={(total) => `总共 ${total} 条`}
+              align="end"
               onChange={handleChange}
-              showSizeChanger
             />
-          ) : (
-            !loading && (
-              <Empty style={{ marginTop: 100 }}>
-                <Button type="dashed" icon={<PlusOutlined />} onClick={() => navigate('/project/0/config')}>
-                  新建项目
-                </Button>
-              </Empty>
-            )
-          )}
-        </div>
+          </>
+        ) : (
+          !loading && (
+            <Empty style={{ marginTop: 100 }}>
+              <Button type="dashed" icon={<PlusOutlined />} onClick={() => navigate('/project/0/config')}>
+                新建项目
+              </Button>
+            </Empty>
+          )
+        )}
       </Layout.Content>
     </>
   );

diff --git a/packages/editor/src/pages/home/index.module.less b/packages/editor/src/pages/home/index.module.less
@@ -8,14 +8,6 @@
   .pagesContent {
     flex: 1;
   }
-  .paginationContainer {
-    align-self: flex-end;
-    padding: 20px 0;
-    bottom: 16px;
-    right: 16px;
-    width: 100%; /* 使分页栏与内容对齐 */
-    text-align: right;
-  }
 }
 .card {
   border: 1px solid #f0f0f0;