Skip to content

Q
qjclaw-dmg
Commit 613f5921 authored by edy's avatar edy
Browse files
Options

feat(ui): refresh desktop client visuals

parent f7047bcf
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 71 deletions
apps/ui/src/features/chat/BindEntry.tsx
View file @ 613f5921
......@@ -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
View file @ 613f5921
......@@ -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
View file @ 613f5921
......@@ -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
View file @ 613f5921
......@@ -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
View file @ 613f5921
......@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment