root
44406b72db
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>
162 lines
2.9 KiB
CSS
162 lines
2.9 KiB
CSS
.project-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 28px;
|
|
}
|
|
|
|
.new-project-card,
|
|
.project-card {
|
|
min-width: 0;
|
|
text-align: left;
|
|
background: transparent;
|
|
}
|
|
|
|
.new-project-card {
|
|
aspect-ratio: 4 / 3;
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
gap: 16px;
|
|
border: 2px dashed #cbd2dc;
|
|
border-radius: 8px;
|
|
color: #111827;
|
|
background: rgba(255, 255, 255, 0.58);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.new-project-card span {
|
|
width: 54px;
|
|
height: 54px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.new-project-card:hover {
|
|
border-color: #050505;
|
|
background: #fff;
|
|
}
|
|
|
|
.project-card {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.project-card-shell {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.project-card-shell.is-selecting .project-card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.project-card-shell.selected .project-thumb {
|
|
border-color: #2563eb;
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), var(--shadow-sm);
|
|
}
|
|
|
|
.project-card-selection {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 4;
|
|
width: 26px;
|
|
height: 26px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.92);
|
|
border-radius: 999px;
|
|
color: #fff;
|
|
background: rgba(17, 24, 39, 0.36);
|
|
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
|
|
}
|
|
|
|
.project-card-shell.selected .project-card-selection {
|
|
background: #2563eb;
|
|
}
|
|
|
|
.project-delete-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 4;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
color: #111827;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
opacity: 0;
|
|
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
|
|
transition: opacity 0.18s ease, transform 0.18s ease;
|
|
}
|
|
|
|
.project-card-shell:hover .project-delete-button,
|
|
.project-delete-button:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.project-delete-button:hover {
|
|
transform: scale(1.04);
|
|
color: #b42318;
|
|
}
|
|
|
|
.project-card .project-thumb,
|
|
.project-card-overlay {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.project-card-overlay {
|
|
z-index: 2;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
color: #050505;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.project-card:hover .project-card-overlay {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.project-card strong {
|
|
overflow: hidden;
|
|
color: #111827;
|
|
font-size: 17px;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.project-card small {
|
|
color: #7d8492;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.project-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.project-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|