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 一致；桌面端随 sm: 断点渐进为多列。
|
|
@@ -7,264 +7,479 @@
|
|
|
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, viewport-fit=cover" />
|
|
13
|
+
<title>广告数据报告 — 移动版式参考</title>
|
|
14
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
15
|
+
<script>
|
|
16
|
+
tailwind.config = {
|
|
17
|
+
theme: {
|
|
18
|
+
extend: {
|
|
19
|
+
colors: {
|
|
20
|
+
brand: { 50: "#eff6ff", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8" },
|
|
21
|
+
accent: { 500: "#f97316" },
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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
|
+
}
|
|
39
|
+
.no-print {
|
|
40
|
+
display: none !important;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
/* 安全区（刘海屏） */
|
|
44
|
+
body {
|
|
45
|
+
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
</head>
|
|
49
|
+
<body class="min-h-screen bg-slate-100 text-base text-slate-800 antialiased">
|
|
50
|
+
<main class="mx-auto max-w-lg px-3 py-6 sm:max-w-5xl sm:px-6 sm:py-8">
|
|
51
|
+
<header class="mb-8 border-b-2 border-brand-600 pb-5">
|
|
52
|
+
<p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500">
|
|
53
|
+
Siluzan · 投放分析
|
|
54
|
+
</p>
|
|
55
|
+
<h1 class="mt-2 text-xl font-bold leading-snug text-brand-700 sm:text-3xl">
|
|
56
|
+
<i
|
|
57
|
+
class="fa-solid fa-mobile-screen-button mr-2 text-brand-600 sm:hidden"
|
|
58
|
+
aria-hidden="true"
|
|
59
|
+
></i>
|
|
60
|
+
<i
|
|
61
|
+
class="fa-solid fa-chart-line mr-2 hidden text-brand-600 sm:inline"
|
|
62
|
+
aria-hidden="true"
|
|
63
|
+
></i>
|
|
64
|
+
数据报告标题
|
|
65
|
+
</h1>
|
|
66
|
+
<div class="mt-4 space-y-2 text-sm sm:flex sm:flex-wrap sm:gap-2 sm:space-y-0">
|
|
67
|
+
<div
|
|
68
|
+
class="flex min-h-[44px] items-center rounded-xl border border-slate-200 bg-white px-3 py-2.5 shadow-sm"
|
|
69
|
+
>
|
|
70
|
+
<i class="fa-regular fa-building mr-2 shrink-0 text-slate-400" aria-hidden="true"></i>
|
|
71
|
+
<span class="text-slate-600">账户</span>
|
|
72
|
+
<strong id="accountName" class="ml-2 truncate font-semibold text-slate-900"
|
|
73
|
+
>示例账户</strong
|
|
74
|
+
>
|
|
75
|
+
</div>
|
|
76
|
+
<div
|
|
77
|
+
class="flex min-h-[44px] items-center rounded-xl border border-slate-200 bg-white px-3 py-2.5 shadow-sm"
|
|
78
|
+
>
|
|
79
|
+
<i class="fa-regular fa-calendar mr-2 shrink-0 text-slate-400" aria-hidden="true"></i>
|
|
80
|
+
<span class="text-slate-600">区间</span>
|
|
81
|
+
<strong
|
|
82
|
+
id="reportPeriod"
|
|
83
|
+
class="ml-2 shrink-0 font-semibold tabular-nums text-slate-900"
|
|
84
|
+
>2026-03-01 ~ 2026-03-07</strong
|
|
85
|
+
>
|
|
86
|
+
</div>
|
|
52
87
|
</div>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
88
|
+
</header>
|
|
89
|
+
|
|
90
|
+
<aside
|
|
91
|
+
class="no-print mb-6 rounded-xl border-l-4 border-amber-400 bg-amber-50 p-4 text-sm leading-relaxed text-amber-950"
|
|
92
|
+
>
|
|
93
|
+
<p class="font-semibold">
|
|
94
|
+
<i class="fa-solid fa-triangle-exclamation mr-1 text-amber-500" aria-hidden="true"></i
|
|
95
|
+
>口径提示
|
|
96
|
+
</p>
|
|
97
|
+
<p class="mt-1">BingV2 区间勿含今天/昨天。</p>
|
|
98
|
+
</aside>
|
|
99
|
+
|
|
100
|
+
<section class="mb-10" data-section-id="section-executive-summary">
|
|
101
|
+
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
102
|
+
<span
|
|
103
|
+
class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
104
|
+
>1</span
|
|
105
|
+
>
|
|
106
|
+
执行摘要
|
|
107
|
+
</h2>
|
|
108
|
+
<p class="mb-4 text-sm text-slate-600 sm:text-base">
|
|
109
|
+
窄屏默认单列 KPI；横屏或平板自动多列。
|
|
110
|
+
</p>
|
|
111
|
+
|
|
112
|
+
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
113
|
+
<article
|
|
114
|
+
class="min-h-[100px] rounded-2xl border border-slate-200 bg-white p-4 shadow-sm active:bg-slate-50"
|
|
115
|
+
>
|
|
116
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
117
|
+
<span class="text-sm font-medium">消耗</span>
|
|
118
|
+
<i class="fa-solid fa-sack-dollar text-lg text-brand-500/90" aria-hidden="true"></i>
|
|
119
|
+
</div>
|
|
120
|
+
<p id="spendValue" class="mt-2 text-2xl font-bold tabular-nums text-slate-900">
|
|
121
|
+
¥12,580
|
|
122
|
+
</p>
|
|
123
|
+
<p id="spendPct" class="mt-2 text-sm">
|
|
124
|
+
<span class="font-semibold text-emerald-600">↑ +8.2%</span>
|
|
125
|
+
<span class="text-slate-400">环比</span>
|
|
126
|
+
</p>
|
|
127
|
+
</article>
|
|
128
|
+
<article class="min-h-[100px] rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
129
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
130
|
+
<span class="text-sm font-medium">展示</span>
|
|
131
|
+
<i class="fa-regular fa-eye text-lg text-slate-400" aria-hidden="true"></i>
|
|
132
|
+
</div>
|
|
133
|
+
<p id="impressionsValue" class="mt-2 text-2xl font-bold tabular-nums text-slate-900">
|
|
134
|
+
1.24M
|
|
135
|
+
</p>
|
|
136
|
+
<p id="impressionsPct" class="mt-2 text-sm text-slate-600">
|
|
137
|
+
环比 <span class="font-semibold text-rose-600">−2.1%</span>
|
|
138
|
+
</p>
|
|
139
|
+
</article>
|
|
140
|
+
<article class="min-h-[100px] rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
141
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
142
|
+
<span class="text-sm font-medium">点击</span>
|
|
143
|
+
<i class="fa-solid fa-computer-mouse text-lg text-slate-400" aria-hidden="true"></i>
|
|
144
|
+
</div>
|
|
145
|
+
<p id="clicksValue" class="mt-2 text-2xl font-bold tabular-nums text-slate-900">
|
|
146
|
+
18,420
|
|
147
|
+
</p>
|
|
148
|
+
<p id="clicksPct" class="mt-2 text-sm text-slate-600">
|
|
149
|
+
CTR <span class="font-bold text-slate-800">1.49%</span>
|
|
150
|
+
</p>
|
|
151
|
+
</article>
|
|
152
|
+
<article class="min-h-[100px] rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
153
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
154
|
+
<span class="text-sm font-medium">转化</span>
|
|
155
|
+
<i class="fa-solid fa-bullseye text-lg text-accent-500" aria-hidden="true"></i>
|
|
156
|
+
</div>
|
|
157
|
+
<p class="mt-2 text-2xl font-bold tabular-nums text-slate-900">312</p>
|
|
158
|
+
<p class="mt-2 text-sm text-slate-600">
|
|
159
|
+
CPA <span class="font-bold text-slate-800">¥40.3</span>
|
|
160
|
+
</p>
|
|
161
|
+
</article>
|
|
57
162
|
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</header>
|
|
60
163
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
164
|
+
<div class="mt-5 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm sm:p-4">
|
|
165
|
+
<h3 class="mb-2 text-center text-sm font-semibold text-slate-700 sm:text-left">
|
|
166
|
+
关键指标趋势
|
|
167
|
+
</h3>
|
|
168
|
+
<div
|
|
169
|
+
id="trendChart"
|
|
170
|
+
class="h-64 w-full min-h-[220px] sm:h-72"
|
|
171
|
+
role="img"
|
|
172
|
+
aria-label="趋势图"
|
|
173
|
+
></div>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
65
176
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
177
|
+
<section class="mb-10" data-section-id="section-kpi-funnel">
|
|
178
|
+
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
179
|
+
<span
|
|
180
|
+
class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
181
|
+
>2</span
|
|
182
|
+
>
|
|
183
|
+
漏斗概览
|
|
184
|
+
</h2>
|
|
185
|
+
<div
|
|
186
|
+
class="-mx-1 overflow-x-auto rounded-xl border border-slate-200 bg-white pb-1 shadow-sm sm:mx-0"
|
|
187
|
+
>
|
|
188
|
+
<p class="no-print px-3 pt-2 text-center text-[11px] text-slate-400 sm:hidden">
|
|
189
|
+
<i class="fa-solid fa-arrows-left-right mr-1" aria-hidden="true"></i>可左右滑动查看全表
|
|
190
|
+
</p>
|
|
191
|
+
<table
|
|
192
|
+
class="min-w-[100%] w-full divide-y divide-slate-200 text-sm sm:min-w-0 sm:text-base"
|
|
193
|
+
>
|
|
194
|
+
<thead class="bg-slate-50">
|
|
195
|
+
<tr>
|
|
196
|
+
<th class="whitespace-nowrap px-3 py-3 text-left font-semibold text-slate-700">
|
|
197
|
+
步骤
|
|
198
|
+
</th>
|
|
199
|
+
<th class="whitespace-nowrap px-3 py-3 text-left font-semibold text-slate-700">
|
|
200
|
+
指标
|
|
201
|
+
</th>
|
|
202
|
+
<th class="whitespace-nowrap px-3 py-3 text-right font-semibold text-slate-700">
|
|
203
|
+
数值
|
|
204
|
+
</th>
|
|
205
|
+
<th class="whitespace-nowrap px-3 py-3 text-left font-semibold text-slate-700">
|
|
206
|
+
附注
|
|
207
|
+
</th>
|
|
208
|
+
</tr>
|
|
209
|
+
</thead>
|
|
210
|
+
<tbody class="divide-y divide-slate-100">
|
|
211
|
+
<tr>
|
|
212
|
+
<td class="px-3 py-3 font-medium text-brand-600">1</td>
|
|
213
|
+
<td class="px-3 py-3">消耗</td>
|
|
214
|
+
<td class="px-3 py-3 text-right tabular-nums font-semibold">¥12,580</td>
|
|
215
|
+
<td class="px-3 py-3 text-slate-500">—</td>
|
|
216
|
+
</tr>
|
|
217
|
+
<tr>
|
|
218
|
+
<td class="px-3 py-3 font-medium text-brand-600">2</td>
|
|
219
|
+
<td class="px-3 py-3">展示</td>
|
|
220
|
+
<td class="px-3 py-3 text-right tabular-nums font-semibold">1,240,000</td>
|
|
221
|
+
<td class="px-3 py-3 text-slate-500">—</td>
|
|
222
|
+
</tr>
|
|
223
|
+
<tr>
|
|
224
|
+
<td class="px-3 py-3 font-medium text-brand-600">3</td>
|
|
225
|
+
<td class="px-3 py-3">点击</td>
|
|
226
|
+
<td class="px-3 py-3 text-right tabular-nums font-semibold">18,420</td>
|
|
227
|
+
<td class="px-3 py-3 text-slate-500">CTR 1.49%</td>
|
|
228
|
+
</tr>
|
|
229
|
+
<tr>
|
|
230
|
+
<td class="px-3 py-3 font-medium text-brand-600">4</td>
|
|
231
|
+
<td class="px-3 py-3">转化</td>
|
|
232
|
+
<td class="px-3 py-3 text-right tabular-nums font-semibold">312</td>
|
|
233
|
+
<td class="px-3 py-3 text-slate-500">—</td>
|
|
234
|
+
</tr>
|
|
235
|
+
</tbody>
|
|
236
|
+
</table>
|
|
237
|
+
</div>
|
|
238
|
+
</section>
|
|
72
239
|
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
240
|
+
<section class="mb-10" data-section-id="section-structure-breakdown">
|
|
241
|
+
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
242
|
+
<span
|
|
243
|
+
class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
244
|
+
>3</span
|
|
245
|
+
>
|
|
246
|
+
结构 & 分布
|
|
247
|
+
</h2>
|
|
248
|
+
<div class="grid gap-4 lg:grid-cols-2">
|
|
249
|
+
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
|
250
|
+
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm">
|
|
251
|
+
<p class="text-xl font-bold text-brand-700">42</p>
|
|
252
|
+
<p class="text-xs text-slate-500">系列</p>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm">
|
|
255
|
+
<p class="text-xl font-bold text-brand-700">128</p>
|
|
256
|
+
<p class="text-xs text-slate-500">广告组</p>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm">
|
|
259
|
+
<p class="text-xl font-bold text-brand-700">3.2k</p>
|
|
260
|
+
<p class="text-xs text-slate-500">关键字</p>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm">
|
|
263
|
+
<p class="text-xl font-bold text-brand-700">860</p>
|
|
264
|
+
<p class="text-xs text-slate-500">广告</p>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm">
|
|
267
|
+
<p class="text-xl font-bold text-brand-700">12</p>
|
|
268
|
+
<p class="text-xs text-slate-500">国家</p>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm">
|
|
271
|
+
<p class="text-xl font-bold text-brand-700">24</p>
|
|
272
|
+
<p class="text-xs text-slate-500">链接</p>
|
|
273
|
+
</div>
|
|
78
274
|
</div>
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<article class="min-h-[100px] rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
83
|
-
<div class="flex items-center justify-between text-slate-500">
|
|
84
|
-
<span class="text-sm font-medium">展示</span>
|
|
85
|
-
<i class="fa-regular fa-eye text-lg text-slate-400" aria-hidden="true"></i>
|
|
275
|
+
<div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm sm:p-4">
|
|
276
|
+
<h3 class="mb-2 text-sm font-semibold text-slate-700">设备构成</h3>
|
|
277
|
+
<div id="breakdownChart" class="h-60 w-full sm:h-64" role="img" aria-label="饼图"></div>
|
|
86
278
|
</div>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
279
|
+
</div>
|
|
280
|
+
</section>
|
|
281
|
+
|
|
282
|
+
<section class="mb-10" data-section-id="section-diagnosis-pros-cons">
|
|
283
|
+
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
284
|
+
<span
|
|
285
|
+
class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
286
|
+
>4</span
|
|
287
|
+
>
|
|
288
|
+
诊断概览
|
|
289
|
+
</h2>
|
|
290
|
+
<div class="space-y-3 md:grid md:grid-cols-2 md:gap-4 md:space-y-0">
|
|
291
|
+
<div class="rounded-2xl border border-emerald-200 bg-emerald-50/60 p-4">
|
|
292
|
+
<h3 class="mb-2 text-base font-bold text-emerald-800">
|
|
293
|
+
<i class="fa-solid fa-circle-check mr-1" aria-hidden="true"></i>优势
|
|
294
|
+
</h3>
|
|
295
|
+
<ul class="space-y-2 text-sm leading-relaxed text-emerald-950 sm:text-base">
|
|
296
|
+
<li><strong>消耗效率稳定</strong> — CPA 低于均值。</li>
|
|
297
|
+
<li><strong>高意向词覆盖</strong> — CVR 提升。</li>
|
|
298
|
+
</ul>
|
|
94
299
|
</div>
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
300
|
+
<div class="rounded-2xl border border-amber-200 bg-amber-50/60 p-4">
|
|
301
|
+
<h3 class="mb-2 text-base font-bold text-amber-900">
|
|
302
|
+
<i class="fa-solid fa-circle-exclamation mr-1" aria-hidden="true"></i>不足
|
|
303
|
+
</h3>
|
|
304
|
+
<ul class="space-y-2 text-sm leading-relaxed text-amber-950 sm:text-base">
|
|
305
|
+
<li><strong>展示份额下滑</strong>。</li>
|
|
306
|
+
<li><strong>否词待补充</strong>。</li>
|
|
307
|
+
</ul>
|
|
102
308
|
</div>
|
|
103
|
-
<p class="mt-2 text-2xl font-bold tabular-nums text-slate-900">312</p>
|
|
104
|
-
<p class="mt-2 text-sm text-slate-600">CPA <span class="font-bold text-slate-800">¥40.3</span></p>
|
|
105
|
-
</article>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<div class="mt-5 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm sm:p-4">
|
|
109
|
-
<h3 class="mb-2 text-center text-sm font-semibold text-slate-700 sm:text-left">关键指标趋势</h3>
|
|
110
|
-
<div id="trendChart" class="h-64 w-full min-h-[220px] sm:h-72" role="img" aria-label="趋势图"></div>
|
|
111
|
-
</div>
|
|
112
|
-
</section>
|
|
113
|
-
|
|
114
|
-
<section class="mb-10" data-section-id="section-kpi-funnel">
|
|
115
|
-
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
116
|
-
<span class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white">2</span>
|
|
117
|
-
漏斗概览
|
|
118
|
-
</h2>
|
|
119
|
-
<div class="-mx-1 overflow-x-auto rounded-xl border border-slate-200 bg-white pb-1 shadow-sm sm:mx-0">
|
|
120
|
-
<p class="no-print px-3 pt-2 text-center text-[11px] text-slate-400 sm:hidden"><i class="fa-solid fa-arrows-left-right mr-1" aria-hidden="true"></i>可左右滑动查看全表</p>
|
|
121
|
-
<table class="min-w-[100%] w-full divide-y divide-slate-200 text-sm sm:min-w-0 sm:text-base">
|
|
122
|
-
<thead class="bg-slate-50"><tr>
|
|
123
|
-
<th class="whitespace-nowrap px-3 py-3 text-left font-semibold text-slate-700">步骤</th>
|
|
124
|
-
<th class="whitespace-nowrap px-3 py-3 text-left font-semibold text-slate-700">指标</th>
|
|
125
|
-
<th class="whitespace-nowrap px-3 py-3 text-right font-semibold text-slate-700">数值</th>
|
|
126
|
-
<th class="whitespace-nowrap px-3 py-3 text-left font-semibold text-slate-700">附注</th>
|
|
127
|
-
</tr></thead>
|
|
128
|
-
<tbody class="divide-y divide-slate-100">
|
|
129
|
-
<tr><td class="px-3 py-3 font-medium text-brand-600">1</td><td class="px-3 py-3">消耗</td><td class="px-3 py-3 text-right tabular-nums font-semibold">¥12,580</td><td class="px-3 py-3 text-slate-500">—</td></tr>
|
|
130
|
-
<tr><td class="px-3 py-3 font-medium text-brand-600">2</td><td class="px-3 py-3">展示</td><td class="px-3 py-3 text-right tabular-nums font-semibold">1,240,000</td><td class="px-3 py-3 text-slate-500">—</td></tr>
|
|
131
|
-
<tr><td class="px-3 py-3 font-medium text-brand-600">3</td><td class="px-3 py-3">点击</td><td class="px-3 py-3 text-right tabular-nums font-semibold">18,420</td><td class="px-3 py-3 text-slate-500">CTR 1.49%</td></tr>
|
|
132
|
-
<tr><td class="px-3 py-3 font-medium text-brand-600">4</td><td class="px-3 py-3">转化</td><td class="px-3 py-3 text-right tabular-nums font-semibold">312</td><td class="px-3 py-3 text-slate-500">—</td></tr>
|
|
133
|
-
</tbody>
|
|
134
|
-
</table>
|
|
135
|
-
</div>
|
|
136
|
-
</section>
|
|
137
|
-
|
|
138
|
-
<section class="mb-10" data-section-id="section-structure-breakdown">
|
|
139
|
-
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
140
|
-
<span class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white">3</span>
|
|
141
|
-
结构 & 分布
|
|
142
|
-
</h2>
|
|
143
|
-
<div class="grid gap-4 lg:grid-cols-2">
|
|
144
|
-
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
|
145
|
-
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm"><p class="text-xl font-bold text-brand-700">42</p><p class="text-xs text-slate-500">系列</p></div>
|
|
146
|
-
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm"><p class="text-xl font-bold text-brand-700">128</p><p class="text-xs text-slate-500">广告组</p></div>
|
|
147
|
-
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm"><p class="text-xl font-bold text-brand-700">3.2k</p><p class="text-xs text-slate-500">关键字</p></div>
|
|
148
|
-
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm"><p class="text-xl font-bold text-brand-700">860</p><p class="text-xs text-slate-500">广告</p></div>
|
|
149
|
-
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm"><p class="text-xl font-bold text-brand-700">12</p><p class="text-xs text-slate-500">国家</p></div>
|
|
150
|
-
<div class="rounded-xl border border-slate-200 bg-white py-4 text-center shadow-sm"><p class="text-xl font-bold text-brand-700">24</p><p class="text-xs text-slate-500">链接</p></div>
|
|
151
|
-
</div>
|
|
152
|
-
<div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm sm:p-4">
|
|
153
|
-
<h3 class="mb-2 text-sm font-semibold text-slate-700">设备构成</h3>
|
|
154
|
-
<div id="breakdownChart" class="h-60 w-full sm:h-64" role="img" aria-label="饼图"></div>
|
|
155
309
|
</div>
|
|
156
|
-
</
|
|
157
|
-
</section>
|
|
310
|
+
</section>
|
|
158
311
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
312
|
+
<section class="mb-10" data-section-id="section-data-table">
|
|
313
|
+
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
314
|
+
<span
|
|
315
|
+
class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
316
|
+
>5</span
|
|
317
|
+
>
|
|
318
|
+
明细表
|
|
319
|
+
</h2>
|
|
320
|
+
<div
|
|
321
|
+
class="-mx-1 overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm sm:mx-0"
|
|
322
|
+
>
|
|
323
|
+
<p class="no-print px-3 pt-2 text-center text-[11px] text-slate-400 sm:hidden">
|
|
324
|
+
<i class="fa-solid fa-arrows-left-right mr-1" aria-hidden="true"></i>左右滑动查看更多列
|
|
325
|
+
</p>
|
|
326
|
+
<table
|
|
327
|
+
class="min-w-[640px] w-full divide-y divide-slate-200 text-left text-sm sm:text-base"
|
|
328
|
+
>
|
|
329
|
+
<thead class="bg-slate-100">
|
|
330
|
+
<tr>
|
|
331
|
+
<th class="whitespace-nowrap px-3 py-3 font-semibold">系列</th>
|
|
332
|
+
<th class="whitespace-nowrap px-3 py-3 font-semibold">花费</th>
|
|
333
|
+
<th class="whitespace-nowrap px-3 py-3 font-semibold">点击</th>
|
|
334
|
+
<th class="whitespace-nowrap px-3 py-3 font-semibold">转化</th>
|
|
335
|
+
<th class="whitespace-nowrap px-3 py-3 font-semibold">CVR</th>
|
|
336
|
+
<th class="whitespace-nowrap px-3 py-3 font-semibold">环比</th>
|
|
337
|
+
</tr>
|
|
338
|
+
</thead>
|
|
339
|
+
<tbody class="divide-y divide-slate-100">
|
|
340
|
+
<tr class="even:bg-slate-50/80">
|
|
341
|
+
<td class="whitespace-nowrap px-3 py-3 font-medium">品牌-搜索</td>
|
|
342
|
+
<td class="px-3 py-3 tabular-nums">¥4,200</td>
|
|
343
|
+
<td class="px-3 py-3 tabular-nums">2,100</td>
|
|
344
|
+
<td class="px-3 py-3 tabular-nums">98</td>
|
|
345
|
+
<td class="px-3 py-3 tabular-nums">4.7%</td>
|
|
346
|
+
<td class="px-3 py-3 text-emerald-600">+5%</td>
|
|
347
|
+
</tr>
|
|
348
|
+
<tr class="even:bg-slate-50/80">
|
|
349
|
+
<td class="whitespace-nowrap px-3 py-3 font-medium">通用-搜索</td>
|
|
350
|
+
<td class="px-3 py-3 tabular-nums">¥8,380</td>
|
|
351
|
+
<td class="px-3 py-3 tabular-nums">16,320</td>
|
|
352
|
+
<td class="px-3 py-3 tabular-nums">214</td>
|
|
353
|
+
<td class="px-3 py-3 tabular-nums">1.3%</td>
|
|
354
|
+
<td class="px-3 py-3 text-rose-600">−3%</td>
|
|
355
|
+
</tr>
|
|
356
|
+
</tbody>
|
|
357
|
+
</table>
|
|
171
358
|
</div>
|
|
172
|
-
|
|
173
|
-
<h3 class="mb-2 text-base font-bold text-amber-900"><i class="fa-solid fa-circle-exclamation mr-1" aria-hidden="true"></i>不足</h3>
|
|
174
|
-
<ul class="space-y-2 text-sm leading-relaxed text-amber-950 sm:text-base">
|
|
175
|
-
<li><strong>展示份额下滑</strong>。</li>
|
|
176
|
-
<li><strong>否词待补充</strong>。</li>
|
|
177
|
-
</ul>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
</section>
|
|
181
|
-
|
|
182
|
-
<section class="mb-10" data-section-id="section-data-table">
|
|
183
|
-
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
184
|
-
<span class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white">5</span>
|
|
185
|
-
明细表
|
|
186
|
-
</h2>
|
|
187
|
-
<div class="-mx-1 overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm sm:mx-0">
|
|
188
|
-
<p class="no-print px-3 pt-2 text-center text-[11px] text-slate-400 sm:hidden"><i class="fa-solid fa-arrows-left-right mr-1" aria-hidden="true"></i>左右滑动查看更多列</p>
|
|
189
|
-
<table class="min-w-[640px] w-full divide-y divide-slate-200 text-left text-sm sm:text-base">
|
|
190
|
-
<thead class="bg-slate-100"><tr>
|
|
191
|
-
<th class="whitespace-nowrap px-3 py-3 font-semibold">系列</th>
|
|
192
|
-
<th class="whitespace-nowrap px-3 py-3 font-semibold">花费</th>
|
|
193
|
-
<th class="whitespace-nowrap px-3 py-3 font-semibold">点击</th>
|
|
194
|
-
<th class="whitespace-nowrap px-3 py-3 font-semibold">转化</th>
|
|
195
|
-
<th class="whitespace-nowrap px-3 py-3 font-semibold">CVR</th>
|
|
196
|
-
<th class="whitespace-nowrap px-3 py-3 font-semibold">环比</th>
|
|
197
|
-
</tr></thead>
|
|
198
|
-
<tbody class="divide-y divide-slate-100">
|
|
199
|
-
<tr class="even:bg-slate-50/80"><td class="whitespace-nowrap px-3 py-3 font-medium">品牌-搜索</td><td class="px-3 py-3 tabular-nums">¥4,200</td><td class="px-3 py-3 tabular-nums">2,100</td><td class="px-3 py-3 tabular-nums">98</td><td class="px-3 py-3 tabular-nums">4.7%</td><td class="px-3 py-3 text-emerald-600">+5%</td></tr>
|
|
200
|
-
<tr class="even:bg-slate-50/80"><td class="whitespace-nowrap px-3 py-3 font-medium">通用-搜索</td><td class="px-3 py-3 tabular-nums">¥8,380</td><td class="px-3 py-3 tabular-nums">16,320</td><td class="px-3 py-3 tabular-nums">214</td><td class="px-3 py-3 tabular-nums">1.3%</td><td class="px-3 py-3 text-rose-600">−3%</td></tr>
|
|
201
|
-
</tbody>
|
|
202
|
-
</table>
|
|
203
|
-
</div>
|
|
204
|
-
</section>
|
|
359
|
+
</section>
|
|
205
360
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
<
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
361
|
+
<section class="mb-10" data-section-id="section-benchmark">
|
|
362
|
+
<h2 class="mb-3 flex items-center text-lg font-bold text-brand-700 sm:text-xl">
|
|
363
|
+
<span
|
|
364
|
+
class="mr-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
365
|
+
>6</span
|
|
366
|
+
>
|
|
367
|
+
vs 基准
|
|
368
|
+
</h2>
|
|
369
|
+
<div class="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
370
|
+
<table class="min-w-full divide-y divide-slate-200 text-sm sm:text-base">
|
|
371
|
+
<thead class="bg-slate-50">
|
|
372
|
+
<tr>
|
|
373
|
+
<th class="px-3 py-3 text-left font-semibold">指标</th>
|
|
374
|
+
<th class="px-3 py-3 text-right font-semibold">数据</th>
|
|
375
|
+
<th class="px-3 py-3 text-right font-semibold">基准</th>
|
|
376
|
+
<th class="px-3 py-3 text-left font-semibold">状态</th>
|
|
377
|
+
</tr>
|
|
378
|
+
</thead>
|
|
379
|
+
<tbody class="divide-y divide-slate-100">
|
|
380
|
+
<tr>
|
|
381
|
+
<td class="px-3 py-3">CTR</td>
|
|
382
|
+
<td class="px-3 py-3 text-right tabular-nums font-medium">1.49%</td>
|
|
383
|
+
<td class="px-3 py-3 text-right tabular-nums text-slate-500">1.2%</td>
|
|
384
|
+
<td class="px-3 py-3">
|
|
385
|
+
<span
|
|
386
|
+
class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-800"
|
|
387
|
+
>优于基准</span
|
|
388
|
+
>
|
|
389
|
+
</td>
|
|
390
|
+
</tr>
|
|
391
|
+
<tr>
|
|
392
|
+
<td class="px-3 py-3">CPA</td>
|
|
393
|
+
<td class="px-3 py-3 text-right tabular-nums font-medium">¥40.3</td>
|
|
394
|
+
<td class="px-3 py-3 text-right tabular-nums text-slate-500">¥45.0</td>
|
|
395
|
+
<td class="px-3 py-3">
|
|
396
|
+
<span
|
|
397
|
+
class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-800"
|
|
398
|
+
>优于基准</span
|
|
399
|
+
>
|
|
400
|
+
</td>
|
|
401
|
+
</tr>
|
|
402
|
+
</tbody>
|
|
403
|
+
</table>
|
|
404
|
+
</div>
|
|
405
|
+
</section>
|
|
226
406
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
407
|
+
<footer
|
|
408
|
+
class="border-t border-dashed border-slate-300 pt-5 text-xs text-slate-500 sm:text-sm"
|
|
409
|
+
>
|
|
410
|
+
<p>
|
|
411
|
+
移动优先版式参考 · 窄屏
|
|
412
|
+
<code class="rounded bg-slate-200/80 px-1">max-w-lg</code>；大屏与商务版同源组件。
|
|
413
|
+
</p>
|
|
414
|
+
</footer>
|
|
415
|
+
</main>
|
|
231
416
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
417
|
+
<script>
|
|
418
|
+
(function () {
|
|
419
|
+
var trendEl = document.getElementById("trendChart");
|
|
420
|
+
var pieEl = document.getElementById("breakdownChart");
|
|
421
|
+
if (!trendEl || !pieEl || typeof echarts === "undefined") return;
|
|
237
422
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
423
|
+
var trendChart = echarts.init(trendEl, null, { renderer: "canvas" });
|
|
424
|
+
trendChart.setOption({
|
|
425
|
+
color: ["#2563eb", "#ea580c"],
|
|
426
|
+
tooltip: { trigger: "axis" },
|
|
427
|
+
legend: { data: ["消耗(百元)", "点击(百次)"], top: 0 },
|
|
428
|
+
grid: { left: "2%", right: "2%", bottom: "2%", top: 44, containLabel: true },
|
|
429
|
+
xAxis: {
|
|
430
|
+
type: "category",
|
|
431
|
+
boundaryGap: false,
|
|
432
|
+
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
|
|
433
|
+
},
|
|
434
|
+
yAxis: { type: "value", splitLine: { lineStyle: { type: "dashed", color: "#e2e8f0" } } },
|
|
435
|
+
series: [
|
|
436
|
+
{
|
|
437
|
+
name: "消耗(百元)",
|
|
438
|
+
type: "line",
|
|
439
|
+
smooth: 0.35,
|
|
440
|
+
areaStyle: { opacity: 0.12 },
|
|
441
|
+
data: [200, 250, 220, 300, 280, 320, 310],
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
name: "点击(百次)",
|
|
445
|
+
type: "line",
|
|
446
|
+
smooth: 0.35,
|
|
447
|
+
areaStyle: { opacity: 0.1 },
|
|
448
|
+
data: [33, 48, 45, 60, 52, 68, 61],
|
|
449
|
+
},
|
|
450
|
+
],
|
|
451
|
+
});
|
|
251
452
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
453
|
+
var breakdownChart = echarts.init(pieEl, null, { renderer: "canvas" });
|
|
454
|
+
breakdownChart.setOption({
|
|
455
|
+
tooltip: { trigger: "item" },
|
|
456
|
+
legend: { orient: "horizontal", bottom: 0, left: "center" },
|
|
457
|
+
series: [
|
|
458
|
+
{
|
|
459
|
+
name: "设备",
|
|
460
|
+
type: "pie",
|
|
461
|
+
radius: ["36%", "58%"],
|
|
462
|
+
center: ["50%", "46%"],
|
|
463
|
+
itemStyle: { borderRadius: 4, borderColor: "#fff", borderWidth: 2 },
|
|
464
|
+
label: { formatter: "{b} {d}%", fontSize: 11 },
|
|
465
|
+
data: [
|
|
466
|
+
{ value: 52, name: "移动" },
|
|
467
|
+
{ value: 35, name: "桌面" },
|
|
468
|
+
{ value: 13, name: "平板" },
|
|
469
|
+
],
|
|
470
|
+
},
|
|
471
|
+
],
|
|
472
|
+
});
|
|
263
473
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
474
|
+
function resize() {
|
|
475
|
+
trendChart.resize();
|
|
476
|
+
breakdownChart.resize();
|
|
477
|
+
}
|
|
478
|
+
window.addEventListener("resize", resize);
|
|
479
|
+
window.addEventListener("orientationchange", function () {
|
|
480
|
+
setTimeout(resize, 200);
|
|
481
|
+
});
|
|
482
|
+
})();
|
|
483
|
+
</script>
|
|
484
|
+
</body>
|
|
270
485
|
</html>
|