/* screens-desktop-shared.jsx — 共享 AppShell 组件，对齐 officev3 真实侧边栏所有桌面端设计稿屏幕共用此 AppShell */ /* global React */ /* ───────────────────────────────────────────── 真实 SVG 图标（路径来自 officev3/public/svgs/） ───────────────────────────────────────────── */ function IcAsset({ size = 16, c = 'currentColor' }) { return ( ); } function IcHome({ size = 16, c = 'currentColor' }) { return ( ); } function IcPlan({ size = 16, c = 'currentColor' }) { return ( ); } function IcAnalysis({ size = 16, c = 'currentColor' }) { return ( ); } function IcDocs({ size = 16, c = 'currentColor' }) { /* DocsIcon 路径坐标系有 y-2 偏移（来自 Figma 导出），用 wrapper translate 修正 */ return ( ); } function IcChat({ size = 16, c = 'currentColor' }) { return ( ); } function IcMemory({ size = 16, c = 'currentColor' }) { return ( ); } function IcScan({ size = 16, c = 'currentColor' }) { return ( ); } function IcSettings({ size = 16, c = 'currentColor' }) { return ( ); } function IcSearch({ size = 14, c = '#9D9D9D' }) { return ( ); } function IcPanel({ size = 16, c = '#333329' }) { return ( ); } function IcChevronRight({ size = 14, c = '#9D9D9D', rotate = 0 }) { return ( ); } function IcUserAvatar({ size = 36 }) { /* 浣熊吉祥物头像（紫色圆底 + 黑色浣熊剪影） */ return ( ); } /* ───────────────────────────────────────────── 历史会话占位数据 ───────────────────────────────────────────── */ const HISTORY_ITEMS = [ '分析第三季度用户留存数据', '帮我优化这份产品方案', '总结今天的会议纪要', ]; /* ───────────────────────────────────────────── AppShell — 完整 App 外壳（对齐 officev3 真实侧边栏） Props: activeNav: 'home'|'plan'|'analysis'|'docs'|'kb'|'datasource'|'memory'|'history'|'settings' overlayMenu: React node（弹出菜单，绝对定位） children: 主内容区 ───────────────────────────────────────────── */ function AppShell({ activeNav = 'analysis', overlayMenu, children, isPro = false }) { const P = '#8E6BF2'; const ACTIVE_BORDER = 'rgba(142,107,242,0.6)'; const GRAD = 'linear-gradient(90deg, rgba(142,107,242,0.1) 0%, rgba(171,231,213,0.1) 100%)'; /* 菜单项配置（对齐 officev3 AppSidebar：新建任务展开 + 知识库；底部设置/官方社群/客户端下载） */ const topItems = [ { key: 'kb', label: '知识库', Icon: IcAsset }, ]; const childItems = [ { key: 'home', label: '主页', Icon: IcHome }, { key: 'plan', label: '任务规划', Icon: IcPlan }, { key: 'analysis', label: '数据分析', Icon: IcAnalysis }, { key: 'docs', label: '我的文档', Icon: IcDocs }, ]; const isChildActive = childItems.some(i => i.key === activeNav); /* 导航项内联样式 */ function navStyle(active) { return { display: 'flex', alignItems: 'center', padding: '8px 16px', borderRadius: 12, border: `1px solid ${active ? ACTIVE_BORDER : 'transparent'}`, background: active ? GRAD : 'transparent', cursor: 'pointer', userSelect: 'none', }; } function navChildStyle(active) { return { display: 'flex', alignItems: 'center', padding: '6px 16px', borderRadius: 12, border: `1px solid ${active ? ACTIVE_BORDER : 'transparent'}`, background: active ? GRAD : 'transparent', cursor: 'pointer', userSelect: 'none', }; } const iconBox = { width: 24, flexShrink: 0, display: 'flex', alignItems: 'center' }; const labelStyle = { flex: 1, fontSize: 14, color: '#0d0d0d', letterSpacing: '0.35px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }; const subLabelStyle = { ...labelStyle, fontSize: 13 }; const sep = { width: '100%', height: 1, background: '#E6E6E6', margin: '12px 0', flexShrink: 0, }; return (

{/* ── 左侧边栏 280px ── */}

{/* 内容区 px-4 */}

{/* ── Header: Logo + 搜索 ── */}

{/* Logo 行（真实 office-new-logo.svg 内联） */}

{/* 搜索框（border 样式，对应 officev3 真实代码） */}

搜索

⌘K

{/* ── 滚动中间区 ── */}

{/* 主菜单 */}

{/* 主页 / 任务规划 / 数据分析 / 我的文档（平铺，无父级） */} {childItems.map(({ key, label, Icon }) => { const active = key === activeNav; return (

{label}

); })} {/* 知识库 */} {topItems.map(({ key, label, Icon }) => { const active = key === activeNav; return (

{label}

); })}

{/* 分割线 */}

{/* 历史会话 */}

历史会话

{/* 历史条目 */}

{HISTORY_ITEMS.map((title, i) => (

{title}

))}

{/* ── 底部固定区 ── */}

{/* 底部菜单项 */}

设置

官方社群

客户端下载

{/* 分割线 */}

{/* UserCard */}

RaccoonBoat {isPro ? '升级版' : '免费版'}

可用积分 {isPro ? '1820' : '120'}

{/* end px-4 wrapper */}

{/* end sidebar */} {/* ── 主内容区 ── */}

{children}

{/* ── 浮层（弹出菜单等，定位在 UserCard 上方） ── */} {overlayMenu && (

{overlayMenu}

)}

); }