device ui 第一版

src/page/device/device.js

@@ -16,4 +16,6 @@ export async function handleRefresh(e, self) {
     }, 5000) 
 }
 
-handleAdd
+export function handleAdd() {
+    console.log('Add device clicked')
+}

src/page/device/device.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import './device.scss'
 import UpdateBtn from './update-btn.jsx'
-import { handleRefresh, begin } from './device.js'
+import { handleRefresh, begin, handleAdd } from './device.js'
 
 function Device({ show }) {
   const hasRun = useRef(false)
@@ -34,7 +34,7 @@ function Device({ show }) {
       </div>
       <div className="device-add">
         <div className="ip-input">
-          <input type="text" placeholder="请输入设备IP" />
+          <input type="text" placeholder="请输入设备IP" defaultValue="192.168." />
         </div>
         <div className="add-btn" onClick={handleAdd}>
           <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

src/page/device/device.scss

@@ -1,9 +1,3 @@
-// ========== 颜色配置 ==========
-$primary-color: #0769fb; // 主色调，可根据需要修改
-
-// ========== 尺寸配置 ==========
-$full-size: 100%; // 全尺寸
-
 // ========== Mixin 配置 ==========
 @mixin flex-center {
   display: flex;
@@ -11,46 +5,107 @@ $full-size: 100%; // 全尺寸
   justify-content: center;
 }
 
-// ========== 样式定义 ==========
-.device-container {
-  width: $full-size;
-  height: $full-size;
+@mixin flex-row-between {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
 
+@mixin flex-column-between {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin box-sizing-border-box {
+  box-sizing: border-box;
+  overflow: hidden;
   margin: 0;
   padding: 0;
-  
-  display: grid;
-  grid-template-rows: 5% 80% 15%;
+}
 
-  .device-update {
-    width: $full-size;
-    height: $full-size;
-    @include flex-center;
+// ========== 样式定义 ==========
+.device-container {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #000000;
 
+  .device-update {
+    width: 100%;
+    height: 10%;
+   
+    @include flex-row-between;
+    
     .device-update-title {
-      width: $full-size;
-      height: $full-size;
+      width: 70%;
+      height: 100%;
+      user-select: none;
+      
       @include flex-center;
     }
 
     .device-update-btn {
-      width: 10%;
+      width: 30%;
+      height: 100%;
       @include flex-center;
-      margin-right: 10%;
-      transform: scale(0.6);
+
+      .UpdateBtn{
+        transform: scale(0.6);
+      }
     }
-    
-    border: 1px solid red;
+
+    background-color: #efe8e88d;
   }
 
   .device-list {
-    width: $full-size;
-    height: $full-size;
+    width: 100%;
+    height: 80%;
+
+    // border: 1px solid #000000;
   }
 
   .device-add {
-    width: $full-size;
-    height: $full-size;
-    @include flex-center;
+    width: 100%;
+    height: 10%;
+
+    @include flex-row-between;
+    @include box-sizing-border-box;
+
+    .ip-input {
+      width: 90%;
+      height: 50%;
+      @include flex-center;
+      input {
+        width: 90%;
+        height: 80%;
+        border: 1px solid #000000;
+        outline: none;
+        text-align: center;
+        
+        &::placeholder {
+          text-align: center;
+        }
+        
+        &:focus {
+          // outline: 2px solid #0769fb;
+          outline-offset: 0;
+          // border-color: #0769fb;
+        }
+      }
+    }
+    .add-btn {
+      width: 10%;
+      height: 100%;
+      // border: 1px solid rgb(13, 255, 0);
+      @include flex-center;
+      
+      svg {
+        width: 80%;
+        height: 80%;
+      }
+    }
   }
 }
+

src/page/device/update-btn.scss

@@ -9,6 +9,13 @@ $icon-color-pressed: #666;
   .div-btn__icon {
     color: $icon-color-black !important;
     opacity: 1 !important;
+    width: 100% !important;
+    height: 100% !important;
+    
+    svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   // Pressed state: darker color