processing ui

src/page/device/connect-item/connect-item.scss

@@ -43,7 +43,8 @@ $font-size-scale: 1.5;  // 字体缩放系数，调整此值可改变字体大
     height: 100%;
     cursor: pointer;
     @include flex-center;
-
+    
+    margin-right: 1%;
     &:hover {
       opacity: 0.85;
     }

src/page/process/process-item/process-item.js

@@ -2,12 +2,17 @@ class ProcessItemClass {
   constructor() {
   }
 
-  async init(processInfo) {
-    console.log(processInfo)
+  async init(processInfo, setIsRunning) {
+    this.processInfo = processInfo
+    this.setIsRunning = setIsRunning
   }
 
   start() {
+    if (this.setIsRunning) this.setIsRunning(true)
+  }
 
+  stop() {
+    if (this.setIsRunning) this.setIsRunning(false)
   }
 
   delete() {

src/page/process/process-item/process-item.jsx

@@ -1,27 +1,63 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import './process-item.scss'
 import { ProcessItemClass } from './process-item.js'
 
 function ProcessItem({ processInfo, onRemove }) {
   const processItemClass = useRef(null)
+  const [isRunning, setIsRunning] = useState(false)
 
   useEffect(() => {
     if (!processItemClass.current) {
       processItemClass.current = new ProcessItemClass()
-      processItemClass.current.init(processInfo)
+      processItemClass.current.init(processInfo, setIsRunning)
     }
   }, [])
 
+  const handleStartStop = () => {
+    if (isRunning) {
+      processItemClass.current?.stop()
+      setIsRunning(false)
+    } else {
+      processItemClass.current?.start()
+      setIsRunning(true)
+    }
+  }
+
   return (
     <div className="process-item-container">
+
       <div className="process-item-content-container">
         <div className="process-item-title">{processInfo.name}</div>
         <div className="process-item-content">{processInfo.description}</div>
       </div>
+      
       <div className="btn-area-container">
-        <div className="start-btn" onClick={() => processItemClass.current?.start()}>Start</div>
-        <div className="delete-btn" onClick={() => processItemClass.current?.delete()}>delete</div>
+        <div
+          className={`start-btn ${isRunning ? 'start-btn--running' : ''}`}
+          onClick={handleStartStop}
+        >
+          {isRunning ? (
+            <svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+              <rect x="6" y="4" width="4" height="16" rx="1"/>
+              <rect x="14" y="4" width="4" height="16" rx="1"/>
+            </svg>
+          ) : (
+            <svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+              <path d="M8 5v14l11-7z"/>
+            </svg>
+          )}
+        </div>      
       </div>
+
+      <div className="delete-btn"
+          onClick={() => processItemClass.current?.delete()}
+        >
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="10" fill="#ff3b30"/>
+            <path d="M8 8l8 8M16 8l-8 8" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
+          </svg>
+      </div>
+
     </div>
   )
 }

src/page/process/process-item/process-item.scss

@@ -12,7 +12,7 @@ $font-size-scale: 1.5;  // 字体缩放系数，调整此值可改变字体大
 
     box-sizing: border-box;
     padding: 0;
-    margin: 5%;
+    // margin: 5%;
 
     border-radius: 10px;
     /* 计算过程：
@@ -25,77 +25,85 @@ $font-size-scale: 1.5;  // 字体缩放系数，调整此值可改变字体大
 
    user-select: none;
    border: 1px solid rgb(0, 0, 0);
-}
-
-.process-item-content-container {
-    width: 70%;
-    height: 100%;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+   .process-item-content-container {
+        width: 70%;
+        height: 100%;
 
-    margin: 1%;
-
-    .process-item-title {
-        @include flex-center;
-        width: 100%;
-        height: 50%;
-    
-        font-size: 1.0em;
-        font-weight: bold;
-        word-break: break-word;
-    }
-    .process-item-content {
         display: flex;
-        align-items: flex-start;
+        flex-direction: column;
+        align-items: center;
         justify-content: center;
 
-        width: 100%;
-        height: 50%;   
+        // margin: 1%;
+
+        .process-item-title {
+            @include flex-center;
+            width: 100%;
+            height: 50%;
         
-        font-size: 1.0em;
-        word-break: break-word;
+            font-size: 1.3em;
+            font-weight: bold;
+            word-break: break-word;
+        }
+        .process-item-content {
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+
+            width: 100%;
+            height: 50%;   
+
+            font-size: 1.0em;
+            word-break: break-word;
+        }
     }
-}
 
-.btn-area-container {
-    width: 30%;
-    height: 80%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-
-    margin: 1%;
-   
-    .start-btn{
-        @include highlight-btn(#004ef6);
-        @include flex-center;
-    
-        width: 100%;
-        height: 30%;
-    
-        border-radius: 10px;
-       
-        font-size: 1.2em;
-        color: #ffffff;
-        font-weight: bold;
+    .btn-area-container {
+        width: 20%;
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+
+        .start-btn {
+
+            width: 100%;
+            height: 30%;
+
+            @include highlight-btn(#004ef6);
+            @include flex-center;
+
+            border-radius: 10px;
+            color: #ffffff;
+            svg {
+                width: 60%;
+                height: 60%;
+            }
+            &--running {
+                @include highlight-btn(#f59e0b);
+            }
+        }
     }
 
     .delete-btn {
-        @include highlight-btn(#f60000);
-        @include flex-center;
-
-        width: 100%;
-        height: 30%;
+        width: 10%;
+        height: 20%;
 
-        border-radius: 10px;
-   
-        font-size: 1.2em;
-        color: #000000;
-        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-start;
+  
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+        &:hover {
+            opacity: 0.85;
+        }
     }
-
 }
+