feat: update docs and components, fix DLQ demo bug

docs/zh-cn/appendix/browser-devtools/index.md

@@ -9,6 +9,7 @@
 **DevTools** 是现代浏览器（Chrome, Edge, Firefox, Safari 等）内置的一套 Web 开发和调试工具。对于开发者来说，它比代码编辑器更接近“真相”，因为**它展示的是代码在浏览器中实际运行的样子**。
 
 **如何打开 DevTools？**
+
 - **快捷键**：`F12` 或 `Ctrl + Shift + I` (Mac: `Cmd + Option + I`)
 - **鼠标**：在网页任意元素上**右键点击**，选择 **“检查 (Inspect)”**。
 - **菜单**：浏览器右上角菜单 -> 更多工具 -> 开发者工具。
@@ -29,6 +30,7 @@
 DevTools 最强大的功能之一就是**实时修改**。下方的演示包含了一个“虚拟网页”（上方）和一个“DevTools”（下方）。
 
 **请尝试：**
+
 1.  在下方的 Elements 面板中，点击 DOM 树中的 `h1` 或 `button` 元素。
 2.  在右侧的 Styles 面板中，修改 `element.style` 中的属性值（例如将 `color` 改为 `red`）。
 3.  观察上方的虚拟网页如何**实时发生变化**。
@@ -50,17 +52,20 @@ DevTools 最强大的功能之一就是**实时修改**。下方的演示包含
 你可能会发现，当你刷新页面后，所有的修改都消失了，网页又变回了原来的样子。
 
 这是因为 DevTools 的修改仅仅发生在**你的浏览器本地内存**中。
+
 - 当你访问网页时，浏览器从**远程服务器**下载了 HTML 代码并在本地渲染出来。
 - 你修改的只是**本地的副本**，并没有权限去修改服务器上的**源代码**。
 - 所以每次刷新，浏览器都会重新去服务器拉取最新的（未被修改的）代码，一切就复原了。
-:::
+  :::
 
 ---
 
 ## 3. 核心面板详解
 
 ### 3.1 Elements (元素面板)
+
 **作用**：查看和实时编辑页面的 HTML 和 CSS。
+
 - **左侧 (DOM 树)**：显示网页的 HTML 结构。你可以双击标签或文本进行修改，甚至拖拽节点改变位置。
 - **右侧 (Styles)**：显示选中元素的 CSS 样式。你可以勾选/取消样式查看变化，或者直接修改数值（如颜色、边距）。
 - **应用场景**：
@@ -68,7 +73,9 @@ DevTools 最强大的功能之一就是**实时修改**。下方的演示包含
   - "我想试试这个标题变成红色好看吗？" -> 直接在 Styles 里修改 `color: red`。
 
 ### 3.2 Console (控制台面板)
+
 **作用**：查看日志信息，运行 JavaScript 代码。
+
 - **日志输出**：网页运行时的 `console.log()` 信息、警告（黄色）和报错（红色）都会显示在这里。
 - **交互环境**：你可以在这里输入任意 JS 代码并立即执行。例如输入 `alert('Hello')` 会弹窗，输入 `document.body.style.background = 'red'` 会把背景变红。
 - **应用场景**：
@@ -76,7 +83,9 @@ DevTools 最强大的功能之一就是**实时修改**。下方的演示包含
   - "验证一个 JS 函数的返回值。" -> 直接在控制台运行测试。
 
 ### 3.3 Network (网络面板)
+
 **作用**：监控所有网络请求。
+
 - **列表视图**：显示加载的所有资源（HTML, CSS, JS, 图片, 接口请求）。
 - **交互详情**：点击任意请求行，右侧会滑出详情面板：
   - **Headers (标头)**：查看请求头、响应头（如 `Content-Type`）。
@@ -91,13 +100,17 @@ DevTools 最强大的功能之一就是**实时修改**。下方的演示包含
   - "页面加载为什么这么慢？" -> 找哪个图片或文件加载时间最长。
 
 ### 3.4 Sources (源代码面板)
+
 **作用**：查看源代码，调试 JavaScript。
+
 - **断点调试**：点击行号可以设置“断点 (Breakpoint)”。当代码执行到这一行时会**暂停**，让你有机会查看当前的变量值，并单步执行代码。
 - **应用场景**：
   - "代码逻辑哪里出错了？" -> 打断点，一步步看着代码跑，看变量值是否符合预期。
 
 ### 3.5 Application (应用面板)
+
 **作用**：查看和管理浏览器存储。
+
 - **Storage**：
   - **Local Storage**：持久化存储的数据。
   - **Session Storage**：会话级存储（关闭标签页消失）。