siluzan-tso-cli 1.1.12 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -29
- package/dist/index.js +2267 -1440
- package/dist/skill/SKILL.md +93 -34
- package/dist/skill/_meta.json +2 -2
- package/dist/skill/assets/campaign-create-template.json +96 -101
- package/dist/skill/references/account-analytics.md +64 -62
- package/dist/skill/references/accounts.md +130 -130
- package/dist/skill/references/clue.md +13 -13
- package/dist/skill/references/finance.md +62 -61
- package/dist/skill/references/forewarning.md +40 -39
- package/dist/skill/references/google-ads-rules/google-ads-account-audit.md +165 -161
- package/dist/skill/references/google-ads-rules/google-ads-audience-strategy.md +94 -85
- package/dist/skill/references/google-ads-rules/google-ads-campaign-optimization.md +97 -85
- package/dist/skill/references/google-ads-rules/google-ads-compliance.md +274 -272
- package/dist/skill/references/google-ads-rules/google-ads-conversion-architecture.md +97 -82
- package/dist/skill/references/google-ads-rules/google-ads-creative-optimization.md +143 -139
- package/dist/skill/references/google-ads-rules/google-ads-keyword-optimization.md +131 -128
- package/dist/skill/references/google-ads-rules/google-ads-keyword-strategy.md +175 -173
- package/dist/skill/references/google-ads-rules/google-ads-launch-plan-template.md +126 -123
- package/dist/skill/references/google-ads-rules/google-ads-pmax-guide.md +86 -73
- package/dist/skill/references/google-ads-rules/sensitive-industries.md +43 -8
- package/dist/skill/references/google-ads.md +201 -196
- package/dist/skill/references/open-account-by-media.md +23 -23
- package/dist/skill/references/open-account-google-ui.md +26 -26
- package/dist/skill/references/optimize.md +8 -8
- package/dist/skill/references/reporting.md +28 -28
- package/dist/skill/references/setup.md +10 -7
- package/dist/skill/references/tso-home.md +11 -11
- package/dist/skill/references/workflows.md +28 -26
- package/dist/skill/report-templates/README.md +22 -21
- package/dist/skill/report-templates/REPORT-WORKFLOW.md +9 -9
- package/dist/skill/report-templates/bing-period-report.md +11 -11
- package/dist/skill/report-templates/google-ads-diagnosis.md +86 -86
- package/dist/skill/report-templates/google-period-report.md +23 -23
- package/dist/skill/report-templates/report-template-academic.html +433 -341
- package/dist/skill/report-templates/report-template-dark.html +440 -257
- package/dist/skill/report-templates/report-template-formal.html +438 -288
- package/dist/skill/report-templates/report-template-mobile.html +456 -241
- package/dist/skill/report-templates/report-template-onepager.html +452 -240
- package/dist/skill/report-templates/report-template-print.html +355 -243
- package/dist/skill/report-templates/report-template.html +485 -392
- package/dist/skill/report-templates/tiktok-period-report.md +10 -10
- package/package.json +13 -13
- package/scripts/postinstall.mjs +3 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<!--
|
|
3
3
|
风格：对客营销单页（Executive one-pager）
|
|
4
4
|
首屏叙事 + 主 KPI + 主图；第 2–6 节默认折叠（<details>），展开后结构与 report-template.html 一致、data-section-id 不变。
|
|
@@ -7,270 +7,482 @@
|
|
|
7
7
|
如需离线使用，请将对应资源下载到本地并替换 <script>/<link> 的 src/href。
|
|
8
8
|
-->
|
|
9
9
|
<html lang="zh-CN">
|
|
10
|
-
<head>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="UTF-8" />
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
13
|
+
<title>广告数据报告 — 单页精华版式参考</title>
|
|
14
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
15
|
+
<script>
|
|
16
|
+
tailwind.config = {
|
|
17
|
+
theme: {
|
|
18
|
+
extend: {
|
|
19
|
+
colors: {
|
|
20
|
+
brand: { 600: "#2563eb", 700: "#1d4ed8" },
|
|
21
|
+
},
|
|
21
22
|
},
|
|
22
23
|
},
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
@
|
|
32
|
-
|
|
33
|
-
details > summary {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
24
|
+
};
|
|
25
|
+
</script>
|
|
26
|
+
<link
|
|
27
|
+
rel="stylesheet"
|
|
28
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
29
|
+
crossorigin="anonymous"
|
|
30
|
+
referrerpolicy="no-referrer"
|
|
31
|
+
/>
|
|
32
|
+
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
|
33
|
+
<style>
|
|
34
|
+
details > summary {
|
|
35
|
+
list-style: none;
|
|
36
|
+
}
|
|
37
|
+
details > summary::-webkit-details-marker {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
@media print {
|
|
41
|
+
details {
|
|
42
|
+
display: block !important;
|
|
43
|
+
}
|
|
44
|
+
details > summary {
|
|
45
|
+
display: none !important;
|
|
46
|
+
}
|
|
47
|
+
details > *:not(summary) {
|
|
48
|
+
display: block !important;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
52
|
+
</head>
|
|
53
|
+
<body class="min-h-screen bg-gradient-to-b from-slate-50 to-white text-slate-800 antialiased">
|
|
54
|
+
<main class="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
|
|
55
|
+
<!-- 叙事头：对客一句话 -->
|
|
56
|
+
<header class="mb-10 text-center">
|
|
57
|
+
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
|
|
58
|
+
Siluzan 投放洞察
|
|
59
|
+
</p>
|
|
60
|
+
<h1
|
|
61
|
+
class="mt-3 text-3xl font-extrabold leading-tight tracking-tight text-slate-900 sm:text-4xl"
|
|
62
|
+
>
|
|
63
|
+
数据报告标题
|
|
64
|
+
</h1>
|
|
65
|
+
<p class="mx-auto mt-4 max-w-xl text-lg text-slate-600">
|
|
66
|
+
本期投放<strong class="text-slate-900">效率提升、转化成本可控</strong
|
|
67
|
+
>；以下为核心数字与趋势，详情可展开各模块。
|
|
68
|
+
</p>
|
|
69
|
+
<div class="mt-6 flex flex-wrap justify-center gap-3 text-sm text-slate-600">
|
|
70
|
+
<span class="rounded-full bg-white px-4 py-2 shadow ring-1 ring-slate-200">
|
|
71
|
+
<i class="fa-regular fa-building mr-1.5 text-slate-400" aria-hidden="true"></i>
|
|
72
|
+
<strong id="accountName" class="text-slate-900">示例账户</strong>
|
|
73
|
+
</span>
|
|
74
|
+
<span class="rounded-full bg-white px-4 py-2 shadow ring-1 ring-slate-200">
|
|
75
|
+
<i class="fa-regular fa-calendar mr-1.5 text-slate-400" aria-hidden="true"></i>
|
|
76
|
+
<strong id="reportPeriod" class="tabular-nums text-slate-900"
|
|
77
|
+
>2026-03-01 ~ 2026-03-07</strong
|
|
78
|
+
>
|
|
79
|
+
</span>
|
|
80
|
+
</div>
|
|
81
|
+
</header>
|
|
60
82
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
83
|
+
<aside
|
|
84
|
+
class="no-print mb-8 rounded-2xl border border-amber-200/80 bg-amber-50/90 p-4 text-center text-sm text-amber-950"
|
|
85
|
+
>
|
|
86
|
+
<i class="fa-solid fa-lightbulb mr-1 text-amber-600" aria-hidden="true"></i>
|
|
87
|
+
BingV2 等口径限制请见下方「附录模块」展开说明。
|
|
88
|
+
</aside>
|
|
65
89
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
90
|
+
<!-- §1 全宽展示：主 KPI + 主图 -->
|
|
91
|
+
<section class="mb-8" data-section-id="section-executive-summary">
|
|
92
|
+
<h2 class="sr-only">执行摘要 · 核心指标</h2>
|
|
93
|
+
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
94
|
+
<div class="rounded-2xl bg-brand-600 p-4 text-white shadow-lg shadow-brand-600/25">
|
|
95
|
+
<p class="text-xs font-medium opacity-90">消耗</p>
|
|
96
|
+
<p id="spendValue" class="mt-1 text-2xl font-bold tabular-nums sm:text-3xl">¥12,580</p>
|
|
97
|
+
<p id="spendPct" class="mt-2 text-xs opacity-90">↑ 环比 +8.2%</p>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
100
|
+
<p class="text-xs font-medium text-slate-500">展示</p>
|
|
101
|
+
<p id="impressionsValue" class="mt-1 text-2xl font-bold tabular-nums text-slate-900">
|
|
102
|
+
1.24M
|
|
103
|
+
</p>
|
|
104
|
+
<p id="impressionsPct" class="mt-2 text-xs text-slate-500">↓ −2.1%</p>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
107
|
+
<p class="text-xs font-medium text-slate-500">点击</p>
|
|
108
|
+
<p id="clicksValue" class="mt-1 text-2xl font-bold tabular-nums text-slate-900">
|
|
109
|
+
18,420
|
|
110
|
+
</p>
|
|
111
|
+
<p id="clicksPct" class="mt-2 text-xs text-slate-500">CTR 1.49%</p>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
114
|
+
<p class="text-xs font-medium text-slate-500">转化</p>
|
|
115
|
+
<p class="mt-1 text-2xl font-bold tabular-nums text-slate-900">312</p>
|
|
116
|
+
<p class="mt-2 text-xs text-slate-500">CPA ¥40.3</p>
|
|
117
|
+
</div>
|
|
84
118
|
</div>
|
|
85
|
-
<div
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<p class="
|
|
119
|
+
<div
|
|
120
|
+
class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
|
|
121
|
+
>
|
|
122
|
+
<p class="mb-2 text-center text-sm font-semibold text-slate-700">关键指标趋势</p>
|
|
123
|
+
<div
|
|
124
|
+
id="trendChart"
|
|
125
|
+
class="h-64 w-full min-h-[220px] sm:h-72"
|
|
126
|
+
role="img"
|
|
127
|
+
aria-label="趋势图"
|
|
128
|
+
></div>
|
|
89
129
|
</div>
|
|
90
|
-
</
|
|
91
|
-
<div class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
92
|
-
<p class="mb-2 text-center text-sm font-semibold text-slate-700">关键指标趋势</p>
|
|
93
|
-
<div id="trendChart" class="h-64 w-full min-h-[220px] sm:h-72" role="img" aria-label="趋势图"></div>
|
|
94
|
-
</div>
|
|
95
|
-
</section>
|
|
130
|
+
</section>
|
|
96
131
|
|
|
97
|
-
|
|
132
|
+
<p class="no-print mb-4 text-center text-xs text-slate-500">
|
|
133
|
+
以下为结构化附录，点击标题展开（打印时全部展开）。
|
|
134
|
+
</p>
|
|
98
135
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
136
|
+
<details
|
|
137
|
+
class="group mb-3 rounded-2xl border border-slate-200 bg-white open:shadow-md"
|
|
138
|
+
data-section-id="section-kpi-funnel"
|
|
139
|
+
>
|
|
140
|
+
<summary
|
|
141
|
+
class="flex cursor-pointer items-center justify-between px-4 py-3.5 text-left font-semibold text-slate-800 hover:bg-slate-50"
|
|
142
|
+
>
|
|
143
|
+
<span
|
|
144
|
+
><span
|
|
145
|
+
class="mr-2 inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-800 text-xs text-white"
|
|
146
|
+
>2</span
|
|
147
|
+
>漏斗式概览</span
|
|
148
|
+
>
|
|
149
|
+
<i
|
|
150
|
+
class="fa-solid fa-chevron-down text-slate-400 transition group-open:rotate-180"
|
|
151
|
+
aria-hidden="true"
|
|
152
|
+
></i>
|
|
153
|
+
</summary>
|
|
154
|
+
<div class="border-t border-slate-100 px-4 pb-4 pt-3">
|
|
155
|
+
<div class="overflow-x-auto rounded-lg border border-slate-200">
|
|
156
|
+
<table class="min-w-full text-sm">
|
|
157
|
+
<thead class="bg-slate-50">
|
|
158
|
+
<tr>
|
|
159
|
+
<th class="px-3 py-2 text-left font-semibold">步骤</th>
|
|
160
|
+
<th class="px-3 py-2 text-left font-semibold">指标</th>
|
|
161
|
+
<th class="px-3 py-2 text-right font-semibold">数值</th>
|
|
162
|
+
<th class="px-3 py-2 text-left font-semibold">附注</th>
|
|
163
|
+
</tr>
|
|
164
|
+
</thead>
|
|
165
|
+
<tbody class="divide-y divide-slate-100">
|
|
166
|
+
<tr>
|
|
167
|
+
<td class="px-3 py-2 font-medium text-brand-600">1</td>
|
|
168
|
+
<td class="px-3 py-2">消耗</td>
|
|
169
|
+
<td class="px-3 py-2 text-right tabular-nums font-semibold">¥12,580</td>
|
|
170
|
+
<td class="px-3 py-2 text-slate-500">—</td>
|
|
171
|
+
</tr>
|
|
172
|
+
<tr>
|
|
173
|
+
<td class="px-3 py-2 font-medium text-brand-600">2</td>
|
|
174
|
+
<td class="px-3 py-2">展示</td>
|
|
175
|
+
<td class="px-3 py-2 text-right tabular-nums font-semibold">1,240,000</td>
|
|
176
|
+
<td class="px-3 py-2 text-slate-500">—</td>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td class="px-3 py-2 font-medium text-brand-600">3</td>
|
|
180
|
+
<td class="px-3 py-2">点击</td>
|
|
181
|
+
<td class="px-3 py-2 text-right tabular-nums font-semibold">18,420</td>
|
|
182
|
+
<td class="px-3 py-2 text-slate-500">CTR 1.49%</td>
|
|
183
|
+
</tr>
|
|
184
|
+
<tr>
|
|
185
|
+
<td class="px-3 py-2 font-medium text-brand-600">4</td>
|
|
186
|
+
<td class="px-3 py-2">转化</td>
|
|
187
|
+
<td class="px-3 py-2 text-right tabular-nums font-semibold">312</td>
|
|
188
|
+
<td class="px-3 py-2 text-slate-500">—</td>
|
|
189
|
+
</tr>
|
|
190
|
+
</tbody>
|
|
191
|
+
</table>
|
|
192
|
+
</div>
|
|
120
193
|
</div>
|
|
121
|
-
</
|
|
122
|
-
</details>
|
|
194
|
+
</details>
|
|
123
195
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
196
|
+
<details
|
|
197
|
+
class="group mb-3 rounded-2xl border border-slate-200 bg-white open:shadow-md"
|
|
198
|
+
data-section-id="section-structure-breakdown"
|
|
199
|
+
>
|
|
200
|
+
<summary
|
|
201
|
+
class="flex cursor-pointer items-center justify-between px-4 py-3.5 font-semibold text-slate-800 hover:bg-slate-50"
|
|
202
|
+
>
|
|
203
|
+
<span
|
|
204
|
+
><span
|
|
205
|
+
class="mr-2 inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-800 text-xs text-white"
|
|
206
|
+
>3</span
|
|
207
|
+
>账户结构 & 分布</span
|
|
208
|
+
>
|
|
209
|
+
<i
|
|
210
|
+
class="fa-solid fa-chevron-down text-slate-400 transition group-open:rotate-180"
|
|
211
|
+
aria-hidden="true"
|
|
212
|
+
></i>
|
|
213
|
+
</summary>
|
|
214
|
+
<div class="border-t border-slate-100 px-4 pb-4 pt-3">
|
|
215
|
+
<div class="grid gap-4 lg:grid-cols-2">
|
|
216
|
+
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
|
217
|
+
<div class="rounded-lg border border-slate-200 p-2 text-center text-sm">
|
|
218
|
+
<p class="text-lg font-bold text-brand-700">42</p>
|
|
219
|
+
<p class="text-xs text-slate-500">系列</p>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="rounded-lg border border-slate-200 p-2 text-center text-sm">
|
|
222
|
+
<p class="text-lg font-bold text-brand-700">128</p>
|
|
223
|
+
<p class="text-xs text-slate-500">组</p>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="rounded-lg border border-slate-200 p-2 text-center text-sm">
|
|
226
|
+
<p class="text-lg font-bold text-brand-700">3.2k</p>
|
|
227
|
+
<p class="text-xs text-slate-500">词</p>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="rounded-lg border border-slate-200 p-2 text-center text-sm">
|
|
230
|
+
<p class="text-lg font-bold text-brand-700">860</p>
|
|
231
|
+
<p class="text-xs text-slate-500">广告</p>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="rounded-lg border border-slate-200 p-2 text-center text-sm">
|
|
234
|
+
<p class="text-lg font-bold text-brand-700">12</p>
|
|
235
|
+
<p class="text-xs text-slate-500">国家</p>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="rounded-lg border border-slate-200 p-2 text-center text-sm">
|
|
238
|
+
<p class="text-lg font-bold text-brand-700">24</p>
|
|
239
|
+
<p class="text-xs text-slate-500">链接</p>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="rounded-lg border border-slate-200 p-3">
|
|
243
|
+
<div id="breakdownChart" class="h-56 w-full" role="img" aria-label="饼图"></div>
|
|
244
|
+
</div>
|
|
141
245
|
</div>
|
|
142
246
|
</div>
|
|
143
|
-
</
|
|
144
|
-
</details>
|
|
247
|
+
</details>
|
|
145
248
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
249
|
+
<details
|
|
250
|
+
class="group mb-3 rounded-2xl border border-slate-200 bg-white open:shadow-md"
|
|
251
|
+
data-section-id="section-diagnosis-pros-cons"
|
|
252
|
+
>
|
|
253
|
+
<summary
|
|
254
|
+
class="flex cursor-pointer items-center justify-between px-4 py-3.5 font-semibold text-slate-800 hover:bg-slate-50"
|
|
255
|
+
>
|
|
256
|
+
<span
|
|
257
|
+
><span
|
|
258
|
+
class="mr-2 inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-800 text-xs text-white"
|
|
259
|
+
>4</span
|
|
260
|
+
>诊断：优势与不足</span
|
|
261
|
+
>
|
|
262
|
+
<i
|
|
263
|
+
class="fa-solid fa-chevron-down text-slate-400 transition group-open:rotate-180"
|
|
264
|
+
aria-hidden="true"
|
|
265
|
+
></i>
|
|
266
|
+
</summary>
|
|
267
|
+
<div class="border-t border-slate-100 px-4 pb-4 pt-3">
|
|
268
|
+
<div class="grid gap-3 sm:grid-cols-2">
|
|
269
|
+
<div class="rounded-xl border border-emerald-200 bg-emerald-50/60 p-3 text-sm">
|
|
270
|
+
<p class="font-bold text-emerald-800">优势</p>
|
|
271
|
+
<ul class="mt-2 list-disc space-y-1 pl-4 text-emerald-950">
|
|
272
|
+
<li>CPA 低于均值</li>
|
|
273
|
+
<li>头部词 CVR 提升</li>
|
|
274
|
+
</ul>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="rounded-xl border border-amber-200 bg-amber-50/60 p-3 text-sm">
|
|
277
|
+
<p class="font-bold text-amber-900">不足</p>
|
|
278
|
+
<ul class="mt-2 list-disc space-y-1 pl-4 text-amber-950">
|
|
279
|
+
<li>展示份额下滑</li>
|
|
280
|
+
<li>否词待补充</li>
|
|
281
|
+
</ul>
|
|
282
|
+
</div>
|
|
166
283
|
</div>
|
|
167
284
|
</div>
|
|
168
|
-
</
|
|
169
|
-
</details>
|
|
285
|
+
</details>
|
|
170
286
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
<
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
287
|
+
<details
|
|
288
|
+
class="group mb-3 rounded-2xl border border-slate-200 bg-white open:shadow-md"
|
|
289
|
+
data-section-id="section-data-table"
|
|
290
|
+
>
|
|
291
|
+
<summary
|
|
292
|
+
class="flex cursor-pointer items-center justify-between px-4 py-3.5 font-semibold text-slate-800 hover:bg-slate-50"
|
|
293
|
+
>
|
|
294
|
+
<span
|
|
295
|
+
><span
|
|
296
|
+
class="mr-2 inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-800 text-xs text-white"
|
|
297
|
+
>5</span
|
|
298
|
+
>明细表（系列 / 关键词）</span
|
|
299
|
+
>
|
|
300
|
+
<i
|
|
301
|
+
class="fa-solid fa-chevron-down text-slate-400 transition group-open:rotate-180"
|
|
302
|
+
aria-hidden="true"
|
|
303
|
+
></i>
|
|
304
|
+
</summary>
|
|
305
|
+
<div class="border-t border-slate-100 px-4 pb-4 pt-3">
|
|
306
|
+
<div class="overflow-x-auto rounded-lg border border-slate-200">
|
|
307
|
+
<table class="min-w-[560px] w-full text-sm">
|
|
308
|
+
<thead class="bg-slate-50">
|
|
309
|
+
<tr>
|
|
310
|
+
<th class="px-3 py-2 text-left font-semibold">系列</th>
|
|
311
|
+
<th class="px-3 py-2 font-semibold">花费</th>
|
|
312
|
+
<th class="px-3 py-2 font-semibold">点击</th>
|
|
313
|
+
<th class="px-3 py-2 font-semibold">转化</th>
|
|
314
|
+
<th class="px-3 py-2 font-semibold">CVR</th>
|
|
315
|
+
<th class="px-3 py-2 font-semibold">环比</th>
|
|
316
|
+
</tr>
|
|
317
|
+
</thead>
|
|
318
|
+
<tbody class="divide-y divide-slate-100">
|
|
319
|
+
<tr>
|
|
320
|
+
<td class="px-3 py-2 font-medium">品牌-搜索</td>
|
|
321
|
+
<td class="px-3 py-2 tabular-nums">¥4,200</td>
|
|
322
|
+
<td class="px-3 py-2 tabular-nums">2,100</td>
|
|
323
|
+
<td class="px-3 py-2 tabular-nums">98</td>
|
|
324
|
+
<td class="px-3 py-2 tabular-nums">4.7%</td>
|
|
325
|
+
<td class="px-3 py-2 text-emerald-600">+5%</td>
|
|
326
|
+
</tr>
|
|
327
|
+
<tr>
|
|
328
|
+
<td class="px-3 py-2 font-medium">通用-搜索</td>
|
|
329
|
+
<td class="px-3 py-2 tabular-nums">¥8,380</td>
|
|
330
|
+
<td class="px-3 py-2 tabular-nums">16,320</td>
|
|
331
|
+
<td class="px-3 py-2 tabular-nums">214</td>
|
|
332
|
+
<td class="px-3 py-2 tabular-nums">1.3%</td>
|
|
333
|
+
<td class="px-3 py-2 text-rose-600">−3%</td>
|
|
334
|
+
</tr>
|
|
335
|
+
</tbody>
|
|
336
|
+
</table>
|
|
337
|
+
</div>
|
|
192
338
|
</div>
|
|
193
|
-
</
|
|
194
|
-
</details>
|
|
339
|
+
</details>
|
|
195
340
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
<
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
341
|
+
<details
|
|
342
|
+
class="group mb-8 rounded-2xl border border-slate-200 bg-white open:shadow-md"
|
|
343
|
+
data-section-id="section-benchmark"
|
|
344
|
+
>
|
|
345
|
+
<summary
|
|
346
|
+
class="flex cursor-pointer items-center justify-between px-4 py-3.5 font-semibold text-slate-800 hover:bg-slate-50"
|
|
347
|
+
>
|
|
348
|
+
<span
|
|
349
|
+
><span
|
|
350
|
+
class="mr-2 inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-800 text-xs text-white"
|
|
351
|
+
>6</span
|
|
352
|
+
>指标 vs 行业基准</span
|
|
353
|
+
>
|
|
354
|
+
<i
|
|
355
|
+
class="fa-solid fa-chevron-down text-slate-400 transition group-open:rotate-180"
|
|
356
|
+
aria-hidden="true"
|
|
357
|
+
></i>
|
|
358
|
+
</summary>
|
|
359
|
+
<div class="border-t border-slate-100 px-4 pb-4 pt-3">
|
|
360
|
+
<div class="overflow-x-auto rounded-lg border border-slate-200">
|
|
361
|
+
<table class="min-w-full text-sm">
|
|
362
|
+
<thead class="bg-slate-50">
|
|
363
|
+
<tr>
|
|
364
|
+
<th class="px-3 py-2 text-left font-semibold">指标</th>
|
|
365
|
+
<th class="px-3 py-2 text-right font-semibold">数据</th>
|
|
366
|
+
<th class="px-3 py-2 text-right font-semibold">基准</th>
|
|
367
|
+
<th class="px-3 py-2 text-left font-semibold">状态</th>
|
|
368
|
+
</tr>
|
|
369
|
+
</thead>
|
|
370
|
+
<tbody class="divide-y divide-slate-100">
|
|
371
|
+
<tr>
|
|
372
|
+
<td class="px-3 py-2">CTR</td>
|
|
373
|
+
<td class="px-3 py-2 text-right tabular-nums font-medium">1.49%</td>
|
|
374
|
+
<td class="px-3 py-2 text-right tabular-nums text-slate-500">1.2%</td>
|
|
375
|
+
<td class="px-3 py-2">
|
|
376
|
+
<span
|
|
377
|
+
class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-800"
|
|
378
|
+
>优于基准</span
|
|
379
|
+
>
|
|
380
|
+
</td>
|
|
381
|
+
</tr>
|
|
382
|
+
<tr>
|
|
383
|
+
<td class="px-3 py-2">CPA</td>
|
|
384
|
+
<td class="px-3 py-2 text-right tabular-nums font-medium">¥40.3</td>
|
|
385
|
+
<td class="px-3 py-2 text-right tabular-nums text-slate-500">¥45.0</td>
|
|
386
|
+
<td class="px-3 py-2">
|
|
387
|
+
<span
|
|
388
|
+
class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-800"
|
|
389
|
+
>优于基准</span
|
|
390
|
+
>
|
|
391
|
+
</td>
|
|
392
|
+
</tr>
|
|
393
|
+
</tbody>
|
|
394
|
+
</table>
|
|
395
|
+
</div>
|
|
215
396
|
</div>
|
|
216
|
-
</
|
|
217
|
-
</details>
|
|
397
|
+
</details>
|
|
218
398
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
399
|
+
<details class="no-print mb-6 rounded-2xl border border-amber-200 bg-amber-50/80">
|
|
400
|
+
<summary class="cursor-pointer px-4 py-3 text-sm font-semibold text-amber-950">
|
|
401
|
+
数据口径全文（Bing 等）
|
|
402
|
+
</summary>
|
|
403
|
+
<div class="border-t border-amber-200/80 px-4 py-3 text-sm text-amber-950">
|
|
404
|
+
若报告涉及 BingV2，统计区间不可包含今天或昨天；以接口与 CLI 说明为准。
|
|
405
|
+
</div>
|
|
406
|
+
</details>
|
|
225
407
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
408
|
+
<footer class="text-center text-xs text-slate-500">
|
|
409
|
+
<p>单页精华版式参考 · 主屏讲结论，附录可折叠。</p>
|
|
410
|
+
</footer>
|
|
411
|
+
</main>
|
|
230
412
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
413
|
+
<script>
|
|
414
|
+
(function () {
|
|
415
|
+
var trendEl = document.getElementById("trendChart");
|
|
416
|
+
var pieEl = document.getElementById("breakdownChart");
|
|
417
|
+
if (!trendEl || !pieEl || typeof echarts === "undefined") return;
|
|
236
418
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
419
|
+
var trendChart = echarts.init(trendEl, null, { renderer: "canvas" });
|
|
420
|
+
trendChart.setOption({
|
|
421
|
+
color: ["#2563eb", "#ea580c"],
|
|
422
|
+
tooltip: { trigger: "axis" },
|
|
423
|
+
legend: { data: ["消耗(百元)", "点击(百次)"], top: 0 },
|
|
424
|
+
grid: { left: "2%", right: "2%", bottom: "2%", top: 40, containLabel: true },
|
|
425
|
+
xAxis: {
|
|
426
|
+
type: "category",
|
|
427
|
+
boundaryGap: false,
|
|
428
|
+
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
|
|
429
|
+
},
|
|
430
|
+
yAxis: { type: "value", splitLine: { lineStyle: { type: "dashed", color: "#e2e8f0" } } },
|
|
431
|
+
series: [
|
|
432
|
+
{
|
|
433
|
+
name: "消耗(百元)",
|
|
434
|
+
type: "line",
|
|
435
|
+
smooth: 0.35,
|
|
436
|
+
areaStyle: { opacity: 0.12 },
|
|
437
|
+
data: [200, 250, 220, 300, 280, 320, 310],
|
|
438
|
+
},
|
|
439
|
+
{
|
|
440
|
+
name: "点击(百次)",
|
|
441
|
+
type: "line",
|
|
442
|
+
smooth: 0.35,
|
|
443
|
+
areaStyle: { opacity: 0.08 },
|
|
444
|
+
data: [33, 48, 45, 60, 52, 68, 61],
|
|
445
|
+
},
|
|
446
|
+
],
|
|
447
|
+
});
|
|
250
448
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
449
|
+
var breakdownChart = echarts.init(pieEl, null, { renderer: "canvas" });
|
|
450
|
+
breakdownChart.setOption({
|
|
451
|
+
tooltip: { trigger: "item" },
|
|
452
|
+
legend: { orient: "vertical", left: "left", top: "middle" },
|
|
453
|
+
series: [
|
|
454
|
+
{
|
|
455
|
+
name: "设备",
|
|
456
|
+
type: "pie",
|
|
457
|
+
radius: ["38%", "62%"],
|
|
458
|
+
center: ["58%", "50%"],
|
|
459
|
+
itemStyle: { borderRadius: 4, borderColor: "#fff", borderWidth: 2 },
|
|
460
|
+
label: { formatter: "{b}\n{d}%" },
|
|
461
|
+
data: [
|
|
462
|
+
{ value: 52, name: "移动端" },
|
|
463
|
+
{ value: 35, name: "桌面" },
|
|
464
|
+
{ value: 13, name: "平板" },
|
|
465
|
+
],
|
|
466
|
+
},
|
|
467
|
+
],
|
|
468
|
+
});
|
|
262
469
|
|
|
263
|
-
|
|
264
|
-
|
|
470
|
+
function resize() {
|
|
471
|
+
trendChart.resize();
|
|
472
|
+
breakdownChart.resize();
|
|
473
|
+
}
|
|
474
|
+
window.addEventListener("resize", resize);
|
|
265
475
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
476
|
+
document.querySelectorAll("details[data-section-id]").forEach(function (el) {
|
|
477
|
+
el.addEventListener("toggle", function () {
|
|
478
|
+
if (el.open) {
|
|
479
|
+
requestAnimationFrame(function () {
|
|
480
|
+
resize();
|
|
481
|
+
});
|
|
482
|
+
}
|
|
483
|
+
});
|
|
271
484
|
});
|
|
272
|
-
});
|
|
273
|
-
|
|
274
|
-
</
|
|
275
|
-
</body>
|
|
485
|
+
})();
|
|
486
|
+
</script>
|
|
487
|
+
</body>
|
|
276
488
|
</html>
|