Merge branch 'feat-20220801' into 'staging'

cn-Feat 20220801

See merge request !89

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-15 17:10:49
+ * @LastEditTime: 2022-09-01 15:30:28
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -45,6 +45,9 @@ const RESTAPI = {
   API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`,  // 查询任务概览
   API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`,  // 获取流算子列表，可用于模糊查询，返回所有版本流算子
   API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`,  // 保存批算子
+  API_PROJECT_USERS_LIST:`${BACKEND_API_URI_PREFIX}/cpp/project/listusers`,  // 获取项目成员
+  API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`,  // 添加项目成员
+  API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`,  // 获取项目权限
 };
 
 export default RESTAPI;

src/api/api_prefix.ts

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:17:48
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-18 15:44:35
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-30 16:22:15
  * @FilePath: /bkunyun/src/api/api_prefix.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -36,7 +36,7 @@ switch (process.env.REACT_APP_ENV) {
       BACKEND_API_URI_PREFIX = "https://www.cloudam.cn";
     }
     else {
-      BACKEND_API_URI_PREFIX = "http://47.57.4.97";
+      BACKEND_API_URI_PREFIX = "http://47.75.104.171";
     }
     break;
 }

src/api/project_api.ts

@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => {
   });
 };
 
+// 获取项目成员
+const fetchProjectUsersList = (params: {id: string}) => {
+  return request({
+    url: Api.API_PROJECT_USERS_LIST,
+    method: "get",
+    params,
+  });
+};
+
+
+// 修改项目成员信息
+const addProjectUser = (id: string, params: any) => {
+  return request({
+    url: `${Api.API_ADD_PROJECT_USER}?id=${id}`,
+    method: "put",
+    data: params,
+  });
+};
+
+// 获取项目权限
+const fetchProjectPower = (params: {id: string}) => {
+  return request({
+    url: Api.API_GET_PROJECT_POWER,
+    method: "get",
+    params,
+  });
+};
+
 export {
   current,
   menu,
@@ -342,5 +370,8 @@ export {
   getTaskOverview,
   getOperatorList,
   saveBatchActor,
-  fetchFlowOutputNumber
+  fetchFlowOutputNumber,
+  fetchProjectUsersList,
+  addProjectUser,
+  fetchProjectPower
 };

src/assets/project/goback.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="点击算子" transform="translate(-24.000000, -133.000000)">
+            <g id="编组-12" transform="translate(24.000000, 133.000000)">
+                <g id="编组-16" transform="translate(11.000000, 11.000000) scale(-1, 1) rotate(-90.000000) translate(-11.000000, -11.000000) ">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <g id="编组-14" transform="translate(5.500000, 8.250000)" stroke="#8A9099" stroke-linejoin="round" stroke-width="2">
+                        <polyline id="路径-7备份" transform="translate(5.500000, 2.750000) scale(1, -1) translate(-5.500000, -2.750000) " points="0 5.5 5.5 2.98949133e-16 11 5.5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/refresh.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>刷新备份</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="刷新备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <path d="M14.1034483,5.0750097 L12.3103448,6.87501758 C11.862069,4.9250128 10.0689767,3.42499873 7.97701897,3.42499873 C5.51150172,3.42499873 3.49426034,5.45000759 3.49426034,7.92501842 C3.49426034,10.3999842 5.51150172,12.4249931 7.97701897,12.4249931 C10.3678534,12.4249931 12.3850948,10.5500599 12.4597328,8.15001941 L13.8045603,6.8000135 C13.8793103,7.17501139 13.9540603,7.55002053 13.9540603,8.0000225 C13.9540603,11.2999882 11.2644052,14 7.97701897,14 C4.68965517,14 2,11.2999882 2,8.0000225 C2,4.70001181 4.68965517,2 7.97701897,2 C9.91954397,2 11.712681,2.97499677 12.7586207,4.40000675 L12.9080086,4.17500577 L15,4.17500577 L14.1034483,5.0750097 Z" id="路径" fill="#8A9099"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/selectActive.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="切换产品" transform="translate(-337.000000, -190.000000)">
+            <g id="编组-37" transform="translate(223.000000, 172.000000)">
+                <g id="编组-34" transform="translate(0.000000, 8.000000)">
+                    <g id="编组-4" transform="translate(114.000000, 10.000000)">
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <polyline id="路径-26" stroke="#1370FF" stroke-width="1.5" stroke-linejoin="round" points="4 8.33740166 7.27434245 11 12 5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/successIcon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>check-circle-outline备份</title>
+    <g id="云平台视觉规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="check-circle-outline备份" fill="#0DD09B" fill-rule="nonzero">
+            <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 M8,14.4 C4.472,14.4 1.6,11.528 1.6,8 C1.6,4.472 4.472,1.6 8,1.6 C11.528,1.6 14.4,4.472 14.4,8 C14.4,11.528 11.528,14.4 8,14.4 M11.672,4.464 L6.4,9.736 L4.328,7.672 L3.2,8.8 L6.4,12 L12.8,5.6 L11.672,4.464 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/triangle.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 12备份</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-12备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <polygon id="路径-53备份-2" fill="#8A9099" points="4.5 6 11.5 6 8 11"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/workbenchList.svg

 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>1.Base基础/Icon图标/任务列表</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.760000 0 0 0 0 0.776000 0 0 0 0 0.800000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
+    <title>1.Base基础/Icon图标/任务列表备份</title>
     <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="工作台（管理员）空" transform="translate(-370.000000, -245.000000)">
-            <g id="编组-5" transform="translate(370.000000, 242.000000)">
-                <g id="1.Base基础/Icon图标/任务列表" transform="translate(0.000000, 3.000000)">
+        <g id="1.Base基础/Icon图标/任务列表备份">
             <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
-                    <g filter="url(#filter-1)" id="编组-4">
-                        <g transform="translate(0.500000, 0.000000)">
-                            <path d="M7.38809691,0.889939751 C7.45764437,0.855744844 7.53911808,0.85573765 7.60867158,0.889920274 L7.60867158,0.889920274 L14.1102244,4.08516037 C14.1529938,4.10617975 14.187927,4.13844408 14.2121677,4.17736742 C14.2364085,4.21629077 14.2499569,4.26187312 14.2499569,4.30952854 L14.2499569,4.30952854 L14.2499569,11.9840447 C14.2499569,12.0332683 14.2355127,12.0802004 14.2098426,12.119868 C14.1841726,12.1595356 14.1472766,12.1919385 14.1023731,12.2121037 L14.1023731,12.2121037 L7.60081331,15.1318104 C7.53565621,15.161071 7.46109499,15.1610648 7.39594277,15.1317934 L7.39594277,15.1317934 L0.897545722,12.2122049 C0.852652465,12.1920353 0.815766035,12.1596329 0.790102919,12.1199688 C0.764439802,12.0803047 0.75,12.033379 0.75,11.984163 L0.75,11.984163 L0.75,4.30940599 C0.75,4.26175853 0.763543923,4.21618307 0.78777749,4.17726362 L0.78777749,4.17726362 Z" id="路径-15" stroke="#979797" stroke-width="1.5"></path>
-                            <polyline id="路径-20" stroke="#979797" stroke-width="1.5" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
-                            <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
-                        </g>
-                    </g>
-                </g>
+            <g id="编组-4" transform="translate(0.500000, 0.000000)" stroke="#C2C6CC" stroke-width="1.5">
+                <path d="M7.38809691,0.889939751 L14.1102244,4.08516037 L14.2499569,11.9840447 L7.60081331,15.1318104 L0.897545722,12.2122049 L0.75,4.30940599 L7.38809691,0.889939751 Z" id="路径-15"></path>
+                <polyline id="路径-20" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
+                <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21"></line>
             </g>
         </g>
     </g>

src/assets/project/workbenchList_hover.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/任务列表备份 3</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1.Base基础/Icon图标/任务列表备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <g id="编组-4" transform="translate(0.500000, 0.000000)" stroke="#1E2633" stroke-width="1.5">
+                <path d="M7.38809691,0.889939751 L14.1102244,4.08516037 L14.2499569,11.9840447 L7.60081331,15.1318104 L0.897545722,12.2122049 L0.75,4.30940599 L7.38809691,0.889939751 Z" id="路径-15"></path>
+                <polyline id="路径-20" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
+                <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21"></line>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/workbenchList_select.svg

 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>1.Base基础/Icon图标/任务列表</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.076000 0 0 0 0 0.440000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
+    <title>1.Base基础/Icon图标/任务列表备份 2</title>
     <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="任务列表" transform="translate(-370.000000, -245.000000)">
-            <g id="编组-5" transform="translate(370.000000, 242.000000)">
-                <g id="1.Base基础/Icon图标/任务列表" transform="translate(0.000000, 3.000000)">
+        <g id="1.Base基础/Icon图标/任务列表备份-2">
             <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
-                    <g filter="url(#filter-1)" id="编组-4">
-                        <g transform="translate(0.500000, 0.000000)">
-                            <path d="M7.38809691,0.889939751 C7.45764437,0.855744844 7.53911808,0.85573765 7.60867158,0.889920274 L7.60867158,0.889920274 L14.1102244,4.08516037 C14.1529938,4.10617975 14.187927,4.13844408 14.2121677,4.17736742 C14.2364085,4.21629077 14.2499569,4.26187312 14.2499569,4.30952854 L14.2499569,4.30952854 L14.2499569,11.9840447 C14.2499569,12.0332683 14.2355127,12.0802004 14.2098426,12.119868 C14.1841726,12.1595356 14.1472766,12.1919385 14.1023731,12.2121037 L14.1023731,12.2121037 L7.60081331,15.1318104 C7.53565621,15.161071 7.46109499,15.1610648 7.39594277,15.1317934 L7.39594277,15.1317934 L0.897545722,12.2122049 C0.852652465,12.1920353 0.815766035,12.1596329 0.790102919,12.1199688 C0.764439802,12.0803047 0.75,12.033379 0.75,11.984163 L0.75,11.984163 L0.75,4.30940599 C0.75,4.26175853 0.763543923,4.21618307 0.78777749,4.17726362 L0.78777749,4.17726362 Z" id="路径-15" stroke="#979797" stroke-width="1.5"></path>
-                            <polyline id="路径-20" stroke="#979797" stroke-width="1.5" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
-                            <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
-                        </g>
-                    </g>
-                </g>
+            <g id="编组-4" transform="translate(0.500000, 0.000000)" stroke="#1370FF" stroke-width="1.5">
+                <path d="M7.38809691,0.889939751 L14.1102244,4.08516037 L14.2499569,11.9840447 L7.60081331,15.1318104 L0.897545722,12.2122049 L0.75,4.30940599 L7.38809691,0.889939751 Z" id="路径-15"></path>
+                <polyline id="路径-20" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
+                <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21"></line>
             </g>
         </g>
     </g>

src/assets/project/workbenchTemplate.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>1.Base基础/Icon图标/工作流模版</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.760000 0 0 0 0 0.776000 0 0 0 0 0.800000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/工作流模版备份 3</title>
     <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="任务列表" transform="translate(-245.000000, -246.000000)">
-            <g id="编组-4" transform="translate(244.000000, 242.000000)">
-                <g id="编组-5" transform="translate(0.000000, 3.000000)" filter="url(#filter-1)">
-                    <g>
+        <g id="编组-5">
             <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
-                        <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#979797" stroke-width="1.5">
+            <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#C2C6CC" stroke-width="1.5">
                 <rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
                 <rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
                 <rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
@@ -20,7 +12,4 @@
             </g>
         </g>
     </g>
-            </g>
-        </g>
-    </g>
 </svg>
\ No newline at end of file

src/assets/project/workbenchTemplate_hover.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/工作流模版备份 2</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-5">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#1E2633" stroke-width="1.5">
+                <rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
+                <rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
+                <rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
+                <rect id="矩形备份-3" x="8.5" y="8.5" width="4.75" height="4.75" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/workbenchTemplate_select.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>1.Base基础/Icon图标/工作流模版</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.076000 0 0 0 0 0.440000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/工作流模版备份</title>
     <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="工作台（管理员）空" transform="translate(-245.000000, -246.000000)">
-            <g id="编组-4" transform="translate(244.000000, 242.000000)">
-                <g id="编组-5" transform="translate(0.000000, 3.000000)" filter="url(#filter-1)">
-                    <g>
+        <g id="编组-5">
             <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
-                        <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#979797" stroke-width="1.5">
+            <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#1370FF" stroke-width="1.5">
                 <rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
                 <rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
                 <rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
@@ -20,7 +12,4 @@
             </g>
         </g>
     </g>
-            </g>
-        </g>
-    </g>
 </svg>
\ No newline at end of file

src/assets/style/public.css

 /* 修改滚动条样式 */
 div::-webkit-scrollbar,
 main::-webkit-scrollbar {
-  width: 4px;
+	width: 6px;
 	height: 5px !important;
 }
 
 div::-webkit-scrollbar-track,
 main::-webkit-scrollbar-track {
-  background-color: #fff;
-  -webkit-border-radius: 2em;
-  -moz-border-radius: 2em;
-  border-radius: 2em;
+	background-color: transparent;
+	-webkit-border-radius: 3em;
+	-moz-border-radius: 3em;
+	border-radius: 3em;
 }
 
 div::-webkit-scrollbar-thumb,
 main::-webkit-scrollbar-thumb {
-  background-color: #C2C6CC;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
+	background-color: rgba(138, 144, 153, 0.55);
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
 	height: 5px !important;
-  width: 4px!important;
+	width: 6px !important;
+}
+
+div::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(138, 144, 153, 0.8);
+}
+main::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(138, 144, 153, 0.8);
 }
 
 body,

src/components/BusinessComponents/FileSelect/index.module.css

 .FSBox {
 	width: 900px;
-	height: 650px;
+	max-height: 550px;
 	position: relative;
 }
 

src/components/BusinessComponents/FileSelect/index.tsx

@@ -447,6 +447,7 @@ const FileSelect = observer((props: FileSelectProps) => {
 					)}
 				</div>
 				<Table
+					tableContainerStyle={{height: 470}}
 					footer={false}
 					rowHover={true}
 					nopadding={true}

src/components/BusinessComponents/SearchInput/index.tsx

@@ -38,6 +38,9 @@ const SearchInput = (props: SearchInputProps) => {
                         height: "32px",
                         fontSize: "14px",
                         paddingRight: "8px",
+                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
                         "& .MuiOutlinedInput-notchedOutline": {
 							borderColor: '#DDE1E6',
 						},

src/components/CommonComponents/FullScreenDrawer/index.module.css

@@ -38,7 +38,7 @@
 	background-color: #fff;
 	border-radius: 16px 0 0 0;
 	box-sizing: border-box;
-	overflow: scroll;
+	overflow: overlay;
 	animation: showDrawer 0.31s ease;
 	-webkit-animation: showDrawer 0.31s ease;
 	margin: 0 auto;

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

@@ -33,3 +33,11 @@
 	background-color: #fff;
 	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
 }
+.border {
+	width: 1px;
+	height: 16px;
+	background-color: rgba(209, 214, 222, 1);
+}
+.borderHidden {
+	visibility: hidden;
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -8,6 +8,7 @@
  */
 // 按钮样式的单选组
 import classnames from "classnames";
+import { useMemo } from "react";
 import style from "./index.module.css";
 
 type radioOption = {
@@ -27,10 +28,21 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 	const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
 		props;
 
+	const activeIndex: any = useMemo(() => {
+		let res = 0;
+		radioOptions.forEach((item, index) => {
+			if (item.value === value) {
+				res = index;
+			}
+		});
+		return res;
+	}, [value, radioOptions]);
+
 	return (
 		<div className={style.RadiosBox} style={RadiosBoxStyle}>
-			{radioOptions.map((options) => {
+			{radioOptions.map((options, index) => {
 				return (
+					<>
 						<div
 							key={options.value}
 							className={classnames({
@@ -42,6 +54,17 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 						>
 							{options.label}
 						</div>
+						<div
+							className={classnames({
+								[style.border]: true,
+								[style.borderHidden]: !(
+									index !== radioOptions.length - 1 &&
+									index !== activeIndex &&
+									index !== activeIndex - 1
+								),
+							})}
+						></div>
+					</>
 				);
 			})}
 		</div>

src/components/Material.Ui/SearchSelectCheckBox.jsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles({
     contentWrap: {
         padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
         backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
-        overflowY: "scroll",
+        overflowY: "overlay",
         maxHeight: "398px"
     },
     contentWrapOpenPosition:{top:"-400px"},

src/components/Material.Ui/Select.jsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles({
     contentWrap: {
         padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
         backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
-        overflowY: "auto",
+        overflowY: "overlay",
         maxHeight: "400px"
     },
     contentWrapOpen: { height: "auto" },

src/components/Material.Ui/SelectCheckBox.jsx

@@ -42,7 +42,7 @@ const useStyles = makeStyles({
     contentWrap: {
         padding: "8px 0", transition: "all 1s", position: "fixed", zIndex: 9, width: "552px",
         backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
-        overflowY: "scroll",
+        overflowY: "overlay",
         maxHeight: "398px",
         // position: "fixed",
         // width: "552px"

src/components/MySnackbar/MySnackbarProvider.tsx

-import React, { Fragment, ReactNode, useMemo } from "react";
+import React, { Fragment, ReactNode } from "react";
 import { Snackbar, Alert, Fade, Grow } from "@mui/material";
 import useMySnackbar from "./useMySnackbar";
 import snackbarContext from "./snackbarContext";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import successIconSrc from "../../assets/project/successIcon.svg";
 
 type MySnackbarProviderProp = {
 	vertical?: "bottom" | "top";
@@ -22,7 +23,6 @@ type MySnackbarProviderProp = {
 	variant?: "filled" | "outlined" | "standard";
 	errorIcon?: ReactNode;
 	infoIcon?: ReactNode;
-	successIcon?: ReactNode;
 	warningIcon?: ReactNode;
 	elevation?: number;
 	alertSx?: object;
@@ -58,7 +58,6 @@ const MySnackbarProvider = ({
 	variant = "standard",
 	errorIcon,
 	infoIcon,
-	successIcon,
 	warningIcon,
 	elevation = 3,
 	alertSx,
@@ -66,6 +65,7 @@ const MySnackbarProvider = ({
 }: MySnackbarProviderProp) => {
 	const {
 		open,
+		setOpen,
 		messageInfo,
 		handleExited,
 		success,
@@ -74,31 +74,46 @@ const MySnackbarProvider = ({
 		info,
 		close,
 	} = useMySnackbar();
-	// .MuiAlert-filledInfo
-
-	const getColorStyle = useMemo(() => {
-		if (messageInfo.severity === "success") {
-			return "#02AB83";
-		}
-		if (messageInfo.severity === "info") {
-			return "#1370FF";
-		}
-		if (messageInfo.severity === "warning") {
-			return "#FFB919";
-		}
-		if (messageInfo.severity === "error") {
-			return "#FF4E4E";
-		}
-	}, [messageInfo.severity]);
 
 	const theme = createTheme({
 		components: {
 			MuiAlert: {
 				styleOverrides: {
 					root: {
-						color: getColorStyle,
+						minWidth: "360px",
+						maxWidth: "542px",
+						minHeight: "38px",
+						boxShadow: "none",
+						"& .MuiAlert-action": {
+							paddingLeft: "32px",
+						},
+						"&.MuiAlert-standardError": {
+							color: "#FF4E4E",
+							background: "rgba(255, 237, 237, 1)",
 							"& .MuiAlert-icon": {
-							color: getColorStyle,
+								color: "#FF4E4E",
+							},
+						},
+						"&.MuiAlert-standardInfo": {
+							color: "rgba(19, 112, 255, 1)",
+							background: "rgba(235, 243, 255, 1)",
+							"& .MuiAlert-icon": {
+								color: "rgba(19, 112, 255, 1)",
+							},
+						},
+						"&.MuiAlert-standardSuccess": {
+							color: "rgba(2, 171, 131, 1)",
+							background: "rgba(217, 255, 238, 1)",
+							"& .MuiAlert-icon": {
+								color: "rgba(2, 171, 131, 1)",
+							},
+						},
+						"&.MuiAlert-standardWarning": {
+							color: "rgba(255, 185, 25, 1)",
+							background: "rgba(255, 246, 226, 1)",
+							"& .MuiAlert-icon": {
+								color: "rgba(255, 185, 25, 1)",
+							},
 						},
 					},
 				},
@@ -106,6 +121,14 @@ const MySnackbarProvider = ({
 		},
 	});
 
+	const successIcon = (
+		<img
+			src={successIconSrc}
+			style={{ width: "16px", height: "16px", margin: "3px 0" }}
+			alt=""
+		/>
+	);
+
 	return (
 		<Fragment>
 			<ThemeProvider theme={theme}>
@@ -137,7 +160,10 @@ const MySnackbarProvider = ({
 						severity={messageInfo?.severity}
 						variant={variant}
 						elevation={elevation}
-						sx={{ boxShadow: "unset", ...alertSx }}
+						sx={{ ...alertSx }}
+						onClose={() => {
+							setOpen(false);
+						}}
 					>
 						{messageInfo?.content}
 					</Alert>

src/components/MySnackbar/useMySnackbar.ts

@@ -69,6 +69,7 @@ const useMySnackbar = () => {
 
   return {
     open,
+    setOpen,
     messageInfo,
     handleExited,
     success,

src/components/mui/MyButton.tsx

@@ -46,7 +46,7 @@ const theme = createTheme({
 		MuiButton: {
 			styleOverrides: {
 				root: {
-					minWidth: "48px",
+					minWidth: "68px",
 					boxShadow: "none !important",
 					"&.MuiButton-textError": {
 						color: "rgba(255, 78, 78, 1)",
@@ -54,11 +54,17 @@ const theme = createTheme({
 					"&.MuiButton-outlinedError": {
 						color: "rgba(255, 78, 78, 1)",
 						border: "1px solid rgba(255, 78, 78, 1)",
-						"&:hover": { backgroundColor: 'transparent' },
+						"&:hover": { backgroundColor: "#FFEDED" },
 					},
 					"& .MuiLoadingButton-loadingIndicator": {
 						color: "#fff",
 					},
+					"&.MuiButton-containedError": {
+						backgroundColor: "#FF4E4E",
+						"&:hover": {
+							backgroundColor: "rgba(217, 54, 54, 1)",
+						},
+					},
 				},
 				contained: {
 					backgroundColor: "#1370FF",
@@ -101,6 +107,9 @@ const theme = createTheme({
 						border: "1px solid rgba(221, 225, 230, 1)",
 					},
 				},
+				// outlinedError: {
+				// 	"&:hover": { backgroundColor: "#FFEDED " },
+				// },
 				textSecondary: {
 					backgroundColor: "transparent",
 					color: "#FF4E4E",
@@ -110,16 +119,19 @@ const theme = createTheme({
 					"& p": { fontSize: "12px" },
 					height: "28px",
 					padding: "0 12px",
+					minWidth: "60px",
 				},
 				sizeMedium: {
 					"& p": { fontSize: "14px" },
 					height: "32px",
 					padding: "0 16px",
+					minWidth: "68px",
 				},
 				sizeLarge: {
 					"& p": { fontSize: "16px" },
 					height: "36px",
 					padding: "0 16px",
+					minWidth: "80px",
 				},
 			},
 		},

src/components/mui/MyCheckBox.tsx

@@ -12,6 +12,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import _ from "lodash";
 
 interface IMyCheckBoxProps extends FormGroupProps {
@@ -44,6 +45,33 @@ export const optionsTransform = (
 	});
 };
 
+const theme = createTheme({
+	components: {
+		MuiFormControlLabel: {
+			styleOverrides: {
+				label: {
+					fontSize: "14px",
+				},
+			},
+		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					fontSize: "19px",
+				},
+			},
+		},
+		MuiCheckbox: {
+			styleOverrides: {
+				colorPrimary: {
+					color: "rgba(209, 214, 222, 1)",
+				},
+			},
+		},
+		// MuiCheckbox-colorPrimary
+	},
+});
+
 export default function MyCheckBox(props: IMyCheckBoxProps) {
 	const {
 		value,
@@ -76,6 +104,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 	};
 
 	return (
+		<ThemeProvider theme={theme}>
 			<FormControl fullWidth variant={variant} error={error}>
 				<FormGroup {...props} row>
 					{options.map((option) => {
@@ -98,5 +127,6 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 				</FormGroup>
 				{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
 			</FormControl>
+		</ThemeProvider>
 	);
 }

src/components/mui/MyDialog.tsx

-import React from "react";
+import React, { useMemo } from "react";
 
 import {
 	Dialog,
@@ -42,7 +42,14 @@ export interface IDialogProps {
 	/** 点击遮罩是否关闭  默认为false*/
 	clickMaskClose?: boolean;
 	/** 确认按钮样式*/
-	okSx?: any;
+	okColor?:
+		| "inherit"
+		| "primary"
+		| "secondary"
+		| "success"
+		| "error"
+		| "info"
+		| "warning"; //按钮颜色风格
 	loading?: boolean; // 确认按钮是否处于loading状态
 }
 
@@ -66,7 +73,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 		disabledConfirm,
 		clickMaskClose = false,
 		loading = false,
-		okSx = {},
+		okColor = "primary",
 	} = props;
 
 	const handelClose = (
@@ -79,7 +86,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 		onClose && onClose();
 	};
 
-	const Footer = () => {
+	const Footer = useMemo(() => {
 		if (isHideFooter) return null;
 		return footerRender ? (
 			footerRender()
@@ -90,7 +97,6 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						text={cancelText || "取消"}
 						onClick={onClose}
 						variant="outlined"
-						// size="small"
 						color="secondary"
 					/>
 				) : null}
@@ -99,16 +105,28 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						text={okText || "确定"}
 						onClick={onConfirm}
 						variant="contained"
-						// size="small"
+						color={okColor}
 						disabled={disabledConfirm}
 						isLoadingButton={true}
 						loading={loading}
-						style={{ marginLeft: '12px', ...okSx }}
+						style={{ marginLeft: "12px" }}
 					/>
 				) : null}
 			</DialogActions>
 		);
-	};
+	}, [
+		disabledConfirm,
+		okColor,
+		okText,
+		onConfirm,
+		onClose,
+		cancelText,
+		showCancel,
+		footerRender,
+		isHideFooter,
+		loading,
+		showConfirm,
+	]);
 	return (
 		<Dialog
 			open={open}
@@ -122,16 +140,13 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					"& .MuiPaper-root": {
 						// 设置最大宽度， 实际宽度让子元素撑大
 						maxWidth: "1920px",
-						borderRadius: "8px"
+						borderRadius: "8px",
 					},
 				},
 			}}
 		>
 			{isHideHeader ? null : (
-				<DialogTitle
-					id="alert-dialog-title"
-					sx={{ padding: "20px 24px" }}
-				>
+				<DialogTitle id="alert-dialog-title" sx={{ padding: "20px 24px" }}>
 					<div
 						style={{
 							display: "flex",
@@ -140,16 +155,25 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 							fontWeight: 600,
 						}}
 					>
-						<span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
+						<span
+							style={{ fontSize: 16, lineHeight: "24px", color: "#1E2633" }}
+						>
+							{title}
+						</span>
 						<CloseIcon
 							onClick={onClose}
-							sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
+							sx={{
+								fontSize: "18px",
+								color: "#C2C6CC",
+								cursor: "pointer",
+								":hover": { background: "#f0f2f5", borderRadius: "2px" },
+							}}
 						/>
 					</div>
 				</DialogTitle>
 			)}
 			<DialogContent style={{ minWidth: 388 }}>{children}</DialogContent>
-			{Footer()}
+			{Footer}
 		</Dialog>
 	);
 };

src/components/mui/MyInput.tsx

@@ -35,9 +35,18 @@ const MyInput = (props: MyInputProps) => {
 					root: {
 						height: "36px",
 						fontSize: "14px",
+						border: "rgba(221, 225, 230, 1)",
+						padding: "7px 12px",
 						"&.MuiInputBase-sizeSmall": {
 							height: "32px",
 						},
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
 					},
 					multiline: {
 						height: "auto",
@@ -45,13 +54,19 @@ const MyInput = (props: MyInputProps) => {
 							padding: 0,
 						},
 					},
-					input: {},
+					input: {
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+						},
+					},
 				},
 			},
 			MuiInputLabel: {
 				styleOverrides: {
 					root: {
 						top: "-9px",
+						fontSize: "14px",
 					},
 					shrink: {
 						top: 0,
@@ -64,11 +79,19 @@ const MyInput = (props: MyInputProps) => {
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {
+						padding: "7px 12px",
 						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
 							borderWidth: "1px",
 						},
 						"& .MuiOutlinedInput-notchedOutline": {
-							borderColor: '#DDE1E6',
+							borderColor: "#DDE1E6",
+						},
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
 						},
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": error
@@ -76,14 +99,28 @@ const MyInput = (props: MyInputProps) => {
 								: {
 										borderColor: "#1370ff",
 								  },
+							"&.Mui-disabled": {
+								background: "rgba(247, 248, 250, 1)",
+								cursor: "not-allowed",
+								"& .MuiOutlinedInput-notchedOutline": {
+									borderColor: "#DDE1E6",
+								},
+							},
 						},
 					},
 					input: {
-						padding: "6.5px 12px",
+						padding: "0",
 						verticalAlign: "middle",
 					},
 				},
 			},
+			MuiTypography: {
+				styleOverrides: {
+					root: {
+						marginRight: "-5px",
+					},
+				},
+			},
 		},
 	});
 

src/components/mui/MyMenu.tsx

@@ -23,7 +23,7 @@ const theme = createTheme({
 		MuiMenu: {
 			styleOverrides: {
 				root: {
-					overflowY: "scroll",
+					overflow: "overlay",
 				},
 			},
 		},

src/components/mui/MyMultipleMenu.tsx

@@ -14,7 +14,7 @@ const theme = createTheme({
 		MuiMenu: {
 			styleOverrides: {
 				root: {
-					overflowY: "scroll",
+					overflow: "overlay",
 				},
 			},
 		},

src/components/mui/MyPopconfirm.tsx

@@ -68,6 +68,14 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 			placement={placement}
 			sx={{
 				zIndex: 2000,
+				bgcolor: "transparent",
+				minWidth: "200px",
+				fontSize: "14px",
+				padding: "20px 16px",
+			}}
+		>
+			<Box
+				sx={{
 					bgcolor: "#fff",
 					minWidth: "200px",
 					borderRadius: "4px",
@@ -106,6 +114,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 						isLoadingButton={true}
 					/>
 				</Box>
+			</Box>
 		</Popper>
 	);
 };

src/components/mui/MyPopover.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 09:33:46
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 14:21:00
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:26
  * @FilePath: /bkunyun/src/components/mui/MyPopover.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
+import { useRef, useEffect, useState } from "react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
 import Typography from "@mui/material/Typography";
 
@@ -17,10 +17,15 @@ interface IProps extends Omit<PopoverProps, "open"> {
 	children: React.ReactNode;
 	/** 显示内容 */
 	content: React.ReactNode;
+	/** 是否打开 */
+	open?: boolean;
+	/** open 修改 */
+	changeOpen: (val: boolean) => void;
 }
 
 const MyPopover = (props: IProps) => {
-	const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+	const [anchorEl, setAnchorEl] = useState<any | null>(null);
+	const ref = useRef(null);
 
 	const {
 		trigger = "click",
@@ -28,26 +33,37 @@ const MyPopover = (props: IProps) => {
 		content,
 		anchorOrigin,
 		transformOrigin,
+		open = false,
+		changeOpen,
 	} = props;
 
 	const handlePopoverOpen = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event.currentTarget);
 	};
 
 	const handelClick = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event?.currentTarget);
 	};
 
 	const handlePopoverClose = () => {
+		changeOpen(false);
 		setAnchorEl(null);
 	};
 
-	const open = Boolean(anchorEl);
+	useEffect(() => {
+		if (open) {
+			setAnchorEl(ref.current);
+		}
+	}, [open]);
+
 	const id = open ? "simple-popover" : undefined;
 
 	return (
 		<div>
 			<Typography
+				ref={ref}
 				aria-owns={id}
 				onClick={trigger === "click" ? handelClick : undefined}
 				onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}

src/components/mui/MyRadio.tsx

@@ -12,6 +12,7 @@ import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 interface IMyRadioProps extends RadioGroupProps {
 	value: any;
@@ -44,6 +45,25 @@ export const optionsTransform = (
 	});
 };
 
+const theme = createTheme({
+	components: {
+		MuiFormControlLabel: {
+			styleOverrides: {
+				label: {
+					fontSize: "14px",
+				},
+			},
+		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					fontSize: "19px",
+				},
+			},
+		},
+	},
+});
+
 export default function MyRadio(props: IMyRadioProps) {
 	const {
 		value,
@@ -55,6 +75,7 @@ export default function MyRadio(props: IMyRadioProps) {
 	} = props;
 
 	return (
+		<ThemeProvider theme={theme}>
 			<FormControl fullWidth variant={variant} error={error}>
 				<RadioGroup
 					{...props}
@@ -78,5 +99,6 @@ export default function MyRadio(props: IMyRadioProps) {
 				</RadioGroup>
 				{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
 			</FormControl>
+		</ThemeProvider>
 	);
 }

src/components/mui/MySelect.tsx

@@ -12,6 +12,7 @@ import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
 import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
 import { createTheme, ThemeProvider } from "@mui/material";
+import selectActive from "@/assets/project/selectActive.svg";
 
 export interface IOption {
 	label: string;
@@ -71,6 +72,35 @@ export default function MySelect(props: IProps) {
 				styleOverrides: {
 					root: {
 						height: "36px",
+						"& .Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
+					},
+					input: {
+						fontSize: "14px",
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+						},
+						img: {
+							display: "none",
+						},
+					},
+				},
+			},
+			MuiList: {
+				styleOverrides: {
+					root: {
+						"& .MuiButtonBase-root": {
+							"&.Mui-selected": {
+								backgroundColor: "#fff",
+								color: "#1370FF",
+							},
+						},
 					},
 				},
 			},
@@ -78,9 +108,12 @@ export default function MySelect(props: IProps) {
 			MuiMenuItem: {
 				styleOverrides: {
 					root: {
+						paddingRight: "46px",
+						fontSize: "14px",
+						lineHeight: "24px",
 						":hover": {
-							backgroundColor: "#ECF4FF ",
-							color: "#1370FF",
+							backgroundColor: "#F0F2F5 ",
+							color: "#1E2633",
 						},
 					},
 				},
@@ -89,10 +122,30 @@ export default function MySelect(props: IProps) {
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
+						"& .MuiOutlinedInput-notchedOutline": {
+							borderColor: "#DDE1E6",
+						},
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": {
 								borderColor: "#1370ff",
 							},
+							"&.Mui-disabled": {
+								background: "rgba(247, 248, 250, 1)",
+								cursor: "not-allowed",
+								"& .MuiOutlinedInput-notchedOutline": {
+									borderColor: "#DDE1E6",
+								},
+							},
 						},
 					},
 				},
@@ -119,6 +172,14 @@ export default function MySelect(props: IProps) {
 					},
 				},
 			},
+
+			MuiPaper: {
+				styleOverrides: {
+					root: {
+						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+					},
+				},
+			},
 		},
 	});
 
@@ -153,6 +214,19 @@ export default function MySelect(props: IProps) {
 										key={index}
 									>
 										{item.label}
+										{value === item.value && (
+											<img
+												style={{
+													width: "16px",
+													height: "16px",
+													position: "absolute",
+													top: "10px",
+													right: "12px",
+												}}
+												src={selectActive}
+												alt=""
+											/>
+										)}
 									</MenuItem>
 								);
 						  })

src/components/mui/MySwitch.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/components/mui/MySwitch.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
+import React, { useMemo } from "react";
 import Switch, { SwitchProps } from "@mui/material/Switch";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
@@ -17,7 +17,18 @@ interface IMySwitchProps extends SwitchProps {
 	disabled?: boolean;
 }
 
-const theme = createTheme({
+const MySwitch = (props: IMySwitchProps) => {
+	const {
+		value,
+		defaultChecked,
+		onChange,
+		disabled = false,
+		size,
+		...other
+	} = props;
+
+	const theme = useMemo(() => {
+		return createTheme({
 			components: {
 				MuiSwitch: {
 					styleOverrides: {
@@ -32,7 +43,9 @@ const theme = createTheme({
 							"&.Mui-checked": {
 								left: "2px",
 								"& + .MuiSwitch-track": {
-							backgroundColor: "#1370ff",
+									backgroundColor: disabled
+										? "rgba(166, 211, 255, 1)"
+										: "rgba(19, 112, 255, 1)",
 									opacity: 1,
 								},
 							},
@@ -44,16 +57,17 @@ const theme = createTheme({
 						},
 						track: {
 							borderRadius: "11px",
-					backgroundColor: "#E6E8EB",
+							backgroundColor: disabled
+								? "RGBA(240, 242, 245, 1)"
+								: "RGBA(221, 225, 230, 1)",
 							opacity: 1,
 						},
 					},
 				},
 			},
-});
+		});
+	}, [disabled]);
 
-const MySwitch = (props: IMySwitchProps) => {
-	const { value, defaultChecked, onChange, disabled = false, size, ...other } = props;
 	return (
 		<ThemeProvider theme={theme}>
 			<Switch

src/components/mui/MyTable/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-07-26 10:23:43
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 11:53:00
+ * @LastEditTime: 2022-09-01 16:00:34
  * @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
  * @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -32,7 +32,7 @@ export interface ITableProps {
   /** 每行双击事件  */
   onDoubleClick?: any,
   /** 是否loading */
-  load?: boolean,
+  loading?: boolean,
   /** table size */
   size?: any,
   /** 选中的checkbox数据 */
@@ -71,4 +71,6 @@ export interface ITableProps {
   onRef?: any;
   /** 手型 */
   cursor?: string
+  /** 没有数据文案 */
+  noDataText?: string
 }
\ No newline at end of file

src/components/mui/Tabs.tsx

@@ -2,11 +2,11 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-16 15:53:31
+ * @LastEditTime: 2022-09-01 19:34:35
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { isEqual } from "lodash";
 import { useState } from "react";
 import { Box } from "@mui/system";
@@ -21,11 +21,14 @@ interface ITabList {
 	component: JSX.Element | React.ReactNode;
 	icon?: string;
 	iconed?: string;
+	iconHover?: string;
 	hide?: boolean;
 	disabled?: boolean;
 }
 
 interface IProps {
+	value?: string;
+	onChange?: (val: string) => void;
 	tabList: ITabList[];
 	defaultValue?: string;
 	tabPanelSx?: any;
@@ -70,11 +73,14 @@ const theme = createTheme({
 const Tabs = (props: IProps) => {
 	const {
 		tabList,
+		value,
 		defaultValue,
+		onChange,
 		allowNullValue = false,
 		tabPanelSx = { padding: "24px 0 0 0" },
 	} = props;
-	const [value, setValue] = useState(
+
+	const [tabValue, setTabValue] = useState(
 		defaultValue
 			? defaultValue
 			: allowNullValue
@@ -82,17 +88,38 @@ const Tabs = (props: IProps) => {
 			: tabList.filter((e) => !e.hide)[0].value
 	);
 
-	const onChange = (val: string) => {
-		setValue(val);
+	const [hoverValue, setHoverValue] = useState("");
+
+	const onTabChange = (val: string) => {
+		setTabValue(val);
+		onChange && onChange(val);
 	};
 
+	const getImgSrc = useCallback(
+		(item: ITabList) => {
+			let result = item.icon;
+			if (value === item.value || tabValue === item.value) {
+				result = item.iconed;
+			}
+			if (hoverValue === item.value) {
+				result = item.iconHover;
+			}
+			return result;
+		},
+		[hoverValue, value, tabValue]
+	);
+
 	const labelRender = (item: ITabList, key: number) => {
 		return (
-			<Box style={{ display: "flex", alignItems: "center" }}>
+			<div
+				style={{ display: "flex", alignItems: "center" }}
+				onMouseOver={() => setHoverValue(item.value)}
+				onMouseOut={() => setHoverValue("")}
+			>
 				{item.icon ? (
 					<img
 						style={{ width: "16px", marginRight: "8px" }}
-						src={value === item.value ? item.iconed : item.icon}
+						src={getImgSrc(item)}
 						alt=""
 					/>
 				) : (
@@ -108,17 +135,17 @@ const Tabs = (props: IProps) => {
 				>
 					{item.label}
 				</Typography>
-			</Box>
+			</div>
 		);
 	};
 
 	return (
 		<ThemeProvider theme={theme}>
-			<TabContext value={value}>
-				<Box sx={{ borderBottom: 1, borderColor: "#dde1e6" }}>
+			<TabContext value={value || tabValue}>
+				<Box sx={{ borderBottom: 1, borderColor: "#EDEFF2" }}>
 					<TabList
 						onChange={(e: any, val: string) => {
-							onChange(val);
+							onTabChange(val);
 						}}
 					>
 						{tabList

src/hooks/usePass.ts

@@ -9,6 +9,13 @@ const roleList: any[] = [
   { OWNER: 4 }
 ]
 
+export const roleMap = {
+  VIEWER: '查看者',
+  USER: '研究员',
+  MANAGER: '管理员',
+  OWNER: '所有者',
+}
+
 const usePass = () => {
   const { permissionStore } = useStores();
   const { currentProjectStore } = useStores();

src/index.tsx

@@ -41,9 +41,7 @@ root.render(
 	<React.StrictMode>
 		<ThemeProvider theme={theme}>
 			<Provider {...stores}>
-				<MySnackbarProvider
-					alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
-				>
+				<MySnackbarProvider>
 					<MyRouter></MyRouter>
 				</MySnackbarProvider>
 			</Provider>

src/store/modules/currentProject.ts

@@ -18,6 +18,7 @@ type projectInfo = {
 type productInfo = {
   id?: string;
   name?: string;
+  path?: string;
 };
 
 /** 用户信息 */

src/store/modules/fileList.ts

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 09:43:42
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:46
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,6 +25,8 @@ class FileList {
   /** 文件上传列表 */
   fileList: IUploadInfo[] = [];
   
+  /** 是否打开传输列表 */
+  openFileList: boolean = false
 
   // setFileList (val: IUploadInfo[]) {
   //   this.fileList = val
@@ -39,6 +41,10 @@ class FileList {
     this.newFileList = val
   }
 
+  /** 打开关闭文件列表 */
+  setOpenFileList = (val: boolean) => {
+    this.openFileList = val
+  }
 
   /** 设置文件上传信息 */
   setUploadInfo = (id: string, val: IUploadInfo) => {

src/views/ConsoleLayout/components/FileItem/index.module.css

@@ -17,6 +17,13 @@
 	text-overflow: ellipsis;
 	font-size: 14px;
 }
+
+.contentBox {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
 .speedBox {
 	display: flex;
 	justify-content: space-between;

src/views/ConsoleLayout/components/FileItem/index.tsx

@@ -88,17 +88,17 @@ const FileItem = observer((props: IProps) => {
 
 	const speed = useMemo(() => {
 		let val = 0;
-		const time = Math.floor((itemInfo?.endTime - itemInfo.startTime) / 1000);
+		const time = Math.floor((itemInfo?.endTime - itemInfo?.startTime) / 1000);
 		if (time > 0) {
 			val = Math.floor(itemInfo?.bytesUploaded / time);
 		}
 		return val;
-	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo.startTime]);
+	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo?.startTime]);
 	return (
 		<div className={styles.itemBox}>
 			<div className={styles.leftBox}>
 				<img src={bkunyunFile} alt="" style={{ marginRight: 16 }} />
-				<div>
+				<div className={styles.contentBox}>
 					<div>
 						<b className={styles.fileNameBox} title={itemInfo?.name || ""}>
 							{itemInfo?.name || ""}

src/views/ConsoleLayout/components/TransferList/index.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-10 18:05:21
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 11:28:21
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-02 10:47:33
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -20,16 +20,19 @@ const TranSferList = observer(() => {
 	const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
 
 	return (
-		<Box style={{ width: 520, padding: 20 }}>
-			<MyTitle title="传输列表" />
+		<Box style={{ width: 520 }}>
+			<MyTitle style={{ padding: "12px 16px" }} title="传输列表" />
 			<Box
 				style={{
 					display: "flex",
 					justifyContent: "space-between",
 					alignItems: "center",
+					padding: "0 16px",
 				}}
 			>
-				<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
+				<Box style={{ color: "#8A9099", fontSize: 14 }}>
+					请勿在上传过程中刷新页面！
+				</Box>
 				<MySelect
 					variant="standard"
 					value={"default"}
@@ -43,11 +46,11 @@ const TranSferList = observer(() => {
 					size="small"
 				/>
 			</Box>
-			<Box style={{ height: 400, overflowY: "auto" }}>
+			<div style={{ height: 400, overflow: "overlay", padding: "0 16px" }}>
 				{uploadInfoStore?.fileList.map((item) => {
 					return <FileItem fileItemInfo={item} key={item.id} />;
 				})}
-			</Box>
+			</div>
 		</Box>
 	);
 });

src/views/ConsoleLayout/index.module.css

@@ -13,10 +13,70 @@
 }
 
 .logo {
-	padding: 0px 16px 0px 20px;
+	padding: 0px 32px 0px 20px;
 	margin-top: -10px;
 }
-
+.menuBox {
+	line-height: 57px;
+	height: 57px;
+	font-size: 14px;
+	color: rgba(86, 92, 102, 1);
+	margin-right: 24px;
+	cursor: pointer;
+	position: relative;
+}
+.menuTitle:hover {
+	color: #1e2633;
+}
+.menuBox:hover .productList {
+	display: block;
+}
+.triangle {
+	width: 16px;
+	height: 16px;
+	position: relative;
+	top: 4px;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+}
+.menuBox:hover .triangle {
+	transform: rotateX(180deg);
+}
+.productList {
+	position: absolute;
+	top: 57px;
+	left: -16px;
+	padding: 8px 0;
+	display: none;
+	background: #ffffff;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+	border-radius: 4px;
+	z-index: 1002;
+}
+.productLi {
+	min-width: 142px;
+	height: 36px;
+	padding: 7px 50px 7px 16px;
+	font-size: 14px;
+	color: rgba(30, 38, 51, 1);
+	line-height: 22px;
+	cursor: pointer;
+	position: relative;
+	box-sizing: border-box;
+}
+.productLi:hover {
+	color: rgba(19, 112, 255, 1);
+}
+.productLiActive {
+	color: rgba(19, 112, 255, 1);
+}
+.selectActive {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 10px;
+	right: 12px;
+}
 .uploadIconBox {
 	width: 32px;
 	height: 32px;
@@ -39,16 +99,14 @@
 }
 
 .topRightItem {
-	margin-right: 20px;
+	margin-right: 24px;
 }
-
-.ArrowDropDownIconRoot {
+.topRightTriangle {
 	color: #8a9099;
 	transition: all 0.2s !important;
 	transform: rotate(0);
 }
-
-.ArrowDropDownIconRootOpen {
+.topRightTriangleOpen {
 	color: #8a9099;
 	transform: rotate(180deg);
 }

src/views/ConsoleLayout/index.tsx

 import React, { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import cx from "classnames";
 import { observer } from "mobx-react-lite";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
 import classNames from "classnames";
 
 import uploadIcon from "@/assets/img/uploadIcon.svg";
+import triangle from "@/assets/project/triangle.svg";
+import selectActive from "@/assets/project/selectActive.svg";
 import globalText from "@/utils/globalText_CN";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
-import MyButton from "@/components/mui/MyButton";
 import logo from "@/assets/img/logo.svg";
 import MyPopover from "@/components/mui/MyPopover";
 import TranSferList from "./components/TransferList";
 import { getProjectList } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
+import { toJS } from "mobx";
 import {
 	setFileServerEndPointLocalStorage,
 	getFiletokenAccordingToId,
@@ -25,29 +25,19 @@ import {
 import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
-	const {
-		productAnchorEl,
-		utilityAnchorEl,
-		productOpen,
-		utilityOpen,
-		handleProductClick,
-		handleUtilityClick,
-		handleClose,
-	} = useIndex();
+	const { utilityAnchorEl, utilityOpen, handleUtilityClick, handleClose } =
+		useIndex();
 
-	const [currentProduct, setCurrentProduct] = useState<{
-		path: string;
-		name: string;
-	}>();
-
-	const { currentProjectStore } = useStores();
+	const { currentProjectStore, fileListStore } = useStores();
+	const { openFileList, setOpenFileList } = fileListStore;
+	const productInfo = toJS(currentProjectStore.currentProductInfo);
 	const { run: runGetProjectList } = useMyRequest(getProjectList, {
 		onSuccess: (res) => {
 			let list = res.data;
 			if (list.length === 0) {
 				currentProjectStore.setProjectList([]);
 				currentProjectStore.changeProject({});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			} else {
 				currentProjectStore.setProjectList(list);
 				currentProjectStore.changeProject(list[0]);
@@ -56,15 +46,18 @@ const ConsoleLayout = observer(() => {
 					list[0].filetoken = res;
 					currentProjectStore.changeProject(list[0]);
 				});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			}
 		},
 	});
 
 	// 切换产品
 	const getProduct = (item: any) => {
-		currentProjectStore.changeProductInfo({ id: item.id, name: item.name });
-		setCurrentProduct(item);
+		currentProjectStore.changeProductInfo({
+			id: item.id,
+			name: item.name,
+			path: item.path,
+		});
 		runGetProjectList({
 			product: item.id,
 		});
@@ -83,62 +76,54 @@ const ConsoleLayout = observer(() => {
 			<Box className={style.topApp}>
 				<Box className={style.topLeftBox}>
 					<img src={logo} alt="" className={style.logo} />
-					<MyButton
+					{/* <MyButton
 						text={globalText.console}
 						variant={"text"}
 						style={{ color: "#565C66" }}
 						onClick={() => navigate("/home")}
-					/>
+					/> */}
+					<div className={style.menuBox} onClick={() => navigate("/home")}>
+						<div className={style.menuTitle}>{globalText.console}</div>
+					</div>
 
-					<Box sx={{ display: "flex", alignItems: "center" }}>
-						<MyButton
-							text={globalText.product}
-							variant={"text"}
-							style={{ color: "#565C66", paddingLeft: '8px' }}
-							onClick={handleProductClick}
-							dropValue={productOpen}
-							drop={true}
-						/>
-						{/* <ArrowDropDownIcon classes={{
-              root: cx({
-                [style.ArrowDropDownIconRoot]: true,
-                [style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
-              })
-            }} /> */}
-						<Menu
-							id="product-menu"
-							anchorEl={productAnchorEl}
-							open={productOpen}
-							onClose={handleClose}
-							classes={{
-								paper: style.menuPaper,
-							}}
-							MenuListProps={{
-								"aria-labelledby": "product-button",
-							}}
-						>
+					<div className={style.menuBox}>
+						<div className={style.menuTitle}>
+							<span>{globalText.product}</span>
+							<img className={style.triangle} src={triangle} alt="" />
+						</div>
+						<div className={style.productList}>
 							{menuStore.productList.map((item) => {
 								return (
-									<MenuItem
+									<div
 										key={item.path}
-										classes={{
-											root: style.menuItemRoot,
-										}}
+										className={classNames({
+											[style.productLi]: true,
+											[style.productLiActive]: productInfo.path === item.path,
+										})}
 										onClick={() => {
 											getProduct(item);
 											handleClose();
 										}}
 									>
 										{item.name}
-									</MenuItem>
+										{productInfo.path === item.path && (
+											<img
+												className={style.selectActive}
+												src={selectActive}
+												alt=""
+											/>
+										)}
+									</div>
 								);
 							})}
-						</Menu>
-					</Box>
+						</div>
+					</div>
 				</Box>
 
 				<Box className={style.topRightBox}>
 					<MyPopover
+						open={openFileList}
+						changeOpen={(val) => setOpenFileList(val)}
 						content={<TranSferList />}
 						transformOrigin={{
 							vertical: "top",
@@ -152,7 +137,6 @@ const ConsoleLayout = observer(() => {
 								style={{ verticalAlign: "middle" }}
 							/>
 						</div>
-					
 					</MyPopover>
 					<Box className={style.topRightItem}>
 						<Box
@@ -170,13 +154,13 @@ const ConsoleLayout = observer(() => {
 							>
 								H
 							</Avatar>
-							<ArrowDropDownIcon
-								classes={{
-									root: cx({
-										[style.ArrowDropDownIconRoot]: true,
-										[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
-									}),
-								}}
+							<img
+								className={classNames({
+									[style.topRightTriangle]: true,
+									[style.topRightTriangleOpen]: Boolean(utilityOpen),
+								})}
+								src={triangle}
+								alt=""
 							/>
 						</Box>
 

src/views/CustomOperator/components/OperatorList/index.module.css

@@ -32,7 +32,7 @@
 }
 .list {
 	height: calc(100% - 55px);
-	overflow-y: auto;
+	overflow-y: overlay;
 	padding: 15px 20px;
 	box-sizing: border-box;
 }

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -202,6 +202,7 @@ const SaveOperator = (props: IProps) => {
 					<span
 						style={{
 							position: "absolute",
+							fontSize: "14px",
 							bottom: "7px",
 							right: "12px",
 							color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",

src/views/CustomOperator/index.tsx

@@ -27,18 +27,14 @@ const CustomOperator = observer((props: IProps) => {
 	/** 设置选中唯一标识符 */
 	const handleNodeClick = useCallback((val: string) => {
 		// setSelectTaskId(val);
-		// console.log(val);
 	}, []);
 
 	// 判断   每个流算子必须至少有一条连接线。
 	const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
-		console.log("checkHasOneLine");
 		const all = _.uniq([...sourceArr, ...targetArr]);
 		if (all.length === operatorList.length) {
-			console.log("checkHasOneLine1");
 			return true;
 		} else {
-			console.log("checkHasOneLine2");
 			return false;
 		}
 		// _.uniq([2, 1, 2]);
@@ -46,7 +42,6 @@ const CustomOperator = observer((props: IProps) => {
 
 	// 判断   每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
 	const checkIn = (targetArr: string[]) => {
-		console.log("checkIn");
 		const uniqTargetArr = _.uniq(targetArr);
 		if (uniqTargetArr.length === operatorList.length) {
 			// 流节点连成一个圈了
@@ -82,7 +77,6 @@ const CustomOperator = observer((props: IProps) => {
 
 	// 判断  起码有一个结尾算子（可以有多个结尾点）的输出必须为文件保存或数据集保存。
 	const checkOut = (sourceArr: string[]) => {
-		console.log("checkOut");
 		const uniqSourceArr = _.uniq(sourceArr);
 		if (uniqSourceArr.length === operatorList.length) {
 			// 流节点连成一个圈了
@@ -134,22 +128,18 @@ const CustomOperator = observer((props: IProps) => {
 				edge.target && targetArr.push(edge.target);
 			});
 		});
-		console.log("operatorList", operatorList);
-		console.log("sourceArr", sourceArr);
-		console.log("targetArr", targetArr);
 		if (!checkHasOneLine([...sourceArr], [...targetArr])) {
-			console.log("checkHasOneLine");
-			Message.error("内容校验未通过，请检查！");
+			Message.error("部分算子没有流程线，请检查流程！");
 			return;
 		}
 		if (!checkIn([...targetArr])) {
-			console.log("checkIn");
-			Message.error("内容校验未通过，请检查！");
+			Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
 			return;
 		}
 		if (!checkOut([...sourceArr])) {
-			console.log("checkOut");
-			Message.error("内容校验未通过，请检查！");
+			Message.error(
+				"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
+			);
 			return;
 		}
 		setSaveFormDialog(true);

src/views/Home/index.module.css

+.parentBox {
+    height: calc(100vh - 57px);
+    position: relative;
+}
+
+.centerBox {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.centerImg{
+    width: 186px;
+    height: 114px;
+}
+
+.centerText {
+    font-size: 14px;
+    color: #565C66;
+    line-height: 22px;
+    margin-top: 20px;
+    text-align: center;
+}
+
+.bottomText {
+    font-size: 14px;
+    color: #8A9099;
+    line-height: 22px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+}
\ No newline at end of file

src/views/Home/index.tsx

 import React from "react";
+import style from "./index.module.css";
+import building from "@/assets/img/building.png";
 
 const Home = () => {
-  return <div>Home</div>;
+  return <div className={style.parentBox}>
+    <div className={style.centerBox}>
+      <img src={building} className={style.centerImg} />
+      <div className={style.centerText}>平台正在努力建设中…</div>
+    </div>
+    <div className={style.bottomText}>平台当前为beta版本，非最终品质</div>
+  </div>
 };
 
 export default Home;

src/views/MenuLayout/index.module.css

@@ -13,7 +13,7 @@
 .content {
 	flex: 1;
 	height: calc(100vh - 57px);
-	overflow: scroll;
+	overflow: overlay;
 }
 .listItem {
 	padding: 8px 25px;
@@ -27,6 +27,7 @@
 }
 .listItem:hover {
 	background-color: #eef1f5;
+	border-left: 3px solid #eef1f5;
 }
 .routerIcon {
 	vertical-align: middle;

src/views/MenuLayout/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-08-02 11:43:28
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-03 19:05:48
+ * @LastEditTime: 2022-09-02 12:01:12
  * @FilePath: /bkunyun/src/views/MenuLayout/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -31,19 +31,19 @@ const MenuLayout = observer(() => {
 
 	const routerIcon = (id: string, isSelect: boolean) => {
 		try {
-      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
-      return result || ''
+			const result = require(`../../assets/project/${id}${
+				isSelect ? "_BLUE" : ""
+			}.svg`);
+			return result || "";
 		} catch (error) {
-      console.log(error)
-    }
+			console.log(error);
 		}
+	};
 
 	return (
 		<Box className={style.container}>
 			<Box className={style.aside}>
-        {
-          pathname.indexOf('userCenter') < 0 && <CurrentProject />
-        }
+				{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
 				<List
 					sx={{
 						paddingTop: 0,
@@ -59,10 +59,26 @@ const MenuLayout = observer(() => {
 										[style.listItem]: true,
 										[style.active]: `/v3${item.path}` === pathname,
 									})}
+									style={
+										`/v3${item.path}` === pathname
+											? { borderLeft: "3px solid #1370ff" }
+											: undefined
+									}
 									onClick={() => item.type === "page" && navigate(item.path)}
 								>
-                  <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
-                  <span style={{ verticalAlign: 'middle', fontWeight: '500' }}>{item.name}</span>
+									<img
+										className={style.routerIcon}
+										src={
+											routerIcon(
+												item.id || "",
+												`/v3${item.path}` === pathname
+											) || undefined
+										}
+										alt=""
+									/>
+									<span style={{ verticalAlign: "middle", fontWeight: "500" }}>
+										{item.name}
+									</span>
 								</li>
 							);
 						}

src/views/Project/ProjectData/DeleteDialog/index.tsx

@@ -89,6 +89,7 @@ const DeleteDialog = (props: IDeleteFileProps) => {
 			open={deleteDialogOpen}
 			onClose={() => setDeleteDialogOpen(false)}
 			onConfirm={handleSubmit}
+			okColor="error"
 		>
 			{currentOperateFile
 				? "确认删除该数据吗？"

src/views/Project/ProjectData/MoveFile/index.module.css

 .rootTitle {
 	border-radius: 4px 4px 0 0;
 	background-color: rgba(25, 118, 210, 0.08);
-  /* background-color: rgba(25, 118, 210, 0.5); */
 	line-height: 44px;
 	color: rgba(30, 38, 51, 1);
 	font-size: 14px;
@@ -21,11 +20,11 @@
 	justify-content: flex-start;
 	align-items: center;
 }
-.treeLabelText{
+.treeLabelText {
 	line-height: 44px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-  -o-text-overflow:ellipsis;
+	-o-text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 320px;
 }

src/views/Project/ProjectData/SeeDataset/index.module.css

@@ -42,7 +42,7 @@
 }
 .table {
 	flex: 1;
-	overflow-y: auto;
+	overflow-y: overlay;
 	display: flex;
 	flex-direction: column;
 }
@@ -101,7 +101,7 @@
 }
 .datasetLiDataList {
 	flex: 1;
-	overflow: auto;
+	overflow: overlay;
 }
 .noDataList {
 	flex: 1;

src/views/Project/ProjectData/SeeDataset/index.tsx

@@ -19,6 +19,7 @@ import classNames from "classnames";
 import Save from "./save";
 import NoData from "@/components/BusinessComponents/NoData";
 import Download from "./download";
+import MyTooltip from "@/components/mui/MyTooltip";
 import style from "./index.module.css";
 
 type ISeeDatasetProps = {
@@ -117,14 +118,15 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 							Object.keys(res.data.list[0]).forEach((item) => {
 								if (
 									![
-										"canonical_smiles",
+										"meta",
 										"id",
-										"mol",
-										"mol2",
-										"pdb",
-										"sdf",
-										"sdf2d",
-										"sdf3d",
+										// "canonical_smiles",
+										// "mol",
+										// "mol2",
+										// "pdb",
+										// "sdf",
+										// "sdf2d",
+										// "sdf3d",
 										// "smiles",
 									].includes(item)
 								) {
@@ -156,6 +158,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 			searchDataType,
 			sort,
 			keyword,
+			firstGetList,
 			// Message,
 		]
 	);
@@ -219,11 +222,12 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 						<div className={style.screensRight}>
 							<MySelect
 								options={dataTypes}
-								title="选择属性"
+								title={dataTypes.length === 0 ? "暂无属性" : "选择属性"}
 								isTitle={true}
 								value={searchDataType}
 								onChange={handleSearchDataTypeChange}
 								fullWidth={false}
+								disabled={dataTypes.length === 0}
 								sx={{
 									width: "160px",
 									marginRight: "16px",
@@ -267,8 +271,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 								sx={{
 									width: "340px",
 									marginRight: "16px",
-									height: "32px",
 								}}
+								size="small"
 							></MyInput>
 							<MyButton
 								text="确认"
@@ -313,7 +317,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 													</div>
 													{showData.length !== 0 && (
 														<div className={style.datasetLiDataList}>
-															{Object.keys(item.meta)
+															{Object.keys(item)
 																.filter((key) => showData.indexOf(key) !== -1)
 																.map((key, index) => {
 																	return (
@@ -326,11 +330,13 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 																			>
 																				{key}
 																			</span>
+																			<MyTooltip title={item[key]}>
 																				<span
 																					className={style.datasetLiDataLiValue}
 																				>
-																				{item.meta[key]}
+																					{item[key]}
 																				</span>
+																			</MyTooltip>
 																		</div>
 																	);
 																})}

src/views/Project/ProjectData/UpLoaderFile/index.module.css

@@ -50,10 +50,6 @@
 	box-sizing: border-box;
 	position: relative;
 }
-/* .tableBox {
-  height: 300px;
-  overflow: scroll;
-} */
 .fileIconBox {
 	display: flex;
 	justify-content: flex-start;

src/views/Project/ProjectData/UpLoaderFile/index.tsx

@@ -135,6 +135,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 				};
 			}) || [];
 		toJS(fileListStore?.setNewFileList)(newFileList);
+		fileListStore?.setOpenFileList(true);
 		if (newFileList?.length) {
 			getFileToken(newFileList);
 		}
@@ -173,7 +174,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 	const renderButtons = (item: any, index: number) => {
 		return (
 			<MyButton
-					text='删除'
+				text="删除"
 				style={{ position: "relative", left: "-18px" }}
 				variant="text"
 				size="small"

src/views/Project/ProjectData/index.module.css

@@ -32,6 +32,9 @@
 	color: #1e2633;
 	line-height: 22px;
 	font-weight: 600;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
 
 .projectDataTabsAndBtton {
@@ -40,6 +43,11 @@
 	align-items: center;
 }
 
+.refreshIcon {
+	width: 16px;
+	height: 16px;
+}
+
 .folderIconBox {
 	display: flex;
 	justify-content: flex-start;
@@ -72,8 +80,9 @@
 	line-height: 22px;
 	font-size: 14px;
 	color: #1e2633;
-	/* display: flex;
-  align-items: center; */
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
 
 .showPathI {

src/views/Project/ProjectData/index.tsx

@@ -2,9 +2,9 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
 import classnames from "classnames";
 import { IconButton } from "@mui/material";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import MyTable from "@/components/mui/MyTable";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
+import refresh from "@/assets/project/refresh.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import noFile from "@/assets/project/noFile.svg";
@@ -27,6 +27,7 @@ import SeeDataset from "./SeeDataset";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
 import MyButton from "@/components/mui/MyButton";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 const ProjectData = observer(() => {
 	const isPass = usePass();
@@ -68,7 +69,7 @@ const ProjectData = observer(() => {
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
-		setActiveTab(locationInfo?.dataType || 'file')
+		setActiveTab(locationInfo?.dataType || "file");
 		setPath(locationInfo?.pathName || "/");
 	}, [location]);
 
@@ -462,7 +463,13 @@ const ProjectData = observer(() => {
 						>
 							{index === 0 ? "ProjectData" : item}{" "}
 							{index === pathArr.length - 1 ? null : (
-								<i className={style.showPathI}>{">"}</i>
+								<ChevronRightIcon
+									sx={{
+										fontSize: "16px",
+										color: "rgba(194, 198, 204, 1)",
+										margin: "0px 4px",
+									}}
+								/>
 							)}
 						</span>
 					);
@@ -494,10 +501,24 @@ const ProjectData = observer(() => {
 								: ""}
 							{index === pathArr.length - 1 ||
 							(index <= pathArr.length - 4 && index > 0) ? null : (
-								<i className={style.showPathI}>{">"}</i>
+								<ChevronRightIcon
+									sx={{
+										fontSize: "16px",
+										color: "rgba(194, 198, 204, 1)",
+										margin: "0px 4px",
+									}}
+								/>
 							)}
 							{index === 1 && "..."}
-							{index === 1 && <i className={style.showPathI}>{">"}</i>}
+							{index === 1 && (
+								<ChevronRightIcon
+									sx={{
+										fontSize: "16px",
+										color: "rgba(194, 198, 204, 1)",
+										margin: "0px 4px",
+									}}
+								/>
+							)}
 						</span>
 					);
 				});
@@ -557,12 +578,17 @@ const ProjectData = observer(() => {
 									size="small"
 									onClick={handleRefresh}
 									disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
-									sx={{ marginLeft: "17px", width: '32px', height: '32px', ":hover": {
-										backgroundColor: "#F0F2F5 ",
-										borderRadius: 2
-									} }}
+									sx={{
+										marginLeft: "12px",
+										width: "32px",
+										height: "32px",
+										":hover": {
+											backgroundColor: "rgba(240, 242, 245, 1)",
+											borderRadius: "4px",
+										},
+									}}
 								>
-									<RefreshIcon sx={{ fontSize: "18px" }} />
+									<img className={style.refreshIcon} src={refresh} alt="" />
 								</IconButton>
 							</div>
 						</div>
@@ -597,10 +623,9 @@ const ProjectData = observer(() => {
 				{selectIds.length > 0 && (
 					<div className={style.projectDataStickyBox}>
 						<MyButton
-							text={`批量删除（${selectIds.length}）`}
+							text={`批量删除 (${selectIds.length})`}
 							color="error"
 							variant="outlined"
-							size="small"
 							style={{ marginRight: "12px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);
@@ -609,10 +634,9 @@ const ProjectData = observer(() => {
 							disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
 						/>
 						<MyButton
-							text={`批量移动（${selectIds.length}）`}
+							text={`批量移动 (${selectIds.length})`}
 							// color="neutral"
 							variant="contained"
-							size="small"
 							style={{ marginRight: "24px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);

src/views/Project/ProjectJobDetail/LogView/index.module.css

@@ -3,20 +3,12 @@
 	top: 0;
 	width: 100%;
 	height: 100%;
-    background-color: rgba(0, 0, 0, .5);
+	background-color: rgba(0, 0, 0, 0.5);
 	z-index: 1002;
 }
 
 .logViewBox {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 900px;
-    height: 600px;
-    background: #282C34;
-    box-shadow: 2px 4px 20px 0px rgba(0, 15, 45, 0.1200);
-    border-radius: 8px;
+	background: #282c34;
 }
 
 .close {
@@ -29,68 +21,76 @@
 
 .logViewTop {
 	/* height: 30px; */
-    background-color: #1D2126;
-    border-radius: 8px 8px 0 0;
+	width: 100vw;
+	background-color: #1d2126;
+	/* border-radius: 8px 8px 0 0; */
 	display: flex;
 	font-size: 12px;
-    color: #8A9099;
-    overflow: auto;
+	color: #8a9099;
+	/* overflow: overlay; */
 }
 
 .logViewTop::-webkit-scrollbar-track {
-    background-color: #282C34;
-  }
+	background-color: #282c34;
+}
 
 .logTitle {
 	display: flex;
+	width: 0;
+	max-width: 200px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow:ellipsis;
+	flex: 1;
 	align-items: center;
 	height: 30px;
 	line-height: 20px;
 	padding: 0 24px;
 	cursor: pointer;
+	border-right: 1px solid #10141A;
 }
 
 .logTitleSelected {
-    background: #282C34;
-    color: #FFFFFF;
+	background: #282c34;
+	color: #ffffff;
 }
 
-.fileIcon{
-    width: 14px!important;
+.fileIcon {
+	width: 14px !important;
 	margin-right: 4px;
 }
 
 .logViewContent {
 	position: relative;
 	box-sizing: border-box;
-    height: 510px;
-    padding: 16px 24px 0;
-    color: #D1D6DE;
-    white-space:pre-wrap;
+	height: calc(100vh - 148px);
+	padding: 24px 32px 0;
+	color: #d1d6de;
+	white-space: pre-wrap;
 	word-break: break-word;
-    overflow: auto;
+	overflow: overlay;
 	font-size: 14px;
 	line-height: 22px;
 }
 
-.logViewContentMask{
-    height: 16px;
-    width: 852px;
-    background-color: #282C34;
+.logViewContentMask {
+	height: 24px;
+	width: calc(100vw - 64px);
+	background-color: #282c34;
 	position: absolute;
 	top: 30px;
-    left: 24px;
+	left: 32px;
 	z-index: 1005;
 }
 
 .logViewContent::-webkit-scrollbar-track {
-  background-color: #282C34;
+	background-color: #282c34;
 }
 
 .logViewBottom {
 	display: flex;
 	align-items: center;
 	justify-content: end;
-    height: 60px;
+	height: 76px;
 	padding-right: 24px;
 }
\ No newline at end of file

src/views/Project/ProjectJobDetail/LogView/index.tsx

@@ -7,16 +7,18 @@ import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutl
 import CloudEController from "@/api/fileserver/CloudEController";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
+import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
 
 
 type LogViewProps = {
     isshow: boolean;
     handleClose: () => void;
     logs: any[];
+    setShowAddTemplate: any;
 };
 
 const LogView = (props: LogViewProps) => {
-    const { isshow, handleClose, logs } = props;
+    const { isshow, handleClose, logs, setShowAddTemplate } = props;
     const { currentProjectStore } = useStores();
     const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
     const projectId = toJS(currentProjectStore.currentProjectInfo.id);
@@ -42,7 +44,7 @@ const LogView = (props: LogViewProps) => {
             )?.then((res) => {
                 setLogText(res.data)
             })
-        }else{
+        } else {
             setLogText("")
         }
     }, [logPath]);
@@ -53,7 +55,7 @@ const LogView = (props: LogViewProps) => {
     }, [logCurrent]);
 
     // 下载当前日志
-    const handleDownLoad=()=>{
+    const handleDownLoad = () => {
         const path = logPath.slice(12)
         CloudEController.JobFileDownload(
             path,
@@ -62,9 +64,9 @@ const LogView = (props: LogViewProps) => {
         );
     }
 
-    return <div className={style.logView} style={isshow ? {} : { display: "none" }}>
+    return (
+        <FullScreenDrawer handleClose={setShowAddTemplate} zIndex={1002}>
             <div className={style.logViewBox}>
-            <CloseIcon onClick={handleClose} className={style.close} />
                 <div className={style.logViewContentMask}></div>
                 <div className={style.logViewTop}>
                     {logs.map((item: any, index: number) => {
@@ -87,7 +89,8 @@ const LogView = (props: LogViewProps) => {
                     <MyButton text='下载当前日志' onClick={handleDownLoad} />
                 </div>
             </div>
-    </div>
+        </FullScreenDrawer>
+    )
 }
 
 export default LogView
\ No newline at end of file

src/views/Project/ProjectJobDetail/index.module.css

@@ -6,7 +6,7 @@
 	width: 100vw;
 	height: 100vh;
 	background-color: RGBA(247, 248, 250, 1);
-	overflow-y: auto;
+	overflow-y: overlay;
 }
 .swHeader {
 	z-index: 1001;
@@ -14,7 +14,7 @@
 	top: 0;
 	height: 56px;
 	background-color: #fff;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -25,6 +25,9 @@
 	justify-content: flex-start;
 	align-items: center;
 }
+.goBackIcon {
+	cursor: pointer;
+}
 .swTemplateTitle {
 	margin: 0 19px 0 8px;
 	line-height: 22px;
@@ -39,9 +42,9 @@
 }
 .swFormBox {
 	background-color: #fff;
-	border-right: 1xp solid rgba(235, 237, 240, 1);
+	border-right: 1px solid #ebedf0;
 	width: 360px;
-	overflow-y: scroll;
+	overflow-y: overlay;
 	box-sizing: border-box;
 	padding: 24px;
 }
@@ -74,7 +77,7 @@
 	color: rgba(19, 112, 255, 1);
 	font-size: 14px;
 }
-.outputItemName{
+.outputItemName {
 	max-width: 172px;
 	white-space: nowrap;
 	display: block;
@@ -107,8 +110,14 @@
 	color: rgba(138, 144, 153, 1);
 	font-size: 14px;
 	line-height: 22px;
-	width: 72px;
+	width: 80px;
 	margin-right: 44px;
+	overflow: hidden;
+	word-wrap: break-word;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 .taskInfoValue {
 	color: rgba(30, 38, 51, 1);
@@ -164,7 +173,7 @@
 	position: absolute;
 	top: 33px;
 	max-height: 230px;
-	overflow-y: scroll;
+	overflow-y: overlay;
 	padding: 8px 0px;
 	background: #ffffff;
 	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);

src/views/Project/ProjectOverview/TaskCard/index.module.css

@@ -2,14 +2,14 @@
 	display: flex;
 	margin: 16px 16px 0;
 	height: 156px;
-    background: #FFFFFF;
-    box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.0300);
+	background: #ffffff;
+	box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.03);
 	border-radius: 4px;
 }
 
 .dividingLine {
 	height: 156px;
-    border-left: 1px solid #EBEDF0;
+	border-left: 1px solid #ebedf0;
 	position: relative;
 }
 
@@ -20,14 +20,16 @@
 	width: 26px;
 	height: 26px;
 	background-color: #fff;
-    border-top: 1px solid #EBEDF0;
-    border-right: 1px solid #EBEDF0;
+	border-top: 1px solid #ebedf0;
+	border-right: 1px solid #ebedf0;
 	transform: rotate(45deg);
 }
 
 .cardLeft {
 	flex: 1;
+	cursor: pointer;
 	padding: 16px 24px;
+	
 }
 
 .topLine {
@@ -43,8 +45,8 @@
 	cursor: pointer;
 }
 
-.taskName:hover{
-    color: #1370FF;
+.taskName:hover {
+	color: #1370ff;
 }
 
 .taskStatus {
@@ -66,13 +68,13 @@
 .taskCreator {
 	font-size: 12px;
 	line-height: 20px;
-    color: #1E2633;
+	color: #1e2633;
 	margin-top: 4px;
 }
 
 .taskProgress {
 	height: 32px;
-    margin: 12px 0;
+	margin: 12px 0 16px;
 }
 
 .progressInfo {
@@ -80,13 +82,13 @@
 	justify-content: space-between;
 	margin-bottom: 8px;
 	font-size: 12px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .bottomLine {
 	display: flex;
 	font-size: 12px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .bottomInfo {
@@ -97,7 +99,8 @@
 	flex: 1;
 	display: flex;
 	position: relative;
-    overflow: auto;
+	overflow: overlay;
+	padding: 16px 24px 16px 42px;
 }
 
 .noResult {
@@ -106,21 +109,23 @@
 	left: 50%;
 	transform: translate(-50%, -50%);
 	font-size: 14px;
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .resultBox {
-    padding: 16px 24px 16px 42px;
+	/* padding: 16px 24px 16px 42px; */
 	width: 100%;
 	display: flex;
 	flex-wrap: wrap;
 	align-content: flex-start;
+	box-sizing: border-box;
 }
 
 .result {
 	box-sizing: border-box;
 	font-size: 12px;
-    color: #1E2633;
+	align-items: center;
+	color: #1e2633;
 	cursor: pointer;
 	height: 30px;
 	overflow: hidden;
@@ -129,29 +134,39 @@
 	padding-right: 8px;
 }
 
-@media screen and (max-width:1220px) {
+@media screen and (max-width: 1220px) {
 	.result {
 		width: 100%;
 	}
 }
 
-@media screen and (min-width:1220px) and (max-width:1600px) {
+@media screen and (min-width: 1220px) and (max-width: 1600px) {
 	.result {
 		width: 50%;
 	}
 }
 
-@media screen and (min-width:1600px) {
+@media screen and (min-width: 1600px) {
 	.result {
 		width: 33.33%;
 	}
 }
 
 .result:hover {
-    color: #1370FF;
+	color: #1370ff;
 }
 
 .outputLeftImg {
-    vertical-align: middle;
+	vertical-align: top;
 	margin-right: 8px;
 }
+
+.outputTitle {
+	display: inline-block;
+	height: 22px;
+	line-height: 22px;
+	width: calc(100% - 30px);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

src/views/Project/ProjectOverview/TaskCard/index.tsx

@@ -3,12 +3,12 @@ import { useNavigate } from "react-router-dom";
 import MyProgress from "@/components/mui/MyProgress";
 import style from "./index.module.css";
 
-import runTime from '../../../../assets/project/runTime.svg'
-import jobCostImg from '../../../../assets/project/jobCost.svg'
-import jobSue from '../../../../assets/project/jobSue.svg'
-import jobFail from '../../../../assets/project/jobFail.svg'
-import jobRun from '../../../../assets/project/jobRun.svg'
-import jobCadence from '../../../../assets/project/jobCadence.svg'
+import runTime from "../../../../assets/project/runTime.svg";
+import jobCostImg from "../../../../assets/project/jobCost.svg";
+import jobSue from "../../../../assets/project/jobSue.svg";
+import jobFail from "../../../../assets/project/jobFail.svg";
+import jobRun from "../../../../assets/project/jobRun.svg";
+import jobCadence from "../../../../assets/project/jobCadence.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 
@@ -25,8 +25,20 @@ type TaskCardProps = {
 };
 
 const TaskCard = (props: TaskCardProps) => {
-    const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
+	const {
+		id,
+		name,
+		creator,
+		state,
+		completeNum,
+		totalNum,
+		costTime,
+		jobCost,
+		outputs,
+	} = props;
 	const navigate = useNavigate();
+	const [displayTitleBlue, setDisplayTitleBlue] = useState<boolean>(false);
+
 	const randerOutputs = useMemo(() => {
 		if (outputs) {
 			let result = Object.keys(outputs);
@@ -45,10 +57,10 @@ const TaskCard = (props: TaskCardProps) => {
 		} else {
 			return [];
 		}
-    }, [outputs])
+	}, [outputs]);
 	// 结果文件跳转
 	const goToProjectData = (info: any) => {
-        let { path = '' , type = '' } = info
+		let { path = "", type = "" } = info;
 		const lastIndex = path.lastIndexOf("/");
 		// /projectData
 		// dataType
@@ -57,50 +69,54 @@ const TaskCard = (props: TaskCardProps) => {
 		}
 		path = path.slice(12);
 		navigate(`/product/cadd/projectData`, {
-            state: { pathName: path || '/', dataType: type },
+			state: { pathName: path || "/", dataType: type },
 		});
-    }
+	};
 	// 跳转详情页
 	const gotoDetail = (id: string) => {
 		navigate(`/product/cadd/projectJobDetail`, {
-            state: { taskId: id, from: 'projectOverview' },
+			state: { taskId: id, from: "projectOverview" },
 		});
-    }
+	};
 	// 渲染状态图标
 	const renderStatusIcon = (data: string) => {
 		switch (data) {
+			case "SUBMITTED":
+				return jobRun;
 			case "RUNNING":
-                return jobRun
+				return jobRun;
 			case "ABORTED":
-                return jobCadence
+				return jobCadence;
 			case "FAILED":
-                return jobFail
+				return jobFail;
 			case "SUCCEEDED":
-                return jobSue
+				return jobSue;
 			default:
-                return jobCadence
-        }
+				return jobCadence;
 		}
+	};
 	// 渲染状态
 	const renderStatusText = (data: string) => {
 		switch (data) {
 			case "SUBMITTED":
 				return "正在启动";
 			case "RUNNING":
-                return '正在运行'
+				return "正在运行";
 			case "ABORTED":
-                return '运行终止'
+				return "运行终止";
 			case "FAILED":
-                return '运行失败'
+				return "运行失败";
 			case "SUCCEEDED":
-                return '运行成功'
+				return "运行成功";
 			default:
-                return '未知'
-        }
+				return "未知";
 		}
+	};
 	// 渲染字体颜色
 	const renderTextColor = (data: string) => {
 		switch (data) {
+			case "SUBMITTED":
+				return "#1370FF";
 			case "RUNNING":
 				return "#1370FF";
 			case "ABORTED":
@@ -116,6 +132,8 @@ const TaskCard = (props: TaskCardProps) => {
 	// 渲染状态框背景颜色
 	const renderBackgroundColor = (data: string) => {
 		switch (data) {
+			case "SUBMITTED":
+				return "#EBF3FF";
 			case "RUNNING":
 				return "#EBF3FF";
 			case "ABORTED":
@@ -131,6 +149,8 @@ const TaskCard = (props: TaskCardProps) => {
 	//渲染进度条颜色
 	const renderProgressColor = useCallback((data: any) => {
 		switch (data) {
+			case "SUBMITTED":
+				return "info";
 			case "RUNNING":
 				return "info";
 			case "ABORTED":
@@ -143,12 +163,33 @@ const TaskCard = (props: TaskCardProps) => {
 				return "disable";
 		}
 	}, []);
-    return <div className={style.cardBox}>
-        <div className={style.cardLeft}>
+	return (
+		<div className={style.cardBox}>
+			<div
+				className={style.cardLeft}
+				onClick={() => gotoDetail(id)}
+				onMouseOver={() => setDisplayTitleBlue(true)}
+				onMouseOut={() => setDisplayTitleBlue(false)}
+			>
 				<div className={style.topLine}>
-                <div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
-                <div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
-                    <img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
+					<div
+						className={style.taskName}
+						style={displayTitleBlue ? { color: "#1370ff" } : undefined}
+					>
+						{name}
+					</div>
+					<div
+						className={style.taskStatus}
+						style={{
+							color: renderTextColor(state),
+							background: renderBackgroundColor(state),
+						}}
+					>
+						<img
+							src={renderStatusIcon(state)}
+							alt=""
+							className={style.statusImg}
+						/>
 						<span>{renderStatusText(state)}</span>
 					</div>
 				</div>
@@ -156,9 +197,14 @@ const TaskCard = (props: TaskCardProps) => {
 				<div className={style.taskProgress}>
 					<div className={style.progressInfo}>
 						<div>Progress</div>
-                    <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
+						<div style={{ color: renderTextColor(state) }}>
+							{completeNum + "/" + totalNum}
 						</div>
-                <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
+					</div>
+					<MyProgress
+						color={renderProgressColor(state)}
+						value={(completeNum / totalNum) * 100}
+					/>
 				</div>
 				<div className={style.bottomLine}>
 					<img alt="" src={runTime} />
@@ -171,23 +217,31 @@ const TaskCard = (props: TaskCardProps) => {
 				<div className={style.arrow}></div>
 			</div>
 			<div className={style.cardRight}>
-            {randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
+				{randerOutputs.length === 0 ? (
+					<div className={style.noResult}>暂无结果文件</div>
+				) : (
 					<div className={style.resultBox}>
 						{randerOutputs.map((item, index) => {
-                        return <div key={index} className={style.result} onClick={() => goToProjectData(item)}>
+							return (
+								<div
+									key={index}
+									className={style.result}
+									onClick={() => goToProjectData(item)}
+								>
 									<img
 										className={style.outputLeftImg}
-                                src={
-                                    item?.type === "file" ? fileIcon : dataSetIcon
-                                }
+										src={item?.type === "file" ? fileIcon : dataSetIcon}
 										alt=""
 									/>
-                            {item?.name}</div>
+									<span className={style.outputTitle}>{item?.name}</span>
+								</div>
+							);
 						})}
 					</div>
-            }
+				)}
 			</div>
 		</div>
-}
+	);
+};
 
-export default TaskCard
+export default TaskCard;
\ No newline at end of file

src/views/Project/ProjectOverview/index.module.css

+.box {
+	height: calc(100vh - 57px);
+	overflow: overlay;
+}
+
+.topFixed {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	background-color: #fff;
+}
+
+.topFixedShadow {
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
+}
+
 .basicInformation {
 	display: flex;
 	justify-content: space-between;
-    margin: 24px 24px 0 24px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #F0F2F5;
+	margin: 0 24px;
+	padding: 24px 0 20px;
+	border-bottom: 1px solid #edeff2;
 }
 
 .basicInformationRight {
@@ -31,30 +47,30 @@
 }
 
 .informationcolor {
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .otherInformationBox {
 	margin-right: 24px;
-    color: #565C66;
+	color: #565c66;
 }
 
-.otherInformationBoxRight{
+.otherInformationBoxRight {
 	line-height: 22px;
 	margin-bottom: 4px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .numberDisplay {
 	font-size: 20px;
 	font-weight: 600;
-    color: #1E2633;
+	color: #1e2633;
 	margin-right: 8px;
 }
 
 .verticalLine {
 	height: 32px;
-    border-right: 1px solid #EBEDF0;
+	border-right: 1px solid #ebedf0;
 	margin-left: 28px;
 	margin-right: 28px;
 }
@@ -63,6 +79,7 @@
 	display: flex;
 	justify-content: space-between;
 	margin: 24px 24px 0 24px;
+	padding-bottom: 20px;
 }
 
 .searchLineLeft {
@@ -85,10 +102,10 @@
 
 .taskDisplay {
 	position: relative;
-    margin: 20px 24px;
+	margin: 0 24px 20px;
 	padding-bottom: 16px;
 	overflow: hidden;
-    background: #F7F8FA;
+	background: #f7f8fa;
 	border-radius: 8px;
 	min-height: calc(100vh - 291px);
 }

src/views/Project/ProjectOverview/index.tsx

-import React, { useState, useCallback, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
 import moment from "moment";
+import classNames from "classnames";
 
 import useMyRequest from "@/hooks/useMyRequest";
-import {
-    getOverviewInfo,
-    getTaskOverview,
-} from "@/api/project_api";
+import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
 import { useStores } from "@/store/index";
 import NoProject from "@/components/BusinessComponents/NoProject";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import Loading from "@/views/Loading";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
-import TaskCard from './TaskCard'
+import TaskCard from "./TaskCard";
 
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import noFile from "@/assets/project/noFile.svg";
 import style from "./index.module.css";
 
-
 const ProjectOverview = observer(() => {
 	const { currentProjectStore } = useStores();
 	// 概览基本信息
 	const [overviewInfo, setOverviewInfo] = useState<any>({});
 	// 任务概览列表
-    const [taskList, setTaskList] = useState([])
-    const [jobName, setJobName] = useState('')
-    const [page, setPage] = useState(0)
-    const [size, setSize] = useState(999)
+	const [taskList, setTaskList] = useState([]);
+	const [jobName, setJobName] = useState("");
+	const [page, setPage] = useState(0);
+	const [size, setSize] = useState(999);
 	// 选择近7天or近15天or近30天
 	const [day, setDay] = useState("7");
+	// 滚轮是否到顶,判断是否显示阴影
+	const [isTop, setIsTop] = useState(true)
+	// 滚动滚轮时监听是否到顶
+	const onscroll = (e: any) => {
+		if (e.target.scrollTop <= 0) {
+			setIsTop(true)
+		} else {
+			setIsTop(false)
+		}
+	}
 	// 获取概览基本信息
 	const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
 		onSuccess: (result: any) => {
@@ -64,29 +71,34 @@ const ProjectOverview = observer(() => {
 				size: size,
 			});
 		}
-    }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
+	}, [
+		currentProjectStore.currentProjectInfo.id,
+		getTaskOverviewList,
+		day,
+		jobName,
+	]);
 
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
 		}
-    }
+	};
 
-    const handleKeyWordChangeBlur=(e:any)=>{
+	const handleKeyWordChangeBlur = (e: any) => {
 		setJobName(e.target.value);
-    }
+	};
 
 	const storageUnitFromB = (b: number) => {
 		if (b <= 0) {
-            return { data: '0.00', unit: 'KB' };
+			return { data: "0.00", unit: "KB" };
 		} else if (b < 1024 * 1024) {
-            return { data: (b / 1024).toFixed(2), unit: 'KB' };
+			return { data: (b / 1024).toFixed(2), unit: "KB" };
 		} else if (b < 1024 * 1024 * 1024) {
-            return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
+			return { data: (b / (1024 * 1024)).toFixed(2), unit: "MB" };
 		} else if (b < 1024 * 1024 * 1024 * 1024) {
-            return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
+			return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: "G" };
 		} else {
-            return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
+			return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: "T" };
 		}
 	};
 
@@ -99,37 +111,87 @@ const ProjectOverview = observer(() => {
 			);
 		} else {
 			return (
-                <>
+				<div className={style.box} onScroll={onscroll}>
+					<div
+						className={classNames({
+							[style.topFixed]: true,
+							[style.topFixedShadow]: !isTop,
+						})}
+					>
 						<div className={style.basicInformation}>
 							<div>
 								<div className={style.titleBox}>
-                                <img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
+									<img
+										src={projectImg}
+										alt="项目logo"
+										style={{ width: 30, height: 30 }}
+									/>
 									<span className={style.projectName}>
 										{currentProjectStore.currentProjectInfo.name}
 									</span>
 								</div>
 								<div className={style.otherInformation}>
-                                <div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>{overviewInfo.projectRoleExhibit}</span></div>
-                                <div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>{overviewInfo.zoneIdExhibit}</span></div>
-                                <div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>{moment(overviewInfo.createdAt).format('yyyy-MM-DD')}</span></div>
+									<div className={style.otherInformationBox}>
+										<span>角色：</span>
+										<span className={style.informationcolor}>
+											{overviewInfo.projectRoleExhibit}
+										</span>
+									</div>
+									<div className={style.otherInformationBox}>
+										<span>计算区：</span>
+										<span className={style.informationcolor}>
+											{overviewInfo.zoneIdExhibit}
+										</span>
+									</div>
+									<div className={style.otherInformationBox}>
+										<span>创建日期：</span>
+										<span className={style.informationcolor}>
+											{moment(overviewInfo.createdAt).format("yyyy-MM-DD")}
+										</span>
+									</div>
 								</div>
 							</div>
 							<div className={style.basicInformationRight}>
 								<div>
-                                <div className={style.otherInformationBoxRight}>项目总消费</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
+									<div className={style.otherInformationBoxRight}>
+										项目总消费
+									</div>
+									<div>
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectCost?.toFixed(2)}
+										</span>
+										元
+									</div>
 								</div>
 								<div className={style.verticalLine}></div>
 								<div>
-                                <div className={style.otherInformationBoxRight}>项目剩余预算</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
+									<div className={style.otherInformationBoxRight}>
+										项目剩余预算
+									</div>
+									<div>
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectRemainingBudget?.toFixed(2)}
+										</span>
+										元
+									</div>
 								</div>
 								<div className={style.verticalLine}></div>
 								<div>
-                                <div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
+									<div
+										className={style.otherInformationBoxRight}
+										style={{ marginRight: "20px" }}
+									>
+										项目存储大小
+									</div>
 									<div>
-                                    <span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
-                                    {overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectStorage !== undefined
+												? storageUnitFromB(overviewInfo.projectStorage).data
+												: ""}
+										</span>
+										{overviewInfo.projectStorage !== undefined
+											? storageUnitFromB(overviewInfo.projectStorage).unit
+											: ""}
 									</div>
 								</div>
 							</div>
@@ -153,6 +215,7 @@ const ProjectOverview = observer(() => {
 								sx={{ width: 340 }}
 							/>
 						</div>
+					</div>
 					<div className={style.taskDisplay}>
 						{/* 任务列表为空展示 */}
 						{taskList.length === 0 && (
@@ -162,8 +225,10 @@ const ProjectOverview = observer(() => {
 							</div>
 						)}
 						{/* 任务列表卡片渲染 */}
-                        {taskList.length > 0 && taskList.map((item: any) => {
-                            return <TaskCard
+						{taskList.length > 0 &&
+							taskList.map((item: any) => {
+								return (
+									<TaskCard
 										id={item.id}
 										name={item.name}
 										creator={item.creator}
@@ -175,14 +240,14 @@ const ProjectOverview = observer(() => {
 										outputs={item.outputs}
 										key={item.id}
 									/>
+								);
 							})}
 					</div>
-                </>
+				</div>
 			);
 		}
-
 	} else {
 		return <NoProject />;
 	}
-})
-export default ProjectOverview
+});
+export default ProjectOverview;
\ No newline at end of file

src/views/Project/ProjectSetting/BaseInfo/index.module.css

@@ -37,11 +37,8 @@
 	border: 2px solid #136efa;
 }
 .projectInfoTextarea {
-  line-height: 22px;
-  height: 82px;
-  padding: 7px 12px;
-  resize: none;
-  font-size: 14px;
+	position: relative;
+	width: 560px;
 }
 .projectInfoSelect {
 	width: 560px;

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -21,7 +21,6 @@ import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import InformationDisplay from "@/components/CommonComponents/InformationDisplay";
 import classnames from "classnames";
-import LoadingButton from "@mui/lab/LoadingButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
@@ -40,6 +39,7 @@ type zoneIdOption = {
 const BaseInfo = observer(() => {
 	const message = useMessage();
 	const { currentProjectStore } = useStores();
+	const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
 	const [projectInfo, setProjectInfo] = useState<any>({});
 	const [deleteProjectName, setDeleteProjectName] = useState("");
 	const [nameCheck, setNameCheck] = useState({
@@ -184,10 +184,12 @@ const BaseInfo = observer(() => {
 	};
 
 	const descChange = (e: any) => {
+		if (e.target.value.length <= 100) {
 			setProjectInfo({
 				...projectInfo,
 				desc: e.target.value,
 			});
+		}
 	};
 
 	const checkBudget = (budget: string, showMessage = false) => {
@@ -258,6 +260,7 @@ const BaseInfo = observer(() => {
 				message.success("修改成功");
 				const projectList = await getProjectList();
 				currentProjectStore.setProjectList(projectList);
+				projectInfo.filetoken = fileToken;
 				currentProjectStore.changeProject(projectInfo);
 			},
 		}
@@ -337,16 +340,31 @@ const BaseInfo = observer(() => {
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>项目描述</div>
-					<textarea
-						value={projectInfo.desc}
+					<div
 						className={classnames({
-							[style.projectInfoListLiValue]: true,
 							[style.projectInfoTextarea]: true,
 						})}
+					>
+						<MyInput
+							value={projectInfo.desc}
+							id="desc"
+							placeholder="项目描述限制100字以内"
 							onChange={descChange}
-						placeholder="项目描述限制300字以内"
-						maxLength={300}
-					></textarea>
+							multiline
+							rows={4}
+						/>
+						<span
+							style={{
+								fontSize: "14px",
+								position: "absolute",
+								bottom: "7px",
+								right: "12px",
+								color: projectInfo.desc.length >= 100 ? "#d32f2f" : "#C2C6CC",
+							}}
+						>
+							{projectInfo.desc.length}/100
+						</span>
+					</div>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>计算区</div>
@@ -371,13 +389,11 @@ const BaseInfo = observer(() => {
 						required
 						error={budgetCheck.error}
 						disabled={currentUserName !== projectInfo.tenantUser}
-						// id="projectBudget"
 						variant="outlined"
-						value={projectInfo.projectBudget}
+						placeholder={projectInfo.projectBudget}
 						onChange={budgetChange}
 						onBlur={budgetBlur}
 						helperText={budgetCheck.help}
-						// size="small"
 						style={{ width: "560px" }}
 						InputProps={{
 							startAdornment: (
@@ -403,17 +419,12 @@ const BaseInfo = observer(() => {
 					/>
 				</div>
 				<div className={style.projectInfoListLi}>
-					<LoadingButton
+					<MyButton
 						variant="contained"
-						className={style.updateButton}
 						onClick={handleClickUpdate}
 						loading={updateLoading}
-						sx={{
-							height: "32px",
-						}}
-					>
-						保存修改
-					</LoadingButton>
+						text="保存修改"
+					/>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div
@@ -437,7 +448,7 @@ const BaseInfo = observer(() => {
 					onConfirm={handleSubmitDelete}
 					onClose={() => setDialogOpen(false)}
 					title="删除项目"
-					okSx={{ background: "#FF4E4E", color: "#fff" }}
+					okColor="error"
 				>
 					<div className={style.deleteBox}>
 						<div className={style.deleteText1}>

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-03 14:29:19
+ * @LastEditTime: 2022-09-01 16:14:10
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
 
 import Dialog from "@/components/mui/MyDialog";
-import { IResponse, useHttp } from "@/api/http";
+import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import MySelect, { IOption } from "@/components/mui/MySelect";
 import MyTable from "@/components/mui/MyTable";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import {
+	addProjectUser,
+	fetchProjectPower,
+	fetchProjectUsersList,
+} from "@/api/project_api";
 
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
@@ -29,7 +34,6 @@ interface IProps {
 const AddMember = observer((props: IProps) => {
 	const { addMemberDialog, setAddMemberDialog, getTableList } = props;
 
-	const http = useHttp();
 	const { currentProjectStore } = useStores();
 
 	const [tableData, setTableData] = useState([]);
@@ -76,22 +80,6 @@ const AddMember = observer((props: IProps) => {
 		];
 	}, [changePermission, selectOptions]);
 
-	useEffect(() => {
-		if (addMemberDialog) {
-			http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
-				const arr = [];
-				const { data } = res;
-				for (const key in data) {
-					arr.push({
-						label: String(data[key]),
-						value: key,
-					});
-				}
-				setSelectOptions(arr);
-			});
-		}
-	}, [addMemberDialog, http]);
-
 	/** 过滤表格数据 */
 	useEffect(() => {
 		if (!!projectMember) {
@@ -105,18 +93,48 @@ const AddMember = observer((props: IProps) => {
 		}
 	}, [projectMember, tableData]);
 
+	// 获取表格数据接口
+	const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
+		onSuccess: (res: any) => {
+			setTableData(res?.data);
+		},
+	});
+
+	// 获取项目权限
+	const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
+		onSuccess: (res: any) => {
+			setSelectOptions(res.data);
+		},
+	});
+
+	// 添加项目成员
+	const { run: saveProjectUser } = useMyRequest(addProjectUser, {
+		onSuccess: (res: any) => {
+			const { errorCode } = res;
+			if (errorCode === 0) {
+				Message.success("新增成功！");
+				getTableList();
+				setAddMemberDialog(false);
+			}
+		},
+	});
+
+	useEffect(() => {
+		if (addMemberDialog) {
+			getProjectPower();
+		}
+	}, [addMemberDialog, getProjectPower]);
+
 	/** 获取表格数据 */
 	useEffect(() => {
 		if (!addMemberDialog) return;
 		const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
-		http
-			.get<IResponse<any>>("/cpp/project/listusers", {
-				params: { id: projectInfo?.id || "" },
-			})
-			.then((res) => {
-				setTableData(res?.data);
-			});
-	}, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
+		getProjectUsersList({ id: projectInfo?.id || "" });
+	}, [
+		currentProjectStore?.currentProjectInfo,
+		addMemberDialog,
+		getProjectUsersList,
+	]);
 
 	const onClose = (event: any = {}, reason: any = "other") => {
 		// 点击弹窗外不关闭弹窗
@@ -132,19 +150,7 @@ const AddMember = observer((props: IProps) => {
 			return checkData.includes(item?.username);
 		});
 		if (params.length) {
-			http
-				.put<IResponse<any>>(
-					`/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
-					params
-				)
-				.then((res) => {
-					const { errorCode } = res;
-					if (errorCode === 0) {
-						Message.success("新增成功！");
-						getTableList();
-						setAddMemberDialog(false);
-					}
-				});
+			saveProjectUser(projectInfo?.id || "", params);
 		} else {
 			Message.info("请先选择项目成员！");
 		}
@@ -168,8 +174,12 @@ const AddMember = observer((props: IProps) => {
 						placeholder="搜索项目成员"
 						sx={{ mb: 2 }}
 					/>
-					<div style={{ overflowY: "scroll", maxHeight: 400 }}>
+					<div style={{ overflow: "overlay", maxHeight: 400 }}>
 						<MyTable
+							noDataText={
+								projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
+							}
+							tableContainerStyle={{ height: 346 }}
 							checkboxData={(val: string[]) => setCheckData(val)}
 							param="username"
 							disabledParam={"enabled"}

src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css

@@ -81,7 +81,7 @@
 }
 
 .taskConfigBox {
-	padding: 16px 24px 4px;
+	padding: 16px 0px 4px;
 }
 .flowTitle {
 	line-height: 16px;
@@ -118,3 +118,13 @@
 	color: rgba(138, 144, 153, 1);
 	margin-left: 16px;
 }
+.bacthConfigBox {
+	padding: 0 24px 0;
+}
+.flowConfigBox {
+	border-bottom: 1px solid rgba(235, 237, 240, 1);
+	padding: 20px 24px 12px;
+}
+.flowConfigBox:nth-last-child(1) {
+	border-bottom: none;
+}

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -23,11 +23,11 @@ type ConfigFormProps = {
 	templateConfigInfo?: ITemplateConfig;
 	setParameter: any;
 	onRef?: React.Ref<any>;
-	setSelectedBatchNodeId: (val: string) => void;
+	setExternalSelectedNodeId: (val: string) => void;
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
-	const { templateConfigInfo, setParameter, setSelectedBatchNodeId } = props;
+	const { templateConfigInfo, setParameter, setExternalSelectedNodeId } = props;
 	const [name, setName] = useState<string>(""); // 任务名称
 	const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
 
@@ -189,11 +189,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 		setParameter(e.target.value, taskId, parameterName);
 	};
 
-	const randerParameters = (
-		parameters: Array<IParameter>,
-		taskId: string,
-		batchId?: string
-	) => {
+	const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
 		return parameters
 			.filter((parameter) => parameter.hidden === false)
 			.map((parameter, parameterIndex) => {
@@ -221,7 +217,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "file" && (
 									<MyInput
 										onClick={() => {
-											setSelectedBatchNodeId(batchId || "");
+											setExternalSelectedNodeId(taskId || "");
 											setFileSelectType("file");
 											handleOpenFileSelect(taskId, parameter.name);
 										}}
@@ -244,7 +240,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "path" && (
 									<MyInput
 										onClick={() => {
-											setSelectedBatchNodeId(batchId || "");
+											setExternalSelectedNodeId(taskId || "");
 											setFileSelectType("path");
 											handleOpenFileSelect(taskId, parameter.name);
 										}}
@@ -267,7 +263,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "dataset" && (
 									<MyInput
 										onClick={() => {
-											setSelectedBatchNodeId(taskId);
+											setExternalSelectedNodeId(taskId);
 											setFileSelectType("dataset");
 											handleOpenFileSelect(taskId, parameter.name);
 										}}
@@ -290,10 +286,9 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "input" && (
 									<MyInput
 										onFocus={() => {
-											setSelectedBatchNodeId(batchId || "");
-											console.log(batchId, "111");
+											setExternalSelectedNodeId(taskId || "");
 										}}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										value={parameter.value || ""}
 										onChange={(e: any) =>
 											handleParameterChange(e, taskId, parameter.name || "")
@@ -306,8 +301,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 								)}
 								{(parameter.domType || "").toLowerCase() === "select" && (
 									<MySelect
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										value={parameter.value}
 										onChange={(e: any) =>
 											handleParameterChange(
@@ -329,8 +324,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() ===
 									"multipleselect" && (
 									<MySelect
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										value={parameter.value}
 										onChange={(e: any) =>
 											handleParameterChange(
@@ -356,8 +351,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 										onChange={(e: any) =>
 											handleParameterChange(e, taskId, parameter.name || "")
 										}
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										options={parameter?.choices || []}
 										error={parameter.error || false}
 										helperText={parameter.helperText}
@@ -378,8 +373,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 											)
 										}
 										options={parameter?.choices || []}
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										error={parameter.error || false}
 										helperText={parameter.helperText}
 									/>
@@ -448,7 +443,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 							<MyInput
 								value={outputPath || ""}
 								onClick={() => {
-									setSelectedBatchNodeId("");
+									setExternalSelectedNodeId("");
 									setFileSelectType("path");
 									handleOpenFileSelect();
 								}}
@@ -497,11 +492,12 @@ const ConfigForm = (props: ConfigFormProps) => {
 							/>
 						</div>
 						<div className={styles.taskConfigBox}>
+							<div className={styles.bacthConfigBox}>
 								{randerParameters(
 									task.parameters.filter((parameter) => !parameter?.thrown),
-								task.id,
 									task.id
 								)}
+							</div>
 							{task.flows.map((flow) => {
 								if (
 									flow.parameters.filter(
@@ -511,7 +507,11 @@ const ConfigForm = (props: ConfigFormProps) => {
 									return null;
 								}
 								return (
-									<div className={styles.flowConfigBox} key={flow.id}>
+									<div
+										className={styles.flowConfigBox}
+										key={flow.id}
+										id={`point${flow.id}`}
+									>
 										<div className={styles.flowTitle}>
 											{flow.title}
 											{flow.description && (
@@ -524,11 +524,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 												</MyTooltip>
 											)}
 										</div>
-										{randerParameters(
-											flow.parameters,
-											flow.id,
-											flow.parentNode ? flow.parentNode : flow.id
-										)}
+										{randerParameters(flow.parameters, flow.id)}
 									</div>
 								);
 							})}

src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx

@@ -12,11 +12,11 @@ import { ITemplateConfig } from "../interface";
 
 interface IProps {
 	templateConfigInfo?: ITemplateConfig;
-	setSelectedBatchNodeId?: (val: string) => void;
-	selectedBatchNodeId?: string;
+	setExternalSelectedNodeId?: (val: string) => void;
+	externalSelectedNodeId?: string;
 }
 const WorkFlow = (props: IProps) => {
-	const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
+	const { templateConfigInfo, setExternalSelectedNodeId, externalSelectedNodeId } =
 		props;
 
 	/** 页面刷新提醒 */
@@ -36,8 +36,8 @@ const WorkFlow = (props: IProps) => {
 	return (
 		<Flow
 			tasks={templateConfigInfo?.tasks}
-			setSelectedBatchNodeId={setSelectedBatchNodeId}
-			selectedBatchNodeId={selectedBatchNodeId}
+			setExternalSelectedNodeId={setExternalSelectedNodeId}
+			externalSelectedNodeId={externalSelectedNodeId}
 		/>
 	);
 };

src/views/Project/ProjectSubmitWork/index.module.css

@@ -6,7 +6,7 @@
 	width: 100vw;
 	height: 100vh;
 	background-color: RGBA(247, 248, 250, 1);
-	overflow-y: auto;
+	overflow-y: overlay;
 }
 .swHeader {
 	z-index: 1001;
@@ -14,7 +14,7 @@
 	top: 0;
 	height: 56px;
 	background-color: #fff;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -53,7 +53,7 @@
 	background-color: #fff;
 	border-right: 1xp solid rgba(235, 237, 240, 1);
 	width: 608px;
-	overflow-y: scroll;
+	overflow-y: overlay;
 	box-sizing: border-box;
 	padding: 36px;
 }

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-17 10:58:02
+ * @LastEditTime: 2022-09-01 14:39:36
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -28,6 +28,7 @@ import { useMessage } from "@/components/MySnackbar";
 import { useStores } from "@/store";
 import { observer } from "mobx-react-lite";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import goback from "@/assets/project/goback.svg";
 
 import styles from "./index.module.css";
 
@@ -42,7 +43,8 @@ const ProjectSubmitWork = observer(() => {
 	let configFormRef: any = React.createRef();
 	/** 是否全屏 */
 	const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
-	const [selectedBatchNodeId, setSelectedBatchNodeId] = useState<string>("");
+	const [externalSelectedNodeId, setExternalSelectedNodeId] =
+		useState<string>("");
 
 	// 前往工作台
 	const goToWorkbench = (toWorkbenchList = false) => {
@@ -222,6 +224,7 @@ const ProjectSubmitWork = observer(() => {
 				promotedParameters,
 			});
 		} else {
+			handleCancel();
 			Message.error("请完善算子信息后提交任务");
 		}
 	};
@@ -252,24 +255,14 @@ const ProjectSubmitWork = observer(() => {
 			{fullScreenShow ? null : (
 				<div className={styles.swHeader}>
 					<div className={styles.swHeaderLeft}>
-						<IconButton
-							color="primary"
+						<img
+							className={styles.goBackIcon}
+							src={goback}
+							alt=""
 							onClick={(e: any) =>
 								handleShowPopper(e, "返回将放弃当前页面所有操作，确认返回吗？")
 							}
-							aria-label="upload picture"
-							component="span"
-							size="small"
-						>
-							<ArrowBackIosNewIcon
-								sx={{
-									color: "rgba(194, 198, 204, 1)",
-									width: "14px",
-									height: "14px",
-								}}
 						/>
-						</IconButton>
-
 						<div className={styles.swTemplateTitle}>
 							{templateConfigInfo?.title}
 						</div>
@@ -292,17 +285,12 @@ const ProjectSubmitWork = observer(() => {
 						<div className={styles.swHeaderGoback}></div>
 					</div>
 					<div className={styles.swHeaderRight}>
-						{/* <MyPopconfirm
-							title="提交前请先确认参数填写无误，确认提交吗？"
-							onConfirm={handleSubmitForm}
-						> */}
 						<MyButton
 							text="提交任务"
 							onClick={(e: any) =>
 								handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
 							}
 						></MyButton>
-						{/* </MyPopconfirm> */}
 					</div>
 				</div>
 			)}
@@ -313,7 +301,7 @@ const ProjectSubmitWork = observer(() => {
 							onRef={configFormRef}
 							templateConfigInfo={templateConfigInfo}
 							setParameter={setParameter}
-							setSelectedBatchNodeId={setSelectedBatchNodeId}
+							setExternalSelectedNodeId={setExternalSelectedNodeId}
 						/>
 					</div>
 				)}
@@ -323,8 +311,8 @@ const ProjectSubmitWork = observer(() => {
 				>
 					<WorkFlow
 						templateConfigInfo={templateConfigInfo}
-						setSelectedBatchNodeId={setSelectedBatchNodeId}
-						selectedBatchNodeId={selectedBatchNodeId}
+						setExternalSelectedNodeId={setExternalSelectedNodeId}
+						externalSelectedNodeId={externalSelectedNodeId}
 					/>
 				</div>
 			</div>

src/views/Project/ProjectWorkbench/index.tsx

 /*
  * @Author: rocosen
  * @Date: 2022-06-12 10:05:13
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-20 15:04:19
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 11:51:16
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,17 +11,16 @@ import { Box } from "@mui/system";
 import { observer } from "mobx-react-lite";
 import { useLocation } from "react-router-dom";
 
-import projectImg from "@/assets/project/projectIconSmall.svg";
 import WorkbenchTemplate from "./workbenchTemplate";
 import WorkbenchList from "./workbenchList";
 import Tabs from "@/components/mui/Tabs";
 import usePass from "@/hooks/usePass";
 import Template from "@/assets/project/workbenchTemplate.svg";
-import Template_select from "@/assets/project/workbenchTemplate_select.svg";
+import TemplateSelect from "@/assets/project/workbenchTemplate_select.svg";
+import TemplateHover from "@/assets/project/workbenchTemplate_hover.svg";
 import List from "@/assets/project/workbenchList.svg";
-import List_select from "@/assets/project/workbenchList_select.svg";
-import ButtonDemo from "@/views/mui_demo/button";
-import InputDemo from "@/views/mui_demo/input";
+import ListHover from "@/assets/project/workbenchList_hover.svg";
+import ListSelect from "@/assets/project/workbenchList_select.svg";
 
 const ProjectWorkbench = observer(() => {
 	const isPass = usePass();
@@ -35,7 +34,8 @@ const ProjectWorkbench = observer(() => {
 				component: <WorkbenchTemplate />,
 				hide: !isPass("PROJECT_WORKBENCH_FLOES"),
 				icon: Template,
-				iconed: Template_select,
+				iconed: TemplateSelect,
+				iconHover: TemplateHover,
 			},
 			{
 				label: "任务列表",
@@ -43,29 +43,26 @@ const ProjectWorkbench = observer(() => {
 				component: <WorkbenchList />,
 				hide: !isPass("PROJECT_WORKBENCH_JOBS"),
 				icon: List,
-				iconed: List_select,
-			},
-			{
-				label: "按钮组件",
-				value: "MUI_BUTTON",
-				component: <ButtonDemo />,
-				icon: List,
-				iconed: List_select,
-			},
-			{
-				label: "输入框组件",
-				value: "MUI_INPUT",
-				component: <InputDemo />,
-				icon: List,
-				iconed: List_select,
+				iconed: ListSelect,
+				iconHover: ListHover,
 			},
 		];
 	}, [isPass]);
 
 	return (
-		<div style={{ padding:'28px 24px 24px' }}>
+		<div style={{ padding: "28px 24px 24px" }}>
 			<div style={{ display: "flex", alignItems: "center" }}>
-				<span style={{ fontSize: "18px", lineHeight: "26px", fontWeight: "600", color: "#1E2633" }}>工作台</span>
+				<span
+					style={{
+						fontSize: "18px",
+						lineHeight: "26px",
+						fontWeight: "600",
+						color: "#1E2633",
+						marginBottom: "3px",
+					}}
+				>
+					工作台
+				</span>
 			</div>
 			<Box sx={{ width: "100%", typography: "body1" }}>
 				<Tabs

src/views/Project/ProjectWorkbench/workbenchList/index.module.css

 /* .headerBox { */
-    /* margin-bottom: 20px; */
+/* margin-bottom: 20px; */
 /* } */
 
 .tabHeader {
@@ -14,22 +14,23 @@
 
 .body {
 	margin-top: 24px;
-    border-top: 1px solid #F0F2F5;
+	border-top: 1px solid #f0f2f5;
 	overflow: hidden;
-    overflow-y: auto;
+	overflow-y: overlay;
 	height: calc(100vh - 325px);
 }
 
 .tabBox {
 	padding: 16px 0px 16px 24px;
+	cursor: pointer;
 	display: flex;
 	align-items: center;
 	width: 100%;
-    border-bottom: 1px solid #F0F2F5;
+	border-bottom: 1px solid #f0f2f5;
 }
 
 .tabBox:hover {
-    background-color: #F5F6F7;
+	background-color: #f5f6f7;
 }
 
 .tabBoxInfo {
@@ -41,13 +42,16 @@
 	display: flex;
 }
 
-
 .tabBoxTitle {
 	font-size: 14px;
 	line-height: 22px;
 	font-weight: 600;
-    color: #1E2633;
+	color: #1e2633;
 	margin-bottom: 8px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	padding-right: 20px;
 }
 
 .tabBoxDesc {
@@ -55,14 +59,14 @@
 	line-height: 20px;
 	white-space: nowrap;
 	font-weight: 400;
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .tabBoxTime {
 	font-size: 12px;
 	line-height: 20px;
 	font-weight: 400;
-    color: #565C66;
+	color: #565c66;
 	margin-left: 8px;
 }
 
@@ -85,7 +89,7 @@
 	font-size: 12px;
 	line-height: 20px;
 	font-weight: 400;
-    color: #1E2633;
+	color: #1e2633;
 	margin: 0px 16px 0px 8px;
 	white-space: nowrap;
 }
@@ -96,6 +100,12 @@
 	justify-content: center;
 }
 
+.jobOperateImgBox:hover {
+	padding: 8px;
+	border-radius: 4px;
+	background-color: #ebedf0;
+}
+
 .tabUpdate {
 	cursor: pointer;
 	width: 32px;
@@ -106,6 +116,12 @@
 }
 
 .tabUpdate:hover {
-    background: #F0F2F5;
+	background: #f0f2f5;
 	border-radius: 4px;
 }
+.pagination {
+	padding: 19px 0 0px;
+	display: flex;
+	justify-content: end;
+	align-items: center;
+}

src/views/Project/ProjectWorkbench/workbenchList/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-22 15:33:02
+ * @LastEditTime: 2022-09-02 14:45:04
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import { TablePagination } from "@mui/material";
+import MyPagination from "@/components/mui/MyPagination";
 
 import MySelect from "@/components/mui/MySelect";
 import SimpleDialog from "./components/simpleDialog";
@@ -87,13 +88,13 @@ const ProjectMembers = observer(() => {
 	const [jobData, setJobData] = useState("");
 	const [openDialog, setOpenDialog] = useState(false);
 	const [dialogType, setDialogType] = useState("del");
+	const [loading, setLoading] = useState(false);
 	// 获取作业列表
-	const { run: getWorkflowJobInfo, loading } = useMyRequest(
-		getWorkflowJobList,
-		{
+	const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
 		onSuccess: (result: any) => {
+			setLoading(false);
 			setJobList(result.data.content);
-				setCount(result.data.totalElements);
+			setCount(result.data.totalPages - 1);
 			timer && clearTimeout(timer as number);
 			timer = null;
 			timer = setTimeout(() => {
@@ -106,8 +107,7 @@ const ProjectMembers = observer(() => {
 				});
 			}, 60000);
 		},
-		}
-	);
+	});
 
 	useEffect(() => {
 		return () => {
@@ -177,11 +177,11 @@ const ProjectMembers = observer(() => {
 		});
 	}, [projectId, getWorkflowJobInfo]);
 
-	const handleChangePage = (event: any, newPage: any) => {
-		setPage(newPage);
+	const handleChangePage = (newPage: any) => {
+		setPage(newPage - 1);
 		getWorkflowJobInfo({
 			projectId: currentProjectStore.currentProjectInfo.id as string,
-			page: newPage,
+			page: newPage - 1,
 			size: size,
 			name: jobName,
 			state: currency === "ALL" ? "" : currency,
@@ -296,6 +296,7 @@ const ProjectMembers = observer(() => {
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
+			setLoading(true);
 		}
 	};
 
@@ -364,6 +365,7 @@ const ProjectMembers = observer(() => {
 							name: jobName,
 							state: currency === "ALL" ? "" : currency,
 						});
+						setLoading(true);
 					}}
 				>
 					<img alt="" src={onload} />
@@ -371,7 +373,7 @@ const ProjectMembers = observer(() => {
 			</Box>
 
 			<Box className={styles.body} style={{ position: "relative" }}>
-				<MyCircularProgress loading={loading} />
+				<MyCircularProgress loading={loading}>
 					{jobList.length === 0 && !loading && (
 						<Box
 							sx={{
@@ -393,7 +395,10 @@ const ProjectMembers = observer(() => {
 					{jobList.length > 0 &&
 						jobList.map((item: any, key) => {
 							return (
-							<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
+								<Box
+									className={styles.tabBox}
+									onClick={() => rowClick(item.id)}
+								>
 									<Box className={styles.tabBoxInfo}>
 										<div className={styles.tabBoxTitle}>{item.name}</div>
 										<Box className={styles.tabBoxDescInfo}>
@@ -415,7 +420,7 @@ const ProjectMembers = observer(() => {
 									<Box className={styles.tabBoxMiddle}>
 										<img alt="" src={jobCost} />
 										<div className={styles.tabBoxTime}>
-										{item.jobCost ? item.jobCost.toFixed(2) : "--"}
+											{item.jobCost?.toFixed(2)}元
 										</div>
 									</Box>
 									<Box className={styles.tabBoxJobStatus}>
@@ -475,6 +480,7 @@ const ProjectMembers = observer(() => {
 												<img
 													alt=""
 													src={jobDel}
+													className={styles.jobOperateImgBox}
 													style={{ cursor: "pointer" }}
 													onClick={(event) => {
 														event.stopPropagation();
@@ -489,9 +495,17 @@ const ProjectMembers = observer(() => {
 								</Box>
 							);
 						})}
+				</MyCircularProgress>
 			</Box>
+			<div className={styles.pagination}>
+				<MyPagination
+					page={page}
+					pageChange={handleChangePage}
+					count={count || jobList.length}
+				/>
+			</div>
 
-			<TablePagination
+			{/* <TablePagination
 				rowsPerPageOptions={[5, 10, 20, 50]}
 				labelRowsPerPage={"每页行数："}
 				ActionsComponent={ActionsComponent}
@@ -501,7 +515,7 @@ const ProjectMembers = observer(() => {
 				page={page}
 				onPageChange={handleChangePage} //
 				onRowsPerPageChange={handleChangeRowsPerPage} //
-			/>
+			/> */}
 
 			<SimpleDialog
 				text={

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css

@@ -11,13 +11,13 @@
 }
 
 .headerBoxShadow {
-	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, .15);
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
 }
 
 .templateBox {
 	padding: 0 32px;
 	height: calc(100vh - 168px);
-	overflow: auto;
+	overflow: overlay;
 }
 
 .templateList {
@@ -38,6 +38,7 @@
 	flex: 1;
 	margin-right: 16px;
 	margin-bottom: 16px;
+	transition: box-shadow .2s cubic-bezier(0, 0, 1, 1);
 }
 
 .templateLiCustom {

src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx

 import { memo } from "react";
 import { Box, Typography } from "@mui/material";
-import Dialog from "@/components/mui/MyDialog";
+import MyDialog from "@/components/mui/MyDialog";
 
 const SimpleDialog = (props: any) => {
 	const { openDialog, closeDialog, onConfirm, text, title } = props;
 
 	return (
 		<>
-			<Dialog
+			<MyDialog
 				open={openDialog}
 				onClose={closeDialog}
 				onConfirm={onConfirm}
 				title={title}
+				okColor="error"
 			>
 				<Box>
 					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
 						{text}
 					</Typography>
 				</Box>
-			</Dialog>
+			</MyDialog>
 		</>
 	);
 };

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -16,6 +16,12 @@
 	margin-bottom: 24px;
 }
 
+.templateBox {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0 -8px;
+}
+
 .template {
 	padding: 0 8px;
 	box-sizing: border-box;
@@ -24,7 +30,6 @@
 .templateBlock {
 	height: 194px;
 	background: #ffffff;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.0400);
 	border-radius: 4px;
 	border: 1px solid #ebedf0;
 	padding: 16px 20px;
@@ -34,21 +39,25 @@
 	margin-bottom: 16px;
 	position: relative;
 	box-sizing: border-box;
+	transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+}
+.templateBlock:hover {
+	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
 }
 
-@media screen and (max-width:1220px) {
+@media screen and (max-width: 1220px) {
 	.template {
 		width: 50%;
 	}
 }
 
-@media screen and (min-width:1220px) and (max-width:1600px) {
+@media screen and (min-width: 1220px) and (max-width: 1600px) {
 	.template {
 		width: 33.33333%;
 	}
 }
 
-@media screen and (min-width:1600px) {
+@media screen and (min-width: 1600px) {
 	.template {
 		width: 25%;
 	}