2ccc7c4e8c
Some checks failed
backend-contract-verification / Verify TypeScript build & OpenAPI contracts (push) Has been cancelled
1616 lines
61 KiB
HTML
1616 lines
61 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>AI智能制标系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
background: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 步骤指示器 */
|
||
.steps-header {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.steps-indicator {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.step-circle {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: #e8eaed;
|
||
color: #9aa0a6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.step-item.active .step-circle {
|
||
background: #4285f4;
|
||
color: white;
|
||
}
|
||
|
||
.step-item.completed .step-circle {
|
||
background: #4285f4;
|
||
color: white;
|
||
}
|
||
|
||
.step-item.completed .step-circle::after {
|
||
content: '✓';
|
||
position: absolute;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.step-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #202124;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.step-desc {
|
||
font-size: 12px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
.step-line {
|
||
position: absolute;
|
||
top: 24px;
|
||
left: 50%;
|
||
width: calc(100% - 48px);
|
||
height: 2px;
|
||
background: #e8eaed;
|
||
z-index: 1;
|
||
}
|
||
|
||
.step-item:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 24px;
|
||
left: calc(50% + 24px);
|
||
width: calc(100vw / 3 - 48px);
|
||
max-width: 200px;
|
||
height: 2px;
|
||
background: #e8eaed;
|
||
z-index: 0;
|
||
}
|
||
|
||
.step-item.completed:not(:last-child)::after {
|
||
background: #4285f4;
|
||
}
|
||
|
||
/* 主内容区域 */
|
||
.main-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.step-content {
|
||
display: none;
|
||
padding: 40px;
|
||
min-height: 500px;
|
||
}
|
||
|
||
.step-content.active {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* 第一步 - 基础设置 */
|
||
.settings-tabs {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
border-bottom: 1px solid #e8eaed;
|
||
}
|
||
|
||
.settings-tab {
|
||
padding: 12px 0;
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.settings-tab.active {
|
||
color: #1a73e8;
|
||
}
|
||
|
||
.settings-tab.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: #1a73e8;
|
||
}
|
||
|
||
.tab-pane {
|
||
display: none;
|
||
}
|
||
|
||
.tab-pane.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 封面模板 */
|
||
.cover-templates {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.cover-template {
|
||
border: 2px solid #e8eaed;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-align: center;
|
||
}
|
||
|
||
.cover-template:hover {
|
||
border-color: #4285f4;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(66,133,244,0.2);
|
||
}
|
||
|
||
.cover-template.selected {
|
||
border-color: #4285f4;
|
||
background: #e8f0fe;
|
||
}
|
||
|
||
.cover-preview {
|
||
width: 100%;
|
||
height: 200px;
|
||
background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cover-name {
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
color: #202124;
|
||
}
|
||
|
||
/* 模版样式 */
|
||
.template-preview {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.template-card {
|
||
border: 1px solid #e8eaed;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.template-card:hover {
|
||
border-color: #4285f4;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.template-img {
|
||
width: 100%;
|
||
height: 250px;
|
||
background: #f8f9fa;
|
||
border: 1px solid #e8eaed;
|
||
border-radius: 4px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
/* 配置选项 */
|
||
.config-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.config-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.config-checkbox {
|
||
width: 18px;
|
||
height: 18px;
|
||
accent-color: #4285f4;
|
||
}
|
||
|
||
.config-label {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #202124;
|
||
}
|
||
|
||
/* 第二步 - 上传文件 */
|
||
.upload-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.upload-area {
|
||
border: 2px dashed #dadce0;
|
||
border-radius: 8px;
|
||
padding: 60px 20px;
|
||
text-align: center;
|
||
background: #f8f9fa;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
}
|
||
|
||
.upload-area:hover {
|
||
border-color: #4285f4;
|
||
background: #e8f0fe;
|
||
}
|
||
|
||
.upload-area.active {
|
||
border-color: #34a853;
|
||
background: #e6f4ea;
|
||
}
|
||
|
||
.upload-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto 20px;
|
||
background: #ea4335;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
color: white;
|
||
}
|
||
|
||
.upload-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #202124;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.upload-desc {
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
/* 文件解析信息 */
|
||
.parse-info {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.parse-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #202124;
|
||
}
|
||
|
||
.parse-content {
|
||
display: grid;
|
||
gap: 15px;
|
||
}
|
||
|
||
.parse-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
}
|
||
|
||
.parse-label {
|
||
min-width: 100px;
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
.parse-value {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #202124;
|
||
}
|
||
|
||
.parse-value input,
|
||
.parse-value select {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #dadce0;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.date-range {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.date-range input {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 引用资料区 */
|
||
.reference-section {
|
||
margin-top: 30px;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.reference-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #202124;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reference-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.reference-upload {
|
||
border: 2px dashed #dadce0;
|
||
border-radius: 8px;
|
||
padding: 30px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
background: white;
|
||
}
|
||
|
||
.reference-upload:hover {
|
||
border-color: #4285f4;
|
||
background: #e8f0fe;
|
||
}
|
||
|
||
.reference-upload.uploaded {
|
||
border-color: #34a853;
|
||
background: #e6f4ea;
|
||
}
|
||
|
||
.reference-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.reference-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #202124;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.reference-desc {
|
||
font-size: 12px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
.reference-status {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: #34a853;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 工程清单区域 */
|
||
.engineering-section {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background: #f0f7ff;
|
||
border: 1px solid #c2e0ff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.engineering-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1a73e8;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 第三步 - 目录确认 */
|
||
.outline-container {
|
||
display: grid;
|
||
grid-template-columns: 400px 1fr;
|
||
gap: 30px;
|
||
}
|
||
|
||
.outline-tree {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.outline-preview {
|
||
background: white;
|
||
border: 1px solid #e8eaed;
|
||
border-radius: 8px;
|
||
padding: 30px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.tree-item {
|
||
padding: 8px 0;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tree-item:hover {
|
||
color: #1a73e8;
|
||
}
|
||
|
||
.tree-item.level-1 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #202124;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.tree-item.level-2 {
|
||
padding-left: 20px;
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
.tree-item.level-3 {
|
||
padding-left: 40px;
|
||
font-size: 13px;
|
||
color: #80868b;
|
||
}
|
||
|
||
.outline-content {
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.outline-content h2 {
|
||
font-size: 20px;
|
||
color: #202124;
|
||
margin: 20px 0 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #e8eaed;
|
||
}
|
||
|
||
.outline-content h3 {
|
||
font-size: 16px;
|
||
color: #202124;
|
||
margin: 15px 0 8px;
|
||
}
|
||
|
||
.outline-content p {
|
||
color: #5f6368;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
/* 页数选择器 */
|
||
.page-selector {
|
||
margin-top: 30px;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.page-slider {
|
||
width: 100%;
|
||
height: 6px;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background: #e8eaed;
|
||
border-radius: 3px;
|
||
outline: none;
|
||
}
|
||
|
||
.page-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #4285f4;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.page-marks {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: #80868b;
|
||
}
|
||
|
||
.page-value {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #4285f4;
|
||
}
|
||
|
||
/* 第四步 - 编写全文 */
|
||
.editor-container {
|
||
display: grid;
|
||
grid-template-columns: 250px 1fr;
|
||
gap: 20px;
|
||
height: 600px;
|
||
}
|
||
|
||
.editor-sidebar {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.editor-main {
|
||
background: white;
|
||
border: 1px solid #e8eaed;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.editor-toolbar {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #e8eaed;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.toolbar-btn {
|
||
padding: 6px 12px;
|
||
background: white;
|
||
border: 1px solid #dadce0;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.toolbar-btn:hover {
|
||
background: #f8f9fa;
|
||
border-color: #4285f4;
|
||
}
|
||
|
||
.editor-content {
|
||
flex: 1;
|
||
padding: 30px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #202124;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.doc-tree {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.doc-section {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.doc-section-title {
|
||
padding: 8px 10px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.doc-section-title:hover {
|
||
background: #e8eaed;
|
||
}
|
||
|
||
.doc-section-title.expanded::before {
|
||
content: '▼ ';
|
||
font-size: 10px;
|
||
}
|
||
|
||
.doc-section-title:not(.expanded)::before {
|
||
content: '▶ ';
|
||
font-size: 10px;
|
||
}
|
||
|
||
.doc-subsections {
|
||
display: none;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.doc-subsections.show {
|
||
display: block;
|
||
}
|
||
|
||
.doc-subsection {
|
||
padding: 6px 10px;
|
||
color: #5f6368;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.doc-subsection:hover {
|
||
background: #e8eaed;
|
||
color: #202124;
|
||
}
|
||
|
||
/* 生成状态 */
|
||
.generation-status {
|
||
text-align: center;
|
||
padding: 40px;
|
||
}
|
||
|
||
.generation-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.generation-text {
|
||
font-size: 16px;
|
||
color: #202124;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.generation-desc {
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
.footer-actions {
|
||
padding: 20px 40px;
|
||
background: white;
|
||
border-top: 1px solid #e8eaed;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.footer-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.footer-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 24px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border: none;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: white;
|
||
border: 1px solid #dadce0;
|
||
color: #5f6368;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #f8f9fa;
|
||
border-color: #4285f4;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #202124;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #303134;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(32,33,36,0.3);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #dadce0;
|
||
color: #80868b;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 结果展示 */
|
||
.result-panel {
|
||
padding: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.result-icon {
|
||
font-size: 64px;
|
||
color: #34a853;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.result-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #202124;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.result-desc {
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.result-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.result-btn {
|
||
padding: 12px 30px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border: none;
|
||
}
|
||
|
||
.result-btn.primary {
|
||
background: #1a73e8;
|
||
color: white;
|
||
}
|
||
|
||
.result-btn.secondary {
|
||
background: white;
|
||
border: 1px solid #dadce0;
|
||
color: #5f6368;
|
||
}
|
||
|
||
/* Loading动画 */
|
||
.loading-spinner {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 3px solid rgba(66,133,244,0.3);
|
||
border-top-color: #4285f4;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 步骤指示器 -->
|
||
<div class="steps-header">
|
||
<div class="steps-indicator">
|
||
<div class="step-item active" id="step-1-indicator">
|
||
<div class="step-circle">1</div>
|
||
<div class="step-title">基础设置</div>
|
||
<div class="step-desc">设置标书基本格式</div>
|
||
</div>
|
||
<div class="step-item" id="step-2-indicator">
|
||
<div class="step-circle">2</div>
|
||
<div class="step-title">解析文件</div>
|
||
<div class="step-desc">解析招标文件信息</div>
|
||
</div>
|
||
<div class="step-item" id="step-3-indicator">
|
||
<div class="step-circle">3</div>
|
||
<div class="step-title">确认目录</div>
|
||
<div class="step-desc">生成目录大纲，可自由编辑</div>
|
||
</div>
|
||
<div class="step-item" id="step-4-indicator">
|
||
<div class="step-circle">4</div>
|
||
<div class="step-title">编写全文</div>
|
||
<div class="step-desc">生成全文，可自由编辑</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-content">
|
||
<!-- 第一步：基础设置 -->
|
||
<div class="step-content active" id="step-1">
|
||
<h2 style="margin-bottom: 30px;">标书设置</h2>
|
||
|
||
<div class="settings-tabs">
|
||
<button class="settings-tab active" onclick="switchSettingTab('cover')">A4版面</button>
|
||
<button class="settings-tab" onclick="switchSettingTab('template')">A3版面（横向）</button>
|
||
</div>
|
||
|
||
<div class="tab-pane active" id="cover-pane">
|
||
<h3 style="margin-bottom: 20px; font-size: 16px;">封面</h3>
|
||
<div class="cover-templates">
|
||
<div class="cover-template selected">
|
||
<div class="cover-preview">
|
||
<span>投标文件</span>
|
||
</div>
|
||
<div class="cover-name">默认封面模板</div>
|
||
</div>
|
||
<div class="cover-template">
|
||
<div class="cover-preview" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||
<span>投标文件</span>
|
||
</div>
|
||
<div class="cover-name">封面模板1</div>
|
||
</div>
|
||
<div class="cover-template">
|
||
<div class="cover-preview" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||
<span>投标文件</span>
|
||
</div>
|
||
<div class="cover-name">封面模板2</div>
|
||
</div>
|
||
<div class="cover-template">
|
||
<div class="cover-preview" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||
<span>投标文件</span>
|
||
</div>
|
||
<div class="cover-name">封面模板3</div>
|
||
</div>
|
||
<div class="cover-template">
|
||
<div class="cover-preview" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
||
<span>投标文件</span>
|
||
</div>
|
||
<div class="cover-name">封面模板4</div>
|
||
</div>
|
||
<div class="cover-template">
|
||
<div class="cover-preview" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
||
<span>投标文件</span>
|
||
</div>
|
||
<div class="cover-name">封面模板5</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin: 40px 0 20px; font-size: 16px;">模版</h3>
|
||
<div class="template-preview">
|
||
<div class="template-card">
|
||
<div class="template-img">默认</div>
|
||
</div>
|
||
<div class="template-card">
|
||
<div class="template-img">表格型(上下结构)</div>
|
||
</div>
|
||
<div class="template-card">
|
||
<div class="template-img">表格型(左右结构)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin: 40px 0 20px; font-size: 16px;">自动配图</h3>
|
||
<div class="config-options">
|
||
<div class="config-item">
|
||
<span style="color: #5f6368;">🖼️ AI智能配图引擎，基于生成的文本内容自动匹配相应配图片</span>
|
||
</div>
|
||
<div class="config-item">
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">无</span>
|
||
<input type="radio" name="image-config" value="none" checked>
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">较少</span>
|
||
<input type="radio" name="image-config" value="few">
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #4285f4;">中等</span>
|
||
<input type="radio" name="image-config" value="medium">
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">较多</span>
|
||
<input type="radio" name="image-config" value="many">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin: 40px 0 20px; font-size: 16px;">表格</h3>
|
||
<div class="config-options">
|
||
<div class="config-item">
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">无</span>
|
||
<input type="radio" name="table-config" value="none">
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">较少</span>
|
||
<input type="radio" name="table-config" value="few">
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #4285f4;">中等</span>
|
||
<input type="radio" name="table-config" value="medium" checked>
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">较多</span>
|
||
<input type="radio" name="table-config" value="many">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin: 40px 0 20px; font-size: 16px;">流程图</h3>
|
||
<div class="config-options">
|
||
<div class="config-item">
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #5f6368;">无</span>
|
||
<input type="radio" name="flow-config" value="none">
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
||
<span style="color: #4285f4;">有</span>
|
||
<input type="radio" name="flow-config" value="yes" checked>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin: 40px 0 20px; font-size: 16px;">统一称谓</h3>
|
||
<div class="config-options">
|
||
<div class="config-item">
|
||
<span style="color: #5f6368;">统一设置方案中的自称，如"我方"、"我司"等，全文保持统一</span>
|
||
</div>
|
||
<div class="config-item">
|
||
<input type="text" placeholder="我方" style="padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; width: 200px;">
|
||
<span>先主语</span>
|
||
<button class="btn btn-secondary" style="margin-left: 20px;">+ 自定义</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="config-options" style="margin-top: 30px;">
|
||
<div class="config-item">
|
||
<input type="checkbox" class="config-checkbox" id="smartTitle" checked>
|
||
<label for="smartTitle" class="config-label">
|
||
<strong>🤖 暗标功能</strong><br>
|
||
<span style="font-size: 12px; color: #5f6368;">
|
||
开启暗标功能后，系统将自动遮盖企业名称等关键信息，以符合公开招标要求，确保客观公正。
|
||
联系方式、公司人员信息、联系方式、证件信息都不会暴露。
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<div class="config-item">
|
||
<input type="checkbox" class="config-checkbox" id="deepseek">
|
||
<label for="deepseek" class="config-label">
|
||
<strong>🎯 DeepSeek-R1满血版</strong><br>
|
||
<span style="font-size: 12px; color: #5f6368;">
|
||
搭载DeepSeek-R1引擎后续思维引擎，进行深度思维和文本，提供重构技术方案模块的优优化水平至更高。
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="template-pane">
|
||
<h3>A3版面设置</h3>
|
||
<p>横向A3版面适用于大型工程项目标书</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二步：解析文件 -->
|
||
<div class="step-content" id="step-2">
|
||
<h2 style="margin-bottom: 30px;">上传招标文件</h2>
|
||
|
||
<div class="upload-section">
|
||
<div class="upload-area" id="tenderUpload">
|
||
<div class="upload-icon">📄</div>
|
||
<h3 class="upload-title">晋江市医院（上海市第六人民医院福建医院）住院部智慧技楼连廊封窗项目</h3>
|
||
<p class="upload-desc">竞争性磋商文件<br>（工程类）</p>
|
||
<div style="margin-top: 20px;">
|
||
<p style="font-size: 12px; color: #5f6368; line-height: 1.8;">
|
||
项目名称：晋江市医院（上海市第六人民医院福建医院）住院部智慧技楼连廊封窗项目<br>
|
||
招标编号：CG2M-2025-350582-01940[2025]01521<br>
|
||
项目编号：[350582]FJPCC[CS]20250006
|
||
</p>
|
||
<div style="margin-top: 15px;">
|
||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23ea4335'/%3E%3C/svg%3E" alt="公章" style="width: 80px; height: 80px; opacity: 0.3;">
|
||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23ea4335'/%3E%3C/svg%3E" alt="公章" style="width: 80px; height: 80px; opacity: 0.3; margin-left: 20px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="parse-info">
|
||
<div class="parse-header">
|
||
<span>📋</span>
|
||
<span>招标文件解析</span>
|
||
</div>
|
||
<div class="parse-content">
|
||
<div class="parse-item">
|
||
<div class="parse-label">方案名称</div>
|
||
<div class="parse-value">
|
||
<input type="text" value="晋江市医院（上海市第六人民医院福建医院）住院部智慧技楼连廊封">
|
||
</div>
|
||
</div>
|
||
<div class="parse-item">
|
||
<div class="parse-label">方案类型</div>
|
||
<div class="parse-value">
|
||
<select>
|
||
<option>服务类</option>
|
||
<option>货物类</option>
|
||
<option selected>工程类</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="parse-item">
|
||
<div class="parse-label">项目日期</div>
|
||
<div class="parse-value">
|
||
<div class="date-range">
|
||
<input type="date" value="2025-09-11">
|
||
<span>—</span>
|
||
<input type="date" value="2025-12-10">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="parse-item">
|
||
<div class="parse-label">招标要求</div>
|
||
<div class="parse-value">
|
||
<textarea style="width: 100%; height: 120px; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px; resize: vertical;">项目概况：晋江市医院（上海市第六人民医院福建医院）拟对住院部智慧技楼的连廊进行封窗改造，改造内容包括门窗安装、消防及电梯...</textarea>
|
||
</div>
|
||
</div>
|
||
<div class="parse-item">
|
||
<div class="parse-label">评分标准</div>
|
||
<div class="parse-value">
|
||
<textarea style="width: 100%; height: 200px; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px; resize: vertical;">A. 技术和服务要求响应程度【4352】1.技术和服务要求响应程度：技术和服
|
||
务要求的响应程度【4352】5. 施工方案【25】6. 施工方案：方案的合理性和
|
||
...</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reference-section">
|
||
<h3 class="reference-title">引用资料 <span style="font-size: 12px; color: #5f6368;">AI将以您上传的文件为依据进行编写</span></h3>
|
||
<div class="reference-grid">
|
||
<div class="reference-upload" onclick="uploadReference('knowledge')">
|
||
<div class="reference-icon">📚</div>
|
||
<div class="reference-name">引用知识库</div>
|
||
<div class="reference-desc">从知识库选择中选择</div>
|
||
</div>
|
||
<div class="reference-upload" onclick="uploadReference('clean')">
|
||
<div class="reference-icon">✨</div>
|
||
<div class="reference-name">工程清单</div>
|
||
<div class="reference-desc" style="color: #1a73e8;">生成目录方式：按评分标准内容生成</div>
|
||
<select style="margin-top: 10px; padding: 4px 8px; border: 1px solid #dadce0; border-radius: 4px; font-size: 12px;">
|
||
<option>生成目录方式：按评分标准内容生成</option>
|
||
<option>按工程量清单生成</option>
|
||
<option>按技术要求生成</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增：工程图纸识别功能 -->
|
||
<div class="engineering-section">
|
||
<h3 class="engineering-title">🏗️ 工程资料（可选）</h3>
|
||
<div class="reference-grid">
|
||
<div class="reference-upload" onclick="uploadReference('boq')" id="boqUpload">
|
||
<div class="reference-icon">📊</div>
|
||
<div class="reference-name">工程量清单</div>
|
||
<div class="reference-desc">上传Excel/CSV格式清单，AI自动计算报价</div>
|
||
</div>
|
||
<div class="reference-upload" onclick="uploadReference('drawing')" id="drawingUpload">
|
||
<div class="reference-icon">📐</div>
|
||
<div class="reference-name">工程图纸</div>
|
||
<div class="reference-desc">支持CAD、PDF格式，智能提取技术参数</div>
|
||
</div>
|
||
</div>
|
||
<div id="engineeringResult" style="display: none; margin-top: 15px; padding: 15px; background: #e8f0fe; border-radius: 8px;">
|
||
<div style="font-size: 14px; color: #1a73e8; font-weight: 500; margin-bottom: 10px;">✅ 识别成功</div>
|
||
<div id="engineeringResultContent" style="font-size: 13px; color: #5f6368; line-height: 1.6;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三步：确认目录 -->
|
||
<div class="step-content" id="step-3">
|
||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 30px;">
|
||
<h2>招标文件</h2>
|
||
<div style="display: flex; gap: 10px;">
|
||
<button class="btn btn-secondary">📋 项目概述</button>
|
||
<button class="btn btn-secondary">📊 评分标准</button>
|
||
</div>
|
||
<div style="margin-left: auto; display: flex; gap: 10px;">
|
||
<button class="btn btn-secondary">📥 编辑设置</button>
|
||
<button class="btn btn-secondary">🎨 重新生成</button>
|
||
<button class="btn btn-secondary">📑 生成历史</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outline-container">
|
||
<div class="outline-tree">
|
||
<h3 style="margin-bottom: 15px;">目录大纲</h3>
|
||
<div style="background: #e8f0fe; padding: 10px; border-radius: 6px; margin-bottom: 20px;">
|
||
<div style="font-size: 13px; color: #1a73e8; margin-bottom: 10px;">
|
||
<strong>评分标准</strong>
|
||
</div>
|
||
<div style="font-size: 12px; color: #5f6368; line-height: 1.6;">
|
||
第一章 技术和服务要求响应<br>
|
||
第一节 技术标准响应<br>
|
||
一、建筑结构设计标准<br>
|
||
二、窗体材料技术要求<br>
|
||
三、密封性能响应<br>
|
||
四、隔热保温技术措施<br>
|
||
五、防水防渗技术方案<br>
|
||
六、安全性能保障措施<br>
|
||
第二节 服务保障响应<br>
|
||
一、项目管理体系<br>
|
||
二、施工进度保障措施<br>
|
||
三、质量控制流程<br>
|
||
四、售后服务承诺<br>
|
||
五、应急响应机制<br>
|
||
第二章 施工与建筑安装工程<br>
|
||
第一节 施工方案<br>
|
||
一、绿色节能设计应用<br>
|
||
二、智能化管控方案<br>
|
||
三、材料选型优化<br>
|
||
四、施工工艺创新<br>
|
||
五、运维管理优化<br>
|
||
六、隐蔽增效策措<br>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid #e8eaed;">
|
||
<div style="font-size: 13px; color: #202124; margin-bottom: 10px;">
|
||
<strong>生成章节</strong>
|
||
</div>
|
||
<div class="tree-item level-1">第一章 技术和服务要求响应</div>
|
||
<div class="tree-item level-2">第一节 技术标准响应</div>
|
||
<div class="tree-item level-2">第二节 服务保障响应</div>
|
||
<div class="tree-item level-1">第二章 门窗与建筑安装工程</div>
|
||
<div class="tree-item level-2">第一节 门窗工程</div>
|
||
<div class="tree-item level-3">一、特级复合防火幕窗门窗安装施工方案（含门选、功能</div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" style="width: 100%; margin-top: 20px;">生成第四级章节</button>
|
||
</div>
|
||
|
||
<div class="outline-preview">
|
||
<h2>福建省政府采购项目</h2>
|
||
<h3>竞争性磋商文件</h3>
|
||
<h3>（工程类）</h3>
|
||
|
||
<div style="margin: 40px 0;">
|
||
<p><strong>项目名称：</strong>晋江市医院（上海市第六人民医院福建医院）住院部智慧技楼连廊封窗项目</p>
|
||
<p><strong>招标编号：</strong>CG2M-2025-350582-01940[2025]01521</p>
|
||
<p><strong>项目编号：</strong>[350582]FJPCC[CS]20250006</p>
|
||
</div>
|
||
|
||
<div style="margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
|
||
<p style="font-size: 14px; color: #5f6368; line-height: 1.8;">
|
||
【实施要求】（一）基本要求：1. 本项目工程内容以采购人提供的工程量清单、图纸及现场为准。详见附件。2. 成交供应方须严格按照...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-selector">
|
||
<div class="page-title">页数选择：正文默认使用小四字号，每页约500字段。生成全文约422页，约253200字</div>
|
||
<input type="range" class="page-slider" min="282" max="2814" value="422" id="pageSlider">
|
||
<div class="page-marks">
|
||
<span>282</span>
|
||
<span>422</span>
|
||
<span>844</span>
|
||
<span>1055</span>
|
||
<span>1759</span>
|
||
<span>2110</span>
|
||
<span>2462</span>
|
||
<span>2814</span>
|
||
</div>
|
||
<div class="page-value" id="pageValue">422页</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四步：编写全文 -->
|
||
<div class="step-content" id="step-4">
|
||
<div class="generation-status" id="generationStatus">
|
||
<div class="generation-icon">⚡</div>
|
||
<h2 class="generation-text">正在生成全文...</h2>
|
||
<p class="generation-desc">请稍等片刻，"编写全文"正在运行中...</p>
|
||
<div class="loading-spinner" style="margin-top: 20px;"></div>
|
||
</div>
|
||
|
||
<div class="editor-container" id="editorContainer" style="display: none;">
|
||
<div class="editor-sidebar">
|
||
<h3 class="sidebar-title">📄 晋江市医院（上海...</h3>
|
||
<div class="doc-tree">
|
||
<div class="doc-section">
|
||
<div class="doc-section-title expanded" onclick="toggleSection(this)">
|
||
第一章 技术和服务要求响应
|
||
</div>
|
||
<div class="doc-subsections show">
|
||
<div class="doc-subsection">一、建筑结构设计标准</div>
|
||
<div class="doc-subsection">二、窗体材料技术要求</div>
|
||
<div class="doc-subsection">三、密封性能响应</div>
|
||
<div class="doc-subsection">四、隔热保温技术措施</div>
|
||
<div class="doc-subsection">五、防水防渗技术方案</div>
|
||
<div class="doc-subsection">六、安全性能保障措施</div>
|
||
</div>
|
||
</div>
|
||
<div class="doc-section">
|
||
<div class="doc-section-title" onclick="toggleSection(this)">
|
||
第二章 服务保障响应
|
||
</div>
|
||
<div class="doc-subsections">
|
||
<div class="doc-subsection">一、项目管理体系</div>
|
||
<div class="doc-subsection">二、施工进度保障措施</div>
|
||
<div class="doc-subsection">三、质量控制流程</div>
|
||
<div class="doc-subsection">四、售后服务承诺</div>
|
||
<div class="doc-subsection">五、应急响应机制</div>
|
||
</div>
|
||
</div>
|
||
<div class="doc-section">
|
||
<div class="doc-section-title" onclick="toggleSection(this)">
|
||
第三章 施工与建筑安装工程
|
||
</div>
|
||
<div class="doc-subsections">
|
||
<div class="doc-subsection">一、绿色节能设计应用</div>
|
||
<div class="doc-subsection">二、智能化管控方案</div>
|
||
<div class="doc-subsection">三、材料选型优化</div>
|
||
<div class="doc-subsection">四、施工工艺创新</div>
|
||
<div class="doc-subsection">五、运维管理优化</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e8eaed;">
|
||
<h4 style="font-size: 14px; margin-bottom: 10px;">第三章 创新与优化方案</h4>
|
||
<ul style="font-size: 13px; color: #5f6368; line-height: 1.8; padding-left: 20px;">
|
||
<li>绿色节能设计应用</li>
|
||
<li>智能化管控方案</li>
|
||
<li>材料选型优化</li>
|
||
<li>施工工艺创新</li>
|
||
<li>运维管理优化</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e8eaed;">
|
||
<h4 style="font-size: 14px; margin-bottom: 10px;">第二章 门窗与建筑安装工程</h4>
|
||
<div style="font-size: 13px; margin-bottom: 10px;">第一节 门窗工程</div>
|
||
<ul style="font-size: 12px; color: #5f6368; line-height: 1.8; padding-left: 20px;">
|
||
<li>特级复合防火幕窗门窗安装施工方案（含门选、功能</li>
|
||
<li>金属防火窗安装施工</li>
|
||
<li>隔热铝合金窗材窗安装</li>
|
||
<li>施工工艺流程</li>
|
||
<li>金属百叶窗安装施工</li>
|
||
<li>窗间墙面JCS外泥涂质</li>
|
||
<li>铝塑铝合金装施工安装施工</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="editor-main">
|
||
<div class="editor-toolbar">
|
||
<button class="toolbar-btn">📄 正文模式</button>
|
||
<button class="toolbar-btn">📊 目录模式</button>
|
||
<div style="margin-left: auto;">
|
||
<button class="toolbar-btn" onclick="editContent()">✏️ 编辑</button>
|
||
<button class="toolbar-btn" onclick="saveContent()">💾 保存</button>
|
||
<button class="toolbar-btn" onclick="exportDocument()">📥 导出</button>
|
||
</div>
|
||
</div>
|
||
<div class="editor-content">
|
||
<div style="text-align: center; padding: 100px 0;">
|
||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150'%3E%3Crect width='200' height='150' fill='%23f8f9fa' stroke='%23dadce0'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%235f6368' font-size='14'%3E标书文档预览%3C/text%3E%3C/svg%3E" alt="文档预览">
|
||
<h3 style="margin-top: 20px; color: #202124;">本章节未编写</h3>
|
||
<p style="color: #5f6368; margin-top: 10px;">请点击下方"编写本章节"按钮生成内容，或从左侧选择其他章节查看。</p>
|
||
<button class="btn btn-primary" style="margin-top: 20px;">编写本章节</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-panel" id="resultPanel" style="display: none;">
|
||
<div class="result-icon">✅</div>
|
||
<h2 class="result-title">标书生成完成</h2>
|
||
<p class="result-desc">您的标书已成功生成，共422页，约253,200字</p>
|
||
<div class="result-actions">
|
||
<button class="result-btn primary" onclick="downloadDocument()">下载文档</button>
|
||
<button class="result-btn secondary" onclick="previewDocument()">在线预览</button>
|
||
<button class="result-btn secondary" onclick="editDocument()">继续编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<div class="footer-actions">
|
||
<div class="footer-left">
|
||
<button class="btn btn-secondary" onclick="saveProgress()">💾 保存</button>
|
||
<button class="btn btn-secondary" onclick="location.href='dashboard-optimized.html'">🏠 返回</button>
|
||
</div>
|
||
<div class="footer-buttons">
|
||
<button class="btn btn-secondary" id="prevBtn" onclick="previousStep()">上一步</button>
|
||
<button class="btn btn-primary" id="nextBtn" onclick="nextStep()">下一步</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentStep = 1;
|
||
let uploadedFiles = {
|
||
tender: null,
|
||
boq: null,
|
||
drawing: null,
|
||
knowledge: null
|
||
};
|
||
|
||
// 切换设置标签
|
||
function switchSettingTab(tab) {
|
||
document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
|
||
|
||
event.target.classList.add('active');
|
||
document.getElementById(tab + '-pane').classList.add('active');
|
||
}
|
||
|
||
// 上传引用资料
|
||
function uploadReference(type) {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
|
||
if (type === 'boq') {
|
||
input.accept = '.xls,.xlsx,.csv';
|
||
} else if (type === 'drawing') {
|
||
input.accept = '.pdf,.dwg,.dxf,.dwf,.dgn';
|
||
input.multiple = true;
|
||
}
|
||
|
||
input.onchange = function(e) {
|
||
if (e.target.files.length > 0) {
|
||
uploadedFiles[type] = e.target.files;
|
||
|
||
if (type === 'boq') {
|
||
document.getElementById('boqUpload').classList.add('uploaded');
|
||
document.getElementById('boqUpload').innerHTML += '<div class="reference-status">✅ 已上传清单</div>';
|
||
|
||
// 显示识别结果
|
||
setTimeout(() => {
|
||
document.getElementById('engineeringResult').style.display = 'block';
|
||
document.getElementById('engineeringResultContent').innerHTML = `
|
||
<strong>工程量清单识别结果：</strong><br>
|
||
• 识别到156个清单项<br>
|
||
• 总造价：¥2,850,000<br>
|
||
• 主要项目：门窗安装、防水工程、装饰工程
|
||
`;
|
||
}, 1000);
|
||
} else if (type === 'drawing') {
|
||
document.getElementById('drawingUpload').classList.add('uploaded');
|
||
document.getElementById('drawingUpload').innerHTML += `<div class="reference-status">✅ 已上传${e.target.files.length}个图纸</div>`;
|
||
|
||
// 显示识别结果
|
||
setTimeout(() => {
|
||
document.getElementById('engineeringResult').style.display = 'block';
|
||
const currentContent = document.getElementById('engineeringResultContent').innerHTML;
|
||
document.getElementById('engineeringResultContent').innerHTML = currentContent + `
|
||
<br><br><strong>工程图纸识别结果：</strong><br>
|
||
• 建筑面积：3,680㎡<br>
|
||
• 层高：4.5m<br>
|
||
• 结构类型：框架结构<br>
|
||
• 主要材料：铝合金、钢化玻璃
|
||
`;
|
||
}, 1500);
|
||
}
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
}
|
||
|
||
// 下一步
|
||
function nextStep() {
|
||
if (currentStep < 4) {
|
||
// 更新步骤指示器
|
||
document.getElementById(`step-${currentStep}-indicator`).classList.remove('active');
|
||
document.getElementById(`step-${currentStep}-indicator`).classList.add('completed');
|
||
document.getElementById(`step-${currentStep}`).classList.remove('active');
|
||
|
||
currentStep++;
|
||
|
||
document.getElementById(`step-${currentStep}-indicator`).classList.add('active');
|
||
document.getElementById(`step-${currentStep}`).classList.add('active');
|
||
|
||
// 更新按钮状态
|
||
updateButtons();
|
||
|
||
// 第四步时开始生成
|
||
if (currentStep === 4) {
|
||
startGeneration();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 上一步
|
||
function previousStep() {
|
||
if (currentStep > 1) {
|
||
document.getElementById(`step-${currentStep}-indicator`).classList.remove('active', 'completed');
|
||
document.getElementById(`step-${currentStep}`).classList.remove('active');
|
||
|
||
currentStep--;
|
||
|
||
document.getElementById(`step-${currentStep}-indicator`).classList.remove('completed');
|
||
document.getElementById(`step-${currentStep}-indicator`).classList.add('active');
|
||
document.getElementById(`step-${currentStep}`).classList.add('active');
|
||
|
||
updateButtons();
|
||
}
|
||
}
|
||
|
||
// 更新按钮状态
|
||
function updateButtons() {
|
||
const prevBtn = document.getElementById('prevBtn');
|
||
const nextBtn = document.getElementById('nextBtn');
|
||
|
||
if (currentStep === 1) {
|
||
prevBtn.style.display = 'none';
|
||
} else {
|
||
prevBtn.style.display = 'inline-block';
|
||
}
|
||
|
||
if (currentStep === 4) {
|
||
nextBtn.textContent = '一键编写全文';
|
||
nextBtn.onclick = function() {
|
||
generateFullDocument();
|
||
};
|
||
} else {
|
||
nextBtn.textContent = '下一步';
|
||
nextBtn.onclick = nextStep;
|
||
}
|
||
}
|
||
|
||
// 开始生成
|
||
function startGeneration() {
|
||
setTimeout(() => {
|
||
document.getElementById('generationStatus').style.display = 'none';
|
||
document.getElementById('editorContainer').style.display = 'grid';
|
||
}, 3000);
|
||
}
|
||
|
||
// 生成全文
|
||
function generateFullDocument() {
|
||
document.getElementById('editorContainer').style.display = 'none';
|
||
document.getElementById('resultPanel').style.display = 'block';
|
||
|
||
const nextBtn = document.getElementById('nextBtn');
|
||
nextBtn.textContent = '下载文档';
|
||
nextBtn.onclick = downloadDocument;
|
||
}
|
||
|
||
// 切换文档树节
|
||
function toggleSection(element) {
|
||
element.classList.toggle('expanded');
|
||
const subsections = element.nextElementSibling;
|
||
if (subsections) {
|
||
subsections.classList.toggle('show');
|
||
}
|
||
}
|
||
|
||
// 保存进度
|
||
function saveProgress() {
|
||
localStorage.setItem('biddingProgress', JSON.stringify({
|
||
step: currentStep,
|
||
files: uploadedFiles
|
||
}));
|
||
alert('进度已保存');
|
||
}
|
||
|
||
// 下载文档
|
||
function downloadDocument() {
|
||
alert('正在准备下载标书文档...');
|
||
}
|
||
|
||
// 预览文档
|
||
function previewDocument() {
|
||
window.open('preview.html', '_blank');
|
||
}
|
||
|
||
// 编辑文档
|
||
function editDocument() {
|
||
document.getElementById('resultPanel').style.display = 'none';
|
||
document.getElementById('editorContainer').style.display = 'grid';
|
||
}
|
||
|
||
// 页数滑块
|
||
const pageSlider = document.getElementById('pageSlider');
|
||
const pageValue = document.getElementById('pageValue');
|
||
if (pageSlider) {
|
||
pageSlider.addEventListener('input', function() {
|
||
pageValue.textContent = this.value + '页';
|
||
});
|
||
}
|
||
|
||
// 选择封面模板
|
||
document.querySelectorAll('.cover-template').forEach(template => {
|
||
template.addEventListener('click', function() {
|
||
document.querySelectorAll('.cover-template').forEach(t => t.classList.remove('selected'));
|
||
this.classList.add('selected');
|
||
});
|
||
});
|
||
|
||
// 初始化
|
||
updateButtons();
|
||
</script>
|
||
</body>
|
||
</html> |