azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): Wave 3 batch4 — 外壳账户菜单 + 设置dirty引擎 + 商品创建抽屉多图

Browse Source 
全局外壳(sub-agent):侧栏 .user 点击弹账户菜单(头像+店名+用户名[非邮箱,认证定调]+
  个人设置/消息/团队/消费/退出),复用现成 .shell-account-menu CSS,点外部/ESC 收起
设置页(sub-agent):dirty-state 引擎(baseline+draft diff 13字段,顶栏「保存所有变更」
  无改动 disabled、改动激活+N项计数、统一保存、beforeunload、nav dirty-dot);修一处类型错(|| {} → 可选链)
商品创建抽屉(sub-agent):主图多图≤5+.pf-grid缩略网格+单张删、submit主图/卖点必填校验+收编bulletDraft、
  上传区拖拽变橙、卖点字重对齐;内联 style 抽进 css

验证: tsc 0 · build 0 · 走查 账户菜单5项+ESC、设置保存按钮无改动disabled、抽屉multiple+pf-grid 全过 · 0 console error

⚠️ 外壳:顶栏头像菜单接线需改 App.tsx/pipeline.tsx(超出单文件范围),侧栏入口已全可用。移交监督。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-19 05:29:23 +08:00
co-authored by Claude Opus 4.8
parent da8c6a70a7
commit 378b0a350c
6 changed files with 629 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/product-create-page.css
+83 -3
View File
@@ -339,6 +339,8 @@
min-height: 180px;
}
.pc-drawer .form-card .pf-upload-zone:hover { border-color: var(--heat); background: var(--heat-8); }
/* 拖拽悬停:边框/底色变橙(对齐 V1 pfZone dragover) */
.pc-drawer .form-card .pf-upload-zone.is-dragover { border-color: var(--heat); background: var(--heat-8); }
.pc-drawer .form-card .pf-upload-zone .uz-ic {
width: 44px; height: 44px;
margin: 0 auto 10px;
@@ -353,7 +355,7 @@
.pc-drawer .form-card .pf-upload-zone .uz-t strong { color: var(--heat); font-weight: 600; }
.pc-drawer .form-card .pf-upload-zone .uz-d {
margin-top: 8px;
font-family: var(--font-mono); font-size: 12px;
font-family: var(--font-mono); font-size: 11.5px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
/* 示例图 · 纵向卡片 */
@@ -418,13 +420,13 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 12px; color: var(--heat); font-weight: 600;
font-size: 11px; color: var(--heat); font-weight: 700;
display: grid; place-items: center; flex-shrink: 0;
}
.pc-drawer .form-card .bullet-list .bl-text { flex: 1; color: var(--accent-black); }
.pc-drawer .form-card .bullet-list .bl-input {
flex: 1; background: transparent; border: 0; outline: none;
font-size: 14px; color: var(--accent-black); font-family: inherit;
font-size: 13.5px; color: var(--accent-black); font-family: inherit;
}
.pc-drawer .form-card .bullet-list .bl-x {
width: 22px; height: 22px;
@@ -438,3 +440,81 @@
@media (max-width: 900px) {
.pc-drawer .drawer-b .pf-upload-row { grid-template-columns: 1fr; }
}
/* ─── 主图缩略网格 · 多图上传(对齐 V1 #pc-drawer .pf-thumb/.pf-x) ─── */
.pc-drawer .form-card .pf-thumb {
aspect-ratio: 1;
background: var(--background-lighter);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
position: relative; overflow: hidden; cursor: pointer;
}
.pc-drawer .form-card .pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-drawer .form-card .pf-thumb .pf-x {
position: absolute; top: 4px; right: 4px;
width: 22px; height: 22px;
background: rgba(0, 0, 0, .7); color: var(--accent-white);
border: 0; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
opacity: 0; transition: opacity var(--t-base);
}
.pc-drawer .form-card .pf-thumb:hover .pf-x,
.pc-drawer .form-card .pf-thumb:focus-within .pf-x { opacity: 1; }
.pc-drawer .form-card .pf-thumb .pf-x svg { width: 11px; height: 11px; }
/* ─── 校验态 · 必填红字 / 输入框红框(原内联 style 抽成类) ─── */
.pc-drawer .form-card .input.is-error,
.pc-drawer .form-card .input.is-error:focus {
border-color: var(--accent-crimson);
box-shadow: inset 0 0 0 1px var(--crimson-bd);
}
.pc-drawer .pc-err-note {
color: var(--accent-crimson);
font-size: 12px; margin-top: 4px;
}
/* 末尾字段去底距(替代 inline margin-bottom:0) */
.pc-drawer .form-card .field.pc-field-last { margin-bottom: 0; }
/* ─── 使用指南内联说明(原内联 style 抽成类) ─── */
.pc-drawer .pc-guide-note {
padding: 10px 14px;
margin: 0 16px 8px;
background: var(--black-alpha-4);
border-radius: var(--r-md);
font-size: 13px; line-height: 1.7;
color: var(--black-alpha-72);
}
.pc-drawer .pc-guide-note strong { color: var(--accent-black); font-weight: 600; }
/* ─── 抽屉内就地 toast(组件无全局 Shell.toast;镜像 .toast 视觉,自给一条) ─── */
.pc-drawer .pc-toast {
position: absolute; right: 24px; bottom: 80px;
display: flex; align-items: center; gap: 10px;
max-width: 340px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
box-shadow: var(--shadow-floating, 0 8px 24px rgba(0, 0, 0, .1));
animation: pc-toast-in .18s ease-out;
z-index: 2;
}
@keyframes pc-toast-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.pc-drawer .pc-toast .ic-t {
width: 24px; height: 24px; flex-shrink: 0;
display: grid; place-items: center;
background: var(--heat-12); color: var(--heat);
border: 1px solid var(--heat-20);
border-radius: var(--r-sm);
}
.pc-drawer .pc-toast .ic-t svg { width: 13px; height: 13px; }
.pc-drawer .pc-toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; }
.pc-drawer .pc-toast .txt .mono {
display: block; margin-top: 2px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}