ui
This commit is contained in:
Wyle.Gong-巩文昕
@@ -0,0 +1,624 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>项目管理</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-top: 0;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body button {
|
||||
padding: 8px 16px;
|
||||
margin-right: 8px;
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body button:hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
|
||||
body button.danger {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
body button.danger:hover {
|
||||
background-color: #ff7875;
|
||||
}
|
||||
|
||||
body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
body th,
|
||||
body td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
body th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
body .action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
body .action-buttons button {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body .modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
body .modal-content {
|
||||
background-color: #fff;
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 50%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
body .modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
body .modal-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body .close {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
body .form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
body .form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body .form-group textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
body .modal-footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
body .empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
body .empty-state p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
body .description-cell {
|
||||
max-width: 300px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body .description-cell:hover {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>项目管理</h1>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="search-box">
|
||||
<input type="text" id="search-input" placeholder="搜索项目..." />
|
||||
</div>
|
||||
<button id="add-project-btn">添加项目</button>
|
||||
<!-- <button id="refresh-btn">刷新</button> -->
|
||||
</div>
|
||||
|
||||
<div id="projects-table-container">
|
||||
<table id="projects-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目名称</th>
|
||||
<th>描述</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="projects-list">
|
||||
<!-- 项目列表将通过JavaScript动态生成 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="empty-state" class="empty-state" style="display: none">
|
||||
<p>暂无项目数据</p>
|
||||
<button id="create-first-project-btn">创建第一个项目</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑项目的模态框 -->
|
||||
<div id="project-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-title">添加项目</h2>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="project-form">
|
||||
<input type="hidden" id="project-id" />
|
||||
<div class="form-group">
|
||||
<label for="project-name">项目名称</label>
|
||||
<input type="text" id="project-name" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="project-description">项目描述</label>
|
||||
<textarea id="project-description"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancel-btn">取消</button>
|
||||
<button id="save-project-btn">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认删除的模态框 -->
|
||||
<div id="confirm-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>确认删除</h2>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>确定要删除这个项目吗？此操作不可撤销。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancel-delete-btn">取消</button>
|
||||
<button id="confirm-delete-btn" class="danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 全局变量
|
||||
let projects = [];
|
||||
let currentProjectId = null;
|
||||
|
||||
// DOM元素
|
||||
const projectsListEl = document.getElementById("projects-list");
|
||||
const emptyStateEl = document.getElementById("empty-state");
|
||||
const searchInputEl = document.getElementById("search-input");
|
||||
const projectModal = document.getElementById("project-modal");
|
||||
const confirmModal = document.getElementById("confirm-modal");
|
||||
const modalTitle = document.getElementById("modal-title");
|
||||
const projectForm = document.getElementById("project-form");
|
||||
const projectIdInput = document.getElementById("project-id");
|
||||
const projectNameInput = document.getElementById("project-name");
|
||||
const projectDescInput = document.getElementById("project-description");
|
||||
|
||||
// 按钮
|
||||
const addProjectBtn = document.getElementById("add-project-btn");
|
||||
const refreshBtn = document.getElementById("refresh-btn");
|
||||
const createFirstProjectBtn = document.getElementById(
|
||||
"create-first-project-btn"
|
||||
);
|
||||
const saveProjectBtn = document.getElementById("save-project-btn");
|
||||
const cancelBtn = document.getElementById("cancel-btn");
|
||||
const confirmDeleteBtn = document.getElementById("confirm-delete-btn");
|
||||
const cancelDeleteBtn = document.getElementById("cancel-delete-btn");
|
||||
const closeButtons = document.querySelectorAll(".close");
|
||||
|
||||
init();
|
||||
// 初始化
|
||||
function init() {
|
||||
fetchProjects();
|
||||
setupEventListeners();
|
||||
}
|
||||
|
||||
// 设置事件监听器
|
||||
function setupEventListeners() {
|
||||
// 添加项目按钮
|
||||
addProjectBtn.addEventListener("click", () => openProjectModal());
|
||||
|
||||
// 刷新按钮
|
||||
// refreshBtn.addEventListener("click", fetchProjects);
|
||||
|
||||
// 创建第一个项目按钮
|
||||
createFirstProjectBtn.addEventListener("click", () =>
|
||||
openProjectModal()
|
||||
);
|
||||
|
||||
// 保存项目按钮
|
||||
saveProjectBtn.addEventListener("click", saveProject);
|
||||
|
||||
// 取消按钮
|
||||
cancelBtn.addEventListener("click", closeProjectModal);
|
||||
|
||||
// 确认删除按钮
|
||||
confirmDeleteBtn.addEventListener("click", deleteProject);
|
||||
|
||||
// 取消删除按钮
|
||||
cancelDeleteBtn.addEventListener("click", closeConfirmModal);
|
||||
|
||||
// 关闭按钮
|
||||
closeButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
projectModal.style.display = "none";
|
||||
confirmModal.style.display = "none";
|
||||
});
|
||||
});
|
||||
|
||||
// 搜索输入框
|
||||
searchInputEl.addEventListener("input", filterProjects);
|
||||
|
||||
// 点击模态框外部关闭
|
||||
window.addEventListener("click", function (event) {
|
||||
if (event.target === projectModal) {
|
||||
closeProjectModal();
|
||||
}
|
||||
if (event.target === confirmModal) {
|
||||
closeConfirmModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取项目列表
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const response = await fetch("http://127.0.0.1:5002/api/project/");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0 && Array.isArray(result.data)) {
|
||||
projects = result.data.sort((a, b) => {
|
||||
return new Date(b.created_at) - new Date(a.created_at);
|
||||
});
|
||||
renderProjects(projects);
|
||||
} else {
|
||||
console.error("获取项目失败:", result.message || "未知错误");
|
||||
showEmptyState(true, "加载失败，请重试");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取项目错误:", error);
|
||||
showEmptyState(true, "加载失败，请重试");
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染项目列表
|
||||
function renderProjects(projectsToRender) {
|
||||
if (!projectsToRender || projectsToRender.length === 0) {
|
||||
showEmptyState(true);
|
||||
return;
|
||||
}
|
||||
|
||||
showEmptyState(false);
|
||||
|
||||
projectsListEl.innerHTML = "";
|
||||
|
||||
projectsToRender.forEach((project) => {
|
||||
const row = document.createElement("tr");
|
||||
|
||||
// 格式化日期
|
||||
const createdAt = new Date(project.created_at);
|
||||
const formattedDate = createdAt.toLocaleString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
const shortDesc = project.description
|
||||
? project.description.length > 50
|
||||
? project.description.substring(0, 50) + "..."
|
||||
: project.description
|
||||
: "";
|
||||
|
||||
row.innerHTML = `
|
||||
<td>${project.name}</td>
|
||||
<td class="description-cell" title="${project.description || ""
|
||||
}">${shortDesc}</td>
|
||||
<td>${formattedDate}</td>
|
||||
<td class="action-buttons">
|
||||
<button class="view-docs-btn" data-id="${project.id
|
||||
}">查看文档</button>
|
||||
<button class="view-demands-btn secondary" data-id="${project.id
|
||||
}">查看需求树</button>
|
||||
<button class="view-stages-btn secondary" data-id="${project.id
|
||||
}">查看场景</button>
|
||||
<button class="edit-btn" data-id="${project.id}">编辑</button>
|
||||
<button class="delete-btn danger" data-id="${project.id
|
||||
}">删除</button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
projectsListEl.appendChild(row);
|
||||
});
|
||||
document.querySelectorAll(".view-demands-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
const docId = this.getAttribute("data-id");
|
||||
window.location.href = `project/demand?project_id=${docId}`;
|
||||
});
|
||||
});
|
||||
document.querySelectorAll(".view-stages-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
const projectId = this.getAttribute("data-id");
|
||||
window.location.href = `project/stage?project_id=${projectId}`;
|
||||
});
|
||||
});
|
||||
// 添加按钮事件
|
||||
document.querySelectorAll(".view-docs-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
const projectId = this.getAttribute("data-id");
|
||||
window.location.href = `doc_list?project_id=${projectId}`;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".edit-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
const projectId = this.getAttribute("data-id");
|
||||
const project = projects.find((p) => p.id === projectId);
|
||||
openProjectModal(project);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".delete-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
const projectId = this.getAttribute("data-id");
|
||||
openConfirmModal(projectId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示/隐藏空状态
|
||||
function showEmptyState(show, message = "暂无项目数据") {
|
||||
if (show) {
|
||||
document.getElementById("projects-table").style.display = "none";
|
||||
emptyStateEl.style.display = "block";
|
||||
emptyStateEl.querySelector("p").textContent = message;
|
||||
} else {
|
||||
document.getElementById("projects-table").style.display = "table";
|
||||
emptyStateEl.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤项目
|
||||
function filterProjects() {
|
||||
const searchTerm = searchInputEl.value.toLowerCase();
|
||||
|
||||
if (!searchTerm) {
|
||||
renderProjects(projects);
|
||||
return;
|
||||
}
|
||||
|
||||
const filteredProjects = projects.filter(
|
||||
(project) =>
|
||||
project.name.toLowerCase().includes(searchTerm) ||
|
||||
(project.description &&
|
||||
project.description.toLowerCase().includes(searchTerm))
|
||||
);
|
||||
|
||||
renderProjects(filteredProjects);
|
||||
}
|
||||
|
||||
// 打开项目模态框
|
||||
function openProjectModal(project = null) {
|
||||
console.log("will open project modal");
|
||||
modalTitle.textContent = project ? "编辑项目" : "添加项目";
|
||||
console.log(project);
|
||||
if (project) {
|
||||
projectIdInput.value = project.id;
|
||||
projectNameInput.value = project.name || "";
|
||||
projectDescInput.value = project.description || "";
|
||||
} else {
|
||||
projectForm.reset();
|
||||
projectIdInput.value = "";
|
||||
}
|
||||
|
||||
projectModal.style.display = "block";
|
||||
}
|
||||
|
||||
// 关闭项目模态框
|
||||
function closeProjectModal() {
|
||||
projectModal.style.display = "none";
|
||||
projectForm.reset();
|
||||
}
|
||||
|
||||
// 打开确认删除模态框
|
||||
function openConfirmModal(projectId) {
|
||||
currentProjectId = projectId;
|
||||
confirmModal.style.display = "block";
|
||||
}
|
||||
|
||||
// 关闭确认删除模态框
|
||||
function closeConfirmModal() {
|
||||
confirmModal.style.display = "none";
|
||||
currentProjectId = null;
|
||||
}
|
||||
|
||||
// 保存项目
|
||||
async function saveProject() {
|
||||
const projectId = projectIdInput.value;
|
||||
const name = projectNameInput.value.trim();
|
||||
const description = projectDescInput.value.trim();
|
||||
|
||||
if (!name) {
|
||||
alert("请输入项目名称");
|
||||
return;
|
||||
}
|
||||
|
||||
const projectData = {
|
||||
name,
|
||||
description,
|
||||
};
|
||||
|
||||
try {
|
||||
let url = "http://127.0.0.1:5002/api/project/";
|
||||
let method = "POST";
|
||||
|
||||
if (projectId) {
|
||||
url += projectId;
|
||||
method = "PATCH";
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(projectData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
alert(projectId ? "项目更新成功" : "项目创建成功");
|
||||
closeProjectModal();
|
||||
fetchProjects();
|
||||
} else {
|
||||
alert(`操作失败: ${result.message || "未知错误"}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("保存项目错误:", error);
|
||||
alert(`操作失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除项目
|
||||
async function deleteProject() {
|
||||
if (!currentProjectId) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`http://127.0.0.1:5002/api/project/${currentProjectId}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
alert("项目删除成功");
|
||||
closeConfirmModal();
|
||||
fetchProjects();
|
||||
} else {
|
||||
alert(`删除失败: ${result.message || "未知错误"}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("删除项目错误:", error);
|
||||
alert(`删除失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user