提交更改后的原型图等
#27
Merged
hnu202326010131
merged 3 commits from xingyuanxin_branch into develop 2 months ago
@ -0,0 +1,266 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1400" height="1800" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
.title { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 24px; font-weight: bold; text-anchor: middle; }
|
||||
.package-title { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; font-weight: bold; }
|
||||
.component-text { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 12px; text-anchor: middle; }
|
||||
.small-text { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 10px; text-anchor: middle; }
|
||||
.lightblue { fill: #E3F2FD; stroke: #1976D2; stroke-width: 2; }
|
||||
.lightgreen { fill: #E8F5E8; stroke: #388E3C; stroke-width: 2; }
|
||||
.lightyellow { fill: #FFF3E0; stroke: #F57C00; stroke-width: 2; }
|
||||
.lightred { fill: #FFEBEE; stroke: #D32F2F; stroke-width: 2; }
|
||||
.package-border { fill: none; stroke: #666; stroke-width: 2; stroke-dasharray: 5,5; }
|
||||
.arrow { stroke: #333; stroke-width: 2; marker-end: url(#arrowhead); }
|
||||
</style>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#333" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1400" height="1800" fill="#F8F9FA"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="700" y="30" class="title">故障检测系统 - 原型界面设计</text>
|
||||
|
||||
<!-- 主界面布局 Package -->
|
||||
<rect x="50" y="60" width="600" height="300" class="package-border"/>
|
||||
<text x="60" y="80" class="package-title">主界面布局</text>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<rect x="70" y="90" width="560" height="80" class="lightblue"/>
|
||||
<text x="350" y="110" class="component-text">顶部导航栏</text>
|
||||
<rect x="80" y="120" width="60" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="110" y="138" class="small-text">Logo</text>
|
||||
<rect x="150" y="120" width="70" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="185" y="138" class="small-text">集群状态</text>
|
||||
<rect x="230" y="120" width="70" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="265" y="138" class="small-text">日志查询</text>
|
||||
<rect x="310" y="120" width="70" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="345" y="138" class="small-text">故障诊断</text>
|
||||
<rect x="390" y="120" width="70" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="425" y="138" class="small-text">自动修复</text>
|
||||
<rect x="470" y="120" width="70" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="505" y="138" class="small-text">系统配置</text>
|
||||
<rect x="550" y="120" width="70" height="30" fill="white" stroke="#1976D2"/>
|
||||
<text x="585" y="138" class="small-text">用户信息</text>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<rect x="70" y="180" width="120" height="160" class="lightgreen"/>
|
||||
<text x="130" y="200" class="component-text">侧边栏</text>
|
||||
<rect x="80" y="210" width="100" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="130" y="223" class="small-text">仪表板</text>
|
||||
<rect x="80" y="235" width="100" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="130" y="248" class="small-text">集群监控</text>
|
||||
<rect x="80" y="260" width="100" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="130" y="273" class="small-text">日志管理</text>
|
||||
<rect x="80" y="285" width="100" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="130" y="298" class="small-text">故障处理</text>
|
||||
<rect x="80" y="310" width="100" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="130" y="323" class="small-text">修复历史</text>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<rect x="200" y="180" width="430" height="160" class="lightyellow"/>
|
||||
<text x="415" y="200" class="component-text">主内容区</text>
|
||||
<rect x="210" y="210" width="410" height="120" fill="white" stroke="#F57C00"/>
|
||||
<text x="415" y="275" class="component-text">内容展示区域</text>
|
||||
|
||||
<!-- 仪表板页面 Package -->
|
||||
<rect x="700" y="60" width="650" height="280" class="package-border"/>
|
||||
<text x="710" y="80" class="package-title">仪表板页面</text>
|
||||
|
||||
<!-- 集群概览卡片 -->
|
||||
<rect x="720" y="90" width="200" height="120" class="lightblue"/>
|
||||
<text x="820" y="110" class="component-text">集群概览卡片</text>
|
||||
<rect x="730" y="120" width="180" height="25" fill="white" stroke="#1976D2"/>
|
||||
<text x="820" y="135" class="small-text">节点状态统计</text>
|
||||
<rect x="730" y="150" width="180" height="25" fill="white" stroke="#1976D2"/>
|
||||
<text x="820" y="165" class="small-text">资源使用率</text>
|
||||
<rect x="730" y="180" width="180" height="25" fill="white" stroke="#1976D2"/>
|
||||
<text x="820" y="195" class="small-text">告警数量</text>
|
||||
|
||||
<!-- 实时监控图表 -->
|
||||
<rect x="930" y="90" width="200" height="120" class="lightgreen"/>
|
||||
<text x="1030" y="110" class="component-text">实时监控图表</text>
|
||||
<rect x="940" y="120" width="180" height="25" fill="white" stroke="#388E3C"/>
|
||||
<text x="1030" y="135" class="small-text">CPU使用率趋势</text>
|
||||
<rect x="940" y="150" width="180" height="25" fill="white" stroke="#388E3C"/>
|
||||
<text x="1030" y="165" class="small-text">内存使用率趋势</text>
|
||||
<rect x="940" y="180" width="180" height="25" fill="white" stroke="#388E3C"/>
|
||||
<text x="1030" y="195" class="small-text">磁盘I/O趋势</text>
|
||||
|
||||
<!-- 最近故障列表 -->
|
||||
<rect x="1140" y="90" width="200" height="120" class="lightyellow"/>
|
||||
<text x="1240" y="110" class="component-text">最近故障列表</text>
|
||||
<rect x="1150" y="120" width="180" height="80" fill="white" stroke="#F57C00"/>
|
||||
<text x="1240" y="165" class="small-text">故障ID | 类型 | 时间 | 状态</text>
|
||||
|
||||
<!-- 日志查询页面 Package -->
|
||||
<rect x="50" y="380" width="650" height="280" class="package-border"/>
|
||||
<text x="60" y="400" class="package-title">日志查询页面</text>
|
||||
|
||||
<!-- 搜索条件 -->
|
||||
<rect x="70" y="410" width="200" height="120" class="lightblue"/>
|
||||
<text x="170" y="430" class="component-text">搜索条件</text>
|
||||
<rect x="80" y="440" width="180" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="170" y="453" class="small-text">时间范围选择器</text>
|
||||
<rect x="80" y="465" width="180" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="170" y="478" class="small-text">日志级别筛选</text>
|
||||
<rect x="80" y="490" width="180" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="170" y="503" class="small-text">关键词搜索</text>
|
||||
<rect x="80" y="515" width="180" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="170" y="528" class="small-text">主机筛选</text>
|
||||
|
||||
<!-- 日志列表 -->
|
||||
<rect x="280" y="410" width="200" height="120" class="lightgreen"/>
|
||||
<text x="380" y="430" class="component-text">日志列表</text>
|
||||
<rect x="290" y="440" width="180" height="70" fill="white" stroke="#388E3C"/>
|
||||
<text x="380" y="478" class="small-text">时间 | 主机 | 级别 | 消息</text>
|
||||
<rect x="290" y="515" width="180" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="380" y="528" class="small-text">分页控件</text>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<rect x="490" y="410" width="200" height="120" class="lightyellow"/>
|
||||
<text x="590" y="430" class="component-text">操作按钮</text>
|
||||
<rect x="500" y="450" width="180" height="30" fill="white" stroke="#F57C00"/>
|
||||
<text x="590" y="468" class="small-text">导出日志</text>
|
||||
<rect x="500" y="490" width="180" height="30" fill="white" stroke="#F57C00"/>
|
||||
<text x="590" y="508" class="small-text">发起诊断</text>
|
||||
|
||||
<!-- 故障诊断页面 Package -->
|
||||
<rect x="720" y="380" width="630" height="280" class="package-border"/>
|
||||
<text x="730" y="400" class="package-title">故障诊断页面</text>
|
||||
|
||||
<!-- 诊断配置 -->
|
||||
<rect x="740" y="410" width="180" height="120" class="lightblue"/>
|
||||
<text x="830" y="430" class="component-text">诊断配置</text>
|
||||
<rect x="750" y="440" width="160" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="830" y="453" class="small-text">选择日志范围</text>
|
||||
<rect x="750" y="465" width="160" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="830" y="478" class="small-text">诊断类型选择</text>
|
||||
<rect x="750" y="490" width="160" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="830" y="503" class="small-text">AI模型选择</text>
|
||||
|
||||
<!-- 诊断进度 -->
|
||||
<rect x="930" y="410" width="180" height="120" class="lightgreen"/>
|
||||
<text x="1020" y="430" class="component-text">诊断进度</text>
|
||||
<rect x="940" y="440" width="160" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1020" y="453" class="small-text">进度条</text>
|
||||
<rect x="940" y="465" width="160" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1020" y="478" class="small-text">当前状态</text>
|
||||
<rect x="940" y="490" width="160" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1020" y="503" class="small-text">预计时间</text>
|
||||
|
||||
<!-- 诊断结果 -->
|
||||
<rect x="1120" y="410" width="180" height="120" class="lightyellow"/>
|
||||
<text x="1210" y="430" class="component-text">诊断结果</text>
|
||||
<rect x="1130" y="440" width="160" height="18" fill="white" stroke="#F57C00"/>
|
||||
<text x="1210" y="452" class="small-text">故障类型</text>
|
||||
<rect x="1130" y="462" width="160" height="18" fill="white" stroke="#F57C00"/>
|
||||
<text x="1210" y="474" class="small-text">原因分析</text>
|
||||
<rect x="1130" y="484" width="160" height="18" fill="white" stroke="#F57C00"/>
|
||||
<text x="1210" y="496" class="small-text">修复建议</text>
|
||||
<rect x="1130" y="506" width="160" height="18" fill="white" stroke="#F57C00"/>
|
||||
<text x="1210" y="518" class="small-text">风险等级</text>
|
||||
|
||||
<!-- 自动修复页面 Package -->
|
||||
<rect x="50" y="700" width="650" height="280" class="package-border"/>
|
||||
<text x="60" y="720" class="package-title">自动修复页面</text>
|
||||
|
||||
<!-- 修复方案 -->
|
||||
<rect x="70" y="730" width="180" height="120" class="lightblue"/>
|
||||
<text x="160" y="750" class="component-text">修复方案</text>
|
||||
<rect x="80" y="760" width="160" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="160" y="773" class="small-text">修复脚本预览</text>
|
||||
<rect x="80" y="785" width="160" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="160" y="798" class="small-text">影响范围评估</text>
|
||||
<rect x="80" y="810" width="160" height="20" fill="white" stroke="#1976D2"/>
|
||||
<text x="160" y="823" class="small-text">回滚方案</text>
|
||||
|
||||
<!-- 风险确认 -->
|
||||
<rect x="260" y="730" width="180" height="120" class="lightred"/>
|
||||
<text x="350" y="750" class="component-text">风险确认</text>
|
||||
<rect x="270" y="760" width="160" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="350" y="773" class="small-text">风险等级显示</text>
|
||||
<rect x="270" y="785" width="160" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="350" y="798" class="small-text">确认复选框</text>
|
||||
<rect x="270" y="810" width="160" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="350" y="823" class="small-text">执行按钮</text>
|
||||
|
||||
<!-- 执行监控 -->
|
||||
<rect x="450" y="730" width="180" height="120" class="lightgreen"/>
|
||||
<text x="540" y="750" class="component-text">执行监控</text>
|
||||
<rect x="460" y="760" width="160" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="540" y="773" class="small-text">执行日志实时显示</text>
|
||||
<rect x="460" y="785" width="160" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="540" y="798" class="small-text">执行状态</text>
|
||||
<rect x="460" y="810" width="160" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="540" y="823" class="small-text">停止按钮</text>
|
||||
|
||||
<!-- 弹窗组件 Package -->
|
||||
<rect x="720" y="700" width="630" height="280" class="package-border"/>
|
||||
<text x="730" y="720" class="package-title">弹窗组件</text>
|
||||
|
||||
<!-- 高风险确认弹窗 -->
|
||||
<rect x="740" y="730" width="280" height="120" class="lightred"/>
|
||||
<text x="880" y="750" class="component-text">高风险确认弹窗</text>
|
||||
<rect x="750" y="760" width="120" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="810" y="773" class="small-text">警告图标</text>
|
||||
<rect x="880" y="760" width="130" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="945" y="773" class="small-text">风险说明</text>
|
||||
<rect x="750" y="785" width="120" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="810" y="798" class="small-text">确认按钮</text>
|
||||
<rect x="880" y="785" width="130" height="20" fill="white" stroke="#D32F2F"/>
|
||||
<text x="945" y="798" class="small-text">取消按钮</text>
|
||||
|
||||
<!-- 执行结果弹窗 -->
|
||||
<rect x="1030" y="730" width="280" height="120" class="lightgreen"/>
|
||||
<text x="1170" y="750" class="component-text">执行结果弹窗</text>
|
||||
<rect x="1040" y="760" width="120" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1100" y="773" class="small-text">执行状态图标</text>
|
||||
<rect x="1170" y="760" width="130" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1235" y="773" class="small-text">结果摘要</text>
|
||||
<rect x="1040" y="785" width="120" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1100" y="798" class="small-text">详细日志</text>
|
||||
<rect x="1170" y="785" width="130" height="20" fill="white" stroke="#388E3C"/>
|
||||
<text x="1235" y="798" class="small-text">关闭按钮</text>
|
||||
|
||||
<!-- 交互流程 Package -->
|
||||
<rect x="50" y="1020" width="650" height="200" class="package-border"/>
|
||||
<text x="60" y="1040" class="package-title">交互流程</text>
|
||||
|
||||
<!-- 流程箭头 -->
|
||||
<line x1="170" y1="1060" x2="270" y2="1060" class="arrow"/>
|
||||
<text x="220" y="1055" class="small-text">选择日志发起诊断</text>
|
||||
|
||||
<line x1="370" y1="1060" x2="470" y2="1060" class="arrow"/>
|
||||
<text x="420" y="1055" class="small-text">诊断完成生成修复方案</text>
|
||||
|
||||
<line x1="170" y1="1100" x2="270" y2="1100" class="arrow"/>
|
||||
<text x="220" y="1095" class="small-text">高风险修复需确认</text>
|
||||
|
||||
<line x1="370" y1="1100" x2="470" y2="1100" class="arrow"/>
|
||||
<text x="420" y="1095" class="small-text">确认后开始执行</text>
|
||||
|
||||
<line x1="170" y1="1140" x2="270" y2="1140" class="arrow"/>
|
||||
<text x="220" y="1135" class="small-text">执行完成显示结果</text>
|
||||
|
||||
<line x1="370" y1="1140" x2="470" y2="1140" class="arrow"/>
|
||||
<text x="420" y="1135" class="small-text">点击故障查看相关日志</text>
|
||||
|
||||
<line x1="170" y1="1180" x2="270" y2="1180" class="arrow"/>
|
||||
<text x="220" y="1175" class="small-text">快速修复入口</text>
|
||||
|
||||
<!-- 响应式设计说明 Package -->
|
||||
<rect x="720" y="1020" width="630" height="200" class="package-border"/>
|
||||
<text x="730" y="1040" class="package-title">响应式设计说明</text>
|
||||
|
||||
<rect x="740" y="1060" width="590" height="140" fill="#FFFDE7" stroke="#F9A825" stroke-width="2"/>
|
||||
<text x="750" y="1080" class="small-text">移动端适配：</text>
|
||||
<text x="750" y="1100" class="small-text">- 顶部导航折叠为汉堡菜单</text>
|
||||
<text x="750" y="1120" class="small-text">- 侧边栏可收起/展开</text>
|
||||
<text x="750" y="1140" class="small-text">- 表格支持横向滚动</text>
|
||||
<text x="750" y="1160" class="small-text">- 图表自适应屏幕宽度</text>
|
||||
<text x="750" y="1180" class="small-text">- 弹窗全屏显示</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,140 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1400" height="1000" xmlns="http://www.w3.org/2000/svg" style="background-color: white;">
|
||||
<defs>
|
||||
<style>
|
||||
.title { font-family: 'Microsoft YaHei', sans-serif; font-size: 24px; font-weight: bold; text-anchor: middle; }
|
||||
.component-title { font-family: 'Microsoft YaHei', sans-serif; font-size: 14px; font-weight: bold; text-anchor: middle; }
|
||||
.component-text { font-family: 'Microsoft YaHei', sans-serif; font-size: 12px; text-anchor: middle; }
|
||||
.small-text { font-family: 'Microsoft YaHei', sans-serif; font-size: 10px; }
|
||||
.hadoop-cluster { fill: #E8F5E8; stroke: #4CAF50; stroke-width: 3; }
|
||||
.component { fill: #E3F2FD; stroke: #1976D2; stroke-width: 2; }
|
||||
.database { fill: #FFF3E0; stroke: #FF9800; stroke-width: 2; }
|
||||
.queue { fill: #FFEBEE; stroke: #F44336; stroke-width: 2; }
|
||||
.cloud { fill: #F3E5F5; stroke: #9C27B0; stroke-width: 2; }
|
||||
.frontend { fill: #E0F2F1; stroke: #009688; stroke-width: 2; }
|
||||
.llm { fill: #FCE4EC; stroke: #E91E63; stroke-width: 2; }
|
||||
.arrow { stroke: #333333; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
||||
.bidirectional { stroke: #666666; stroke-width: 2; fill: none; marker-end: url(#arrowhead); marker-start: url(#arrowhead); }
|
||||
</style>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#333333" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- 标题 -->
|
||||
<text x="700" y="30" class="title">故障检测系统总体架构</text>
|
||||
|
||||
<!-- Hadoop Cluster -->
|
||||
<g id="hadoop-cluster">
|
||||
<rect x="50" y="80" width="400" height="250" rx="10" class="hadoop-cluster" />
|
||||
<text x="250" y="105" class="component-title">Hadoop Cluster</text>
|
||||
|
||||
<!-- NameNode -->
|
||||
<rect x="80" y="130" width="120" height="60" rx="5" class="component" />
|
||||
<text x="140" y="165" class="component-text">NameNode</text>
|
||||
|
||||
<!-- DataNode 1 -->
|
||||
<rect x="220" y="130" width="120" height="60" rx="5" class="component" />
|
||||
<text x="280" y="165" class="component-text">DataNode</text>
|
||||
|
||||
<!-- DataNode 2 -->
|
||||
<rect x="220" y="210" width="120" height="60" rx="5" class="component" />
|
||||
<text x="280" y="245" class="component-text">DataNode</text>
|
||||
</g>
|
||||
|
||||
<!-- Flume Agents -->
|
||||
<g id="flume">
|
||||
<ellipse cx="250" cy="420" rx="100" ry="50" class="cloud" />
|
||||
<text x="250" y="425" class="component-title">Flume Agents</text>
|
||||
</g>
|
||||
|
||||
<!-- FastAPI Service -->
|
||||
<g id="fastapi">
|
||||
<rect x="550" y="350" width="200" height="100" rx="10" class="component" />
|
||||
<text x="650" y="405" class="component-title">FastAPI Service</text>
|
||||
</g>
|
||||
|
||||
<!-- MySQL Database -->
|
||||
<g id="mysql">
|
||||
<rect x="850" y="200" width="150" height="80" rx="10" class="database" />
|
||||
<text x="925" y="245" class="component-title">MySQL</text>
|
||||
</g>
|
||||
|
||||
<!-- Redis Cache -->
|
||||
<g id="redis">
|
||||
<rect x="850" y="320" width="150" height="80" rx="10" class="queue" />
|
||||
<text x="925" y="365" class="component-title">Redis</text>
|
||||
</g>
|
||||
|
||||
<!-- LLM Diagnose -->
|
||||
<g id="llm">
|
||||
<rect x="550" y="550" width="200" height="100" rx="10" class="llm" />
|
||||
<text x="650" y="595" class="component-title">LLM Diagnose</text>
|
||||
<text x="650" y="615" class="small-text">调用大模型</text>
|
||||
<text x="650" y="630" class="small-text">返回FixCommand</text>
|
||||
</g>
|
||||
|
||||
<!-- Frontend Web -->
|
||||
<g id="frontend">
|
||||
<rect x="100" y="550" width="300" height="100" rx="10" class="frontend" />
|
||||
<text x="250" y="595" class="component-title">Frontend Web</text>
|
||||
<text x="250" y="615" class="small-text">(Vue/React + ECharts)</text>
|
||||
</g>
|
||||
|
||||
<!-- 连接线和标签 -->
|
||||
<g id="connections">
|
||||
<!-- Flume to DataNodes -->
|
||||
<line x1="250" y1="370" x2="280" y2="190" class="arrow" />
|
||||
<text x="200" y="280" class="small-text">采集HDFS/YARN日志</text>
|
||||
|
||||
<line x1="250" y1="370" x2="280" y2="270" class="arrow" />
|
||||
<text x="200" y="320" class="small-text">采集HDFS/YARN日志</text>
|
||||
|
||||
<!-- API to Database -->
|
||||
<line x1="750" y1="380" x2="850" y2="240" class="bidirectional" />
|
||||
<text x="780" y="300" class="small-text">写入/查询故障记录</text>
|
||||
|
||||
<!-- API to Redis -->
|
||||
<line x1="750" y1="400" x2="850" y2="360" class="bidirectional" />
|
||||
<text x="780" y="380" class="small-text">状态缓存/队列</text>
|
||||
|
||||
<!-- API to LLM -->
|
||||
<line x1="650" y1="450" x2="650" y2="550" class="bidirectional" />
|
||||
<text x="670" y="500" class="small-text">调用诊断服务</text>
|
||||
|
||||
<!-- Frontend to API -->
|
||||
<line x1="400" y1="580" x2="550" y2="420" class="bidirectional" />
|
||||
<text x="420" y="480" class="small-text">/api/cluster/status</text>
|
||||
<text x="420" y="495" class="small-text">/api/logs/query</text>
|
||||
<text x="420" y="510" class="small-text">/api/diagnosis/result</text>
|
||||
<text x="420" y="525" class="small-text">/api/repair/execute</text>
|
||||
|
||||
<!-- WebSocket connection -->
|
||||
<path d="M 400 600 Q 500 520 550 440" stroke="#FF5722" stroke-width="2" fill="none" stroke-dasharray="5,5" marker-end="url(#arrowhead)" />
|
||||
<text x="450" y="560" class="small-text" fill="#FF5722">WebSocket推送</text>
|
||||
<text x="450" y="575" class="small-text" fill="#FF5722">状态/诊断结果</text>
|
||||
</g>
|
||||
|
||||
<!-- 架构说明 -->
|
||||
<g id="architecture-notes">
|
||||
<rect x="50" y="700" width="1300" height="250" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="1" />
|
||||
<text x="60" y="720" class="component-title">架构说明：</text>
|
||||
|
||||
<text x="70" y="750" class="component-text">数据采集层：</text>
|
||||
<text x="90" y="770" class="small-text">• Flume Agents负责从Hadoop集群各节点采集HDFS和YARN日志</text>
|
||||
<text x="90" y="785" class="small-text">• 支持实时日志流处理和结构化数据传输</text>
|
||||
|
||||
<text x="70" y="810" class="component-text">服务层：</text>
|
||||
<text x="90" y="830" class="small-text">• FastAPI提供RESTful API和WebSocket服务</text>
|
||||
<text x="90" y="845" class="small-text">• MySQL存储故障记录、执行日志等持久化数据</text>
|
||||
<text x="90" y="860" class="small-text">• Redis提供缓存和消息队列功能</text>
|
||||
|
||||
<text x="70" y="885" class="component-text">智能诊断：</text>
|
||||
<text x="90" y="905" class="small-text">• 集成大语言模型进行智能故障诊断</text>
|
||||
<text x="90" y="920" class="small-text">• 生成结构化的修复命令(FixCommand)</text>
|
||||
|
||||
<text x="70" y="945" class="component-text">前端展示：</text>
|
||||
<text x="90" y="965" class="small-text">• Vue/React构建的现代化Web界面</text>
|
||||
<text x="90" y="980" class="small-text">• ECharts提供丰富的数据可视化功能</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
@ -0,0 +1,201 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="800" height="1400" xmlns="http://www.w3.org/2000/svg" style="background-color: white;">
|
||||
<defs>
|
||||
<style>
|
||||
.title { font-family: 'Microsoft YaHei', sans-serif; font-size: 24px; font-weight: bold; text-anchor: middle; }
|
||||
.activity-text { font-family: 'Microsoft YaHei', sans-serif; font-size: 12px; text-anchor: middle; }
|
||||
.decision-text { font-family: 'Microsoft YaHei', sans-serif; font-size: 11px; text-anchor: middle; }
|
||||
.small-text { font-family: 'Microsoft YaHei', sans-serif; font-size: 10px; text-anchor: middle; }
|
||||
.activity { fill: #E3F2FD; stroke: #1976D2; stroke-width: 2; rx: 20; }
|
||||
.decision { fill: #FFF3E0; stroke: #FF9800; stroke-width: 2; }
|
||||
.start-end { fill: #4CAF50; stroke: #2E7D32; stroke-width: 2; }
|
||||
.partition { fill: #F3E5F5; stroke: #9C27B0; stroke-width: 2; stroke-dasharray: 5,5; }
|
||||
.arrow { stroke: #333333; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
||||
.yes-arrow { stroke: #4CAF50; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
||||
.no-arrow { stroke: #F44336; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
||||
</style>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#333333" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- 标题 -->
|
||||
<text x="400" y="30" class="title">日志诊断与自动修复 - 活动图</text>
|
||||
|
||||
<!-- 开始节点 -->
|
||||
<ellipse cx="400" cy="70" rx="30" ry="15" class="start-end" />
|
||||
<text x="400" y="75" class="small-text" fill="white">开始</text>
|
||||
|
||||
<!-- 活动1: Flume采集日志 -->
|
||||
<rect x="300" y="110" width="200" height="40" class="activity" />
|
||||
<text x="400" y="135" class="activity-text">Flume采集日志</text>
|
||||
|
||||
<!-- 活动2: FastAPI接收并解析日志 -->
|
||||
<rect x="280" y="170" width="240" height="40" class="activity" />
|
||||
<text x="400" y="195" class="activity-text">FastAPI接收并解析日志</text>
|
||||
|
||||
<!-- 活动3: 保存FaultRecord到MySQL -->
|
||||
<rect x="280" y="230" width="240" height="40" class="activity" />
|
||||
<text x="400" y="255" class="activity-text">保存 FaultRecord 到 MySQL</text>
|
||||
|
||||
<!-- 分区: 用户/系统触发 -->
|
||||
<rect x="50" y="290" width="700" height="400" class="partition" />
|
||||
<text x="60" y="310" class="decision-text">用户/系统触发</text>
|
||||
|
||||
<!-- 决策1: 是否需要诊断? -->
|
||||
<polygon points="400,340 480,370 400,400 320,370" class="decision" />
|
||||
<text x="400" y="375" class="decision-text">是否需要诊断?</text>
|
||||
|
||||
<!-- 是路径 -->
|
||||
<rect x="500" y="350" width="180" height="30" class="activity" />
|
||||
<text x="590" y="370" class="activity-text">聚合相关日志</text>
|
||||
|
||||
<rect x="500" y="390" width="180" height="30" class="activity" />
|
||||
<text x="590" y="410" class="activity-text">构造 Prompt</text>
|
||||
|
||||
<rect x="500" y="430" width="180" height="30" class="activity" />
|
||||
<text x="590" y="450" class="activity-text">调用 LLM 诊断</text>
|
||||
|
||||
<rect x="500" y="470" width="180" height="30" class="activity" />
|
||||
<text x="590" y="490" class="activity-text">生成 FixCommand(JSON)</text>
|
||||
|
||||
<rect x="480" y="510" width="220" height="40" class="activity" />
|
||||
<text x="590" y="535" class="activity-text">安全校验(禁止高危命令)</text>
|
||||
|
||||
<!-- 否路径 -->
|
||||
<rect x="100" y="420" width="180" height="30" class="activity" />
|
||||
<text x="190" y="440" class="activity-text">等待新日志/用户请求</text>
|
||||
|
||||
<ellipse cx="190" cy="480" rx="30" ry="15" class="start-end" />
|
||||
<text x="190" y="485" class="small-text" fill="white">结束</text>
|
||||
|
||||
<!-- 决策2: 风险等级 == high? -->
|
||||
<polygon points="400,740 480,770 400,800 320,770" class="decision" />
|
||||
<text x="400" y="775" class="decision-text">风险等级 == high?</text>
|
||||
|
||||
<!-- 高风险路径 -->
|
||||
<rect x="500" y="720" width="200" height="40" class="activity" />
|
||||
<text x="600" y="745" class="activity-text">前端弹窗请求人工确认</text>
|
||||
|
||||
<!-- 决策3: 用户确认执行? -->
|
||||
<polygon points="600,810 680,840 600,870 520,840" class="decision" />
|
||||
<text x="600" y="845" class="decision-text">用户确认执行?</text>
|
||||
|
||||
<!-- 用户确认是 -->
|
||||
<rect x="520" y="890" width="160" height="30" class="activity" />
|
||||
<text x="600" y="910" class="activity-text">继续执行修复</text>
|
||||
|
||||
<!-- 用户确认否 -->
|
||||
<rect x="100" y="820" width="180" height="40" class="activity" />
|
||||
<text x="190" y="845" class="activity-text">记录并通知未执行</text>
|
||||
|
||||
<ellipse cx="190" cy="890" rx="30" ry="15" class="start-end" />
|
||||
<text x="190" y="895" class="small-text" fill="white">结束</text>
|
||||
|
||||
<!-- 预检查 -->
|
||||
<rect x="280" y="950" width="240" height="40" class="activity" />
|
||||
<text x="400" y="975" class="activity-text">修复前预检查(配置/路径/权限)</text>
|
||||
|
||||
<!-- 决策4: 预检查通过? -->
|
||||
<polygon points="400,1020 480,1050 400,1080 320,1050" class="decision" />
|
||||
<text x="400" y="1055" class="decision-text">预检查通过?</text>
|
||||
|
||||
<!-- 预检查通过 -->
|
||||
<rect x="500" y="1000" width="160" height="30" class="activity" />
|
||||
<text x="580" y="1020" class="activity-text">执行修复脚本</text>
|
||||
|
||||
<rect x="500" y="1040" width="160" height="30" class="activity" />
|
||||
<text x="580" y="1060" class="activity-text">采集stdout/stderr</text>
|
||||
|
||||
<rect x="500" y="1080" width="160" height="30" class="activity" />
|
||||
<text x="580" y="1100" class="activity-text">保存 ExecLog 到 MySQL</text>
|
||||
|
||||
<rect x="480" y="1120" width="200" height="40" class="activity" />
|
||||
<text x="580" y="1145" class="activity-text">更新状态到 Redis 并推送 WebSocket</text>
|
||||
|
||||
<!-- 预检查失败 -->
|
||||
<rect x="100" y="1030" width="160" height="40" class="activity" />
|
||||
<text x="180" y="1055" class="activity-text">记录失败原因</text>
|
||||
|
||||
<!-- 返回结果 -->
|
||||
<rect x="300" y="1200" width="200" height="40" class="activity" />
|
||||
<text x="400" y="1225" class="activity-text">返回结果给前端</text>
|
||||
|
||||
<!-- 结束节点 -->
|
||||
<ellipse cx="400" cy="1280" rx="30" ry="15" class="start-end" />
|
||||
<text x="400" y="1285" class="small-text" fill="white">结束</text>
|
||||
|
||||
<!-- 连接线 -->
|
||||
<g id="arrows">
|
||||
<!-- 主流程 -->
|
||||
<line x1="400" y1="85" x2="400" y2="110" class="arrow" />
|
||||
<line x1="400" y1="150" x2="400" y2="170" class="arrow" />
|
||||
<line x1="400" y1="210" x2="400" y2="230" class="arrow" />
|
||||
<line x1="400" y1="270" x2="400" y2="340" class="arrow" />
|
||||
|
||||
<!-- 决策1分支 -->
|
||||
<line x1="480" y1="370" x2="500" y2="365" class="yes-arrow" />
|
||||
<text x="490" y="365" class="small-text" fill="#4CAF50">是</text>
|
||||
<line x1="320" y1="370" x2="280" y2="435" class="no-arrow" />
|
||||
<text x="300" y="400" class="small-text" fill="#F44336">否</text>
|
||||
|
||||
<!-- 诊断流程 -->
|
||||
<line x1="590" y1="380" x2="590" y2="390" class="arrow" />
|
||||
<line x1="590" y1="420" x2="590" y2="430" class="arrow" />
|
||||
<line x1="590" y1="460" x2="590" y2="470" class="arrow" />
|
||||
<line x1="590" y1="500" x2="590" y2="510" class="arrow" />
|
||||
|
||||
<!-- 否路径到结束 -->
|
||||
<line x1="190" y1="450" x2="190" y2="465" class="arrow" />
|
||||
|
||||
<!-- 从诊断到风险判断 -->
|
||||
<line x1="590" y1="550" x2="590" y2="700" class="arrow" />
|
||||
<line x1="590" y1="700" x2="400" y2="740" class="arrow" />
|
||||
|
||||
<!-- 风险判断分支 -->
|
||||
<line x1="480" y1="770" x2="500" y2="740" class="yes-arrow" />
|
||||
<text x="490" y="755" class="small-text" fill="#4CAF50">是</text>
|
||||
<line x1="400" y1="800" x2="400" y2="950" class="no-arrow" />
|
||||
<text x="410" y="875" class="small-text" fill="#F44336">否</text>
|
||||
|
||||
<!-- 高风险确认 -->
|
||||
<line x1="600" y1="760" x2="600" y2="810" class="arrow" />
|
||||
|
||||
<!-- 用户确认分支 -->
|
||||
<line x1="600" y1="870" x2="600" y2="890" class="yes-arrow" />
|
||||
<text x="610" y="880" class="small-text" fill="#4CAF50">是</text>
|
||||
<line x1="520" y1="840" x2="280" y2="840" class="no-arrow" />
|
||||
<text x="400" y="835" class="small-text" fill="#F44336">否</text>
|
||||
|
||||
<!-- 用户拒绝到结束 -->
|
||||
<line x1="190" y1="860" x2="190" y2="875" class="arrow" />
|
||||
|
||||
<!-- 继续执行到预检查 -->
|
||||
<line x1="600" y1="920" x2="600" y2="970" class="arrow" />
|
||||
<line x1="600" y1="970" x2="520" y2="970" class="arrow" />
|
||||
<line x1="520" y1="970" x2="400" y2="970" class="arrow" />
|
||||
|
||||
<!-- 预检查 -->
|
||||
<line x1="400" y1="990" x2="400" y2="1020" class="arrow" />
|
||||
|
||||
<!-- 预检查分支 -->
|
||||
<line x1="480" y1="1050" x2="500" y2="1015" class="yes-arrow" />
|
||||
<text x="490" y="1035" class="small-text" fill="#4CAF50">是</text>
|
||||
<line x1="320" y1="1050" x2="260" y2="1050" class="no-arrow" />
|
||||
<text x="290" y="1045" class="small-text" fill="#F44336">否</text>
|
||||
|
||||
<!-- 执行流程 -->
|
||||
<line x1="580" y1="1030" x2="580" y2="1040" class="arrow" />
|
||||
<line x1="580" y1="1070" x2="580" y2="1080" class="arrow" />
|
||||
<line x1="580" y1="1110" x2="580" y2="1120" class="arrow" />
|
||||
|
||||
<!-- 汇聚到返回结果 -->
|
||||
<line x1="580" y1="1160" x2="580" y2="1180" class="arrow" />
|
||||
<line x1="580" y1="1180" x2="400" y2="1200" class="arrow" />
|
||||
<line x1="180" y1="1070" x2="180" y2="1180" class="arrow" />
|
||||
<line x1="180" y1="1180" x2="400" y2="1200" class="arrow" />
|
||||
|
||||
<!-- 最终结束 -->
|
||||
<line x1="400" y1="1240" x2="400" y2="1265" class="arrow" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,262 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1200" height="1600" xmlns="http://www.w3.org/2000/svg" style="background-color: white;">
|
||||
<defs>
|
||||
<style>
|
||||
.title { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 24px; font-weight: bold; fill: #333; }
|
||||
.section-title { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 18px; font-weight: bold; fill: #333; }
|
||||
.text { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 12px; fill: #333; }
|
||||
.small-text { font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 10px; fill: #666; }
|
||||
.primary { fill: #1976D2; }
|
||||
.success { fill: #4CAF50; }
|
||||
.warning { fill: #FF9800; }
|
||||
.danger { fill: #F44336; }
|
||||
.light { fill: #F5F5F5; }
|
||||
.white { fill: #FFFFFF; }
|
||||
.border { stroke: #E0E0E0; stroke-width: 1; fill: none; }
|
||||
.primary-border { stroke: #1976D2; stroke-width: 2; fill: none; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="600" y="30" text-anchor="middle" class="title">故障检测系统 - 移动端原型设计</text>
|
||||
|
||||
<!-- Mobile Main Interface -->
|
||||
<g transform="translate(50, 60)">
|
||||
<rect x="0" y="0" width="300" height="500" class="border" fill="#FFFFFF"/>
|
||||
<text x="150" y="20" text-anchor="middle" class="section-title">移动端主界面 (宽度: 375px)</text>
|
||||
|
||||
<!-- Top Navigation -->
|
||||
<rect x="10" y="30" width="280" height="40" class="primary" rx="4"/>
|
||||
<text x="20" y="50" class="text" fill="white">☰</text>
|
||||
<text x="150" y="50" text-anchor="middle" class="text" fill="white">故障检测</text>
|
||||
<text x="270" y="50" text-anchor="end" class="text" fill="white">🔔</text>
|
||||
|
||||
<!-- Sidebar (collapsed state) -->
|
||||
<rect x="10" y="80" width="200" height="300" class="light" rx="4"/>
|
||||
<text x="110" y="100" text-anchor="middle" class="text">可滑动侧边栏 (宽度: 280px)</text>
|
||||
<text x="20" y="120" class="small-text">👤 admin - 运维工程师</text>
|
||||
<text x="20" y="140" class="small-text">📊 仪表板</text>
|
||||
<text x="20" y="160" class="small-text">🖥️ 集群监控</text>
|
||||
<text x="20" y="180" class="small-text">📝 日志管理</text>
|
||||
<text x="20" y="200" class="small-text">⚠️ 故障处理</text>
|
||||
<text x="20" y="220" class="small-text">🔧 修复历史</text>
|
||||
<text x="20" y="240" class="small-text">⚙️ 设置</text>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<rect x="220" y="80" width="70" height="300" class="border" rx="4"/>
|
||||
<text x="255" y="100" text-anchor="middle" class="small-text">主内容区域</text>
|
||||
<text x="255" y="120" text-anchor="middle" class="small-text">页面内容</text>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<rect x="10" y="390" width="280" height="50" class="light" rx="4"/>
|
||||
<text x="45" y="410" text-anchor="middle" class="small-text">📊</text>
|
||||
<text x="45" y="425" text-anchor="middle" class="small-text">仪表板</text>
|
||||
<text x="115" y="410" text-anchor="middle" class="small-text">📝</text>
|
||||
<text x="115" y="425" text-anchor="middle" class="small-text">日志</text>
|
||||
<text x="185" y="410" text-anchor="middle" class="small-text">⚠️</text>
|
||||
<text x="185" y="425" text-anchor="middle" class="small-text">故障</text>
|
||||
<text x="255" y="410" text-anchor="middle" class="small-text">🔧</text>
|
||||
<text x="255" y="425" text-anchor="middle" class="small-text">修复</text>
|
||||
</g>
|
||||
|
||||
<!-- Mobile Dashboard -->
|
||||
<g transform="translate(400, 60)">
|
||||
<rect x="0" y="0" width="300" height="500" class="border" fill="#FFFFFF"/>
|
||||
<text x="150" y="20" text-anchor="middle" class="section-title">移动端仪表板</text>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<rect x="10" y="40" width="280" height="60" class="success" rx="4"/>
|
||||
<text x="20" y="55" class="text" fill="white">集群状态 🖥️</text>
|
||||
<text x="20" y="70" class="small-text" fill="white">12/15 节点正常</text>
|
||||
<text x="20" y="85" class="small-text" fill="white">点击查看详情 ></text>
|
||||
|
||||
<rect x="10" y="110" width="280" height="60" class="warning" rx="4"/>
|
||||
<text x="20" y="125" class="text" fill="white">活跃告警 ⚠️</text>
|
||||
<text x="20" y="140" class="small-text" fill="white">3 个需要关注</text>
|
||||
<text x="20" y="155" class="small-text" fill="white">点击查看详情 ></text>
|
||||
|
||||
<rect x="10" y="180" width="280" height="60" class="danger" rx="4"/>
|
||||
<text x="20" y="195" class="text" fill="white">今日故障 ❌</text>
|
||||
<text x="20" y="210" class="small-text" fill="white">1 个已修复</text>
|
||||
<text x="20" y="225" class="small-text" fill="white">点击查看详情 ></text>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<text x="20" y="270" class="text">快速操作</text>
|
||||
<rect x="10" y="280" width="85" height="40" class="primary" rx="4"/>
|
||||
<text x="52" y="295" text-anchor="middle" class="small-text" fill="white">🔍 快速</text>
|
||||
<text x="52" y="310" text-anchor="middle" class="small-text" fill="white">诊断</text>
|
||||
|
||||
<rect x="105" y="280" width="85" height="40" class="border" rx="4"/>
|
||||
<text x="147" y="295" text-anchor="middle" class="small-text">📊 查看</text>
|
||||
<text x="147" y="310" text-anchor="middle" class="small-text">日志</text>
|
||||
|
||||
<rect x="200" y="280" width="90" height="40" class="border" rx="4"/>
|
||||
<text x="245" y="295" text-anchor="middle" class="small-text">⚙️ 系统</text>
|
||||
<text x="245" y="310" text-anchor="middle" class="small-text">状态</text>
|
||||
|
||||
<!-- Charts Area -->
|
||||
<text x="20" y="350" class="text">图表区域 (可横向滑动)</text>
|
||||
<rect x="10" y="360" width="130" height="80" class="light" rx="4"/>
|
||||
<text x="75" y="375" text-anchor="middle" class="small-text">CPU使用率</text>
|
||||
<text x="75" y="390" text-anchor="middle" class="small-text">[小型图表]</text>
|
||||
<text x="75" y="405" text-anchor="middle" class="small-text">📈 24h</text>
|
||||
|
||||
<rect x="150" y="360" width="140" height="80" class="light" rx="4"/>
|
||||
<text x="220" y="375" text-anchor="middle" class="small-text">内存使用率</text>
|
||||
<text x="220" y="390" text-anchor="middle" class="small-text">[小型图表]</text>
|
||||
<text x="220" y="405" text-anchor="middle" class="small-text">📊 24h</text>
|
||||
</g>
|
||||
|
||||
<!-- Mobile Log Query -->
|
||||
<g transform="translate(750, 60)">
|
||||
<rect x="0" y="0" width="300" height="500" class="border" fill="#FFFFFF"/>
|
||||
<text x="150" y="20" text-anchor="middle" class="section-title">移动端日志查询</text>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<rect x="10" y="40" width="280" height="40" class="light" rx="4"/>
|
||||
<text x="20" y="55" class="text">🔍 搜索日志...</text>
|
||||
<text x="270" y="55" text-anchor="end" class="text">🔽 筛选</text>
|
||||
|
||||
<!-- Filter Panel -->
|
||||
<rect x="10" y="90" width="280" height="80" class="border" rx="4"/>
|
||||
<text x="20" y="105" class="small-text">筛选面板 (可展开/收起)</text>
|
||||
<text x="20" y="120" class="small-text">时间: 最近1小时 ▼</text>
|
||||
<text x="20" y="135" class="small-text">级别: ERROR ▼</text>
|
||||
<text x="20" y="150" class="small-text">主机: 全部 ▼</text>
|
||||
<rect x="200" y="140" width="80" height="25" class="primary" rx="4"/>
|
||||
<text x="240" y="155" text-anchor="middle" class="small-text" fill="white">应用筛选</text>
|
||||
|
||||
<!-- Log List -->
|
||||
<text x="20" y="190" class="text">日志列表 (卡片式)</text>
|
||||
<rect x="10" y="200" width="280" height="80" class="danger" rx="4"/>
|
||||
<text x="20" y="215" class="small-text" fill="white">🔴 ERROR | 10:35:22</text>
|
||||
<text x="20" y="230" class="small-text" fill="white">node-1 | HDFS</text>
|
||||
<text x="20" y="245" class="small-text" fill="white">Connection failed to...</text>
|
||||
<text x="20" y="260" class="small-text" fill="white">[诊断] [详情]</text>
|
||||
|
||||
<rect x="10" y="290" width="280" height="80" class="warning" rx="4"/>
|
||||
<text x="20" y="305" class="small-text" fill="white">🟡 WARN | 10:34:15</text>
|
||||
<text x="20" y="320" class="small-text" fill="white">node-2 | YARN</text>
|
||||
<text x="20" y="335" class="small-text" fill="white">Memory usage high...</text>
|
||||
<text x="20" y="350" class="small-text" fill="white">[诊断] [详情]</text>
|
||||
|
||||
<!-- Load More -->
|
||||
<rect x="10" y="380" width="280" height="40" class="border" rx="4"/>
|
||||
<text x="150" y="405" text-anchor="middle" class="text">⬇️ 加载更多日志</text>
|
||||
</g>
|
||||
|
||||
<!-- Mobile Diagnose -->
|
||||
<g transform="translate(50, 600)">
|
||||
<rect x="0" y="0" width="300" height="400" class="border" fill="#FFFFFF"/>
|
||||
<text x="150" y="20" text-anchor="middle" class="section-title">移动端故障诊断</text>
|
||||
|
||||
<!-- Diagnose Config -->
|
||||
<rect x="10" y="40" width="280" height="100" class="light" rx="4"/>
|
||||
<text x="20" y="55" class="text">诊断配置</text>
|
||||
<text x="20" y="75" class="small-text">已选择: 3 条日志</text>
|
||||
<text x="20" y="90" class="small-text">[查看选中日志]</text>
|
||||
<text x="20" y="110" class="small-text">AI模型: GPT-4 ▼</text>
|
||||
<text x="20" y="125" class="small-text">分析深度: ● 快速 ○ 深度 ○ 全面</text>
|
||||
|
||||
<!-- Diagnose Button -->
|
||||
<rect x="10" y="150" width="280" height="40" class="success" rx="4"/>
|
||||
<text x="150" y="175" text-anchor="middle" class="text" fill="white">🚀 开始诊断</text>
|
||||
|
||||
<!-- Progress -->
|
||||
<rect x="10" y="200" width="280" height="120" class="border" rx="4"/>
|
||||
<text x="150" y="220" text-anchor="middle" class="text">🔄 诊断进行中...</text>
|
||||
<text x="150" y="240" text-anchor="middle" class="small-text">进度: ████████░░ 80%</text>
|
||||
<text x="150" y="260" text-anchor="middle" class="small-text">当前状态: 正在分析日志模式</text>
|
||||
<text x="150" y="280" text-anchor="middle" class="small-text">预计剩余: 30秒</text>
|
||||
<text x="150" y="300" text-anchor="middle" class="small-text">[取消诊断]</text>
|
||||
</g>
|
||||
|
||||
<!-- Mobile Repair -->
|
||||
<g transform="translate(400, 600)">
|
||||
<rect x="0" y="0" width="300" height="400" class="border" fill="#FFFFFF"/>
|
||||
<text x="150" y="20" text-anchor="middle" class="section-title">移动端自动修复</text>
|
||||
|
||||
<!-- Repair Plan -->
|
||||
<rect x="10" y="40" width="280" height="120" class="light" rx="4"/>
|
||||
<text x="20" y="55" class="text">修复方案 (可滚动)</text>
|
||||
<text x="20" y="75" class="small-text">修复脚本预览:</text>
|
||||
<text x="20" y="90" class="small-text">sudo systemctl restart network</text>
|
||||
<text x="20" y="105" class="small-text">sudo hdfs dfsadmin -refresh</text>
|
||||
<text x="20" y="125" class="small-text">影响范围: node-1</text>
|
||||
<text x="20" y="140" class="small-text">预计时间: 2分钟</text>
|
||||
<text x="20" y="155" class="small-text">[查看完整脚本]</text>
|
||||
|
||||
<!-- Risk Confirmation -->
|
||||
<rect x="10" y="170" width="280" height="100" class="warning" rx="4"/>
|
||||
<text x="20" y="185" class="text" fill="white">⚠️ 风险等级: 中等</text>
|
||||
<text x="20" y="205" class="small-text" fill="white">风险说明: 重启网络服务可能</text>
|
||||
<text x="20" y="220" class="small-text" fill="white">短暂影响数据传输</text>
|
||||
<text x="20" y="240" class="small-text" fill="white">☑️ 我已了解风险</text>
|
||||
<text x="20" y="255" class="small-text" fill="white">☑️ 已通知相关人员</text>
|
||||
|
||||
<!-- Execute Buttons -->
|
||||
<rect x="10" y="280" width="130" height="40" class="success" rx="4"/>
|
||||
<text x="75" y="305" text-anchor="middle" class="text" fill="white">🚀 执行修复</text>
|
||||
|
||||
<rect x="150" y="280" width="140" height="40" class="border" rx="4"/>
|
||||
<text x="220" y="305" text-anchor="middle" class="text">❌ 取消</text>
|
||||
</g>
|
||||
|
||||
<!-- Mobile Modals -->
|
||||
<g transform="translate(750, 600)">
|
||||
<rect x="0" y="0" width="300" height="400" class="border" fill="#FFFFFF"/>
|
||||
<text x="150" y="20" text-anchor="middle" class="section-title">移动端弹窗设计</text>
|
||||
|
||||
<!-- Confirm Modal -->
|
||||
<rect x="10" y="40" width="280" height="140" class="danger" rx="4"/>
|
||||
<text x="150" y="60" text-anchor="middle" class="text" fill="white">⚠️ 高风险操作</text>
|
||||
<text x="150" y="80" text-anchor="middle" class="small-text" fill="white">此操作可能影响整个集群</text>
|
||||
<text x="150" y="95" text-anchor="middle" class="small-text" fill="white">建议在维护窗口期执行</text>
|
||||
<text x="150" y="115" text-anchor="middle" class="small-text" fill="white">请输入确认码:</text>
|
||||
<text x="150" y="130" text-anchor="middle" class="small-text" fill="white">[CONFIRM-2024]</text>
|
||||
<text x="150" y="150" text-anchor="middle" class="small-text" fill="white">[取消] [确认执行]</text>
|
||||
|
||||
<!-- Execution Modal -->
|
||||
<rect x="10" y="190" width="280" height="140" class="border" rx="4"/>
|
||||
<text x="150" y="210" text-anchor="middle" class="text">🔄 修复执行中</text>
|
||||
<text x="150" y="230" text-anchor="middle" class="small-text">开始时间: 10:45:30</text>
|
||||
<text x="150" y="245" text-anchor="middle" class="small-text">执行进度: ████░░░░░░ 40%</text>
|
||||
<text x="150" y="265" text-anchor="middle" class="small-text">实时日志:</text>
|
||||
<text x="150" y="280" text-anchor="middle" class="small-text">[10:45:31] 开始执行...</text>
|
||||
<text x="150" y="295" text-anchor="middle" class="small-text">[10:45:32] 重启网络服务...</text>
|
||||
<text x="150" y="310" text-anchor="middle" class="small-text">[停止执行] [最小化]</text>
|
||||
</g>
|
||||
|
||||
<!-- Responsive Design Notes -->
|
||||
<g transform="translate(50, 1050)">
|
||||
<rect x="0" y="0" width="1000" height="300" class="light" rx="4"/>
|
||||
<text x="500" y="25" text-anchor="middle" class="section-title">响应式设计要点</text>
|
||||
|
||||
<text x="50" y="50" class="text">移动端设计要点:</text>
|
||||
|
||||
<text x="50" y="80" class="text">1. 触摸友好:</text>
|
||||
<text x="70" y="100" class="small-text">• 按钮最小44px高度</text>
|
||||
<text x="70" y="115" class="small-text">• 间距充足，避免误触</text>
|
||||
<text x="70" y="130" class="small-text">• 支持手势操作</text>
|
||||
|
||||
<text x="300" y="80" class="text">2. 内容优化:</text>
|
||||
<text x="320" y="100" class="small-text">• 关键信息优先显示</text>
|
||||
<text x="320" y="115" class="small-text">• 长文本可展开/收起</text>
|
||||
<text x="320" y="130" class="small-text">• 图表简化但保持可读性</text>
|
||||
|
||||
<text x="550" y="80" class="text">3. 导航优化:</text>
|
||||
<text x="570" y="100" class="small-text">• 汉堡菜单 + 底部导航</text>
|
||||
<text x="570" y="115" class="small-text">• 面包屑导航简化</text>
|
||||
<text x="570" y="130" class="small-text">• 返回按钮明显</text>
|
||||
|
||||
<text x="50" y="170" class="text">4. 性能考虑:</text>
|
||||
<text x="70" y="190" class="small-text">• 懒加载长列表</text>
|
||||
<text x="70" y="205" class="small-text">• 图片压缩优化</text>
|
||||
<text x="70" y="220" class="small-text">• 离线缓存关键数据</text>
|
||||
|
||||
<text x="300" y="170" class="text">5. 交互优化:</text>
|
||||
<text x="320" y="190" class="small-text">• 下拉刷新</text>
|
||||
<text x="320" y="205" class="small-text">• 上拉加载更多</text>
|
||||
<text x="320" y="220" class="small-text">• 滑动操作支持</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 14 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue