<title>APIAuto-机器学习零代码测试、生成代码与静态检查、生成文档与光标悬浮注释</title>

<meta charset="utf-8" />

<meta name="keywords" content="apijson,api,json,auto,apiauto,自动生成接口文档,自动化接口回归测试,机器学习接口回归测试,回归测试,机器学习,接口测试,API测试,自动化,API自动化,接口自动化,fastjson,json在线解析,json格式化验证"/>

<meta name="description" content="APIAuto-敏捷开发最强大易用的 HTTP 接口工具，机器学习零代码测试、生成代码与静态检查、生成文档与光标悬浮注释"/>

<!-- 登录 <<<<<<<<<<<<<<<<<<<< -->

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/login.css">

<!-- 登录 >>>>>>>>>>>>>>>>>>>> -->

<link href="css/hint.min.css" rel="stylesheet">

<!-- <link href="css/diffview.css" rel="stylesheet"> -->

<link href="css/loading.css" rel="stylesheet">

<link href="css/main.css" rel="stylesheet">

<link rel="stylesheet" href="md/css/editormd.preview.css" />

<style >

input[type=number] {

-moz-appearance:textfield;

}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

-webkit-appearance: none;

margin: 0;

}

</style>

<style type="text/css">

.url {

height: 100%;

border: none;

display: flex;

align-items: center;

flex-grow: 1

/* justify-content: center */

}

.transfer {

width: 50px;

height: 100%;

margin: 0;

padding: 0;

}

.send {

width: 16%;

min-width: 30px;

max-width: 100px;

height: 100%;

margin: 0;

padding: 0;

}

.statement {

position: absolute;

bottom: 0px;

width: 100%;

text-align: center;

font-size: small;

z-index: 100;

background-color: white;

color: #bbb;

border-top: #fafafa 1px solid;

}

<div id="app" style="background-color: white">

<div class="side-top">

<img src="img/logo.png" class="logo-img"/>

<a class="logo" href="http://apijson.cn" target="_blank">

<span class="on">APIAuto:</span>

</a><span class="pop-btn">

<a href="javascript:void(0)" @click="window.open(projectHost.host)" style="padding: 14px; margin-left: -20px; font-size: 24px">{{ StringUtil.isEmpty(projectHost.project, true) ? projectHost.host : projectHost.project }}</a>

<ul class="projects pop" style="overflow-y: scroll; z-index: 200; width: 440px; max-height: 600px; right: -260px; padding-top: 50px; background: transparent; outline: none; border: none;">

<li v-for="(item, index) in projectHosts" style="padding-left: 2px; background: white; border: none">

<div style="margin-top:0px" >

<input style="min-width: 90px; padding-top:0px; margin-right: 6px" v-model="item.project" @keyup="doOnKeyUp(event, 'project', false, item)" placeholder="输入项目名称后回车" />

<a style="padding: 0px; width: auto; display: flex;flex-grow: 1" :style="{color: (item.host == projectHost.host || StringUtil.isEmpty(projectHost.host, true)) && (item.project == projectHost.project || StringUtil.isEmpty(projectHost.project, true)) ? 'red' : 'black'}" href="javascript:void(0)" @click="onClickHost(index, item)" > {{item.host}}</a>

</div>

<a data-hint="同步所有接口" class="hint--left" @click="syncProjectHost(index, item)" style="top: 3px; right: -384px; position: absolute">

<img style="width: 15px; height: 15px" src="img/refresh.png"/>

</a>

<svg class="icon" @click="remove(item, index, false, false, true)" style="top: 16px">

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</li>

</ul>

</span>

<a v-show="isDelayShow" >2s</a>

<iframe v-show="User.id == null || User.id <= 0" src="https://ghbtns.com/github-btn.html?user=Tencent&amp;repo=APIJSON&amp;type=star&amp;count=true&amp;size=small" frameborder="0" scrolling="0" width="120px" height="18px"></iframe>

<!--只用60%避免拦截左右两侧View的触摸事件-->

<div style="width: 40%;height: 100%;left: 30%;display: inline-block;text-align: center;position: fixed;padding-top: 10px">

<a style="font-size: large;margin-left: 10px;margin-right: 10px;color: silver" href="https://github.com/APIJSON/APIJSON/blob/main/Document.md" target="_blank" >文档</a>

<a style="font-size: large;margin-left: 10px;margin-right: 10px;color: silver" href="https://search.bilibili.com/all?keyword=APIJSON" target="_blank" >视频</a>

<a style="font-size: large;margin-left: 10px;margin-right: 10px;color: silver" href="https://github.com/search?o=desc&q=apijson&s=stars&type=Repositories" target="_blank" >生态</a>

</div>

<div class="top-right">

<a style="padding: 6px" v-show="User.id == null || User.id <= 0" href="https://gitee.com/Tencent/APIJSON" target="_blank">

<img class="ui inline black image" height="24" src="https://gitee.com/logo-black.svg?20171024" width="60">

</a>

<a style="padding-left: 6px" v-show="User.id == null || User.id <= 0" href="https://gitee.com/Tencent/APIJSON" target="_blank">

<img style="margin-bottom: -1px" height="18" src="https://gitee.com/Tencent/APIJSON/badge/star.svg?theme=gvp">

</a>

<a v-show="User.id != null && User.id > 0" href="javascript:void(0)" @click="logout(true)">

退出

</a>

<a v-show="User.id == null || User.id <= 0" href="javascript:void(0)" @click="showLogin(true, true)">

登录

</a>

<span class="pop-btn">

<a href="javascript:void(0)" style="padding: 14px">

{{ User.id != null && User.id > 0 ? User.name : '设置' }}

</a>

<ul class="themes pop" style="z-index: 200;padding: 0px;margin-top: 8px;width: 300px; line-height: 16px">

<a class="setting-item" href="javascript:void(0)" @click="showConfig(! isDelegateEnabled, 9)">托管服务器代理: {{ isDelegateEnabled ? '已开启，点击关闭' : '已关闭，点击开启' }}</a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(! isEnvCompareEnabled, 14)">对比其它环境结果: {{ isEnvCompareEnabled ? '已开启，点击关闭' : '已关闭，点击开启' }}</a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(! isEncodeEnabled, 12)">自动 URL 转义: {{ isEncodeEnabled ? '已开启，点击关闭' : '已关闭，点击开启' }}</a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(! isPreviewEnabled, 10)">预览左侧输入框: {{ isPreviewEnabled ? '已开启，点击关闭' : '已关闭，点击开启' }}</a>

<a v-show="User.id != null && User.id > 0" class="setting-item" href="javascript:void(0)" @click="showConfig(! isEditResponse, 11)">当前编辑模式: {{ isEditResponse ? 'Response 后端响应结果' : 'Request 前端请求参数' }}</a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(StringUtil.isEmpty(host, true), 3)">{{ StringUtil.isEmpty(host, true) ? '隐藏(固定)URL Host: 可用空格隔开' : '显示(编辑)URL Host: \n' + host }}</a>

<a style="border-bottom: #DDD 1px solid;width: 100%;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;" href="javascript:void(0)" @click="showConfig(! isRandomShow, 5)">{{ isRandomShow ? '隐藏(固定)参数注入 Random Test' : '显示(编辑)参数注入 Random Test' }}</a>

<a style="border-bottom: #DDD 1px solid;width: 100%;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;" href="javascript:void(0)" @click="showConfig(! isHeaderShow, 4)">{{ (isHeaderShow ? '隐藏(固定)' : '显示(编辑)') + (isEditResponse ? '响应头 Response Header' : '请求头 Request Header' ) }}</a>

