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(<<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(''), 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(''), 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'), ) );