seaislee1209andClaude Opus 4.8
378b0a350c
全局外壳(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>
197 lines
13 KiB
CSS
197 lines
13 KiB
CSS
/* 设置页 · 从 public/exact/settings.html 内联 <style> 忠实移植,整段 scope 进 .settings-page 防外泄 · 只用 token */
|
|
.settings-page {
|
|
/* ─── 设置布局:左 nav + 右 panel ─── */
|
|
.settings-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
|
|
|
|
.settings-nav { position: sticky; top: 16px; }
|
|
.settings-nav .nav-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; padding: 0 12px 8px; }
|
|
.settings-nav :where(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--accent-black); border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; text-decoration: none; text-align: left; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); position: relative; }
|
|
.settings-nav :where(a, button):hover { background: var(--background-lighter); }
|
|
.settings-nav :where(a, button):focus-visible { outline: 2px solid var(--heat); outline-offset: 2px; }
|
|
.settings-nav a.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
|
|
.settings-nav :where(a, button) svg { width: 16px; height: 16px; stroke-width: 1.5; flex: 0 0 auto; }
|
|
.settings-nav a .nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); letter-spacing: .02em; line-height: 14px; }
|
|
.settings-nav a.active .nav-badge { color: var(--heat); background: var(--accent-white); border-color: var(--heat-20); }
|
|
.settings-nav a .nav-dot { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--heat); display: none; }
|
|
.settings-nav a.has-changes .nav-dot { display: block; }
|
|
.settings-nav a.active .nav-dot { right: -4px; }
|
|
/* 改过的区:nav 文字也带橙提示(active 时已是橙,此处管未选中区) */
|
|
.settings-nav a.has-changes:not(.active) > span:first-of-type { color: var(--heat); }
|
|
|
|
/* ─── 顶栏「保存所有变更」脏字段计数 · 主 CTA 内白字 mono ─── */
|
|
.page-head .actions .save-count { font-family: var(--font-mono); font-size: 11px; margin-left: 4px; opacity: .75; font-variant-numeric: tabular-nums; }
|
|
.settings-nav .logout-pill {
|
|
width: calc(100% - 24px);
|
|
height: 38px;
|
|
margin: 4px 12px 0;
|
|
justify-content: center;
|
|
border-radius: var(--r-pill);
|
|
background: var(--accent-black);
|
|
border-color: var(--accent-black);
|
|
color: var(--accent-white);
|
|
font-weight: 500;
|
|
}
|
|
.settings-nav .logout-pill:hover,
|
|
.settings-nav .logout-pill:focus-visible {
|
|
background: var(--black-alpha-88);
|
|
border-color: var(--black-alpha-88);
|
|
color: var(--accent-white);
|
|
}
|
|
|
|
/* ─── pane ─── */
|
|
.pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 24px; margin-bottom: 16px; }
|
|
.pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
|
.pane .pane-desc { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; margin-bottom: 18px; }
|
|
|
|
/* ─── form row ─── */
|
|
.form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-faint); align-items: center; }
|
|
.form-row:last-child { border-bottom: 0; }
|
|
.form-row .lbl { font-size: 13px; color: var(--black-alpha-56); }
|
|
.form-row .lbl .req { color: var(--accent-crimson); margin-left: 2px; }
|
|
.form-row .lbl-sub { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
|
|
.form-row .val { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
.form-row .val .input, .form-row .val .select { width: 100%; max-width: 380px; }
|
|
.form-row .val .static { font-size: 13px; color: var(--accent-black); font-variant-numeric: tabular-nums; }
|
|
.form-row .val .static.mono { font-family: var(--font-mono); font-size: 13px; color: var(--black-alpha-56); }
|
|
.form-row .val .role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--heat-12); color: var(--heat); }
|
|
.form-row .val .role-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--heat); }
|
|
.form-row .val .row-link { font-size: 12px; color: var(--heat); text-decoration: none; margin-left: auto; }
|
|
.form-row .val .row-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
|
|
.form-row .val .switch-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
|
|
.form-row.row-top { align-items: flex-start; }
|
|
.form-row.row-top .lbl { padding-top: 4px; }
|
|
.form-row.row-top .val { display: block; }
|
|
|
|
/* ─── 头像上传 ─── */
|
|
.avatar-edit { display: flex; align-items: center; gap: 16px; }
|
|
.avatar-edit .av-big { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 24px; font-weight: 600; color: var(--accent-black); overflow: hidden; }
|
|
.avatar-edit .av-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.avatar-edit .av-actions { display: flex; gap: 8px; }
|
|
|
|
/* ─── toggle switch ─── */
|
|
.switch { position: relative; width: 36px; height: 20px; flex: 0 0 36px; display: inline-block; }
|
|
.switch input { opacity: 0; width: 0; height: 0; }
|
|
.switch .slider { position: absolute; inset: 0; background: var(--black-alpha-24); border-radius: 20px; cursor: pointer; transition: background var(--t-base); }
|
|
.switch .slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: var(--accent-white); border-radius: 50%; transition: transform var(--t-base); }
|
|
.switch input:checked + .slider { background: var(--heat); }
|
|
.switch input:checked + .slider::before { transform: translateX(16px); }
|
|
.switch input:disabled + .slider { cursor: not-allowed; opacity: .55; }
|
|
|
|
/* ─── 偏好选项卡 ─── */
|
|
.pref-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-width: 540px; }
|
|
.pref-choice { padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
|
|
.pref-choice:hover { background: var(--background-lighter); }
|
|
.pref-choice.selected { border-color: var(--heat); background: var(--heat-12); }
|
|
.pref-choice .t { font-size: 13px; font-weight: 600; color: var(--accent-black); }
|
|
.pref-choice .d { font-size: 12px; color: var(--black-alpha-48); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .02em; }
|
|
.pref-choice.selected .t { color: var(--heat); }
|
|
|
|
/* ─── 时长档 ─── */
|
|
.duration-row { display: flex; gap: 8px; }
|
|
.dur-chip { padding: 6px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-md); font-size: 13px; cursor: pointer; font-family: var(--font-mono); font-variant-numeric: tabular-nums; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); background: var(--surface); }
|
|
.dur-chip:hover { background: var(--background-lighter); }
|
|
.dur-chip.selected { border-color: var(--heat); background: var(--heat-12); color: var(--heat); font-weight: 600; }
|
|
|
|
/* ─── 设备列表 ─── */
|
|
.device-list { /* 容器 · 仅承载行 */ }
|
|
.device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); }
|
|
.device-row:last-child { border-bottom: 0; }
|
|
.device-row .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--background-lighter); display: grid; place-items: center; color: var(--ink-3); flex: 0 0 36px; }
|
|
.device-row .ic svg { width: 18px; height: 18px; }
|
|
.device-row .nm { font-size: 13px; font-weight: 500; display: flex; align-items: center; }
|
|
.device-row .meta { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
|
|
.device-row .tag-cur { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; background: var(--accent-forest); color: var(--accent-white); border-radius: var(--r-sm); margin-left: 8px; letter-spacing: .04em; font-weight: 600; }
|
|
.device-row .spacer { margin-left: auto; }
|
|
.device-row .row-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
|
|
|
|
.sub-head { margin-top: 24px; }
|
|
|
|
/* ─── 头像上传 modal 正文 · 装订线分隔 ─── */
|
|
.av-up-preview-row { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; position: relative; }
|
|
.av-up-preview-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: repeating-linear-gradient(to right, var(--border-faint) 0, var(--border-faint) 4px, transparent 4px, transparent 8px); }
|
|
.av-up-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 22px; font-weight: 600; color: var(--accent-black); overflow: hidden; flex: 0 0 64px; }
|
|
.av-up-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.av-up-preview-meta { min-width: 0; }
|
|
.av-up-preview-meta .t { font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 3px; letter-spacing: .01em; }
|
|
.av-up-preview-meta .d { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.55; }
|
|
|
|
.av-up-rules { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-faint); font-size: 12px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.7; }
|
|
.av-up-rules .li { display: flex; gap: 8px; }
|
|
.av-up-rules .li::before { content: '//'; color: var(--black-alpha-32); flex: 0 0 auto; }
|
|
|
|
/* 头像上传 modal 的 upload-zone · 共享样式仅 scope 在 .np-body,故在此页内补齐 uz-ic / uz-hint */
|
|
.upload-zone {
|
|
border: 1.5px dashed var(--black-alpha-24);
|
|
border-radius: var(--r-md);
|
|
padding: 22px 20px;
|
|
text-align: center;
|
|
background: var(--background-lighter);
|
|
color: var(--black-alpha-56);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
|
|
}
|
|
.upload-zone:hover, .upload-zone.dragover { border-color: var(--heat); background: var(--heat-8); color: var(--heat); }
|
|
.upload-zone:hover .uz-ic, .upload-zone.dragover .uz-ic { background: var(--heat); color: var(--accent-white); border-color: var(--heat); }
|
|
.upload-zone strong { color: var(--heat); font-weight: 600; }
|
|
.upload-zone .uz-ic {
|
|
width: 40px; height: 40px;
|
|
border-radius: var(--r-md);
|
|
background: var(--surface);
|
|
color: var(--heat);
|
|
border: 1px solid var(--heat-20);
|
|
display: grid; place-items: center;
|
|
margin-bottom: 8px;
|
|
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
|
|
}
|
|
.upload-zone .uz-ic svg { width: 18px; height: 18px; }
|
|
.upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
|
|
|
|
/* ─── 退出登录确认 modal 正文 ─── */
|
|
.logout-confirm-copy { margin: 0 0 12px; color: var(--black-alpha-72); }
|
|
.logout-confirm-points {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
background: var(--background-lighter);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: var(--r-md);
|
|
}
|
|
.logout-confirm-points .li {
|
|
display: flex;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
color: var(--black-alpha-64);
|
|
}
|
|
.logout-confirm-points .li::before {
|
|
content: '//';
|
|
flex: 0 0 auto;
|
|
font-family: var(--font-mono);
|
|
color: var(--black-alpha-32);
|
|
}
|
|
.logout-unsaved-note {
|
|
margin-top: 12px;
|
|
padding: 9px 11px;
|
|
border: 1px solid var(--heat-20);
|
|
border-radius: var(--r-md);
|
|
background: var(--heat-12);
|
|
color: var(--heat);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ─── 改密 modal · 校验提示 ─── */
|
|
.field .pw-err { color: var(--accent-crimson); }
|
|
|
|
/* ─── 页脚 build 标记 ─── */
|
|
.settings-foot { text-align: center; padding: 24px 0 8px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
|
|
|
|
@media (max-width: 1024px) {
|
|
.settings-grid { grid-template-columns: 1fr; }
|
|
.settings-nav { position: static; }
|
|
.form-row { grid-template-columns: 1fr; gap: 6px; }
|
|
}
|
|
}
|