108 lines
5.7 KiB
HTML
108 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>API 测试工具</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>API 合规性测试</h1>
|
||
|
||
<div class="configuration-section">
|
||
<h2>测试配置</h2>
|
||
<form id="test-form">
|
||
<div class="form-group">
|
||
<label for="base_url">API 基础URL (必填):</label>
|
||
<input type="text" id="base_url" name="base_url" required placeholder="例如：http://localhost:8080/api/v1">
|
||
</div>
|
||
|
||
<fieldset>
|
||
<legend>API 定义源 (选择一个)</legend>
|
||
<div class="form-group">
|
||
<label for="api_spec_type">API 规范类型:</label>
|
||
<select id="api_spec_type" name="api_spec_type">
|
||
<option value="YAPI">YAPI (.json)</option>
|
||
<option value="Swagger">Swagger/OpenAPI (.json, .yaml)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="api_spec_file">上传 API 规范文件:</label>
|
||
<input type="file" id="api_spec_file" name="api_spec_file" accept=".json,.yaml,.yml" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<button type="button" id="load-spec-btn">加载分类/标签</button>
|
||
</div>
|
||
<div id="yapi-categories-container" class="checkbox-container"></div>
|
||
<div id="swagger-tags-container" class="checkbox-container"></div>
|
||
</fieldset>
|
||
|
||
<details>
|
||
<summary>高级配置 (点击展开)</summary>
|
||
<div class="form-group">
|
||
<label for="custom_test_cases_dir">自定义测试用例目录:</label>
|
||
<input type="text" id="custom_test_cases_dir" name="custom_test_cases_dir" placeholder="例如：./custom_testcases" value="./custom_testcases">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="stages_dir">自定义阶段目录:</label>
|
||
<input type="text" id="stages_dir" name="stages_dir" placeholder="例如：./custom_stages" value="./custom_stages">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="output_dir">报告输出目录:</label>
|
||
<input type="text" id="output_dir" name="output_dir" placeholder="例如：./test_reports" value="./test_reports">
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>LLM 配置 (可选, 点击展开)</summary>
|
||
<fieldset>
|
||
<legend>LLM 配置 (可选)</legend>
|
||
<div class="form-group">
|
||
<label for="llm_api_key">LLM API Key:</label>
|
||
<input type="password" id="llm_api_key" name="llm_api_key" placeholder="留空则尝试读取环境变量">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="llm_base_url">LLM Base URL:</label>
|
||
<input type="text" id="llm_base_url" name="llm_base_url" placeholder="例如：https://dashscope.aliyuncs.com/compatible-mode/v1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="llm_model_name">LLM 模型名称:</label>
|
||
<input type="text" id="llm_model_name" name="llm_model_name" placeholder="例如：qwen-plus">
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<input type="checkbox" id="use_llm_for_request_body" name="use_llm_for_request_body">
|
||
<label for="use_llm_for_request_body">使用LLM生成请求体</label>
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<input type="checkbox" id="use_llm_for_path_params" name="use_llm_for_path_params">
|
||
<label for="use_llm_for_path_params">使用LLM生成路径参数</label>
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<input type="checkbox" id="use_llm_for_query_params" name="use_llm_for_query_params">
|
||
<label for="use_llm_for_query_params">使用LLM生成查询参数</label>
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<input type="checkbox" id="use_llm_for_headers" name="use_llm_for_headers">
|
||
<label for="use_llm_for_headers">使用LLM生成头部参数</label>
|
||
</div>
|
||
</fieldset>
|
||
</details>
|
||
|
||
<button type="submit" class="submit-button">运行测试</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="results-section">
|
||
<h2>测试日志与结果</h2>
|
||
<label for="log-output">实时日志:</label>
|
||
<textarea id="log-output" readonly style="width:100%"></textarea>
|
||
<div id="results-container">
|
||
<!-- 测试结果将在此处动态生成 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |