llm_log_frontend/README.md

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

使用方法

# 安装依赖
npm install

# 生成 HTML
npm run generate

日志格式

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

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

设计规范

本项目遵循 ui-ux-pro-max 规范体系的核心准则：

• 排版节奏: 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