feat(embed): 合同导入与工作台融成一体(主题/字体/配色/滚动全对齐)

深色外壳里嵌一张米白纸、外加两层滚动条,是「没浑然一体」的根源:

- 宿主把当前主题下的设计令牌 postMessage 给嵌入页(跨源读不到对方的
  CSS 变量),两边共用同一套配色/字体/圆角;切主题即时跟随,不用刷新
  (src 里的 theme 只作首帧初值,避免换主题触发 iframe 重载白闪)
- 收起嵌入页里重复的部件:自带侧栏、顶栏指标条(货号总数/供应商/待核对)、
  右下角「问一句」悬浮球(宿主已有小皮)
- 只留一层滚动:路由区固定为视口高度,滚动交给 iframe 内部
- 输入框沿用宿主的「无方框」规则:去掉描边与焦点光环,改底色区分
- 页面头去掉「新窗口打开」(打开的是裸 SKU 页),刷新改成图标按钮
- 令牌名对不上时会告警,免得嵌入页悄悄回落到旧配色
This commit is contained in:
Drsakura
2026-09-11 12:53:22 +08:00
parent 453f3b1583
commit 436519e0a6
3 changed files with 82 additions and 25 deletions
+7
View File
@@ -224,6 +224,13 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: non
.app-container { min-height: 100vh; }
.main-content { min-height: 0; overflow: hidden; padding: 0; }
.route-content { min-height: calc(100vh - var(--header-height)); overflow-y: auto; padding: 32px clamp(18px, 3.6vw, 52px) 56px; }
/* 嵌入页(合同导入):让 iframe 撑满路由区,只留一层滚动。
宿主和嵌入页各有一条滚动条时,「嵌进来」的感觉最明显。 */
.route-content:has(.embed-shell) { display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); min-height: 0; overflow: hidden; padding-bottom: 0; }
.embed-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.embed-frame { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-primary); }
.embed-refresh { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); }
.embed-refresh:hover { background: var(--surface-hover); color: var(--text-primary); }
.global-header { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 22px; min-height: var(--header-height); padding: 0 clamp(18px, 3.6vw, 52px); background: color-mix(in srgb, var(--bg-primary) 90%, transparent); border-bottom: 1px solid var(--border-light); backdrop-filter: blur(18px) saturate(1.25); }
.global-header-brand { display: flex; align-items: center; gap: 13px; min-width: 240px; }
.global-header-brand strong, .global-header-brand span { display: block; }