/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/next@15.5.23_@playwright+test@1.62.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.23_@playwright+test@1.62.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/tokens.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================ * Agentta 设计 token —— 唯一色源(UI 规范 v1,Jacob 定案 2026-08-16) * 规范全文:docs/design/ui-standards.md;活模板:docs/design/ui-theme-lab.html * * 铁律:组件只消费本文件的 token,禁止裸 hex/rgb(评审执法,后续 stylelint)。 * 切换机制:; * 主题色是用户级偏好(默认 indigo),语义色(ok/warn/bad)不随主题色变。 * ============================================================ */ /* ---- 基础:light(默认) ---- */ :root { --bg: #f4f5f8; --surface: #ffffff; --nav: #ffffff; --ink: #23283a; --soft: #5f6577; --line: #dfe2ea; --line-faint: #eceef3; /* 表格行线:比框线淡一档;表头线用 --line 1.5px */ --inputbg: #f4f5f8; --codeblk: #171a21; /* 代码块恒深底(两种模式各自微调) */ --shadow: 0 1px 3px rgb(0 0 0 / 5%); /* 语义色:通过/警示/危险 —— 与主题色分离,切主题色不动 */ --ok: #0d8a5f; --ok-soft: #e2f3ec; --warn: #b0762a; --warn-soft: #f7ecdd; --bad: #b4443c; --bad-soft: #f9e9e7; /* 主题色默认 = indigo(C) */ --acc: #4653c8; --acc-soft: #e8eafb; --on-acc: #ffffff; } /* ---- 基础:dark ---- */ :root[data-mode="dark"] { --bg: #14161f; --surface: #1c1f2b; --nav: #181b25; --ink: #e4e6ef; --soft: #969db3; --line: #2c3040; --line-faint: #242836; --inputbg: #14161f; --codeblk: #101218; --shadow: 0 1px 3px rgb(0 0 0 / 30%); --ok: #3fbf8c; --ok-soft: #123326; --warn: #d9a05b; --warn-soft: #33291a; --bad: #e08078; --bad-soft: #3a2422; } /* ---- 固定色(21b:恒定,不随明暗主题切换,原来散落在各处的裸 hex/rgb * 收敛到这里——理由各不相同,但都符合"唯一色源是本文件"这条铁律: * - --codeblk-ink:代码块前景色,恒配 --codeblk(恒深底)使用,和它一样 * 刻意不随主题切换(mdBody pre / mailSummaryBody pre / teamchat 代码块)。 * - --paper:内嵌外部内容的画布恒白(邮件 HTML iframe、字体预览 frame)—— * 这类内容按发件人/系统预期渲染在白底上,不该跟着工作台主题变暗。 * - --on-solid:小徽标/未读计数这类"色块底 + 白字"场景的恒白前景色,与 * --on-acc 不同之处在于它配的是语义色(--bad 等)而非主题色,语义色目前 * 没有随主题切换的 on-* 变体。 * - --overlay-:box-shadow 与浮层遮罩共用的黑度阶梯,按已实测在用的 * 百分比收敛(8/10/12/14/18/22/25/40/45);40/45 两档也覆盖 * dialog.module.css / drawer.module.css 的遮罩层——遮罩本来就不该是 * 主题色,行业惯例就是黑色半透明(frontend-ui-spec.md「色」一节的既有 * 结论),这里只是把它也过一道 token,不再是散落的裸 rgb()。 * ---- */ :root { --codeblk-ink: #dbe1ee; --paper: #ffffff; --on-solid: #ffffff; --overlay-08: rgb(0 0 0 / 8%); --overlay-10: rgb(0 0 0 / 10%); --overlay-12: rgb(0 0 0 / 12%); --overlay-14: rgb(0 0 0 / 14%); --overlay-18: rgb(0 0 0 / 18%); --overlay-22: rgb(0 0 0 / 22%); --overlay-25: rgb(0 0 0 / 25%); --overlay-40: rgb(0 0 0 / 40%); --overlay-45: rgb(0 0 0 / 45%); } /* ---- 主题色色板(外观选择器的六个圆点;恒用 light 值以便识别) ---- */ :root { --swatch-indigo: #4653c8; --swatch-daybreak: #1677ff; --swatch-graphite: #171717; --swatch-teal: #146b5d; --swatch-ice: #0284c7; --swatch-violet: #7c3aed; } /* ---- 主题色六选(用户级偏好;暗色变体独立推导,非反色) ---- */ :root[data-accent="indigo"] { --acc: #4653c8; --acc-soft: #e8eafb; --on-acc: #fff; } :root[data-mode="dark"][data-accent="indigo"] { --acc: #8b96f8; --acc-soft: #232848; --on-acc: #0f1115; } :root[data-accent="daybreak"] { --acc: #1677ff; --acc-soft: #e6f4ff; --on-acc: #fff; } :root[data-mode="dark"][data-accent="daybreak"] { --acc: #4096ff; --acc-soft: #111d2c; --on-acc: #0f1115; } :root[data-accent="graphite"] { --acc: #171717; --acc-soft: #ececec; --on-acc: #fff; } :root[data-mode="dark"][data-accent="graphite"] { --acc: #e5e5e5; --acc-soft: #2e2e2e; --on-acc: #111; } :root[data-accent="teal"] { --acc: #146b5d; --acc-soft: #e3efec; --on-acc: #fff; } :root[data-mode="dark"][data-accent="teal"] { --acc: #34b39a; --acc-soft: #12332c; --on-acc: #0f1115; } :root[data-accent="ice"] { --acc: #0284c7; --acc-soft: #e0f2fe; --on-acc: #fff; } :root[data-mode="dark"][data-accent="ice"] { --acc: #38bdf8; --acc-soft: #12303f; --on-acc: #06222e; } :root[data-accent="violet"] { --acc: #7c3aed; --acc-soft: #f1eafd; --on-acc: #fff; } :root[data-mode="dark"][data-accent="violet"] { --acc: #a78bfa; --acc-soft: #2a2140; --on-acc: #171226; } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/next@15.5.23_@playwright+test@1.62.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.23_@playwright+test@1.62.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* 工作台外壳——视觉规范 v1(docs/design/ui-standards.md);token 唯一色源 tokens.css */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif; font-size: 14px; line-height: 1.6; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input { font: inherit; } /* 裸表单控件的 token 化默认(UX 巡检实抓:kb 检索框在暗色下是浏览器默认白底——没挂类的 input 等于裸色,违反「只消费 token」铁律)。有类的控件自身声明覆盖这里;checkbox/radio/file 形态特殊,不动。 */ /* :where() 把特异性归零成真正的默认——:not() 会计入参数特异性, input:not(x):not(y):not(z) 是 (0,3,1),反超所有单类选择器,曾把 .mailSearchInput 的 26px 左 padding 压掉,图标叠字(巡检特写实抓)。 */ input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), :where(select), :where(textarea) { background: var(--inputbg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; } :where(input, select, textarea):focus-visible { outline: 2px solid var(--acc); } /* ---- shell grid ---- */ .shell { display: grid; grid-template-columns: 208px 1fr 44px; grid-template-rows: 48px 1fr; height: 100vh; } .topbar { grid-column: 1 / 4; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); } .brand { font-weight: 700; letter-spacing: .02em; } .search { flex: 1 1; max-width: 420px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; color: var(--soft); background: var(--bg); } .bell { margin-left: auto; position: relative; background: none; border: none; display: flex; align-items: center; color: var(--soft); } .avatarBtn { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--acc-soft); color: var(--acc); font-weight: 700; } .userMenu { position: absolute; right: 12px; top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px; width: 200px; box-shadow: 0 6px 20px var(--overlay-12); z-index: 30; font-size: 13px; } .userMenu button, .userMenu .item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 9px; border-radius: 5px; color: var(--ink); } .userMenu button:hover { background: var(--acc-soft); } .userMenu .sect { font-size: 10.5px; color: var(--soft); padding: 6px 9px 2px; text-transform: uppercase; letter-spacing: .08em; } .userMenu .active { color: var(--acc); font-weight: 600; } /* 外观偏好(用户菜单内):明暗二选 + 主题色六点 */ .menuModeRow { display: flex; gap: 6px; padding: 4px 9px; } .modeBtn { flex: 1 1; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 4px 0; font-size: 12px; color: var(--ink); } .modeBtn.on { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); font-weight: 600; } .accentRow { display: flex; gap: 9px; padding: 7px 9px 9px; } .accentDot { width: 17px; height: 17px; border-radius: 50%; border: none; padding: 0; cursor: pointer; } .accentDot.on { outline: 2px solid var(--acc); outline-offset: 2px; } .mobileOnly { display: none; } .nav { border-right: 1px solid var(--line); background: var(--surface); padding: 10px 8px; overflow-y: auto; } .nav .sect { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin: 14px 8px 4px; } .nav .sect:first-child { margin-top: 2px; } .nav a, .nav .navItem { display: flex; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 6px; color: var(--ink); font-size: 13.5px; } .nav a:hover { background: var(--bg); } .nav a.on { background: var(--acc-soft); color: var(--acc); font-weight: 600; } .nav .dim { color: var(--soft); } .nav .soon { margin-left: auto; font-size: 10px; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; } .main { overflow-y: auto; padding: 20px 24px; } .rail { border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; padding-top: 12px; gap: 8px; } .railDot { width: 12px; height: 12px; border-radius: 50%; background: var(--acc); } .railHint { writing-mode: vertical-rl; font-size: 10.5px; color: var(--soft); letter-spacing: .12em; } /* ---- widgets ---- */ .todobar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .todobar span { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 4px 12px; font-weight: 600; font-size: 12.5px; } .cardTitle { font-size: 14px; font-weight: 700; margin: 18px 0 8px; } .shortcuts { display: flex; flex-wrap: wrap; gap: 8px; } .shortcuts span { border: 1px dashed var(--line); border-radius: 8px; padding: 6px 14px; font-size: 12.5px; color: var(--soft); background: var(--surface); } .placeholder { border: 1px dashed var(--line); border-radius: 10px; padding: 22px; color: var(--soft); background: var(--surface); font-size: 13px; } table.data { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--surface); border: 1px solid var(--line); } table.data th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); padding: 8px 12px; border-bottom: 1.5px solid var(--line); white-space: nowrap; } table.data td { padding: 7px 12px; border-bottom: 1px solid var(--line-faint); vertical-align: top; } table.data tr:last-child td { border-bottom: none; } .pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600; background: var(--acc-soft); color: var(--acc); } .pill.deny { background: var(--bad-soft); color: var(--bad); } .err { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 10px 14px; font-size: 13px; } /* ---- 会话页 v0(C2 定稿后升 v1:MD 渲染/工具块/流式) ---- */ .chatWrap { display: grid; grid-template-columns: 220px 1fr; grid-gap: 0; gap: 0; height: 100%; margin: -20px -24px; } .convList { border-right: 1px solid var(--line); background: var(--surface); padding: 10px 8px; overflow-y: auto; } .convNew { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px dashed var(--line); background: none; border-radius: 7px; padding: 6px 10px; font-size: 12.5px; color: var(--acc); } .convGroup { margin: 12px 6px 3px; font-size: 10.5px; letter-spacing: .05em; color: var(--soft); font-weight: 600; } /* J 反馈(2026-08-30):会话从属于 agent,组头必须比会话行更主——13px 主色可折叠按钮;会话行缩进 + 左导轨呈现从属。默认折叠,活跃组强制展开。 */ .convGroupBtn { display: flex; align-items: center; gap: 5px; width: 100%; border: none; background: none; text-align: left; margin-top: 12px; padding: 6px 6px; font-size: 13px; font-weight: 650; color: var(--ink); border-radius: 6px; } .convGroupBtn:hover { background: var(--bg); } .convGroupBtn svg { color: var(--soft); flex: none; } .convGroupName { flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convGroupCount { font-size: 10.5px; color: var(--soft); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* 双类选择器(0,2,0):源序在后的 .convItem{border:none} 简写会把单类的 border-left 整个重置掉(computed 实测 0px none)——特异性压回,不赌源序。 */ .convItem.convItemNested { margin-left: 13px; width: calc(100% - 13px); padding-left: 14px; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0; font-size: 12.5px; margin-top: 2px; } .convItem.convItemNested.on { border-left-color: var(--acc); } /* convSideRow:chat 侧栏会话行包装——不叫 convRow!270 行附近已有同名类 (agent 详情页会话卡,白底 flex 卡片),撞名会把侧栏行渲染成大卡片 (2026-08-30 实拍+computed 双证)。 */ .convSideRow { position: relative; } .convSideRow .convSideRowAct { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; border: none; background: var(--surface); color: var(--soft); border-radius: 5px; padding: 3px 5px; } .convSideRow:hover .convSideRowAct { display: block; } .convSideRow .convSideRowAct:hover { color: var(--acc); } .convSideRow:hover .convItem { padding-right: 30px; } .convGroupTag { margin-left: 6px; font-size: 10px; color: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } .convGroupBtnDim { color: var(--soft); font-weight: 600; } .convArchivedSect { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 4px; } .convItemArchived { opacity: .75; } .profileSel { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: 12px; background: var(--surface); color: var(--soft); } .profileHint { font-size: 10px; color: var(--soft); margin: 8px 2px 2px; letter-spacing: .05em; } .chatHead { padding: 6px 22px; border-bottom: 1px solid var(--line-faint); font-size: 11.5px; color: var(--soft); background: var(--surface); display: flex; justify-content: space-between; } .occRing { width: 15px; height: 15px; border-radius: 50%; position: relative; flex: none; } .occRing::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); } .ctxToggle, .forkBtn { background: none; border: none; color: var(--acc); font-size: 11.5px; } .ctxPanel { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; padding: 7px 22px; border-bottom: 1px solid var(--line-faint); background: var(--surface); font-size: 11px; color: var(--soft); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .ctxNote { color: var(--acc); font-size: 11px; } .ctxCompact { margin-left: auto; border: 1px solid var(--acc); color: var(--acc); background: none; border-radius: 6px; padding: 1px 10px; font-size: 11px; } .convTitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convModel { display: block; font-size: 10px; color: var(--acc); opacity: .8; } .convItem { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 10px; margin-top: 4px; border-radius: 6px; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convItem:hover { background: var(--bg); } .convItem.on { background: var(--acc-soft); color: var(--acc); font-weight: 600; } .chatPane { display: flex; flex-direction: column; height: calc(100vh - 48px); } .msgList { flex: 1 1; overflow-y: auto; padding: 18px 22px; } /* C2 定稿:文档流,用户右侧浅底短块,agent 无框 MD 排版 */ .msgRow { display: flex; margin: 12px 0; } .msgRow.user { justify-content: flex-end; } .uMsg { background: var(--acc-soft); border-radius: 10px; padding: 7px 14px; max-width: 60ch; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; } .mdBody { font-size: 14px; max-width: 74ch; word-break: break-word; line-height: 1.75; } .mdBody.dim { color: var(--soft); } .mdBody p { margin: 6px 0; } .mdBody h1, .mdBody h2, .mdBody h3, .mdBody h4 { margin: 12px 0 6px; font-size: 15px; } .mdBody table { border-collapse: collapse; font-size: 13px; margin: 8px 0; display: block; overflow-x: auto; max-width: 100%; } .mdBody th { text-align: left; color: var(--soft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 5px 10px; border-bottom: 1.5px solid var(--line); } .mdBody td { padding: 5px 10px; border-bottom: 1px solid var(--line-faint); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .mdBody pre { background: var(--codeblk); color: var(--codeblk-ink); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; line-height: 1.6; } .mdBody code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; } .mdBody pre code { background: none; padding: 0; } .mdBody ul, .mdBody ol { margin: 6px 0; padding-left: 22px; } .mdBody blockquote { margin: 6px 0; padding: 2px 12px; border-left: 3px solid var(--line); color: var(--soft); } /* 工具块四态(C2:成功折叠/失败展开/执行中) */ .toolWrap { max-width: 64ch; } .toolChip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--line-faint); background: var(--bg); border-radius: 8px; padding: 4px 12px; font-size: 12px; color: var(--soft); } .toolChip.fail { border-color: var(--bad); background: var(--bad-soft); } .toolPreview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1; font-family: ui-monospace, Menlo, monospace; font-size: 11px; } .toolState { flex: none; font-size: 11px; } .toolChip.ok .toolState { color: var(--ok); } .toolChip.fail .toolState { color: var(--bad); } .toolBody { font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--soft); background: var(--bg); border: 1px solid var(--line-faint); border-radius: 7px; padding: 5px 10px; max-width: 72ch; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .toolName { color: var(--acc); font-weight: 600; } .dimNote { color: var(--soft); font-size: 12.5px; } .chatInputRow { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); } .chatInput { flex: 1 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; background: var(--bg); color: var(--ink); resize: none; } .chatInput:focus { outline: 2px solid var(--acc); border-color: transparent; } .chatSend { width: 40px; border: none; border-radius: 8px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; } .chatSend:disabled { opacity: .5; } /* ---- 工作区抽屉(W4:agent 正在弄的文件;数据来自 sandboxd 冷端点) ---- */ .chatWrap.wsOn { grid-template-columns: 220px 1fr 280px; } .wsDrawer { border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - 48px); } .wsHead { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line-faint); font-size: 12.5px; font-weight: 600; } .wsHead span { flex: 1 1; } .wsIconBtn { background: none; border: none; color: var(--soft); padding: 3px; border-radius: 5px; display: flex; align-items: center; } .wsIconBtn:hover { color: var(--acc); background: var(--line-faint); } .wsTree { flex: 1 1; overflow-y: auto; padding: 6px 4px; min-height: 80px; } .wsRow { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; text-align: left; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; color: var(--ink); } .wsRow:hover { background: var(--line-faint); } .wsRow.on { background: var(--acc-soft); color: var(--acc); } .wsRow svg { flex: none; color: var(--soft); } .wsRow.on svg { color: var(--acc); } .wsName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wsSize { margin-left: auto; font-size: 10.5px; color: var(--soft); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .wsEmpty { padding: 10px; font-size: 12px; color: var(--soft); } .wsErrNote { padding: 10px; font-size: 12px; color: var(--bad); } .wsPreview { border-top: 1px solid var(--line); max-height: 55%; display: flex; flex-direction: column; } .wsPreviewHead { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; font-size: 11.5px; color: var(--soft); font-family: ui-monospace, Menlo, monospace; border-bottom: 1px solid var(--line-faint); } .wsPreviewPath { flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wsPreview pre { margin: 0; padding: 8px 10px; overflow: auto; font-size: 11.5px; line-height: 1.5; flex: 1 1; } /* ---- 工作区抽屉页签(sandbox-postgres 刀2:「文件」/「数据库」并列) ---- */ .wsTabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line-faint); } .wsTab { flex: 1 1; text-align: center; font-size: 11.5px; font-weight: 600; border: none; background: var(--line-faint); color: var(--soft); padding: 4px 0; border-radius: 6px; } .wsTab.on { background: var(--acc-soft); color: var(--acc); } .dbPanel { flex: 1 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 14px; } .dbSection { display: flex; flex-direction: column; gap: 6px; } .dbSectionTitle { font-size: 11.5px; font-weight: 700; color: var(--soft); letter-spacing: .02em; text-transform: uppercase; } .dbEmpty { font-size: 12px; color: var(--soft); line-height: 1.5; } .dbErr { font-size: 12px; color: var(--bad); } .dbRow { border: 1px solid var(--line-faint); border-radius: 8px; padding: 7px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; } .dbRowHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dbRowMain { font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; } .dbRowMeta { font-size: 11px; color: var(--soft); } .dbShareBtn { display: flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; border: 1px solid var(--line); background: var(--bg); color: var(--acc); border-radius: 6px; padding: 3px 8px; } .dbShareBtn:hover { background: var(--acc-soft); } .dbGrantList { display: flex; flex-wrap: wrap; gap: 5px; } .dbGrantChip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-faint); border-radius: 999px; padding: 2px 4px 2px 9px; } .dbGrantRevoke { display: flex; align-items: center; justify-content: center; border: none; background: var(--line-faint); color: var(--soft); border-radius: 50%; width: 15px; height: 15px; } .dbGrantRevoke:hover { background: var(--bad-soft); color: var(--bad); } .dbHintCode { font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; color: var(--soft); background: var(--bg); border: 1px solid var(--line-faint); border-radius: 6px; padding: 4px 7px; overflow-x: auto; white-space: pre; } .dbWholeTenant { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); margin: 8px 0 12px; } .dbModeRow { display: flex; gap: 14px; margin-bottom: 12px; } .dbModeOpt { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink); } /* ---- 智能体页族(W2d:agent 中心化 IA) ---- */ .agentsWrap { max-width: 860px; } .pageTitle { font-size: 20px; margin: 0 0 4px; } .pageDek { color: var(--soft); font-size: 13px; margin: 0 0 18px; } .agentGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 12px; gap: 12px; } .agentCard { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .agentCard:hover { border-color: var(--acc); } .agentCardHead { display: flex; align-items: center; gap: 8px; } .agentName { font-weight: 600; font-size: 14.5px; } .agentBadge { font-size: 10.5px; color: var(--acc); background: var(--acc-soft); border-radius: 99px; padding: 1px 8px; white-space: nowrap; flex-shrink: 0; } .agentCaps { display: flex; gap: 6px; min-height: 20px; } .capChip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--soft); border: 1px solid var(--line-faint); border-radius: 6px; padding: 1px 7px; } .agentCardFoot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--soft); margin-top: 2px; } .agentHead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .agentMeta { font-size: 12px; color: var(--soft); } .tabRow { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 16px; } .tabBtn { background: none; border: none; padding: 7px 14px; font-size: 13.5px; color: var(--soft); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabBtn.on { color: var(--acc); border-bottom-color: var(--acc); font-weight: 600; } .agentPane { min-height: 200px; } .dimText { color: var(--soft); font-size: 13px; } .convRow { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-faint); border-radius: 8px; margin-bottom: 6px; background: var(--surface); font-size: 13px; } .convRow:hover { border-color: var(--acc); } .convRowTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convRowTime { color: var(--soft); font-size: 11.5px; flex: none; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .wsPane { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; grid-gap: 14px; gap: 14px; } .wsTreeFull { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 4px; max-height: 480px; overflow-y: auto; } .wsPreviewFull { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); max-height: 480px; } .memRow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-faint); border-radius: 8px; margin-bottom: 6px; background: var(--surface); font-size: 13px; } .memContent { flex: 1 1; } .cfgPane { display: flex; flex-direction: column; gap: 18px; max-width: 560px; } .cfgSection { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .cfgLabel { font-size: 11.5px; letter-spacing: .05em; color: var(--soft); font-weight: 600; margin-bottom: 8px; } .cfgRead { font-size: 13px; margin: 4px 0; white-space: pre-wrap; } .cfgField { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soft); margin-bottom: 10px; } .cfgField input, .cfgField select, .cfgField textarea { font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; background: var(--bg); } .cfgSave { align-self: flex-start; background: var(--acc); color: var(--surface); border: none; border-radius: 7px; padding: 7px 18px; font-size: 13px; font-weight: 600; } .cfgNote { margin-left: 10px; font-size: 12.5px; color: var(--soft); } @media (max-width: 768px) { .wsPane { grid-template-columns: 1fr; } } /* ---- 目录权限(W3) ---- */ .permRow { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; } .permTarget { flex: 1 1; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; } .permRow select { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; } /* ---- 应用中心(P4a → 刀2b 安装协议) ---- */ .appCard { cursor: default; } .appCard.appOff { opacity: .65; } .appChipRow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .appVersionTag { font-size: 10.5px; color: var(--soft); background: var(--bg); border: 1px solid var(--line-faint); border-radius: 99px; padding: 1px 8px; white-space: nowrap; } .appStatusChip { font-size: 10.5px; border-radius: 99px; padding: 1px 8px; white-space: nowrap; flex-shrink: 0; border: 1px solid transparent; } .appStatusChip-enabled { color: var(--acc); background: var(--acc-soft); } .appStatusChip-installed, .appStatusChip-disabled { color: var(--soft); background: var(--bg); border-color: var(--line-faint); } .appStatusChip-not_installed { color: var(--soft); border: 1px dashed var(--line-faint); } .appStatusChip-uninstalled { color: var(--soft); background: var(--bg); border-color: var(--line-faint); } .appStatusChip-purge_pending { color: var(--warn); background: var(--warn-soft); } .appStatusChip-purged { color: var(--bad); background: var(--bad-soft); } .appActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .appSummary { font-size: 11.5px; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 5px 8px; margin-top: 2px; line-height: 1.5; } .miniBtnDanger { font-size: 12px; border: 1px solid var(--bad); background: var(--surface); border-radius: 6px; padding: 2px 10px; color: var(--bad); } .miniBtnDanger:hover { background: var(--bad-soft); } .miniBtnDanger:disabled, .miniBtn:disabled { opacity: .5; cursor: not-allowed; } /* ---- 技能 tab(W5) ---- */ .skillRow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-faint); border-radius: 8px; margin-bottom: 6px; background: var(--surface); font-size: 13px; cursor: pointer; } .skillRow:hover { border-color: var(--acc); } .skillName { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: none; } .skillKey { font-size: 11px; color: var(--soft); background: var(--code-bg); padding: 1px 6px; border-radius: 4px; } .skillScope { font-size: 10.5px; color: var(--acc); background: var(--acc-soft); border-radius: 99px; padding: 1px 8px; } .skillDesc { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- 租户模板管理(W6) ---- */ .miniBtn { font-size: 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 2px 10px; color: var(--ink); } .miniBtn:hover { border-color: var(--acc); color: var(--acc); } .cfgEditor { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0 18px; max-width: 640px; } .cfgInline { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .cfgCheck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } /* ---- 移动端(断点 768,UI 规范 v1):底部五签 + orchestrator 浮点 ---- */ .mobileTabs { display: none; } .orbFab { display: none; } @media (max-width: 768px) { .shell { grid-template-columns: 1fr; grid-template-rows: 48px 1fr; } .nav, .rail { display: none; } .search { display: none; } .topbar { gap: 10px; } .brand { margin-right: auto; } .main { padding: 14px 14px 72px; } .mobileTabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: var(--surface); border-top: 1px solid var(--line); z-index: 20; padding-bottom: env(safe-area-inset-bottom); } .mobileTabs a, .mobileTabs button { flex: 1 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; color: var(--soft); background: none; border: none; } .mobileTabs .on { color: var(--acc); font-weight: 600; } .mobileTabs .dim { opacity: .55; } .orbFab { display: flex; position: fixed; right: 14px; bottom: 72px; width: 44px; height: 44px; border-radius: 50%; background: var(--acc); border: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px var(--overlay-25); z-index: 21; } .orbFabDot { width: 12px; height: 12px; border-radius: 50%; background: var(--on-acc); } /* .chatWrap/.convList 移动覆盖随刀2 死亡:/chat 页只剩 301 重定向,这两个类在整个前端已无渲染点(工作台 /agents 用 workbench.module.css 的 .wrap/.tree,移动两屏切换见该文件)。.chatPane/.wsDrawer 是纯样式类, ConversationView.tsx 直接引用,工作台仍在用,留着。 */ .chatPane { height: calc(100vh - 48px - 56px); } .wsDrawer { position: fixed; right: 0; top: 48px; bottom: 56px; width: min(320px, 90vw); z-index: 22; height: auto; box-shadow: -8px 0 24px var(--overlay-18); } .userMenu { position: fixed; right: 10px; top: 52px; } .userMenu .mobileOnly { display: block; } /* ⌘K 面板宽度(command-palette.tsx 传 Modal width={560},dialog.tsx 的 width prop 是 number,传不了 min())——内联 style 优先级压过任何选择器, !important 是唯一能盖过它的手段。本该写进 command-palette.module.css, 但那是 CSS Module:Modal 的 panel div 只挂了 dialog.module.css 的 .panel,没有本地锚点,纯 `:global([data-testid=...])` 选择器会被 Next 的纯选择器校验判 impure(build 时实测报错),只能落在这份普通全局表里。dialog.module.css 的 .panel{max-width:calc(100vw-32px)} 本来就兜底不溢出,这条只是把窄屏边距从死板的 16px 换成更协调的 8vw 呼吸边距。 */ [data-testid="command-palette"] { width: min(560px, 92vw) !important; } } /* ---- login ---- */ .loginWrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .loginCard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 32px 30px; width: 340px; box-shadow: 0 8px 30px var(--overlay-08); } .loginCard h1 { margin: 0 0 4px; font-size: 22px; } .loginCard p { margin: 0 0 18px; color: var(--soft); font-size: 13px; } .loginCard label { display: block; font-size: 12.5px; color: var(--soft); margin: 12px 0 4px; } .loginCard input { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; background: var(--bg); color: var(--ink); } .loginCard input:focus { outline: 2px solid var(--acc); border-color: transparent; } .loginBtn { width: 100%; margin-top: 18px; background: var(--acc); color: var(--on-acc); border: none; border-radius: 7px; padding: 9px 0; font-weight: 600; } .loginBtn:disabled { opacity: .6; } /* ── 定时任务(add-scheduler-console)────────────────────────── */ .runChip-succeeded { color: var(--ok); background: var(--ok-soft); border-radius: 6px; padding: 1px 7px; font-size: 11px; } .runChip-failed { color: var(--bad); background: var(--bad-soft); border-radius: 6px; padding: 1px 7px; font-size: 11px; } .runChip-blocked { color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 1px 7px; font-size: 11px; } .runChip-pending { color: var(--soft); border: 1px solid var(--line-faint); border-radius: 6px; padding: 1px 7px; font-size: 11px; } .runList { border-top: 1px solid var(--line-faint); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 5px; } .runRow { display: flex; align-items: center; gap: 10px; font-size: 12px; } .cfgLabel { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soft); margin-top: 8px; } .cfgInput { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; background: var(--bg); color: var(--ink); font-size: 13px; } /* ── 通知铃铛(add-notifications)──────────────────────────── */ .bell { position: relative; } .bellBadge { position: absolute; top: -3px; right: -5px; background: var(--bad); color: var(--on-solid); font-size: 9.5px; font-weight: 700; border-radius: 99px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; } .bellPanel { position: absolute; right: 0; top: 34px; width: 320px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px var(--overlay-18); overflow: hidden; } .bellHead { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--line); } .bellEmpty { padding: 18px; text-align: center; color: var(--soft); font-size: 12.5px; } .bellItem { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 13px; border-bottom: 1px solid var(--line-faint); color: var(--ink); } .bellItem:hover { background: var(--acc-soft); } .bellItem b { font-size: 12.5px; } .bellItem span { font-size: 11.5px; color: var(--soft); } .bellItem.read { opacity: .55; } .bellItem:last-child { border-bottom: none; } /* 内部聊天(add-team-chat) */ .chatSplit { display:flex; gap:16px; height: calc(100vh - 130px); } .chatRooms { width: 230px; overflow-y:auto; flex-shrink:0; } .roomBtn { display:flex; align-items:center; gap:6px; width:100%; padding:7px 9px; border:1px solid transparent; background:transparent; border-radius:8px; cursor:pointer; color: var(--ink); font-size:13px; text-align:left; } .roomBtn:hover { background: var(--surface-2, var(--surface)); } .roomBtn.on { border-color: var(--acc); } .roomTitle { flex:1 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .roomUnread { background: var(--acc); color:var(--on-acc); border-radius:99px; font-size:11px; padding:0 6px; min-width:17px; text-align:center; } .chatPane { flex:1 1; display:flex; flex-direction:column; min-width:0; } .chatMsgs { flex:1 1; overflow-y:auto; padding:6px 2px; margin-bottom:8px; } .tcMsg { margin:7px 0; max-width:78%; } .tcMsg.mine { margin-left:auto; text-align:right; } .tcSender { font-size:11px; color:var(--soft); } .tcBubble { background: var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 11px; font-size:13px; white-space:pre-wrap; word-break:break-word; display:inline-block; text-align:left; } .tcMsg.mine .tcBubble { border-color: var(--acc); } /* ==== teamchat v2 (T1) ==== 消息基建补课:client_message_id 幂等发送(乐观灰态→确认转正/失败可点重试)、表情回应(reacji toggle)、编辑/删除(墓碑留痕)、@提及高亮 + 联想(候选= 历史发言人∪本人,无独立成员接口时的折衷,详见 page.tsx 顶部注释)。弹层/hover 手法复用既有语汇:opacity 过渡同 .forkAt,弹层视觉同 .userMenu/.bellPanel(surface + line + shadow)。 */ .tcMsg { position: relative; } .tcMsgHead { display: flex; align-items: center; gap: 6px; } .tcMsg.mine .tcMsgHead { justify-content: flex-end; } .tcActions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; } .tcMsg:hover .tcActions { opacity: 1; } .tcActionBtn { border: 1px solid var(--line); background: var(--surface); color: var(--soft); border-radius: 6px; padding: 0 6px; font-size: 12px; line-height: 18px; cursor: pointer; } .tcActionBtn:hover { color: var(--acc); border-color: var(--acc); } .tcBubble.tcPending { opacity: .55; } .tcBubble.tcFailed { border-color: var(--bad); color: var(--bad); cursor: pointer; } .tcFailedHint { font-size: 10.5px; margin-top: 2px; } .tcBubble.tcDeleted { color: var(--soft); font-style: italic; } .tcEdited { font-size: 10.5px; color: var(--soft); margin-left: 6px; font-style: italic; } .tcMention { color: var(--acc); font-weight: 600; } .tcReactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .tcMsg.mine .tcReactions { justify-content: flex-end; } .tcReactionChip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; color: var(--ink); cursor: pointer; } .tcReactionChip:hover { border-color: var(--acc); } .tcReactionChip.mine { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); } .tcEmojiBar { position: absolute; top: 22px; z-index: 40; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 5px; box-shadow: 0 6px 20px var(--overlay-12); } .tcMsg.mine .tcEmojiBar { right: 0; } .tcMsg:not(.mine) .tcEmojiBar { left: 0; } .tcEmojiOpt { border: none; background: none; font-size: 17px; line-height: 1; padding: 4px 5px; border-radius: 6px; cursor: pointer; } .tcEmojiOpt:hover { background: var(--acc-soft); } .tcMsgMenuPop { position: absolute; top: 22px; z-index: 40; min-width: 92px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px var(--overlay-12); } .tcMsg.mine .tcMsgMenuPop { right: 0; } .tcMsg:not(.mine) .tcMsgMenuPop { left: 0; } .tcMsgMenuItem { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 9px; border-radius: 5px; color: var(--ink); font-size: 12.5px; cursor: pointer; } .tcMsgMenuItem:hover { background: var(--acc-soft); color: var(--acc); } .tcMsgMenuItem.danger:hover { background: var(--bad-soft); color: var(--bad); } .tcEditInput { width: 100%; border: 1px solid var(--acc); border-radius: 8px; padding: 6px 10px; background: var(--inputbg); color: var(--ink); font-size: 13px; } .tcComposer { position: relative; } .tcComposerInput { border: 1px solid var(--line); border-radius: 7px; padding: 7px 11px; background: var(--inputbg); color: var(--ink); } .tcComposerInput:focus { outline: 2px solid var(--acc); border-color: transparent; } .tcMentionPop { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; min-width: 160px; max-width: 260px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; z-index: 40; box-shadow: 0 6px 20px var(--overlay-12); } .tcMentionOpt { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 9px; border-radius: 5px; color: var(--ink); font-size: 13px; cursor: pointer; } .tcMentionOpt:hover, .tcMentionOpt.on { background: var(--acc-soft); color: var(--acc); } /* ==== mail (add-mail-core) ==== */ .mailShell { display: flex; height: calc(100vh - 48px); margin: -20px -24px; } .mailListPane { display: flex; flex-shrink: 0; } .mailNav { width: 190px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 10px 8px; overflow-y: auto; overflow-x: hidden; transition: width .15s ease; } /* 左视图栏折叠(Jacob 实测反馈,2026-08-29):收成 ~44px 图标窄条,视图项只留 icon(title 属性兜底提示),账号盒/分组标题/账号切换整块隐藏—— 都是纯文本,44px 装不下,展开即恢复。 */ .mailNav.collapsed { width: 44px; padding: 10px 4px; } .mailNavCollapseBtn { display: flex; align-items: center; justify-content: center; width: 100%; border: none; background: none; color: var(--soft); cursor: pointer; padding: 4px 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-faint); } .mailNavCollapseBtn:hover { color: var(--acc); } .mailNav.collapsed .mailAcctBox, .mailNav.collapsed .mailNavSect, .mailNav.collapsed .mailNavAccts { display: none; } .mailNav.collapsed .mailNavItem { justify-content: center; padding: 8px 0; } .mailNav.collapsed .mailNavItem span { display: none; } .mailAcctBox { padding: 4px 6px 10px; border-bottom: 1px solid var(--line-faint); margin-bottom: 8px; } .mailAcctName { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailAcctAddr { font-size: 11px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailSyncRow { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .mailSyncTime { font-size: 10.5px; color: var(--soft); } .mailLastErr { color: var(--bad); font-size: 11.5px; margin: 6px 0 0; } .mailNavSect { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 12px 6px 4px; } .mailNavItem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 6px 8px; border-radius: 7px; font-size: 13px; color: var(--ink); margin-bottom: 2px; } .mailNavItem:hover { background: var(--bg); } .mailNavItem.on { background: var(--acc-soft); color: var(--acc); font-weight: 600; } .mailNavItem svg { flex: none; } /* 视图 tab 分组容器(移动适配,2026-09-01):宽屏 display:contents—— VIEWS.map 产出的按钮形同直接挂在 .mailNav 下,纵向列表逐像素不变; 只有 ≤768 断点(见文末移动端 mail 块)才现出真正的 flex 容器,变成横向可滚动 pill 行。 */ .mailNavViews { display: contents; } .mailList { width: var(--mail-list-w, 300px); flex-shrink: 0; overflow-y: auto; background: var(--surface); } /* 中列表/右详情可拖动分界线(Jacob 实测反馈,2026-08-29):pointerdown/move/up + setPointerCapture 改 --mail-list-w;touch-action:none 给触屏用;hover/拖动时中线用 --acc 高亮 2px,平时是细细一条 --line。 */ .mailDivider { width: 7px; flex-shrink: 0; cursor: col-resize; position: relative; touch-action: none; background: none; border: none; padding: 0; } .mailDivider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--line); } .mailDivider:hover::before, .mailDivider.dragging::before { left: 2.5px; width: 2px; background: var(--acc); } .mailThreadRow { padding: 9px 12px; border-bottom: 1px solid var(--line-faint); cursor: pointer; } .mailThreadRow:hover { background: var(--bg); } .mailThreadRow.active { background: var(--acc-soft); } .mailRowTop { display: flex; justify-content: space-between; gap: 6px; } .mailFrom { font-weight: 400; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .mailThreadRow.unread .mailFrom { font-weight: 700; color: var(--ink); } .mailTime { color: var(--soft); font-size: 10.5px; flex-shrink: 0; } .mailRowSubj { display: flex; align-items: center; gap: 5px; margin-top: 2px; } .mailSubjText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; flex: 1 1; } .mailThreadRow.unread .mailSubjText { font-weight: 700; color: var(--ink); } .mailUnreadBadge { background: var(--acc); color: var(--on-acc); border-radius: 99px; font-size: 10px; padding: 0 6px; flex-shrink: 0; } .mailParticipants { color: var(--soft); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailSnippet { color: var(--soft); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailSnippet::before { content: "✦ "; color: var(--acc); } .mailTag { display: inline-flex; align-items: center; border-radius: 5px; padding: 1px 6px; font-size: 10.5px; border: none; flex-shrink: 0; font: inherit; } .mailTag-need_reply { background: var(--acc-soft); color: var(--acc); } .mailTag-fyi { background: var(--line-faint); color: var(--soft); } .mailTag-archive_suggest { background: var(--line-faint); color: var(--soft); text-decoration: line-through; } .mailTag-none { background: var(--line-faint); color: var(--soft); } .mailThreadPane { flex: 1 1; min-width: 0; overflow-y: auto; padding: 14px 20px; background: var(--bg); } .mailBackBtn { display: none; } .mailThreadHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; } .mailMsgs { display: flex; flex-direction: column; } .mailMsg { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; } .mailMsgMeta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--soft); margin-bottom: 2px; } .mailMsgMeta b { color: var(--ink); font-weight: 600; } .mailMsgTo { font-size: 11px; color: var(--soft); margin-bottom: 6px; } .mailBody { font-size: 13px; white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; color: var(--ink); } .mailQuoted { font-size: 12px; color: var(--soft); white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; padding: 6px 10px; border-left: 2px solid var(--line); background: var(--bg); } .mailSpin { animation: mailSpin .8s linear infinite; } @keyframes mailSpin { to { transform: rotate(360deg); } } /* ---- 事件(Matter)视图 + 人工锚(add-mail-matter) ---- */ .mailModeTabs { display: flex; gap: 4px; padding: 8px 10px 6px; border-bottom: 1px solid var(--line-faint); } .mailModeTab { flex: 1 1; text-align: center; font-size: 12px; font-weight: 600; border: none; background: var(--line-faint); color: var(--soft); padding: 5px 0; border-radius: 6px; } .mailModeTab.on { background: var(--acc-soft); color: var(--acc); } .mailMatterRow { padding: 9px 12px; border-bottom: 1px solid var(--line-faint); cursor: pointer; } .mailMatterRow:hover { background: var(--bg); } .mailMatterRow.active { background: var(--acc-soft); } .mailMatterRow.unread .mailSubjText { font-weight: 700; color: var(--ink); } .mailMatterMeta { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 11px; margin-top: 2px; } .mailRefChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mailRefChip { display: inline-flex; align-items: center; border-radius: 4px; padding: 1px 6px; font-size: 10px; background: var(--line-faint); color: var(--soft); font-family: monospace; } .mailMatterHint { color: var(--acc); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailMatterHead { align-items: flex-start; } .mailMatterHeadMeta { color: var(--soft); font-size: 12px; margin-top: 3px; } .mailGroupHead { font-size: 11px; color: var(--soft); letter-spacing: .02em; margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px dashed var(--line-faint); } .mailGroupHead:first-child { margin-top: 0; } .mailToolsRow { display: flex; gap: 8px; margin-bottom: 8px; } .mailMovePanel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; } .mailMoveInput { font-size: 13px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 6px; padding: 6px 8px; width: 100%; box-sizing: border-box; } .mailMoveList { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .mailMoveOption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; border: none; background: none; padding: 6px 6px; border-radius: 6px; font: inherit; color: var(--ink); } .mailMoveOption:hover { background: var(--bg); } .mailMoveOptionTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .mailMoveOptionMeta { color: var(--soft); font-size: 10.5px; flex-shrink: 0; } .mailMoveNewBtn { font-size: 12.5px; border: 1px dashed var(--acc); background: var(--acc-soft); color: var(--acc); border-radius: 6px; padding: 6px 8px; text-align: left; } .mailMoveErr { color: var(--bad); font-size: 11.5px; margin: 0; } .mailMoveCancelBtn { align-self: flex-end; border: none; background: none; color: var(--soft); font-size: 11.5px; padding: 2px 4px; } .mailMoveCancelBtn:hover { color: var(--ink); } /* ---- AI 摘要/草稿/待批队列(E2,add-mail-ai) ---- */ .mailSummaryCard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; } .mailSummaryHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mailSummaryTitle { font-size: 12.5px; font-weight: 700; color: var(--acc); } .mailSummaryLoading { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 12.5px; margin-top: 8px; } .mailSummaryErr { color: var(--bad); font-size: 12px; margin: 8px 0 0; } /* 摘要卡 md 紧凑样式(react-markdown + remarkGfm,2026-08-29):真模型输出是 markdown,但摘要卡篇幅小,标题/间距要收紧,不许蹦出跟正文页(.mdBody)一样大的标题;草稿/邮件正文语义是纯文本,不在这份样式覆盖范围内。 */ .mailSummaryBody { font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; margin: 8px 0 0; font-family: inherit; color: var(--ink); } .mailSummaryBody h1, .mailSummaryBody h2, .mailSummaryBody h3, .mailSummaryBody h4, .mailSummaryBody h5, .mailSummaryBody h6 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; line-height: 1.4; } .mailSummaryBody h1:first-child, .mailSummaryBody h2:first-child, .mailSummaryBody h3:first-child, .mailSummaryBody h4:first-child, .mailSummaryBody h5:first-child, .mailSummaryBody h6:first-child { margin-top: 0; } .mailSummaryBody p { margin: 4px 0; } .mailSummaryBody ul, .mailSummaryBody ol { margin: 4px 0; padding-left: 18px; } .mailSummaryBody li { margin: 2px 0; } .mailSummaryBody li > p { margin: 0; } .mailSummaryBody blockquote { margin: 4px 0; padding: 2px 10px; border-left: 2px solid var(--line); color: var(--soft); } .mailSummaryBody code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; background: var(--line-faint); padding: 1px 4px; border-radius: 4px; } .mailSummaryBody pre { background: var(--codeblk); color: var(--codeblk-ink); border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 4px 0; } .mailSummaryBody pre code { background: none; padding: 0; } .mailSummaryBody strong { font-weight: 700; color: var(--ink); } .mailSummaryBody table { border-collapse: collapse; font-size: 12px; margin: 4px 0; display: block; overflow-x: auto; } .mailSummaryBody th { text-align: left; color: var(--soft); padding: 3px 8px; border-bottom: 1px solid var(--line); } .mailSummaryBody td { padding: 3px 8px; border-bottom: 1px solid var(--line-faint); } .mailSummaryMeta { color: var(--soft); font-size: 11px; margin-top: 6px; } .mailDraftPanel { margin-bottom: 10px; } .mailDraftToolsRow { align-items: center; } .mailDraftInstruction { flex: 1 1; min-width: 0; font-size: 12.5px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 6px; padding: 5px 8px; } .mailAiBtn::before { content: "✦ "; color: var(--acc); } .mailAiBtn { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; } .mailDraftErr { color: var(--bad); font-size: 12px; margin: 6px 0 0; } .mailDraftCollapsed { border: 1px dashed var(--line); background: var(--surface); color: var(--soft); font-size: 12px; border-radius: 6px; padding: 6px 10px; text-align: left; margin-top: 4px; } .mailDraftCollapsed:hover { border-color: var(--acc); color: var(--acc); } .mailDraftCard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .mailRiskBanner { background: var(--warn-soft); color: var(--warn); font-size: 11.5px; border-radius: 6px; padding: 6px 10px; } .mailDraftField { font-size: 12.5px; color: var(--ink); } .mailDraftField b { color: var(--soft); font-weight: 600; margin-right: 4px; } .mailDraftBody { font-size: 13px; font-family: inherit; color: var(--soft); background: var(--bg); border: 1px solid var(--line-faint); border-radius: 6px; padding: 8px 10px; resize: vertical; width: 100%; box-sizing: border-box; } .mailDraftEditNote { color: var(--soft); font-size: 10.5px; margin: 0; } .mailDraftActions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .mailDraftStatus { font-size: 10.5px; border-radius: 4px; padding: 1px 6px; margin-right: 2px; } .mailDraftStatus-draft { background: var(--acc-soft); color: var(--acc); } .mailDraftStatus-sent { background: var(--ok-soft); color: var(--ok); } .mailDraftStatus-rejected { background: var(--bad-soft); color: var(--bad); } .mailApproveBtn:hover { border-color: var(--ok); color: var(--ok); } .mailRejectBtn:hover { border-color: var(--bad); color: var(--bad); } .mailDraftRow { background: var(--surface); border-bottom: 1px solid var(--line-faint); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .mailDraftRow.risky { border-left: 3px solid var(--warn); padding-left: 9px; } .mailDraftMeta { color: var(--soft); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailDraftSubj { color: var(--ink); font-size: 12.5px; } .mailDraftPreview { font-size: 12px; color: var(--ink); white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; max-height: 140px; overflow-y: auto; } /* 窄视口(<1024px,笔记本/平板宽度)中栏+右栏叠层单显——选中即进详情, 返回按钮回列表。这就是原 ≤768 手机逻辑本体上移复用(阈值改宽,规则没分叉成两套):mailListPane/mailThreadPane 互斥显示靠既有 mobileThreadOpen state 与 .mail-mobile-thread class,这里只是让它在更宽的视口也生效。分界线拖拽只在两栏并排时有意义,叠层态下隐藏。 */ @media (max-width: 1024px) { .mailShell { display: block; margin: -14px; height: calc(100vh - 48px - 56px); position: relative; } .mailListPane { display: block; width: auto; height: 100%; overflow-y: auto; } .mailNav { width: auto; border-right: none; border-bottom: 1px solid var(--line); } .mailList { width: auto; } .mailDivider { display: none; } .mailThreadPane { display: none; position: absolute; inset: 0; height: 100%; padding: 10px 14px; } .mailShell.mail-mobile-thread .mailListPane { display: none; } .mailShell.mail-mobile-thread .mailThreadPane { display: block; } .mailBackBtn { display: flex; align-items: center; gap: 4px; border: none; background: none; color: var(--acc); font-size: 13px; padding: 2px 2px 10px; } } /* ---- 移动端(断点 768,全站一致)专属重排(Jacob 实拍反馈,2026-09-01) ---- 上面 ≤1024 那块只解决了"中栏/详情叠层单显",没管窄到手机宽度时左栏本身的下场——navCollapsed 在窄视口默认 true(见 page.tsx mount effect), 而 .mailNav.collapsed 的基础规则(527/532 行一带)会把 .mailAcctBox 整个 display:none、.mailNav 压成 44px 图标窄条:账号名/写信/设置/立即同步/ 搜索框全部够不到,只剩视图图标条悬空挤在顶部一角(真机 390×844 实拍复现)。这里不是新开一套平行逻辑,是把同一批选择器(.mailNav.collapsed 及其子选择器)在这个断点内重新声明一遍——特异性相同,源序在后者赢, 相当于"移动端不认折叠态"。 .mailAcctBox 改 flex 容器后,原来分属 .mailAcctName/两个 .mailSyncRow/ .mailSearchBar/... 的多个直系子元素靠 order 重新插队成一行(账号名+ 齿轮+同步+写信图标化)+ 各自另起一行(地址/同步时间/搜索框/错误/提示)。两个 .mailSyncRow 本身在这里 display:contents——不新增/删除任何控件, 只是把包裹它们的行 div 在视觉上"拆掉",让写信/设置按钮和同步按钮提升成 .mailAcctBox 的直接 flex 子项,才能按 order 插到目标位置;这跟本文件 .headActions{display:contents}(workbench.module.css)是同一手法。 */ @media (max-width: 768px) { .mailNavCollapseBtn { display: none; } .mailNav.collapsed { width: auto; padding: 10px 8px; } .mailNav.collapsed .mailAcctBox { display: flex; } .mailNav.collapsed .mailNavSect { display: block; } .mailNav.collapsed .mailNavAccts { display: flex; } .mailNav.collapsed .mailNavItem { justify-content: flex-start; padding: 6px 10px; } .mailNav.collapsed .mailNavItem span { display: inline; } .mailAcctBox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 2px 0 8px; } .mailAcctBox .mailSyncRow { display: contents; } .mailAcctBox .mailAcctName { order: 1; flex: 1 1 auto; min-width: 0; } .mailAcctBox .mailAcctAddr { order: 5; flex: 1 0 100%; } .mailAcctBox .mailSettingsBtn { order: 2; } .mailAcctBox .mailSyncBtn { order: 3; } .mailAcctBox .mailComposeBtn { order: 4; } .mailAcctBox .mailSettingsBtn, .mailAcctBox .mailSyncBtn, .mailAcctBox .mailComposeBtn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; gap: 0; justify-content: center; border-radius: 8px; } .mailAcctBox .mailBtnLabel { display: none; } .mailAcctBox .mailSyncTime { order: 6; flex: 1 0 100%; } .mailAcctBox .mailSearchBar { order: 7; flex: 1 0 100%; margin-top: 4px; } .mailAcctBox .mailLastErr { order: 8; flex: 1 0 100%; } .mailAcctBox > .cfgNote { order: 9; flex: 1 0 100%; margin-left: 0; } .mailAcctBox .mailSearchInput { padding-top: 7px; padding-bottom: 7px; } /* 视图 tab / 账号切换:横向可滚动 pill 行,不再是纵向整行列表(.mailNavViews 默认 display:contents,见上方基础规则,只在这里现出真身)。 */ .mailNavViews { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; } .mailNavViews .mailNavItem, .mailNavAccts .mailNavItem { width: auto; flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; border-radius: 999px; background: var(--line-faint); padding: 6px 12px; } .mailNavAccts { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin-top: 4px; -webkit-overflow-scrolling: touch; } .mailNavAccts .mailNavSect { margin: 0 2px 0 0; flex: none; } /* 详情内不溢出 390px:附件文件名再收窄一档;事件/线程标题允许折行, 不跟右侧「N 封 · N 线程」挤爆一行;写信/设置面板贴满容器宽度(本就全屏化,见上方 ≤1024 块的 .mail-mobile-thread 全屏机制,这里只是不让 max-width:640px 的桌面上限在窄屏也生效);HTML 正文 iframe 降一点固定高度,给窄屏省一点纵向滚动(宽度早就是 100% 自适应,不用改)。 */ .mailAttChipName { max-width: 140px; min-width: 0; } .mailThreadHead { flex-wrap: wrap; } .mailThreadHead h2 { min-width: 0; overflow-wrap: anywhere; } .mailComposePanel, .mailSettingsPanel { max-width: 100%; } .mailHtmlFrame { height: 420px; max-height: 60vh; } /* 消息卡动作行窄屏收起(见上方「消息卡动作行」块的完整取舍说明): 转发 + 查看富文本/纯文本 toggle(连同它们之间的分隔线)让位给「⋯」, 回复/回复全部留在行内常显,不溢出 390px。 */ .mailMsgActionOverflow { display: none; } .mailMsgMoreBtn { display: inline-flex; } } /* HTML 渲染与附件(add-mail-html-attachments 第 1 刀)。iframe 内部排版走 MailHtmlView.tsx 自带的 srcdoc