-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathintro.html
More file actions
944 lines (880 loc) · 53.5 KB
/
Copy pathintro.html
File metadata and controls
944 lines (880 loc) · 53.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Analysis Plugin — 知识驱动的 AI 数据分析工作流</title>
<style>
:root {
--primary: #4f46e5;
--primary-light: #e0e7ff;
--primary-soft: #f5f3ff;
--accent: #0ea5e9;
--accent-light: #e0f2fe;
--success: #10b981;
--success-light: #d1fae5;
--warning: #f59e0b;
--warning-light: #fef3c7;
--text: #0f172a;
--text-secondary: #475569;
--text-tertiary: #94a3b8;
--bg: #ffffff;
--bg-warm: #fafaf9;
--bg-cool: #f8fafc;
--border: #e2e8f0;
--radius-sm: 8px;
--radius: 16px;
--radius-lg: 24px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
--shadow-md: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03);
--shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.06), 0 10px 10px -5px rgba(0,0,0,0.02);
--max-width: 1000px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text); background: var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased;
}
/* Nav */
nav {
position:fixed; top:0; left:0; right:0; z-index:100;
background:rgba(255,255,255,0.85); backdrop-filter:blur(16px) saturate(1.2);
border-bottom:1px solid var(--border);
}
nav .inner { max-width:var(--max-width); margin:0 auto; padding:0 28px; height:64px; display:flex; align-items:center; justify-content:space-between; }
nav .logo { font-weight:800; font-size:18px; color:var(--primary); letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; }
nav .links { display:flex; gap:28px; font-size:14px; font-weight:500; }
nav .links a { color:var(--text-secondary); text-decoration:none; transition:color .2s; }
nav .links a:hover { color:var(--primary); }
nav .links a.active { color:var(--primary); position:relative; }
nav .links a.active::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--primary); border-radius:1px; }
@media(max-width:720px){ nav .links { display:none; } }
/* Sections */
section { padding:100px 28px; }
section.alt { background:var(--bg-cool); }
section.warm { background:var(--bg-warm); }
.container { max-width:var(--max-width); margin:0 auto; }
/* Typography */
.sec-label { font-size:12px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.sec-title { font-size:36px; font-weight:800; letter-spacing:-1px; line-height:1.2; margin-bottom:16px; }
.sec-desc { font-size:17px; color:var(--text-secondary); max-width:640px; margin-bottom:56px; }
@media(max-width:640px){ .sec-title{font-size:28px;} .sec-desc{font-size:15px;} }
/* Hero */
.hero { padding-top:160px; padding-bottom:80px; text-align:center; position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:600px; background:radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%); pointer-events:none; z-index:0; }
.hero .container { position:relative; z-index:1; }
.hero h1 { font-size:52px; font-weight:900; letter-spacing:-2px; line-height:1.1; margin-bottom:24px; }
.hero h1 .grad { background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero .subtitle { font-size:19px; color:var(--text-secondary); max-width:580px; margin:0 auto 40px; line-height:1.7; }
.hero .badges { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:72px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:100px; font-size:13px; font-weight:600; background:var(--primary-soft); color:var(--primary); border:1px solid var(--primary-light); }
/* Highlight cards */
.h-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.h-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:32px 24px; text-align:center; transition:all .35s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; }
.h-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--accent)); opacity:0; transition:opacity .3s; }
.h-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary-light); }
.h-card:hover::before { opacity:1; }
.h-icon { width:56px; height:56px; margin:0 auto 18px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--primary-soft); }
.h-card h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
.h-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }
@media(max-width:900px){ .h-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .h-grid{grid-template-columns:1fr;} }
/* Value proposition cards */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:48px 0; }
.value-card { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; transition:all .3s; }
.value-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--primary-light); }
.value-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--primary), var(--accent)); opacity:0; transition:opacity .3s; }
.value-card:hover::before { opacity:1; }
.value-num { font-size:36px; font-weight:900; color:var(--primary); opacity:0.15; line-height:1; margin-bottom:8px; }
.value-card h4 { font-size:16px; font-weight:700; margin-bottom:10px; }
.value-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }
@media(max-width:900px){ .value-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .value-grid{grid-template-columns:1fr;} }
/* Timeline for workflow */
.timeline { display:flex; flex-direction:column; gap:0; margin:48px 0; position:relative; }
.timeline::before { content:''; position:absolute; left:24px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--primary), var(--accent)); border-radius:1px; }
.t-item { display:flex; gap:20px; align-items:flex-start; padding:24px 0; position:relative; z-index:2; }
.t-dot { width:48px; height:48px; min-width:48px; border-radius:50%; background:var(--bg); border:2px solid var(--primary); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--primary); position:relative; z-index:3; }
.t-content { flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); padding:24px 28px; transition:all .3s; }
.t-content:hover { border-color:var(--primary-light); box-shadow:var(--shadow-md); }
.t-content h4 { font-size:16px; font-weight:700; margin-bottom:6px; color:var(--text); }
.t-content p { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.t-meta { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600; background:var(--primary-soft); color:var(--primary); margin-top:8px; }
@media(max-width:640px){
.timeline::before { display:none; }
.t-item { flex-direction:column; gap:12px; padding:16px 0; }
.t-dot { width:36px; height:36px; min-width:36px; font-size:14px; align-self:flex-start; }
.t-content { padding:18px 20px; }
}
/* Scenario paths */
.path-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px; }
.path-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:all .3s; position:relative; }
.path-card:hover { box-shadow:var(--shadow-md); border-color:var(--primary-light); }
.path-card .path-tag { position:absolute; top:16px; right:16px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; background:var(--primary-soft); color:var(--primary); }
.path-card h4 { font-size:16px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.path-flow { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:14px; }
.path-step { padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; }
.path-step.s { background:var(--primary-soft); color:#4338ca; }
.path-step.m { background:var(--bg-warm); color:var(--text-secondary); border:1px dashed var(--border); }
.path-step.arr { color:var(--text-tertiary); font-size:11px; }
.path-out { font-size:13px; color:var(--text-secondary); line-height:1.6; }
@media(max-width:768px){ .path-grid{grid-template-columns:1fr;} }
/* Knowledge layers visual */
.layer-stack { display:flex; flex-direction:column; gap:0; margin:48px 0; }
.layer-item { display:flex; align-items:center; gap:20px; padding:20px 24px; border-radius:var(--radius-sm); position:relative; margin-bottom:16px; }
.layer-item::after { content:''; position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid var(--primary); }
.layer-item:last-child::after { display:none; }
.layer-num { width:36px; height:36px; min-width:36px; border-radius:50%; background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; }
.layer-text { flex:1; }
.layer-text h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
.layer-text p { font-size:13px; opacity:0.9; line-height:1.5; }
.layer-1 { background:linear-gradient(135deg, var(--primary), #6366f1); color:#fff; }
.layer-2 { background:linear-gradient(135deg, var(--primary-light), #c7d2fe); color:#3730a3; }
.layer-3 { background:linear-gradient(135deg, var(--primary-soft), #e0e7ff); color:#4338ca; }
/* Cards general */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:all .3s; }
.card:hover { box-shadow:var(--shadow-md); border-color:var(--primary-light); }
.card h3 { font-size:16px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.card p, .card li { font-size:14px; color:var(--text-secondary); line-height:1.65; }
.card ul { margin-top:10px; padding-left:18px; }
.card li { margin-bottom:5px; }
@media(max-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .card-grid{grid-template-columns:1fr;} .card-grid-2{grid-template-columns:1fr;} }
/* Task directory tree - modern */
.dir-tree { background:linear-gradient(145deg, #0f172a, #1e293b); border-radius:var(--radius); padding:32px; overflow-x:auto; }
.dir-tree pre { margin:0; font-family:"SF Mono", Monaco, "Cascadia Code", "Fira Code", monospace; font-size:13px; line-height:2.2; color:#e2e8f0; }
.dir-tree .d { color:#7dd3fc; font-weight:600; }
.dir-tree .f { color:#e2e8f0; }
.dir-tree .cmt { color:#64748b; }
.dir-tree .br { color:#475569; }
.dir-tree .hl { color:#fbbf24; font-weight:600; }
/* Architecture - modern diagram */
.arch-diagram { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; margin:48px 0; }
.arch-left { display:flex; flex-direction:column; gap:16px; }
.arch-center { display:flex; flex-direction:column; align-items:center; gap:12px; }
.arch-right { display:flex; flex-direction:column; gap:16px; }
.arch-box-new { border-radius:var(--radius); padding:20px; position:relative; transition:all .3s; }
.arch-box-new:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.arch-box-new h5 { font-size:14px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.arch-box-new p { font-size:12.5px; line-height:1.6; margin:0; }
.arch-box-new .tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.arch-box-new .tag { font-size:10px; font-weight:600; padding:2px 8px; border-radius:100px; background:rgba(255,255,255,0.2); }
.arch-main { background:linear-gradient(135deg, var(--primary), #6366f1); color:#fff; border:2px solid var(--primary); }
.arch-sub { background:var(--bg); border:1.5px solid var(--border); }
.arch-sub:hover { border-color:var(--success); }
.arch-sub h5 { color:var(--text); }
.arch-sub p { color:var(--text-secondary); }
.arch-connector { display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:24px; font-weight:700; }
.arch-connector-v { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--primary); }
.arch-connector-v span { font-size:20px; line-height:1; }
.arch-connector-v small { font-size:10px; color:var(--text-tertiary); font-weight:600; }
.arch-mobile-hint { display:none; text-align:center; margin:20px 0; padding:12px; background:var(--bg-warm); border-radius:var(--radius-sm); font-size:13px; color:var(--text-secondary); }
@media(max-width:768px){
.arch-diagram{grid-template-columns:1fr; gap:12px;}
.arch-center{display:none;}
.arch-mobile-hint{display:block;}
}
/* Scenario cards */
.scenario-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.scenario { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:all .35s cubic-bezier(.4,0,.2,1); }
.scenario:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--primary-light); }
.scenario-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.scenario-icon { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--primary-soft); display:flex; align-items:center; justify-content:center; font-size:20px; }
.scenario h3 { font-size:16px; font-weight:700; }
.scenario .tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; background:var(--primary-soft); color:var(--primary); margin-top:4px; display:inline-block; }
.scenario-flow { font-family:"SF Mono", Monaco, monospace; font-size:12.5px; color:var(--text-secondary); background:var(--bg-cool); padding:14px 16px; border-radius:var(--radius-sm); margin:14px 0; line-height:1.7; }
.scenario-out { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }
.scenario-out strong { color:var(--text); font-weight:600; }
.scenario-complexity { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.scenario-complexity-label { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.scenario-dots { display:flex; gap:6px; }
.scenario-dot { width:8px; height:8px; border-radius:50%; background:var(--border); }
.scenario-dot.on { background:var(--primary); }
@media(max-width:768px){ .scenario-grid{grid-template-columns:1fr;} }
/* Usage box */
.usage-box { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); padding:28px; margin-top:32px; }
.usage-box h4 { font-size:15px; font-weight:700; margin-bottom:16px; color:var(--primary); }
.usage-flow { display:flex; flex-direction:column; gap:12px; }
.u-step { display:flex; gap:14px; align-items:flex-start; }
.u-num { width:28px; height:28px; min-width:28px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.u-text { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.u-text strong { color:var(--text); font-weight:600; }
/* Table */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.skill-table { width:100%; border-collapse:collapse; font-size:14px; min-width:600px; }
.skill-table th { text-align:left; padding:14px 18px; font-weight:700; border-bottom:2px solid var(--border); color:var(--text-tertiary); font-size:11px; text-transform:uppercase; letter-spacing:.8px; }
.skill-table td { padding:14px 18px; border-bottom:1px solid var(--border); vertical-align:top; }
.skill-table tbody tr { transition:background .15s; }
.skill-table tbody tr:hover { background:var(--bg-cool); }
.skill-table code { font-family:"SF Mono", Monaco, monospace; font-size:12px; padding:3px 10px; background:var(--primary-soft); color:var(--primary); border-radius:6px; font-weight:600; }
.skill-table .desc { color:var(--text-secondary); font-size:13px; }
/* Section divider */
.sec-divider { height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:0 28px; max-width:var(--max-width); margin-left:auto; margin-right:auto; }
/* Footer */
footer { text-align:center; padding:60px 28px 40px; font-size:14px; color:var(--text-tertiary); border-top:1px solid var(--border); position:relative; }
footer p { margin-bottom:6px; }
/* Back to top */
.back-to-top {
position:fixed; bottom:28px; right:28px; width:44px; height:44px;
border-radius:50%; background:var(--bg); border:1.5px solid var(--border);
display:flex; align-items:center; justify-content:center;
font-size:18px; color:var(--text-secondary); cursor:pointer;
transition:all .3s; box-shadow:var(--shadow-md); z-index:99;
opacity:0; pointer-events:none; transform:translateY(10px);
}
.back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px); }
section[id] { scroll-margin-top:80px; }
/* Animations */
@keyframes fadeUp {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp .7s ease-out both; }
</style>
</head>
<body>
<nav>
<div class="inner">
<div class="logo">📊 Data Analysis Plugin</div>
<div class="links">
<a href="#why">为什么不一样</a>
<a href="#workflow">工作流</a>
<a href="#knowledge">知识库</a>
<a href="#task">任务管理</a>
<a href="#architecture">架构</a>
<a href="#scenarios">场景</a>
<a href="#start">开始</a>
</div>
</div>
</nav>
<!-- ===== HERO ===== -->
<section class="hero">
<div class="hero-glow"></div>
<div class="container">
<h1 class="fade-up">知识驱动的<br><span class="grad">AI 数据分析工作流</span></h1>
<p class="subtitle fade-up" style="animation-delay:.1s">
为数据分析师打造。覆盖从需求澄清到报告产出的完整闭环，<br>
同时自动沉淀可复用的领域知识——<strong>越用越聪明</strong>。
</p>
<div class="badges fade-up" style="animation-delay:.2s">
<span class="badge">🎯 Claude Code Plugin</span>
<span class="badge">🧠 知识驱动</span>
<span class="badge">📁 任务归档</span>
<span class="badge">🔄 自增长闭环</span>
</div>
<div class="h-grid fade-up" style="animation-delay:.3s">
<div class="h-card">
<div class="h-icon">🧠</div>
<h3>知识驱动</h3>
<p>维护表元信息、SQL 模板、指标口径、踩坑记录。Agent 基于积累的知识工作，不是每次从零开始。</p>
</div>
<div class="h-card">
<div class="h-icon">🔧</div>
<h3>节点组合</h3>
<p>15 个独立 Skill 像乐高一样灵活组合。单次查数只需一步，专题分析可跑完整闭环。</p>
</div>
<div class="h-card">
<div class="h-icon">📁</div>
<h3>任务归档</h3>
<p>每个分析任务独立目录，包含完整轨迹。3 个月后仍能重现当时的分析逻辑。</p>
</div>
<div class="h-card">
<div class="h-icon">🔄</div>
<h3>自增长闭环</h3>
<p>每次任务完成后自动提取可复用知识。你教它一次，它永远记得，形成复利。</p>
</div>
</div>
</div>
</section>
<!-- ===== WHY DIFFERENT ===== -->
<section id="why" class="alt">
<div class="container">
<div class="sec-label">Why Different</div>
<h2 class="sec-title">不是又一个 AI 取数工具</h2>
<p class="sec-desc">大多数 AI 数据分析工具的问题是：每次分析都从一张白纸开始。表结构要重新解释、口径要重新定义、踩过的坑要重新踩。</p>
<div class="value-grid">
<div class="value-card">
<div class="value-num">01</div>
<h4>知识驱动，越用越聪明</h4>
<p>你教它一次表结构和业务规则，它永远记得。你沉淀一个 SQL 模板，下次直接复用。你记录一个踩坑经验，下次分析自动提醒。</p>
</div>
<div class="value-card">
<div class="value-num">02</div>
<h4>节点级 Skill，灵活组合</h4>
<p>15 个独立 Skill 像乐高一样组合。单次查数只需一步，周报跑标准流程，专题分析跑完整闭环。按需取用，从不强制。</p>
</div>
<div class="value-card">
<div class="value-num">03</div>
<h4>每个分析都有档案</h4>
<p>一个任务 = 一个目录。分析方案、SQL、数据、脚本、图表、报告，全部归档。3 个月后仍能重现当时的分析逻辑。</p>
</div>
<div class="value-card">
<div class="value-num">04</div>
<h4>可复现的 Python 脚本</h4>
<p>所有生成的脚本遵循 D8 原则（可独立运行）：完整 import、清晰注释、不依赖插件环境。可直接发给同事或放进定时任务。</p>
</div>
<div class="value-card">
<div class="value-num">05</div>
<h4>报告数据来源可溯源</h4>
<p>每个数据点必须标注来源文件，主动识别数据缺口并在「数据范围说明」中标注。不做"看起来对但不知道哪来的"分析。</p>
</div>
<div class="value-card">
<div class="value-num">06</div>
<h4>精简有效的 Agent 架构</h4>
<p>不是"每个功能配一个 Agent"的堆砌。保留的每个 Agent 都有明确的理由：上下文小、职责单一、不直接操作文件。</p>
</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- ===== WORKFLOW ===== -->
<section id="workflow">
<div class="container">
<div class="sec-label">Workflow</div>
<h2 class="sec-title">不是一条直线，是一个闭环</h2>
<p class="sec-desc">7 个阶段构成可复用的分析流水线。每次分析的终点，都是下一次分析的起点。</p>
<!-- Timeline visualization -->
<div class="timeline">
<div class="t-item">
<div class="t-dot">1</div>
<div class="t-content">
<h4>🎯 需求澄清 — /da-ideate</h4>
<p>3-5 个问题把模糊想法变成可执行需求。明确分析目标、约束条件、成功标准。</p>
<span class="t-meta">可选 · 需求模糊时启动</span>
</div>
</div>
<div class="t-item">
<div class="t-dot">2</div>
<div class="t-content">
<h4>📐 分析规划 — /da-analyze</h4>
<p>制定分析框架、选择方法、定义指标体系。自动关联往期同系列报告做趋势对比。</p>
<span class="t-meta">核心 · 所有分析任务的起点</span>
</div>
</div>
<div class="t-item">
<div class="t-dot">3</div>
<div class="t-content">
<h4>📝 SQL 编写 — /da-sql</h4>
<p>基于知识库自动生成 HiveSQL。检索表元信息、SQL 模板、指标口径，不是从零写起。</p>
<span class="t-meta">核心 · 知识库直接赋能</span>
</div>
</div>
<div class="t-item">
<div class="t-dot">4</div>
<div class="t-content">
<h4>✅ SQL 验证 — /da-validate</h4>
<p>执行局部查询验证 SQL 逻辑正确性。通过后才保存到 final/，避免带着错误跑完全程。</p>
<span class="t-meta">可选 · 专题分析推荐启用</span>
</div>
</div>
<div class="t-item">
<div class="t-dot">5</div>
<div class="t-content">
<h4>📥 数据下载 — 手动执行</h4>
<p>在查数平台执行 final/ 下的 SQL，CSV 放入 data/。这个"手动步骤"是设计意图——确保你对原始数据有感知。</p>
<span class="t-meta">手动 · 数据安全把控点</span>
</div>
</div>
<div class="t-item">
<div class="t-dot">6</div>
<div class="t-content">
<h4>🔧 数据加工 — /da-process</h4>
<p>Python 清洗、计算、可视化。脚本自调试至正确运行（5 轮内自动修复错误），产出图表和加工后数据。</p>
<span class="t-meta">核心 · 脚本可独立运行</span>
</div>
</div>
<div class="t-item">
<div class="t-dot">7</div>
<div class="t-content">
<h4>📊 报告产出 — /da-report</h4>
<p>产出 Markdown 报告 + Excel。每个数据点标注来源，数据来源铁律：禁止编造。</p>
<span class="t-meta">核心 · 可交付成果</span>
</div>
</div>
<div class="t-item">
<div class="t-dot" style="background:var(--success); border-color:var(--success); color:#fff;">♻</div>
<div class="t-content" style="border-color:var(--success); background:linear-gradient(135deg, var(--success-light), #ecfdf5);">
<h4>🧠 知识沉淀 — /da-compound</h4>
<p>从任务产出中提取可复用知识：SQL 模板、指标口径、分析案例、踩坑记录。下次分析自动复用。</p>
<span class="t-meta" style="background:var(--success-light); color:var(--success);">闭环 · 越用越聪明的关键</span>
</div>
</div>
</div>
<div style="text-align:center; margin-top:40px;">
<div style="display:inline-flex; align-items:center; gap:12px; padding:16px 28px; border-radius:var(--radius); background:var(--primary-soft); border:2px dashed var(--primary-light);">
<span style="font-size:24px;">🔄</span>
<div style="text-align:left;">
<div style="font-size:14px; font-weight:700; color:var(--primary);">自增长闭环</div>
<div style="font-size:13px; color:var(--text-secondary);">compound 沉淀的知识 → 下次 sql/analyze 自动复用 → 知识库更丰富 → 分析更准确</div>
</div>
</div>
</div>
<!-- Different paths -->
<h3 style="margin-top:72px; margin-bottom:8px; font-size:22px; font-weight:700;">四种工作流，按需选择</h3>
<p style="color:var(--text-secondary); font-size:15px; margin-bottom:32px;">从单次查数到完整专题分析，像乐高一样灵活组合。不需要的环节自动跳过。</p>
<div class="path-grid">
<div class="path-card" style="border-top:4px solid var(--accent);">
<span class="path-tag">极简 · 1 步</span>
<h4>⚡ 单次查数</h4>
<div class="path-flow">
<span class="path-step s">/da-sql</span>
</div>
<div class="path-out"><strong>适用：</strong>日常取数、临时探查、快速验证<br><strong>产出：</strong>任务目录 + sql/draft/ 下的 HiveSQL，可直接在查数平台执行。</div>
</div>
<div class="path-card" style="border-top:4px solid var(--primary);">
<span class="path-tag">标准 · 4 步 + 下载</span>
<h4>📅 周报 / 月报</h4>
<div class="path-flow">
<span class="path-step s">/da-analyze</span><span class="path-step arr">→</span>
<span class="path-step s">/da-sql</span><span class="path-step arr">→</span>
<span class="path-step m">下载</span><span class="path-step arr">→</span>
<span class="path-step s">/da-process</span><span class="path-step arr">→</span>
<span class="path-step s">/da-report</span>
</div>
<div class="path-out"><strong>适用：</strong>周期性报告、指标体系稳定<br><strong>产出：</strong>分析方案 + SQL + 图表 + Markdown 报告 + Excel。自动关联往期做趋势对比。</div>
</div>
<div class="path-card" style="border-top:4px solid var(--success);">
<span class="path-tag">完整闭环 · 7 步</span>
<h4>🔬 专题分析</h4>
<div class="path-flow">
<span class="path-step s">/da-analyze</span><span class="path-step arr">→</span>
<span class="path-step s">/da-sql</span><span class="path-step arr">→</span>
<span class="path-step s">/da-validate</span><span class="path-step arr">→</span>
<span class="path-step m">下载</span><span class="path-step arr">→</span>
<span class="path-step s">/da-process</span><span class="path-step arr">→</span>
<span class="path-step s">/da-report</span><span class="path-step arr">→</span>
<span class="path-step s">/da-compound</span>
</div>
<div class="path-out"><strong>适用：</strong>深度分析、方法沉淀、知识积累<br><strong>产出：</strong>完整分析轨迹 + 沉淀到知识库的 SQL 模板、指标口径、分析案例。</div>
</div>
<div class="path-card" style="border-top:4px solid var(--warning);">
<span class="path-tag">分支合并 · 5 步</span>
<h4>🧪 实验分组 + 分析</h4>
<div class="path-flow">
<span class="path-step s">/da-split</span><span class="path-step arr">→</span>
<span class="path-step m">下载</span><span class="path-step arr">→</span>
<span class="path-step s">/da-analyze</span><span class="path-step arr">→</span>
<span class="path-step s">/da-sql</span><span class="path-step arr">→</span>
<span class="path-step s">/da-report</span>
</div>
<div class="path-out"><strong>适用：</strong>AB 实验、策略效果评估<br><strong>产出：</strong>分组结果 + 均衡性检验 + 实验效果分析报告。任务间自动建立依赖关系。</div>
</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- ===== KNOWLEDGE ===== -->
<section id="knowledge" class="alt">
<div class="container">
<div class="sec-label">Knowledge Base</div>
<h2 class="sec-title">你的专属分析大脑</h2>
<p class="sec-desc">大多数 AI 工具每次分析都从白纸开始。我们的核心设计是「知识驱动」——你教它一次，它永远记得。</p>
<div class="card-grid">
<div class="card" style="border-top:3px solid var(--primary);">
<h3>📋 表元信息</h3>
<p>DDL、字段说明、数据特征、常用筛选条件。SQL 编写时自动引用，不需要每次都解释表结构。</p>
</div>
<div class="card" style="border-top:3px solid var(--accent);">
<h3>🧩 SQL 模板</h3>
<p>按 L1-L4 分层：原子操作、子查询 CTE、计算模式（留存/漏斗/同期群）、完整查询。优先沉淀高复用价值的 L3。</p>
</div>
<div class="card" style="border-top:3px solid var(--success);">
<h3>📊 指标口径</h3>
<p>业务定义 + 计算逻辑 + 实现参考。同一指标可能从多张表计算，口径统一后不混淆。</p>
</div>
<div class="card" style="border-top:3px solid var(--warning);">
<h3>⚠️ 踩坑记录</h3>
<p>已踩过的坑、错误意识、检测方法。分析相同场景时自动 grep 召回提醒。</p>
</div>
<div class="card" style="border-top:3px solid #8b5cf6;">
<h3>🔗 JOIN 验证</h3>
<p>记录表间关联的 cardinality、验证结果、风险建议。避免重复验证同一对表。</p>
</div>
<div class="card" style="border-top:3px solid #ec4899;">
<h3>🧠 领域知识</h3>
<p>业务规则、实体关联、分析直觉。独立文件模式，按主题检索，适合难以结构化的经验。</p>
</div>
</div>
<h3 style="margin-top:64px; margin-bottom:8px; font-size:22px; font-weight:700;">三级漏斗检索：知识库再多也不拖垮</h3>
<p style="color:var(--text-secondary); font-size:15px; margin-bottom:32px">渐进式加载确保即使数百条知识，上下文依然轻盈。像漏斗一样，从粗到精。</p>
<div class="layer-stack">
<div class="layer-item layer-1">
<div class="layer-num">L1</div>
<div class="layer-text">
<h4>索引层 — 读 index.yaml 摘要</h4>
<p>始终加载，耗时 <1ms。了解知识库有哪些表、SQL 模板、指标、案例。</p>
</div>
</div>
<div class="layer-item layer-2">
<div class="layer-num">L2</div>
<div class="layer-text">
<h4>摘要层 — 读匹配条目的 frontmatter</h4>
<p>按 tags 筛选，约 10 条。快速判断哪些条目值得深入读取。</p>
</div>
</div>
<div class="layer-item layer-3">
<div class="layer-num">L3</div>
<div class="layer-text">
<h4>内容层 — 读完整内容</h4>
<p>仅 top-N 高度相关，约 3 条。作为编写 SQL 或分析方案的核心上下文。</p>
</div>
</div>
</div>
<div class="usage-box">
<h4>💡 示例：/da-sql 如何使用知识库</h4>
<div class="usage-flow">
<div class="u-step">
<div class="u-num">1</div>
<div class="u-text"><strong>读索引</strong>：扫描 index.yaml，了解知识库有哪些表、SQL 模板、指标</div>
</div>
<div class="u-step">
<div class="u-num">2</div>
<div class="u-text"><strong>关键词匹配</strong>：按分析需求中的表名、指标名、业务标签筛选相关条目</div>
</div>
<div class="u-step">
<div class="u-num">3</div>
<div class="u-text"><strong>读取摘要</strong>：读取匹配条目的 frontmatter，快速判断哪些值得深入读取</div>
</div>
<div class="u-step">
<div class="u-num">4</div>
<div class="u-text"><strong>读取全文</strong>：仅读取 top-N（通常 ≤10 个文件）的完整内容，作为编写 SQL 的上下文</div>
</div>
<div class="u-step">
<div class="u-num">5</div>
<div class="u-text"><strong>编写 SQL</strong>：基于检索到的表结构、SQL 模板、指标口径生成 HiveSQL</div>
</div>
</div>
</div>
<h3 style="margin-top:64px; margin-bottom:8px; font-size:22px; font-weight:700">知识自增长闭环</h3>
<p style="color:var(--text-secondary); font-size:15px; margin-bottom:32px">冷启动 → 主动录入 → 分析任务 → 自动沉淀 → 下次复用。每次循环，知识库都比上一次更丰富。</p>
<div class="cycle-wrap" style="display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:32px 0;">
<div style="text-align:center; padding:20px 24px; background:var(--bg); border:2px solid var(--primary-light); border-radius:var(--radius); min-width:160px;">
<div style="font-size:28px; margin-bottom:8px;">🚀</div>
<div style="font-size:14px; font-weight:700; color:var(--primary); margin-bottom:4px;">冷启动</div>
<div style="font-size:12px; color:var(--text-secondary);">/da-setup<br>录入核心资产</div>
</div>
<div style="font-size:24px; color:var(--primary);">→</div>
<div style="text-align:center; padding:20px 24px; background:var(--bg); border:2px solid var(--border); border-radius:var(--radius); min-width:160px;">
<div style="font-size:28px; margin-bottom:8px;">✍️</div>
<div style="font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px;">主动录入</div>
<div style="font-size:12px; color:var(--text-secondary);">/da-ingest-*<br>补充表/SQL/案例</div>
</div>
<div style="font-size:24px; color:var(--primary);">→</div>
<div style="text-align:center; padding:20px 24px; background:var(--bg); border:2px solid var(--border); border-radius:var(--radius); min-width:160px;">
<div style="font-size:28px; margin-bottom:8px;">🔍</div>
<div style="font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px;">分析任务</div>
<div style="font-size:12px; color:var(--text-secondary);">基于知识库<br>生成 SQL/报告</div>
</div>
<div style="font-size:24px; color:var(--primary);">→</div>
<div style="text-align:center; padding:20px 24px; background:var(--bg); border:2px solid var(--success); border-radius:var(--radius); min-width:160px;">
<div style="font-size:28px; margin-bottom:8px;">💎</div>
<div style="font-size:14px; font-weight:700; color:var(--success); margin-bottom:4px;">自动沉淀</div>
<div style="font-size:12px; color:var(--text-secondary);">/da-compound<br>提取可复用知识</div>
</div>
<div style="font-size:24px; color:var(--primary);">→</div>
<div style="text-align:center; padding:20px 24px; background:var(--primary-soft); border:2px solid var(--primary-light); border-radius:var(--radius); min-width:160px;">
<div style="font-size:28px; margin-bottom:8px;">🎯</div>
<div style="font-size:14px; font-weight:700; color:var(--primary); margin-bottom:4px;">下次复用</div>
<div style="font-size:12px; color:var(--text-secondary);">知识库更丰富<br>分析更准确</div>
</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- ===== TASK ===== -->
<section id="task">
<div class="container">
<div class="sec-label">Task Management</div>
<h2 class="sec-title">每个分析都有档案</h2>
<p class="sec-desc">一个任务 = 一个目录。完整的分析轨迹，随时可回溯、可复现、可对比。</p>
<div class="dir-tree">
<pre>outputs/adhoc/2026-05-24-dau-trend/
<span class="br">├── </span><span class="hl">task.yaml</span> <span class="cmt"># 任务元信息</span>
<span class="br">├── </span><span class="hl">README.md</span> <span class="cmt"># 自描述文档</span>
<span class="br">├── </span><span class="hl">analysis-plan.md</span> <span class="cmt"># 分析方案</span>
<span class="br">├── </span><span class="d">sql/</span>
<span class="br">│ ├── </span><span class="d">draft/</span> <span class="cmt"># 初版 SQL</span>
<span class="br">│ └── </span><span class="d">final/</span> <span class="cmt"># 验证通过的 SQL</span>
<span class="br">├── </span><span class="d">data/</span> <span class="cmt"># 原始数据</span>
<span class="br">├── </span><span class="d">scripts/</span> <span class="cmt"># Python 脚本</span>
<span class="br">├── </span><span class="d">figures/</span> <span class="cmt"># 可视化图表</span>
<span class="br">├── </span><span class="d">processed/</span> <span class="cmt"># 加工后数据</span>
<span class="br">└── </span><span class="d">report/</span> <span class="cmt"># Markdown + Excel</span></pre>
</div>
<div class="card-grid" style="margin-top:32px;">
<div class="card">
<h3>📌 活跃任务指针</h3>
<p>每个 Skill 启动时自动发现当前任务，不需要手动传路径。创建新任务时，旧任务自动归档。</p>
</div>
<div class="card">
<h3>🔗 任务关联</h3>
<p>周报系列通过 series + previous 自动关联往期。实验分析任务通过 depends_on 依赖分组任务。</p>
</div>
<div class="card">
<h3>🔄 可复现</h3>
<p>所有 Python 脚本包含完整 import 和清晰注释，不依赖插件环境。可直接发给同事或放进定时任务。</p>
</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- ===== ARCHITECTURE ===== -->
<section id="architecture" class="alt">
<div class="container">
<div class="sec-label">Architecture</div>
<h2 class="sec-title">Skill 编排，Agent 执行</h2>
<p class="sec-desc">Skill（mainAgent）负责流程编排、用户对话、文件操作。Agent（subAgent）负责专业领域的思考工作。确定性操作全部脚本化。</p>
<div class="arch-mobile-hint">🎬 Skill 编排流程 → 调度 🤖 Agent 执行专业任务 → 通过 ⚙️ Scripts 完成确定性操作</div>
<div class="arch-diagram">
<div class="arch-left">
<div class="arch-box-new arch-main">
<h5>🎬 Skill（mainAgent）</h5>
<p>流程编排 · 用户对话 · 文件操作 · 状态管理 · 知识库检索 · 结果校验</p>
<div class="tags">
<span class="tag">导演</span>
<span class="tag">编排者</span>
<span class="tag">交互者</span>
</div>
</div>
<div class="arch-box-new arch-sub">
<h5>⚙️ Scripts</h5>
<p>确定性操作：task-toolkit · knowledge-toolkit</p>
<div class="tags">
<span class="tag">幂等</span>
<span class="tag">可审计</span>
</div>
</div>
</div>
<div class="arch-center">
<div class="arch-connector-v">
<span>→</span>
<small>调度</small>
</div>
<div style="height:60px;"></div>
<div class="arch-connector-v">
<span>←</span>
<small>结果</small>
</div>
</div>
<div class="arch-right">
<div class="arch-box-new arch-sub">
<h5>📝 SQL Writer</h5>
<p>检索知识库 → 编写 HiveSQL</p>
<div class="tags">
<span class="tag">不写文件</span>
<span class="tag">返回内容</span>
</div>
</div>
<div class="arch-box-new arch-sub">
<h5>✅ SQL Validator</h5>
<p>设计验证方案，但不执行</p>
<div class="tags">
<span class="tag">不写文件</span>
<span class="tag">返回方案</span>
</div>
</div>
<div class="arch-box-new arch-sub">
<h5>🐍 Processor</h5>
<p>生成脚本 → 自调试至正确运行</p>
<div class="tags">
<span class="tag">写 scripts/</span>
<span class="tag">自调试</span>
</div>
</div>
<div class="arch-box-new arch-sub">
<h5>📄 Reporter</h5>
<p>撰写报告 → 数据来源可溯源</p>
<div class="tags">
<span class="tag">写 report/</span>
<span class="tag">溯源</span>
</div>
</div>
<div class="arch-box-new arch-sub">
<h5>🔍 Table Profiler</h5>
<p>单表数据特征摸排</p>
<div class="tags">
<span class="tag">不写文件</span>
<span class="tag">返回计划</span>
</div>
</div>
<div class="arch-box-new arch-sub">
<h5>📚 Knowledge Indexer</h5>
<p>解析 → 去重 → 模板渲染 → 脚本写入</p>
<div class="tags">
<span class="tag">调用脚本</span>
<span class="tag">不直接写</span>
</div>
</div>
</div>
</div>
<div class="card-grid-2" style="margin-top:48px;">
<div class="card">
<h3>🎬 Skill 是导演</h3>
<ul>
<li>决定什么时候调用哪个 Agent</li>
<li>负责与用户的所有对话（AskUserQuestion）</li>
<li>管理任务状态和文件操作</li>
<li>对 Agent 返回的内容做 double-check</li>
</ul>
</div>
<div class="card">
<h3>🤖 Agent 是演员</h3>
<ul>
<li>只负责专业领域的「思考」工作</li>
<li>大部分 Agent <strong>返回内容而非直接写入</strong></li>
<li>不直接操作文件系统（确定性操作交给脚本）</li>
<li>不直接与用户交互（由 Skill 负责）</li>
</ul>
</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- ===== SCENARIOS ===== -->
<section id="scenarios">
<div class="container">
<div class="sec-label">Scenarios</div>
<h2 class="sec-title">灵活适配不同场景</h2>
<p class="sec-desc">从单次查数到完整专题分析，按需组合 Skill。不需要的环节自动跳过，不会强制跑完整流程。</p>
<div class="scenario-grid">
<div class="scenario" style="border-top:4px solid var(--accent);">
<div class="scenario-head">
<div class="scenario-icon" style="background:var(--accent-light);">⚡</div>
<div>
<h3>单次查数</h3>
<span class="tag">1 步完成</span>
</div>
</div>
<div class="scenario-flow">/da-sql "昨天各城市 DAU"</div>
<div class="scenario-out"><strong>产出：</strong>任务目录 + sql/draft/ 下的 HiveSQL，可直接在查数平台执行。</div>
<div class="scenario-complexity">
<div class="scenario-complexity-label">复杂度</div>
<div class="scenario-dots"><div class="scenario-dot on"></div><div class="scenario-dot"></div><div class="scenario-dot"></div><div class="scenario-dot"></div></div>
</div>
</div>
<div class="scenario" style="border-top:4px solid var(--primary);">
<div class="scenario-head">
<div class="scenario-icon" style="background:var(--primary-soft);">📅</div>
<div>
<h3>周报 / 月报</h3>
<span class="tag">4 步 + 下载</span>
</div>
</div>
<div class="scenario-flow">/da-analyze → /da-sql → 下载 → /da-process → /da-report</div>
<div class="scenario-out"><strong>产出：</strong>分析方案 + SQL + 图表 + Markdown 报告 + Excel。自动关联往期报告做趋势对比。</div>
<div class="scenario-complexity">
<div class="scenario-complexity-label">复杂度</div>
<div class="scenario-dots"><div class="scenario-dot on"></div><div class="scenario-dot on"></div><div class="scenario-dot on"></div><div class="scenario-dot"></div></div>
</div>
</div>
<div class="scenario" style="border-top:4px solid var(--success);">
<div class="scenario-head">
<div class="scenario-icon" style="background:var(--success-light);">🔬</div>
<div>
<h3>专题分析</h3>
<span class="tag">完整闭环</span>
</div>
</div>
<div class="scenario-flow">/da-analyze → /da-sql → /da-validate → 下载 → /da-process → /da-report → /da-compound</div>
<div class="scenario-out"><strong>产出：</strong>完整分析轨迹 + 沉淀到知识库的 SQL 模板、指标口径、分析案例。</div>
<div class="scenario-complexity">
<div class="scenario-complexity-label">复杂度</div>
<div class="scenario-dots"><div class="scenario-dot on"></div><div class="scenario-dot on"></div><div class="scenario-dot on"></div><div class="scenario-dot on"></div></div>
</div>
</div>
<div class="scenario" style="border-top:4px solid var(--warning);">
<div class="scenario-head">
<div class="scenario-icon" style="background:var(--warning-light);">🧪</div>
<div>
<h3>实验分组 + 分析</h3>
<span class="tag">分支合并</span>
</div>
</div>
<div class="scenario-flow">/da-split → 下载 → /da-analyze → /da-sql → /da-report</div>
<div class="scenario-out"><strong>产出：</strong>分组结果 + 均衡性检验 + 实验效果分析报告。任务间自动建立依赖关系。</div>
<div class="scenario-complexity">
<div class="scenario-complexity-label">复杂度</div>
<div class="scenario-dots"><div class="scenario-dot on"></div><div class="scenario-dot on"></div><div class="scenario-dot on"></div><div class="scenario-dot"></div></div>
</div>
</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- ===== QUICK START ===== -->
<section id="start" class="alt">
<div class="container">
<div class="sec-label">Quick Start</div>
<h2 class="sec-title">3 步上手</h2>
<p class="sec-desc">体验知识驱动的数据分析工作流。</p>
<div class="card-grid">
<div class="card" style="border-top:3px solid var(--primary);">
<h3><span style="display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; font-size:14px; font-weight:700; margin-right:10px;">1</span> 冷启动</h3>
<p>运行 <code style="font-family:monospace; background:var(--primary-soft); color:var(--primary); padding:2px 8px; border-radius:4px; font-size:13px; font-weight:600;">/da-setup</code>，引导配置查数工具、录入核心表和指标，初始化知识库索引。</p>
</div>
<div class="card" style="border-top:3px solid var(--accent);">
<h3><span style="display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-size:14px; font-weight:700; margin-right:10px;">2</span> 试跑查数</h3>
<p>运行 <code style="font-family:monospace; background:var(--accent-light); color:#0369a1; padding:2px 8px; border-radius:4px; font-size:13px; font-weight:600;">/da-sql "昨天各城市的 DAU"</code>，观察 Agent 如何基于知识库自动生成 HiveSQL。</p>
</div>
<div class="card" style="border-top:3px solid var(--success);">
<h3><span style="display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--success); color:#fff; font-size:14px; font-weight:700; margin-right:10px;">3</span> 查看帮助</h3>
<p>运行 <code style="font-family:monospace; background:var(--success-light); color:#047857; padding:2px 8px; border-radius:4px; font-size:13px; font-weight:600;">/da-help</code> 查看完整功能概览和每个 Skill 的详细用法。</p>
</div>
</div>
<h3 style="margin-top:64px; margin-bottom:20px; font-size:20px; font-weight:700">15 个 Skill 速查</h3>
<div class="table-wrap">
<table class="skill-table">
<thead><tr><th>Skill</th><th>命令</th><th>说明</th></tr></thead>
<tbody>
<tr><td>需求澄清</td><td><code>/da-ideate</code></td><td class="desc">3-5 个问题把模糊想法变成可执行需求</td></tr>
<tr><td>分析规划</td><td><code>/da-analyze</code></td><td class="desc">制定分析框架、选择方法、定义指标体系</td></tr>
<tr><td>SQL 编写</td><td><code>/da-sql</code></td><td class="desc">基于知识库生成 HiveSQL</td></tr>
<tr><td>SQL 验证</td><td><code>/da-validate</code></td><td class="desc">执行局部查询验证 SQL 逻辑正确性</td></tr>
<tr><td>数据加工</td><td><code>/da-process</code></td><td class="desc">Python 清洗、计算、可视化（脚本可独立运行）</td></tr>
<tr><td>报告撰写</td><td><code>/da-report</code></td><td class="desc">产出 Markdown 报告 + Excel（数据来源可溯源）</td></tr>
<tr><td>实验分组</td><td><code>/da-split</code></td><td class="desc">样本分组打平 + 均衡性检验</td></tr>
<tr><td>知识沉淀</td><td><code>/da-compound</code></td><td class="desc">从任务产出中提取可复用知识</td></tr>
<tr><td>冷启动</td><td><code>/da-setup</code></td><td class="desc">初始化知识库和配置</td></tr>
<tr><td>录入表</td><td><code>/da-ingest-table</code></td><td class="desc">录入表元信息（支持数据特征摸排）</td></tr>
<tr><td>录入 SQL</td><td><code>/da-ingest-sql</code></td><td class="desc">录入 SQL 模板</td></tr>
<tr><td>录入案例</td><td><code>/da-ingest-case</code></td><td class="desc">录入分析案例和框架</td></tr>
<tr><td>领域知识</td><td><code>/da-ingest-domain</code></td><td class="desc">录入业务规则和分析直觉</td></tr>
<tr><td>知识历史</td><td><code>/da-knowledge-history</code></td><td class="desc">查看知识库版本历史和差异</td></tr>
<tr><td>帮助</td><td><code>/da-help</code></td><td class="desc">查看插件功能概览</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<footer>
<p><strong>Data Analysis Plugin</strong> — 知识驱动的 AI 数据分析工作流</p>
<p>基于 Claude Code Skill + Agent 架构 · 为数据分析师打造</p>
</footer>
<div class="back-to-top" id="btt" onclick="window.scrollTo({top:0,behavior:'smooth'})">↑</div>
<script>
// Nav active highlight
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('nav .links a');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.toggle('active', link.getAttribute('href') === '#' + entry.target.id);
});
}
});
}, { rootMargin: '-40% 0px -55% 0px' });
sections.forEach(s => observer.observe(s));
// Back to top visibility
const btt = document.getElementById('btt');
window.addEventListener('scroll', () => {
btt.classList.toggle('visible', window.scrollY > 600);
});
</script>
</body>
</html>