feat: scaffold agentic interior design workflow
This commit is contained in:
Codex
@@ -0,0 +1,945 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #e8ebe8;
|
||||
--surface: #f5f6f3;
|
||||
--surface-raised: #fbfcf9;
|
||||
--surface-muted: #e1e5e1;
|
||||
--canvas: #d7dbd6;
|
||||
--text: #1e2521;
|
||||
--text-soft: #66706a;
|
||||
--text-faint: #8b948e;
|
||||
--line: #cdd3ce;
|
||||
--line-strong: #b9c1bb;
|
||||
--accent: #3f6757;
|
||||
--accent-strong: #2f5244;
|
||||
--accent-soft: #d9e6df;
|
||||
--warning: #9a682d;
|
||||
--warning-soft: #f0e5d2;
|
||||
--shadow: 0 18px 55px rgb(49 67 58 / 0.1);
|
||||
--radius-surface: 14px;
|
||||
--radius-control: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #1b211e;
|
||||
--surface: #222a26;
|
||||
--surface-raised: #29312d;
|
||||
--surface-muted: #303934;
|
||||
--canvas: #171c19;
|
||||
--text: #edf0ec;
|
||||
--text-soft: #b1bab4;
|
||||
--text-faint: #87918b;
|
||||
--line: #3a443e;
|
||||
--line-strong: #4b5750;
|
||||
--accent: #82ac99;
|
||||
--accent-strong: #9abbaa;
|
||||
--accent-soft: #31483d;
|
||||
--warning: #d5a05d;
|
||||
--warning-soft: #443726;
|
||||
--shadow: 0 20px 60px rgb(7 11 8 / 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
[role="tab"]:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.studio-shell {
|
||||
min-height: 100dvh;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 14% -10%, rgb(109 142 124 / 0.12), transparent 32%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 70px;
|
||||
padding: 0 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.brand-block,
|
||||
.topbar-actions,
|
||||
.canvas-actions,
|
||||
.save-state,
|
||||
.button,
|
||||
.tab-trigger,
|
||||
.canvas-status,
|
||||
.lock-label,
|
||||
.inspector-footer > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--radius-control);
|
||||
color: #eef3ef;
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.brand-name,
|
||||
.brand-subtitle,
|
||||
.rail-heading p,
|
||||
.panel-title,
|
||||
.panel-caption,
|
||||
.helper-text,
|
||||
.style-label,
|
||||
.constraint-section p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 14px;
|
||||
font-weight: 680;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
margin-top: 3px;
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.save-state {
|
||||
gap: 5px;
|
||||
margin-right: 6px;
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button,
|
||||
.icon-button,
|
||||
.send-button {
|
||||
min-height: 36px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
font-weight: 620;
|
||||
transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.button {
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 0 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
.icon-button:active,
|
||||
.send-button:active,
|
||||
.stage-item:active,
|
||||
.layer-row:active,
|
||||
.direction-option:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: #f1f5f2;
|
||||
background: var(--accent-strong);
|
||||
border-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.button-secondary:hover,
|
||||
.icon-button:hover {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.button.compact {
|
||||
min-height: 34px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.studio-grid {
|
||||
min-height: calc(100dvh - 70px);
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(560px, 1fr) 330px;
|
||||
}
|
||||
|
||||
.workflow-rail,
|
||||
.style-inspector {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.workflow-rail {
|
||||
padding: 22px 14px;
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.rail-heading {
|
||||
padding: 0 8px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.rail-heading p {
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.stage-list {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.stage-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
padding: 7px 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-soft);
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.stage-item:hover {
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.stage-active {
|
||||
color: var(--text);
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
|
||||
.stage-index {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stage-complete .stage-index {
|
||||
color: #edf4ef;
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.stage-active .stage-index {
|
||||
border: 6px solid var(--accent);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.stage-copy {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stage-copy strong {
|
||||
font-size: 12px;
|
||||
font-weight: 630;
|
||||
}
|
||||
|
||||
.stage-copy small {
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.rail-note {
|
||||
margin: 24px 4px 0;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
color: var(--warning);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--warning-soft);
|
||||
}
|
||||
|
||||
.rail-note p {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(540px, 1fr) auto;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.workspace-tabs,
|
||||
.tab-content {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.workspace-toolbar {
|
||||
height: 54px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tab-trigger {
|
||||
min-height: 34px;
|
||||
gap: 6px;
|
||||
padding: 0 11px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tab-trigger[data-state="active"] {
|
||||
color: var(--text);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.canvas-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon-button,
|
||||
.send-button {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--text-soft);
|
||||
border-color: var(--line);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.icon-button.small {
|
||||
width: 30px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
z-index: 20;
|
||||
padding: 7px 9px;
|
||||
border-radius: 7px;
|
||||
color: var(--surface-raised);
|
||||
background: var(--text);
|
||||
font-size: 11px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.plan-workspace {
|
||||
height: calc(100% - 54px);
|
||||
min-height: 486px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 210px;
|
||||
}
|
||||
|
||||
.plan-canvas {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.canvas-labels,
|
||||
.canvas-status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.canvas-labels span:first-child {
|
||||
color: var(--text);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.plan-image-frame {
|
||||
position: relative;
|
||||
min-height: 405px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-surface);
|
||||
background: #f1f2ee;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.plan-image {
|
||||
object-fit: contain;
|
||||
padding: 12px;
|
||||
filter: contrast(1.02) saturate(0.72);
|
||||
}
|
||||
|
||||
.region-outline {
|
||||
position: absolute;
|
||||
inset: 8% 10% 9% 9%;
|
||||
border: 2px solid color-mix(in srgb, var(--accent) 78%, transparent);
|
||||
border-radius: 9px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.issue-marker {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff9ef;
|
||||
border: 2px solid #f7ead5;
|
||||
border-radius: 50%;
|
||||
background: var(--warning);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 5px 18px rgb(104 71 32 / 0.22);
|
||||
}
|
||||
|
||||
.issue-one {
|
||||
left: 31%;
|
||||
top: 24%;
|
||||
}
|
||||
|
||||
.issue-two {
|
||||
right: 26%;
|
||||
bottom: 23%;
|
||||
}
|
||||
|
||||
.canvas-status {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.canvas-status span:first-child {
|
||||
gap: 5px;
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.canvas-status span:last-child {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.layer-panel {
|
||||
padding: 18px 14px;
|
||||
border-left: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.panel-title-row,
|
||||
.inspector-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.panel-caption {
|
||||
margin-top: 4px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.layer-list {
|
||||
margin-top: 15px;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.layer-row {
|
||||
min-height: 37px;
|
||||
padding: 0 9px;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-faint);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.layer-row:hover {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.layer-row.is-visible {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.layer-row small {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.panel-divider {
|
||||
height: 1px;
|
||||
margin: 18px 0;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-top: 10px;
|
||||
padding: 3px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.segmented-control button {
|
||||
min-height: 30px;
|
||||
padding: 0 5px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
color: var(--text-soft);
|
||||
background: transparent;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.segmented-control button.active {
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: 0 2px 7px rgb(49 67 58 / 0.1);
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
margin-top: 10px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.empty-workspace {
|
||||
min-height: 486px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-faint);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-workspace h2 {
|
||||
margin: 14px 0 6px;
|
||||
color: var(--text);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.empty-workspace p {
|
||||
max-width: 360px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.conversation {
|
||||
min-height: 210px;
|
||||
padding: 14px 18px 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.message-stream {
|
||||
max-height: 132px;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 84%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.message-user {
|
||||
justify-self: end;
|
||||
grid-template-columns: 1fr;
|
||||
padding: 9px 11px;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.assistant-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--accent-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.message p {
|
||||
margin: 2px 0 0;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.message small {
|
||||
color: var(--text);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.composer {
|
||||
margin-top: 12px;
|
||||
padding: 9px 10px 8px 12px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-surface);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.composer label {
|
||||
display: block;
|
||||
color: var(--text-faint);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.composer-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.composer input {
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.composer input::placeholder {
|
||||
color: var(--text-faint);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.composer input:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
width: 32px;
|
||||
min-height: 32px;
|
||||
color: #f2f6f3;
|
||||
border: 0;
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.style-inspector {
|
||||
min-width: 0;
|
||||
padding: 20px 18px;
|
||||
border-left: 1px solid var(--line);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.lock-label {
|
||||
gap: 4px;
|
||||
padding: 5px 7px;
|
||||
color: var(--accent-strong);
|
||||
border-radius: 7px;
|
||||
background: var(--accent-soft);
|
||||
font-size: 9px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.style-section {
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
.style-section label,
|
||||
.style-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-soft);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.style-section textarea {
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.direction-list {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.direction-option {
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 9px;
|
||||
display: grid;
|
||||
grid-template-columns: 38px 1fr 16px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-raised);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.direction-option:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.direction-option.selected {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.direction-colors {
|
||||
height: 49px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
border-radius: 7px;
|
||||
border: 1px solid rgb(71 84 76 / 0.16);
|
||||
}
|
||||
|
||||
.direction-option > span:nth-child(2) {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.direction-option strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.direction-option small {
|
||||
color: var(--text-soft);
|
||||
font-size: 9px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-list span,
|
||||
.tag-list button {
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
color: var(--text-soft);
|
||||
background: var(--surface-raised);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.constraint-section {
|
||||
padding: 11px;
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.constraint-section p:last-child {
|
||||
color: var(--text-soft);
|
||||
font-size: 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.inspector-footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.inspector-footer > div {
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.studio-grid {
|
||||
grid-template-columns: 190px minmax(520px, 1fr);
|
||||
}
|
||||
|
||||
.style-inspector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.topbar {
|
||||
height: auto;
|
||||
min-height: 66px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.save-state,
|
||||
.topbar-actions .button-secondary,
|
||||
.brand-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.studio-grid {
|
||||
min-height: calc(100dvh - 66px);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workflow-rail {
|
||||
padding: 9px 12px;
|
||||
overflow-x: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.rail-heading,
|
||||
.rail-note,
|
||||
.stage-copy small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stage-list {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.stage-item {
|
||||
min-width: 104px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.plan-workspace {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.plan-canvas {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.plan-image-frame {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.layer-panel {
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.layer-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.conversation {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "空间风格工作台",
|
||||
description: "从户型清洗到 Style DNA 和多轮效果图编辑的空间概念设计工作台。",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
|
||||
return (
|
||||
<html lang="zh-CN">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { WorkflowStudio } from "@/components/workflow-studio";
|
||||
|
||||
export default function Home() {
|
||||
return <WorkflowStudio />;
|
||||
}
|
||||
Reference in New Issue
Block a user