96 lines
5.1 KiB
HTML
96 lines
5.1 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-config-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="yapi_file_path">YAPI 文件路径:</label>
|
||
<input type="text" id="yapi_file_path" name="yapi_file_path" placeholder="例如：./assets/doc/yapi_spec.json">
|
||
<button type="button" class="action-button" onclick="fetchYapiCategories()">加载分类</button>
|
||
<div id="yapi-categories-container" class="categories-tags-container"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="swagger_file_path">Swagger/OpenAPI 文件路径:</label>
|
||
<input type="text" id="swagger_file_path" name="swagger_file_path" placeholder="例如：./assets/doc/swagger_spec.json">
|
||
<button type="button" class="action-button" onclick="fetchSwaggerTags()">加载标签</button>
|
||
<div id="swagger-tags-container" class="categories-tags-container"></div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<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">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="scenarios_dir">自定义场景目录:</label>
|
||
<input type="text" id="scenarios_dir" name="scenarios_dir" placeholder="例如：./custom_scenarios">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="output_dir">报告输出目录:</label>
|
||
<input type="text" id="output_dir" name="output_dir" placeholder="例如：./test_reports">
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<button type="submit" class="submit-button">运行测试</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="results-section">
|
||
<h2>测试状态与结果</h2>
|
||
<div id="status-area">等待配置并运行测试...</div>
|
||
<pre id="results-output"></pre>
|
||
<div id="report-link-area"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |