JOJO
b593d63856
- 对话侧边栏：行高/字号/圆角紧凑化，fixed 覆盖式改为文档流挤压式展开，移除工作区/虚拟显示器按钮 - 新增 WorkspaceSwitcher 浮层组件：列表即切换器，内联重命名/删除确认/新建表单动画，「…」菜单 fixed 逃逸裁切，刚好 7 行内部滚动 - 移除 LeftPanel 及两个旧工作区对话框：管理工作区迁入侧边栏，文件管理迁入输入栏 + 菜单（最多 4 项滚动） - 个人空间移除默认隐藏工作区/隐藏快捷窗口设置项；删除 panelMode 门控轮询（QuickDock 常驻轮询 + socket 推送替代） - 修复 flex 压缩导致菜单行高失效、分组对话 viewport 裁切最后一行、action-wrap 撑高对话项、/new 残留最近对话待办（无对话 id 不再请求 todo-list） - 工作区入口按钮改内联 layers 图标并统一 18px，host/docker 模式 localStorage 缓存避免按钮首屏延迟出现
158 lines
8.4 KiB
HTML
158 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="classic">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>工作区菜单重设计 Demo</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<!-- ========== Demo 外框（仅 demo 用，非产品部分） ========== -->
|
||
<header class="demo-chrome">
|
||
<div class="demo-chrome-title">
|
||
<strong>管理工作区菜单 · 重设计 Demo</strong>
|
||
<span>对话侧边栏内嵌的工作区切换 + 管理浮层</span>
|
||
</div>
|
||
<div class="demo-chrome-controls">
|
||
<div class="demo-theme-switch" role="group" aria-label="运行模式切换">
|
||
<button type="button" data-mode-btn="host" class="active">宿主机</button>
|
||
<button type="button" data-mode-btn="docker">Docker</button>
|
||
</div>
|
||
<div class="demo-theme-switch" role="group" aria-label="主题切换">
|
||
<button type="button" data-theme-btn="classic" class="active">经典</button>
|
||
<button type="button" data-theme-btn="light">浅色</button>
|
||
<button type="button" data-theme-btn="dark">深色</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="demo-stage">
|
||
<!-- ========== 产品画布：侧边栏 + 浮层 ========== -->
|
||
<section class="stage-canvas" id="canvas">
|
||
<aside class="sidebar-mock">
|
||
<nav class="side-nav">
|
||
<button type="button" class="side-nav-row">
|
||
<span class="side-icon">
|
||
<svg viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M5 6.5c0-1.38 1.12-2.5 2.5-2.5h13c1.38 0 2.5 1.12 2.5 2.5v8.5c0 1.38-1.12 2.5-2.5 2.5h-5.6l-3.4 3.2.6-3.2H7.5c-1.38 0-2.5-1.12-2.5-2.5V6.5z" />
|
||
<path d="M9 9.5h10" /><path d="M9 13h6" />
|
||
</svg>
|
||
</span>
|
||
<span class="side-label">对话记录</span>
|
||
</button>
|
||
<button type="button" class="side-nav-row">
|
||
<span class="side-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
|
||
<path d="m15 5 4 4" />
|
||
</svg>
|
||
</span>
|
||
<span class="side-label">新建对话</span>
|
||
</button>
|
||
<!-- 新入口：工作区（替代原「工作区 / 虚拟显示器」两个按钮） -->
|
||
<button type="button" class="side-nav-row workspace-entry active" id="workspaceEntry" aria-expanded="true">
|
||
<span class="side-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" />
|
||
<path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" />
|
||
<path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" />
|
||
</svg>
|
||
</span>
|
||
<span class="side-label" id="entryLabel">工作区</span>
|
||
<span class="side-current" id="entryCurrentName">默认工作区</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="side-search">
|
||
<span class="side-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
|
||
</svg>
|
||
</span>
|
||
<input type="text" placeholder="搜索对话" />
|
||
</div>
|
||
|
||
<div class="side-list">
|
||
<div class="conv-row active"><span class="conv-title">前端侧边栏紧凑化改造</span><span class="conv-dot"></span></div>
|
||
<div class="conv-row"><span class="conv-title">工作区菜单交互稿评审</span></div>
|
||
<div class="conv-row"><span class="conv-title">API 轮询延迟排查记录</span></div>
|
||
<div class="conv-row"><span class="conv-title">Android 客户端发版 checklist</span></div>
|
||
<div class="conv-row"><span class="conv-title">子智能体通知池设计</span></div>
|
||
<div class="conv-row"><span class="conv-title">主题 token 收敛方案</span></div>
|
||
<div class="conv-row"><span class="conv-title">部署脚本 venv 修复</span></div>
|
||
</div>
|
||
|
||
<div class="side-footer">
|
||
<button type="button" class="side-nav-row">
|
||
<span class="side-icon">
|
||
<svg viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-7 9a7 7 0 1 1 14 0H3z" />
|
||
</svg>
|
||
</span>
|
||
<span class="side-label">个人空间</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ========== 工作区浮层（本次重设计主体） ========== -->
|
||
<div class="ws-popover" id="wsPopover" role="dialog" aria-label="工作区">
|
||
<div class="ws-header">
|
||
<span class="ws-header-title" id="headerTitle">工作区</span>
|
||
<span class="ws-header-count" id="wsCount"></span>
|
||
</div>
|
||
|
||
<div class="ws-list" id="wsList"><!-- 行由 JS 渲染 --></div>
|
||
|
||
<!-- 底部区域：新建按钮 ⇄ 新建表单，容器高度动画切换 -->
|
||
<div class="ws-bottom" id="wsBottom">
|
||
<div class="ws-footer" id="wsFooter">
|
||
<button type="button" class="ws-create-btn" id="createBtn">
|
||
<span class="ws-create-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M5 12h14" /><path d="M12 5v14" />
|
||
</svg>
|
||
</span>
|
||
<span id="createBtnText">新建工作区</span>
|
||
</button>
|
||
</div>
|
||
|
||
<form class="ws-create-form" id="createForm" hidden>
|
||
<input type="text" id="createName" placeholder="工作区名称（可选）" autocomplete="off" />
|
||
<input type="text" id="createPath" placeholder="路径：绝对路径或相对仓库路径" autocomplete="off" />
|
||
<div class="ws-create-actions">
|
||
<button type="button" class="ws-btn ghost" id="createCancel">取消</button>
|
||
<button type="submit" class="ws-btn primary">创建</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- demo 操作反馈条 -->
|
||
<div class="stage-status" id="stageStatus">点击工作区行可切换；hover 行尾出现「…」菜单</div>
|
||
</section>
|
||
|
||
<!-- ========== 设计说明 ========== -->
|
||
<aside class="stage-notes">
|
||
<h2>设计决策</h2>
|
||
<ul>
|
||
<li><b>入口合并</b>：侧边栏新增「工作区」入口（行尾常显当前工作区名），替代原「工作区 / 虚拟显示器」按钮与左侧面板里的管理入口。</li>
|
||
<li><b>列表即切换器</b>：工作区行是可选项，单击整行切换；当前行用中性底色标识。</li>
|
||
<li><b>管理动作收拢</b>：设为默认 / 重命名 / 在文件夹中打开 / 删除收进每行 hover 的「…」菜单；菜单用 fixed 浮层定位（同个人空间二级菜单），不被浮层裁切。</li>
|
||
<li><b>在文件夹中打开</b>：复用输入栏 git 状态区的现成能力，仅宿主机模式可用，Docker 模式下禁用。</li>
|
||
<li><b>全内联操作</b>：新建 / 重命名 / 删除确认都在浮层内联完成；新建区域带高度展开动画。</li>
|
||
<li><b>反套娃</b>：单层扁平容器 + 细发丝分隔线；行内不再出现任何边框卡片。</li>
|
||
<li><b>对齐</b>：行结构统一；名称 13px / 路径 12px 单行截断；图标与首行文字视觉对齐。</li>
|
||
<li><b>token 化</b>：颜色全部走三主题语义 token，hover / 选中用中性灰，accent 仅用于「创建」CTA。</li>
|
||
</ul>
|
||
<h2>模式差异</h2>
|
||
<ul class="notes-compare">
|
||
<li>宿主机模式：显示路径行，菜单含「在文件夹中打开」。</li>
|
||
<li>Docker 模式：叫「项目」，不显示路径，「在文件夹中打开」禁用，新建只需名称。</li>
|
||
</ul>
|
||
</aside>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|