# LLM Log Dashboard

一个将 LLM 日志 Markdown 文件批量聚合渲染为精美静态 HTML 页面的工具。

## 特性

- **批量解析**: 自动读取 `llm_log/` 目录下所有 `.md` 文件
- **设计驱动**: 严格遵循 `ui-ux-pro-max` 设计规范体系
- **响应式布局**: 移动端优先，适配 375px → 1440px 断点
- **微交互**: 表格行悬停高亮、卡片悬浮上浮动画
- **无障碍**: ARIA 语义标签、`prefers-reduced-motion` 支持
- **零外部依赖**: 生成纯静态 HTML，字体通过 Google Fonts CDN 引入

## 设计令牌

| Token | Value | Usage |
|-------|-------|-------|
| Primary | `#6366f1` | 主题色、强调色 |
| Surface | `#ffffff` | 卡片背景 |
| Background | `#f1f5f9` | 页面背景 |
| Text Primary | `#0f172a` | 主要文本 |
| Radius | 6/10/16px | 圆角层级 |
| Font Sans | Inter | 正文字体 |
| Font Mono | JetBrains Mono | 代码字体 |

## 项目结构

```
llm_log_frontend/
├── llm_log/              # Markdown 日志文件目录
│   └── 2026-04-26.md     # 按日期命名的日志
├── index.html            # 生成的静态页面
├── generate.js           # 生成器脚本
└── package.json
```

## 使用方法

```bash
# 安装依赖
npm install

# 生成 HTML
npm run generate
```

## 日志格式

将 Markdown 文件放入 `llm_log/` 目录，文件名格式为 `YYYY-MM-DD.md`：

```markdown
| 小时 | 平均输入t/s | 平均输出t/s | 输入token总数 | 输出token总数 | token总数 |
| :---: | :---: | :---: | :---: | :---: | :---: |
| 00 | 216.04 | 26.08 | 115,105 | 5,701 | 120,806 |
```

## 设计规范

本项目遵循 [ui-ux-pro-max](https://github.com/anomalyco/opencode) 规范体系的核心准则：

- **排版节奏**: 16px 基准字重，1.5-1.6 行高，65-75 字最大行长
- **间距系统**: 4/8dp 增量，保持 8px 最小触摸间距
- **阴影层级**: sm(1px) → md(4px) → lg(10px) 递进
- **过渡动画**: 150-300ms ease-out，支持减弱动效偏好
- **对比度**: 文本与背景 4.5:1 以上，触摸目标 ≥44×44pt

## 预览

生成的页面包含：

- 粘性导航栏 + 最后更新时间
- 卡片式日志条目，每条带日期标识
- 表格悬停高亮，`**全天**` 行高亮突出
- 移动端自适应表格滚动

## License

MIT