feat(ui): refresh desktop client visuals

apps/ui/src/features/chat/BindEntry.tsx

@@ -15,6 +15,8 @@ export function BindEntry({
   onLobsterKeyChange,
   onSave
 }: BindEntryProps) {
+  const bindingSteps = ["同步聊天配置", "启用专家与插件", "进入桌面协作工作台"]
+
   return (
     <div className="bind-entry bind-entry-elevated">
       <div className="bind-entry-copy">
@@ -23,9 +25,12 @@ export function BindEntry({
         <p>输入龙虾密钥后即可完成身份绑定，同步工作区配置并解锁专家对话、插件协作与运行时能力。</p>
       </div>
       <div className="bind-entry-benefits" aria-label="绑定后可用能力">
-        <span>同步聊天配置</span>
-        <span>启用专家与插件</span>
-        <span>进入桌面协作工作台</span>
+        {bindingSteps.map((step, index) => (
+          <span key={step} className="bind-entry-benefit">
+            <span className="bind-entry-benefit-index" aria-hidden="true">{index + 1}</span>
+            <span>{step}</span>
+          </span>
+        ))}
       </div>
       <div className="bind-row">
         <input

apps/ui/src/styles/base.css

@@ -106,6 +106,11 @@
   --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06);
   --shadow-button: 0 8px 16px rgba(37, 99, 235, 0.18);
   --shadow-floating: 0 20px 40px rgba(15, 23, 42, 0.1);
+  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+  --gradient-primary-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(124, 58, 237, 0.1) 100%);
+  --surface-card: rgba(255, 255, 255, 0.9);
+  --surface-card-strong: #ffffff;
+  --border-card: rgba(148, 163, 184, 0.26);
 
   color: var(--color-text-primary);
   background: var(--color-bg-primary);

apps/ui/src/styles/components.css

@@ -69,15 +69,73 @@
 }
 
 .bind-entry {
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px dashed #cfdced;
-  background: #f8fbff;
+  width: min(100%, 720px);
+  justify-self: center;
+  align-self: center;
+  padding: 26px;
+  border-radius: 22px;
+  border: 1px solid var(--border-card);
+  background: var(--surface-card-strong);
+  box-shadow: var(--shadow-floating);
 }
 
 .bind-entry-copy {
   display: grid;
-  gap: 6px;
+  justify-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.bind-entry-copy strong {
+  color: #0f172a;
+  font-size: 24px;
+  line-height: 1.25;
+}
+
+.bind-entry-kicker {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(37, 99, 235, 0.2);
+  background: rgba(239, 246, 255, 0.82);
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.bind-entry-benefits {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.bind-entry-benefit {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(37, 99, 235, 0.14);
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+  color: #31516f;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.bind-entry-benefit-index {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--gradient-primary);
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
 }
 
 .bind-row input { flex: 1 1 auto; }
@@ -1220,6 +1278,8 @@ select:focus-visible {
   .startup-overlay-tagline { font-size: 13px; letter-spacing: 0.24em; }
   .startup-overlay-body { width: 100%; margin-top: 28px; }
   .startup-overlay-status { width: 100%; }
+  .bind-entry { padding: 20px; }
+  .bind-entry-benefits { grid-template-columns: 1fr; }
   .header-actions,
   .button-row,
   .mini-info,

apps/ui/src/styles/shell.css

@@ -399,19 +399,15 @@
   padding: 28px;
   overflow: hidden;
   background:
-    radial-gradient(circle at 16% 18%, rgba(90, 176, 255, 0.34), transparent 28%),
-    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.92), transparent 34%),
-    radial-gradient(circle at 50% 78%, rgba(190, 228, 255, 0.36), transparent 38%),
-    linear-gradient(145deg, #dff1ff 0%, #edf7ff 42%, #ffffff 100%);
+    linear-gradient(135deg, rgba(219, 234, 254, 0.94) 0%, rgba(245, 243, 255, 0.9) 48%, rgba(255, 255, 255, 0.98) 100%),
+    linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
 }
 
 .startup-overlay::before,
 .startup-overlay::after {
   content: "";
   position: absolute;
-  border-radius: 999px;
-  filter: blur(18px);
-  opacity: 0.55;
+  opacity: 0;
   pointer-events: none;
 }
 
@@ -434,14 +430,20 @@
 .startup-overlay-panel {
   position: relative;
   z-index: 1;
-  width: min(760px, 100%);
+  width: min(680px, 100%);
   min-height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0;
-  padding: 0;
+  padding: 36px;
+  border: 1px solid rgba(147, 197, 253, 0.38);
+  border-radius: 30px;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 30px 70px rgba(37, 99, 235, 0.14);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
   text-align: center;
   animation: startup-overlay-enter 420ms ease-out both;
 }
@@ -461,11 +463,11 @@
 
 .startup-overlay-copy h1 {
   margin: 0;
-  font-size: clamp(56px, 6vw, 84px);
+  font-size: clamp(48px, 5vw, 72px);
   line-height: 1.02;
-  letter-spacing: -0.06em;
+  letter-spacing: 0;
   font-weight: 800;
-  background-image: linear-gradient(135deg, #9fd4ff 0%, #bdd7ff 45%, #d8c5ff 100%);
+  background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 46%, #7c3aed 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
@@ -490,15 +492,16 @@
 }
 
 .startup-overlay-mark-shell {
-  width: 60px;
-  height: 60px;
+  width: 64px;
+  height: 64px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
+  border-radius: 18px;
+  border: 1px solid rgba(147, 197, 253, 0.42);
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.14);
 }
 
 .startup-overlay-logo {
@@ -512,9 +515,9 @@
   margin: 0;
   font-size: 15px;
   font-weight: 600;
-  letter-spacing: 0.32em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: #7ea2d9;
+  color: #5c78a0;
 }
 
 .startup-overlay-body {
@@ -523,45 +526,64 @@
   justify-items: center;
   gap: 16px;
   margin-top: 34px;
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(147, 197, 253, 0.3);
+  background: rgba(255, 255, 255, 0.74);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
 }
 
 .startup-overlay-progress {
   width: 100%;
-  height: 7px;
+  height: 8px;
   overflow: hidden;
   border-radius: 999px;
-  background: rgba(128, 174, 223, 0.18);
+  background: rgba(148, 163, 184, 0.18);
 }
 
 .startup-overlay-progress span {
   display: block;
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #69bcff 0%, #3f8cff 100%);
-  box-shadow: 0 0 18px rgba(63, 140, 255, 0.28);
+  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
+  box-shadow: 0 0 18px rgba(37, 99, 235, 0.24);
   transition: width 240ms ease;
 }
 
 .startup-overlay-status {
+  width: 100%;
   display: grid;
   gap: 8px;
   justify-items: center;
 }
 
 .startup-overlay-status strong {
-  color: #1f426d;
+  color: #0f2f59;
   font-size: 16px;
   line-height: 1.5;
 }
 
 .startup-overlay-status span {
-  color: #67819f;
+  color: #5f7188;
   font-size: 13px;
   line-height: 1.7;
 }
 
+.startup-overlay-detail {
+  width: 100%;
+  margin: 4px 0 0;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  background: rgba(254, 242, 242, 0.84);
+  color: #9f2f2f;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
 .startup-overlay-actions {
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 @keyframes startup-overlay-enter {

apps/ui/src/styles/theme-openclaw.css

@@ -10,6 +10,10 @@
   --revamp-blue-strong: #1d4ed8;
   --revamp-blue-soft: #e0edff;
   --revamp-blue-border: rgba(59, 130, 246, 0.48);
+  --revamp-violet: #7c3aed;
+  --revamp-violet-soft: #ede9fe;
+  --revamp-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+  --revamp-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.11) 0%, rgba(124, 58, 237, 0.1) 100%);
   --revamp-cyber-blue: #0f6eea;
   --revamp-cyber-cyan: #19b6d9;
   --revamp-cyber-glow: rgba(37, 99, 235, 0.18);
@@ -17,6 +21,7 @@
   --revamp-border-strong: rgba(148, 163, 184, 0.38);
   --revamp-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
   --revamp-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.04);
+  --revamp-shadow-card: 0 22px 54px rgba(37, 99, 235, 0.13);
   min-width: 960px;
   grid-template-columns: clamp(260px, 20vw, 280px) minmax(0, 1fr);
   background: var(--revamp-canvas);
@@ -551,6 +556,91 @@
   box-shadow: var(--revamp-shadow-soft);
 }
 
+.shell.openclaw-theme .bind-entry {
+  position: relative;
+  overflow: hidden;
+  gap: 18px;
+  padding: 30px;
+  border: 1px solid rgba(147, 197, 253, 0.42);
+  background:
+    linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(245, 243, 255, 0.62) 42%, rgba(255, 255, 255, 0.92) 100%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
+  box-shadow: var(--revamp-shadow-card);
+}
+
+.shell.openclaw-theme .bind-entry::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.shell.openclaw-theme .bind-entry-copy,
+.shell.openclaw-theme .bind-entry-benefits,
+.shell.openclaw-theme .bind-row {
+  position: relative;
+  z-index: 1;
+}
+
+.shell.openclaw-theme .bind-entry-copy strong {
+  color: #0f2f59;
+  font-size: 26px;
+  font-weight: 800;
+}
+
+.shell.openclaw-theme .bind-entry-copy p {
+  max-width: 560px;
+  color: #536b88;
+}
+
+.shell.openclaw-theme .bind-entry-kicker {
+  border-color: rgba(37, 99, 235, 0.24);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--revamp-blue-strong);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.56);
+}
+
+.shell.openclaw-theme .bind-entry-benefit {
+  border-color: rgba(147, 197, 253, 0.38);
+  background: rgba(255, 255, 255, 0.72);
+  color: #23466d;
+  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.06);
+}
+
+.shell.openclaw-theme .bind-entry-benefit-index {
+  background: var(--revamp-gradient);
+  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
+}
+
+.shell.openclaw-theme .bind-row {
+  align-items: stretch;
+  padding: 6px;
+  border-radius: 16px;
+  border: 1px solid rgba(147, 197, 253, 0.42);
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.shell.openclaw-theme .bind-row input {
+  min-height: 46px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .bind-row input:focus {
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .bind-row button {
+  min-height: 46px;
+  border-radius: 12px;
+  background: var(--revamp-gradient);
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
+}
+
 .shell.openclaw-theme .status-chip {
   border-color: var(--revamp-border);
   padding: 3px 9px;
@@ -577,24 +667,29 @@
 
 .conversation-shell .conversation-panel-kicker {
   border-color: var(--revamp-border);
-  background: var(--revamp-surface);
+  background: rgba(255, 255, 255, 0.82);
   color: var(--revamp-text-muted);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
 }
 
 .conversation-shell .conversation-workspace {
-  padding: 16px 18px 18px;
-  border-radius: 22px;
-  border: 1px solid rgba(226, 232, 240, 0.82);
-  background: rgba(255, 255, 255, 0.66);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
+  padding: 18px 20px 20px;
+  border-radius: 24px;
+  border: 1px solid rgba(147, 197, 253, 0.32);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 255, 0.74)),
+    var(--revamp-gradient-soft);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 18px 44px rgba(37, 99, 235, 0.08);
 }
 
 .conversation-shell .message-list {
   min-height: 0;
   height: 100%;
   overflow: auto;
-  gap: 20px;
-  padding: 8px 4px 18px 0;
+  gap: 22px;
+  padding: 10px 6px 20px 0;
   align-content: start;
   background: transparent;
   scrollbar-color: rgba(148, 163, 184, 0.52) transparent;
@@ -925,16 +1020,18 @@
   gap: var(--space-3);
   max-width: min(72%, 760px);
   padding: var(--space-4) var(--space-5);
-  border-radius: var(--radius-lg);
-  border-color: var(--revamp-border);
-  background: var(--revamp-surface);
-  box-shadow: var(--revamp-shadow-soft);
+  border-radius: 18px;
+  border-color: rgba(147, 197, 253, 0.28);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 12px 26px rgba(15, 23, 42, 0.06);
 }
 
 .conversation-shell .message-bubble-user {
   margin-left: auto;
-  border-color: rgba(147, 197, 253, 0.7);
-  background: #eff6ff;
+  border-color: rgba(96, 165, 250, 0.42);
+  background: linear-gradient(135deg, #eaf3ff 0%, #f2f7ff 100%);
   color: var(--revamp-text);
 }
 
@@ -950,10 +1047,12 @@
 
 .conversation-shell .message-card.assistant .markdown-body {
   padding: var(--space-5) var(--space-6);
-  border-radius: var(--radius-lg);
-  border-color: var(--revamp-border);
-  background: var(--revamp-surface);
-  box-shadow: var(--revamp-shadow-soft);
+  border-radius: 18px;
+  border: 1px solid rgba(203, 213, 225, 0.72);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 12px 28px rgba(15, 23, 42, 0.055);
 }
 
 .conversation-shell .message-card.user .message-plain-text,
@@ -971,7 +1070,11 @@
 }
 
 .conversation-shell .message-card.assistant .generation-status-card {
-  border-radius: 22px;
+  border-radius: 18px;
+  border-color: rgba(37, 99, 235, 0.24);
+  background:
+    linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.94));
+  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.08);
 }
 
 .conversation-shell .message-card.assistant .message-trace.streaming {
@@ -982,6 +1085,11 @@
   min-height: 36px;
 }
 
