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
|
风格：演示 / 深色屏显（会议室投屏、深色控制台并列）
|
|
4
4
|
与 report-template.html 的 data-section-id 一致。另见 README 中其它模板。
|
|
@@ -7,281 +7,464 @@
|
|
|
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
|
-
|
|
21
|
-
|
|
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
|
+
darkMode: "class",
|
|
18
|
+
theme: {
|
|
19
|
+
extend: {
|
|
20
|
+
colors: {
|
|
21
|
+
deck: { bg: "#09090b", card: "#18181b", line: "#27272a", muted: "#a1a1aa" },
|
|
22
|
+
},
|
|
22
23
|
},
|
|
23
24
|
},
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
25
|
+
};
|
|
26
|
+
</script>
|
|
27
|
+
<link
|
|
28
|
+
rel="stylesheet"
|
|
29
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
30
|
+
crossorigin="anonymous"
|
|
31
|
+
referrerpolicy="no-referrer"
|
|
32
|
+
/>
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
|
34
|
+
<style>
|
|
35
|
+
@media print {
|
|
36
|
+
body {
|
|
37
|
+
background: #fff !important;
|
|
38
|
+
color: #000 !important;
|
|
39
|
+
}
|
|
40
|
+
.no-print {
|
|
41
|
+
display: none !important;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
</head>
|
|
46
|
+
<body class="min-h-screen bg-zinc-950 text-zinc-100 antialiased">
|
|
47
|
+
<main class="mx-auto max-w-6xl px-5 py-10 sm:px-8 sm:py-14">
|
|
48
|
+
<header class="mb-12 border-b border-zinc-700 pb-8">
|
|
49
|
+
<div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
50
|
+
<div>
|
|
51
|
+
<p class="text-xs font-semibold uppercase tracking-[0.25em] text-cyan-400/90">
|
|
52
|
+
Siluzan · 投放分析
|
|
53
|
+
</p>
|
|
54
|
+
<h1 class="mt-3 text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
|
|
55
|
+
<i class="fa-solid fa-display mr-3 text-cyan-400" aria-hidden="true"></i>
|
|
56
|
+
数据报告标题
|
|
57
|
+
</h1>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:gap-3">
|
|
60
|
+
<span
|
|
61
|
+
class="inline-flex items-center rounded-lg border border-zinc-600 bg-zinc-900/80 px-4 py-2.5 text-sm text-zinc-300"
|
|
62
|
+
>
|
|
63
|
+
<i class="fa-regular fa-building mr-2 text-zinc-500" aria-hidden="true"></i>
|
|
64
|
+
账户 <strong id="accountName" class="ml-2 text-white">示例账户</strong>
|
|
65
|
+
</span>
|
|
66
|
+
<span
|
|
67
|
+
class="inline-flex items-center rounded-lg border border-zinc-600 bg-zinc-900/80 px-4 py-2.5 text-sm text-zinc-300"
|
|
68
|
+
>
|
|
69
|
+
<i class="fa-regular fa-calendar mr-2 text-zinc-500" aria-hidden="true"></i>
|
|
70
|
+
区间
|
|
71
|
+
<strong id="reportPeriod" class="ml-2 tabular-nums text-white"
|
|
72
|
+
>2026-03-01 ~ 2026-03-07</strong
|
|
73
|
+
>
|
|
74
|
+
</span>
|
|
75
|
+
</div>
|
|
46
76
|
</div>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
77
|
+
</header>
|
|
78
|
+
|
|
79
|
+
<aside
|
|
80
|
+
class="no-print mb-10 rounded-xl border border-amber-500/40 bg-amber-950/40 p-5 text-sm text-amber-100/95"
|
|
81
|
+
>
|
|
82
|
+
<p class="flex items-center gap-2 font-bold text-amber-200">
|
|
83
|
+
<i class="fa-solid fa-circle-info text-amber-400" aria-hidden="true"></i>
|
|
84
|
+
数据口径提示（示例）
|
|
85
|
+
</p>
|
|
86
|
+
<p class="mt-2 pl-7 text-amber-100/80">BingV2 区间不可含今天/昨天；以接口与 CLI 为准。</p>
|
|
87
|
+
</aside>
|
|
88
|
+
|
|
89
|
+
<section class="mb-14" data-section-id="section-executive-summary">
|
|
90
|
+
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
91
|
+
<span
|
|
92
|
+
class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950"
|
|
93
|
+
>1</span
|
|
94
|
+
>
|
|
95
|
+
执行摘要 · 核心指标
|
|
96
|
+
</h2>
|
|
97
|
+
<p class="mb-6 text-base text-zinc-400">大屏阅读：字号与留白加大；图表用高对比配色。</p>
|
|
98
|
+
|
|
99
|
+
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
|
100
|
+
<article class="rounded-2xl border border-zinc-700 bg-zinc-900/60 p-5 backdrop-blur-sm">
|
|
101
|
+
<div class="flex items-center justify-between text-zinc-500">
|
|
102
|
+
<span class="text-sm font-medium">消耗</span>
|
|
103
|
+
<i class="fa-solid fa-coins text-cyan-400/90" aria-hidden="true"></i>
|
|
104
|
+
</div>
|
|
105
|
+
<p id="spendValue" class="mt-3 text-2xl font-bold tabular-nums text-white sm:text-3xl">
|
|
106
|
+
¥12,580
|
|
107
|
+
</p>
|
|
108
|
+
<p id="spendPct" class="mt-2 text-sm text-emerald-400">
|
|
109
|
+
<i class="fa-solid fa-arrow-trend-up mr-1" aria-hidden="true"></i>环比 +8.2%
|
|
110
|
+
</p>
|
|
111
|
+
</article>
|
|
112
|
+
<article class="rounded-2xl border border-zinc-700 bg-zinc-900/60 p-5">
|
|
113
|
+
<div class="flex items-center justify-between text-zinc-500">
|
|
114
|
+
<span class="text-sm font-medium">展示</span>
|
|
115
|
+
<i class="fa-regular fa-eye text-zinc-400" aria-hidden="true"></i>
|
|
116
|
+
</div>
|
|
117
|
+
<p
|
|
118
|
+
id="impressionsValue"
|
|
119
|
+
class="mt-3 text-2xl font-bold tabular-nums text-white sm:text-3xl"
|
|
120
|
+
>
|
|
121
|
+
1.24M
|
|
122
|
+
</p>
|
|
123
|
+
<p id="impressionsPct" class="mt-2 text-sm text-rose-400">环比 −2.1%</p>
|
|
124
|
+
</article>
|
|
125
|
+
<article class="rounded-2xl border border-zinc-700 bg-zinc-900/60 p-5">
|
|
126
|
+
<div class="flex items-center justify-between text-zinc-500">
|
|
127
|
+
<span class="text-sm font-medium">点击</span>
|
|
128
|
+
<i class="fa-solid fa-computer-mouse text-zinc-400" aria-hidden="true"></i>
|
|
129
|
+
</div>
|
|
130
|
+
<p id="clicksValue" class="mt-3 text-2xl font-bold tabular-nums text-white sm:text-3xl">
|
|
131
|
+
18,420
|
|
132
|
+
</p>
|
|
133
|
+
<p id="clicksPct" class="mt-2 text-sm text-zinc-400">
|
|
134
|
+
CTR <span class="font-semibold text-white">1.49%</span>
|
|
135
|
+
</p>
|
|
136
|
+
</article>
|
|
137
|
+
<article class="rounded-2xl border border-zinc-700 bg-zinc-900/60 p-5">
|
|
138
|
+
<div class="flex items-center justify-between text-zinc-500">
|
|
139
|
+
<span class="text-sm font-medium">转化</span>
|
|
140
|
+
<i class="fa-solid fa-bullseye text-violet-400" aria-hidden="true"></i>
|
|
141
|
+
</div>
|
|
142
|
+
<p class="mt-3 text-2xl font-bold tabular-nums text-white sm:text-3xl">312</p>
|
|
143
|
+
<p class="mt-2 text-sm text-zinc-400">
|
|
144
|
+
CPA <span class="font-semibold text-white">¥40.3</span>
|
|
145
|
+
</p>
|
|
146
|
+
</article>
|
|
56
147
|
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</header>
|
|
59
148
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
149
|
+
<div class="mt-8 rounded-2xl border border-zinc-700 bg-zinc-900/40 p-5 sm:p-6">
|
|
150
|
+
<h3 class="mb-4 text-lg font-semibold text-zinc-200">
|
|
151
|
+
<i class="fa-solid fa-chart-line mr-2 text-cyan-400" aria-hidden="true"></i>
|
|
152
|
+
关键指标趋势
|
|
153
|
+
</h3>
|
|
154
|
+
<div
|
|
155
|
+
id="trendChart"
|
|
156
|
+
class="h-80 w-full min-h-[280px]"
|
|
157
|
+
role="img"
|
|
158
|
+
aria-label="趋势图"
|
|
159
|
+
></div>
|
|
160
|
+
</div>
|
|
161
|
+
</section>
|
|
67
162
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
163
|
+
<section class="mb-14" data-section-id="section-kpi-funnel">
|
|
164
|
+
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
165
|
+
<span
|
|
166
|
+
class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950"
|
|
167
|
+
>2</span
|
|
168
|
+
>
|
|
169
|
+
漏斗式概览
|
|
170
|
+
</h2>
|
|
171
|
+
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900/50">
|
|
172
|
+
<table class="min-w-full divide-y divide-zinc-700 text-base">
|
|
173
|
+
<thead class="bg-zinc-800/80">
|
|
174
|
+
<tr>
|
|
175
|
+
<th class="px-4 py-4 text-left font-semibold text-zinc-200">步骤</th>
|
|
176
|
+
<th class="px-4 py-4 text-left font-semibold text-zinc-200">指标</th>
|
|
177
|
+
<th class="px-4 py-4 text-right font-semibold text-zinc-200">数值</th>
|
|
178
|
+
<th class="px-4 py-4 text-left font-semibold text-zinc-200">附注</th>
|
|
179
|
+
</tr>
|
|
180
|
+
</thead>
|
|
181
|
+
<tbody class="divide-y divide-zinc-800 text-zinc-300">
|
|
182
|
+
<tr>
|
|
183
|
+
<td class="px-4 py-3 font-medium text-cyan-400">1</td>
|
|
184
|
+
<td class="px-4 py-3">消耗 (Cost)</td>
|
|
185
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-white">¥12,580</td>
|
|
186
|
+
<td class="px-4 py-3 text-zinc-500">—</td>
|
|
187
|
+
</tr>
|
|
188
|
+
<tr>
|
|
189
|
+
<td class="px-4 py-3 font-medium text-cyan-400">2</td>
|
|
190
|
+
<td class="px-4 py-3">展示次数</td>
|
|
191
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-white">
|
|
192
|
+
1,240,000
|
|
193
|
+
</td>
|
|
194
|
+
<td class="px-4 py-3 text-zinc-500">—</td>
|
|
195
|
+
</tr>
|
|
196
|
+
<tr>
|
|
197
|
+
<td class="px-4 py-3 font-medium text-cyan-400">3</td>
|
|
198
|
+
<td class="px-4 py-3">点击次数</td>
|
|
199
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-white">18,420</td>
|
|
200
|
+
<td class="px-4 py-3 text-zinc-500">CTR 1.49%</td>
|
|
201
|
+
</tr>
|
|
202
|
+
<tr>
|
|
203
|
+
<td class="px-4 py-3 font-medium text-cyan-400">4</td>
|
|
204
|
+
<td class="px-4 py-3">转化次数</td>
|
|
205
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-white">312</td>
|
|
206
|
+
<td class="px-4 py-3 text-zinc-500">CVR —</td>
|
|
207
|
+
</tr>
|
|
208
|
+
</tbody>
|
|
209
|
+
</table>
|
|
210
|
+
</div>
|
|
211
|
+
</section>
|
|
74
212
|
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
213
|
+
<section class="mb-14" data-section-id="section-structure-breakdown">
|
|
214
|
+
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
215
|
+
<span
|
|
216
|
+
class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950"
|
|
217
|
+
>3</span
|
|
218
|
+
>
|
|
219
|
+
账户结构 & 分布
|
|
220
|
+
</h2>
|
|
221
|
+
<div class="grid gap-8 lg:grid-cols-2">
|
|
222
|
+
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
|
223
|
+
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center">
|
|
224
|
+
<p class="text-2xl font-bold text-cyan-400">42</p>
|
|
225
|
+
<p class="text-sm text-zinc-500">有效系列</p>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center">
|
|
228
|
+
<p class="text-2xl font-bold text-cyan-400">128</p>
|
|
229
|
+
<p class="text-sm text-zinc-500">广告组</p>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center">
|
|
232
|
+
<p class="text-2xl font-bold text-cyan-400">3.2k</p>
|
|
233
|
+
<p class="text-sm text-zinc-500">关键字</p>
|
|
234
|
+
</div>
|
|
235
|
+
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center">
|
|
236
|
+
<p class="text-2xl font-bold text-cyan-400">860</p>
|
|
237
|
+
<p class="text-sm text-zinc-500">广告</p>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center">
|
|
240
|
+
<p class="text-2xl font-bold text-cyan-400">12</p>
|
|
241
|
+
<p class="text-sm text-zinc-500">国家</p>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center">
|
|
244
|
+
<p class="text-2xl font-bold text-cyan-400">24</p>
|
|
245
|
+
<p class="text-sm text-zinc-500">附加链接</p>
|
|
246
|
+
</div>
|
|
80
247
|
</div>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
87
|
-
<i class="fa-regular fa-eye text-zinc-400" aria-hidden="true"></i>
|
|
248
|
+
<div class="rounded-2xl border border-zinc-700 bg-zinc-900/40 p-5">
|
|
249
|
+
<h3 class="mb-3 text-base font-semibold text-zinc-300">
|
|
250
|
+
<i class="fa-solid fa-chart-pie mr-2 text-violet-400" aria-hidden="true"></i
|
|
251
|
+
>设备构成（示例）
|
|
252
|
+
</h3>
|
|
253
|
+
<div id="breakdownChart" class="h-72 w-full" role="img" aria-label="饼图"></div>
|
|
88
254
|
</div>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
255
|
+
</div>
|
|
256
|
+
</section>
|
|
257
|
+
|
|
258
|
+
<section class="mb-14" data-section-id="section-diagnosis-pros-cons">
|
|
259
|
+
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
260
|
+
<span
|
|
261
|
+
class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950"
|
|
262
|
+
>4</span
|
|
263
|
+
>
|
|
264
|
+
诊断概览
|
|
265
|
+
</h2>
|
|
266
|
+
<div class="grid gap-5 md:grid-cols-2">
|
|
267
|
+
<div class="rounded-2xl border border-emerald-500/30 bg-emerald-950/30 p-5">
|
|
268
|
+
<h3 class="mb-3 text-lg font-bold text-emerald-300">
|
|
269
|
+
<i class="fa-solid fa-circle-check mr-2" aria-hidden="true"></i>优势
|
|
270
|
+
</h3>
|
|
271
|
+
<ul class="space-y-2 text-base text-emerald-100/90">
|
|
272
|
+
<li><strong>消耗效率稳定</strong> — CPA 低于均值。</li>
|
|
273
|
+
<li><strong>高意向词覆盖</strong> — 头部 CVR 提升。</li>
|
|
274
|
+
</ul>
|
|
96
275
|
</div>
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
276
|
+
<div class="rounded-2xl border border-amber-500/30 bg-amber-950/30 p-5">
|
|
277
|
+
<h3 class="mb-3 text-lg font-bold text-amber-200">
|
|
278
|
+
<i class="fa-solid fa-circle-exclamation mr-2" aria-hidden="true"></i>不足
|
|
279
|
+
</h3>
|
|
280
|
+
<ul class="space-y-2 text-base text-amber-100/90">
|
|
281
|
+
<li><strong>展示份额下滑</strong> — 预算/出价约束。</li>
|
|
282
|
+
<li><strong>否词待补充</strong> — 低效流量。</li>
|
|
283
|
+
</ul>
|
|
104
284
|
</div>
|
|
105
|
-
<p class="mt-3 text-2xl font-bold tabular-nums text-white sm:text-3xl">312</p>
|
|
106
|
-
<p class="mt-2 text-sm text-zinc-400">CPA <span class="font-semibold text-white">¥40.3</span></p>
|
|
107
|
-
</article>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<div class="mt-8 rounded-2xl border border-zinc-700 bg-zinc-900/40 p-5 sm:p-6">
|
|
111
|
-
<h3 class="mb-4 text-lg font-semibold text-zinc-200">
|
|
112
|
-
<i class="fa-solid fa-chart-line mr-2 text-cyan-400" aria-hidden="true"></i>
|
|
113
|
-
关键指标趋势
|
|
114
|
-
</h3>
|
|
115
|
-
<div id="trendChart" class="h-80 w-full min-h-[280px]" role="img" aria-label="趋势图"></div>
|
|
116
|
-
</div>
|
|
117
|
-
</section>
|
|
118
|
-
|
|
119
|
-
<section class="mb-14" data-section-id="section-kpi-funnel">
|
|
120
|
-
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
121
|
-
<span class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950">2</span>
|
|
122
|
-
漏斗式概览
|
|
123
|
-
</h2>
|
|
124
|
-
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900/50">
|
|
125
|
-
<table class="min-w-full divide-y divide-zinc-700 text-base">
|
|
126
|
-
<thead class="bg-zinc-800/80">
|
|
127
|
-
<tr>
|
|
128
|
-
<th class="px-4 py-4 text-left font-semibold text-zinc-200">步骤</th>
|
|
129
|
-
<th class="px-4 py-4 text-left font-semibold text-zinc-200">指标</th>
|
|
130
|
-
<th class="px-4 py-4 text-right font-semibold text-zinc-200">数值</th>
|
|
131
|
-
<th class="px-4 py-4 text-left font-semibold text-zinc-200">附注</th>
|
|
132
|
-
</tr>
|
|
133
|
-
</thead>
|
|
134
|
-
<tbody class="divide-y divide-zinc-800 text-zinc-300">
|
|
135
|
-
<tr><td class="px-4 py-3 font-medium text-cyan-400">1</td><td class="px-4 py-3">消耗 (Cost)</td><td class="px-4 py-3 text-right tabular-nums font-semibold text-white">¥12,580</td><td class="px-4 py-3 text-zinc-500">—</td></tr>
|
|
136
|
-
<tr><td class="px-4 py-3 font-medium text-cyan-400">2</td><td class="px-4 py-3">展示次数</td><td class="px-4 py-3 text-right tabular-nums font-semibold text-white">1,240,000</td><td class="px-4 py-3 text-zinc-500">—</td></tr>
|
|
137
|
-
<tr><td class="px-4 py-3 font-medium text-cyan-400">3</td><td class="px-4 py-3">点击次数</td><td class="px-4 py-3 text-right tabular-nums font-semibold text-white">18,420</td><td class="px-4 py-3 text-zinc-500">CTR 1.49%</td></tr>
|
|
138
|
-
<tr><td class="px-4 py-3 font-medium text-cyan-400">4</td><td class="px-4 py-3">转化次数</td><td class="px-4 py-3 text-right tabular-nums font-semibold text-white">312</td><td class="px-4 py-3 text-zinc-500">CVR —</td></tr>
|
|
139
|
-
</tbody>
|
|
140
|
-
</table>
|
|
141
|
-
</div>
|
|
142
|
-
</section>
|
|
143
|
-
|
|
144
|
-
<section class="mb-14" data-section-id="section-structure-breakdown">
|
|
145
|
-
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
146
|
-
<span class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950">3</span>
|
|
147
|
-
账户结构 & 分布
|
|
148
|
-
</h2>
|
|
149
|
-
<div class="grid gap-8 lg:grid-cols-2">
|
|
150
|
-
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
|
151
|
-
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center"><p class="text-2xl font-bold text-cyan-400">42</p><p class="text-sm text-zinc-500">有效系列</p></div>
|
|
152
|
-
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center"><p class="text-2xl font-bold text-cyan-400">128</p><p class="text-sm text-zinc-500">广告组</p></div>
|
|
153
|
-
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center"><p class="text-2xl font-bold text-cyan-400">3.2k</p><p class="text-sm text-zinc-500">关键字</p></div>
|
|
154
|
-
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center"><p class="text-2xl font-bold text-cyan-400">860</p><p class="text-sm text-zinc-500">广告</p></div>
|
|
155
|
-
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center"><p class="text-2xl font-bold text-cyan-400">12</p><p class="text-sm text-zinc-500">国家</p></div>
|
|
156
|
-
<div class="rounded-xl border border-zinc-700 bg-zinc-900/50 py-4 text-center"><p class="text-2xl font-bold text-cyan-400">24</p><p class="text-sm text-zinc-500">附加链接</p></div>
|
|
157
|
-
</div>
|
|
158
|
-
<div class="rounded-2xl border border-zinc-700 bg-zinc-900/40 p-5">
|
|
159
|
-
<h3 class="mb-3 text-base font-semibold text-zinc-300"><i class="fa-solid fa-chart-pie mr-2 text-violet-400" aria-hidden="true"></i>设备构成（示例）</h3>
|
|
160
|
-
<div id="breakdownChart" class="h-72 w-full" role="img" aria-label="饼图"></div>
|
|
161
285
|
</div>
|
|
162
|
-
</
|
|
163
|
-
</section>
|
|
286
|
+
</section>
|
|
164
287
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
<
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
288
|
+
<section class="mb-14" data-section-id="section-data-table">
|
|
289
|
+
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
290
|
+
<span
|
|
291
|
+
class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950"
|
|
292
|
+
>5</span
|
|
293
|
+
>
|
|
294
|
+
明细表
|
|
295
|
+
</h2>
|
|
296
|
+
<div class="overflow-x-auto rounded-2xl border border-zinc-700 bg-zinc-900/50">
|
|
297
|
+
<table class="min-w-[640px] w-full divide-y divide-zinc-700 text-sm">
|
|
298
|
+
<thead class="bg-zinc-800">
|
|
299
|
+
<tr>
|
|
300
|
+
<th class="whitespace-nowrap px-4 py-3 text-left font-semibold text-zinc-200">
|
|
301
|
+
系列
|
|
302
|
+
</th>
|
|
303
|
+
<th class="whitespace-nowrap px-4 py-3 font-semibold text-zinc-200">花费</th>
|
|
304
|
+
<th class="whitespace-nowrap px-4 py-3 font-semibold text-zinc-200">点击</th>
|
|
305
|
+
<th class="whitespace-nowrap px-4 py-3 font-semibold text-zinc-200">转化</th>
|
|
306
|
+
<th class="whitespace-nowrap px-4 py-3 font-semibold text-zinc-200">CVR</th>
|
|
307
|
+
<th class="whitespace-nowrap px-4 py-3 font-semibold text-zinc-200">环比花费</th>
|
|
308
|
+
</tr>
|
|
309
|
+
</thead>
|
|
310
|
+
<tbody class="divide-y divide-zinc-800 text-zinc-300">
|
|
311
|
+
<tr>
|
|
312
|
+
<td class="px-4 py-3 font-medium text-white">品牌-搜索</td>
|
|
313
|
+
<td class="px-4 py-3 tabular-nums">¥4,200</td>
|
|
314
|
+
<td class="px-4 py-3 tabular-nums">2,100</td>
|
|
315
|
+
<td class="px-4 py-3 tabular-nums">98</td>
|
|
316
|
+
<td class="px-4 py-3 tabular-nums">4.7%</td>
|
|
317
|
+
<td class="px-4 py-3 text-emerald-400">+5%</td>
|
|
318
|
+
</tr>
|
|
319
|
+
<tr>
|
|
320
|
+
<td class="px-4 py-3 font-medium text-white">通用-搜索</td>
|
|
321
|
+
<td class="px-4 py-3 tabular-nums">¥8,380</td>
|
|
322
|
+
<td class="px-4 py-3 tabular-nums">16,320</td>
|
|
323
|
+
<td class="px-4 py-3 tabular-nums">214</td>
|
|
324
|
+
<td class="px-4 py-3 tabular-nums">1.3%</td>
|
|
325
|
+
<td class="px-4 py-3 text-rose-400">−3%</td>
|
|
326
|
+
</tr>
|
|
327
|
+
</tbody>
|
|
328
|
+
</table>
|
|
184
329
|
</div>
|
|
185
|
-
</
|
|
186
|
-
</section>
|
|
330
|
+
</section>
|
|
187
331
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
<
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
332
|
+
<section class="mb-14" data-section-id="section-benchmark">
|
|
333
|
+
<h2 class="mb-6 flex items-center text-2xl font-bold text-white">
|
|
334
|
+
<span
|
|
335
|
+
class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500 text-lg text-zinc-950"
|
|
336
|
+
>6</span
|
|
337
|
+
>
|
|
338
|
+
指标 vs 基准
|
|
339
|
+
</h2>
|
|
340
|
+
<div class="overflow-x-auto rounded-2xl border border-zinc-700 bg-zinc-900/50">
|
|
341
|
+
<table class="min-w-full divide-y divide-zinc-700 text-base">
|
|
342
|
+
<thead class="bg-zinc-800">
|
|
343
|
+
<tr>
|
|
344
|
+
<th class="px-4 py-3 text-left font-semibold text-zinc-200">指标</th>
|
|
345
|
+
<th class="px-4 py-3 text-right font-semibold text-zinc-200">数据</th>
|
|
346
|
+
<th class="px-4 py-3 text-right font-semibold text-zinc-200">基准</th>
|
|
347
|
+
<th class="px-4 py-3 text-left font-semibold text-zinc-200">状态</th>
|
|
348
|
+
</tr>
|
|
349
|
+
</thead>
|
|
350
|
+
<tbody class="text-zinc-300">
|
|
351
|
+
<tr>
|
|
352
|
+
<td class="px-4 py-3">CTR</td>
|
|
353
|
+
<td class="px-4 py-3 text-right tabular-nums text-white">1.49%</td>
|
|
354
|
+
<td class="px-4 py-3 text-right tabular-nums text-zinc-500">1.2%</td>
|
|
355
|
+
<td class="px-4 py-3">
|
|
356
|
+
<span class="rounded-full bg-emerald-500/20 px-3 py-1 text-sm text-emerald-300"
|
|
357
|
+
>优于基准</span
|
|
358
|
+
>
|
|
359
|
+
</td>
|
|
360
|
+
</tr>
|
|
361
|
+
<tr>
|
|
362
|
+
<td class="px-4 py-3">CPA</td>
|
|
363
|
+
<td class="px-4 py-3 text-right tabular-nums text-white">¥40.3</td>
|
|
364
|
+
<td class="px-4 py-3 text-right tabular-nums text-zinc-500">¥45.0</td>
|
|
365
|
+
<td class="px-4 py-3">
|
|
366
|
+
<span class="rounded-full bg-emerald-500/20 px-3 py-1 text-sm text-emerald-300"
|
|
367
|
+
>优于基准</span
|
|
368
|
+
>
|
|
369
|
+
</td>
|
|
370
|
+
</tr>
|
|
371
|
+
</tbody>
|
|
372
|
+
</table>
|
|
373
|
+
</div>
|
|
374
|
+
</section>
|
|
231
375
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
376
|
+
<footer class="border-t border-zinc-800 pt-8 text-sm text-zinc-500">
|
|
377
|
+
<p>深色演示版式参考 · 打印将强制浅色背景（见样式）。</p>
|
|
378
|
+
</footer>
|
|
379
|
+
</main>
|
|
236
380
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
381
|
+
<script>
|
|
382
|
+
(function () {
|
|
383
|
+
var trendEl = document.getElementById("trendChart");
|
|
384
|
+
var pieEl = document.getElementById("breakdownChart");
|
|
385
|
+
if (!trendEl || !pieEl || typeof echarts === "undefined") return;
|
|
242
386
|
|
|
243
|
-
|
|
244
|
-
|
|
387
|
+
var axisMuted = "#71717a";
|
|
388
|
+
var gridLine = "#3f3f46";
|
|
245
389
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
390
|
+
var trendChart = echarts.init(trendEl, null, { renderer: "canvas" });
|
|
391
|
+
trendChart.setOption({
|
|
392
|
+
backgroundColor: "transparent",
|
|
393
|
+
textStyle: { color: "#e4e4e7" },
|
|
394
|
+
color: ["#22d3ee", "#a78bfa"],
|
|
395
|
+
tooltip: {
|
|
396
|
+
trigger: "axis",
|
|
397
|
+
backgroundColor: "rgba(24,24,27,0.95)",
|
|
398
|
+
borderColor: "#52525b",
|
|
399
|
+
textStyle: { color: "#fafafa" },
|
|
400
|
+
},
|
|
401
|
+
legend: { data: ["消耗(百元)", "点击(百次)"], top: 0, textStyle: { color: "#a1a1aa" } },
|
|
402
|
+
grid: { left: "3%", right: "4%", bottom: "3%", top: 48, containLabel: true },
|
|
403
|
+
xAxis: {
|
|
404
|
+
type: "category",
|
|
405
|
+
boundaryGap: false,
|
|
406
|
+
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
|
|
407
|
+
axisLine: { lineStyle: { color: axisMuted } },
|
|
408
|
+
axisLabel: { color: "#a1a1aa" },
|
|
409
|
+
},
|
|
410
|
+
yAxis: {
|
|
411
|
+
type: "value",
|
|
412
|
+
splitLine: { lineStyle: { color: gridLine, type: "dashed" } },
|
|
413
|
+
axisLabel: { color: "#a1a1aa" },
|
|
414
|
+
},
|
|
415
|
+
series: [
|
|
416
|
+
{
|
|
417
|
+
name: "消耗(百元)",
|
|
418
|
+
type: "line",
|
|
419
|
+
smooth: 0.35,
|
|
420
|
+
areaStyle: { opacity: 0.15 },
|
|
421
|
+
data: [200, 250, 220, 300, 280, 320, 310],
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
name: "点击(百次)",
|
|
425
|
+
type: "line",
|
|
426
|
+
smooth: 0.35,
|
|
427
|
+
areaStyle: { opacity: 0.12 },
|
|
428
|
+
data: [33, 48, 45, 60, 52, 68, 61],
|
|
429
|
+
},
|
|
430
|
+
],
|
|
431
|
+
});
|
|
266
432
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
433
|
+
var breakdownChart = echarts.init(pieEl, null, { renderer: "canvas" });
|
|
434
|
+
breakdownChart.setOption({
|
|
435
|
+
backgroundColor: "transparent",
|
|
436
|
+
textStyle: { color: "#e4e4e7" },
|
|
437
|
+
color: ["#22d3ee", "#a78bfa", "#f472b6"],
|
|
438
|
+
tooltip: { backgroundColor: "rgba(24,24,27,0.95)", borderColor: "#52525b" },
|
|
439
|
+
legend: {
|
|
440
|
+
orient: "vertical",
|
|
441
|
+
left: "left",
|
|
442
|
+
top: "middle",
|
|
443
|
+
textStyle: { color: "#a1a1aa" },
|
|
444
|
+
},
|
|
445
|
+
series: [
|
|
446
|
+
{
|
|
447
|
+
name: "设备",
|
|
448
|
+
type: "pie",
|
|
449
|
+
radius: ["42%", "68%"],
|
|
450
|
+
center: ["58%", "50%"],
|
|
451
|
+
itemStyle: { borderRadius: 6, borderColor: "#18181b", borderWidth: 2 },
|
|
452
|
+
label: { color: "#e4e4e7", formatter: "{b}\n{d}%" },
|
|
453
|
+
data: [
|
|
454
|
+
{ value: 52, name: "移动端" },
|
|
455
|
+
{ value: 35, name: "桌面" },
|
|
456
|
+
{ value: 13, name: "平板" },
|
|
457
|
+
],
|
|
458
|
+
},
|
|
459
|
+
],
|
|
460
|
+
});
|
|
281
461
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
462
|
+
function resize() {
|
|
463
|
+
trendChart.resize();
|
|
464
|
+
breakdownChart.resize();
|
|
465
|
+
}
|
|
466
|
+
window.addEventListener("resize", resize);
|
|
467
|
+
})();
|
|
468
|
+
</script>
|
|
469
|
+
</body>
|
|
287
470
|
</html>
|