2026-07-14 12:23:49 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>处理监控 - 参数数据自动化管理系统</title>
|
|
|
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
|
|
|
<link rel="stylesheet" href="/static/css/process.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="process-container">
|
|
|
|
|
<!-- 头部 -->
|
|
|
|
|
<header class="process-header">
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
<a href="/" class="back-link">
|
|
|
|
|
<i class="ri-arrow-left-line"></i> 返回主页
|
|
|
|
|
</a>
|
|
|
|
|
<h1><i class="ri-cpu-line"></i> 处理流程监控</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
<button onclick="refreshData()" class="btn btn-secondary">
|
|
|
|
|
<i class="ri-refresh-line"></i> 刷新
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!-- 活动处理区域 -->
|
|
|
|
|
<div class="panel active-processes">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<h2><i class="ri-play-circle-line"></i> 正在处理</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<div id="active-list" class="active-list">
|
|
|
|
|
<div class="empty-text">暂无正在进行的处理</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 步骤定义区域 -->
|
|
|
|
|
<div class="panel steps-definition">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<h2><i class="ri-list-ordered"></i> 处理步骤</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<div class="steps-flow" id="steps-flow">
|
|
|
|
|
<!-- 动态生成 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-07-15 11:18:47 +08:00
|
|
|
<!-- 智能体任务模板区域 -->
|
|
|
|
|
<div class="panel template-section">
|
|
|
|
|
<div class="panel-header">
|
2026-07-15 16:31:00 +08:00
|
|
|
<h2><i class="ri-robot-line"></i> 步骤4：提取产品数据 - 智能体任务模板</h2>
|
2026-07-15 11:18:47 +08:00
|
|
|
<div class="template-actions">
|
|
|
|
|
<button onclick="previewTemplate()" class="btn btn-secondary btn-sm">
|
|
|
|
|
<i class="ri-eye-line"></i> 预览
|
|
|
|
|
</button>
|
|
|
|
|
<button onclick="saveTemplate()" class="btn btn-primary btn-sm">
|
|
|
|
|
<i class="ri-save-line"></i> 保存模板
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<div class="template-info">
|
|
|
|
|
<p><strong>说明：</strong>此模板用于步骤4「提取产品数据」中调用智能体 <code>hz4th_editor</code> 的任务文本。</p>
|
|
|
|
|
<p><strong>可用变量：</strong>
|
|
|
|
|
<code>{{product_name}}</code> 产品名称、
|
|
|
|
|
<code>{{category}}</code> 类别、
|
|
|
|
|
<code>{{subcategory}}</code> 子类别、
|
|
|
|
|
<code>{{library_results}}</code> 内容库搜索结果、
|
|
|
|
|
<code>{{internet_results}}</code> 互联网抓取内容
|
|
|
|
|
</p>
|
|
|
|
|
<p><strong>调用命令：</strong><code>openclaw agent --agent hz4th_editor --message "[填充后的任务文本]"</code></p>
|
|
|
|
|
</div>
|
2026-07-15 16:31:00 +08:00
|
|
|
<textarea id="agent-template-editor" class="template-editor" rows="15" placeholder="加载模板中..."></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 步骤5填充字段模板区域 -->
|
|
|
|
|
<div class="panel template-section">
|
|
|
|
|
<div class="panel-header">
|
2026-07-15 16:52:28 +08:00
|
|
|
<h2><i class="ri-edit-box-line"></i> 步骤5：填充字段 - 智能体任务模板</h2>
|
2026-07-15 16:31:00 +08:00
|
|
|
<div class="template-actions">
|
|
|
|
|
<button onclick="previewFillFieldsTemplate()" class="btn btn-secondary btn-sm">
|
|
|
|
|
<i class="ri-eye-line"></i> 预览
|
|
|
|
|
</button>
|
|
|
|
|
<button onclick="saveFillFieldsTemplate()" class="btn btn-primary btn-sm">
|
|
|
|
|
<i class="ri-save-line"></i> 保存模板
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<div class="template-info">
|
2026-07-15 16:52:28 +08:00
|
|
|
<p><strong>说明：</strong>此模板用于步骤5「填充字段」中调用智能体 <code>hz4th_editor</code> 的任务文本。</p>
|
2026-07-15 16:31:00 +08:00
|
|
|
<p><strong>可用变量：</strong>
|
|
|
|
|
<code>{{product_name}}</code> 产品名称、
|
|
|
|
|
<code>{{category}}</code> 类别、
|
|
|
|
|
<code>{{subcategory}}</code> 子类别、
|
|
|
|
|
<code>{{relevant_content_ids}}</code> 上一步筛选的相关内容数据ID
|
|
|
|
|
</p>
|
2026-07-15 16:52:28 +08:00
|
|
|
<p><strong>任务目标：</strong>智能体根据API文档获取字段定义，整理产品参数，并进行格式检查。</p>
|
2026-07-15 16:31:00 +08:00
|
|
|
</div>
|
|
|
|
|
<textarea id="fill-fields-template-editor" class="template-editor" rows="15" placeholder="加载模板中..."></textarea>
|
2026-07-15 11:18:47 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-07-15 16:52:28 +08:00
|
|
|
<!-- 步骤6提交审核模板区域 -->
|
|
|
|
|
<div class="panel template-section">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<h2><i class="ri-upload-cloud-line"></i> 步骤6：提交审核 - 智能体任务模板</h2>
|
|
|
|
|
<div class="template-actions">
|
|
|
|
|
<button onclick="previewSubmitTemplate()" class="btn btn-secondary btn-sm">
|
|
|
|
|
<i class="ri-eye-line"></i> 预览
|
|
|
|
|
</button>
|
|
|
|
|
<button onclick="saveSubmitTemplate()" class="btn btn-primary btn-sm">
|
|
|
|
|
<i class="ri-save-line"></i> 保存模板
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<div class="template-info">
|
|
|
|
|
<p><strong>说明：</strong>此模板用于步骤6「提交审核」中调用智能体 <code>hz4th_editor</code> 的任务文本。</p>
|
|
|
|
|
<p><strong>可用变量：</strong>
|
|
|
|
|
<code>{{product_name}}</code> 产品名称、
|
|
|
|
|
<code>{{category}}</code> 类别、
|
|
|
|
|
<code>{{subcategory}}</code> 子类别、
|
|
|
|
|
<code>{{product_data}}</code> 上一步生成的产品数据（JSON格式）
|
|
|
|
|
</p>
|
|
|
|
|
<p><strong>任务目标：</strong>智能体将产品数据提交到ParamHub审核系统，获取review_id。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<textarea id="submit-template-editor" class="template-editor" rows="15" placeholder="加载模板中..."></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-07-15 11:18:47 +08:00
|
|
|
<!-- 预览模态框 -->
|
|
|
|
|
<div id="template-preview-modal" class="modal">
|
|
|
|
|
<div class="modal-content large">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3><i class="ri-eye-line"></i> 任务文本预览</h3>
|
|
|
|
|
<button onclick="closeModal('template-preview-modal')" class="close-btn">
|
|
|
|
|
<i class="ri-close-line"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div class="preview-meta" style="margin-bottom: 15px;">
|
|
|
|
|
<label>产品名称: <input type="text" id="preview-product" value="示例产品" style="padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px;"></label>
|
|
|
|
|
<label style="margin-left: 10px;">类别: <input type="text" id="preview-category" value="AI模型" style="padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px;"></label>
|
|
|
|
|
<button onclick="doPreview()" class="btn btn-sm btn-secondary" style="margin-left: 10px;"><i class="ri-refresh-line"></i> 刷新预览</button>
|
|
|
|
|
</div>
|
|
|
|
|
<pre id="template-preview-content" style="background: #f8f9fa; padding: 15px; border-radius: 8px; white-space: pre-wrap; font-size: 13px; max-height: 500px; overflow-y: auto;">加载中...</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button onclick="closeModal('template-preview-modal')" class="btn btn-secondary">关闭</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-07-14 12:23:49 +08:00
|
|
|
<!-- 处理历史区域 -->
|
|
|
|
|
<div class="panel history-section">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<h2><i class="ri-history-line"></i> 处理历史</h2>
|
|
|
|
|
<button onclick="loadHistory()" class="btn btn-secondary btn-sm">
|
|
|
|
|
<i class="ri-refresh-line"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<table class="data-table">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>产品名称</th>
|
|
|
|
|
<th>状态</th>
|
|
|
|
|
<th>当前步骤</th>
|
|
|
|
|
<th>开始时间</th>
|
|
|
|
|
<th>完成时间</th>
|
|
|
|
|
<th>操作</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="history-table">
|
|
|
|
|
<tr><td colspan="6" class="empty-text">暂无处理历史</td></tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 处理详情模态框 -->
|
|
|
|
|
<div id="process-detail-modal" class="modal">
|
|
|
|
|
<div class="modal-content large">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3 id="detail-title"><i class="ri-file-list-3-line"></i> 处理详情</h3>
|
|
|
|
|
<button onclick="closeModal('process-detail-modal')" class="close-btn">
|
|
|
|
|
<i class="ri-close-line"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body" id="detail-body">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button onclick="closeModal('process-detail-modal')" class="btn btn-secondary">关闭</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 提示消息 -->
|
|
|
|
|
<div id="toast" class="toast"></div>
|
|
|
|
|
|
|
|
|
|
<script src="/static/js/process.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
