78 lines
2.3 KiB
Markdown
78 lines
2.3 KiB
Markdown
# 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 |