feat(scene): 优化卡片样式、添加编辑和删除功能

src/pages/scene/cardWrap.tsx

@@ -1,16 +1,45 @@
 import React from 'react';
 import styles from './style/cardWrap.module.less';
 import { getImageUrl } from '@/utils/pubUse';
-import { Image } from '@arco-design/web-react';
+import { Image, Popconfirm } from '@arco-design/web-react';
 import { IconEdit, IconDelete } from '@arco-design/web-react/icon';
 
 interface CardWrapProps {
   item: any;
+  onEdit?: (item: any, e: React.MouseEvent) => void;
+  onDelete?: (item: any, e: React.MouseEvent) => void;
+  onClick?: (item: any, e: React.MouseEvent) => void;
 }
 
-const CardWrap: React.FC<CardWrapProps> = ({ item }) => {
+const CardWrap: React.FC<CardWrapProps> = ({ item, onEdit, onDelete, onClick }) => {
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onEdit) {
+      onEdit(item, e);
+    }
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onClick) {
+      onClick(item, e);
+    }
+  };
+
+  const onOk = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    // 这里可以添加确认删除的逻辑
+    if (onDelete) {
+      onDelete(item, e);
+    }
+  };
+
   return (
-    <div className={styles['card-wrap']}>
+    <div className={styles['card-wrap']} onClick={handleClick}>
       <div className={styles['card-header']}>
         <Image
           preview={false}
@@ -29,8 +58,19 @@ const CardWrap: React.FC<CardWrapProps> = ({ item }) => {
           <span>{item.createUser}</span>
         </div>
         <div className={styles['operation']}>
-          <IconEdit />
-          <IconDelete />
+          <span className={styles['icon-hover']} onClick={handleEdit}>
+            <IconEdit />
+          </span>
+          <Popconfirm
+            trigger="click"
+            title="确认删除该工程?"
+            onOk={(e: React.MouseEvent) => onOk(e)}
+            onCancel={(e: React.MouseEvent) => e.stopPropagation()}
+          >
+            <span className={styles['icon-hover']} onClick={handleDelete}>
+              <IconDelete />
+            </span>
+          </Popconfirm>
         </div>
       </div>
     </div>

src/pages/scene/engineering.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styles from './style/engineering.module.less';
-import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react';
+import { Input, Grid, Card, Result, Pagination, Message } from '@arco-design/web-react';
 import { IconPlus, IconApps } from '@arco-design/web-react/icon';
 import { openWindow, OpenWindowOptions } from '@/utils/common';
 import { getPublicSceneList, getMySceneList } from '@/api/scene';
@@ -15,17 +15,21 @@ interface EngineeringProps {
   showAdd?: boolean,
 }
 
+const DEFAULT_PAGE_SIZE = 11;
 
 const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) => {
   const [searchValue, setSearchValue] = useState<string>('');
   const [sceneData, setSceneData] = useState({
-    list: []
+    list: [],
+    totalCount: 0
   });
-  const [count, setCount] = useState<number>(12);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
 
   const onSearchHandle = (value: string) => {
-    if (!value) return;
-    console.log('状态值:', searchValue);
+    // 搜索时重置到第一页
+    setCurrentPage(1);
+    fetchData(1, pageSize, value);
   };
 
   const handleChange = (value: string) => {
@@ -42,37 +46,57 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
     openWindow(url, params);
   };
 
+  const handleEdit = (item, e) => {
+    e.stopPropagation();
+    Message.info(`编辑项目: ${item.name}`);
+    // TODO 在这里添加编辑逻辑
+  };
 
-  useEffect(() => {
-    const fetchData = async () => {
-      console.log('dataType:', dataType);
-      // currPage?: number   name?: string   pageSize?: number
-      // getPublicSceneList()
-      // getMySceneList()
-      const functions = {
-        public: getPublicSceneList,
-        my: getMySceneList
-      };
-      const params = {
-        currPage: 1,
-        pageSize: 11,
-        name: ''
-      };
-      const res: any = await functions[dataType](params);
-      if (res.code === 200) {
-        console.log('res:', res);
-        const { data } = res;
-        setSceneData(data);
-        setCount(data.totalCount);
-      }
+  const handleDelete = (item, e) => {
+    e.stopPropagation();
+    // TODO 在这里添加删除逻辑
+    console.log("删除");
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchData(page, pageSize, searchValue);
+  };
+
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1); // 重置到第一页
+    fetchData(1, size, searchValue);
+  };
+
+  const fetchData = async (page: number = currentPage, size: number = pageSize, search: string = searchValue) => {
+    const functions = {
+      public: getPublicSceneList,
+      my: getMySceneList
+    };
+    const params = {
+      currPage: page,
+      pageSize: size,
+      name: search
     };
+    const res: any = await functions[dataType](params);
+    if (res.code === 200) {
+      const { data } = res;
+      setSceneData({
+        list: data.list || [],
+        totalCount: data.totalCount || 0
+      });
+    }
+  };
 
-    fetchData();
+  useEffect(() => {
+    setCurrentPage(1);
+    fetchData(1, pageSize, searchValue);
   }, [dataType]);
 
   return (
     <>
-      <div className={styles["engineering-container"]}>
+      <div className={styles['engineering-container']}>
         {/*搜索*/}
         <Row>
           <Col span={24}>
@@ -100,7 +124,7 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
             {/*新建工程按钮*/}
             {showAdd && (
               <Card
-                className={styles["card-style"]}
+                className={styles['card-style']}
               >
                 <Result
                   status="info"
@@ -120,15 +144,28 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
               lg={6}
               xl={6}
               xxl={6}>
-              <Card className={styles["card-style"]} hoverable onClick={() => openEngineHandle(item)}>
-                <CardWrap item={item}></CardWrap>
+              <Card className={styles['card-style']} hoverable>
+                <CardWrap
+                  item={item}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                  onClick={openEngineHandle}
+                ></CardWrap>
               </Card>
             </Col>
           ))}
         </Row>
         <Row>
           <Col>
-            <Pagination style={{ float: 'right' }} total={count} />
+            <Pagination
+              style={{ float: 'right' }}
+              total={sceneData.totalCount}
+              current={currentPage}
+              pageSize={pageSize}
+              showTotal
+              onChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+            />
           </Col>
         </Row>
       </div>

src/pages/scene/style/cardWrap.module.less

@@ -24,12 +24,28 @@
   .card-footer {
     display: flex;
     justify-content: space-between;
-    padding: 0 0 15px 12px;
+    padding: 0 12px 15px 12px;
 
     .operation {
-      svg {
-        margin-right: 15px;
-        font-size: 18px;
+      display: flex;
+      align-items: center;
+
+      .icon-hover {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        transition: all 0.1s;
+
+        svg {
+          font-size: 18px;
+        }
+      }
+
+      .icon-hover:hover {
+        background-color: rgb(var(--gray-2));
       }
     }
   }