Initial commit: img-infinite-canvas AI design workbench MVP

Moteva-style AI design workbench replica. Home prompt creates a project;
the project page provides an infinite canvas with node drag, zoom/pan,
a design chat panel, history replay, image asset upload, and project
save/regenerate.

- Backend: go-zero, DDD layering, sqlc/pgx, optional PostgreSQL; memory
  or Redis cache; asynq job queue; MinIO/S3/R2/OSS object storage;
  sky-valley/pi agent runtime adapter.
- Frontend: Next.js App Router + Vite artifact build, TypeScript, i18n,
  shadcn/ui components, auth (OTP/Turnstile/Google/WeChat).
- Deploy: Docker Compose and k3s manifests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-07 23:15:37 +08:00
commit 44406b72db
349 changed files with 73265 additions and 0 deletions
@@ -0,0 +1,181 @@
.image-generator-floating-composer {
position: absolute;
z-index: 36;
min-height: 188px;
border: 1px solid #cbd2dc;
border-radius: 28px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 45px rgba(17, 24, 39, 0.14);
pointer-events: auto;
}
.image-generator-reference-row {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 72px;
margin: 14px 16px 0;
}
.image-generator-reference-tile,
.image-generator-reference-preview {
width: 72px;
height: 72px;
border-radius: 20px;
}
.image-generator-reference-tile {
display: grid;
place-items: center;
gap: 6px;
color: #a6abb5;
background: #f4f4f4;
font-size: 12px;
}
.image-generator-reference-tile span {
display: block;
}
.image-generator-reference-preview {
position: relative;
flex: 0 0 auto;
overflow: visible;
background: #eef0f3;
}
.image-generator-reference-preview img {
display: block;
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
}
.image-generator-reference-preview button {
position: absolute;
top: -8px;
right: -8px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 999px;
color: #1f2937;
background: #fff;
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16);
}
.image-generator-reference-preview button:hover {
background: #f5f6f8;
}
.image-generator-prompt-editor {
display: block;
box-sizing: border-box;
width: 100%;
min-height: 92px;
margin: 10px 0 0;
padding: 0 32px;
border: 0;
outline: 0;
resize: none;
color: #1f2937;
background: transparent;
caret-color: #111827;
font-family: inherit;
font-size: 18px;
font-weight: 520;
line-height: 26px;
}
.image-generator-prompt-editor::placeholder {
color: #a6acb6;
opacity: 1;
}
.image-generator-prompt-editor.is-locked {
color: #8b93a1;
cursor: default;
user-select: text;
caret-color: transparent;
}
.image-generator-prompt-editor.is-locked::placeholder {
color: #b7bdc7;
}
.image-generator-composer-toolbar {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 14px 13px 28px;
}
.image-generator-settings-chip,
.image-generator-model-button,
.image-generator-send-button {
height: 36px;
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
border-radius: 999px;
color: #222831;
background: #fff;
font-size: 15px;
font-weight: 560;
}
.image-generator-settings-chip {
padding: 0 8px;
}
.image-generator-settings-chip:hover,
.image-generator-model-button:hover {
background: #f3f4f6;
}
.image-generator-reference-tile:disabled,
.image-generator-settings-chip:disabled,
.image-generator-model-button:disabled {
cursor: default;
color: #9aa2af;
background: #f5f6f8;
opacity: 0.72;
}
.image-generator-composer-spacer {
flex: 1;
}
.image-generator-model-button {
max-width: 162px;
padding: 0 10px;
overflow: hidden;
white-space: nowrap;
}
.image-generator-model-button span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.image-generator-send-button {
min-width: 58px;
justify-content: center;
padding: 0 18px;
color: #fff;
background: #222;
font-weight: 760;
}
.image-generator-send-button:disabled {
color: #a5a9b0;
background: #efefef;
opacity: 1;
}