视口防溢出气泡浮窗定位算法与高触感胶囊滑块实现 (Viewport-Safe Popover Positioning and Tactile Pill Slider Implementation)

在现代响应式 Web 应用、桌面端多列侧栏布局或平板移动端触控场景中，悬浮气泡框（Popover / Tooltip）和离散档位调节器（Discrete Stepper / Pill Slider）是高频出现的交互组件。然而，原生布局或未加边界防护的绝对定位浮窗极易在窄屏、侧栏缩放、虚拟键盘弹起或视口边缘时被父级容器（如包含 overflow: hidden）裁剪，甚至撑出视口导致水平滚动条；同时

Obsidian

细雨初晴

移动端抽屉遮罩与网格布局层叠冲突 (Mobile Drawer Backdrop Overlay and CSS Grid Stacking Pitfall)

1. 现象与症状 (Symptoms)在桌面端三栏网格布局（CSS Grid: 左侧栏 Rail、中央工作区 Stage、右侧栏 Rail）改造移动端响应式（小于 1024px 视口，如 375px ~ 420px 手机端）过程中：需求是将左右侧栏改为移动端浮层抽屉 (Drawer / Sheet)，展开时显示半透明遮罩 (Backdrop)，点击遮罩空白区域自动收回抽屉；在 HTML 结构中直接

Obsidian

细雨初晴

基于指针事件的文件树原位捏持滑动重排与开火车队列顺移动效 (In-Place Slide Reordering with Train Queue Shift)

1. 核心交互演进与设计定位 (Interaction Evolution & Design Positioning)在树状/列表卡片调序设计中，常规的 "Drag & Put"（拿起来形成脱离列表的幽灵卡片，并在目标位置插入外挂占位槽）往往存在以下体验问题：割裂感强：拖拽对象脱离了原本的视觉流，变成漂浮半透明盒子，用户丢失了“在同一堆卡片中翻移”的物理手感；动效过重：额外插入独立的占位槽（如虚线

Obsidian

细雨初晴

浏览器内智能体插件系统 (InPage Agent Plugin System)

1. 核心设计背景与架构目标 (Architecture Motivation & Goals)在纯前端运行的轻量智能体（InPage Agent）中，传统网页插件或扩展系统常采用刷新页面（Reloading）或重载沙箱的方式生效与卸载。这种做法不仅会打断用户正在进行的对话流与编辑器状态，且在移动端和单页应用中体验极为生硬。核心架构目标：零刷新热启停 (Non-Refreshing Hot-Plu

Obsidian

细雨初晴

CC-Switch 供应商体系与多协议兼容架构 (CC-Switch Provider Architecture & Multi-Protocol Compatibility)

1. 核心背景与架构动因 (Background and Motivation)在大模型编码智能体（如 Claude Code、InPage Agent、Codex CLI 等）的落地场景中，开发者往往面临跨多云、多供应商切换的复杂现实。各大供应商在 API 协议上呈现明显割裂，主流分为三大协议族：Anthropic 原生 Messages API 协议 (anthropic)：以 /v1/mes