右上角面板修改，蓝线新增多种主题

Poster/README.md

@@ -611,25 +611,191 @@ git push
 3. 在右侧属性面板的 **Fill（填充）** 里输入对应的十六进制代码，比如 `FFC8D6`。
 4. 旁边的透明度直接输入 `60%` 即可。
 
-### 12.3 核心视觉元素：光晕与毛玻璃的复刻
-
-**1. 氛围光晕（对应 CSS 的 `blur-`）**
-网页代码里背景的大光斑用的是类似于 `blur-[100px]`（100像素高斯模糊）。
-- **Figma 操作**：画一个巨大的椭圆（Ellipse）。
-- 设置好上面的颜色和透明度（比如蓝色 `BAE6FD`，透明度 `60%`）。
-- 点击右侧的 **Effects（效果）** ➜ 选择 **Layer Blur（图层模糊）**。
-- **注意**：由于画布放大了11倍，这里的模糊值也要乘以 11。将 Blur 的数值调到 `1000` 到 `1500` 之间，直到光斑边缘如网页般完全柔和。
-
-**2. 微磨砂玻璃卡片（对应 CSS 的 `backdrop-blur`）**
-网页中前方的半透明 UI 悬浮板用的是 `backdrop-blur-md` 结合 `bg-white/[0.04]`。
-- **Figma 操作**：画一个圆角矩形作为卡片底板。
-- 填充选白色 `#FFFFFF`，透明度调到极低，例如 `4%` 到 `10%`。
-- 点击 **Effects（效果）** ➜ 选择 **Background Blur（背景模糊）**。模糊值建议设为 `150` 到 `250`（按需微调，保证下方底图被模糊且前方文字仍清晰可读）。
-- 💎 **高光细节边缘**：为了让玻璃质感更强，网页里加了一层淡边框。在 Figma 里，给此矩形加一个 **Stroke（描边）**，宽度随意（比如 `4px`），颜色为白色，描边透明度 `15%` 左右，这样你的玻璃就像有厚度和高光一样。
-
-### 12.4 网格化背景 (Grid) 的复刻
-
-网页里的网格是用 CSS 的 `linear-gradient` 无限延展画出来的。在 Figma 里：
-- 不要尝试手动画几百条线填满 7016×9933 的画布，很卡也很麻烦。
-- **推荐方法 A（组件平铺法）**：先画一个 `352×352` 的正方形，只给它的“右边”和“下边”加上 2px 的淡色线（纯白或纯黑，透明度 10%）。将其转换为 **Component（组件）**，然后复制平铺整个框架。
-- **推荐方法 B（插件法）**：在 Figma 社区里搜索并运行插件，比如 **"Looper"**、**"Grid Generator"** 或 **"Pattern Hero"**，输入你的线宽和间距（352px），插件会一秒钟帮你切分好背景网格。
+### 12.3 网格化背景 (Grid) 的复刻
+
+网页里的网格是用 CSS 的 `linear-gradient` 无限延展画出来的。在 Figma 里，请根据所选主题参考以下颜色表，然后选择对应的复刻方式：
+
+**网格颜色与透明度参考**：
+
+| 主题 | 网格线颜色 | 透明度 | 推荐说明 |
+|------|---------|------|--------|
+| 1（蓝黄） | `#D4D4D8`（锌灰） | 35% | 浅灰中等可见 |
+| 2（橙绿） | `#000000`（纯黑） | 4% | 极淡线条 |
+| 3（紫青） | `#FFFFFF`（纯白） | 6% | 深底浅线 |
+| 4（樱花蓝） | `#000000`（纯黑） | 3% | 超浅极简 |
+| 5（青蓝） | `#06B6D4`（亮青） | 6% | 青色网格 |
+| 6（浅蓝） | `#CBD5E1`（浅灰） | 25% | 灰蓝可见 |
+
+**Figma 复刻方法**：
+- **推荐方法 A（组件平铺法）**：先画一个 `352×352` 的正方形，只给它的"右边"和"下边"加上 2px 的淡色线（参考上表的颜色），将其转换为 **Component（组件）**，然后复制平铺整个框架。
+- **推荐方法 B（插件法）**：在 Figma 社区里搜索并运行插件，比如 **"Grid Generator"**，输入你的线宽（2px）、间距（352px）和对应主题的线条颜色，插件会一秒钟帮你切分好背景网格。
+
+### 12.4 全局排版与安全边距 (Typography & Base Layout)
+
+网页结构是一个极简的瑞士排版（Swiss Design）风格容器。所有文字与基础信息的定位都依赖外边距：
+
+*   **画布内边距（Padding）**：代码中使用了 `p-10`（在移动端 `sm` 以上生效），即 `40px`。
+    *   **Figma 映射**：给你的 A1 画布（Frame）四周留出约 **`440px` 的安全边距**（所有标题、底栏都在这个边界内对齐）。
+*   **主标题 (Title - GROUP5.)**：代码为 `text-7xl`、字重 `font-black`、行高 `leading-[0.85]`。
+    *   **Figma 映射**：无衬线字体（推荐 Helvetica Neue、Inter、SF Pro Display 甚至 Roboto），**字号 `800px`**，**字重 Black (900)**，**行高 (Line Height) 设定为 `85%`**，字母间距 (Letter spacing) 设定为 `-3%` 到 `-5%`。
+*   **副标题 (Subtitle - NineOne Rover)**：代码为 `text-2xl`，大写 `uppercase`，宽间距 `tracking-widest`。
+    *   **Figma 映射**：字号 `260px`，**字重 SemiBold (600)**，全大写，**字母间距 `10%`**。
+*   **左侧侧边竖向文字**："Next Generation Autonomous Systems"
+    *   **坐标与旋转**：画布左侧中心点（Y轴居中），旋转 `-90°`（逆时针或正向上）。字体基准 `text-[10px]` $\times$ 11 = `110px`，极宽的字距（`tracking-[0.4em]` 对应 Figma 字母间距 `40%`）。
+
+### 12.5 悬浮毛玻璃卡片 (UI Panels) 的复刻与绝对坐标
+
+网页中前方的半透明 UI 悬浮板使用了带背景模糊 (`backdrop-blur`) 的设计。把它们搬到标准 A1 画布（宽 7016 × 高 9933 px）时，你可以直接在 Figma 的右侧属性栏输入以下图层参数（圆顶角统一设置约为 `176px`）：
+
+*   **材质通用做法**：
+    *   面板底色：填充白色 `#FFFFFF`，透明度调到 `4%` 到 `10%`。
+    *   高级模糊：点击 **Effects（效果）** ➜ **Background Blur（背景模糊）** 设为 `150` 到 `300` 左右。
+    *   高光边缘：添加一个白色的 **Stroke（描边）**，宽 `4px`，透明度 `15%`，增加玻璃厚度感。
+
+**1. 右上角 ROI HUD 视窗 (带心跳红点和曲线)**
+*   **尺寸 (W × H)**：`2816 × 3168 px`（网页中对应的 `w-64 h-72`）
+*   **绝对位置 (X, Y)**：`X: 3639, Y: 1341`（逻辑：距顶部13.5%，距右侧8%）
+*   **旋转角度 (Angle)**：`2°`
+*   **阴影效果 (Drop Shadow)**：
+    * Position X: `0`
+    * Position Y: `198 px`
+    * Blur: `484 px`
+    * Spread: `0`
+    * Color: `0F172A`，Opacity: `18%`
+*   **内部核心元素**（按从上到下顺序）：
+    *   **Header 状态栏**：`ROI_TRACKING_ACTIVE` 文字（字色 `#64748B`，字号 64px），左侧心跳指示灯（圆形，直径 44px，填充 `#EF4444` 红色，Blur `88px`），右侧 Settings 齿轮图标（灰色）
+    *   **Visualizer 主窗口**（镂空矩形）：尺寸约 `2464 × 1452 px`，四个角的对焦框（白色线条 22px 长，2px 宽），中心十字准星（虚线），中心圆点（`border-blue-500/80` 描边）
+    *   **绿色拟合直线**：宽约 1650px，斜角约 45°，上面采样标记 5 个点（`border-green-600` 圆环 + `bg-green-400` 实心点混合），绿色发光
+    *   **红色法向量**：箭头指示，标注 `normError` 文字（红色 12px 字体）
+    *   **底部 C++ 变量 HUD**（半透明卡片）：显示 3 行数据 
+        - Line 1: `cv::fitLine([dist=L2])` 及其 `vy/vx` 的青蓝色显示值
+        - Line 2: `emaTilt.deg` 及其琥珀色数值 `-35.15°`
+        - Line 3: `expoPower` 及其绿色数值 `0.82 * P_MAX`
+
+**2. 左下角 CPU 状态面板 (带处理芯片图标)**
+*   **尺寸 (W × H)**：`2464 × 1584 px`（网页对应的 `w-56 h-36`）
+*   **绝对位置 (X, Y)**：`X: 351, Y: 6363`（逻辑：距左侧5%，距底部20%）
+*   **旋转角度 (Angle)**：`-2°`
+*   **内部对齐参考**：内边距 Padding `176px`，左侧圆形装饰宽高 `440 × 440 px`。右侧高亮数据条高度约为 `176px`。
+*   **内部核心元素**（按从上到下顺序）：
+    *   **左上角 CPU 图标面板**：圆形图标框（`440 × 440 px`，边框 22px），填充近白色（主题依赖），中心 CPU 图标（使用主题的 accent 颜色，如 `#0066CC`）
+    *   **右侧标签栏**：两行右对齐的文字（字色 `#64748B`），间距 176px
+    *   **底部进度条组**：两条高亮粗条（左侧条 66% 宽度，右侧条普通宽度），全圆角（Rounded `100px`），填充主题 accent 色的半透明版本
+
+**3. 左侧边缘被截断的小面板 (Mid Left Panel)**
+*   **尺寸 (W × H)**：`1408 × 1936 px`（网页对应 `w-32 h-44`）
+*   **绝对位置 (X, Y)**：`X: -352, Y: 4171`（逻辑：通过负坐标 -left-8 拖出画布边缘产生裁切感）
+*   **旋转角度 (Angle)**：`-6°`
+*   **设置 Clip content**：勾选 Figma 的裁切选项，使内容在边界外自动隐藏，模拟网页的溢出隐藏效果
+
+**通用阴影参考表（其他 Panel 与页面元素）**：
+
+| 元素位置 | Position X | Position Y | Blur | Spread | Color | Opacity | 说明 |
+|--------|-----------|----------|------|--------|-------|---------|------|
+| **大海报容器** | 0 | 352 | 880 | 0 | 000000 | 15% | 网页主海报外框阴影 |
+| **Panel 背景通用** | 0 | 88 | 352 | 0 | 0F172A | 10% | 大多数浮窗用（除 theme 5） |
+| **Panel 背景淡版** | 0 | 88 | 352 | 0 | 0F172A | 6% | 需要超轻微阴影的 Panel |
+| **Panel 深色版（theme 5）** | 0 | 132 | 440 | 0 | 000000 | 50% | 深海青蓝主题的深色卡片 |
+
+### 12.6 背景大光晕与轨迹引导线 (Atmosphere & SVG Trails)
+
+**1. 氛围大光晕 (Ambient Glow)**
+网页中使用了基于画布百分比的极大尺寸椭圆配合极为激进的高斯模糊来制作光晕。在 Figma 中，请直接建立椭圆 (Ellipse)，点击 **Effects（效果）** ➜ **Layer Blur（图层模糊）**，并输入以下数据：
+
+**注意**：光晕颜色根据所选主题而异，请根据下表选择对应的 RGB 值或 HEX 代码，在 Figma 的填充面板中输入，然后设置透明度：
+
+| 光晕位置 | 主题 1（蓝黄） | 主题 2（橙绿） | 主题 3（紫青） | 主题 4（樱花蓝） | 主题 5（青蓝） | 主题 6（浅蓝） |
+|---------|------------|------------|------------|------------|----------|----------|
+| **左上暖光 (Warm)** | `#FCD34D` 40% | `#FF6600` 14% | `#A855F7` 25% | `#FCD34D` 50% | `#06B6D4` 15% | `#38BDF8` 15% |
+| **右上冷光 (Cool)** | `#7DD3FC` 40% | `#00D084` 10% | `#06B6D4` 15% | `#BAE6FD` 60% | `#3B82F6` 10% | `#818CF8` 10% |
+| **底部环光 (Ambient)** | `#3B82F6` 30% | `#00D084` 7% | `#3B82F6` 10% | `#E2E8F0` 70% | `#0891B2` 10% | `#CBD5E1` 30% |
+
+*   **左上角首要光源 (Warm Glow)**
+    *   **尺寸 (W × H)**：`3788 × 5363 px` 
+    *   **位置 (X, Y)**：`X: -701, Y: -2185` 
+    *   **填充颜色与透明度**：参考上表，选择相应主题的颜色
+    *   **系统特效 (Layer Blur)**：图层模糊 `1100 px`
+    *   **提示**：这个光晕构成了页面的主氛围调，置于画布的最底层即可。
+
+*   **右上角辅光源 (Cool Glow)**
+    *   **尺寸 (W × H)**：`2525 × 3575 px` 
+    *   **位置 (X, Y)**：`X: 5332, Y: -1787` 
+    *   **填充颜色与透明度**：参考上表，选择相应主题的颜色
+    *   **系统特效 (Layer Blur)**：图层模糊 `1320 px`
+
+*   **底部环境托底光带 (Bottom Ambient)**
+    *   **尺寸 (W × H)**：`7717 × 3774 px` 
+    *   **位置 (X, Y)**：`X: -350, Y: 8542` 
+    *   **填充颜色与透明度**：参考上表，选择相应主题的颜色
+    *   **系统特效 (Layer Blur)**：图层模糊 `1540 px` 
+
+**2. Line-Following 循迹路线**
+
+网页中有 4 种不同的路线变体（`TRAIL_VARIANT`），默认使用第 4 种。你可以在 `src/app/App.tsx` 第 14 行修改选择：
+
+| 变体编号 | 路线风格 | 曲线形状说明 |
+|--------|--------|---------|
+| 1 | 标准S曲线 | 中段下探后向右下延展 |
+| 2 | 缓和S曲线 | 更平缓的正弦波形 |
+| 3 | 激进斜切 | 更陡峭的右下斜向延展 |
+| 4（当前默认） | 直角L折 | 从右下垂直上升，再圆角转水平左移 |
+
+**轨迹线条复刻方法**（以第 4 种为例）：
+*   **Figma 操作**：使用 **Pen Tool（钢笔工具，快捷键 P）**，在 A1 画布中心拉出路线：
+    *   从点 `(460, 900)` 垂直向上到 `(460, 320)`
+    *   使用二次贝塞尔曲线平滑转角到 `(340, 200)`（转角半径约 120px）
+    *   水平向左延伸到 `(-50, 200)` 穿过画布左边界
+*   **外围发光效果**（三层构成）：
+    1. **底层 Glow**：描边颜色 `#7DD3FC`（天蓝色），宽度约 `260px`，并添加 **Drop Shadow/Outer Glow** 特效
+    2. **虚线层**：复制一条线，描边改为虚线（Dash = `110px`, Gap = `130px`），颜色 `#FFFFFF` 透明度 `18%`
+    3. **实线层**：最前的主线，描边 `#7DD3FC` 宽度 `27px`（放大11倍的数值）
+
+**轨迹线条颜色根据主题变化**（虽然默认都使用冰蓝，但可按需调整）：
+
+| 主题 | 轨迹主线色 | 发光色 | 虚线色（RGBA） |
+|------|---------|------|-----------|
+| 1（蓝黄） | `#0EA5E9` | `#0EA5E9` | `rgba(148,163,184,0.18)` |
+| 2（橙绿） | `#0EA5E9` | `#0EA5E9` | `rgba(148,163,184,0.18)` |
+| 3（紫青） | `#0EA5E9` | `#0EA5E9` | `rgba(148,163,184,0.18)` |
+| 4（樱花蓝） | `#7DD3FC` | `#7DD3FC` | `rgba(125,211,252,0.18)` |
+| 5（青蓝） | `#06B6D4` | `#06B6D4` | `rgba(6,182,212,0.18)` |
+| 6（浅蓝） | `#7DD3FC` | `#7DD3FC` | `rgba(125,211,252,0.18)` |
+
+*   **轨迹中心标记点**（Circle 12.5. 部分提到的中心红点）：
+    *   **尺寸**：`40px × 40px`（11倍缩放后）
+    *   **填充**：纯白或目标颜色，透明度 100%
+    *   **描边**：主题中的 `centerDotBorder` 颜色（通常带蓝色 `-500/80` 级别的透明度）
+
+然后**在同位置复制一条线**，描边改为内部虚线（Dash = `110px`, Gap = `130px`），使用根据主题选定的虚线色，盖合在底部发光线上即可完美呈现科幻数据流质感。
+
+### 12.7 装饰线与占位符细节
+
+**条形码修饰 (Barcode Lines 右上角竖线)**
+在右上角标题对面有一组竖线。网页里是 `h-7`，所以 Figma 里高度统一为 `300px`。线宽分别为 2px、1.5px、1px、4px、2px —— 放大11倍后，你在 Figma 里可以画一系列高度 300px，宽度分别为 `22px, 16.5px, 11px, 44px, 22px` 的矩形，间距大约留 `33px`。
+
+**线条颜色根据主题参考下表**：
+
+| 主题 | 条形码线条颜色 | 透明度 |
+|------|-------------|------|
+| 1（蓝黄） | `#64748B`（深灰） | 100% |
+| 2（橙绿） | `#64748B`（深灰） | 100% |
+| 3（紫青） | `#64748B`（灰） | 100% |
+| 4（樱花蓝） | `#86868B`（Apple灰） | 100% |
+| 5（青蓝） | `#475569`（深灰青） | 100% |
+| 6（浅蓝） | `#64748B`（深灰） | 100% |
+
+**中央产品放置区 (十字准星)**
+画面正中间的预留空位是一个 `max-w-[320px]` 的框。Figma 里画一个大约 `3500px × 3500px` 的隐形参考框，然后在其四个角画长度 `176px`，粗细 `11px` 的直线交组出十字"+"号角即可。
+
+**十字准星线条颜色根据主题参考下表**：
+
+| 主题 | 十字线条颜色 | 透明度 |
+|------|---------|------|
+| 1（蓝黄） | `#64748B`（深灰） | 100% |
+| 2（橙绿） | `#64748B`（深灰） | 100% |
+| 3（紫青） | `#475569`（深灰） | 100% |
+| 4（樱花蓝） | `#C7C7CC`（Apple浅灰） | 100% |
+| 5（青蓝） | `#475569`（深灰青） | 100% |
+| 6（浅蓝） | `#64748B`（深灰） | 100% |
+
+按照以上所有尺寸、间距、参数复刻到 Figma 或者 AI 里后，你得到的绝对不会是一个“看着差不多的图”，而是像素级完美对仗、排版逻辑极度严谨的“可打印版本重构工程”。