编辑修改代码

web-ui.service/web/static/css/app.css

@@ -89,23 +89,13 @@ body{
 /* 左侧栏 */
 .sidebar{
     width:240px;
-    height:100%;
-
     background:#0f172a;
     border-right:1px solid rgba(148,163,184,0.12);
-
     display:flex;
     flex-direction:column;
     padding: 20px;
 }
 
-.menu{
-    padding:10px;
-    display:flex;
-    flex-direction:column;
-    gap:6px;
-}
-
 .menu-item{
     display:flex;
     align-items:center;

web-ui.service/web/static/css/button.css

@@ -24,15 +24,19 @@
     border-color: #1f2937;
 }
 
+.btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
 .btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
-    transform: none;
 }
 
 .btn-blue {
     background: #2563eb;
-    border: 1px solid #2563eb;
+    border-color: #2563eb;
     color: white;
 }
 
@@ -42,13 +46,13 @@
 }
 
 .btn-blue:active {
-    transform: translateY(1px);
     background: #1e40af;
+    border-color: #1e40af;
 }
 
 .btn-red {
     background: #ef4444;
-    border: 1px solid #ef4444;
+    border-color: #ef4444;
     color: white;
 }
 
@@ -58,6 +62,6 @@
 }
 
 .btn-red:active {
-    transform: translateY(1px);
     background: #b91c1c;
+    border-color: #b91c1c;
 }

web-ui.service/web/static/css/login.css

@@ -1,82 +1,97 @@
-*{
-    margin:0;
-    padding:0;
-    box-sizing:border-box;
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-body{
-    height:100vh;
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    background:#0f172a;
-    font-family:
-        "Segoe UI",
-        "Microsoft YaHei",
-        sans-serif;
+body {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #0f172a;
+    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
 }
 
-.login-box{
-    width:420px;
-    background:#1e293b;
-    border-radius:12px;
-    padding:40px;
-    box-shadow:
-        0 0 30px rgba(0,0,0,0.4);
+.login-box {
+    width: 420px;
+    background: #1e293b;
+    border-radius: 12px;
+    padding: 40px;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
 }
 
-.logo{
-    text-align:center;
-    font-size:48px;
-    margin-bottom:15px;
+.logo {
+    text-align: center;
+    font-size: 48px;
+    margin-bottom: 15px;
 }
 
-h1{
-    color:white;
-    text-align:center;
-    font-size:26px;
-    margin-bottom:10px;
+h1 {
+    color: white;
+    text-align: center;
+    font-size: 26px;
+    margin-bottom: 10px;
 }
 
-.subtitle{
-    text-align:center;
-    color:#94a3b8;
-    margin-bottom:30px;
+.subtitle {
+    text-align: center;
+    color: #94a3b8;
+    margin-bottom: 30px;
 }
 
-input{
-    width:100%;
-    height:45px;
-    margin-bottom:15px;
-    border:none;
-    border-radius:8px;
-    padding-left:15px;
-    background:#334155;
-    color:white;
-    font-size:15px;
+input {
+    width: 100%;
+    height: 45px;
+    margin-bottom: 15px;
+    border: 1px solid #475569;
+    border-radius: 8px;
+    padding-left: 15px;
+    background: #334155;
+    color: white;
+    font-size: 15px;
+    outline: none;
+    transition: border-color 0.18s, box-shadow 0.18s;
 }
 
-input:focus{
-    outline:none;
+input::placeholder {
+    color: #64748b;
 }
 
-button{
-    width:100%;
-    height:45px;
-    border:none;
-    border-radius:8px;
-    cursor:pointer;
-    font-size:16px;
-    background:#2563eb;
-    color:white;
+input:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
 }
 
-button:hover{
-    opacity:0.9;
+button {
+    width: 100%;
+    height: 45px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    background: #2563eb;
+    color: white;
+    transition: background 0.18s, transform 0.1s;
 }
 
-#msg{
-    margin-top:15px;
-    text-align:center;
-    color:#ef4444;
+button:hover {
+    background: #1d4ed8;
+}
+
+button:active {
+    transform: translateY(1px);
+    background: #1e40af;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+#msg {
+    margin-top: 15px;
+    text-align: center;
+    color: #ef4444;
+    font-size: 14px;
 }

web-ui.service/web/static/css/page2.css

@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     gap: 15px;
-    height: 100%;
     overflow: hidden;
 }
 
@@ -12,9 +11,9 @@
     display: flex;
     gap: 24px;
     padding: 12px 16px;
-    background: transparent;
-    border: none;
-    border-radius: 0;
+    background: #0f172a;
+    border: 1px solid #334155;
+    border-radius: 8px;
     flex-shrink: 0;
 }
 
@@ -25,12 +24,12 @@
 }
 
 .status-item .label {
-    font-size: 11px;
+    font-size: 14px;
     color: #94a3b8;
 }
 
 .status-item .value {
-    font-size: 13px;
+    font-size: 14px;
     color: #e5e7eb;
     font-family: ui-monospace, monospace;
 }
@@ -62,10 +61,18 @@
     overflow: hidden;
 }
 
+.left-pane .card:nth-child(1) {
+    flex: 2;
+}
+
+.left-pane .card:nth-child(2),
+.left-pane .card:nth-child(3) {
+    flex: 1;
+}
+
 .left-pane .output {
     flex: 1;
-    overflow: auto;
-    max-height: none;
+    min-height: 0;
 }
 
 /* 展示服务日志 */
@@ -74,20 +81,18 @@
     display: flex;
     flex-direction: column;
     min-width: 0;
-    overflow: hidden;
 }
 
 .log-card {
-    height: 100%;
+    flex: 1;
     display: flex;
     flex-direction: column;
+    min-height: 0;
 }
 
 .log-card .output {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    height: auto;
+    min-height: 0;
 }
 
 .log-actions {
@@ -101,7 +106,7 @@
     border: 1px solid rgba(148, 163, 184, 0.25);
     border-radius: 6px;
     color: #e5e7eb;
-    font-size: 12px;
+    font-size: 14px;
     padding: 6px 8px;
     height: 30px;
     min-width: 80px;
@@ -141,7 +146,7 @@
     margin: 0;
 }
 
-/* 输出日志区域 */
+/* 输出信息区域 */
 .output {
     background: #020617;
     border: 1px solid #1f2937;
@@ -150,13 +155,7 @@
     font-size: 12px;
     font-family: ui-monospace, monospace;
     color: #cbd5e1;
-    max-height: 200px;
     overflow: auto;
     white-space: pre-wrap;
     line-height: 1.6;
 }
-
-/* 取消高度限制 */
-.right-pane .log-output {
-    max-height: none;
-}