+.conversation-shell .message-card.assistant .reasoning-strip {
+  border: 1px solid rgba(203, 213, 225, 0.62);
+  background: rgba(248, 250, 252, 0.88);
+}
+
 .conversation-shell .message-card.assistant .reasoning-strip.streaming .reasoning-strip-action {
   color: #64748b;
 }
@@ -1019,11 +1127,11 @@
   --composer-textarea-max-height: 188px;
   position: relative;
   gap: 0;
-  padding-top: 11px;
+  padding: 13px 4px 0;
   margin-top: auto;
-  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0) 18px);
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0), rgba(248, 251, 255, 0.92) 24px);
   box-shadow: none;
-  border-top: 1px solid var(--revamp-border);
+  border-top: 1px solid rgba(147, 197, 253, 0.22);
 }
 
 .conversation-shell .composer-shell.resizing,
@@ -1052,7 +1160,7 @@
   width: 38px;
   height: 3px;
   border-radius: 999px;
-  background: rgba(37, 99, 235, 0.22);
+  background: rgba(37, 99, 235, 0.2);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
   opacity: 0.72;
   transition: background 160ms ease, opacity 160ms ease, transform 160ms ease;
@@ -1073,19 +1181,23 @@
 
 .conversation-shell .composer-surface {
   display: grid;
-  gap: 9px;
-  padding: 11px 13px 10px;
-  border-radius: 18px;
-  border-color: rgba(37, 99, 235, 0.38);
-  background: #ffffff;
-  box-shadow: var(--revamp-shadow-soft);
+  gap: 10px;
+  padding: 12px 14px 11px;
+  border-radius: 20px;
+  border: 1px solid rgba(147, 197, 253, 0.42);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    0 18px 38px rgba(37, 99, 235, 0.1);
 }
 
 .conversation-shell .composer-surface:focus-within {
-  border-color: rgba(37, 99, 235, 0.52);
+  border-color: rgba(37, 99, 235, 0.58);
   box-shadow:
-    0 0 0 1px rgba(37, 99, 235, 0.08),
-    var(--revamp-shadow-soft);
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    0 0 0 3px rgba(37, 99, 235, 0.08),
+    0 20px 42px rgba(37, 99, 235, 0.12);
 }
 
 .conversation-shell .composer-field textarea,
@@ -1131,8 +1243,8 @@
 .conversation-shell .skill-trigger,
 .conversation-shell .skill-chip,
 .conversation-shell .composer-attachment-chip {
-  border-color: var(--revamp-border);
-  background: var(--revamp-surface-soft);
+  border-color: rgba(147, 197, 253, 0.34);
+  background: rgba(239, 246, 255, 0.78);
   color: var(--revamp-blue);
   box-shadow: none;
 }
@@ -1195,16 +1307,16 @@
   padding: 0;
   border-radius: 999px;
   flex: 0 0 auto;
-  background: var(--revamp-blue);
+  background: var(--revamp-gradient);
   color: #ffffff;
   font-size: 0;
-  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
   transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
 }
 
 .conversation-shell .composer-submit:hover:not(:disabled) {
-  background: var(--revamp-blue-strong);
-  box-shadow: 0 9px 20px rgba(37, 99, 235, 0.2);
+  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.26);
 }
 
 .conversation-shell .composer-submit:disabled {