feat(view): reflect 시안 ① main screen and ⑤ save dialog
- Header follows the mockup: dark bar, project line, stage chips (② shows the pending change count), save status, 저장 / 엑셀 불러오기 / 프로젝트 열기 and the primary 선택 교각 다시 생성 · 변경 n button. - Left column: pier list with header row, 선택 n기 bulk bar, 입력값 and the 2단계 input card. The bottom input panel is gone. - First save opens 시안 ⑤ (project name, bridge, client, author, 좌표계, memo); later Ctrl+S / 저장 write the same file, as the spec's B5 requires. - Project info (client, author, 좌표계, memo) is kept in the project file. - Style layer uses the mockup's tokens (#18212B header, #1F5FA8 primary, #D5DBE2 borders, #E3EDF8 selected row, JetBrains Mono for numbers). - Not reflected: ② and ③ screens (not built yet), and the mockup's static front preview (the app draws the model in 3D). Not verified in a browser. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
This commit is contained in:
ypshimandClaude Haiku 5.5 committed
1 parent
0b62f694c5
commit
fae8d7b9b8
3 files changed
+193
-27
No files matched your search
+64
-7
@@ -7,7 +7,7 @@ import { buildPier, type PierModel } from './core/geometry';
|
||||
import { NOT_IMPLEMENTED_RULES, validateInput, validatePier } from './core/validate';
|
||||
import { buildTemplateWorkbook } from './core/template';
|
||||
import { EDITABLE_FIELDS, overrideKeys, pendingKeys, revertDraft, type EditableKey, type PierValues } from './core/changes';
|
||||
import { parseProject, SCHEMA_VERSION, serializeProject, type ProjectFile } from './core/project';
|
||||
import { parseProject, SCHEMA_VERSION, serializeProject, type ProjectFile, type ProjectInfo } from './core/project';
|
||||
import { clearBackup, readBackup, writeBackup, type Backup } from './view/backup';
|
||||
import type { Issue, PierInput, PierType } from './core/types';
|
||||
import { buildPierScene, viewPosition, type PartName, type PierScene, type ViewKind } from './view/scene';
|
||||
@@ -38,6 +38,7 @@ const VIEWS: { kind: ViewKind; label: string }[] = [
|
||||
];
|
||||
|
||||
const TYPES: PierType[] = ['T형', '2주형', '3주형'];
|
||||
const CRS = '국토좌표계 (x = 동, y = 북)';
|
||||
|
||||
interface Pending {
|
||||
fileName: string;
|
||||
@@ -52,7 +53,9 @@ const state = {
|
||||
view: 'iso' as ViewKind,
|
||||
visible: Object.fromEntries(PART_GROUPS.flatMap((g) => g.parts).map((p) => [p, true])) as Record<PartName, boolean>,
|
||||
scene: null as PierScene | null,
|
||||
project: { name: '', bridge: '' },
|
||||
project: { name: '', bridge: '', client: '', author: '', crs: CRS, memo: '' } as ProjectInfo,
|
||||
/** True once the project has a file on disk (first save via 시안 ⑤, or an opened file). Later saves go straight to it. */
|
||||
savedOnce: false,
|
||||
filter: 'all' as 'all' | PierType,
|
||||
pending: null as Pending | null,
|
||||
source: { fileName: '', sheets: [] as string[] },
|
||||
@@ -256,9 +259,13 @@ function renderHeader(): void {
|
||||
$('step1-status').textContent = pier?.model ? '생성됨' : '미생성';
|
||||
renderSaveStatus();
|
||||
const total = pendingTotal();
|
||||
const checked = state.piers.filter((p) => p.checked).length;
|
||||
$('step2-status').textContent = total ? `변경 ${total}건 · 재생성 필요` : '예정';
|
||||
const regen = $<HTMLButtonElement>('regen');
|
||||
regen.disabled = !state.piers.some((p) => p.checked);
|
||||
regen.disabled = checked === 0;
|
||||
regen.textContent = total ? `선택 교각 다시 생성 · 변경 ${total}` : '선택 교각 형상 생성';
|
||||
$('bulk-count').textContent = `선택 ${checked}기`;
|
||||
$<HTMLButtonElement>('bulk-regen').disabled = checked === 0;
|
||||
}
|
||||
|
||||
// --- results panel (시안 ① 입력값 · 계산 결과) ----------------------------------------
|
||||
@@ -461,7 +468,7 @@ function isDirty(): boolean {
|
||||
function currentProjectText(): string {
|
||||
return serializeProject({
|
||||
schemaVersion: SCHEMA_VERSION,
|
||||
project: { name: state.project.name, bridge: state.project.bridge, client: '', author: '', crs: '', memo: '' },
|
||||
project: { ...state.project },
|
||||
source: state.source,
|
||||
piers: state.piers.map((p) => ({ id: p.input.name, input: p.input, defaults: p.defaults, draft: p.draft })),
|
||||
history: state.history,
|
||||
@@ -481,11 +488,55 @@ function renderSaveStatus(): void {
|
||||
}
|
||||
}
|
||||
|
||||
/** 저장 button and Ctrl+S: the first save opens the project dialog (시안 ⑤); later saves write the same file. */
|
||||
function saveProject(): void {
|
||||
if (state.piers.length === 0) return;
|
||||
if (!state.savedOnce) {
|
||||
openSaveDialog();
|
||||
return;
|
||||
}
|
||||
writeProjectFile();
|
||||
}
|
||||
|
||||
function projectFileName(): string {
|
||||
return `${state.project.bridge || state.project.name || '교각설계'}_교각설계.pzr.json`;
|
||||
}
|
||||
|
||||
function openSaveDialog(): void {
|
||||
$<HTMLInputElement>('sv-name').value = state.project.name;
|
||||
$<HTMLInputElement>('sv-bridge').value = state.project.bridge;
|
||||
$<HTMLInputElement>('sv-client').value = state.project.client;
|
||||
$<HTMLInputElement>('sv-author').value = state.project.author;
|
||||
$<HTMLTextAreaElement>('sv-memo').value = state.project.memo;
|
||||
$('sv-file').textContent = projectFileName();
|
||||
$<HTMLDialogElement>('save-dialog').showModal();
|
||||
$<HTMLInputElement>('sv-name').focus();
|
||||
}
|
||||
|
||||
function confirmSaveDialog(): void {
|
||||
const name = $<HTMLInputElement>('sv-name').value.trim();
|
||||
if (!name) {
|
||||
$<HTMLInputElement>('sv-name').focus();
|
||||
setStatus('프로젝트명을 입력하세요.');
|
||||
return;
|
||||
}
|
||||
state.project = {
|
||||
name,
|
||||
bridge: $<HTMLInputElement>('sv-bridge').value.trim(),
|
||||
client: $<HTMLInputElement>('sv-client').value.trim(),
|
||||
author: $<HTMLInputElement>('sv-author').value.trim(),
|
||||
crs: CRS,
|
||||
memo: $<HTMLTextAreaElement>('sv-memo').value.trim(),
|
||||
};
|
||||
$<HTMLDialogElement>('save-dialog').close();
|
||||
writeProjectFile();
|
||||
}
|
||||
|
||||
function writeProjectFile(): void {
|
||||
state.savedOnce = true;
|
||||
state.history = [...state.history, { version: String(state.history.length + 1), note: '저장', at: new Date().toISOString() }];
|
||||
const text = currentProjectText();
|
||||
const name = `${state.project.bridge || state.project.name || '교각설계'}_교각설계.pzr.json`;
|
||||
const name = projectFileName();
|
||||
const url = URL.createObjectURL(new Blob([text], { type: 'application/json' }));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
@@ -501,7 +552,7 @@ function saveProject(): void {
|
||||
/** Opens a project from its text. A backup stays unsaved until the user saves it. */
|
||||
function openProjectText(text: string, saved: boolean): void {
|
||||
const parsed = parseProject(text);
|
||||
state.project = { name: parsed.project.name, bridge: parsed.project.bridge };
|
||||
state.project = { ...parsed.project };
|
||||
state.source = parsed.source;
|
||||
state.history = parsed.history;
|
||||
state.piers = parsed.piers.map((p) => ({
|
||||
@@ -520,6 +571,7 @@ function openProjectText(text: string, saved: boolean): void {
|
||||
async function openProjectFile(file: File): Promise<void> {
|
||||
try {
|
||||
openProjectText(await file.text(), true);
|
||||
state.savedOnce = true;
|
||||
clearBackup().catch(() => undefined);
|
||||
setStatus(`${file.name}을 열었습니다. ${state.piers.length}기를 원본 엑셀 없이 다시 생성했습니다.`);
|
||||
} catch (err) {
|
||||
@@ -680,7 +732,7 @@ function applyImport(): void {
|
||||
const p = state.pending;
|
||||
const name = $<HTMLInputElement>('project-name').value.trim();
|
||||
if (!p || !name) return;
|
||||
state.project = { name, bridge: $<HTMLInputElement>('bridge-name').value.trim() };
|
||||
state.project = { ...state.project, name, bridge: $<HTMLInputElement>('bridge-name').value.trim() };
|
||||
state.piers = p.entries.filter((e) => e.checked && selectable(p, e));
|
||||
state.active = state.piers[0]?.input.name ?? null;
|
||||
state.filter = 'all';
|
||||
@@ -688,6 +740,7 @@ function applyImport(): void {
|
||||
state.source = { fileName: p.fileName, sheets: p.sheets.map((sheet) => sheet.name) };
|
||||
state.history = [];
|
||||
state.savedSnapshot = null;
|
||||
state.savedOnce = false;
|
||||
$<HTMLDialogElement>('import-dialog').close();
|
||||
setupScene();
|
||||
renderAll();
|
||||
@@ -727,6 +780,10 @@ $<HTMLButtonElement>('dlg-close').addEventListener('click', () => $<HTMLDialogEl
|
||||
$<HTMLButtonElement>('dlg-cancel').addEventListener('click', () => $<HTMLDialogElement>('import-dialog').close());
|
||||
$<HTMLButtonElement>('dlg-apply').addEventListener('click', applyImport);
|
||||
$<HTMLButtonElement>('regen').addEventListener('click', regenerateChecked);
|
||||
$<HTMLButtonElement>('bulk-regen').addEventListener('click', regenerateChecked);
|
||||
$<HTMLButtonElement>('sv-save').addEventListener('click', confirmSaveDialog);
|
||||
$<HTMLButtonElement>('sv-cancel').addEventListener('click', () => $<HTMLDialogElement>('save-dialog').close());
|
||||
$<HTMLButtonElement>('sv-close').addEventListener('click', () => $<HTMLDialogElement>('save-dialog').close());
|
||||
$<HTMLButtonElement>('edit-regen').addEventListener('click', () => {
|
||||
const pier = activePier();
|
||||
if (pier) regenerateOne(pier.input.name);
|
||||
|
||||
@@ -595,3 +595,53 @@ table {
|
||||
.edit-row input { width: 110px; padding: 4px 6px; border: 1px solid #b9c4d0; border-radius: 4px; }
|
||||
.edit-row.changed input { border: 2px solid #e8833a; background: #fff6ee; }
|
||||
.edit-row.changed label { color: #a4530e; }
|
||||
|
||||
/* ---- 시안 ① 디자인 반영 (RAG/Pierzainer UI 시안 (1).html) ---- */
|
||||
body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif; }
|
||||
.top { background: #18212b; color: #ffffff; padding: 10px 24px; }
|
||||
.top .brand strong { font-size: 18px; letter-spacing: 0.01em; }
|
||||
.top .brand > span:not(.proj) { font-size: 12px; color: #b8c2ce; }
|
||||
.proj { padding-left: 14px; border-left: 1px solid #33404f; color: #ffffff; font-size: 13px; font-weight: 700; }
|
||||
.steps .step { color: #dce3ea; min-height: 44px; padding: 4px 14px; border-radius: 6px; background: transparent; border: 0; }
|
||||
.steps .step.current { background: #ffffff; color: #18212b; }
|
||||
.steps .step em { font-style: normal; color: #b8c2ce; font-size: 12px; }
|
||||
.steps .step.current em { color: #55606e; }
|
||||
.steps .step[aria-disabled='true'] em { color: #b8c2ce; }
|
||||
.savest { color: #f2c48d; font-size: 12px; }
|
||||
.actions { color: #ffffff; }
|
||||
.btn-s, .btn-p, .btn-o { display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; min-height: 44px; border-radius: 6px; cursor: pointer; box-sizing: border-box; text-decoration: none; }
|
||||
.btn-s { padding: 0 14px; border: 1px solid #8c99a8; background: transparent; color: #ffffff; }
|
||||
.btn-s:hover { border-color: #c3cbd4; }
|
||||
.btn-s:disabled { opacity: 0.45; cursor: default; }
|
||||
.btn-p { padding: 0 16px; border: 0; background: #1f5fa8; color: #ffffff; font-weight: 700; font-size: 14px; }
|
||||
.btn-p:hover:not(:disabled) { background: #174c88; }
|
||||
.btn-p:disabled { opacity: 0.45; cursor: default; }
|
||||
.btn-o { padding: 0 12px; min-height: 40px; border: 1px solid #1f5fa8; background: #ffffff; color: #1f5fa8; }
|
||||
.btn-o:hover:not(:disabled) { background: #f2f7fc; color: #123e70; }
|
||||
.btn-o:disabled { opacity: 0.45; cursor: default; }
|
||||
.lnk { font-size: 12px; color: #1f5fa8; background: none; border: 0; min-height: 36px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
|
||||
.lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #55606e; margin: 0 0 8px; }
|
||||
.panel { background: #ffffff; border: 1px solid #d5dbe2; border-radius: 8px; padding: 16px; }
|
||||
.piers { display: flex; flex-direction: column; gap: 6px; }
|
||||
.pier-tools { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; }
|
||||
.pier-tools select { border: 1px solid #c3cbd4; border-radius: 6px; background: #ffffff; min-height: 36px; }
|
||||
.phead { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 0 10px 6px; font-size: 12px; color: #55606e; border-bottom: 1px solid #d5dbe2; }
|
||||
.pier-items li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; border-radius: 6px; padding-right: 6px; }
|
||||
.pier-items li:has(.pier-name[aria-pressed='true']) { background: #e3edf8; }
|
||||
.pier-name { border: 0; background: transparent; color: #18212b; text-align: left; font-size: 13px; min-height: 44px; padding: 0 6px; }
|
||||
.pier-name[aria-pressed='true'] { color: #123e70; font-weight: 700; }
|
||||
.badge { font-size: 12px; border-radius: 10px; padding: 2px 8px; background: #e2f2e7; color: #1d6b3a; white-space: nowrap; }
|
||||
.badge.error { background: #fde2e2; color: #9b2c2c; }
|
||||
.pnote { font-size: 12px; color: #55606e; margin: 8px 4px 0; line-height: 1.6; }
|
||||
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #f2f7fc; font-size: 13px; color: #123e70; }
|
||||
.bulk .grow { flex: 1 1 auto; }
|
||||
.pier-input { margin-top: 14px; border-top: 1px solid #d5dbe2; padding-top: 12px; }
|
||||
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e6eaef; font-size: 13px; }
|
||||
.kv dt { color: #55606e; }
|
||||
.kv dd { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-align: right; }
|
||||
.views { display: flex; gap: 2px; background: #eef1f4; border-radius: 6px; padding: 2px; }
|
||||
.views .btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: #18212b; }
|
||||
.views .btn[aria-pressed='true'] { background: #1f5fa8; color: #ffffff; font-weight: 700; }
|
||||
.viewer-head { gap: 8px; }
|
||||
.edit-card h3 { font-size: 12px; color: #55606e; }
|
||||
|
||||
Reference in new issue
Block a user