feat: 新增项目、页面和组件搜索刷新功能，修复新建和分页等问题

JackySoft · Aug 15, 2024 · b54b7ad · b54b7ad
1 parent 6f36fc2
commit b54b7ad
Show file tree

Hide file tree

Showing 9 changed files with 422 additions and 262 deletions.
diff --git a/packages/editor/src/api/lib.ts b/packages/editor/src/api/lib.ts
@@ -33,7 +33,7 @@ export type ILibPublish = {
   release_hash: string;
 };
 // 获取组件列表
-export const getLibList = (params: PageParams & { keyword?: string }) => {
+export const getLibList = (params: PageParams) => {
   return request.get('/lib/list', params, { showLoading: false });
 };
 

diff --git a/packages/editor/src/api/types/index.ts b/packages/editor/src/api/types/index.ts
@@ -3,6 +3,7 @@
  */
 
 export interface PageParams {
+  keyword?: string;
   pageNum: number;
   pageSize?: number;
 }
@@ -123,6 +124,7 @@ export namespace Menu {
 }
 
 export interface ProjectListParams {
+  keyword?: string;
   pageNum: number;
   pageSize?: number;
 }

diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx
@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import styles from './index.module.less';
+import { Button, Form, Input, Space } from 'antd';
+
+const SearchBar = memo((props: any) => {
+  const { form, children, submit, reset } = props;
+
+  return (
+    <>
+      <div className={styles.searchBar}>
+        <div className={styles.searchBarForm}>
+          <Form form={form} layout="inline" initialValues={props.initialValues}>
+            <Form.Item name="keyword" style={{ width: 350 }}>
+              <Input placeholder="请输入搜索名称" onPressEnter={submit} />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button type="primary" onClick={submit} size="middle">
+                  搜索
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+        <div className={styles.searchBarBtns}>{children}</div>
+      </div>
+    </>
+  );
+});
+
+export default SearchBar;
diff --git a/packages/editor/src/components/Searchbar/index.module.less b/packages/editor/src/components/Searchbar/index.module.less
@@ -0,0 +1,8 @@
+.searchBar {
+  padding: 0 10px 20px 10px;
+  border-radius: 5px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -20,8 +20,6 @@ const Header = memo(() => {
   const [loading, setLoading] = useState(false);
   const [navKey, setNavKey] = useState(['projects']);
   const [pageFrom, setPageFrom] = useState('projects');
-  const creatPageRef = useRef<{ open: () => void }>();
-  const createLibRef = useRef<{ open: () => void }>();
   const navigate = useNavigate();
   const { id } = useParams();
   const location = useLocation();
@@ -84,16 +82,6 @@ const Header = memo(() => {
   const handleTab: MenuProps['onClick'] = (e) => {
     navigate(`/${e.key}`);
   };
-  // 新建页面
-  const handleCreate = (type: 'project' | 'page' | 'lib') => {
-    if (type === 'project') {
-      navigate(`/project/0/config`);
-    } else if (type === 'page') {
-      creatPageRef.current?.open();
-    } else {
-      createLibRef.current?.open();
-    }
-  };
 
   // 将当前页面生成图片，并上传到服务器
   const createPreviewImg = async () => {
@@ -240,30 +228,6 @@ const Header = memo(() => {
           </div>
         )}
 
-        {/* 新建项目 */}
-        {pageFrom === 'projects' && (
-          <a onClick={() => handleCreate('project')}>
-            <PlusOutlined style={{ marginRight: 5 }} />
-            新建项目
-          </a>
-        )}
-
-        {/* 新建页面 */}
-        {pageFrom === 'pages' && (
-          <a onClick={() => handleCreate('page')}>
-            <PlusOutlined style={{ marginRight: 5 }} />
-            新建页面
-          </a>
-        )}
-
-        {/* 新建组件 */}
-        {pageFrom === 'libs' && (
-          <a onClick={() => handleCreate('lib')}>
-            <PlusOutlined style={{ marginRight: 5 }} />
-            新建组件
-          </a>
-        )}
-
         {/* 用户信息&发布&发布记录 */}
         <div className={styles.user}>
           {isEditPage && mode === 'edit' && (
@@ -310,11 +274,6 @@ const Header = memo(() => {
             <span style={{ marginLeft: 10 }}>{`${userInfo?.userName}` || '开发者'}</span>
           </div>
         </div>
-
-        {/* 新建页面 */}
-        {pageFrom === 'pages' && <CreatePage createRef={creatPageRef} />}
-        {/* 新建组件 */}
-        {pageFrom === 'libs' && <CreateLib createRef={createLibRef} />}
       </Layout.Header>
     </>
   );

diff --git a/packages/editor/src/pages/home/LibList.tsx b/packages/editor/src/pages/home/LibList.tsx
@@ -1,34 +1,41 @@
-import { Button, Input, Skeleton, Space, Pagination } from 'antd';
-import { useEffect, useState } from 'react';
-import { UserOutlined, CodeOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Skeleton, Space, Pagination, Form } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { UserOutlined, CodeOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { getLibList } from '@/api/lib';
 import { usePageStore } from '@/stores/pageStore';
 import { message } from '@/utils/AntdGlobal';
 import style from './index.module.less';
+import SearchBar from '@/components/Searchbar/SearchBar';
+import CreateLib from '@/layout/components/Header/CreateLib';
 
 /**
  * 组件商店
  */
 export default () => {
+  const [form] = Form.useForm();
   const [list, setList] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [pageNum, setPageNum] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [total, setTotal] = useState(0);
+  const [total, setTotal] = useState<number>(0);
+  const [current, setCurrent] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(20);
   const { userInfo, isUpdateList } = usePageStore((state) => ({ userInfo: state.userInfo, isUpdateList: state.isUpdateList }));
-
+  const createLibRef = useRef<{ open: () => void }>();
   const navigate = useNavigate();
 
   useEffect(() => {
-    getList(1, '');
-  }, [isUpdateList]);
+    getList();
+  }, []);
 
   // 加载列表
-  const getList = async (page: number, keyword?: string) => {
+  const getList = async (pageNum: number = current, size: number = pageSize) => {
     try {
       setLoading(true);
-      const { list, total } = await getLibList({ pageNum: page, pageSize, keyword });
+      const { list, total } = await getLibList({
+        pageNum,
+        pageSize: size,
+        keyword: form.getFieldValue('keyword'),
+      });
       setList(list);
       setTotal(total);
       setLoading(false);
@@ -37,16 +44,17 @@ export default () => {
     }
   };
 
-  // 搜索
-  const onSearch = (value: string) => {
-    setPageNum(1);
-    getList(1, value);
+  // 分页事件
+  const handleChange = (page: number, pageSize?: number) => {
+    setCurrent(page);
+    setPageSize(pageSize || 20);
+    getList(page, pageSize || 20);
   };
 
-  // 分页事件
-  const handleChange = (page: number) => {
-    setPageNum(page);
-    getList(page);
+  const handlePageSizeChange = (current: number, size: number) => {
+    setCurrent(1);
+    setPageSize(size);
+    getList(1, size);
   };
 
   // 进入开发页面
@@ -59,46 +67,75 @@ export default () => {
     }
   };
 
+  const handleSearchSubmit = () => {
+    setCurrent(1);
+    getList(1, pageSize);
+  };
+
+  // 重置或者刷新页面
+  const handleSearchReset = () => {
+    form.resetFields();
+    setCurrent(1);
+    getList(1, pageSize);
+  };
+
+  // 新建组件
+  const handleCreate = () => {
+    createLibRef.current?.open();
+  };
+
   return (
     <div className={style.libWrap}>
-      <div className={style.search}>
+      <SearchBar form={form} submit={handleSearchSubmit} reset={handleSearchReset}>
+        <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={handleCreate}>
+          新建组件
+        </Button>
+        <Button shape="circle" icon={<RedoOutlined />} onClick={handleSearchReset}></Button>
+      </SearchBar>
+      {/* <div className={style.search}>
         <Input.Search placeholder="输入组件名称" allowClear enterButton="Search" style={{ width: 500 }} size="large" onSearch={onSearch} />
-      </div>
-      <Skeleton loading={loading} active paragraph={{ rows: 3 }}>
-        {list.map((item) => {
-          return (
-            <div className={style.item} key={item.id}>
-              <div className={style.itemInfo}>
-                <h2>{item.name}</h2>
-                <p className={style.remark}>{item.description || '暂无描述'}</p>
-                <p>
-                  <UserOutlined style={{ fontSize: 14, marginRight: 5 }} />
-                  {item.user_name} {item.created_at}
-                </p>
+      </div> */}
+      <div className={style.libList}>
+        <Skeleton loading={loading} active paragraph={{ rows: 3 }}>
+          {list.map((item) => {
+            return (
+              <div className={style.item} key={item.id}>
+                <div className={style.itemInfo}>
+                  <h2>{item.name}</h2>
+                  <p className={style.remark}>{item.description || '暂无描述'}</p>
+                  <p>
+                    <UserOutlined style={{ fontSize: 14, marginRight: 5 }} />
+                    {item.user_name} {item.created_at}
+                  </p>
+                </div>
+                <Space>
+                  {userInfo.userId === item.user_id ? (
+                    <Button type="primary" icon={<CodeOutlined />} onClick={() => handleEdit('edit', item.id)}>
+                      开发
+                    </Button>
+                  ) : (
+                    <Button type="primary" icon={<PlusOutlined />} onClick={() => handleEdit('install', item.id)}>
+                      安装
+                    </Button>
+                  )}
+                </Space>
               </div>
-              <Space>
-                {userInfo.userId === item.user_id ? (
-                  <Button type="primary" icon={<CodeOutlined />} onClick={() => handleEdit('edit', item.id)}>
-                    开发
-                  </Button>
-                ) : (
-                  <Button type="primary" icon={<PlusOutlined />} onClick={() => handleEdit('install', item.id)}>
-                    安装
-                  </Button>
-                )}
-              </Space>
-            </div>
-          );
-        })}
-      </Skeleton>
-      <Pagination
-        style={{ textAlign: 'right', marginTop: 16 }}
-        total={total}
-        current={pageNum}
-        pageSize={12}
-        showTotal={(total) => `总共 ${total} 条`}
-        onChange={handleChange}
-      />
+            );
+          })}
+        </Skeleton>
+      </div>
+      <div className={style.paginationContainer}>
+        <Pagination
+          total={total}
+          current={current}
+          pageSize={pageSize}
+          showTotal={(total) => `总共 ${total} 条`}
+          onChange={handleChange}
+          showSizeChanger
+          onShowSizeChange={handlePageSizeChange}
+        />
+      </div>
+      <CreateLib createRef={createLibRef} />
     </div>
   );
 };