<a style="border-bottom: #DDD 1px solid;width: 100%;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;" href="javascript:void(0)" @click="showConfig(! isScriptShow, 13)">{{ (isScriptShow ? '隐藏(固定)' : '显示(编辑)') + '执行脚本 JavaScript' }}</a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(! isAgentEnabled, 18)">{{ (isAgentEnabled ? '隐藏' : '显示') + '网页自动操作 AI Agent' }} </a>

<a v-show="User.id != null && User.id > 0" class="setting-item" href="javascript:void(0)" @click="showConfig(! isStatisticsEnabled, 17)">{{ (isStatisticsEnabled ? '隐藏' : '显示') + '测试统计报告 Test Report' }} </a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(true, 2)">生成代码(封装,解析) : {{ language || '例如 Java' }}</a>

<a v-show="User.id != null && User.id > 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 0)">数据库类型 Database: {{ database || '例如 MYSQL' }}</a>

<a v-show="User.id != null && User.id > 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 1)">数据库名/模式 Schema: {{ schema || '例如 sys' }}</a>

<a v-show="false" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 16)">使用的请求方法: {{ methods == null || methods.length <= 0 ? '默认全部，点击设置' : (methods instanceof Array ? methods.join() : methods) }}</a>

<a v-show="false" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 7)">使用的请求类型: {{ types == null || types.length <= 0 ? '默认全部，点击设置' : (types instanceof Array ? types.join() : types) }}</a>

<a class="setting-item" href="javascript:void(0)" @click="showConfig(true, 15)">其它环境地址 URL Host: {{ otherEnv || '点击设置' }}</a>

<a v-show="User.id == null || User.id <= 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 6)">托管服务器地址 URL: {{ server || '点击设置' }}</a>

<a v-show="User.id != null && User.id > 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 8)">导入第三方文档(平台名 URL): <br/>{{ thirdParty || '点击设置' }}</a>

<a v-show="User.id == null || User.id <= 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 19)">AI Model: <br/>{{ aiModel || '点击设置' }}</a>

<a v-show="User.id == null || User.id <= 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 20)">AI Base URL: <br/>{{ aiBaseUrl || '点击设置' }}</a>

<a v-show="User.id == null || User.id <= 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 21)">AI API Key: <br/>{{ aiApiKey || '点击设置' }}</a>

<a v-show="User.id == null || User.id <= 0" class="setting-item" href="javascript:void(0)" @click="showConfig(true, 22)">AI Language: <br/>{{ aiLanguage || '点击设置' }}</a>

</ul>

</span>

<!-- 部分头像加载不出，或者显示为开源中国LOGO -->

<!--<img v-show="User.id != null && User.id > 0" href="javascript:void(0)" @click="logout()" :src="User.head"-->

<!--style="width: 100%; height: 100%; padding: 10%;"/>-->

</div>

</div>

<!--<div :class="'side-left side-view-' + baseview">-->

<div class="side-left" style="padding-bottom: -4px">

<div v-show="! isTestCaseShow" class="left-bar" >

<button class="transfer" id="vTransfer" @click="transfer()">' / "</button>

<span v-show="isShowMethod()" class="pop-btn transfer" style="width: 60px">

<button class="transfer" style="width: 60px" id="vMethod" :disabled="isEditResponse" @click="changeMethod()">{{ getMethodName(method, type) }}</button>

<ul class="historys pop method-pop" style="width: 60px;">

<li ><a href="javascript:void(0)" :style="{color: method == 'GET' ? 'red' : 'black'}" @click="changeMethod('GET')" >GET</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'POST' ? 'red' : 'black'}" @click="changeMethod('POST')" >POST</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'PUT' ? 'red' : 'black'}" @click="changeMethod('PUT')" >PUT</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'PATCH' ? 'red' : 'black'}" @click="changeMethod('PATCH')" >PATCH</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'DELETE' ? 'red' : 'black'}" @click="changeMethod('DELETE')" >DELETE</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'HEAD' ? 'red' : 'black'}" @click="changeMethod('HEAD')" >HEAD</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'OPTIONS' ? 'red' : 'black'}" @click="changeMethod('OPTIONS')" >OPTIONS</a></li>

<li ><a href="javascript:void(0)" :style="{color: method == 'TRACE' ? 'red' : 'black'}" @click="changeMethod('TRACE')" >TRACE</a></li>

</ul>

</span>

<span v-show="isShowType()" class="pop-btn transfer">

<button class="transfer" id="vType" :disabled="isEditResponse" @click="changeType()">{{ getTypeName(type, method) }}</button>

<ul class="historys pop type-pop" style="width: 360px;">

<li ><a href="javascript:void(0)" :style="{color: type == 'PARAM' ? 'red' : 'black'}" @click="changeType('PARAM')" >PARAM // ?a=1&b=c&key=value</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'FORM' ? 'red' : 'black'}" @click="changeType('FORM')" >FORM // application/x-www-form-urlencoded</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'DATA' ? 'red' : 'black'}" @click="changeType('DATA')" >DATA // multipart/form-data</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'JSON' ? 'red' : 'black'}" @click="changeType('JSON')" >JSON // application/json</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'GRPC' ? 'red' : 'black'}" @click="changeType('GRPC')" >GRPC // application/json</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'TEXT' ? 'red' : 'black'}" @click="changeType('TEXT')" >TEXT // text/plain</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'TXML' ? 'red' : 'black'}" @click="changeType('TXML')" >TXML // text/xml</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'AXML' ? 'red' : 'black'}" @click="changeType('AXML')" >AXML // application/xml</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'HTML' ? 'red' : 'black'}" @click="changeType('HTML')" >HTML // text/html</a></li>

<li ><a href="javascript:void(0)" :style="{color: type == 'XHTML' ? 'red' : 'black'}" @click="changeType('XHTML')" >XHTML // application/xhtml+xml</a></li>

</ul>

</span>

<div style="height: 100%;display: flex;flex-grow: 1">

<input class="url" id="vUrlComment" :disabled="isEditResponse" type="text" style="width: 100%; position: absolute; z-index: -100; color: darkseagreen;background: #0000;" ></input>

<textarea class="url" id="vUrl" :disabled="isEditResponse" type="text" @copy="doOnCopy" @paste="doOnPaste" @keyup="doOnKeyUp(event)"

placeholder="请输入请求的接口地址，可粘贴浏览器/抓包工具/接口工具 的 Network/Header/Content 等请求信息，自动填充到界面，格式为 key: value"

style="z-index: 0; background: #0000; padding-left: 2px; padding-right: 1px; scrollbar-width: none; " ></textarea>

</div>

<button class="send" id="vSend" @click="onClickSend()">{{ isEditResponse ? '模拟返回' : '发送请求' }}</button>

</div>

<div v-show="isTestCaseShow" class="left-bar">

<!--<svg class="icon" style="margin-left: 10px">-->

<!--<use xlink:href="svg/icon.svg#share"></use>-->

<!--</svg>-->

<a style="color: black; font-weight: bold; margin-right: 0px; padding-right: 0px" class="hint--top save-tool" data-hint="切换 远程|场景|本地" href="javascript:void(0)" @click="onClickPathRoot()">测试用例:{{ isLocalShow ? '本地历史' : (isChainShow ? '场景串联' : '远程在线') }}</a>

