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:
2026-06-08 17:30:21 +08:00
parent 8252f56722
commit 4dfcb6fc8a
4 changed files with 1755 additions and 16 deletions
+7 -1
View File
@@ -368,6 +368,7 @@ function App() {
})));
const [ecommerceEverMounted, setEcommerceEverMounted] = useState(false);
const [workbenchResetToken, setWorkbenchResetToken] = useState(0);
const isEcommerceActive = activeView === "ecommerce" || activeView === "ecommerceHub";
useEffect(() => {
if (isEcommerceActive && !ecommerceEverMounted) setEcommerceEverMounted(true);
@@ -453,6 +454,9 @@ function App() {
);
const handleSetView = useCallback((view: WebViewKey) => {
if (view === "workbench" && Boolean(session)) {
setWorkbenchResetToken((token) => token + 1);
}
window.location.hash = `/${view}`;
setView(view);
if (view !== "login") {
@@ -461,7 +465,7 @@ function App() {
if (isWorkspaceView(view)) {
setWorkspaceExpanded(true);
}
}, [setView, setWorkspaceExpanded]);
}, [session, setView, setWorkspaceExpanded]);
const clearAuthenticatedState = useCallback((options?: { resetView?: boolean }) => {
clearAllUserStorage();
@@ -1301,11 +1305,13 @@ function App() {
case "workbench":
return (
<WorkbenchPage
key={`workbench-${workbenchResetToken}`}
isAuthenticated={Boolean(session)}
session={session}
onRequireLogin={handleRequireTaskLogin}
onOpenResultInCanvas={handleOpenResultInCanvas}
onRefreshUsage={refreshUsage}
resetToken={workbenchResetToken}
/>
);
case "home":