A 型 · 数据表格方案

使用场景

数据表格适用于结构化数据的浏览和检索场景，是三层模板中最基础、最通用的一层。

不适合的场景

• 长文本阅读（>200 字/字段 → 用 B 型文档）
• 多类目知识库（需要标签切换 → 用 C 型知识库）
• 图表/可视化（数据表格不提供绘图功能）

方案设计

架构

Layer 1: style-guide.css (CSS 变量 + 组件基座)
Layer 2: layout-table.html (模板骨架)
Layer 3: html-gen.py → table 子命令 (数据注入)

数据流

JSON 文件 ──→ html-gen table ──→ 单文件 HTML
             │                    ├── 搜索
             │                    ├── 排序
             │                    └── 分页
             └── 列定义自动推导

关键设计决策

移动端响应

表格在屏幕宽度 <768px 时启用横向滚动，列头固定。移动端隐藏非关键列（摘要模式）。

行业对标

核心差异：A 型追求极简和零依赖，适合作为 CI/CD 产物、静态站点的一部分或临时数据查看工具。不是 Notion/Airtable 的替代品，而是在「需要快速展示结构化数据」场景下的轻量级补充。

功能清单

已实现 ✅

待实现 🔜

快速开始

# 准备数据
cat data.json

# 生成表格
html-gen table -d data.json -o index.html

# 在浏览器打开
open index.html

数据格式

[
  {
    "项目": "Hermes Agent",
    "Star": 50200,
    "语言": "Python",
    "最后提交": "2026-07-06"
  }
]

命令行参数

html-gen table -h
  -d, --data PATH    JSON 数据文件（必需）
  --title TEXT       页面标题（默认: "数据表格"）
  -o, --output FILE  输出 HTML 路径（默认: index.html）

迭代记录