/* * apps/workbench/src/home.css —— 首页样式（版式依据：人 2026-09-13 给的设计稿）。 * * 与工作台页共用 design-tokens.css 的变量，但布局独立：首页是「侧栏 + 主区」的外壳， * 工作台是三栏工作区。混进 layout.css 会让「改工作台布局」和「改首页版式」互相牵连。 */ body.home { margin: 0; background: var(--bg-page); color: var(--text-primary); /* ★ 2026-09-21（人）：「首页 logo 和子页面 logo 不一样（是那个点不一样，还是有更多不一样？）， * 各个页面 logo 细节请与首页 logo 保持一致」——那次查到差的是**字体族**： * 原先写的是 `var(--font-sans, system-ui, "Segoe UI", …)`，而 `--font-sans` **从来没定义过**， * 于是首页吃这个兜底栈、工作台吃 design-tokens.css 里另一份栈，同一个字标渲染成两种字体 * （实测 114px vs 109.5px）。 * ★ 同日人又定：「首页 15px、品牌页 14px，都统一 14px 吧」——所以这里连**字号也不再自己写**： * 整行 font 删除，首页正文回落到 `html, body` 的 `var(--fs-body)`（14px）， * 与品牌页同一个来源。⚠ 别再往这里写 font-size：一写就又是一处第二份定义 * （判据：test/page-frame.test.mjs「字体族只许有一份定义」+ tools/frame-check.mjs 量两页实际字号）。 */ } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 输入区里藏着的上传框：`.composer input { width: 100% }` 比 .sr-only 更具体，不压回来它会把整页撑出横向滚动条 */ .composer .sr-only { width: 1px; } /* ── 外壳：左侧栏 + 主区 ── * ★ 2026-09-21（人）：「首页和各个子页面（如品牌页）的页边距统一一下……这样 logo 切换页面时 * 不会看起来位置跳动，同时左侧边栏宽度保持一致」—— * 原先这里写死 244px + 12px，工作台是 var(--side-w)=264px + 页面边距 0， * 于是切页时 logo 横向跳 8px、纵向跳 12.5px。现在两边都取**共用令牌**。 */ .shell { display: grid; grid-template-columns: var(--side-actual) 1fr; min-height: 100vh; gap: var(--page-pad); padding: var(--page-pad); box-sizing: border-box; } /* ★ 2026-09-21：收起态（``，56px 轨道）—— * 品牌列表是文字控件，放不下就整块隐藏（不是硬挤成省略号）； * 留给「收起」的是 logo 方图标 + 那个打开按钮（人：「收起的时候 logo 只显示一个图标」）。 */ html[data-side="collapsed"] .side-brands { display: none; } /* 收起态的轨道：56px 宽，左右只留 10px（GUI 的 .root.collapsed）——36px 的按钮刚好放得下 */ html[data-side="collapsed"] .side { padding: 18px 10px 6px; } /* ── 左侧栏 ── */ .side { display: flex; flex-direction: column; gap: 14px; /* ★ 2026-09-21：照 DSH GUI 的左栏 —— 它是**通栏的下沉面 + 右侧一条描边**， * 不是浮在灰底上的圆角白卡片；内边距取 GUI 的 6px / --side-pad(12px)。 * 于是 logo 的横向落点 = --side-pad + --brand-row-pad = 16px（与工作台左栏同源）。 */ padding: 6px var(--side-pad) var(--side-pad-bottom); background: var(--side-bg); border-right: 1px solid var(--line); } /* ★ 2026-09-21：`.side-brand`（logo 那一行）与 `a.side-brand` 已搬到 `design-tokens.css` —— * 首页左栏与工作台左栏现在**共用同一行**（人：「参考 DSH GUI 的 logo 所在的位置」）。 * 规则跟着使用点走，不留副本。 * ⚠ 人 2026-10-04 #11：左栏顶上的「＋ 新建品牌」（.side-new）与它的表单（.brand-new）撤了，规则一起删。 */ /* ⚠ 2026-09-19 人：「左侧列表去掉任务，换成品牌」——首页左栏只剩品牌。 * `.side-tasks` / `.side-task` / `.side-empty` / `.side-section` 四条也随之删掉： * 留着无主的规则等于给「再放回去」留门。品牌列表在 .side-brands（见文件末尾）。 */ /* ★ 2026-09-21（人）：「左侧边栏面的『开发档账号』应该删掉，与主输入框右上角的重复了」—— * `.side-account` / `.side-avatar` 两条规则随元素一起删（同一条纪律：不留无主规则）。 * 账号只留主区顶栏那一处（.topbar-account）。 */ /* ── 主区 ── */ .main { display: flex; flex-direction: column; /* ★ 2026-09-21：上内边距 40px → 0 ——顶栏那一行要跟品牌页的顶栏对齐（都在页面顶边起算）， * 留着 40px 会把「开发档账号」压下去 40px（人指出它俩高度要一致）。 */ padding: 0 48px 32px; /* ★ 2026-09-21：照 DSH GUI —— 通栏（页面边距 0）之后主区不再是一张浮起的圆角卡片， * 去掉圆角与阴影，免得「卡片贴着窗口边」看着像没收口。 */ background: var(--card); overflow-x: hidden; } /* ★ 2026-09-21（人）：「首页文字、输入框、图标的信息，可以考虑上下这个方向的中对齐， * 这样确保核心信息在页面的中间（指的是上下这个方向）」—— * 顶栏那一行（右上角账号）留在顶部，主张 / 副题 / 输入框 / 技能这一组在**剩下的高度里上下居中**。 * ⚠ 用 `margin: auto 0`（`.main` 本来就是 flex 列）居中，**不要**把 .hero 改成 flex 容器： * 那会把 composer / skills 变成 flex 项，它们的 max-width 解析与水平对齐随之改变—— * 实测两者左边界差了 32px，被 ux-check 的真浏览器判据抓到（569 vs 585）。 * ⚠ 原先那条 `margin-bottom: 34px` 已去：它会把居中点推上去 17px。 */ .hero { margin: auto 0; text-align: center; } /* * 顶栏：设计稿里它是主区顶部**独立一行**。 * ⚠ 实测踩到：`.main` 是 flex 列，顶栏若不自己撑成块级，就会与主标题挤在同一行。 * brand-literal: 下一行是**实测截图**的现场描述（历史记录，不是活的副本） * （截图里「倾域AI / 1 个品牌 / 开发档账号」跑到主标题左边）。 * * ★ 2026-09-21（人）：「主页右上角『开发档账号』应该与品牌子页面的『← …（产品名）… 首页』 * 高度保持一致」——原先是 13px 文字 + 16px 下内边距（内容中心在 y≈66.4）， * 而品牌页那一行是 52px 定高、内容居中（y≈41.5），差 25px。 * 现在这一行也做成 `--topbar-h` 高、内容居中，字号同 `--fs-note`（品牌页那个链接就是 12px）。 * ⚠ 配套：`.main` 的上内边距必须去掉，否则整行会被推下去 40px，又对不上了。 */ .topbar { height: var(--topbar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 14px; width: 100%; color: var(--text-muted); font-size: var(--fs-note); /* ★ 2026-09-22：删掉「开发档账号」之后，这一行只剩右边那两颗小按钮了 —— 靠右改由这里管 （原来靠 .topbar-account 的 margin-left: auto；规则随元素一起删了，对齐不能跟着丢）。 */ justify-content: flex-end; } /* ★ 2026-09-21：主区顶栏那个字标（原先的 `.topbar-brand` 与 `.topbar-brand .side-logo` 两条规则） * 已删——人：「首页『让 AI 成为你的增长渠道』这个区域的 logo 是多余的，与左上角的重复了」。 * （那句主张是当时的文案；2026-09-22 人已改成「让天下没有难做的品牌营销」，见 home-view.js 的 HERO。） * 字标只留左栏那一处。规则跟着元素一起删：留着无主的规则等于给「再放回去」留门。 */ /* ★ 2026-09-22（人）：「首页右上角的『开发档账号』是个无用信息，删除之」—— `.topbar-account` 这条规则随元素一起删（不留无主规则）。⚠ 那一行的 `margin-left: auto` 是**两颗 小按钮靠右**用的，它挂在 .topbar 自己身上，别跟着这行一起删掉（见上面 .topbar 那一块）。 */ /* ★ 2026-09-22（人）：「副标题『让天下没有难做的品牌营销。』已经没啥用了，成为鸡肋，删掉这一行吧」—— 副标题整行删除（标记在 home-view.js）。原先那 26px 的下间距随 `.hero-sub` 一起没了，所以把它 改挂在标题自己的下外边距上：**删元素时顺手看一眼「删完还剩什么」**（不然主张与输入框会贴在一起）。 ⚠ 不留孤儿规则：`.hero-sub` 那条规则与副标题元素一起删（留着无主规则等于给「再放回去」留门）。 */ .hero h1 { margin: 0 0 26px; font-size: 38px; line-height: 1.2; letter-spacing: -.02em; } .hero h1 em { font-style: normal; color: var(--accent-bright); } /* ★ 2026-09-22（人）：「英文版首页标题调整为除了介词啥的首字母小写，其他单词都大写」+ * 「这个标题也太大了，都换行了…英文更长，要确保不能换行，缩小字体」。 * 两件事： * ① 标题式大小写**写在文案里**（i18n-en.js 的 HERO 三段）——CSS 的 text-transform 做不到 * 「除了介词都大写」，全大写（uppercase）人已经否掉了：可读性差。 * ② 英文比中文长得多（55 字符 vs 16 字）：38px 在 1440 下就折行。所以英文下字号**跟着可用宽度 * 走**，不是死值，并显式 nowrap。 * ★ 2026-09-22（人）：「英文版首页输入框上面的大标题，缩小字体，确保**总宽度不超过输入框宽度**」—— * 上一版按「主区列宽」算（比输入框宽一截），初版改成 `var(--composer-w)` 又踩了百分比的坑 * （在 font-size 里按父字号解析 → 字号恒定、窄屏溢出）。现在用令牌 `--headline-fit` * =「列宽与输入框宽取小者」，除数 31（实测「文本宽 ≈ 字号 × 28」，留约一成余量）。 * ⚠ nowrap 一旦超宽，`.main` 的 `overflow-x: hidden` 会把它**裁掉**（比换行更糟）。 * 判据：tools/probes/lang.mjs 在 1440 / 1100 / 900 三个宽度上量「只有一行 + 没超宽 * + **文本宽 ≤ 输入框实宽**」。 */ html[data-lang="en"] .hero h1 { font-size: clamp(12px, calc(var(--headline-fit) / 31), 34px); white-space: nowrap; letter-spacing: 0; } /* ── 输入区 ── */ .composer { display: flex; gap: 10px; max-width: var(--composer-w); margin: 0 auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-pop); text-align: left; } .composer-body { flex: 1; min-width: 0; } /* ⚠ 2026-09-21：必须排除 `.sr-only` —— 上传文件的那个隐藏 input 也在 `.composer` 里 * （`#home-upload-file`），而 `.composer input{width:100%}` 的选择器比 `.sr-only` 更具体， * 会把它从 1×1 撑成整页宽；它又是绝对定位（containing block 是视口，`.main` 的 overflow 拦不住）， * 于是整页多出一条**横向滚动条**（实测 scrollWidth 1821 / 视口 1327）。 */ .composer input:not(.sr-only) { width: 100%; border: 0; outline: none; font: inherit; color: inherit; padding: 2px 0 10px; } .composer-hints { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-faint); } .hint { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--accent-bright); font-size: 12px; } .hint[disabled] { opacity: .55; cursor: not-allowed; } /* 输入区的就地提示（P0-4：「品牌 ＋ 要做什么」缺一时说的话；红线色，因为它拦住了发起） */ .composer-msg { color: var(--danger); font-size: 12.5px; } .composer-msg:empty { display: none; } /* ⚠ 人 2026-10-04 #12：输入区下面那排「上传资料 / 官网地址」（.composer-tools）撤了，规则一起删 */ .composer-by { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .send { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--send-bg); color: var(--send-on); cursor: pointer; font-size: 13px; line-height: 1; } /* ⚠ 人 2026-10-04 #12：输入框下那两行技能（.skills / .skill-chip / .agent-icon）与「输入区下方的提示」 * （.card-hint）撤了，规则一起删——留着无主的规则等于给「再放回去」留门。 */ /* 输入框上方的引导语句（随「选中的品牌」变，见 home-select.js） */ .composer-guide { margin: 0 0 8px; padding: 8px 12px; background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: 10px; color: var(--accent-ink); font-size: 13px; line-height: 1.5; } /* ── 左栏的品牌列表 ────────────────────────────────────────────────── * 2026-09-19（人）：「左侧应该是品牌列表（可以选中的）」 * ★ 2026-09-21（人）：「点击这个区域内的『进入』会转到该品牌的子页面，请改为只要点击该品牌的 * 框内区域，都可以转到该品牌的子页面，这样用起来就更为方便」——于是每一行是**一颗整框的 ** * （`.brand-open`：品牌名 + 任务数 + 右侧「进入」提示），点框内任意位置都进那个品牌的工作区。 * 上一版那个「选中按钮」`.brand-pick` 随之删除： 里不能套