# HTML前端工具模板

生成品广高潜分析HTML工具时，使用以下结构。这是一个完整的单文件方案，双击即可在浏览器运行。

## CDN依赖

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
```

## 页面结构

```
┌─────────────────────────────────────┐
│ 标题 + 副标题说明                      │
├────────────────┬────────────────────┤
│ 上传档期查询    │ 上传商户名单         │
├────────────────┴────────────────────┤
│ 参数配置（可折叠）                     │
│ - 效果广告收入阈值 [4个输入框]          │
│ - 年费收入阈值 [4个输入框]             │
│ - 流量阈值 [4个输入框]                 │
│ - 高潜力TGI阈值 / 较容易TGI阈值       │
├─────────────────────────────────────┤
│ [开始分析] 按钮                       │
├─────────────────────────────────────┤
│ 统计卡片 x5                          │
├─────────────────────────────────────┤
│ Tab: 整体TGI | 分类目TGI | 档期匹配   │
│ ┌─────────────────────────────────┐ │
│ │ Tab1: 3列图表 + 表格             │ │
│ │ Tab2: 类目选择 + 表格            │ │
│ │ Tab3: 城市/类目筛选 + 表格       │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ [下载Excel] 按钮                     │
└─────────────────────────────────────┘
```

## 关键实现模式

### 文件上传 + 列名校验

```javascript
function readExcel(file, cb) {
  const r = new FileReader();
  r.onload = e => {
    const wb = XLSX.read(e.target.result, { type: "array" });
    cb(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]), file.name);
  };
  r.readAsArrayBuffer(file);
}

// 校验列名
const cols = Object.keys(data[0] || {});
const ok = REQUIRED_COLS.every(c => cols.includes(c));
```

### Chart.js 横向柱状图 + TGI=100参考线

```javascript
new Chart(ctx, {
  type: "bar",
  data: { labels: rows.map(r => r.layer), datasets: [{ label: "TGI", data: rows.map(r => r.TGI) }] },
  options: { indexAxis: "y", responsive: true },
  plugins: [{
    id: "refLine",
    afterDraw(chart) {
      const px = chart.scales.x.getPixelForValue(100);
      // 画红色虚线
    }
  }]
});
```

### Excel下载

```javascript
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(data), "SheetName");
const buf = XLSX.write(wb, { type: "array", bookType: "xlsx" });
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([buf]));
a.download = "品广高潜分析结果.xlsx";
a.click();
```

## 样式要点

- 背景：渐变 `linear-gradient(135deg, #f8fafc, #eff6ff)`
- 卡片：白底 + 12px圆角 + 1px边框 `#e2e8f0` + 轻阴影
- 按钮：蓝色 `#2563eb` / 绿色 `#16a34a` + 12px圆角
- 表格：蓝色表头 `#2563eb`，sticky header，高亮行绿色 `#dcfce7` / 黄色 `#fef9c3`
- 上传区：虚线边框，hover变蓝，成功变绿，失败变红