Finyx Data AI - 接口可视化测试页面
📋 文档说明
本目录包含数据资产盘点系统各接口的可视化测试页面，提供完整的虚拟数据和交互测试功能，帮助开发人员和测试人员快速验证接口功能。
🚀 快速开始
1. 启动后端服务
cd /home/ubuntu/dev/finyx_data_ai
python -m app.main
服务将在 http://localhost:8000 启动。
2. 打开测试页面
直接在浏览器中打开以下 HTML 文件：
- 数据资产智能识别接口:
test_ai_analyze.html - 文档解析接口:
test_parse_document.html - 潜在场景推荐接口:
test_scenario_recommendation.html - 完整报告生成接口:
test_generate_report.html
📊 测试页面列表
1. 数据资产智能识别接口测试 🔍
文件名: test_ai_analyze.html
接口路径: POST /api/v1/inventory/ai-analyze
功能说明: 使用大模型识别数据资产的中文名称、业务含义、PII敏感信息和重要数据特征
功能特性
- ✅ 多行业虚拟数据支持（零售、金融、用户中心）
- ✅ 实时 PII 敏感信息识别
- ✅ 重要数据类型识别
- ✅ 置信度评分展示
- ✅ 可视化图表展示（PII分布、重要数据、置信度）
- ✅ 表结构折叠展示
- ✅ 字段详细信息卡片
虚拟数据场景
| 场景 | 说明 | 核心数据 |
|---|---|---|
| 零售场景 | 生鲜零售企业 | 用户信息、订单信息、会员信息 |
| 金融场景 | 银行机构 | 账户信息、交易记录 |
| 用户中心 | 用户管理系统 | 用户档案、登录日志、支付信息 |
可视化图表
- PII 敏感信息分布: 柱状图展示各类敏感信息数量
- 重要数据类型分布: 柱状图展示重要数据分类
- 置信度分布: 柱状图展示识别置信度分布（高/中/低）
统计卡片
- 总表数
- 总字段数
- PII 字段数
- 重要数据字段数
- 平均置信度
2. 文档解析接口测试 📄
文件名: test_parse_document.html
接口路径: POST /api/v1/inventory/parse-document
功能说明: 解析上传的数据字典文档（Excel/Word/PDF），提取表结构信息
功能特性
- ✅ 支持文件拖拽上传
- ✅ 支持多文件上传
- ✅ 虚拟文件测试（Excel/Word/PDF）
- ✅ 文件类型识别
- ✅ 表结构提取展示
- ✅ 字段详细信息（类型、注释、主键、可为空）
- ✅ 文件大小格式化
- ✅ 解析耗时统计
虚拟文件类型
| 文件类型 | 扩展名 | 虚拟数据 |
|---|---|---|
| Excel | .xlsx, .xls | 用户信息表、订单信息表、商品信息表 |
| Word | .doc, .docx | 会员信息表 |
| 交易流水表 |
可视化图表
- 文件类型分布: 柱状图展示不同文件类型数量
- 字段类型分布: 柱状图展示字段类型分布（VARCHAR、INT、DECIMAL等）
统计卡片
- 文件数
- 总表数
- 总字段数
- 解析耗时
3. 潜在场景推荐接口测试 💡
文件名: test_scenario_recommendation.html
接口路径: POST /api/v1/value/scenario-recommendation
功能说明: 基于企业背景、数据资产清单和存量场景，使用 AI 推荐潜在的数据应用场景
功能特性
- ✅ 多行业场景支持（零售、金融、用户中心）
- ✅ 数据资产配置
- ✅ 存量场景管理（添加/删除）
- ✅ 推荐场景卡片展示
- ✅ 推荐指数星级评分
- ✅ 预估 ROI 标识
- ✅ 实施难度分级
- ✅ 依赖数据资产展示
- ✅ 技术要求清单
虚拟场景数据
| 行业 | 推荐场景数 | 示例场景 |
|---|---|---|
| 零售 | 10个 | 精准会员营销、智能库存补货、价格弹性分析 |
| 金融 | 3个 | 智能风控、理财产品推荐、客户分群画像 |
| 用户中心 | 3个 | 用户行为分析、个性化推荐、用户增长预测 |
场景类型
- 营销增长: 精准营销、推荐、增长分析
- 降本增效: 库存优化、损耗控制、智能客服
- 风险管理: 风控、反欺诈
- 数据分析: 行为分析、增长预测
可视化图表
- 场景类型分布: 柱状图展示不同类型场景数量
- 预估 ROI 分布: 柱状图展示高/中/低 ROI 分布
统计卡片
- 推荐场景数
- 高推荐指数（5星）
- 中等推荐指数（3-4星）
- 低推荐指数（1-2星）
- 生成耗时
4. 完整报告生成接口测试 📊
文件名: test_generate_report.html
接口路径: POST /api/v1/delivery/generate-report
功能说明: 基于数据盘点结果、背景调研信息和价值挖掘场景，生成完整的数据资产盘点工作总结报告
功能特性
- ✅ 多行业报告模板（零售、金融、医疗）
- ✅ 四章节完整报告生成
- ✅ 报告导航快速定位
- ✅ 数据可视化展示
- ✅ 合规风险提示
- ✅ 专家建议列表
- ✅ 响应式报告布局
报告章节
| 章节 | 内容 |
|---|---|
| 章节一 | 企业数字化情况简介（企业背景、信息化建设现状、业务流与数据流） |
| 章节二 | 数据资源统计（数据总量概览、存储分布、数据来源结构） |
| 章节三 | 数据资产情况盘点（资产概览、资产构成、合规风险提示） |
| 章节四 | 专家建议与下一步计划（合规整改建议、技术演进建议、价值深化建议） |
虚拟报告数据
| 行业 | 数据量 | 核心资产数 | 合规风险数 |
|---|---|---|---|
| 零售 | 58 PB | 2个 | 2个 |
| 金融 | 63 PB | 1个 | 1个 |
| 医疗 | 62 PB | 1个 | 1个 |
可视化组件
- 存储分布: 彩色条形图展示不同业务域的数据量和存储类型
- 数据来源结构: 结构化数据 vs 半结构化数据比例
- 风险警告框: 橙色警告框展示合规风险
- 建议列表: 带序号的建议列表
🎨 通用功能
所有测试页面都包含以下通用功能：
API 调用信息展示
- ✅ 请求端点显示
- ✅ 请求数据 JSON 格式化展示
- ✅ 响应数据 JSON 格式化展示
- ✅ 代码语法高亮
数据可视化
- ✅ 柱状图（Bar Chart）
- ✅ 饼图（Pie Chart）
- ✅ 卡片列表（Card List）
- ✅ 表格展示（Table）
- ✅ 统计卡片（Stat Cards）
- ✅ 标签展示（Tags）
UI/UX 特性
- ✅ 加载状态展示（动画 Spinner）
- ✅ 成功/错误消息提示
- ✅ Toast 消息通知
- ✅ 表单验证
- ✅ 响应式布局（支持桌面/平板/手机）
- ✅ 深色/浅色配色方案
- ✅ 平滑动画过渡
虚拟数据功能
- ✅ 快速加载虚拟数据按钮
- ✅ 多场景数据支持
- ✅ 动态数据生成
- ✅ 模拟 API 响应
🛠️ 技术架构
基础框架
所有测试页面共享以下基础框架：
1. base_test_framework.js - JavaScript 框架
提供以下功能：
API 调用函数
apiRequest(endpoint, data, method)- 统一的 API 请求函数showLoading(elementId)- 显示加载状态hideLoading(elementId, content)- 隐藏加载状态showError(elementId, message)- 显示错误信息showSuccess(elementId, message)- 显示成功消息
图表渲染函数
renderBarChart(containerId, data, title)- 渲染柱状图renderPieChart(containerId, data, title)- 渲染饼图renderCardList(containerId, items, title)- 渲染卡片列表renderTable(containerId, columns, data, title)- 渲染表格
辅助函数
getBarColor(index)- 获取柱状图颜色formatCellValue(value)- 格式化单元格值formatNumber(num, decimals)- 格式化数字formatTime(seconds)- 格式化时间delay(ms)- 延迟函数copyToClipboard(text)- 复制到剪贴板showToast(message)- 显示 Toast 消息
2. test_common.css - 公共样式
提供以下样式：
布局组件
- 容器（
.container） - 栅格布局（
.content-grid） - 卡片（
.card） - 标题（
.page-title,.section-title）
表单组件
- 输入框（
.form-control） - 按钮（
.btn） - 表单组（
.form-group） - 表单行（
.form-row）
数据展示
- 统计卡片（
.stat-card） - 表格（
.data-table） - 标签（
.tag） - 选项卡（
.tabs）
状态反馈
- 加载动画（
.spinner） - 错误容器（
.error-container） - 成功容器（
.success-container） - Toast 消息（
.toast）
响应式设计
- 桌面端（> 992px）
- 平板端（768px - 992px）
- 移动端（< 768px）
📝 使用指南
基本使用流程
-
选择测试页面
- 根据需要测试的接口，打开对应的 HTML 文件
-
配置测试参数
- 填写表单字段
- 或点击"快速使用虚拟数据"按钮
-
执行测试
- 点击"开始分析"/"生成推荐"/"生成报告"等按钮
- 等待模拟 API 调用完成
-
查看结果
- 查看统计卡片了解概览
- 查看图表了解数据分布
- 查看详细信息了解具体结果
-
查看 API 数据
- 在左侧面板查看请求数据
- 查看响应数据的 JSON 格式
高级使用
自定义虚拟数据
每个测试页面都提供了 mockData 对象，可以根据需要修改：
const mockData = {
// 自定义数据结构
};
连接真实 API
修改 API_BASE_URL 常量，连接到实际后端：
const API_BASE_URL = 'http://localhost:8000/api/v1';
然后移除模拟 API 调用代码，使用真实的 apiRequest() 函数。
🐛 常见问题
Q1: 页面无法显示图表？
A: 确保 base_test_framework.js 和 test_common.css 文件与 HTML 文件在同一目录下。
Q2: 虚拟数据不符合我的需求？
A: 可以直接修改 HTML 文件中的 mockData 对象，自定义虚拟数据。
Q3: 如何连接到真实后端 API？
A:
- 确保后端服务已启动
- 修改
API_BASE_URL为实际后端地址 - 移除模拟响应代码，使用
apiRequest()函数
Q4: 如何添加新的测试场景？
A:
- 复制现有测试页面作为模板
- 修改页面标题和描述
- 自定义虚拟数据和表单字段
- 调整渲染函数以适配新接口
📦 文件结构
tests/
├── README.md # 本文档
├── base_test_framework.js # JavaScript 基础框架
├── test_common.css # 公共样式文件
├── test_ai_analyze.html # 数据资产智能识别接口测试
├── test_parse_document.html # 文档解析接口测试
├── test_scenario_recommendation.html # 潜在场景推荐接口测试
└── test_generate_report.html # 完整报告生成接口测试
🎯 下一步计划
待开发的测试页面
- SQL 结果解析接口测试页面
- 业务表解析接口测试页面
- 存量场景优化建议接口测试页面
功能增强
- 添加单元测试自动化
- 添加性能测试
- 添加对比测试（多个模型对比）
- 添加测试报告导出功能
- 添加测试数据持久化
📞 联系方式
如有问题或建议，请联系：
- 项目负责人: [待填写]
- 技术负责人: [待填写]
- 测试负责人: [待填写]
📄 相关文档
最后更新: 2026-01-11
版本: v1.0.0
维护者: Finyx AI Team