forked from ChaiHao/BPOS-MVP
基线:鉴权会话+工作组+工作台三区修复+编排工作区+产品设计文档
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
Claude Fable 5
@@ -116,7 +116,7 @@
|
||||
/* ===== 三栏衔接：列表区 / 视图区 / 对话区统一为三张等距同规格卡片 =====
|
||||
覆盖 vendor 的「左中融合 + 右侧浮卡」旧结构：等间距 gutter、同圆角、同描边、同投影 */
|
||||
/* 对话区宽度 = var(--jc-chat-w)（用户拖拽分隔柄写入 workspace inline style），未拖时走各断点默认 */
|
||||
.proto-root .workspace { position: relative; gap: 12px; padding: 12px 14px; --jc-ws-pr: 14px; --jcai-ai-chat-width: var(--jc-chat-w, 440px); grid-template-columns: 310px minmax(0, 1fr) var(--jcai-ai-chat-width); }
|
||||
.proto-root .workspace { position: relative; gap: 12px; padding: 12px 14px; --jc-ws-pr: 14px; --jcai-ai-chat-width: var(--jc-chat-w, 440px); grid-template-columns: 310px minmax(var(--jc-work-min), 1fr) minmax(0, var(--jcai-ai-chat-width)); }
|
||||
/* 收起态 grid：无媒体查询、全断点生效，覆盖 vendor 各断点的三栏定义（修列错位 bug）。
|
||||
清单收起→[视图区 1fr | 会话区]；会话收起→[清单 | 视图区 1fr]；都收起→[视图区 1fr]。 */
|
||||
.proto-root .workspace.jc-side-collapsed:not(.jc-chat-collapsed) { grid-template-columns: minmax(0, 1fr) var(--jcai-ai-chat-width, 440px); }
|
||||
@@ -149,13 +149,43 @@
|
||||
.proto-root .session-chat { border-radius: 12px; }
|
||||
/* 窄屏（≤1380 视口）：收窄三栏配比，保证对话区不被裁切（拖拽值 --jc-chat-w 仍优先） */
|
||||
@media (max-width: 1380px) {
|
||||
.proto-root .workspace { --jc-ws-pr: 12px; --jcai-ai-chat-width: var(--jc-chat-w, clamp(430px, 34vw, 560px)); grid-template-columns: 256px minmax(0, 1fr) var(--jcai-ai-chat-width); gap: 10px; padding: 10px 12px; }
|
||||
.proto-root .workspace { --jc-ws-pr: 12px; --jcai-ai-chat-width: var(--jc-chat-w, clamp(430px, 34vw, 560px)); grid-template-columns: 256px minmax(var(--jc-work-min), 1fr) minmax(0, var(--jcai-ai-chat-width)); gap: 10px; padding: 10px 12px; }
|
||||
}
|
||||
|
||||
/* 对话区/视图区可调比例：workspace 直属分隔柄，锚在「视图区↔对话区」的 12px gutter 上
|
||||
（不能放进 .session-chat——其 overflow:hidden 会裁掉负偏移的柄）；拖拽调宽、双击复位 */
|
||||
/* 柄贴对话区左缘（跨边 -1/+5px），gutter 左半留给视图区自绘 thumb，两者不抢点击 */
|
||||
.proto-root .jc-vsplit { position: absolute; top: 12px; bottom: 12px; width: 6px; right: calc(var(--jcai-ai-chat-width, 440px) + var(--jc-ws-pr, 14px) - 5px); z-index: 7; cursor: col-resize; display: grid; place-items: center; touch-action: none; }
|
||||
/*
|
||||
* 柄锚在**对话区那一列的真实左缘**,不按 `--jcai-ai-chat-width` 算。
|
||||
*
|
||||
* 原来是 `position:absolute; right: calc(var(--jcai-ai-chat-width) + …)` ——
|
||||
* 那要求对话区的实际宽度恰好等于变量值。自从对话区改成 `minmax(0, var(…))`
|
||||
* (为了给工作区让出地板),它可以比变量窄,柄就按老位置停在原地、飘进工作区。
|
||||
*
|
||||
* 改用栅格定位:`grid-column: -2 / -1` 指的是**最后一列**,列数变了也跟得上
|
||||
* (清单收起后只剩两列,-2 仍然是对话区那列)。柄与对话区重叠放在同一格,
|
||||
* `justify-self: start` + 负外边距让它跨在缝上 —— 缝在哪它就在哪。
|
||||
*/
|
||||
/* 对话区与柄**钉在同一格**:柄显式占了最后一列,对话区若还走自动排位会被顶到第二行 */
|
||||
.proto-root .workspace > .session-chat {
|
||||
grid-column: -2 / -1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.proto-root .jc-vsplit {
|
||||
position: relative;
|
||||
grid-column: -2 / -1;
|
||||
grid-row: 1;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
margin: 12px 0 12px -5px;
|
||||
width: 6px;
|
||||
z-index: 7;
|
||||
cursor: col-resize;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
touch-action: none;
|
||||
}
|
||||
.proto-root .jc-vsplit::before { content: ""; width: 3px; height: 44px; border-radius: 999px; background: var(--ink-4); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), height var(--t-fast); }
|
||||
.proto-root .jc-vsplit:hover::before { opacity: .55; }
|
||||
.proto-root .jc-vsplit.dragging::before { opacity: 1; height: 64px; background: var(--brand); }
|
||||
@@ -2765,3 +2795,130 @@
|
||||
.proto-root .jc-stars.ro .jc-star:hover { transform: none; }
|
||||
.proto-root .jc-stars-txt { margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
|
||||
.proto-root .jc-rate-note { flex-basis: 100%; font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
|
||||
|
||||
/*
|
||||
* 视图区容器 —— 活动推送 HTML 的沙箱画框(AM 07)。
|
||||
* 这是**平台本体**的件:活动只给内容,尺寸与边框归系统。
|
||||
* iframe 无脚本执行权(sandbox=""),因此内容自带样式、不继承工作台 CSS。
|
||||
*/
|
||||
.proto-root .jc-view-frame {
|
||||
display: block;
|
||||
width: 100%;
|
||||
/* 高度由 ViewContainer 按内容量出后写在 style 上 —— 这里不设 height/min-height:
|
||||
定高会把长报告截断,人得在内外两层滚动条之间来回找 */
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ═══ 本仓补充(非原型) ═══════════════════════════════════════════════
|
||||
* 页签条容纳第五个页签「沟通记录」。
|
||||
*
|
||||
* 原型的 `.jc-tnav` 是按**四个**页签配的。加到五个后:
|
||||
* 五个四字页签 380px + 翻页囊 112px + 间距 30px = 522px,而工作区只有 429px。
|
||||
* 差 94px —— 这不是调调 padding 能抹平的,是真的装不下。
|
||||
*
|
||||
* 在定下最终形态之前,先保证**不出卡片**:整条可横滚。
|
||||
* 相比原来「翻页囊被裁到卡片外」,这至少是所有东西都在、都够得着。
|
||||
* 备选形态(待定):缩短页签文字 / 翻页囊只留箭头 / 换行两排 —— 各有取舍,见 debt。
|
||||
*/
|
||||
.proto-root .jc-tnav {
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.proto-root .jc-tnav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 一律不压缩:压了就是截字,截了还不如让人横滚 */
|
||||
.proto-root .jc-tnav-tab,
|
||||
.proto-root .jc-tnav-pg,
|
||||
.proto-root .jc-tnav-btn {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* ═══ 本仓补充(非原型) ═══════════════════════════════════════════════
|
||||
* 工作区最小宽度 —— 保证页签条一排放得下。
|
||||
*
|
||||
* 页签加到五个后,页签条含图标的自然内容宽 649px,加上工作卡左右内边距 38px,
|
||||
* 工作区至少要 **687px**。
|
||||
*
|
||||
* 注意别取 570:原型在容器 ≤520px 时会把页签图标藏起来省宽,
|
||||
* 570 恰好落在「图标已经显示、却又放不下」的夹缝里 —— 要么低于 520 让它藏,
|
||||
* 要么给够 687 让它显。这里选后者:图标该在就在,让对话区让位。
|
||||
*
|
||||
* 原来中栏是 `minmax(0, 1fr)`、对话区是定宽轨:空间一紧,**塌的是中栏**,
|
||||
* 页签条就被挤到卡片外裁掉。现在反过来:
|
||||
* · 中栏 `minmax(var(--jc-work-min), 1fr)` —— 有地板,不许再塌
|
||||
* · 对话区 `minmax(0, ...)` —— 由它先让,让到多少算多少
|
||||
* 页签、翻页囊的尺寸一律不动,让的是对话区的空间。
|
||||
*
|
||||
* 690 = 687 上取整留 3px。三种 MacBook Air 都装得下:
|
||||
* 1440(Air 13" M1) → 对话区还剩 384px
|
||||
* 1470(Air 13" M2/M3) → 剩 414px
|
||||
* 1710(Air 15") → 剩 654px
|
||||
* 均高于对话区自身下限 340px。
|
||||
*/
|
||||
.proto-root .workspace {
|
||||
--jc-work-min: 690px;
|
||||
}
|
||||
|
||||
/* 收起清单 / 收起对话时中栏本就宽,地板不必再管 —— 免得收起态反被地板顶出横向溢出 */
|
||||
.proto-root .workspace.jc-side-collapsed,
|
||||
.proto-root .workspace.jc-chat-collapsed {
|
||||
--jc-work-min: 0px;
|
||||
}
|
||||
|
||||
/* 列表区空态 —— 紧凑版:软色圆 + 主副文,与主面板的整屏光环同一语气 */
|
||||
.proto-root .jc-side-empty {
|
||||
margin: 16px 10px;
|
||||
padding: 26px 16px 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
text-align: center;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #fbfcfe, #f6f8fb);
|
||||
}
|
||||
|
||||
.proto-root .jc-side-empty-ico {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-bottom: 3px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(120% 120% at 30% 20%, #eef3ff, #e3ebff);
|
||||
color: var(--brand);
|
||||
box-shadow: inset 0 0 0 1px rgb(51 112 255 / 14%);
|
||||
}
|
||||
|
||||
.proto-root .jc-side-empty > b {
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.proto-root .jc-side-empty > p {
|
||||
margin: 0;
|
||||
max-width: 210px;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.65;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
/*
|
||||
* 页签图标与文字的光学对齐。
|
||||
* 几何上图标正居中,但文字的**字面**(汉字 ink box)整体偏上约 2px ——
|
||||
* Inter 的汉字回退字形上伸高、下沉浅,行盒居中后底边比图标高。
|
||||
* 逐 0.5px 实测扫描:-2px 时两者字面中心差 0.02px(字面高度相近,居中即底齐)。
|
||||
*/
|
||||
.proto-root .jc-tnav-tab svg,
|
||||
.proto-root .jc-tnav-btn.back svg {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user