style: 优化图片列表样式

JackySoft · Nov 2, 2024 · 41f15bc · 41f15bc
1 parent 5cae8df
commit 41f15bc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/packages/editor/src/pages/home/cloud/ImgCloud.tsx b/packages/editor/src/pages/home/cloud/ImgCloud.tsx
@@ -19,16 +19,16 @@ export default function ImgCloud() {
   >([]);
 
   useEffect(() => {
-    getList();
-  }, []);
+    getList(current);
+  }, [current]);
 
   // 加载页面列表
-  const getList = async (pageNum: number = current, size: number = pageSize) => {
+  const getList = async (pageNum: number = current) => {
     setLoading(true);
     try {
       const res = await getImgList({
         pageNum,
-        pageSize: size,
+        pageSize,
       });
       setTotal(res.total || 0);
       setList(res.list || []);
@@ -87,9 +87,9 @@ export default function ImgCloud() {
       </div>
       <Spin spinning={loading} size="large">
         <div className={styles.imgList}>
-          {list.map((item, index) => {
+          {list.map((item) => {
             return (
-              <div className={styles.imgCard} key={index}>
+              <div className={styles.imgCard} key={item.id}>
                 <div className={styles.imgRound}>
                   <div className={styles.icons}>
                     <Space>
@@ -134,7 +134,7 @@ export default function ImgCloud() {
                       </Tooltip>
                     </Space>
                   </div>
-                  <Image src={item.type.startsWith('image') ? item.url : 'https://marsview.cdn.bcebos.com/js.png'} width={100} />
+                  <Image src={item.type.startsWith('image') ? item.url : 'https://marsview.cdn.bcebos.com/js.png'} height={'100%'} />
                 </div>
                 <div className={styles.desc}>{(item.size / 1024).toFixed(2)} KB</div>
               </div>

diff --git a/packages/editor/src/pages/home/cloud/index.module.less b/packages/editor/src/pages/home/cloud/index.module.less
@@ -11,8 +11,8 @@
   gap: 20px;
 }
 .imgList {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 30px;
   .imgCard {
     position: relative;
@@ -22,15 +22,14 @@
       color: #999;
     }
     .imgRound {
-      width: 142px;
-      height: 142px;
+      height: 150px;
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 10px;
       overflow: hidden;
       border: 1px solid #eee;
-      padding: 20px;
+      padding: 15px;
       margin-bottom: 5px;
       cursor: pointer;
       &:hover {