<div v-show="! (isLocalShow || (isChainShow && isChainGroupShow()))" v-for="(item, index) in casePaths" style="display: inline-block; padding-left: 0px; margin-left: 0px;" >

<a style="color: gray; padding: 0px; margin: 0px">/</a><a style="color: black; outline: none; border: none; padding: 0px; margin: 0px" href="javascript:void(0)" @click="onClickPath(index, item)">{{ getCaseGroupShowName(index, item) }}</a>

</div>

<a style="color: black; font-weight: bold; padding-left: 0px" class="hint--top save-tool" data-hint="切换显示分组|用例" href="javascript:void(0)" @click="switchCaseShowType()">{{ getCaseCountStr() }}</a>

<div style="display: inline-flex; flex-grow: 1;"></div>

<a v-show="! isLocalShow" class="hint--top save-tool" data-hint="点击切换" href="javascript:void(0)" @click="enableML(! isMLEnabled)">{{ testProcess }}</a>

<a v-show="! isLocalShow" class="hint--top save-tool" data-hint="点击切换" href="javascript:void(0)" @click="enableCross(! isCrossEnabled)">{{ crossProcess }}</a>

<!-- 当前账号 -->

<div v-show="isStatisticsEnabled && isCrossEnabled != true && isCurrentSummaryShow()" style="background: lightgray; padding: 1px; display: inline-block; margin: 1px" >

<!-- 只能写成一行来消除间隙，不能换行、空格 -->

<a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" @click="onClickSummary('total', false, currentAccountIndex)" >{{ getCurrentSummaryTotalText() + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentSummary().summaryType == 'white' ? 'underline': 'none'}" @click="onClickSummary('white', false, currentAccountIndex)" >{{ getCurrentSummaryWhiteText() }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentSummary().summaryType == 'green' ? 'underline': 'none'}" @click="onClickSummary('green', false, currentAccountIndex)" >{{ getCurrentSummaryGreenText() }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentSummary().summaryType == 'blue' ? 'underline': 'none'}" @click="onClickSummary('blue', false, currentAccountIndex)" >{{ getCurrentSummaryBlueText() }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentSummary().summaryType == 'orange' ? 'underline': 'none'}" @click="onClickSummary('orange', false, currentAccountIndex)" >{{ getCurrentSummaryOrangeText() }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentSummary().summaryType == 'red' ? 'underline': 'none'}" @click="onClickSummary('red', false, currentAccountIndex)" >{{ getCurrentSummaryRedText() }}</a>

</div>

<a v-show="! isLocalShow" class="hint--top @cli-tool" data-hint="回归测试" href="javascript:void(0)" @click="onClickTest()">

<img class="icon" src="img/refresh.png"/>

</a>

<a v-show="isLocalShow" class="hint--top @cli-tool" data-hint="清空" href="javascript:void(0)" @click="clearLocal()">

<svg class="icon" >

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</a>

</div>

<div class="left-panel">

<div v-show="isTestCaseShow" class="historys" style="width: 100%;height: 100%; display: inline-block">

<div v-show="isCaseGroupShow() && ! isLocalShow && ! isChainShow" :style="{width: caseShowType == 0 ? '40%' : '100%', 'border-right': caseShowType != 0 ? 'none' : '#DDD 1px solid' }" style="float: left; min-width: 30px; width: 40%; height: 100%;">

<ul class="historys" style="width: 100%; height: 100%;overflow: hidden;overflow-y: scroll;padding-bottom: 50px">

<li v-for="(item, index) in caseGroups" :id="'caseGroup' + index" >

<div style="display: inline-table; width: 100%">

<input v-show="isCaseGroupEditable" style="min-width: 60px; width: 40%; margin-right: 6px" v-model="item.groupName" @keyup="doOnKeyUp(event, 'caseGroup', false, item)" />

<a href="javascript:void(0)" @click="selectCaseGroup(index, item)" > {{(isCaseGroupEditable ? '' : (isCaseItemShow() && StringUtil.isNotEmpty(item.groupName) ? '' : (index + 1) + '. ') + (StringUtil.isEmpty(item.groupName) ? '' : item.groupName) + ' ') + item.groupUrl}}</a><a style="right: 0px; position: absolute; z-index: 100; width: fit-content; background-color: white" class="hint--left" :data-hint="(StringUtil.isEmpty(item.groupName) ? '-' : item.groupName) + ' ' + item.groupUrl">{{' (' + item.count + ') '}}</a>

<!-- <div v-show="isStatisticsEnabled" style="position: absolute; right: 36px; top: 8px; display: inline-flex">-->

<!-- <div v-show="(item.totalCount || 0) > 0" style="background: lightgray; padding: 1px; margin-right: 2px; display: inline-block; position: relative" @click="restoreRemote(index, item, null, true)" >-->

<!-- &lt;!&ndash; 只能写成一行来消除间隙，不能换行、空格 &ndash;&gt;-->

<!-- <a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ (item.totalCount || 0) + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.whiteCount || 0 }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.greenCount || 0 }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.blueCount || 0 }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.orangeCount || 0 }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.redCount || 0 }}</a>-->

<!-- </div>-->

<!-- <div :style="{ background: item.compareColor }" v-show="item.compareType != null" style="display: inline-block">-->

<!-- <button class="hint&#45;&#45;left" ref="testResultButtons" @mouseover="setTestHint(index, item)" v-show="item.compareType != null" @click="handleTest(false, index, item)" style="position: relative;">{{ StringUtil.limitLength(item.compareMessage, 30, 'middle') + (item.showType == 'before' ? '-前' : '-后') }}</button>-->

<!-- <svg class="icon" style="position: relative;margin-left: 10px" @click="downloadTest(index, item)">-->

<!-- <use xlink:href="svg/icon.svg#export-txt"></use>-->

<!-- </svg> &lt;!&ndash; 中间 button 仅用来占位，解决上面按钮隐藏后，下载图标纵向没对齐 &ndash;&gt;-->

<!-- <button class="hint&#45;&#45;left" ref="testHandleButtons" @mouseover="setTestHint(index, item, null, null, true)" v-show="(item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null)" @click="handleTest(true, index, item)">{{ item.showType == 'before' ? '错的，撤回' : '对的，纠正' }}</button><button v-show="! ((item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null))" style="color: white;background: white;border-color: white;" disabled>对的，纠正</button><button style="padding-left: 1px; padding-right: 1px; width: 50px" :style="{ color: item.durationColor }" class="hint&#45;&#45;left" ref="testResultDurationButtons" @mouseover="setTestHint(index, item, false, true)" @click="handleTest(true, index, item, false, true)">{{ (item.showType == 'before' ? item.durationBeforeShowStr : item.durationShowStr) || '?' }}</button>-->

<!-- </div>-->

<!-- </div>-->

</div>

</li>

</ul>

<div style="bottom: 0px; padding: 4px 10px 4px 10px; position: absolute; background-color: white; z-index: 102">

<button @click="pageDown('caseGroup')"><</button>

<input id="vCaseGroupPage" v-model="caseGroupPage" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'caseGroup', true)" placeholder="页码" />

<button @click="pageUp('caseGroup')">></button>

<input id="vCaseGroupCount" v-model="caseGroupCount" style="width: 33px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'caseGroup', true)" placeholder="条数" />

<input id="vCaseGroupSearch" v-model="caseGroupSearch" style="width: 72px; text-align: center" @keyup="doOnKeyUp(event, 'caseGroup', true)" placeholder="搜索|编辑" />

</div>

</div>

