From 3668499c20c8fb552d134820a7ab606a079a1d2a Mon Sep 17 00:00:00 2001
From: ping <1017253325@qq.com>
Date: Fri, 26 Sep 2025 15:23:05 +0800
Subject: [PATCH] update

---
 .../envDeployment/index.vue                   | 271 +++++++++++-------
 1 file changed, 163 insertions(+), 108 deletions(-)

diff --git a/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue b/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue
index bd89352..48e4c35 100644
--- a/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue
+++ b/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue
@@ -239,175 +239,230 @@ export default {
 </script>
 
 <style scoped>
+/* ----------  变量  ---------- */
+:root {
+  --primary: #5433ff;
+  --primary-light: #7c4dff;
+  --success: #00c853;
+  --error  : #ff3d00;
+  --warning: #ffab00;
+  --bg     : #91b0ee;
+  --card-bg: #ffffff;
+  --text   : #5433ff;   /* 原来是 #303133 之类偏蓝灰，现改为中性深灰 */
+  --text-light: #59a4e6;
+  --border : #e0e4ec;
+  --radius : 10px;
+  --shadow : 0 2px 12px rgba(0,0,0,.06);
+  --shadow-hover: 0 6px 20px rgba(0,0,0,.08);
+  --transition: all .3s cubic-bezier(.4,0,.2,1);
+}
+/* ----------  基础  ---------- */
 .deploy-container {
-  padding: 20px;
+  min-height: 100vh;
+  background: var(--bg);
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
-.connection-config, .deploy-control {
-  margin-bottom: 30px;
-  background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+/* ----------  标题  ---------- */
+h2 {
+  margin: 0 0 12px;
+  font-size: 26px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -.5px;
 }
 
-.connection-config h3, .deploy-control h3 {
-  color: #333;
-  margin-bottom: 15px;
+h3 {
+  margin: 0 0 20px;
   font-size: 18px;
+  font-weight: 500;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+h3::before {
+  content: "";
+  width: 4px;
+  height: 18px;
+  background: var(--primary);
+  border-radius: 2px;
 }
 
+/* ----------  卡片  ---------- */
+.connection-config,
+.deploy-control {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 28px 32px;
+  transition: var(--transition);
+  border-left: 4px solid transparent;
+}
+.connection-config:hover,
+.deploy-control:hover {
+  box-shadow: var(--shadow-hover);
+  border-left-color: var(--primary);
+}
+
+/* ----------  输入组  ---------- */
 .input-group {
-  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
 }
-
 .input-group label {
-  display: inline-block;
-  width: 100px;
-  font-weight: bold;
-  color: #555;
+  font-weight: 500;
+  color: var(--text);
+  white-space: nowrap;
 }
-
 .url-input {
-  width: 300px;
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  flex: 1;
+  max-width: 420px;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
   font-size: 14px;
+  transition: var(--transition);
 }
-
 .url-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(124,77,255,.15);
   outline: none;
-  border-color: #2196F3;
 }
 
-.button-group {
-  margin-top: 15px;
+/* ----------  按钮  ---------- */
+.button-group,
+.deploy-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
 }
-
-.connect-btn, .disconnect-btn, .deploy-btn, .clear-btn {
+.connect-btn,
+.disconnect-btn,
+.deploy-btn,
+.clear-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: 10px 20px;
   border: none;
-  border-radius: 4px;
-  cursor: pointer;
+  border-radius: var(--radius);
   font-size: 14px;
-  margin-right: 10px;
-  transition: background-color 0.3s;
+  cursor: pointer;
+  transition: var(--transition);
+  box-shadow: 0 2px 6px rgba(0,0,0,.08);
 }
-
 .connect-btn {
-  background-color: #4CAF50;
-  color: white;
+  background: linear-gradient(135deg, var(--success) 0%, #00e676 100%);
+  color: #26dc0e;
 }
-
 .connect-btn:hover:not(:disabled) {
-  background-color: #45a049;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,200,83,.25);
 }
-
 .disconnect-btn {
-  background-color: #f44336;
-  color: white;
+  background: linear-gradient(135deg, var(--error) 0%, #ff6d00 100%);
+  color: #ef4b4b;
 }
-
 .disconnect-btn:hover:not(:disabled) {
-  background-color: #da190b;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255,61,0,.25);
 }
-
 .deploy-btn {
-  background-color: #2196F3;
-  color: white;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+  color: #2eb309;
 }
-
 .deploy-btn:hover:not(:disabled) {
-  background-color: #1976D2;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(84,51,255,.25);
 }
-
 .clear-btn {
-  background-color: #9E9E9E;
-  color: white;
-  margin-top: 10px;
+  background: #133419;
+  color: #fff;
 }
-
 .clear-btn:hover {
-  background-color: #757575;
+  background: #757575;
 }
-
 button:disabled {
-  background-color: #ccc;
+  background: #e0e0e0;
+  color: #9e9e9e;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
+/* ----------  状态标签  ---------- */
 .status-display {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   margin: 20px 0;
 }
-
 .status-item {
-  padding: 10px;
-  margin: 10px 0;
-  border-radius: 4px;
+  padding: 12px 16px;
+  border-radius: var(--radius);
   border-left: 4px solid;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
+.status-success  { background: #e8f5e9; border-color: var(--success); color: #2e7d32; }
+.status-error    { background: #ffebee; border-color: var(--error); color: #c62828; }
+.status-warning  { background: #fff8e1; border-color: var(--warning); color: #f57c00; }
+.status-info     { background: #e3f2fd; border-color: var(--primary); color: #1565c0; }
+.status-label { font-weight: 600; }
 
-.status-success {
-  background-color: #e8f5e8;
-  border-left-color: #4caf50;
-  color: #2e7d32;
-}
-
-.status-error {
-  background-color: #ffebee;
-  border-left-color: #f44336;
-  color: #c62828;
-}
-
-.status-warning {
-  background-color: #fff3e0;
-  border-left-color: #ff9800;
-  color: #e65100;
-}
-
-.status-info {
-  background-color: #e8f4f8;
-  border-left-color: #2196F3;
-  color: #1565c0;
-}
-
-.status-label {
-  font-weight: bold;
-  margin-right: 10px;
-}
-
-.deploy-actions {
-  margin: 20px 0;
-}
-
+/* ----------  日志区（暗色终端） ---------- */
 .log-section {
-  margin-top: 30px;
+  margin-top: 28px;
+  display: flex;
+  flex-direction: column;
+  height: 420px;
 }
-
 .log-section h4 {
-  color: #333;
-  margin-bottom: 10px;
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text);
 }
-
 .log-output {
-  background-color: #f8f8f8;
-  border: 1px solid #ddd;
-  padding: 15px;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
+  flex: 1;
+  background: #1e1e1e;
+  color: #cdd3de;
+  border: 1px solid #2d2d2d;
+  border-radius: var(--radius);
+  padding: 16px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 13px;
-  max-height: 300px;
+  line-height: 1.5;
   overflow-y: auto;
   white-space: pre-wrap;
-  line-height: 1.4;
+  word-break: break-all;
+  scroll-behavior: smooth;
+  counter-reset: line;
+}
+.log-line {
+  counter-increment: line;
+  position: relative;
+  padding-left: 40px;
+}
+.log-line::before {
+  content: counter(line);
+  position: absolute;
+  left: 0;
+  width: 32px;
+  text-align: right;
+  color: #5c6370;
+  user-select: none;
 }
 
-.log-line {
-  margin-bottom: 4px;
-  word-break: break-all;
-}
-/* 旋转动画 */
+/* ----------  旋转动画  ---------- */
 .spin-box { display: inline-flex; align-items: center; gap: 6px; }
 .spin { width: 16px; height: 16px; fill: currentColor; animation: spin 1s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }