更新前端页交互模式
This commit is contained in:
@@ -5,18 +5,20 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IOV Data Analysis Agent</title>
|
||||
<link rel="stylesheet" href="/static/style.css?v=2.0">
|
||||
<link rel="stylesheet" href="/static/clean_style.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet">
|
||||
<!-- Markdown Parser -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<!-- Font Awesome -->
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Markdown -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -24,162 +26,140 @@
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<i class="fa-solid fa-robot"></i>
|
||||
<h1>IOV Agent</h1>
|
||||
<i class="fa-solid fa-cube"></i>
|
||||
<span>IOV Agent</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="main-nav">
|
||||
<button class="nav-btn active" onclick="switchView('analysis')">
|
||||
<nav class="nav-menu">
|
||||
<button class="nav-item active" onclick="switchView('analysis')">
|
||||
<i class="fa-solid fa-chart-line"></i> Analysis
|
||||
</button>
|
||||
<button class="nav-btn" onclick="switchView('tools')">
|
||||
<i class="fa-solid fa-toolbox"></i> Data Tools
|
||||
</button>
|
||||
<button class="nav-btn" onclick="switchView('gallery')">
|
||||
<i class="fa-solid fa-images"></i> Gallery
|
||||
</button>
|
||||
<button class="nav-btn" onclick="switchView('help')">
|
||||
<i class="fa-solid fa-circle-question"></i> Help
|
||||
</button>
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
<div class="nav-section-title">History</div>
|
||||
<div id="historyList" class="history-list">
|
||||
<!-- History items loaded via JS -->
|
||||
<div style="padding:0.5rem; font-size:0.8rem; color:#9CA3AF;">Loading...</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Analysis Controls (Visible only in Analysis View) -->
|
||||
<div id="analysisControls" class="control-group-wrapper">
|
||||
<div class="control-group">
|
||||
<h3>1. Data Upload</h3>
|
||||
<div class="upload-zone" id="uploadZone">
|
||||
<i class="fa-solid fa-cloud-arrow-up"></i>
|
||||
<p>Drag & Drop CSV/Excel</p>
|
||||
<input type="file" id="fileInput" accept=".csv,.xlsx,.xls" multiple hidden>
|
||||
<button class="btn secondary" onclick="document.getElementById('fileInput').click()">Select
|
||||
Files</button>
|
||||
<div id="fileList" class="file-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>2. Analysis Config</h3>
|
||||
<textarea id="requirementInput"
|
||||
placeholder="Enter your analysis requirement here...">基于所有运维工单，整理一份工单健康度报告...</textarea>
|
||||
<button id="startBtn" class="btn primary">
|
||||
<i class="fa-solid fa-play"></i> Start Analysis
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-indicator">
|
||||
<span id="statusDot" class="dot"></span>
|
||||
<span id="statusText">Idle</span>
|
||||
<div class="status-bar">
|
||||
<div id="statusDot" class="status-dot"></div>
|
||||
<span id="statusText">Ready</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<header class="header">
|
||||
<h2 id="pageTitle">Analysis Dashboard</h2>
|
||||
</header>
|
||||
|
||||
<!-- VIEW: ANALYSIS -->
|
||||
<div id="viewAnalysis" class="view-section active">
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('logs')">
|
||||
<i class="fa-solid fa-terminal"></i> Live Logs
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('report')">
|
||||
<i class="fa-solid fa-file-invoice-dollar"></i> Report
|
||||
</button>
|
||||
<div style="margin-left: auto; display: flex; align-items: center;">
|
||||
<button id="exportBtn" class="btn secondary"
|
||||
style="padding: 0.4rem 1rem; font-size: 0.8rem; width: auto;" onclick="triggerExport()">
|
||||
<i class="fa-solid fa-download"></i> Export Report (ZIP)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-area">
|
||||
<!-- VIEW: ANALYSIS -->
|
||||
<div id="viewAnalysis" class="section active">
|
||||
<div class="analysis-grid">
|
||||
|
||||
<!-- Log View -->
|
||||
<div id="logsTab" class="tab-content active">
|
||||
<div class="terminal-window">
|
||||
<pre id="logOutput">Waiting to start...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Configuration Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">
|
||||
<span>Configuration</span>
|
||||
</div>
|
||||
|
||||
<!-- Report View -->
|
||||
<div id="reportTab" class="tab-content">
|
||||
<div id="reportContainer" class="markdown-body">
|
||||
<div class="empty-state">
|
||||
<i class="fa-solid fa-chart-simple"></i>
|
||||
<p>No report generated yet.</p>
|
||||
<div class="form-group">
|
||||
<label class="form-label">1. Data Upload</label>
|
||||
<div id="uploadZone" class="upload-area">
|
||||
<i class="fa-solid fa-cloud-arrow-up upload-icon"></i>
|
||||
<p>Click or Drag CSV/Excel Files</p>
|
||||
<div id="fileList" class="file-list"></div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" multiple accept=".csv,.xlsx,.xls" hidden>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">2. Requirement</label>
|
||||
<textarea id="requirementInput" class="form-textarea"
|
||||
placeholder="Describe what you want to analyze..."></textarea>
|
||||
</div>
|
||||
|
||||
<button id="startBtn" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">
|
||||
<i class="fa-solid fa-play"></i> Start Analysis
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Output Panel -->
|
||||
<div class="panel" style="overflow:hidden; display:flex; flex-direction:column;">
|
||||
<div class="panel-title" style="margin-bottom:0.5rem;">
|
||||
<span>Output</span>
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="switchTab('logs')">Live Log</div>
|
||||
<div class="tab" onclick="switchTab('report')">Report</div>
|
||||
<div class="tab" onclick="switchTab('gallery')">Gallery</div>
|
||||
</div>
|
||||
<button id="downloadScriptBtn" class="btn btn-sm btn-secondary hidden"
|
||||
onclick="downloadScript()" style="margin-left:auto;">
|
||||
<i class="fa-solid fa-code"></i> Script
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="output-container" id="outputContainer">
|
||||
<!-- Logs Tab -->
|
||||
<div id="logsTab" class="tab-content active" style="height:100%; overflow-y:auto;">
|
||||
<pre id="logOutput" class="log-content">Waiting to start...</pre>
|
||||
</div>
|
||||
|
||||
<!-- Report Tab -->
|
||||
<div id="reportTab" class="tab-content hidden" style="height:100%; overflow-y:auto;">
|
||||
<div id="reportContainer" class="report-content markdown-body">
|
||||
<div class="empty-state">
|
||||
<p>Report will appear here after analysis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="followUpSection" class="hidden"
|
||||
style="margin-top:2rem; border-top:1px solid var(--border-color); padding-top:1rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Follow-up Analysis</label>
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<input type="text" id="followUpInput" class="form-input"
|
||||
placeholder="Ask a follow-up question...">
|
||||
<button class="btn btn-primary btn-sm"
|
||||
onclick="sendFollowUp()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:1rem; text-align:right">
|
||||
<button id="exportBtn" class="btn btn-secondary btn-sm"
|
||||
onclick="triggerExport()">
|
||||
<i class="fa-solid fa-download"></i> Export ZIP
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gallery Tab -->
|
||||
<div id="galleryTab" class="tab-content hidden"
|
||||
style="height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;">
|
||||
<div class="carousel-container">
|
||||
<button class="carousel-btn prev" onclick="prevImage()"><i
|
||||
class="fa-solid fa-chevron-left"></i></button>
|
||||
<div class="carousel-slide" id="carouselSlide">
|
||||
<p class="placeholder-text" style="color:var(--text-secondary);">No images
|
||||
generated.</p>
|
||||
</div>
|
||||
<button class="carousel-btn next" onclick="nextImage()"><i
|
||||
class="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
<div class="image-info" id="imageInfo" style="margin-top:1rem; text-align:center;">
|
||||
<!-- Title/Desc -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Follow-up Chat Section -->
|
||||
<div id="followUpSection" class="chat-input-container" style="display: none;">
|
||||
<div class="input-wrapper">
|
||||
<textarea id="followUpInput"
|
||||
placeholder="Follow-up question... (e.g. 'Analyze the error codes')"></textarea>
|
||||
<button id="sendFollowUpBtn" class="btn primary" onclick="sendFollowUp()">
|
||||
<i class="fa-solid fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VIEW: TOOLS -->
|
||||
<div id="viewTools" class="view-section" style="display: none;">
|
||||
<div class="tools-grid">
|
||||
<!-- Tool Card 1: Merge Excel -->
|
||||
<div class="tool-card">
|
||||
<div class="tool-icon"><i class="fa-solid fa-file-csv"></i></div>
|
||||
<h3>Excel to CSV Merger</h3>
|
||||
<p>Merge multiple .xlsx files from the uploads directory into a single CSV for analysis.</p>
|
||||
<div class="tool-actions">
|
||||
<input type="text" id="mergeSource" value="uploads" placeholder="Source Directory" class="input-sm">
|
||||
<button class="btn secondary" onclick="triggerMerge()">
|
||||
<i class="fa-solid fa-bolt"></i> Merge Now
|
||||
</button>
|
||||
</div>
|
||||
<div id="mergeResult" class="tool-result"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tool Card 2: Sort CSV -->
|
||||
<div class="tool-card">
|
||||
<div class="tool-icon"><i class="fa-solid fa-arrow-down-a-z"></i></div>
|
||||
<h3>Time Sorter</h3>
|
||||
<p>Sort a CSV file by 'SendTime' or time column to fix ordering issues.</p>
|
||||
<div class="tool-actions">
|
||||
<input type="text" id="sortTarget" value="cleaned_data.csv" placeholder="Target Filename"
|
||||
class="input-sm">
|
||||
<button class="btn secondary" onclick="triggerSort()">
|
||||
<i class="fa-solid fa-sort"></i> Sort Now
|
||||
</button>
|
||||
</div>
|
||||
<div id="sortResult" class="tool-result"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VIEW: GALLERY -->
|
||||
<div id="viewGallery" class="view-section" style="display: none;">
|
||||
<div id="galleryContainer" class="gallery-grid">
|
||||
<div class="empty-state">
|
||||
<i class="fa-solid fa-images"></i>
|
||||
<p>No images generated yet.<br>Start an analysis to see results here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VIEW: HELP -->
|
||||
<div id="viewHelp" class="view-section" style="display: none;">
|
||||
<div class="help-header">
|
||||
<h2>Troubleshooting Guide</h2>
|
||||
<button class="btn secondary" onclick="fetchHelp()">Refresh</button>
|
||||
</div>
|
||||
<div id="helpContainer" class="markdown-body help-body">
|
||||
<p>Loading guide...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/static/script.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user