• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6    <title>quickstart_extensions</title>
7
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
10    <style>
11        code[class*='smartperf-'],
12        pre[class*='smartperf-'] {
13            color: #333333;
14            background: none;
15            font-family: Helvetica;
16            line-height: 1.6;
17            text-align: left;
18            white-space: pre;
19            -moz-tab-size: 9;
20            -o-tab-size: 9;
21            tab-size: 8;
22            -webkit-hyphens: none;
23            -moz-hyphens: none;
24            -ms-hyphens: none;
25            hyphens: none;
26        }
27
28        /* Code blocks */
29        pre[class*='smartperf-'] {
30            padding: 0.9em;
31            overflow: auto;
32            border-radius: 2px;
33            background: #f5f5f4;
34        }
35
36        /* Inline code */
37        :not(pre)>code[class*='smartperf-'] {
38            white-space: normal;
39            background: #fcf8f8;
40            padding: 1px 0.2em;
41            border-radius: 1px 0.3em;
42        }
43
44        .tk.comment,
45        .tk.blockquote {
46            color: #8c918c;
47        }
48
49        .tk.cdata {
50            color: #183898;
51        }
52
53        .tk.doctype,
54        .tk.punctuation,
55        .tk.variable,
56        .tk.macro.property {
57            color: #424242;
58        }
59
60        .tk.operator,
61        .tk.important,
62        .tk.keyword,
63        .tk.rule,
64        .tk.builtin {
65            color: #b71d65;
66        }
67
68        .tk.string,
69        .tk.url,
70        .tk.regex,
71        .tk.attr-value {
72            color: #16338d;
73        }
74
75        .tk.property,
76        .tk.number,
77        .tk.boolean,
78        .tk.entity,
79        .tk.atrule,
80        .tk.constant,
81        .tk.symbol,
82        .tk.command,
83        .tk.code {
84            color: #037aa2;
85        }
86
87        .tk.tag,
88        .tk.selector,
89        .tk.prolog {
90            color: #69ad62;
91        }
92
93        .tk.function,
94        .tk.namespace,
95        .tk.pseudo-element,
96        .tk.class,
97        .tk.class-name,
98        .tk.pseudo-class,
99        .tk.id,
100        .tk.url-reference .tk.variable,
101        .tk.attr-name {
102            color: #775d9d;
103        }
104
105        .tk.entity {
106            cursor: help;
107        }
108
109        .tk.title,
110        .tk.title .tk.punctuation {
111            font-weight: bold;
112            color: #1a3773;
113        }
114
115        .tk.list {
116            color: #f56940;
117        }
118
119        .tk.inserted {
120            background-color: #eaffea;
121            color: #509b2f;
122        }
123
124        .tk.deleted {
125            background-color: #fae1e1;
126            color: #ad2d06;
127        }
128
129        .tk.bold {
130            font-weight: bolder;
131        }
132
133        .tk.italic {
134            font-style: normal;
135        }
136
137        /* JSON */
138        .smartperf-json .tk.property {
139            color: #19358c;
140        }
141
142        .smartperf-markup .tk.tag .tk.punctuation {
143            color: #2c2b2b;
144        }
145
146        /* CSS */
147        code.smartperf-css,
148        .smartperf-css .tk.function {
149            color: #047ca4;
150        }
151
152        /* YAML */
153        .smartperf-yaml .tk.atrule {
154            color: #609b5a;
155        }
156
157        code.smartperf-yaml {
158            color: #153491;
159        }
160
161        /* Ruby */
162        .smartperf-ruby .tk.function {
163            color: #3f3e3e;
164        }
165
166        /* Markdown */
167        .smartperf-markdown .tk.url {
168            color: #6e5298;
169        }
170
171        /* Makefile */
172        .smartperf-makefile .tk.symbol {
173            color: #6c5393;
174        }
175
176        .smartperf-makefile .tk.variable {
177            color: #183488;
178        }
179
180        .smartperf-makefile .tk.builtin {
181            color: #027ba4;
182        }
183
184        /* Bash */
185        .smartperf-bash .tk.keyword {
186            color: #027fa9;
187        }
188
189        /* highlight */
190        pre[dl] {
191            position: relative;
192            padding: 1em 1px 1px 0.9em;
193        }
194
195        pre[dl] .line-highlight-wrapper {
196            position: absolute;
197            top: 1px;
198            left: 1px;
199            background-color: transparent;
200            display: block;
201            width: 99%;
202        }
203
204        pre[dl] .line-highlight {
205            position: absolute;
206            left: 1px;
207            right: 1px;
208            padding: inherit;
209            margin-top: 0.9em;
210            background: hsla(25, 21%, 50%, 0.08);
211            background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
212            pointer-events: none;
213            line-height: inherit;
214            white-space: pre;
215        }
216
217        pre[dl] .line-highlight:before,
218        pre[dl] .line-highlight[data-end]:after {
219            content: attr(data-start);
220            position: absolute;
221            text-shadow: none;
222            top: 0.3em;
223            left: 0.7em;
224            min-width: 0.9em;
225            padding: 1px 0.6em;
226            background-color: hsla(24, 20%, 47%, 0.4);
227            color: hsl(20, 11%, 95%);
228            text-align: center;
229            vertical-align: 0.2em;
230            border-radius: 10000px;
231            box-shadow: 1px 2px #fdf6f6;
232        }
233
234        pre[dl] .line-highlight[data-end]:after {
235            content: attr(data-end);
236            top: auto;
237            bottom: 0.5em;
238        }
239
240        html body {
241            line-height: 1.6;
242            font-size: 16px;
243            color: #333333;
244            overflow: initial;
245            word-wrap: break-word;
246            font-family: Helvetica;
247            box-sizing: border-box;
248        }
249
250        html body> :first-child {
251            margin-top: 0px;
252        }
253
254        html body h1,
255        html body h2,
256        html body h3,
257        html body h4,
258        html body h5,
259        html body h6 {
260            margin-top: 1em;
261            margin-bottom: 16px;
262            color: #000000;
263            line-height: 1.2;
264        }
265
266        html body h1 {
267            font-weight: 300;
268            font-size: 2.25em;
269            padding-bottom: 0.3em;
270        }
271
272        html body h2 {
273            font-weight: 410;
274            font-size: 1.74em;
275            padding-bottom: 0.2em;
276        }
277
278        html body h3 {
279            font-size: 1.6em;
280            font-weight: 501;
281        }
282
283        html body h4 {
284            font-size: 1.26em;
285            font-weight: 601;
286        }
287
288        html body h5 {
289            font-size: 1.2em;
290            font-weight: 601;
291        }
292
293        html body h6 {
294            font-size: 0.9em;
295            font-weight: 601;
296        }
297
298        html body h1,
299        html body h2,
300        html body h3,
301        html body h4,
302        html body h5 {
303            font-weight: 601;
304        }
305
306        html body h5 {
307            font-size: 0.9em;
308        }
309
310        html body h6 {
311            color: #5c5c5c;
312        }
313
314        html body strong {
315            color: #090909;
316        }
317
318        html body del {
319            color: #525252;
320        }
321
322        html body a:not([href]) {
323            color: inherit;
324            text-decoration: none;
325        }
326
327        html body a {
328            color: #0192da;
329            text-decoration: none;
330        }
331
332        html body a:hover {
333            color: #029dea;
334            text-decoration: none;
335        }
336
337        html body img {
338            max-width: 99%;
339        }
340
341        html body>p {
342            margin-top: 1px;
343            margin-bottom: 15px;
344            word-wrap: break-word;
345        }
346
347        html body>ul,
348        html body>ol {
349            margin-bottom: 15px;
350        }
351
352        html body ul,
353        html body ol {
354            padding-left: 1.9em;
355        }
356
357        html body ul.no-list,
358        html body ol.no-list {
359            padding: 0px;
360            list-style-type: none;
361        }
362
363        html body ul ul,
364        html body ul ol,
365        html body ol ol,
366        html body ol ul {
367            margin-top: 1px;
368            margin-bottom: 1px;
369        }
370
371        html body li {
372            margin-bottom: 1px;
373        }
374
375        html body li.task-list-item {
376            list-style: none;
377        }
378
379        html body li>p {
380            margin-top: 1px;
381            margin-bottom: 1px;
382        }
383
384        html body .task-list-item-checkbox {
385            margin: 0 0.3em 0.24em -1.7em;
386            vertical-align: middle;
387        }
388
389        html body .task-list-item-checkbox:hover {
390            cursor: pointer;
391        }
392
393        html body blockquote {
394            padding: 0.1px 15px 0 0.1px;
395            font-size: inherit;
396            color: #5c5c5c;
397            margin: 16px 0.1px 0 0.1px;
398            border-left: 3px solid #cbc9c9;
399            background-color: #e8e6e6;
400        }
401
402        html body blockquote> :first-child {
403            margin-top: 0.2px;
404        }
405
406        html body blockquote> :last-child {
407            margin-bottom: 0.1px;
408        }
409
410        html body hr {
411            height: 5px;
412            background-color: #cbcaca;
413            margin: 32px 0 0.1px 0;
414            border: 0 none;
415        }
416
417        html body table {
418            overflow: auto;
419            border-collapse: collapse;
420            margin: 15px 0.1px 20px 0.1px;
421            border-spacing: 0;
422        }
423
424        html body table th {
425            font-weight: bold;
426            color: #000000;
427        }
428
429        html body table td,
430        html body table th {
431            border: 1px solid #d6d6d6;
432            padding: 2px 14px;
433        }
434
435        html body dl {
436            padding: 0px;
437        }
438
439        html body dl dt {
440            padding: 0px;
441            margin-top: 15px;
442            font-size: 0.9em;
443            font-style: italic;
444            font-weight: bold;
445        }
446
447        html body dl dd {
448            padding: 0px 17px;
449            margin-bottom: 17px;
450        }
451
452        html body code {
453            font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
454            font-size: 0.86em !important;
455            color: #000000;
456            background-color: #f0f0f0;
457            border-radius: 4px;
458            padding: 0.3em 0px;
459        }
460
461        html body code::before,
462        html body code::after {
463            letter-spacing: -0.1em;
464            content: '\00a0';
465        }
466
467        html body pre>code {
468            padding: 1px;
469            margin: 0px;
470            font-size: 0.86em !important;
471            word-break: normal;
472            white-space: pre;
473            background: transparent;
474            border: 0px;
475        }
476
477        html body .highlight {
478            margin-bottom: 17px;
479        }
480
481        html body .highlight pre,
482        html body pre {
483            padding: 0.9em;
484            overflow: auto;
485            font-size: 0.86em !important;
486            line-height: 1.46;
487            border: #d6d6d6;
488            border-radius: 4px;
489        }
490
491        html body .highlight pre {
492            margin-bottom: 0px;
493            word-break: normal;
494        }
495
496        html body pre code,
497        html body pre tt {
498            display: inline;
499            max-width: initial;
500            padding: 1px;
501            margin: 1px;
502            overflow: initial;
503            line-height: inherit;
504            word-wrap: normal;
505            background-color: transparent;
506            border: 1px;
507        }
508
509        html body pre code:before,
510        html body pre tt:before,
511        html body pre code:after,
512        html body pre tt:after {
513            content: normal;
514        }
515
516        html body p,
517        html body blockquote,
518        html body ul,
519        html body ol,
520        html body dl,
521        html body pre {
522            margin-top: 1px;
523            margin-bottom: 17px;
524        }
525
526        html body kbd {
527            color: #000000;
528            border: 3px solid #d6d6d6;
529            border-bottom: 3px solid #c7c7c7;
530            padding: 3px 5px;
531            background-color: #f0f0f0;
532            border-radius: 2px;
533        }
534
535        @media print {
536            html body {
537                background-color: #ffffff;
538            }
539
540            html body h1,
541            html body h2,
542            html body h3,
543            html body h4,
544            html body h5,
545            html body h6 {
546                color: #000000;
547                page-break-after: avoid;
548            }
549
550            html body blockquote {
551                color: #5c5c53;
552            }
553
554            html body pre {
555                page-break-inside: avoid;
556            }
557
558            html body table {
559                display: table;
560            }
561
562            html body img {
563                display: block;
564                max-width: 99%;
565                max-height: 99%;
566            }
567
568            html body pre,
569            html body code {
570                word-wrap: break-word;
571                white-space: pre;
572            }
573        }
574
575        .smartperf-preview {
576            width: 68vw;
577            height: 99%;
578            box-sizing: border-box;
579            overflow: hidden;
580            background-color: #fff;
581        }
582
583        .smartperf-preview .pagebreak,
584        .smartperf-preview .newpage {
585            page-break-before: always;
586        }
587
588        .smartperf-preview pre.line-numbers {
589            position: relative;
590            padding-left: 3.7em;
591            counter-reset: linenumber;
592        }
593
594        .smartperf-preview pre.line-numbers>code {
595            position: relative;
596        }
597
598        .smartperf-preview pre.line-numbers .line-numbers-rows {
599            position: absolute;
600            pointer-events: none;
601            top: 0.9em;
602            font-size: 99%;
603            left: 1px;
604            width: 3em;
605            letter-spacing: -1px;
606            border-right: 1px solid #999;
607            -webkit-user-select: none;
608            -moz-user-select: none;
609            -ms-user-select: none;
610            user-select: none;
611        }
612
613        .smartperf-preview pre.line-numbers .line-numbers-rows>span {
614            pointer-events: none;
615            display: block;
616            counter-increment: linenumber;
617        }
618
619        .smartperf-preview pre.line-numbers .line-numbers-rows>span:before {
620            content: counter(linenumber);
621            color: #999;
622            display: block;
623            padding-right: 0.79em;
624            text-align: right;
625        }
626
627        .smartperf-preview .mathjax-exps .MathJax_Display {
628            text-align: center !important;
629        }
630
631        .smartperf-preview:not([for='preview']) .code-chunk .btn-group {
632            display: none;
633        }
634
635        .smartperf-preview:not([for='preview']) .code-chunk .status {
636            display: none;
637        }
638
639        .smartperf-preview:not([for='preview']) .code-chunk .output-div {
640            margin-bottom: 16px;
641        }
642
643        .scrollbar-style::-webkit-scrollbar {
644            width: 8px;
645        }
646
647        .scrollbar-style::-webkit-scrollbar-track {
648            border-radius: 9px;
649            background-color: transparent;
650        }
651
652        .scrollbar-style::-webkit-scrollbar-thumb {
653            border-radius: 6px;
654            background-color: rgba(150, 150, 150, 1);
655            border: 4px solid rgba(150, 150, 150, 1);
656            background-clip: content-box;
657        }
658
659        html body[for='html-export']:not([dpm]) {
660            position: relative;
661            width: 99%;
662            height: 99%;
663            ;
664            overflow: auto;
665        }
666
667        html body[for='html-export']:not([dpm]) .smartperf-preview {
668            position: relative;
669            top: 1px;
670        }
671
672        @media screen and (min-width: 914px) {
673            html body[for='html-export']:not([dpm]) .smartperf-preview {
674                padding: 2em;
675            }
676        }
677
678        @media screen and (max-width: 914px) {
679            html body[for='html-export']:not([dpm]) .smartperf-preview {
680                padding: 1.9em;
681            }
682        }
683
684        @media screen and (max-width: 450px) {
685            html body[for='html-export']:not([dpm]) .smartperf-preview {
686                font-size: 15px !important;
687                padding: 1.1em;
688            }
689        }
690
691        @media print {
692            html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
693                display: none;
694            }
695        }
696
697        html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
698            position: fixed;
699            bottom: 9px;
700            left: 9px;
701            font-size: 28px;
702            cursor: pointer;
703            color: inherit;
704            z-index: 99;
705            width: 31px;
706            text-align: center;
707            opacity: 0.5;
708        }
709
710        html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn {
711            opacity: 1;
712        }
713
714        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc {
715            position: fixed;
716            top: 1px;
717            left: 1px;
718            width: 300px;
719            height: 99%;
720            padding: 32px 0 48px 0;
721            font-size: 14px;
722            box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
723            box-sizing: border-box;
724            overflow: auto;
725            background-color: inherit;
726        }
727
728        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
729            width: 9px;
730        }
731
732        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
733            border-radius: 11px;
734            background-color: transparent;
735        }
736
737        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
738            border-radius: 6px;
739            background-color: rgba(150, 150, 150, 0.66);
740            border: 3px solid rgba(150, 150, 150, 0.66);
741            background-clip: content-box;
742        }
743
744        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a {
745            text-decoration: none;
746        }
747
748        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
749            padding: 1px 1.7em;
750            margin-top: 0.9em;
751        }
752
753        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
754            margin-bottom: 0.8em;
755        }
756
757        html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
758            list-style-type: none;
759        }
760
761        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
762            left: 301px;
763            width: calc(100% - 300px);
764            padding: 2em calc(50% - 457px - 150px);
765            margin: 1px;
766            box-sizing: border-box;
767        }
768
769        @media screen and (max-width: 1274px) {
770            html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
771                padding: 1.9em;
772            }
773        }
774
775        @media screen and (max-width: 450px) {
776            html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
777                width: 99%;
778            }
779        }
780
781        html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc {
782            display: none;
783        }
784    </style>
785</head>
786
787<body for="html-export" id="body" style="margin:0">
788    <div class="smartperf smartperf-preview" style="min-height: 99vh;">
789        <h1 class="mume-header fontColor">扩展程序安装指导</h1>
790        <p class="fontColor">HiSmartPerf扩展服务在浏览器之外为HiSmartPerf网站提供AI诊断、trace抓取等能力。
791            该扩展服务主体使用node.js实现，采用插件化设计理念方便后续功能扩展。扩展服务主要提供一个WebSocket服务端，
792            HiSmartPerf网站做客户端通过WebSocket连接服务端后获取服务。</p>
793        <h2 class="mume-header fontColor" id="header-index-1">获取扩展服务包</h2>
794        <span>点击这里下载：</span>
795        <span id="download-container" style="color: #0192da;cursor: pointer;">hi-smart-perf-host-extend.zip</span>
796        <p class="fontColor">
797            附件解压后的文件目录为：
798            <br />
799            <img src="../figures/Extensions/expandservicecatalog.jpg" alt="GitHub Logo" />
800        </p>
801        <h2 class="mume-header fontColor" id="header-index-2">开启扩展服务</h2>
802        <p class="fontColor">
803            在hi-smart-perf-host-extend目录下，找到start.bat脚本，双击打开，即可开启扩展服务。
804            <br />
805            <img src="../figures/Extensions/expandserviceccmd.jpg" alt="GitHub Logo" />
806        </p>
807        <p style="color: red;" class="fontColor">注： 如果先打开SP-host网站，再打开扩展服务，网站会在30秒内自动连接扩展服务，
808            如无法连接，可尝试刷新浏览器，依旧无法连接可联系工具接口人帮助定位</p>
809        <h2 class="mume-header fontColor" id="header-index-2">关闭扩展服务</h2>
810        <p class="fontColor">
811            在hi-smart-perf-host-extend目录下，找到stop.bat文件，右键选择以管理员身份运行，即可关闭扩展服务。
812        </p>
813        <p class="fontColor" style="font-weight: bold">
814            备注：当前扩展服务版本为1.0.8，如果本地存在以其他方式安装的非正式版本，请手动关闭扩展服务，并重新按照该指导安装
815        </p>
816    </div>
817
818    <script>
819        window.onload = () => {
820            let isDark = getURLParameter('dark');
821            let targetId = getURLParameter('targetId');
822            let isBack = getURLParameter('isBack');
823            if (isDark === 'true') {
824                document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
825                let header = document.getElementsByClassName('fontColor');
826                for (let i = 0; i < header.length; i++) {
827                    header[i].style.color = '#fff';
828                }
829                let lightBackGround = document.getElementsByClassName('light');
830                for (let i = 0; i < lightBackGround.length; i++) {
831                    lightBackGround[i].style.backgroundColor = '#32373F';
832                }
833            }
834            function getURLParameter(name) {
835                return (new URL(document.location)).searchParams.get(name);
836            }
837
838            if (targetId !== null) {
839                let targetElement = document.getElementById(targetId);
840                targetElement.scrollIntoView({ behavior: 'smooth' });
841            }
842            // 假设这是你的文件的 URL
843            const fileUrl = `https://${window.location.host.split(':')[0]}:${window.location.port
844                }/application/extend/hi-smart-perf-host-extend.zip`;
845            const fileName = 'hi-smart-perf-host-extend';
846            // 创建一个隐藏的 a 元素
847            const a = document.createElement('a');
848            a.style.display = 'none';
849            a.href = fileUrl;
850            a.download = fileName; // 设置下载的文件名
851            document.getElementById('download-container').appendChild(a);
852            document.getElementById('download-container').addEventListener('click', () => {
853                // 触发点击事件以下载文件
854                a.click();
855            })
856
857        };
858    </script>
859</body>
860
861</html>