CSS Grid 是唯一兼顾语义、响应性与维护性的主区域划分方案；Kanban 列用 Flexbox 垂直堆叠更自然；ECharts 需检测容器尺寸再初始化；移动端拖拽须手动计算位置模拟。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接用 CSS Grid 划分主区域，别碰 float 和 absolute
HTML <table> 不适合做看板布局，<code>float 和 position: absolute 在大屏上极易错位——Safari 视口跳变会让 top/left 偏移，float 受行高、间隙、缩放影响，一调分辨率就堆叠或漏白。Grid 是目前唯一能兼顾语义、响应性和维护性的方案。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 根容器（如
或<div class="screen">）设 <code>display: grid，不是子元素 - 用
grid-template-rows: 64px 1fr 48px定义头/内容/脚，避免写死100px这类像素值 - 侧边栏固定宽（如
240px），主内容区用1fr自适应，保证比例稳定 - IE11 不支持？加
display: flex; flex-direction: columnfallback，别硬塞前缀 - 每列容器设
display: flex; flex-direction: column; gap: 8px; min-width: 320px - 任务卡设
flex: 0 0 auto，防止被拉伸变形 - 必须加
min-width: 0到卡片上，否则overflow: hidden对长文本无效 - 卡片内用
display: inline-flex对齐头像、标签、按钮，基线对齐比margin-top可靠 - 所有图表容器必须设显式宽高，例如
style="width: 100%; height: 400px;"，不能只靠width: 100%且父级无高 - 初始化前加检测：
if (el.offsetWidth > 0 && el.offsetHeight > 0) { echarts.init(el); } - 更稳妥的做法：用
ResizeObserver监听容器尺寸变化，首次非零时再 init - Vue/React 中确保挂载点（如
#app）也设了height: 100%，否则100vh会失效 - 禁用默认行为：
touchstart和mousedown都加event.preventDefault() - 用
getBoundingClientRect()实时算卡片位置，配合transform: translateY()更新视觉位移 - 松手时用
document.elementFromPoint(x, y)判断落点是否在目标列容器内 - 事件委托到
<tbody> 或外层容器，别直接绑在 <code><td> 上，避免 <code>colspan区域漏事件 真正卡住人的地方，往往不是“怎么画出来”，而是“怎么让不同分辨率、不同设备、不同数据状态下的尺寸和交互都稳住”。比如transform: scale()必须配transform-origin: 0 0，否则缩放后内容偏移；又比如overflow: hidden必须写在上，只写会失效。这些细节不试几次根本想不到。
Kanban 列用 Flexbox 垂直堆任务卡，不是 Grid
Kanban 看板本质是一行多列、每列内垂直堆叠卡片，display: flex; flex-direction: column 比 Grid 更自然、更易控制间距和截断。Grid 在单列内强行设 grid-template-rows 反而增加复杂度，且对长文本溢出处理不友好。
实操建议：
立即学习“前端免费学习笔记（深入）”；
ECharts 容器尺寸为 0 导致初始化失败？先等 DOM 尺寸稳定
Cannot initialize ECharts instance before container is ready 这个报错不是代码写错了，而是容器 DOM 已挂载但 offsetWidth 或 offsetHeight 仍为 0——常见于父级未设高、CSS 还没生效、或图表在 DOMContentLoaded 立刻初始化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
移动端拖拽看板列？原生 drag API 基本不可用
iOS 和 Android WebView 对 dragstart/dragover 支持极差，event.dataTransfer 在 touch 事件里为空，drop 无法触发。必须降级为手动位置计算 + transform: translateY() 模拟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
