SideBar 设计文档

AI 侧边信息栏套件（重量级组合，分阶段交付）：P0 SideBarContainer 为可伸缩浮层壳——贴视口右侧（RTL 贴左），role=dialog + aria-labelledby(title)，打开移焦 + focus-trap 焦点捕获/归还 + Esc 关闭，堆叠 z-index 与 Modal/SideSheet 统一层栈（后开者在上），resizable 时左边缘（RTL 右边缘）把手拖拽调宽——复用 core createResizeDrag（axis:x 单轴 + clamp minWidth/maxWidth）与 Resizable 同套把手 a11y（role=separator + aria-orientation=vertical + aria-valuenow + 键盘 ←→/Home/End），motion 展开/收起为 CSS transition（reduced-motion / motion=false 退化即时显隐）。P1 SideBar 主壳按 mode 路由：main 渲染顶部 Options 图标 tab 组（每项是本库 Button，图标 + name 可见文字，之上叠加 role=tablist + roving tabindex + 键盘）+ renderMainContent(activeKey)；detail（code/file/自定义）渲染 renderDetailHeader + 返回按钮（onBackWard 可异步，await 期间禁用防重触发）+ renderDetailContent(mode)。受控 visible / activeKey（不回写，仅回调通知）。P2 SideBarAnnotation 参考来源/引用溯源：外层复用 SideBarContainer 浮层壳（透传全部 Container props，title 默认走 i18n annotationTitle），内部渲染 SideBarAnnotationContent（对齐 Semi Annotation.AnnotationContent 静态属性，可脱离 Container 独立使用，例如嵌入 renderMainContent）——用 Collapse 渲染 info 分组（每组一折叠面板 + aria-expanded，clickHeaderToExpand=false），展开区渲染 video（封面/时长/具名 IconPlay 播放按钮贴右上角/时长徽标）/text（站点 logo/名称/引用序号）卡片；可点击卡片（url 或 onClick）用原生 button（键盘 Enter/Space + focus 环 + 时长/序号本地化可访问文本），renderItem 可整条覆盖。P4 SideBarCodeContent 代码/JSON 预览：Collapse 折叠列表（clickHeaderToExpand=false），每项按 isJson 分流 JsonViewer / CodeHighlight（透传 jsonViewerProps/codeHighlightProps），头部具名图标 + Button(theme=borderless type=tertiary) 展开（全屏）按钮，onExpand 回调。P3 SideBarMCPConfigure MCP 工具配置面板：外层复用 SideBarContainer（title 默认走 i18n mcpTitle），内部顶部已启用计数 + RadioGroup(type=button) 在内置/自定义两模式间切换（对齐 Semi，同一时刻只渲染一份列表）+ 搜索框（Input，前缀放大镜 + aria-label，headless filterMcpOptions 支持自定义 filter）；每项前置图标（string→img / Snippet）+ label + desc + 动作按钮（内置 Button+IconSetting 显示配置 / 自定义 Button+IconEdit 显示编辑，aria-label 含工具名）+ 启用开关（Button(theme=active?light:solid type=primary) + IconMinus/IconPlus，对齐 Semi renderStatusButton，非开关组件；disabled 预设项锁定 + Tooltip 提示），启用变化经 core toggleMcpOptionActive 产出「下一份数组 + custom 标记」上抛 onStatusChange 不回写；自定义组空态用 Empty + IllustrationNoContent(Dark) 插画 + 添加按钮，无搜索结果显示提示。P5 SideBarFileContent 富文本查看/编辑：Collapse 折叠列表（clickHeaderToExpand=false），每项 SideBarFileItem 一个 tiptap v3 编辑器（editable 控查看/编辑，编辑态渲染格式工具栏），默认扩展集对齐 Semi（StarterKit link openOnClick:false + TextStyleKit + Image + TextAlign + 自研 SelectionMark + 自研 ImageUploadNode，末尾拼接 extensions），onContentChange 回调 editor.getHTML()；ImageUploadNode 用 svelte-tiptap NodeViewRenderer 内嵌本库 Upload（draggable + getUploadImageSrc，默认 listType 不显式传，随 Upload 默认值）；tiptap 内核 + 3 官方扩展（text-style/image/text-align）+ svelte-tiptap 全程动态 import 不进主 bundle。