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

<?php

use App\Common\Util\TP;
use Plugins\ApiDoc\Admin\Controller\DocumentController;
use Sc\Util\HtmlElement\El;
use Sc\Util\HtmlStructure\Html\Html;
use Sc\Util\HtmlStructure\Html\Js\Axios;
use Sc\Util\HtmlStructure\Html\Js\JsCode;
use Sc\Util\HtmlStructure\Html\Js\JsFor;
use Sc\Util\HtmlStructure\Html\Js\JsFunc;
use Sc\Util\HtmlStructure\Html\Js\JsIf;
use Sc\Util\HtmlStructure\Html\Js\JsVar;

Html::create("Api文档");
Html::loadThemeResource('ElementUI');
Html::css()->load('https://unpkg.com/codemirror@5.65.8/lib/codemirror.css');
Html::css()->load('https://unpkg.com/codemirror@5.65.8/theme/material.css');
Html::css()->load('https://unpkg.com/jsoneditor@10.1.0/dist/jsoneditor.min.css');
Html::js()->load('https://unpkg.com/jsoneditor@10.1.0/dist/jsoneditor.min.js');
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/display/autorefresh.js');
Html::css()->addCss(<<<CSS
#scrollbar {
    width: 200px;
    height: calc(100vh - 20px);
}
i.icon{
    color: #E6A23C;
    cursor: pointer;
}
i.cur{
    cursor: pointer;
    font-size: 22px;
    vertical-align: bottom;
}
i.p-icon-all{
    color: #67C23A;
}
b{
    display: inline-block;
    width: 50px;
    text-align: center;
}

.send{
    color: #409EFF;
    position: relative;  
    opacity: 1;  
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}
.send:hover{
    transform: translateX(1px); /* 向右移动200px */  
    opacity: 0.5; /* 完全透明 */  
    filter: blur(0px); /* 模糊效果 */ 
}
.el-card{
  height: calc(100vh - 80px);
}
iframe{
    width: 100%;
    height: calc(100vh - 250px);
    border: none;
}
CSS
);


$menu = El::double('el-menu')->setAttrs([
    ':default-active' => 'apiActive',
    ':unique-opened' => 'true',
    'class' => 'menu'
])->append(
    El::double('template')->setAttrs([
        'v-for'  => '(item, index) in ApiInfo.apiLists',
    ])->append(
        El::double('el-sub-menu')->setAttrs([
            'v-if'   => "show(item)",
            ':index' => "'p' + index",
        ])->append(
            El::double('template')->setAttr('#title')
                ->append(
                    El::double('el-icon')
                        ->addClass('icon')
                        ->setAttr(':class', "{'p-icon-all': item.children.filter(a => Stars.includes(a.url)).length == item.children.length}")
                        ->append('<component :is="item.children.filter(a => Stars.includes(a.url)).length > 0 ? \'StarFilled\' : \'Star\'" />'),
                    El::double('span')->append('{{ item.name }}')
                )
        )->append(
            El::double('template')->setAttrs([
                'v-for'  => '(api, Aindex) in item?.children',
            ])->append(
                El::double('el-menu-item')->setAttrs([
                    'v-if'   => "show(api)",
                    ':index' => "index + '-' + Aindex",
                    '@click' => "selectApi(api)"
                ])->append(
                    El::double('el-icon')
                        ->addClass('icon')
                        ->setAttr('@click.stop', 'toggleStar(api.url)')
                        ->append('<component :is="Stars.includes(api.url) ? \'StarFilled\' : \'Star\'">'),
                    El::double('template')->setAttr('#title')->append(
                        El::double('span')->setAttr('v-if', 'api.version.filter(v => v < 0).length <= 0')->append('{{ api.name }}'),
                        El::double('span')->setAttr('v-else')->addClass('re-del')->append('{{ api.name }}')
                    )
                )
            )
        )
    )
);

$vue  = Html::js()->vue;

$vue->set('GET', 'GET');
$vue->set('showStar', null);
$vue->set('Stars', []);
$vue->set('searchText', '');
$vue->set('showVersion', 1);
$vue->set('apiActive', null);
$vue->set('showApiInfo', 'Form');
$vue->set('showParamInfo', 'request');
$vue->set('response', "@{}");
$vue->set('responseEditor', null);
$vue->set('currentApiInfo', null);
$vue->set('apiFormData', null);
$vue->set('apiFormEditor', null);
$vue->set('ApiInfo', "@{apiLists:[]}");


$vue->event('created', JsCode::make(
    JsCode::raw('this.getApiInfo()'),
    JsIf::when('localStorage.getItem("stars")')->then(
        JsVar::set('this.Stars', '@JSON.parse(localStorage.getItem("stars"))')
    ),
));


$vue->addMethod("toggleStar", JsFunc::anonymous(['url'])->code(
    JsIf::when("this.Stars.includes(url)")->then(
        JsVar::set("this.Stars", '@this.Stars.filter(a => a !== url)'),
        JsCode::raw('this.$message.success("已取消收藏")')
    )->else(
        JsFunc::call("this.Stars.push", '@url'),
        JsCode::raw('this.$message.success("已收藏")')
    ),
    JsCode::raw('localStorage.setItem("stars", JSON.stringify(this.Stars))')
));

$vue->addMethod('selectApi', JsFunc::anonymous(['api'])->code(
    JsVar::set('this.currentApiInfo', '@api'),
    JsVar::set('this.apiFormData', '@this.paramsResolve(api.requestParams)'),
    JsCode::raw("this.apiFormEditor && this.apiFormEditor.set(this.apiFormData)"),
    JsCode::raw("this.responseEditor && this.responseEditor.set(null)"),
));

$vue->addMethod('paramsResolve', JsFunc::anonymous(['params'])->code(
    JsVar::def('form', '@{}'),
    JsFor::loop('let i = 0; i < params.length; i++')->then(
        JsIf::when("params[i].type === 'Array'")->then(
            JsIf::when("params[i].children.length > 0")->then(
                JsVar::set('form[params[i].name]', "@[this.paramsResolve(params[i].children)]")
            )->else(
                JsVar::set('form[params[i].name]', "@[]")
            )
        )->elseIf("params[i].type === 'Object'")->then(
            JsVar::set('form[params[i].name]', "@this.paramsResolve(params[i].children)")
        )->elseIf("params[i].type === 'Integer' || params[i].type === 'Float'")->then(
            JsVar::set('form[params[i].name]', 0)
        )->elseIf("params[i].type === 'File'")->then(
            JsVar::set("form[params[i]]", null)
        )->else(
            JsVar::set('form[params[i].name]', "")
        )
    ),
    JsCode::raw('return form')
));

return El::double('div')->setAttr('style', 'display: flex;')->append(
    El::double('el-scrollbar')->setId('scrollbar')->append($menu),
    El::double('el-row')->setAttr('style', 'flex:1;margin-left: 10px;')->setAttr(':gutter', 5)->append(
        El::double('el-col')->setAttr(':span', '24')->append(include __DIR__ . '/view_filter.php'),
        El::double('el-col')->setAttr(':span', '12')->append(include __DIR__ . '/view_api_info.php'),
        El::double('el-col')->setAttr(':span', '12')->append(include __DIR__ . '/view_param.php'),
    )
);