# REFERENCE · Bloomberg 版式研究与本站映射

> 目的：满足 `PROJECT.md` 5.5「页面与结构参考彭博社」的要求，先研究、再设计。
> 结论先行：**采用 bloomberg.com 的信息层级（导航分组 / 行情条 / 主新闻 + 三栏网格 / 数据表 / 右侧榜单 / 页脚分组）+ Bloomberg Terminal 的视觉语法（暗底、琥珀、等宽数字、零圆角、发丝线、密集栅格）**。
> **结构参考，不复制商标、Logo、图片、专有字体或像素级版式。** 本站所有文字与数据均自撰或来自本地可溯源快照。

研究时间：2026-10-18（第 1 轮）。研究人：网站队员（fnb-web）。

---

## 1. 抓取记录（一手访问的实际情况）

| 目标 | 结果 | 说明 |
|---|---|---|
| `https://www.bloomberg.com/` | **失败** | `URL hostname resolves to a non-public IP address`（本机 DNS/出口限制，非 403） |
| `https://www.bloomberg.com/markets` | **失败** | 同上，无法取得真实 DOM |
| `https://www.newscaststudio.com/2015/01/29/bloomberg-redesigns-main-website/` | **失败** | HTTP 403（Cloudflare 浏览器校验） |
| `https://www.bloombergmedia.com/press/how-were-keeping-our-audience-first-by-creating-a-homepage-designed-for-them/` | 成功（HTTP 200） | 官方新闻稿；正文被站点截断，仅取到标题与主题 |
| `https://designbycurio.com/learn/bloomberg-terminal-green` | 成功（HTTP 200） | Bloomberg Terminal 视觉风格研究（暗底 / 单色 / 四面板 / 零圆角 / 密度即信任） |
| `https://chrisleekr.github.io/binance-trading-bot/design/bloomberg-terminal-design-spec/` | 成功（HTTP 200） | 第三方整理的 Terminal 设计参考：色板（含 hex）、字号、行高、表格、行情条、指令条、状态栏 |
| `https://en.wikipedia.org/wiki/Bloomberg_News` | 失败 | 同样 resolve 到非公网地址 |

**因此：版式依据 = ① 二手设计研究（可引用的公开描述）+ ② bloomberg.com 长期公开、稳定的信息架构（导航分组、行情条、主图 + 三栏、Most Read 右栏、板块分带、页脚站点地图）+ ③ `PROJECT.md` 5.5 的硬约束。** 三者一致的部分才采纳。无法验证的细节（具体像素、当前导航条目）不声称、不照抄。

---

## 2. bloomberg.com 的信息层级（采纳的部分）

按从上到下的阅读顺序，bloomberg.com 首页的稳定骨架是：

1. **全局工具条**：品牌字标、账号/订阅入口、时间与地区版本。
2. **行情条（market ticker strip）**：横向滚动的指数/个股/商品报价，符号 + 价格 + 涨跌 + 涨跌幅，涨绿跌红（西方惯例）。**滚动本身是"市场在动"的语义**，不是装饰。
3. **主导航**：一级栏目（Markets / Economics / Industries / Technology / Politics / Wealth / Pursuits / Opinion / Businessweek 等），当前栏目高亮；二级导航随栏目变化。
4. **主新闻区（hero）**：一条主稿占最大视觉权重——大标题 + 摘要（deck）+ 时间戳 + 分类标签；右侧/下方为次级稿。
5. **多栏新闻网格**：2–4 栏密集排列，每条 = 分类标签 + 标题 +（可选）摘要 + 时间；标题长短混排形成节奏。
6. **数据/图表带**：指数、收益率、商品等小型数据面板，数字右对齐、等宽。
7. **右侧榜单（Most Read / Most Popular）**：编号 01–10 的排行列表，编号是视觉锚点。
8. **板块分带（section bands）**：按主题分带（Markets / Economics / Industries…），每带 3–4 条。
9. **页脚**：多列站点地图 + 法务/隐私/免责 + 版权。

**本站在 1:1 结构层面采纳以上 9 层**，但栏目全部替换为餐饮行业情报语境（见 §4）。

---

## 3. Bloomberg Terminal 的视觉语法（采纳的部分）

来源：[Curio · Bloomberg Terminal (CRT Green)](https://designbycurio.com/learn/bloomberg-terminal-green)、[Bloomberg terminal design reference](https://chrisleekr.github.io/binance-trading-bot/design/bloomberg-terminal-design-spec/)。两篇均为公开第三方整理，hex 为第三方取色或解释值，非官方值（其自身也如此声明）。

采纳的硬规则：

| 规则 | 本站落地 |
|---|---|
| **暗底**：近黑而非炭灰，作为"操作界面"而非"夜间模式" | `--bg: #08080c`，面板 `#0f0f16`，抬升层 `#14141c` |
| **琥珀是语义色**：用于栏目头、标签、强调、焦点，不得当装饰铺满 | `--amber: #ffa028`；琥珀只出现在面板头、编号、选中态、CTA |
| **单色语义**：涨绿跌红，且**符号优先于颜色**（▲/▼ 必须同时存在，色盲可读） | `.up`/`.down` 同时插入 `▲`/`▼` 字形 |
| **等宽数字**：数字列必须等宽 + tabular figures，避免跳动 | `font-variant-numeric: tabular-nums` + `font-feature-settings:"tnum" 1,"zero" 1` |
| **零圆角、零阴影、零渐变**：hover/focus 瞬时切换 | `border-radius: 0`，1px 发丝线 `#1e1e2a`，无 box-shadow |
| **密集**：单元格 4–10px 内边距，行高 20–24px，一屏尽量多信息 | 表格行高 26px，字号 11–13px，栅格 gap 10–16px |
| **多面板 tiled 布局**：面板有独立 ALL-CAPS 标题 + 功能码徽标 | `.panel` + `.fn-code`（如 `FNBI <GO>`） |
| **指令条文化**：`TICKER <FUNCTION> <GO>` 的键盘优先入口 | 顶部 `.cmdbar`（演示态，输入不执行检索，明确提示） |
| **状态栏**：底部常驻 muted 大写计数 | 页脚状态栏：构建版本 / 数据快照 / 服务状态 |

**明确不复制**：Bloomberg 商标与字标、其专有字体（Bloomberg Prop Unicode 为商业授权）、其摄影与图表素材、其页面截图。本站字体只用系统栈（见 §5），图标为自绘内联 SVG。

---

## 4. 页面结构映射表（bloomberg.com → F&B Terminal）

| # | Bloomberg 元素 | F&B Terminal 实现 | 路由 |
|---|---|---|---|
| 1 | 全局工具条 | 字标 `F&B TERMINAL` + 版本/时间 + "演示数据"状态 | 全站 `.utilbar` |
| 2 | 行情条 | FNBI 行业指数 + 11 家对标公司 + 3 个食材成本代理，横向 marquee，标注「演示数据·非实时」 | 全站 `.ticker` |
| 3 | 主导航 + 二级导航 | 首页 / 新闻 / 数据 / 模型 / 终端 / 运维；二级为行业分类锚点 | 全站 `.nav` / `.subnav` |
| 4 | 主新闻 hero | 1 条主稿（标题 + deck + 时间 + 分类） | `/` |
| 5 | 多栏新闻网格 | 8+ 条快讯/分析，2 栏，标题长短混排 | `/`、`/news/` |
| 6 | 数据带 | 11 家对标公司速览表（营收/净利/门店/单店） | `/`、`/data/` |
| 7 | Most Read 右栏 | 「最受关注」01–10 + 「指标速览」面板 | `/` |
| 8 | 板块分带 | 火锅 / 茶饮咖啡 / 快餐 / 正餐 四带，每带 3 条 | `/` |
| 9 | 页脚站点地图 | 5 列站点地图 + 免责声明 + 版权 | 全站 `.footer` |

补充页面（本行业产品需要，bloomberg.com 无对应）：`/model/`（模型卡与评测）、`/terminal/`（对话演示）、`/ops/`（部署状态）——三者沿用同一套面板语法，不另起视觉体系。

---

## 5. 设计令牌（Design tokens）

```css
/* 底色与层级 */
--bg:        #08080c;   /* 画布 */
--panel:     #0f0f16;   /* 面板 */
--raised:    #14141c;   /* 抬升/表头 */
--row-alt:   #0c0c12;   /* 斑马行 */
--line:      #1e1e2a;   /* 发丝线 */
--line-2:    #2b2b3a;   /* 强分隔 */

/* 文本与语义 */
--text:      #e8e8ef;
--muted:     #9a9aab;
--dim:       #6b6b7e;
--amber:     #ffa028;   /* 品牌/栏目头/编号 */
--amber-dim: #a86a1a;
--up:        #34e0a1;   /* 涨（配 ▲） */
--down:      #ff4d4d;   /* 跌（配 ▼） */
--info:      #5aa9ff;   /* 链接 */
--warn:      #ffc24d;

/* 字体 */
--mono: ui-monospace, "Cascadia Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
--sans: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
```

**字号阶梯**（密集排版，参考 Terminal spec 11–14px）：表格数据 11–12px / 正文 14–15px / 面板标签 10–11px 大写 / hero 标题 30–38px / 页脚 11px。

**断点**：`≥1280` 桌面（12 栅格，主区 3:1 分栏）；`768–1279` 平板（主区 + 右栏下移，2 栏网格）；`<768` 手机（单栏，导航横向滚动，表格外层横向滚动，行情条仍滚动但降速）。目标验收尺寸：桌面 1440×900、平板 768×1024、手机 390×844。

**可访问性**：琥珀 `#ffa028` 在 `#08080c` 上对比度约 9.9:1（≥ AA/AAA）；正文 `#e8e8ef` 约 16:1；涨跌同时有 ▲/▼ 与文字符号，不单靠颜色；`prefers-reduced-motion` 下关闭行情条滚动与所有过渡；键盘 focus 用 1px 琥珀描边（无圆角）；每页有唯一 `<h1>`、`<title>`、meta description。

---

## 6. 数据与内容来源

| 内容 | 来源 | 标注方式 |
|---|---|---|
| 11 家上市餐企对标数据 | **优先** `C:\DSH\.com\fnb-gpt\data\structured\benchmarks.json`（本项目数据源，含审计勘误）；读不到才回退 `chain-fnb-org\assets\js\data\benchmarks.mjs`（FY2024 口径，可能过期） | `/data/` 页注明数据源路径 + 口径 + caveats + 「不构成投资建议」 |
| 行情条 / 指数 | **本站构造的演示快照**（以 FY2024 数据为锚的示意涨跌） | 行情条与页脚双处标注「演示数据·非实时」 |
| 新闻与文章正文 | 本站自撰行业分析（基于公开年报口径与通用餐饮经营常识） | 页脚与 `/news/` 顶部标注「演示内容」 |
| 模型信息 | `PROJECT.md` §1–5（Qwen2.5-3B-Instruct + LoRA + merge；BloombergGPT 方法论复刻） | `/model/` 标注「评测进行中」，不编造指标 |
| 部署命令 | `deploy/deploy-commands.json`（单一事实来源，README 与 `/ops/` 同时渲染） | `/ops/` 与 `deploy/README.md` 逐字一致 |

---

## 7. 参考链接

- Curio, *What is Bloomberg Terminal (CRT Green)? Design style guide* — https://designbycurio.com/learn/bloomberg-terminal-green
- chrisleekr, *Bloomberg terminal design reference*（第三方整理；其文末亦列出取色与事实来源）— https://chrisleekr.github.io/binance-trading-bot/design/bloomberg-terminal-design-spec/
- Bloomberg Media, *How We're Keeping Our Audience First by Creating a Homepage Designed for Them* — https://www.bloombergmedia.com/press/how-were-keeping-our-audience-first-by-creating-a-homepage-designed-for-them/
- `PROJECT.md` §5.5 / §5.6（本项目契约，优先级高于以上所有二手资料）
- `chain-fnb-org/assets/js/data/benchmarks.mjs`（数据与口径）

---

## 8. 验证记录（2026-10-18，第 1 轮）

| 项 | 结果 |
|---|---|
| 构建 | `node web/build.mjs` → 15 个页面（7 篇深度稿 + 8 个栏目/工具页 + 404），HTML 429 KB，CSS 49 KB，JS 13 KB；数据源 `data/structured/benchmarks.json`，勘误断言通过 |
| 自检 | `node web/check.mjs` → **68 项全部通过**（页面/标题/外链/内部链接/文章字数/数据表 11 行/全聚德勘误/模型评测/heldout 披露/截图） |
| 桌面截图 | 7 张 1440×900（首页/新闻/文章/数据/模型/终端/运维） |
| 手机截图 | 4 张 390×844（首页/新闻/数据/终端） |
| 模型评测接入 | `/model/` 读取 `eval/reports/summary.json`（最终一轮）：bench base 55.1%（70/127）→ tuned 59.8%（76/127），Δ +4.72pp；general 69.9% → 67.5%（Δ -2.41pp，阈值 ≤3pp）；heldout 7.1%（1/14）→ 14.3%（2/14），Δ +7.15pp；判定「领域提升达标 · 通用回归达标」；8 类分任务表由 `by_task_delta` 渲染；`heldout-comparison.md` 随站点发布并可从页面链接 |
| 口径披露 | `/model/` KPI 下固定一行：「SFT 答案形态与 bench rubric 同源，bench 分数可能高估；heldout Δ=+7.15pp（14 条）仅作方向性参考」，并展示 bench/heldout/general 三行对照（含分子/分母） |
| 能力边界 | `/terminal/` 与 `/model/` 明确标注「本地 DSH-FB-3B 实测评测 59.8%（领域 bench，样本内），精确计算/财务数字请以工具与知识库为准」 |
| 截图方式 | Edge 155 + CDP `Emulation.setDeviceMetricsOverride`。**不用** CLI `--window-size=390`：headless=new 有约 500px 最小窗口宽度，会裁切手机页面（实测视口 504px） |
| 交互验证 | 新闻分类筛选（财报 6 条）、数据表按门店数排序 + 检索（蜜雪 → 1 行）、终端示例切换与 `/healthz` 探测回落、命令条演示提示 —— 均通过 CDP `Runtime.evaluate` 实测 |
| 外链约束 | 正文来源链接 19 条，全部是文章页 `a.cite`；采用**协议相对** `//host/...`（https 站点上等价于 `https://`，点击可正常打开），页面内不含 `http(s)://` 字面量，静态审计可区分「引文链接」与「外链资源」；CSS/JS/HTML 资源零外链 |
| 统一验收 | `node tests/all.mjs --only web` → **9/9 通过**；`node tests/all.mjs --only deploy` → **15/15 通过** |

截图与清单：`web/artifacts/`（`manifest.json` 记录每张图的页面、视口、像素尺寸与字节数）。

---

## 9. 数据勘误记录（2026-10-18，P0）

| 项 | 内容 |
|---|---|
| 对象 | 全聚德 FY2024 归母净利润 |
| 错误值 | 1,413.09 万元（0.1413 亿元），净利率 1.01% |
| 正确值 | **3,413.09 万元（0.3413 亿元）**，净利率 **2.43%**，单店净利约 33.8 万元/家 |
| 一手来源 | 证券时报 2025-04-15：https://stcn.com/article/detail/1662246.html |
| 影响面 | `/data/` 全聚德行、净利率分布、`/news/` 快讯标题与摘要、`/data/` 快照元信息与数据来源面板 |
| 防复发机制 | `web/build.mjs` 优先读 `data/structured/benchmarks.json`；对全聚德 `netProfit2024≈0.3413` 与 `netMargin2024≈0.0243` 做**硬断言**，数据未修复时构建直接失败并提示「等待 data 修复完成」；结构化数据不可读时才回退 `chain-fnb-org`（上一项目副本） |
| 展示方式 | `/data/`「可比性说明」置顶「勘误记录」，展示旧值（删除线）→ 新值、来源与数据源切换说明；构建产物 `build-info.json` 记录 `dataSource.path/retrieved` |
| 不再修改 | `chain-fnb-org` 项目文件保持原样（错误副本仅作回退，不作为默认数据源） |