Obsidian

细雨初晴

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

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

Obsidian

细雨初晴

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

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

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

细雨初晴

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

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

Obsidian

细雨初晴

基于无头浏览器与沙箱拦截的代码重构闭环 (Closed-Loop Code Refactoring via Headless Browser Verification and Sandbox Interception)

在利用大语言模型（Large Language Models, LLMs）和编码代理（Coding Agents）进行批量前端与交互式页面重构时，最常见的问题是模型的幻觉通过（Hallucinated Completion）——即模型修改完几行 CSS 后即声称“已完美适配手机端并解决所有冲突”，而实际在真实浏览器渲染时仍然存在横向滚动条、元素打架或 JavaScript 控制台报错。为了彻底解决