<div v-show="isChainShow && isChainGroupShow() && ! isLocalShow" :style="{width: chainShowType == 0 ? '40%' : '100%', 'border-right': chainShowType != 0 ? 'none' : '#DDD 1px solid' }" style="float: left; min-width: 30px; width: 40%; height: 100%;">

<input id="vChainGroupAdd" style="width: 100%; text-align: center" @keyup="doOnKeyUp(event, 'chainGroupAdd', false, {'groupName': vChainGroupAdd.value})" placeholder="输入名称，回车来添加" />

<ul class="historys" style="width: 100%; height: 100%;overflow: hidden;overflow-y: scroll;padding-bottom: 100px">

<li v-for="(item, index) in chainGroups" :id="'chainGroup' + index" >

<div style="display: inline-table; width: 100%">

<input v-show="isCaseGroupEditable" style="min-width: 60px; width: 40%; margin-right: 6px" v-model="item.Chain.groupName" @keyup="doOnKeyUp(event, 'chainGroup', false, item)" />

<a href="javascript:void(0)" @click="selectChainGroup(index, item.Chain)" :style="{ color: index == currentChainGroupIndex ? 'black' : 'gray' }" >{{ (isCaseItemShow() ? '' : (index + 1) + '. ') + (isCaseGroupEditable ? '' : item.Chain.groupName) }}</a>

<ul style="display: inline-flex; position: absolute; top: 6px; right: 84px; padding: 0px; height: 27px; overflow: scroll hidden;">

<li style="margin: 0px; padding: 2px; background-color: rgba(255, 255, 255, 0.6); border: #DDD 1px solid; border-radius: 2px " v-for="(tag, ind) in item.Chain.tagList" :id="'tag' + index" >

<a href="javascript:void(0)" style="position: relative; min-width: 6px; width: auto; height: 30px; " @click="removeTag(ind, tag, index, item)" >{{ tag }}</a>

</li>

</ul><button class="hint--left" data-hint="新增标签" style="position: absolute; right: 60px; top: 6px;" href="javascript:void(0)" @click="changeTag(index, item)"> + </button><a style="right: 0px; position: absolute; z-index: 100; width: fit-content; background-color: white; margin-right: 24px" class="hint--left" :data-hint="item.Chain.groupName">{{' (' + (item.Chain.count - 1) + ') '}}</a>

<svg class="icon" @click="remove(item, index, true, false, false, true)" style="background-color: white; width: 27px; height: 18px; right: -2px; top: 10px; padding-left: 3px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px;" >

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</div>

</li>

</ul>

<div style="bottom: 0px; padding: 4px 10px 4px 10px; position: absolute; background-color: white; z-index: 102">

<button @click="pageDown('chainGroup')"><</button>

<input id="vChainGroupPage" v-model="chainGroupPage" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'chainGroup', true)" placeholder="页码" />

<button @click="pageUp('chainGroup')">></button>

<input id="vChainGroupCount" v-model="chainGroupCount" style="width: 33px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'chainGroup', true)" placeholder="条数" />

<input id="vChainGroupSearch" v-model="chainGroupSearch" style="width: 72px; text-align: center" @keyup="doOnKeyUp(event, 'chainGroup', true)" placeholder="搜索|编辑" />

</div>

</div>

<div v-show="((isChainShow && isChainGroupShow())) || (isCaseItemShow() && ! (isChainShow || isLocalShow))" style="left: 0px; display: inline-flex; width: 100%; bottom: 36px; padding: 4px 10px 4px 10px; position: absolute; background-color: white; z-index: 102">

<input id="vTagAdd" style="width: 64px; height: 28px; text-align: center" @keyup="doOnKeyUp(event, 'chainTagAdd', false, {'name': vTagAdd.value})" placeholder="新增标签，回车来添加" />

<a href="javascript:void(0)" style="position: relative; min-width: 12px; width: auto; top: 3px; text-align: center" @click="changeTagCombine()" >{{ tagCombines[tagCombineIndex] }}</a>

<ul style="display: inline-flex; padding: 0px; width: 100%; height: 28px; overflow: hidden;overflow-x: scroll;">

<li style="margin: 0px; padding: 2px; border: #DDD 1px solid; border-radius: 2px " v-for="(item, index) in tags" :id="'tag' + index" >

<a href="javascript:void(0)" style="position: relative; min-width: 6px; width: auto; height: 28px; " @click="selectTag(index, item, ! isChainShow)" :style="{ color: item.selected ? 'red' : 'gray' }" >{{ item.name }}</a>

</li>

</ul>

</div>

<div v-show="isLocalShow || isCaseItemShow()" :style="{width: isCaseGroupShow() && ! isLocalShow ? '60%' : '100%'}" style="float: right; flex-grow: 1; height: 100%;">

<input id="vChainAdd" v-show="isChainShow && currentChainGroupIndex >= 0" style="width: 100%; text-align: center" @keyup="doOnKeyUp(event, 'chainAdd', false, {'groupName': vChainAdd.value})" placeholder="输入名称，回车来搜索及添加" />

<ul class="historys" style="width: 100%; height: 100%;overflow: hidden;overflow-y: scroll;padding-bottom: 100px">

<li v-for="(item, index) in testCases" :id="'docItem' + index" >

<div style="display: inline-table">

<button class="hint--right" :data-hint="item.Document.url" v-show="isShowMethod()" style="width: 60px; margin-right: 0px;padding: 0px;" id="vDocMethod" @click="restoreRemoteAndTest(index, item)">{{ getMethodName(item.Document.method, item.Document.type) }}</button>

<button class="hint--right" :data-hint="item.Document.request" v-show="isShowType()" style="width: 48px;margin-right: 6px;padding: 0px" id="vDocType" @click="restoreRemoteAndTest(index, item)">{{ getTypeName(item.Document.type, item.Document.method) }}</button>

<a class="hint--rounded hint--no-animate" ref="testCaseTexts" @mouseover="setRequestHint(index, item)" href="javascript:void(0)" @click="restoreRemote(index, item)" :style="{ color: index == currentDocIndex ? 'black' : 'gray' }"> {{(isCaseGroupShow() ? '' : (index + 1) + '. ') + (item.Document.version > 0 ? 'V' + item.Document.version : 'V*') + ' ' + item.Document.name + ' ' + item.Document.url}}</a>

<ul v-show="! (isChainShow || isLocalShow)" style="display: inline-flex; position: absolute; right: 56px; padding: 0px; height: 27px; overflow: scroll hidden;">

<li style="margin: 0px; padding: 2px; background-color: rgba(255, 255, 255, 0.7); border: #DDD 1px solid; border-radius: 2px " v-for="(tag, ind) in item.Document.tagList" :id="'tag' + index" >

<a href="javascript:void(0)" style="position: relative; min-width: 6px; width: auto; height: 30px; " @click="removeTag(ind, tag, index, item, true)" >{{ tag }}</a>

</li>

</ul><button v-show="! (isChainShow || isLocalShow)" class="hint--left" data-hint="新增标签" style="position: absolute; right: 32px;" href="javascript:void(0)" @click="changeTag(index, item, true)"> + </button>

<button v-show="isChainShow && isChainItemShow()" class="hint--left" :data-hint="StringUtil.isEmpty((item.Chain || {}).testAccount, true) ? '绑定帐号' : '解绑帐号 ' + (item.Chain || {}).testAccount + '@' + (((item.Chain || {}).testInfo || {}).baseUrl || '')" :style="{color: ((item.Chain || {}).testInfo || {}).isLoggedIn ? 'red' : 'black' }" style="position: absolute; right: 31px;" id="vDocAccount" @click="bindAccount(index, item)">{{ (item.Chain || {}).testName || (item.Chain || {}).testAccount || '+' }}</button>

<div v-show="isStatisticsEnabled" style="position: absolute; right: 31px; top: 9px; display: inline-flex">

<div v-show="(item.totalCount || 0) > 0" style="background: lightgray; padding: 1px; margin-right: 2px; display: inline-block; position: relative" @click="restoreRemote(index, item, null, true)" >

<!-- 只能写成一行来消除间隙，不能换行、空格 -->

<a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ (item.totalCount || 0) + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.whiteCount || 0 }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.greenCount || 0 }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.blueCount || 0 }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.orangeCount || 0 }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.redCount || 0 }}</a>

</div>

<div :style="{ background: item.compareColor }" v-show="item.compareType != null" style="display: inline-block">

<button class="hint--left" ref="testResultButtons" @mouseover="setTestHint(index, item)" v-show="item.compareType != null" @click="handleTest(false, index, item)" style="position: relative;">{{ StringUtil.limitLength(item.compareMessage, 30, 'middle') + (item.showType == 'before' ? '-前' : '-后') }}</button>

<svg class="icon" style="position: relative;margin-left: 10px" @click="downloadTest(index, item)">

<use xlink:href="svg/icon.svg#export-txt"></use>

</svg> <!-- 中间 button 仅用来占位，解决上面按钮隐藏后，下载图标纵向没对齐 -->

<button class="hint--left" ref="testHandleButtons" @mouseover="setTestHint(index, item, null, null, true)" v-show="(item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null)" @click="handleTest(true, index, item)">{{ item.showType == 'before' ? '错的，撤回' : '对的，纠正' }}</button><button v-show="! ((item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null))" style="color: white;background: white;border-color: white;" disabled>对的，纠正</button><button style="padding-left: 1px; padding-right: 1px; width: 50px" :style="{ color: item.durationColor }" class="hint--left" ref="testResultDurationButtons" @mouseover="setTestHint(index, item, false, true)" @click="handleTest(true, index, item, null, false, true)">{{ (item.showType == 'before' ? item.durationBeforeShowStr : item.durationShowStr) || '?' }}</button>

</div>

</div>

<svg v-show="isLocalShow || (item.Document != null && item.Document.userId == User.id)" class="icon" style="background-color: white; width: 33px; height: 18px; right: -2px; padding-left: 5px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; top: 13px;" @click="remove(item, index, true)">

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</div>

</li>

</ul>

<div v-show="! isLocalShow" style="bottom: 0px; padding: 4px 23.9px 4px 10px; position: absolute; background-color: white; z-index: 102">

<button @click="pageDown('testCase')"><</button>

<input id="vTestCasePage" v-model="testCasePage" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'testCase', true)" placeholder="页码" />

<button @click="pageUp('testCase')">></button>

<input id="vTestCaseCount" v-model="testCaseCount" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'testCase', true)" placeholder="条数" />

<input id="vTestCaseSearch" v-model="testCaseSearch" style="width: 168px; display: inline-flex; flex-grow: 1; text-align: center" @keyup="doOnKeyUp(event, 'testCase', true)" placeholder="搜索" />

</div>

</div>

</div>

<div v-show="! isTestCaseShow" style="height: 100%;" >

<div v-show="! isPreviewEnabled" style="width: 100%;height: 100%;position: absolute;display: flex;flex-grow: 1" >

<textarea id="vComment" style="width: 100%; height: 100%; position: absolute; z-index: 0; color: darkseagreen; background-color: white;" wrap="off" disabled>

</textarea>

<textarea v-show="! isEditResponse" id="vWarning" style="width: 100%; height: 100%; position: absolute; z-index: 0; color: orangered; background-color: #0000;" wrap="off" disabled>

</textarea>

<textarea id="vInput" @copy="doOnCopy" @paste="doOnPaste" @keyup="onChange(true)" style="width: 100%;height: 100%; position: absolute; z-index: 100; background: #0000;" wrap="off" placeholder="{ // 根对象，可在内部加 format,tag,version,@role,@database,@schema,@datasource,@explain,@cache 等全局关键词键值对

" >

{

"User": {

"id": "82001"

}, // 以上查一个对象，以下查一个数组，Comment.userId = User.id。在键值对后按 Enter 回车键自动智能生成补全提示

"[]": {

Comment : {

'userId@': "User/id"

}

}

}

/*

以上 JSON 文本支持 JSON5 格式。清空文本内容可查看规则。

注释可省略。行注释前必须有 1 个空格；段注释必须在 JSON 下方。

## 快捷键

Ctrl + I 或 Command + I 格式化输入框，清除所有注释和无效空格、换行等；

Ctrl + / 或 Command + / 对选中行 新增行注释 或 取消行注释；

Ctrl + D 或 Command + D 删除 选中行；

Ctrl + S 或 Command + S 保存当前用例；

#### 右上角设置项 > 预览请求输入框，显示对应的预览效果

*/

</textarea>

</div>

<div id="vRequestMarkdown" v-show="isPreviewEnabled" style="width: 100%;height: 100%;position: relative;"></div>

<div style="width: 100%; height: auto; position: absolute;bottom: 0px; z-index: 100; background: white;" >

<div v-show="isRandomShow" style="width: 100%; height: 330px; position: relative;" >

<div class="left-bar" style="border-top: #DDD 1px solid; position: relative">

<input v-show="isRandomListShow != true && isRandomSubListShow != true" id="vTestRandomCount" v-model="testRandomCount" style="margin-left: 10px; min-width: 12px; max-width: 30px; width: auto; text-align: center" type="number" />

<a v-show="isRandomListShow != true && isRandomSubListShow != true" style="margin-left: 4px;">次</a>

<a v-show="isRandomListShow != true && isRandomSubListShow != true" href="javascript:void(0)" @click="onClickRandomType(false)" :style="{'color': isEditReqLink ? 'red' : 'gray'}" style="font-size: medium; padding-left: 10px">请求</a><a v-show="isRandomListShow != true && isRandomSubListShow != true" >|</a><a v-show="isRandomListShow != true && isRandomSubListShow != true" href="javascript:void(0)" @click="onClickRandomType(true)" :style="{'color': isEditReqLink ? 'gray' : 'red'}" style="font-size: medium">响应</a>

<a style="display: flex;flex-grow: 1;padding-left: 10px;padding-right: 2px;font-size: medium;color: black" >{{ (isRandomListShow || StringUtil.isEmpty(randomTestTitle, true) ? '参数注入 Random Test' : randomTestTitle) + (isRandomListShow || isRandomSubListShow ? ' (' + ((isRandomListShow ? randoms : randomSubs) || []).length + ')' : '') }}

<a v-show="isRandomListShow != true && (currentRemoteItem || {}).Document != null" style="padding-right: 6px;padding-top: 2px" href="javascript:void(0)" @click="showRandomList(true, (currentRemoteItem || {}).Document)">

父项列表

</a>

<a style="padding-right: 4px">

{{ testRandomProcess }}

</a>

<div v-show="isStatisticsEnabled && isRandomSummaryShow()" style="background: lightgray; padding: 1px; margin-right: 10px; top: 10px;right: 36px;display: inline-block" >

<!-- 只能写成一行来消除间隙，不能换行、空格 -->

