1107 lines
38 KiB
HTML
1107 lines
38 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>智能低代码开发平台</title>
|
||
<!-- Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Bootstrap Icons -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0e27;
|
||
--bg-secondary: #1a1f3a;
|
||
--bg-panel: rgba(30, 41, 59, 0.6);
|
||
--border-color: rgba(59, 130, 246, 0.2);
|
||
--accent-blue: #3b82f6;
|
||
--text-primary: #e0e6ed;
|
||
--text-secondary: #94a3b8;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||
color: var(--text-primary);
|
||
overflow-x: hidden;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.top-navbar {
|
||
background: rgba(15, 23, 42, 0.8);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 2px solid var(--border-color);
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* 面板样式 */
|
||
.panel {
|
||
background: var(--bg-panel);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.panel::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
|
||
}
|
||
|
||
.panel-header {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.panel-header::before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 18px;
|
||
background: linear-gradient(180deg, #3b82f6, #06b6d4);
|
||
border-radius: 2px;
|
||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||
border: none;
|
||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: rgba(51, 65, 85, 0.5);
|
||
color: var(--text-secondary);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: rgba(51, 65, 85, 0.8);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 项目列表 */
|
||
.project-item {
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
background: rgba(51, 65, 85, 0.4);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.project-item:hover {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
border-color: rgba(59, 130, 246, 0.4);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.project-item.active {
|
||
background: rgba(59, 130, 246, 0.2);
|
||
border-color: rgba(59, 130, 246, 0.6);
|
||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
.project-name {
|
||
font-weight: bold;
|
||
color: #60a5fa;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.project-desc {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 标签页 */
|
||
.nav-tabs {
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.nav-tabs .nav-link {
|
||
color: var(--text-secondary);
|
||
background: rgba(51, 65, 85, 0.4);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px 6px 0 0;
|
||
margin-right: 5px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.nav-tabs .nav-link:hover {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.nav-tabs .nav-link.active {
|
||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||
color: white;
|
||
border-color: var(--accent-blue);
|
||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
/* 卡片 */
|
||
.item-card {
|
||
padding: 15px;
|
||
margin-bottom: 10px;
|
||
background: rgba(51, 65, 85, 0.3);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.item-card:hover {
|
||
border-color: rgba(59, 130, 246, 0.4);
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.item-title {
|
||
font-weight: bold;
|
||
color: #60a5fa;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.item-desc {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 文档列表 */
|
||
.doc-item {
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
background: rgba(51, 65, 85, 0.3);
|
||
border-left: 3px solid var(--accent-blue);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.doc-item:hover {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.doc-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.doc-actions {
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
|
||
.doc-actions .btn {
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 代码树 */
|
||
.code-tree {
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tree-node {
|
||
padding: 5px 10px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tree-node:hover {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
.tree-folder {
|
||
color: #fbbf24;
|
||
}
|
||
|
||
.tree-file {
|
||
color: #60a5fa;
|
||
}
|
||
|
||
/* 流水线 */
|
||
.pipeline {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.pipeline-step {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20px 15px;
|
||
background: rgba(51, 65, 85, 0.4);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.pipeline-step:hover {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.pipeline-step.active {
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.3) 100%);
|
||
border-color: var(--accent-blue);
|
||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
|
||
}
|
||
|
||
.pipeline-step::after {
|
||
content: '→';
|
||
position: absolute;
|
||
right: -15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--accent-blue);
|
||
font-size: 20px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.pipeline-step:last-child::after {
|
||
content: '';
|
||
}
|
||
|
||
.step-icon {
|
||
font-size: 28px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.step-name {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.step-status {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 滚动条 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(59, 130, 246, 0.4);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(59, 130, 246, 0.6);
|
||
}
|
||
|
||
/* 模态框 */
|
||
.modal-content {
|
||
background: rgba(30, 41, 59, 0.95);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.modal-header {
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.form-control, .form-select {
|
||
background: rgba(51, 65, 85, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.form-control:focus, .form-select:focus {
|
||
background: rgba(51, 65, 85, 0.7);
|
||
border-color: var(--accent-blue);
|
||
color: var(--text-primary);
|
||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
.form-label {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 步骤导航 */
|
||
.wizard-steps {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.wizard-steps::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: var(--border-color);
|
||
z-index: 0;
|
||
}
|
||
|
||
.wizard-step {
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.wizard-step-number {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: rgba(51, 65, 85, 0.5);
|
||
border: 2px solid var(--border-color);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.wizard-step.active .wizard-step-number {
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
border-color: var(--accent-blue);
|
||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
.wizard-step.completed .wizard-step-number {
|
||
background: rgba(16, 185, 129, 0.3);
|
||
border-color: #10b981;
|
||
}
|
||
|
||
.wizard-step-label {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 进度条 */
|
||
.progress {
|
||
background: rgba(51, 65, 85, 0.5);
|
||
border-radius: 4px;
|
||
height: 8px;
|
||
}
|
||
|
||
.progress-bar {
|
||
background: linear-gradient(90deg, #3b82f6, #06b6d4);
|
||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
/* 高度控制 */
|
||
.scrollable-panel {
|
||
max-height: calc(100vh - 200px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 20px;
|
||
min-height: calc(100vh - 80px);
|
||
}
|
||
|
||
/* 表单检查框 */
|
||
.form-check-input:checked {
|
||
background-color: var(--accent-blue);
|
||
border-color: var(--accent-blue);
|
||
}
|
||
|
||
/* 单选按钮组 */
|
||
.btn-check:checked + .btn-outline-primary {
|
||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||
border-color: var(--accent-blue);
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
color: var(--text-primary);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background: rgba(59, 130, 246, 0.15);
|
||
color: var(--text-primary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="top-navbar">
|
||
<div class="container-fluid">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="logo">
|
||
<i class="bi bi-lightning-charge-fill"></i> 智能低代码开发平台
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-secondary btn-sm">
|
||
<i class="bi bi-gear"></i> 设置
|
||
</button>
|
||
<button class="btn btn-secondary btn-sm">
|
||
<i class="bi bi-question-circle"></i> 帮助
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-content">
|
||
<div class="row g-3">
|
||
<!-- 左侧：项目列表 -->
|
||
<div class="col-lg-3">
|
||
<div class="panel">
|
||
<div class="panel-header">项目列表</div>
|
||
<button class="btn btn-primary w-100 mb-3" data-bs-toggle="modal" data-bs-target="#newProjectModal">
|
||
<i class="bi bi-plus-circle"></i> 新建项目
|
||
</button>
|
||
<div class="scrollable-panel">
|
||
<div class="project-item active" onclick="selectProject(this)">
|
||
<div class="project-name">智能监控系统</div>
|
||
<div class="project-desc">基于AI的实时监控平台</div>
|
||
</div>
|
||
<div class="project-item" onclick="selectProject(this)">
|
||
<div class="project-name">数据分析平台</div>
|
||
<div class="project-desc">大数据可视化分析工具</div>
|
||
</div>
|
||
<div class="project-item" onclick="selectProject(this)">
|
||
<div class="project-name">物联网管理系统</div>
|
||
<div class="project-desc">设备管理与数据采集</div>
|
||
</div>
|
||
<div class="project-item" onclick="selectProject(this)">
|
||
<div class="project-name">电商管理系统</div>
|
||
<div class="project-desc">订单、库存、用户管理</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间：需求与功能 -->
|
||
<div class="col-lg-6">
|
||
<div class="row g-3">
|
||
<!-- 需求板块 -->
|
||
<div class="col-12">
|
||
<div class="panel">
|
||
<div class="panel-header">需求管理</div>
|
||
<ul class="nav nav-tabs mb-3" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#originalReq" type="button">
|
||
原始需求
|
||
</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#reqList" type="button">
|
||
需求列表
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content scrollable-panel" style="max-height: 300px;">
|
||
<div class="tab-pane fade show active" id="originalReq">
|
||
<div class="alert alert-info" style="background: rgba(59, 130, 246, 0.1); border-color: var(--border-color); color: var(--text-primary);">
|
||
<i class="bi bi-info-circle"></i> 原始需求描述：需要开发一个智能监控系统，支持用户登录认证、实时数据监控、数据导出等功能...
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="reqList">
|
||
<div class="item-card">
|
||
<div class="d-flex align-items-start gap-2">
|
||
<input class="form-check-input mt-1" type="checkbox" checked>
|
||
<div class="flex-grow-1">
|
||
<div class="item-title">REQ-001 用户登录认证</div>
|
||
<div class="item-desc">系统需要支持用户通过用户名和密码进行登录，并集成多因素认证机制，确保账户安全性。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="d-flex align-items-start gap-2">
|
||
<input class="form-check-input mt-1" type="checkbox" checked>
|
||
<div class="flex-grow-1">
|
||
<div class="item-title">REQ-002 实时数据监控</div>
|
||
<div class="item-desc">平台需要实时采集设备数据，并通过可视化图表展示关键指标，支持异常告警。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="d-flex align-items-start gap-2">
|
||
<input class="form-check-input mt-1" type="checkbox">
|
||
<div class="flex-grow-1">
|
||
<div class="item-title">REQ-003 数据导出功能</div>
|
||
<div class="item-desc">支持将监控数据导出为Excel、CSV等格式，便于后续分析和报告生成。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能板块 -->
|
||
<div class="col-12">
|
||
<div class="panel">
|
||
<div class="panel-header">功能模块</div>
|
||
<div class="scrollable-panel" style="max-height: 300px;">
|
||
<div class="item-card">
|
||
<div class="item-title">
|
||
<i class="bi bi-shield-lock text-warning"></i> 用户认证模块
|
||
</div>
|
||
<div class="item-desc">
|
||
<span class="badge bg-primary">REQ-001</span>
|
||
实现登录、注册、密码重置、多因素认证等功能
|
||
</div>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="item-title">
|
||
<i class="bi bi-graph-up text-success"></i> 数据监控模块
|
||
</div>
|
||
<div class="item-desc">
|
||
<span class="badge bg-primary">REQ-002</span>
|
||
实时数据采集、可视化展示、告警管理
|
||
</div>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="item-title">
|
||
<i class="bi bi-folder text-info"></i> 数据管理模块
|
||
</div>
|
||
<div class="item-desc">
|
||
<span class="badge bg-primary">REQ-003</span>
|
||
数据查询、导出、备份与恢复
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：文档与代码 -->
|
||
<div class="col-lg-3">
|
||
<div class="row g-3">
|
||
<!-- 文档板块 -->
|
||
<div class="col-12">
|
||
<div class="panel">
|
||
<div class="panel-header">项目文档</div>
|
||
<div class="scrollable-panel" style="max-height: 300px;">
|
||
<div class="doc-item">
|
||
<div class="doc-name">
|
||
<i class="bi bi-file-earmark-text"></i>
|
||
<span>需求规格说明书</span>
|
||
</div>
|
||
<div class="doc-actions">
|
||
<button class="btn btn-sm btn-outline-primary" onclick="viewDocument('需求规格说明书')">
|
||
<i class="bi bi-eye"></i>
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-success" onclick="downloadDocument('需求规格说明书.docx')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="doc-item">
|
||
<div class="doc-name">
|
||
<i class="bi bi-file-earmark-code"></i>
|
||
<span>功能设计文档</span>
|
||
</div>
|
||
<div class="doc-actions">
|
||
<button class="btn btn-sm btn-outline-primary" onclick="viewDocument('功能设计文档')">
|
||
<i class="bi bi-eye"></i>
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-success" onclick="downloadDocument('功能设计文档.docx')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="doc-item">
|
||
<div class="doc-name">
|
||
<i class="bi bi-diagram-3"></i>
|
||
<span>软件概要设计文档</span>
|
||
</div>
|
||
<div class="doc-actions">
|
||
<button class="btn btn-sm btn-outline-primary" onclick="viewDocument('软件概要设计文档')">
|
||
<i class="bi bi-eye"></i>
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-success" onclick="downloadDocument('软件概要设计文档.docx')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="doc-item">
|
||
<div class="doc-name">
|
||
<i class="bi bi-file-earmark-ruled"></i>
|
||
<span>软件详细设计文档</span>
|
||
</div>
|
||
<div class="doc-actions">
|
||
<button class="btn btn-sm btn-outline-primary" onclick="viewDocument('软件详细设计文档')">
|
||
<i class="bi bi-eye"></i>
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-success" onclick="downloadDocument('软件详细设计文档.docx')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="doc-item">
|
||
<div class="doc-name">
|
||
<i class="bi bi-book"></i>
|
||
<span>接口文档</span>
|
||
</div>
|
||
<div class="doc-actions">
|
||
<button class="btn btn-sm btn-outline-primary" onclick="viewDocument('接口文档')">
|
||
<i class="bi bi-eye"></i>
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-success" onclick="downloadDocument('接口文档.pdf')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 代码板块 -->
|
||
<div class="col-12">
|
||
<div class="panel">
|
||
<div class="panel-header">代码结构</div>
|
||
<div class="scrollable-panel code-tree" style="max-height: 300px;">
|
||
<div class="tree-node tree-folder">
|
||
<i class="bi bi-folder-fill"></i> src
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 20px;">
|
||
<i class="bi bi-file-earmark-code"></i> main.java
|
||
</div>
|
||
<div class="tree-node tree-folder" style="padding-left: 20px;">
|
||
<i class="bi bi-folder-fill"></i> modules
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 40px;">
|
||
<i class="bi bi-file-earmark-code"></i> AuthModule.java
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 40px;">
|
||
<i class="bi bi-file-earmark-code"></i> MonitorModule.java
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 40px;">
|
||
<i class="bi bi-file-earmark-code"></i> DataModule.java
|
||
</div>
|
||
<div class="tree-node tree-folder" style="padding-left: 20px;">
|
||
<i class="bi bi-folder-fill"></i> utils
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 40px;">
|
||
<i class="bi bi-file-earmark-code"></i> HttpUtil.java
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 40px;">
|
||
<i class="bi bi-file-earmark-code"></i> DateUtil.java
|
||
</div>
|
||
<div class="tree-node tree-folder" style="padding-left: 20px;">
|
||
<i class="bi bi-folder-fill"></i> config
|
||
</div>
|
||
<div class="tree-node tree-file" style="padding-left: 40px;">
|
||
<i class="bi bi-file-earmark-text"></i> application.yml
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部：操作流水线 -->
|
||
<div class="col-12">
|
||
<div class="panel">
|
||
<div class="panel-header">流水线操作</div>
|
||
<div class="pipeline">
|
||
<div class="pipeline-step">
|
||
<div class="step-icon"><i class="bi bi-search"></i></div>
|
||
<div class="step-name">静态扫描</div>
|
||
<div class="step-status">就绪</div>
|
||
</div>
|
||
<div class="pipeline-step active">
|
||
<div class="step-icon"><i class="bi bi-hammer"></i></div>
|
||
<div class="step-name">编译构建</div>
|
||
<div class="step-status">进行中...</div>
|
||
</div>
|
||
<div class="pipeline-step">
|
||
<div class="step-icon"><i class="bi bi-box-seam"></i></div>
|
||
<div class="step-name">打包</div>
|
||
<div class="step-status">等待中</div>
|
||
</div>
|
||
<div class="pipeline-step">
|
||
<div class="step-icon"><i class="bi bi-rocket-takeoff"></i></div>
|
||
<div class="step-name">部署</div>
|
||
<div class="step-status">等待中</div>
|
||
</div>
|
||
<div class="pipeline-step">
|
||
<div class="step-icon"><i class="bi bi-check-circle"></i></div>
|
||
<div class="step-name">验证</div>
|
||
<div class="step-status">等待中</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新建项目模态框 -->
|
||
<div class="modal fade" id="newProjectModal" tabindex="-1">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">
|
||
<i class="bi bi-plus-circle"></i> 新建项目
|
||
</h5>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- 步骤导航 -->
|
||
<div class="wizard-steps">
|
||
<div class="wizard-step active" id="wizardStep1">
|
||
<div class="wizard-step-number">1</div>
|
||
<div class="wizard-step-label">基本信息</div>
|
||
</div>
|
||
<div class="wizard-step" id="wizardStep2">
|
||
<div class="wizard-step-number">2</div>
|
||
<div class="wizard-step-label">需求分析</div>
|
||
</div>
|
||
<div class="wizard-step" id="wizardStep3">
|
||
<div class="wizard-step-number">3</div>
|
||
<div class="wizard-step-label">功能生成</div>
|
||
</div>
|
||
<div class="wizard-step" id="wizardStep4">
|
||
<div class="wizard-step-number">4</div>
|
||
<div class="wizard-step-label">工程生成</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤1: 基本信息 -->
|
||
<div id="step1Content" class="wizard-content">
|
||
<div class="mb-3">
|
||
<label class="form-label">项目名称</label>
|
||
<input type="text" class="form-control" placeholder="请输入项目名称">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">项目描述</label>
|
||
<textarea class="form-control" rows="3" placeholder="请输入项目描述"></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">需求录入方式</label>
|
||
<div class="btn-group w-100" role="group">
|
||
<input type="radio" class="btn-check" name="inputType" id="inputText" checked>
|
||
<label class="btn btn-outline-primary" for="inputText">
|
||
<i class="bi bi-pencil-square"></i> 文本输入
|
||
</label>
|
||
<input type="radio" class="btn-check" name="inputType" id="inputFile">
|
||
<label class="btn btn-outline-primary" for="inputFile">
|
||
<i class="bi bi-file-earmark-arrow-up"></i> 文件导入
|
||
</label>
|
||
<input type="radio" class="btn-check" name="inputType" id="inputVoice">
|
||
<label class="btn btn-outline-primary" for="inputVoice">
|
||
<i class="bi bi-mic"></i> 语音输入
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">需求内容</label>
|
||
<textarea class="form-control" rows="6" placeholder="请输入或粘贴您的需求描述..."></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤2: 需求分析 -->
|
||
<div id="step2Content" class="wizard-content" style="display: none;">
|
||
<div class="mb-4">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>AI正在分析需求...</span>
|
||
<span class="text-primary">65%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 65%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-success" style="background: rgba(16, 185, 129, 0.1); border-color: #10b981; color: var(--text-primary);">
|
||
<i class="bi bi-check-circle"></i> 已识别 3 个需求条目
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="d-flex align-items-start gap-2">
|
||
<input class="form-check-input mt-1" type="checkbox" checked>
|
||
<div class="flex-grow-1">
|
||
<div class="item-title">需求-001: 用户管理</div>
|
||
<div class="item-desc">系统需要支持用户的注册、登录、权限管理等功能</div>
|
||
<input type="text" class="form-control form-control-sm mt-2" placeholder="添加需求描述...">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="d-flex align-items-start gap-2">
|
||
<input class="form-check-input mt-1" type="checkbox" checked>
|
||
<div class="flex-grow-1">
|
||
<div class="item-title">需求-002: 数据监控</div>
|
||
<div class="item-desc">实时监控系统运行状态和关键指标</div>
|
||
<input type="text" class="form-control form-control-sm mt-2" placeholder="添加需求描述...">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤3: 功能生成 -->
|
||
<div id="step3Content" class="wizard-content" style="display: none;">
|
||
<div class="mb-4">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>正在生成功能模块...</span>
|
||
<span class="text-primary">80%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="item-title">
|
||
<i class="bi bi-shield-lock text-warning"></i> 用户认证模块
|
||
</div>
|
||
<div class="item-desc mb-2">
|
||
<span class="badge bg-primary">需求-001</span>
|
||
实现用户登录、注册、权限管理等功能
|
||
</div>
|
||
<button class="btn btn-sm btn-outline-primary">
|
||
<i class="bi bi-gear"></i> 配置模块
|
||
</button>
|
||
</div>
|
||
<div class="item-card">
|
||
<div class="item-title">
|
||
<i class="bi bi-graph-up text-success"></i> 数据监控模块
|
||
</div>
|
||
<div class="item-desc mb-2">
|
||
<span class="badge bg-primary">需求-002</span>
|
||
实时数据采集和可视化展示
|
||
</div>
|
||
<button class="btn btn-sm btn-outline-primary">
|
||
<i class="bi bi-gear"></i> 配置模块
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤4: 工程生成 -->
|
||
<div id="step4Content" class="wizard-content" style="display: none;">
|
||
<div class="mb-3">
|
||
<label class="form-label">选择工程类型</label>
|
||
<select class="form-select">
|
||
<option selected>Java Spring Boot 工程</option>
|
||
<option>Qt C++ 工程</option>
|
||
<option>Makefile C/C++ 工程</option>
|
||
<option>Python Flask 工程</option>
|
||
<option>Node.js Express 工程</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">项目配置</label>
|
||
<div class="row g-2">
|
||
<div class="col-6">
|
||
<input type="text" class="form-control" placeholder="包名/命名空间">
|
||
</div>
|
||
<div class="col-6">
|
||
<input type="text" class="form-control" placeholder="版本号">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-info" style="background: rgba(59, 130, 246, 0.1); border-color: var(--border-color); color: var(--text-primary);">
|
||
<i class="bi bi-info-circle"></i> 点击"生成工程"后，系统将自动生成项目代码和相关文档
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" id="prevBtn" style="display: none;" onclick="previousStep()">
|
||
<i class="bi bi-arrow-left"></i> 上一步
|
||
</button>
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-primary" id="nextBtn" onclick="nextStep()">
|
||
下一步 <i class="bi bi-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
let currentStep = 1;
|
||
|
||
// 项目选择
|
||
function selectProject(element) {
|
||
document.querySelectorAll('.project-item').forEach(item => {
|
||
item.classList.remove('active');
|
||
});
|
||
element.classList.add('active');
|
||
}
|
||
|
||
// 文档查看
|
||
function viewDocument(docName) {
|
||
alert('正在打开文档: ' + docName);
|
||
}
|
||
|
||
// 文档下载
|
||
function downloadDocument(fileName) {
|
||
// 创建一个虚拟的下载链接
|
||
const link = document.createElement('a');
|
||
link.href = '#'; // 实际应用中这里应该是文档的真实URL
|
||
link.download = fileName;
|
||
|
||
// 模拟文档内容
|
||
const content = `这是 ${fileName} 的内容\n\n生成时间: ${new Date().toLocaleString()}\n\n这是一个示例文档，实际应用中会包含完整的项目文档内容。`;
|
||
const blob = new Blob([content], { type: 'text/plain' });
|
||
link.href = URL.createObjectURL(blob);
|
||
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
// 显示下载提示
|
||
showToast('success', `正在下载: ${fileName}`);
|
||
}
|
||
|
||
// 显示提示消息
|
||
function showToast(type, message) {
|
||
const toastContainer = document.createElement('div');
|
||
toastContainer.style.cssText = `
|
||
position: fixed;
|
||
top: 80px;
|
||
right: 20px;
|
||
z-index: 9999;
|
||
min-width: 300px;
|
||
`;
|
||
|
||
const iconMap = {
|
||
success: 'check-circle-fill',
|
||
error: 'exclamation-triangle-fill',
|
||
info: 'info-circle-fill'
|
||
};
|
||
|
||
const colorMap = {
|
||
success: '#10b981',
|
||
error: '#ef4444',
|
||
info: '#3b82f6'
|
||
};
|
||
|
||
toastContainer.innerHTML = `
|
||
<div class="alert alert-dismissible fade show" style="background: rgba(30, 41, 59, 0.95); border: 1px solid ${colorMap[type]}; color: var(--text-primary);">
|
||
<i class="bi bi-${iconMap[type]}" style="color: ${colorMap[type]}"></i>
|
||
${message}
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"></button>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(toastContainer);
|
||
|
||
setTimeout(() => {
|
||
toastContainer.remove();
|
||
}, 3000);
|
||
}
|
||
|
||
// 向导步骤控制
|
||
function nextStep() {
|
||
if (currentStep < 4) {
|
||
document.getElementById(`step${currentStep}Content`).style.display = 'none';
|
||
document.getElementById(`wizardStep${currentStep}`).classList.remove('active');
|
||
document.getElementById(`wizardStep${currentStep}`).classList.add('completed');
|
||
|
||
currentStep++;
|
||
|
||
document.getElementById(`step${currentStep}Content`).style.display = 'block';
|
||
document.getElementById(`wizardStep${currentStep}`).classList.add('active');
|
||
|
||
document.getElementById('prevBtn').style.display = 'inline-block';
|
||
|
||
if (currentStep === 4) {
|
||
document.getElementById('nextBtn').innerHTML = '<i class="bi bi-check-circle"></i> 生成工程';
|
||
}
|
||
} else {
|
||
// 生成工程
|
||
showToast('success', '工程生成中，请稍候...');
|
||
setTimeout(() => {
|
||
bootstrap.Modal.getInstance(document.getElementById('newProjectModal')).hide();
|
||
showToast('success', '工程生成成功！');
|
||
resetWizard();
|
||
}, 2000);
|
||
}
|
||
}
|
||
|
||
function previousStep() {
|
||
if (currentStep > 1) {
|
||
document.getElementById(`step${currentStep}Content`).style.display = 'none';
|
||
document.getElementById(`wizardStep${currentStep}`).classList.remove('active');
|
||
|
||
currentStep--;
|
||
|
||
document.getElementById(`step${currentStep}Content`).style.display = 'block';
|
||
document.getElementById(`wizardStep${currentStep}`).classList.remove('completed');
|
||
document.getElementById(`wizardStep${currentStep}`).classList.add('active');
|
||
|
||
if (currentStep === 1) {
|
||
document.getElementById('prevBtn').style.display = 'none';
|
||
}
|
||
|
||
document.getElementById('nextBtn').innerHTML = '下一步 <i class="bi bi-arrow-right"></i>';
|
||
}
|
||
}
|
||
|
||
function resetWizard() {
|
||
currentStep = 1;
|
||
for (let i = 1; i <= 4; i++) {
|
||
document.getElementById(`step${i}Content`).style.display = i === 1 ? 'block' : 'none';
|
||
document.getElementById(`wizardStep${i}`).classList.remove('active', 'completed');
|
||
}
|
||
document.getElementById('wizardStep1').classList.add('active');
|
||
document.getElementById('prevBtn').style.display = 'none';
|
||
document.getElementById('nextBtn').innerHTML = '下一步 <i class="bi bi-arrow-right"></i>';
|
||
}
|
||
|
||
// 模态框关闭时重置
|
||
document.getElementById('newProjectModal').addEventListener('hidden.bs.modal', function () {
|
||
resetWizard();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |