ApiDoc/Admin/View/Document/request_code.sc.php

<?php

use Sc\Util\HtmlElement\El;
use Sc\Util\HtmlStructure\Html\Html;
use Sc\Util\HtmlStructure\Html\Js\JsFunc;

Html::create("Api文档");
Html::loadThemeResource('ElementUI');
Html::css()->load('https://unpkg.com/codemirror@5.65.17/lib/codemirror.css');
Html::css()->load('https://unpkg.com/codemirror@5.65.17/theme/material.css');
Html::css()->load('https://unpkg.com/codemirror@5.65.17/addon/hint/show-hint.css');
Html::css()->load('https://unpkg.com/codemirror@5.65.17/addon/lint/lint.css');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/lib/codemirror.js');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/mode/javascript/javascript.js');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/addon/hint/show-hint.js');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/addon/edit/closebrackets.js');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/addon/hint/javascript-hint.js');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/addon/lint/lint.js');
Html::js()->load('https://unpkg.com/codemirror@5.65.17/addon/lint/javascript-lint.js');
Html::js()->load('https://unpkg.com/jshint@2.13.2/dist/jshint.js');

Html::css()->addCss(<<<CSS
.CodeMirror{
    height: calc(100vh - 20px);
    border-top: 1px solid black; border-bottom: 1px solid black;
}
.CodeMirror pre > * { 
    text-indent: 0;
}
CSS);

$el = El::fromCode('<textarea id="ss"></textarea>');

$code = El::text(<<<JS
// =========================================
// 请求代码,可以修改其中代码发起自定义的请求
// =========================================

let url = request.url;
let method = request.method;
let data = request.data;
let dp = method === 'get' || method === 'GET' ? 'params' : 'data';

axios({
    url: url,
    method: method,
    [dp]: data,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
}).then(({data}) => {
    this.setResponse(data);
    
    if (typeof data !== 'object'){
        return;
    }
    if(data.code === 1001){
        localStorage.setItem('token', data.data.token);
    }else if(data.data.hasOwnProperty('token')){
        localStorage.setItem('token', data.data.token.token); 
    }
}).catch(error => {
    this.setResponse(error.response.data);
})
JS
)->setRetraction(0);


Html::html()->append(
    El::double('script')
        ->setId("requestCode")
        ->setRetraction(-4)
        ->setAttr('type', 'text/html')
        ->append($code)
);

Html::js()->vue->addMethod("init", JsFunc::anonymous()->code(<<<JS
let script = document.getElementById('ss');
this.requestScriptEditor = CodeMirror.fromTextArea(script, {
        lineNumbers: true,
        mode: 'text/javascript',
        theme: 'material',
        styleActiveLine: true,
        lineWrapping: true,
        matchBrackets: true,
        autoCloseBrackets: true,
        lint: {options: {esversion: 2021}},
        hintOptions: {
          completeSingle: false
        }
    }); 

this.\$nextTick(() => {
    if (!localStorage.getItem('requestCode')){
        localStorage.setItem('requestCode', document.getElementById('requestCode').innerText);
    }
    
    this.requestScriptEditor.setValue(localStorage.getItem('requestCode'));
    this.requestScriptEditor.refresh();
});

this.requestScriptEditor.on('change', (codemirror,pos) => {
    codemirror.refresh()
    let char = '';
    if (pos.origin === '+input' || pos.origin === '*compose'){
        char = pos.text[0].substr(-1)
    }else if (pos.origin === '+delete'){
        let lineText = codemirror.getLine(pos.from.line);
        // 确保光标位置在有效范围内  
        if (pos.from.ch - 1 < lineText.length) {  
            // 获取光标所在位置的字符  
            char = lineText.charAt(pos.from.ch - 1);  
        }
    }
    
    if (/\w/.test(char)){
        this.requestScriptEditor.showHint();
    }
    
    localStorage.setItem('requestCode', this.requestScriptEditor.getValue());
});
let charWidth = this.requestScriptEditor.defaultCharWidth(), basePadding = 4;
this.requestScriptEditor.on("renderLine", function(cm, line, elt) {
    var off = CodeMirror.countColumn(line.text, null, cm.getOption("tabSize")) * charWidth;
    elt.style.textIndent = "-" + off + "px";
    elt.style.paddingLeft = (basePadding + off) + "px";
});
JS
));

Html::js()->vue->event('mounted', 'this.init()');

return $el;