<a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" @click="onClickSummary('total', true)" >{{ (getCurrentRandomSummary().totalCount || 0) + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentRandomSummary().summaryType == 'white' ? 'underline': 'none'}" @click="onClickSummary('white', true)" >{{ getCurrentRandomSummary().whiteCount || 0 }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentRandomSummary().summaryType == 'green' ? 'underline': 'none'}" @click="onClickSummary('green', true)" >{{ getCurrentRandomSummary().greenCount || 0 }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentRandomSummary().summaryType == 'blue' ? 'underline': 'none'}" @click="onClickSummary('blue', true)" >{{ getCurrentRandomSummary().blueCount || 0 }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentRandomSummary().summaryType == 'orange' ? 'underline': 'none'}" @click="onClickSummary('orange', true)" >{{ getCurrentRandomSummary().orangeCount || 0 }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getCurrentRandomSummary().summaryType == 'red' ? 'underline': 'none'}" @click="onClickSummary('red', true)" >{{ getCurrentRandomSummary().redCount || 0 }}</a>

</div>

</a>

<a class="hint--top @cli-tool" style="font-size: small;" data-hint="测试" href="javascript:void(0)" @click="onClickTestRandom()">

<img class="icon" src="img/refresh.png"/>

</a>

<a class="hint--top @cli-tool" data-hint="添加配置" style="font-size:xx-large; margin-bottom: 2px; color: black;"

href="javascript:void(0)" @click="onClickAddRandom()"> + </a>

<a v-show="false" href="javascript:void(0)" style="font-size: small;" class="hint--top" data-hint="上传/分享" @click="showExport(true, true)">

<svg class="icon">

<use xlink:href="svg/icon.svg#share"></use>

</svg>

</a>

<a class="hint--top @cli-tool" data-hint="隐藏" style="float: right; padding: 8px; margin-top: 2px; height: 100%" href="javascript:void(0)" @click="showConfig(false, 5)">

<svg class="icon close-icon" >

<use xlink:href="svg/icon.svg#close"></use>

</svg>

</a>

</div>

<!-- 临时生成的配置子项 -->

<ul v-show="isRandomSubListShow" class="historys" style="width: 100%;height: 100%;overflow: hidden;overflow-y: scroll; padding-bottom: 100px">

<li style="width: 100%" v-for="(item, index) in randomSubs" :id="'randomSubItem' + index" >

<a v-show="! isRandomEditable" class="hint--rounded hint--no-animate" ref="randomSubTexts" @mouseover="setRequestHint(index, item, true)" href="javascript:void(0)" @click="restoreRandom(index, item)" :style="{ color: index == currentRandomSubIndex ? 'black' : 'gray' }">{{ (item.Random || {}).name }}</a>

<input v-show="isRandomEditable" style="width: 96%" v-model="(item.Random || {}).name" @keyup="doOnKeyUp(event, 'randomSub', false, item)" />

<div :style="{ background: item.compareColor }" v-show="! isRandomEditable && item.compareType != null" style="position: absolute;top: 8px;right: 36px;display: inline-block;">

<button class="hint--left" ref="testRandomSubResultButtons" @mouseover="setTestHint(index, item, true)" v-show="item.compareType != null" @click="handleTest(false, index, item, null, true)" style="position: relative;">{{ StringUtil.limitLength(item.compareMessage, 30, 'middle') + (item.showType == 'before' ? '-前' : '-后') }}</button>

<svg class="icon" style="position: relative;margin-left: 10px" @click="downloadTest(index, item, true)">

<use xlink:href="svg/icon.svg#export-txt"></use>

</svg> <!-- 中间 button 仅用来占位，解决上面按钮隐藏后，下载图标纵向没对齐 -->

<button class="hint--left" ref="testRandomSubHandleButtons" @mouseover="setTestHint(index, item, true, null, true)" v-show="(item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null)" @click="handleTest(true, index, item, null, true)">{{ item.showType == 'before' ? '错的，撤回' : '对的，纠正' }}</button><button v-show="! ((item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null))" style="color: white;background: white;border-color: white;" disabled>对的，纠正</button><button style="padding-left: 1px; padding-right: 1px; width: 50px" :style="{ color: item.durationColor }" class="hint--left" ref="testRandomSubResultDurationButtons" @mouseover="setTestHint(index, item, true, true)" @click="handleTest(true, index, item, null, true, true)">{{ (item.showType == 'before' ? item.durationBeforeShowStr : item.durationShowStr) || '?' }}</button>

</div>

<svg v-show="item.Random != null && item.Random.userId == User.id" class="icon" style="margin-right: 5px; top: 13px" @click="remove(item, index, true, true)">

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</li>

</ul>

<div v-show="isRandomSubListShow" style="bottom: 0px; padding: 4px 13px 4px 6px; position: absolute; width: 100%; text-align: right; background-color: white; z-index: 100">

<input id="vRandomSubSearch" v-model="randomSubSearch" style="min-width: 60px; display: inline-flex; text-align: center" @keyup="doOnKeyUp(event, 'randomSub', true)" placeholder="搜索" />

<button @click="pageDown('randomSub')">上页 < </button>

<input id="vRandomSubPage" v-model="randomSubPage" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'randomSub', true)" placeholder="页码" />

<button @click="pageUp('randomSub')"> > 下页</button>

<a >每页</a>

<input id="vRandomSubCount" v-model="randomSubCount" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'randomSub', true)" placeholder="条数" />

<a >条</a>

</div>

<!-- 持久化存储的配置项 -->

<ul v-show="isRandomListShow" class="historys" style="width: 100%;height: 100%;overflow: hidden;overflow-y: scroll;padding-bottom: 100px">

<li style="width: 100%; display: inline-table" v-for="(item, index) in randoms" :id="'randomItem' + index" >

<input v-model="(item.Random || {}).count" style="min-width: 12px; max-width: 30px; width: auto; text-align: center" type="number" @keyup="doOnKeyUp(event, 'random', false, item)" />

<a style="margin-left: 4px; ">次</a>

<a v-show="! isRandomEditable" style="top: 13px; left: 68px; position: absolute" class="hint--rounded hint--no-animate" ref="randomTexts" @mouseover="setRequestHint(index, item, true)" href="javascript:void(0)" @click="restoreRandom(index, item)" :style="{ color: index == currentRandomIndex ? 'black' : 'gray' }">{{ (item.Random || {}).name }}</a>

<input v-show="isRandomEditable" style="top: 10px; left: 68px; position: absolute; display: inline-flex; width: 64%" v-model="(item.Random || {}).name" @keyup="doOnKeyUp(event, 'random', false, item)" />

<button v-show="((item.Random || {}).count || 0) > 1 && (item.totalCount || 0) <= 0" style="position: absolute;top: 10px;right: 36px;display: inline-block;" @click="handleTest(true, index, item, null, true)">{{ '查看 ' + ((item.subs || item['[]']) || []).length + ' 个子项' }}</button>

<div v-show="isStatisticsEnabled && ((item.Random || {}).count || 0) > 1 && (item.totalCount || 0) > 0" style="background: lightgray; position: absolute; padding: 1px; top: 10px;right: 36px;display: inline-block" @click="handleTest(true, index, item, null, true)">

<!-- 只能写成一行来消除间隙，不能换行、空格 -->

<a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ (item.totalCount || 0) + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.whiteCount || 0 }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.greenCount || 0 }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.blueCount || 0 }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.orangeCount || 0 }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px">{{ item.redCount || 0 }}</a>

</div>

<div v-show="isStatisticsEnabled && ! isRandomEditable && ((item.Random || {}).count || 1) <= 1" style="position: absolute;top: 10px;right: 36px;display: inline-block;">

<div :style="{ background: item.compareColor }" v-show="item.compareType != null" >

<button class="hint--left" ref="testRandomResultButtons" @mouseover="setTestHint(index, item, true)" v-show="item.compareType != null" @click="handleTest(false, index, item, null, true)" style="position: relative;">{{ StringUtil.limitLength(item.compareMessage, 30, 'middle') + (item.showType == 'before' ? '-前' : '-后') }}</button>

<svg class="icon" style="position: relative;margin-left: 10px" @click="downloadTest(index, item, true)">

<use xlink:href="svg/icon.svg#export-txt"></use>

</svg> <!-- 中间 button 仅用来占位，解决上面按钮隐藏后，下载图标纵向没对齐 -->

<button class="hint--left" ref="testRandomHandleButtons" @mouseover="setTestHint(index, item, true, null, true)" v-show="(item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null)" @click="handleTest(true, index, item, null, true)">{{ item.showType == 'before' ? '错的，撤回' : '对的，纠正' }}</button><button v-show="! ((item.showType != 'before' && item.compareType != 0) || (item.showType == 'before' && (item.TestRecord || {}).id != null))" style="color: white;background: white;border-color: white;" disabled>对的，纠正</button><button style="padding-left: 1px; padding-right: 1px; width: 50px" :style="{ color: item.durationColor }" class="hint--left" ref="testRandomResultDurationButtons" @mouseover="setTestHint(index, item, true, true)" @click="handleTest(true, index, item, null, true, true)">{{ (item.showType == 'before' ? item.durationBeforeShowStr : item.durationShowStr) || '?' }}</button>

</div>

</div>

<svg v-show="item.Random != null && item.Random.userId == User.id" class="icon" style="margin-right: 5px; top: 13px" @click="remove(item, index, true, true)">

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</li>

</ul>

<div v-show="isRandomListShow" style="bottom: 0px; padding: 4px 13px 4px 6px; position: absolute; width: 100%; text-align: right; background-color: white; z-index: 100">

<input id="vRandomSearch" v-model="randomSearch" style="min-width: 60px; display: inline-flex; text-align: center" @keyup="doOnKeyUp(event, 'random', true)" placeholder="搜索" />

<button @click="pageDown('random')">上页 < </button>

<input id="vRandomPage" v-model="randomPage" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'random', true)" placeholder="页码" />

<button @click="pageUp('random')"> > 下页</button>

<a >每页</a>

<input id="vRandomCount" v-model="randomCount" style="width: 30px;text-align: center" type="number" @keyup="doOnKeyUp(event, 'random', true)" placeholder="条数" />

<a >条</a>

</div>

<textarea id="vRandom" @copy="doOnCopy" @paste="doOnPaste" style="width: 100%;height: 100%;" wrap="off"

placeholder="# 常用：

">

User/id: RANDOM_INT(82001, 82020) // 随机整数

[]/count: RANDOM_IN(5, 10, 's', false, [], {}) // 随机取值

[]/page: Math.round(5*Math.random()) // 通过代码来自定义

@explain: ORDER_IN(true, false) // 顺序取值

// 从数据库随机取值 []/Comment/toId: RANDOM_DB()

// 回车智能生成。注释可省略，未省略则前面必须空格；清空文本内容可查看规则。

// ## 快捷键

// Ctrl + I 或 Command + I 格式化文本，清除所有注释和无效空格、换行等；

// Ctrl + / 或 Command + / 对选中行 新增行注释 或 取消行注释；

// Ctrl + D 或 Command + D 删除 选中行；

// Ctrl + S 或 Command + S 保存当前请求；

</textarea>

</div>

<div v-show="isHeaderShow" style="width: 100%; height: 150px; position: relative;" >

<div class="left-bar" style="border-top: #DDD 1px solid; position: relative">

<a style="padding-left: 10px;padding-right: 2px;font-size: medium;color: black" >{{ (isEditResponse ? '响应头 Response Header' : '请求头 Request Header' ) }}<a style="display: flex;flex-grow: 1;padding-right: 10px;padding-top: 2px"> (每行都按 key: value 格式)</a></a>

<a class="hint--top @cli-tool" data-hint="隐藏" style="float: right;padding: 8px;height: 100%" href="javascript:void(0)" @click="showConfig(false, 4)">

<svg class="icon close-icon" >

<use xlink:href="svg/icon.svg#close"></use>

</svg>

</a>

</div>

<textarea id="vHeader" @copy="doOnCopy" @paste="doOnPaste" @keyup="onChange(true)" style="width: 100%;height: 100%;" wrap="off" placeholder="Authorization: Basic YWRtaW46YWRtaW4= // 示例，支持单行注释，回车智能生成

// Ctrl + S 或 Command + S 保存当前请求；"></textarea>

</div>

<div v-show="isScriptShow" style="width: 100%; height: 240px; position: relative;" >

<div class="left-bar" style="border-top: #DDD 1px solid; position: relative">

<a href="javascript:void(0)" @click="changeScriptType('case')" :style="{'color': scriptType == 'case' ? 'red' : 'gray'}" style="padding-left: 10px; font-size: medium">用例</a><a v-show="getCurrentAccountId() != null">|<a v-show="getCurrentAccountId() != null" href="javascript:void(0)" @click="changeScriptType('account')" :style="{'color': scriptType == 'account' ? 'red' : 'gray'}" style="font-size: medium">账号</a></a><a>|</a><a href="javascript:void(0)" @click="changeScriptType('global')" :style="{'color': scriptType == 'global' ? 'red' : 'gray'}" style="font-size: medium">全局</a><a href="javascript:void(0)" @click="changeScriptPriority(true)" :style="{'color': isPreScript ? 'red' : 'gray'}" style="font-size: medium; padding-left: 10px">前置</a><a>|</a><a href="javascript:void(0)" @click="changeScriptPriority(false)" :style="{'color': isPreScript ? 'gray' : 'red'}" style="font-size: medium">后置</a><a style="display: flex;flex-grow: 1;padding-left: 10px;font-size: medium;color: black">执行脚本 JavaScript</a>

<a class="hint--top @cli-tool" style="font-size: small;" data-hint="测试" href="javascript:void(0)" @click="onClickTestScript()">

<img class="icon" src="img/refresh.png"/>

</a>

<a class="hint--top @cli-tool" data-hint="添加脚本" style="font-size:xx-large; margin-bottom: 2px; color: black;"

href="javascript:void(0)" @click="showExport(true, true, false, true)"> + </a>

<a v-show="false" href="javascript:void(0)" style="font-size: small;" class="hint--top" data-hint="上传/分享" @click="showExport(true, true)">

<svg class="icon">

<use xlink:href="svg/icon.svg#share"></use>

</svg>

</a>

<a class="hint--top @cli-tool" data-hint="隐藏" style="float: right; padding: 8px; margin-top: 2px; height: 100%" href="javascript:void(0)" @click="showConfig(false, 13)">

<svg class="icon close-icon" >

<use xlink:href="svg/icon.svg#close"></use>

</svg>

</a>

</div>

<!-- v-model 不允许调用方法 -->

<template v-if="scripts[scriptType][scriptBelongId]">

<textarea id="vScript" style="width: 100%;height: 100%;" wrap="off"

