/* ============================================================================ yyai8-shell.css —— 页面骨架契约（频道页 / 工作台页 / 入口页 / 画布页） ---------------------------------------------------------------------------- 上游每个页面的二级栏、参数面板、标题都是各写各的 Tailwind 工具类。这里不重写 页面逻辑，而是由 scripts/patch-unified-shell.py 把各页对应部位的 className 换成同一套 yy-* 契约类，外观只在这一个文件里定义。 契约（给页面补丁用的类名，新页面照这个套）： 频道页二级栏 .yy-subnav(.yy-subnav--dark) > .yy-subnav-head / -search / -body / -foot 头部：.yy-subnav-logo .yy-subnav-title .yy-subnav-sub .yy-subnav-collapse[data-yy-subnav-toggle] 列表：.yy-subnav-group（分组标题） .yy-subnav-item(.is-active) .yy-subnav-item--child .yy-subnav-icon .yy-subnav-label .yy-subnav-badge .yy-subnav-caret 频道顶栏 .yy-chhead > .yy-chhead-crumb / -tabs(.yy-chhead-tab) / -extra 工作台参数面板 .yy-panel(.yy-panel--dark) > .yy-panel-head / -body / -foot .yy-panel-title .yy-panel-section-title 入口页标题 .yy-hero-title .yy-hero-sub 画布页 .yy-canvas 尺寸约定：二级栏头、频道顶栏、参数面板头都是 56px 高 + 1px 下边线，三者在同一 水平线上，所以「二级栏 + 顶栏」读起来是一整条工具栏，而不是两套导航。 深色：工作台面板有 .yy-panel--dark，二级栏有 .yy-subnav--dark，两者都把 --yy-shell-* 就地重绑一遍 —— 几何一模一样，只有配色不同。 ============================================================================ */ :root { /* ★ 强调色跟着品牌令牌走，与全局侧栏（yyai8-sidebar.css 的选中态）同色。 历史上这里写死 #0066ff（= 当时全局侧栏的硬编码 #06f），自 2026-10 全局侧栏 改用品牌色之后，写死就变成"一级导航青绿、二级导航蓝"的新不一致。 */ --yy-shell-accent: var(--yy-color-primary, #7C3AED); --yy-shell-accent-soft: rgba(124, 58, 237, 0.08); --yy-shell-accent-soft: color-mix(in srgb, var(--yy-shell-accent) 9%, transparent); --yy-shell-accent-line: rgba(124, 58, 237, 0.20); --yy-shell-accent-line: color-mix(in srgb, var(--yy-shell-accent) 24%, transparent); --yy-shell-text: #111827; --yy-shell-text-2: #4b5563; --yy-shell-text-3: #9ca3af; --yy-shell-line: #eef0f3; --yy-shell-hover: #f4f5f7; --yy-shell-bg: #ffffff; --yy-shell-bg-soft: #f7f8fa; --yy-shell-head-h: 56px; --yy-shell-subnav-w: 232px; --yy-shell-panel-w: 320px; --yy-shell-radius: 8px; /* ★ 内容区左右留白。上游各页各写各的：/stage 走 .main-wrapper 的百分比 （≥1536px 时 10%，在 1128px 的内容区上就是 113px，还带一个 1536px 断崖）， /draw 38px、/ai-education 16px、/image-editor 8px —— 同一层级差 14 倍。 这里收成一个值：24px 正好和 .yy-chhead 的 padding 一致， 于是面包屑和内容块落在同一条竖线上（这是页面上最容易看出齐不齐的一条线）。 上限 1680px 是给超宽屏兜底：只给固定 padding 的话，2560px 屏上内容会拉到 2040px 宽、一行跑 200 多字。 ⚠️ 原来定的 1440 —— 用户 1625 的窗口下 `(1625-1440)/2+24` = 116px 留白， 卡片网格两侧各空一大条，用户连提两次「左右间距还是那么大」。1625 的 内容区是 1385，1440 上限本来就不该生效，但**没有二级栏的页面**内容区 就是整个视口（1625），于是 1440 反而成了主要留白来源。 改成 1680：1625 窗口下留白回落到 24px，1920 下 144px 仍可控。 */ --yy-shell-content-pad: 24px; --yy-shell-content-max: 1680px; /* 内容槽：内容区宽于 --yy-shell-content-max 时，多出来的宽度平分成左右留白。 用 `padding-inline` 而不是 `max-width + margin:auto`，是因为频道顶栏 `.yy-chhead` 有一条通栏的 `border-bottom` —— 给它加 max-width 会把边线一起截断。 留白走 padding，边线仍然通栏，而内容块和面包屑落在同一条竖线上。 内容区 ≤1728px（= max + 左右各 24px）时这个 max() 恒等于 --yy-shell-content-pad，观感不变。 */ --yy-shell-content-gutter: max( var(--yy-shell-content-pad), calc((100% - var(--yy-shell-content-max)) / 2 + var(--yy-shell-content-pad)) ); } @media (max-width: 767px) { :root { --yy-shell-content-pad: 16px; } } /* ───────────────────────── 频道页二级栏 ───────────────────────── */ .yy-subnav { position: relative; box-sizing: border-box; display: flex; flex-direction: column; flex: 0 0 var(--yy-shell-subnav-w); width: var(--yy-shell-subnav-w); min-width: var(--yy-shell-subnav-w); max-width: var(--yy-shell-subnav-w); height: 100%; background: var(--yy-shell-bg); border-right: 1px solid var(--yy-shell-line); box-shadow: none; color: var(--yy-shell-text-2); font-size: 14px; z-index: 20; transition: width .18s ease, min-width .18s ease, flex-basis .18s ease; } .yy-subnav-head { box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex: 0 0 var(--yy-shell-head-h); height: var(--yy-shell-head-h); min-height: var(--yy-shell-head-h); padding: 0 10px 0 16px; margin: 0; border-bottom: 1px solid var(--yy-shell-line); background: transparent; } .yy-subnav-logo { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: var(--yy-shell-accent-soft); color: var(--yy-shell-accent); font-size: 14px; box-shadow: none; overflow: hidden; } .yy-subnav-logo img, .yy-subnav-logo svg { width: 18px; height: 18px; object-fit: contain; } .yy-subnav-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; } .yy-subnav-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--yy-shell-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yy-subnav-sub { margin: 1px 0 0; font-size: 11px; font-weight: 400; color: var(--yy-shell-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yy-subnav-collapse, .yy-panel-collapse { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--yy-shell-text-3); cursor: pointer; } .yy-subnav-collapse:hover, .yy-panel-collapse:hover { background: var(--yy-shell-hover); color: var(--yy-shell-text-2); } /* 图标统一由 CSS 画，页面里原来的图标藏掉 */ .yy-subnav-collapse > * { display: none !important; } .yy-subnav-collapse::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M15.5 10l-2 2 2 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M15.5 10l-2 2 2 2'/%3E%3C/svg%3E") center / contain no-repeat; } .yy-subnav-search { box-sizing: border-box; flex: 0 0 auto; padding: 12px 12px 4px; margin: 0; border: 0; background: transparent; } .yy-subnav-search input, .yy-subnav-search .ant-input-affix-wrapper { box-sizing: border-box; height: 34px; border-radius: var(--yy-shell-radius); border: 1px solid transparent; background: var(--yy-shell-bg-soft); font-size: 13px; color: var(--yy-shell-text); box-shadow: none; } .yy-subnav-search input:focus { background: #fff; border-color: var(--yy-shell-accent-line); outline: none; } /* 「图标 + input」型搜索框：图标压进输入框左侧 */ .yy-subnav-search { position: relative; display: flex; align-items: center; gap: 8px; } .yy-subnav-search input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 10px; } .yy-subnav-search:has(> svg, > i) input { padding-left: 32px; } .yy-subnav-search > svg, .yy-subnav-search > i { position: absolute; left: 23px; top: calc(50% + 4px); transform: translateY(-50%); width: 13px; height: 13px; font-size: 13px; color: var(--yy-shell-text-3); pointer-events: none; z-index: 1; } .yy-subnav-body { box-sizing: border-box; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 8px 12px; margin: 0; scrollbar-width: thin; } .yy-subnav-body > * + .yy-subnav-group { margin-top: 6px; } .yy-subnav-group { box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 12px 10px 6px; margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--yy-shell-text-3); letter-spacing: 0; background: transparent; border: 0; } button.yy-subnav-group { width: 100%; cursor: pointer; text-align: left; } button.yy-subnav-group:hover { color: var(--yy-shell-text-2); } .yy-subnav-item { box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; margin: 1px 0; border: 0; border-radius: var(--yy-shell-radius); background: transparent; color: var(--yy-shell-text-2); font-size: 14px; font-weight: 400; line-height: 20px; text-align: left; text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color .12s ease, color .12s ease; } .yy-subnav-item:hover { background: var(--yy-shell-hover); color: var(--yy-shell-text); } .yy-subnav-item.is-active, .yy-subnav-item.is-active:hover { background: var(--yy-shell-accent-soft); color: var(--yy-shell-accent); font-weight: 500; } .yy-subnav-item--child { padding-left: 38px; font-size: 13px; min-height: 34px; } .yy-subnav-item--group { font-weight: 500; color: var(--yy-shell-text); } .yy-subnav-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; font-size: 15px; color: inherit; opacity: .85; border-radius: 5px; overflow: hidden; } .yy-subnav-icon img, .yy-subnav-icon svg { width: 18px; height: 18px; object-fit: contain; } img.yy-subnav-icon { object-fit: cover; } .yy-subnav-item.is-active .yy-subnav-icon { opacity: 1; } .yy-subnav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: inherit; font-weight: inherit; color: inherit; } .yy-subnav-badge { box-sizing: border-box; display: inline-flex; align-items: center; flex: 0 0 auto; height: 18px; padding: 0 6px; margin-left: auto; border-radius: 9px; border: 0; background: #fff3eb; color: #f2662b; font-size: 11px; font-weight: 500; line-height: 18px; font-style: normal; white-space: nowrap; } .yy-subnav-caret { flex: 0 0 auto; margin-left: auto; font-size: 10px; color: var(--yy-shell-text-3); } .yy-subnav-foot { box-sizing: border-box; flex: 0 0 auto; padding: 10px 12px 12px; border-top: 1px solid var(--yy-shell-line); background: transparent; } /* 底部区的小标题：.yy-subnav-group 自带 12px 上内边距，在 foot 里会叠成双份 */ .yy-subnav-foot .yy-subnav-group { padding: 0 10px 4px; } /* 底部区里的条目：与列表里的条目同一套外观，但不再多一层圆角背景 */ .yy-subnav-foot .yy-subnav-item { margin: 0; } /* ── 深色二级栏 ────────────────────────────────────────────────────────────── 几何与 .yy-subnav 完全一致（同一个 flex-basis / 56px 头 / 36px 条目 / 8px 圆角）， 只是把 --yy-shell-* 就地重绑一遍 —— 和 .yy-panel--dark 同一套做法， 这样"全站深色"只有一个定义（#141522），不会再出现"半透明黑 210px"这种第三种表达。 用在：视频生成3.0 的 /video/create/text|image、/video/human/video、/video/audio （这些页面底色是 linear-gradient(135deg,#1f1f58,#3e1c1e) 的深色渐变） .yy-dark 是同一个变量包，单独给"不是二级栏、也不是参数面板"的深色容器用 —— 目前只有视频页窄屏时那个 antd Drawer（抽屉里挂的是同一个导航组件）。 ────────────────────────────────────────────────────────────────────────── */ .yy-dark, .yy-subnav--dark { --yy-shell-line: rgba(255, 255, 255, .08); --yy-shell-text: #f3f4f6; --yy-shell-text-2: #c7cad1; --yy-shell-text-3: #8b8fa3; --yy-shell-hover: rgba(255, 255, 255, .06); --yy-shell-bg: #141522; --yy-shell-bg-soft: rgba(255, 255, 255, .06); } .yy-subnav--dark { background: var(--yy-shell-bg); color: var(--yy-shell-text-2); } /* 深色下选中态不能只靠浅底（本来整列就是深的）：加一条品牌色指示条， 与全局侧栏的选中表达（3px 指示条 + 提亮背景）保持同一个语汇 */ .yy-dark .yy-subnav-item.is-active, .yy-dark .yy-subnav-item.is-active:hover, .yy-subnav--dark .yy-subnav-item.is-active, .yy-subnav--dark .yy-subnav-item.is-active:hover { background: rgba(255, 255, 255, .10); color: #fff; } .yy-dark .yy-subnav-item.is-active::before, .yy-subnav--dark .yy-subnav-item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--yy-shell-accent); } .yy-dark .yy-subnav-search input, .yy-dark .yy-subnav-search .ant-input-affix-wrapper, .yy-subnav--dark .yy-subnav-search input, .yy-subnav--dark .yy-subnav-search .ant-input-affix-wrapper { background: var(--yy-shell-bg-soft); color: var(--yy-shell-text); } .yy-subnav--dark .yy-subnav-search input::placeholder { color: var(--yy-shell-text-3); } .yy-subnav--dark .yy-subnav-search input:focus { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .16); } .yy-subnav--dark .yy-subnav-body { scrollbar-color: rgba(255, 255, 255, .22) transparent; } .yy-subnav--dark .yy-subnav-collapse:hover { background: rgba(255, 255, 255, .10); color: #fff; } html[data-yy-subnav-collapsed] .yy-subnav--dark .yy-subnav-collapse { background: #1b1c2b; border-color: rgba(255, 255, 255, .12); color: var(--yy-shell-text-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } /* 深色二级栏的页面（视频生成3.0）窄屏时用 antd Drawer 导航，整列要藏起来 —— 原来由页面自己的 _sidebar_1lrtp_19{display:none} 负责，那个类名已经被契约替掉 */ @media (max-width: 900px) { .yy-subnav--dark { display: none; } } /* 收起：宽度归零，只留一颗浮在内容左上角的展开按钮 */ html[data-yy-subnav-collapsed] .yy-subnav { flex-basis: 0; width: 0; min-width: 0; max-width: 0; border-right: 0; overflow: visible; } html[data-yy-subnav-collapsed] .yy-subnav > :not(.yy-subnav-head) { display: none !important; } html[data-yy-subnav-collapsed] .yy-subnav-head { border-bottom: 0; padding: 0; width: 0; } html[data-yy-subnav-collapsed] .yy-subnav-head > :not(.yy-subnav-collapse) { display: none !important; } html[data-yy-subnav-collapsed] .yy-subnav-collapse { position: absolute; top: 14px; left: 12px; z-index: 30; background: #fff; border: 1px solid var(--yy-shell-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transform: scaleX(-1); } html[data-yy-subnav-collapsed] .yy-chhead { padding-left: 56px; } /* 二级栏后面紧跟的第一列是参数面板（如 AI教育进入智能体后）：由面板头让位，右边的顶栏不再让 */ html[data-yy-subnav-collapsed] .yy-subnav + * .yy-panel:first-child > .yy-panel-head { padding-left: 56px; } html[data-yy-subnav-collapsed] .yy-panel ~ * .yy-chhead { padding-left: 24px; } /* ───────────────────────── 频道顶栏 ───────────────────────── */ .yy-chhead { box-sizing: border-box; position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 16px; flex: 0 0 var(--yy-shell-head-h); height: var(--yy-shell-head-h); min-height: var(--yy-shell-head-h); /* 面包屑的左边线要和内容块对齐，所以顶栏用同一个内容槽， 而不是写死 24px（超宽屏下内容会被居中，写死就对不上了）。 */ padding: 0 var(--yy-shell-content-gutter); margin: 0; border: 0; border-bottom: 1px solid var(--yy-shell-line); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); box-shadow: none; font-size: 14px; color: var(--yy-shell-text-2); } .yy-chhead-crumb { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; font-size: 14px; color: var(--yy-shell-text-3); white-space: nowrap; } .yy-chhead-crumb > :last-child { color: var(--yy-shell-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .yy-chhead-badge { box-sizing: border-box; display: inline-flex; align-items: center; flex: 0 0 auto; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--yy-shell-accent-soft); color: var(--yy-shell-accent); font-size: 11px; font-weight: 600; line-height: 18px; } /* 面包屑末尾是徽章时，加粗的应该是徽章前面那一节 */ .yy-chhead-crumb > .yy-chhead-badge:last-child { color: var(--yy-shell-accent); font-weight: 600; } .yy-chhead-crumb > :nth-last-child(2):has(+ .yy-chhead-badge:last-child) { color: var(--yy-shell-text); font-weight: 600; } .yy-chhead-tabs { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; } .yy-chhead-tab { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--yy-shell-radius); background: transparent; color: var(--yy-shell-text-2); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; } .yy-chhead-tab:hover { background: var(--yy-shell-hover); color: var(--yy-shell-text); } .yy-chhead-tab.is-active { background: var(--yy-shell-accent-soft); color: var(--yy-shell-accent); } .yy-chhead-extra { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--yy-shell-text-3); white-space: nowrap; } .yy-chhead-btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--yy-shell-radius); background: transparent; color: var(--yy-shell-text-2); font-size: 13px; cursor: pointer; } .yy-chhead-btn:hover { background: var(--yy-shell-hover); color: var(--yy-shell-text); } /* 当前所在/强调的那一个（如音频页的「声音克隆」） */ .yy-chhead-btn--primary, .yy-chhead-btn--primary:hover { background: var(--yy-shell-text); color: #fff; font-weight: 500; } .yy-chhead-btn--primary:hover { opacity: .88; } /* ───────────────────────── 工作台参数面板 ───────────────────────── */ .yy-panel { box-sizing: border-box; position: relative; display: flex; flex-direction: column; flex: 0 0 var(--yy-shell-panel-w); width: var(--yy-shell-panel-w); min-width: var(--yy-shell-panel-w); max-width: var(--yy-shell-panel-w); height: 100%; background: var(--yy-shell-bg); background-image: none; border: 0; border-right: 1px solid var(--yy-shell-line); box-shadow: none; color: var(--yy-shell-text-2); z-index: 10; } .yy-panel-head { box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex: 0 0 var(--yy-shell-head-h); height: var(--yy-shell-head-h); min-height: var(--yy-shell-head-h); padding: 0 10px 0 16px; margin: 0; border-bottom: 1px solid var(--yy-shell-line); background: transparent; } .yy-panel-title { margin: 0; min-width: 0; font-size: 15px; font-weight: 600; color: var(--yy-shell-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yy-panel-body { box-sizing: border-box; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; scrollbar-width: thin; } .yy-panel-section-title { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--yy-shell-text); } .yy-panel-foot { box-sizing: border-box; flex: 0 0 auto; padding: 12px 16px 16px; border-top: 1px solid var(--yy-shell-line); background: var(--yy-shell-bg); } .yy-panel-foot > button, .yy-panel-foot > .ant-btn { width: 100%; min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; } /* 深色工作台（智能图表、视频生成3.0 等原本就是深色的页面保持深色） */ .yy-panel--dark { --yy-shell-line: rgba(255, 255, 255, .08); --yy-shell-text: #f3f4f6; --yy-shell-text-2: #c7cad1; --yy-shell-text-3: #8b8fa3; --yy-shell-hover: rgba(255, 255, 255, .06); --yy-shell-bg: #141522; background: var(--yy-shell-bg); color: var(--yy-shell-text); } /* 浮在结果区上方的工具条（如智能图表的图表类型条）：只在参数面板右侧的结果区里居中； --with-aside 表示右边还有一列约占内容区 18% 的操作栏，也要让出来。超宽时用条内滚动。 */ @media (min-width: 768px) { .yy-floatbar { left: var(--yy-shell-panel-w) !important; max-width: calc(100% - var(--yy-shell-panel-w) - 24px) !important; } .yy-floatbar--with-aside { right: 18% !important; max-width: calc(82% - var(--yy-shell-panel-w) - 24px) !important; } } /* ───────────────────────── 入口页标题 ───────────────────────── */ .yy-hero-title { margin-top: 0; margin-bottom: 8px; font-size: 30px !important; line-height: 1.3 !important; font-weight: 700; letter-spacing: -0.01em; } /* 标题和图标并排在一行时，不要底边距把两者错开 */ .flex > .yy-hero-title { margin-bottom: 0; } .yy-hero-sub { margin-top: 0; font-size: 15px !important; line-height: 1.6 !important; font-weight: 400; } /* ───────────────────────── 画布页 ───────────────────────── */ .yy-canvas { box-sizing: border-box; width: 100% !important; max-width: none !important; height: calc(100vh - 60px) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* 页面保留的 Tailwind 响应式显隐（hidden md:flex / hidden lg:flex）要压过契约里的 display:flex —— shell 样式比主样式后加载，不补这几条显隐类会全部失效。 */ .yy-subnav.hidden, .yy-panel.hidden, .yy-chhead.hidden { display: none; } @media (min-width: 768px) { .yy-subnav.md\:flex, .yy-panel.md\:flex, .yy-chhead.md\:flex { display: flex; } } @media (min-width: 1024px) { .yy-subnav.lg\:flex, .yy-panel.lg\:flex, .yy-chhead.lg\:flex { display: flex; } } @media (min-width: 1280px) { .yy-subnav.xl\:flex, .yy-panel.xl\:flex, .yy-chhead.xl\:flex { display: flex; } } .yy-chhead-crumb.hidden, .yy-chhead-btn.hidden, .yy-chhead-extra.hidden { display: none; } @media (min-width: 768px) { .yy-chhead-crumb.md\:flex, .yy-chhead-extra.md\:flex { display: flex; } .yy-chhead-btn.md\:flex, .yy-chhead-btn.md\:inline-flex { display: inline-flex; } } @media (min-width: 1024px) { .yy-chhead-crumb.lg\:flex, .yy-chhead-extra.lg\:flex { display: flex; } .yy-chhead-btn.lg\:flex, .yy-chhead-btn.lg\:inline-flex { display: inline-flex; } } /* 分段标题和右侧徽标并排时不留下边距 */ .yy-panel-body .flex > .yy-panel-section-title { margin-bottom: 0; } /* 窄屏：二级栏的显隐交给页面自己（AI绘画等有移动端抽屉），这里不强制隐藏 */ @media (max-width: 767px) { /* 窄屏下参数面板是盖在结果区上的抽屉（与上游原来的移动端形态一致），不挤占结果区 */ .yy-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(var(--yy-shell-panel-w), 86vw); min-width: 0; max-width: none; height: auto; z-index: 40; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); } /* 抽屉要相对它所在的那一行定位，不能飘到 body 上盖住站点顶栏 */ :where(*):has(> .yy-panel) { position: relative; } .yy-chhead { padding: 0 12px; overflow-x: auto; } } /* ───────────────────────── 股票子应用（/aistock/*）───────────────────────── 子应用是独立打包的 SPA 片段（`StockAgentChat-*.js` + `index-B4H_DLdD.css`）， 自带 `.sidebar` / `.sidebar-header` / `.nav-item` 一整套类名，几何和契约对不上： 实测 .sidebar 260px .sidebar-header 72px .nav-item 34px/圆角 6px 契约 .yy-subnav 232px 头 56px 条目 36px/圆角 8px 这里**只统一几何**，不碰 `--theme-*` —— 子应用自带 16 套主题，选中色是主题的 一部分，全量收编会把它的配色体系吃掉（见 docs/SECOND-NAV-UNIFY-ANALYSIS.md §7.3）。 作用域挂在 `.aistock-theme` 上（子应用根节点），避免误伤其它用了 `.sidebar` 的页面。 ⚠️ `min-width: 0` 不能省：`.sidebar` 是 flex 子项（`flex: 0 0 auto`）， `min-width: auto` 会把它卡在 min-content 宽度（实测正好 260px）， 只写 `width: 232px` 完全不生效 —— 连 `!important` 都压不下去。 ────────────────────────────────────────────────────────────────────────── */ .aistock-theme .sidebar { width: var(--yy-shell-subnav-w); min-width: 0; max-width: var(--yy-shell-subnav-w); } .aistock-theme .sidebar .sidebar-header { height: var(--yy-shell-head-h); min-height: var(--yy-shell-head-h); } .aistock-theme .sidebar .nav-item { min-height: 36px; border-radius: var(--yy-shell-radius); } .aistock-theme .sidebar .sidebar-collapse-btn { border-radius: var(--yy-shell-radius); } /* ─────────────────── 模型对话落地页（/newchat）──────────────────── 实测（1600x1000）暴露的三件事： · 输入框中心 399，可视区中心 560 → 偏上 161px · 内容列 800px 居中于 1360px 容器，左右各空 280px · 「支持图表类型」33 项挤在 800px 里 = 6 列 6 行 = 344px， 整页 scrollHeight 1106 > 可视 940 → 166px 在折叠线下 换布局的要点是**把内容从 800px 放开到 1200px**，不是把内容藏起来： 放开之后 33 个缩略图变成 12 列 3 行 = 171px，整页回到一屏。 ────────────────────────────────────────────────────────────────── */ .yy-chathome-main { flex: 1 1 0%; min-height: 0; /* ★ safe center 不是 center：内容装得下就垂直居中（输入框落到视线中心）， 装不下就退回顶部对齐。普通 center 在内容超高时会把顶部裁掉， 而且因为容器 overflow-y:scroll，用户永远滚不到被裁的那部分。 */ justify-content: safe center; /* ★ 左右留白用 clamp，别写 0。 hero / 探索区都是 `max-w-[1200px] w-full mx-auto`：容器一旦窄于 1200px， `w-full` 就让它铺满，**左右一点缝都没有**。1250px 视口下内容区 1010px， 输入框、chips、图表区全部从 x=240 顶到 x=1250（实测空隙 0px）， 看起来就是"挤到边上了"。窄屏原来只在 ≤900px 补 12px，中间这一大段 （900–1440px）完全没有留白。 clamp 下限 16px 管手机、上限 40px 管宽屏：1600px 下 2.5vw=40px， 内容区 1360-80=1280 > 1200，所以宽屏上 hero 宽度**一点没变**。 */ padding: 28px clamp(16px, 2.5vw, 40px) 0; } /* 厂商跑马灯：留在 hero 右边那条竖槽里。 ★ 别再改成横向整行。竖着放在这里**不占纵向空间** —— 它和问候语并排， 行高由下面的输入框决定；改成横着就是凭空多出一行，跟 chips 抢位置。 试过两次（chips 之前 / chips 之后），两次都不对，这里记一笔。 原来它是"没标题没边框"所以看着悬空，补一个 12px 的标签就够，不用加卡片。 */ .yy-modelwall { display: flex; flex-direction: column; gap: 8px; width: 200px; height: 156px; flex: 0 0 auto; } .yy-modelwall-label { flex: 0 0 auto; font-size: 12px; line-height: 1; color: var(--yy-gray-400); white-space: nowrap; } /* 遮罩加在**跑马灯自己**身上，不能加在 .yy-modelwall 上 —— 加在父级会把 「已接入 20+ 家模型」这个标签一起裁掉。竖向排列，所以是上下淡出。 */ .yy-modelwall-swiper { flex: 1 1 auto; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); } /* 原来是靠组件自己注入的 `.vertical-scale-swiper` 做"中间亮、上下淡"， 类名换掉之后那份注入样式就成了死代码，这里补一份等价的（保留轻微缩放， 竖向排列时缩放是好看的，横向才会显得参差）。 */ .yy-modelwall-swiper .swiper-slide { opacity: .4; transform: scale(.92); transition: opacity .3s ease, transform .3s ease; } .yy-modelwall-swiper .swiper-slide-active { opacity: 1; transform: scale(1); } /* 首屏要装下「示例提示词 + 33 个图表类型」，底部原本有 main 的 40px + G 组件的 pb-20(80px) = 120px 死留白，收掉；同时把欢迎块的 mb-6(24px) 收到 8px，两者合计让出 ~104px。只作用于这个页面。 */ .yy-chathome-main .pb-20 { padding-bottom: 12px; } .yy-chathome-main > div:first-child { margin-bottom: 8px; } /* ── 窄屏 ──────────────────────────────────────────────────────────── 12 列在 390px 上只剩 18px 一个（缩略图比标签还小），必须按断点降列。 断点是按**视口**给的：全局侧栏在 1000px 出头会收成顶部横条，可用宽度 会跳一下，所以取整到 1280 / 1024 / 768 / 480 这几档，别抠太细。 ─────────────────────────────────────────────────────────────────── */ @media (max-width: 1279px) { .yy-chathome-main ul.grid-cols-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (max-width: 1023px) { .yy-chathome-main ul.grid-cols-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 767px) { .yy-chathome-main ul.grid-cols-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 「示例提示词」4 列在窄屏会把标题断成竖排 */ .yy-chathome-main ul.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .yy-chathome-main ul.grid-cols-12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yy-chathome-main ul.grid-cols-4 { grid-template-columns: minmax(0, 1fr); } } /* chips 一行放不下时会各自换行，把「图表报告」挤成竖排 —— 让整行换行 */ .yy-chathome-main ul.flex.items-center.justify-center.gap-3 { flex-wrap: wrap; } /* ★ 窄屏断点取 900px，和页面自己那个 `rt`（isMobile）判断**同一个值** —— 跑马灯的方向是 JS 属性（`direction: rt?"horizontal":"vertical"`）， CSS 改不了；两边断点不一致就会出现"横着排但按竖槽尺寸"这种半吊子状态。 */ @media (max-width: 900px) { /* 手机上没有右侧竖槽可用，改成一行横条：标签在左、logo 在右，只占 40px */ .yy-modelwall { width: 100%; height: 40px; flex-direction: row; align-items: center; gap: 10px; } .yy-modelwall-label { text-align: left; } .yy-modelwall-swiper { flex: 1 1 auto; height: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .yy-modelwall-swiper .swiper-slide { transform: none; } } /* ============================================================================ 一秒合成语音 /aigenerate/onesynthesis ============================================================================ */ /* 外层滚动容器 `_wrapper_1ikmm_1` 是 `calc(100vh - header)` = 940 的定高盒子 （`overflow-y: scroll`），里面的 flex 列原来写 `min-h-screen`（100vh = 1000）， 顶栏 `_head` 再吃掉 96px —— scrollHeight 1096 / clientHeight 940， 什么都没多就凭空多出 156px 滚动；`flex-1` 的主区跟着算错， `