Merge pull request #14 from waiterxiaoyy/yydev_global-local-items

feat: 增加查看个人和全部数据的按钮
JackySoft · Aug 16, 2024 · 960a282 · 960a282
2 parents 1c97a6b + fbdb3f5
commit 960a282
Show file tree

Hide file tree

Showing 7 changed files with 289 additions and 136 deletions.
diff --git a/packages/editor/src/api/types/index.ts b/packages/editor/src/api/types/index.ts
@@ -6,6 +6,7 @@ export interface PageParams {
   keyword?: string;
   pageNum: number;
   pageSize?: number;
+  type?: number;
 }
 
 export interface PageItem {
@@ -74,7 +75,7 @@ export namespace Project {
     remark: string;
     logo: string;
     user_name: string;
-    user_id: string;
+    user_id: number;
     updated_at: string;
     created_at: string;
     members?: Array<{
@@ -127,6 +128,7 @@ export interface ProjectListParams {
   keyword?: string;
   pageNum: number;
   pageSize?: number;
+  type?: number;
 }
 
 export interface ProjectCreateParams {

diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx
@@ -3,12 +3,16 @@ import { Button, Form, Input, Space } from 'antd';
 import styles from './index.module.less';
 
 const SearchBar = memo((props: any) => {
-  const { form, from, children, submit } = props;
+  const { form, from, rightChildren, submit } = props;
 
   return (
     <>
       <div className={styles.searchBar}>
         <div className={styles.searchBarForm}>
+          {
+            // 左侧的子组件 控制展示全部还是当前用户数据
+            props.leftChildren ? <div className={styles.leftChildren}>{props.leftChildren}</div> : null
+          }
           <Form form={form} layout="inline">
             <Form.Item name="keyword" style={{ width: 200 }}>
               <Input placeholder={`请输入${from}名称`} onPressEnter={submit} />
@@ -22,7 +26,7 @@ const SearchBar = memo((props: any) => {
             </Form.Item>
           </Form>
         </div>
-        <div className={styles.searchBarBtns}>{children}</div>
+        <div className={styles.searchBarBtns}>{rightChildren}</div>
       </div>
     </>
   );

diff --git a/packages/editor/src/components/Searchbar/index.module.less b/packages/editor/src/components/Searchbar/index.module.less
@@ -6,3 +6,8 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.searchBarForm {
+  display: flex;
+  align-items: center;
+}
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, Radio, Badge } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { UserOutlined, CodeOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
@@ -8,6 +8,7 @@ import { message } from '@/utils/AntdGlobal';
 import style from './index.module.less';
 import SearchBar from '@/components/Searchbar/SearchBar';
 import CreateLib from '@/layout/components/Header/CreateLib';
+import { RadioChangeEvent } from 'antd/lib';
 
 /**
  * 组件商店
@@ -23,9 +24,16 @@ export default () => {
   const createLibRef = useRef<{ open: () => void }>();
   const navigate = useNavigate();
 
+  // 展示可见items 1 个人 2 全部
+  const [visitLocalGlobal, setVisitLocalGlobal] = useState('1');
+  const optionsLocalGlobal = [
+    { label: '个人', value: '1' },
+    { label: '全部', value: '2' },
+  ];
+
   useEffect(() => {
     getList(current, pageSize);
-  }, [current, pageSize]);
+  }, [current, pageSize, visitLocalGlobal]);
 
   // 加载列表
   const getList = async (pageNum: number = current, size: number = pageSize) => {
@@ -35,6 +43,7 @@ export default () => {
         pageNum,
         pageSize: size,
         keyword: form.getFieldValue('keyword'),
+        type: Number(visitLocalGlobal),
       });
       setList(list);
       setTotal(total);
@@ -60,6 +69,7 @@ export default () => {
     }
   };
 
+  // 搜索
   const handleSearch = () => {
     setCurrent(1);
     getList(1, pageSize);
@@ -70,41 +80,73 @@ export default () => {
     createLibRef.current?.open();
   };
 
+  // 切换展示个人还是全部
+  const handleVisistLocalGlobalChange = ({ target: { value } }: RadioChangeEvent) => {
+    setVisitLocalGlobal(value);
+  };
+
+  const LibItem = ({ item }: { item: any }) => {
+    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>
+    );
+  };
+
   return (
     <div className={style.libWrap}>
-      <SearchBar form={form} from="组件" submit={handleSearch}>
-        <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={handleCreate}>
-          新建组件
-        </Button>
-        <Button shape="circle" icon={<RedoOutlined />} onClick={() => getList()}></Button>
-      </SearchBar>
+      <SearchBar
+        form={form}
+        from="组件"
+        submit={handleSearch}
+        leftChildren={
+          <Radio.Group
+            style={{ marginRight: '20px' }}
+            options={optionsLocalGlobal}
+            onChange={handleVisistLocalGlobalChange}
+            value={visitLocalGlobal}
+            optionType="button"
+            buttonStyle="solid"
+          />
+        }
+        rightChildren={
+          <>
+            <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={handleCreate}>
+              新建组件
+            </Button>
+            <Button shape="circle" icon={<RedoOutlined />} onClick={() => getList()}></Button>
+          </>
+        }
+      ></SearchBar>
       <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>
-            );
-          })}
+          {list.map((item) =>
+            visitLocalGlobal === '2' && item.user_id === userInfo.userId ? (
+              <Badge.Ribbon text="Me" placement="end">
+                <LibItem item={item} />
+              </Badge.Ribbon>
+            ) : (
+              <LibItem item={item} />
+            ),
+          )}
         </Skeleton>
       </div>
       <div className={style.paginationContainer}>