v-model="scripts[scriptType][scriptBelongId][isPreScript ? 'pre' : 'post'].script"

placeholder="// JavaScript 脚本

">

</textarea>

</template>

</div>

</div>

</div>

</div>

</div>

<div class="splitx" ></div>

<div class="side-right">

<div class="right-inner">

<div class="right-bar">

<div class="pull-left">

<a v-show="! isExpand" href="javascript:void(0)" class="hint--top" data-hint="全部展开" @click="expandAll()">

<svg class="icon" >

<use xlink:href="svg/icon.svg#expand"></use>

</svg>

</a>

<a v-show="isExpand" href="javascript:void(0)" class="hint--top" data-hint="全部折叠" @click="collapseAll()">

<svg class="icon" >

<use xlink:href="svg/icon.svg#collapse"></use>

</svg>

</a>

<span class="pop-btn" > <!--v-show="historys.length > 0">-->

<a class="hint--top save-tool" data-hint="保存到本地" href="javascript:void(0)" @click="showSave(true)">

<svg class="icon">

<use xlink:href="svg/icon.svg#save"></use>

</svg>

</a>

<ul class="historys pop" style="width: 304px"> <!-- 没必要太长，遮挡范围过大 // 490 刚好与 URL 输入框左对齐 -->

<li v-for="(his, index) in historys">

<a style="padding: 0px" href="javascript:void(0)" @click="restore(his, his.response)" > {{his.name}}</a>

<svg class="icon" @click="remove(his, index, false)">

<use xlink:href="svg/icon.svg#trash"></use>

</svg>

</li>

</ul>

</span>

<a v-show="isTestCaseShow" class="hint--top" data-hint="隐藏用例列表" href="javascript:void(0)">

<svg class="icon" @click="showTestCase(false, isLocalShow)">

<use xlink:href="svg/icon.svg#record"></use>

</svg>

</a>

<a v-show="! isTestCaseShow" class="hint--top" data-hint="查看用例列表" href="javascript:void(0)">

<svg class="icon" @click="showTestCase(true, isLocalShow)">

<use xlink:href="svg/icon.svg#record"></use>

</svg>

</a>

<img v-show="loadingCount > 0" width="15" height="15" src="img/loading.gif" style="margin-bottom: 4px; margin-left: 6px" />

</div>

<div class="pull-center" >

<ul style="width: 100%; padding-left: 2px;padding-right: 2px;" >

<li style="width: 100%; display: inline-block;text-align: center;">

<!-- 未登录态 -->

<div v-show="isStatisticsEnabled && isCrossEnabled && isAllSummaryShow()" style="display: inline-block; border: #DDD 1px solid" :style="{backgroundColor: currentAccountIndex == -1 ? 'transparent' : '#DDD'}">

<button style="outline: none; border: none" :style="{backgroundColor: currentAccountIndex == -1 ? 'transparent' : '#DDD', color: currentAccountIndex == -1 ? 'gray' : 'black'}" @click="onClickAccount(-1, logoutSummary)">未登录态</button>

<br/>

<div style="background: lightgray; padding: 1px; display: inline-block; margin: 1px" >

<!-- 只能写成一行来消除间隙，不能换行、空格 -->

<a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" @click="onClickLogoutSummary('total')" >{{ getLogoutSummaryTotalText() + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getLogoutSummary().summaryType == 'white' ? 'underline': 'none'}" @click="onClickLogoutSummary('white')" >{{ getLogoutSummaryWhiteText() }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getLogoutSummary().summaryType == 'green' ? 'underline': 'none'}" @click="onClickLogoutSummary('green')" >{{ getLogoutSummaryGreenText() }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getLogoutSummary().summaryType == 'blue' ? 'underline': 'none'}" @click="onClickLogoutSummary('blue')" >{{ getLogoutSummaryBlueText() }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getLogoutSummary().summaryType == 'orange' ? 'underline': 'none'}" @click="onClickLogoutSummary('orange')" >{{ getLogoutSummaryOrangeText() }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getLogoutSummary().summaryType == 'red' ? 'underline': 'none'}" @click="onClickLogoutSummary('red')" >{{ getLogoutSummaryRedText() }}</a>

</div>

</div>

<button style="background-color: #DDD;margin: 0px;outline: none;border: #DDD 1px solid;" href="javascript:void(0)" @click="removeAccountTab()"> - </button>

<!-- 每个账号 -->

<div v-for="(item, index) in accounts" style="display: inline-block; border: #DDD 1px solid" :style="{backgroundColor: currentAccountIndex == index ? 'transparent' : '#DDD'}">

<button class="hint--top" :data-hint="(item.account || item.email || item.phone) + (StringUtil.isEmpty(item.baseUrl) ? '' : '@' + item.baseUrl)" style="outline: none; border: none; padding: 3px;" :style="{backgroundColor: currentAccountIndex == index ? 'transparent' : '#DDD', color: currentAccountIndex == index && item.isLoggedIn ? 'red' : 'black'}" @click="onClickAccount(index, item)">{{ item.name + (getBaseUrlLength(vUrl.value) > 0 ? '' : '@' + StringUtil.trim(item.baseUrl)) }}</button>

<br v-show="isStatisticsEnabled && isCrossEnabled && isAllSummaryShow()" />

<div v-show="isStatisticsEnabled && isCrossEnabled && isAllSummaryShow()" style="background: lightgray; padding: 1px; display: inline-block; margin: 1px" >

<!-- 只能写成一行来消除间隙，不能换行、空格 -->

<a style="background: transparent; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" @click="onClickSummary('total', false, index)" >{{ getSummaryTotalText(index) + ':' }}</a><a style="background: white; color: black; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getSummary(index).summaryType == 'white' ? 'underline': 'none'}" @click="onClickSummary('white', false, index)" >{{ getSummaryWhiteText(index) }}</a><a style="background: green; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getSummary(index).summaryType == 'green' ? 'underline': 'none'}" @click="onClickSummary('green', false, index)" >{{ getSummaryGreenText(index) }}</a><a style="background: blue; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getSummary(index).summaryType == 'blue' ? 'underline': 'none'}" @click="onClickSummary('blue', false, index)" >{{ getSummaryBlueText(index) }}</a><a style="background: orange; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getSummary(index).summaryType == 'orange' ? 'underline': 'none'}" @click="onClickSummary('orange', false, index)" >{{ getSummaryOrangeText(index) }}</a><a style="background: red; color: white; position: relative; min-width: 6px; width: auto; height: 100%; margin: 0; padding: 2px" :style="{'text-decoration': getSummary(index).summaryType == 'red' ? 'underline': 'none'}" @click="onClickSummary('red', false, index)" >{{ getSummaryRedText(index) }}</a>

</div>

</div>

<button style="background-color: #DDD;margin: 0px;outline: none;border: #DDD 1px solid;" href="javascript:void(0)" @click="addAccountTab()"> + </button>

<!-- 全部账号 -->

<div v-show="isStatisticsEnabled && isCrossEnabled && isAllSummaryShow()" style="display: inline-block; border: #DDD 1px solid" :style="{backgroundColor: currentAccountIndex == accounts.length ? 'transparent' : '#DDD'}">

<button style="outline: none; border: none" :style="{backgroundColor: currentAccountIndex == accounts.length ? 'transparent' : '#DDD', color: currentAccountIndex == accounts.length ? 'black' : 'black'}" >全部总计</button>

<br />

<div style="background: lightgray; padding: 1px; display: inline-block; margin: 1px" >