feat: Workbench SaaS视觉升级与视图重置机制
本次提交包含以下改进: ## 1. Workbench视图重置机制 (App.tsx + WorkbenchPage.tsx) - 在App.tsx中新增workbenchResetToken状态,每次导航到workbench页面且存在session时递增token - WorkbenchPage新增resetToken属性,检测token变化后自动调用handleNewConversation()重置工作台状态 - 重置时清空消息列表和活跃会话ID,确保每次进入工作台都是全新状态 ## 2. 滚动操作提示系统 (WorkbenchPage.tsx) - 新增scrollActionHint状态和hideScrollActionHint/showScrollActionHint方法 - 用户滚动离开消息区域时自动显示滚动方向提示(顶部/底部按钮) - 1.4秒后自动隐藏提示,优化交互体验 - 手动点击滚动按钮后立即隐藏提示 - 为滚动按钮添加--top/--bottom标识类名,支持独立定位 ## 3. Prompt案例弹窗自适应布局 (WorkbenchPage.tsx) - renderPromptCaseOverlay重构为动态计算moda l类名 - 根据图片实测宽高比(is-tall-media/is-portrait-media)和文案长度(is-long-copy)动态调整布局 - 添加handlePromptCaseImageLoad回调在图片加载后测量尺寸 ## 4. Workbench SaaS视觉美化 (workbench.css) - 全新SaaS风格设计变量(--wb-panel, --wb-line, --wb-shadow等) - 首页区域:标题样式、Composer输入框圆角/阴影/聚焦态、发送按钮渐变样式 - 模式选择/芯片组件:下拉菜单、悬停态优化、选中态高亮 - 聊天消息区:气泡圆角、头像样式、消息间距、空状态引导 - 图片/视频结果卡片:边框、阴影、标签徽章、视频PLAY标识 - 生成中卡片:停止按钮样式 - 会话侧边栏:折叠态浮动按钮定位、展开态面板样式、选中项左侧指示条 - 滚动快捷键:固定定位圆形按钮、显示/隐藏过渡动画 - Prompt案例弹窗:桌面端毛玻璃双栏布局、移动端底部面板布局 - @media适配:560px/720px/900px/980px四个断点全覆盖 ## 5. 全局移动端布局变量 (dark-green.css) - 新增--dg-mobile-nav-height/gap/space CSS变量,统一移动端底部导航高度计算 - 优化Topbar z-index层级 - 非特殊页面自动添加顶部padding避让移动导航 - Profile弹窗fixed定位及安全区域适配
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -10837,8 +10837,44 @@
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.web-shell[data-ui-theme="dark-green"] {
|
||||
--dg-mobile-nav-height: 58px;
|
||||
--dg-mobile-nav-gap: 12px;
|
||||
--dg-mobile-nav-space: calc(var(--dg-mobile-nav-height) + var(--dg-mobile-nav-gap));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .web-topbar {
|
||||
z-index: 72;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .web-shell__content,
|
||||
.web-shell[data-ui-theme="dark-green"] .web-shell__page {
|
||||
min-height: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .web-shell__page {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"]:not([data-view="home"]):not([data-view="login"]):not([data-view="workbench"]):not([data-view="agent"]):not([data-view="avatarConsole"]) .web-shell__page {
|
||||
padding-top: var(--dg-mobile-nav-space);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-popover {
|
||||
position: fixed;
|
||||
top: calc(56px + var(--dg-mobile-nav-space) + env(safe-area-inset-top, 0px));
|
||||
right: 12px;
|
||||
z-index: 120;
|
||||
width: min(288px, calc(100vw - 24px));
|
||||
max-height: calc(100svh - 56px - var(--dg-mobile-nav-space) - 24px);
|
||||
overflow-y: auto;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .floating-nav {
|
||||
top: calc(56px + env(safe-area-inset-top, 0px));
|
||||
z-index: 50;
|
||||
right: 12px;
|
||||
bottom: auto;
|
||||
left: 12px;
|
||||
|
||||
Reference in New Issue
Block a user