diff --git a/Release/database/XNSim.db b/Release/database/XNSim.db index 08d879e..1e28a18 100644 Binary files a/Release/database/XNSim.db and b/Release/database/XNSim.db differ diff --git a/XNSimHtml/assets/icons/png/cancel_b.png b/XNSimHtml/assets/icons/png/cancel_b.png new file mode 100644 index 0000000..5d19dbe Binary files /dev/null and b/XNSimHtml/assets/icons/png/cancel_b.png differ diff --git a/XNSimHtml/assets/icons/png/complete_b.png b/XNSimHtml/assets/icons/png/complete_b.png new file mode 100644 index 0000000..70bc05c Binary files /dev/null and b/XNSimHtml/assets/icons/png/complete_b.png differ diff --git a/XNSimHtml/components/todo-component.js b/XNSimHtml/components/todo-component.js index 46f6369..906cf0a 100644 --- a/XNSimHtml/components/todo-component.js +++ b/XNSimHtml/components/todo-component.js @@ -15,6 +15,7 @@ class TodoComponent extends HTMLElement { this.currentUser = null; this.editingTodo = null; // 当前正在编辑的待办事项 this.isInitialized = false; // 添加初始化标志 + this.showCompleted = true; // 添加显示已完成的状态变量 } // 初始化组件 @@ -123,6 +124,17 @@ class TodoComponent extends HTMLElement { const treeContainer = document.createElement('div'); treeContainer.className = 'project-tree'; + // 创建树内容容器 + const treeContent = document.createElement('div'); + treeContent.className = 'tree-content'; + + // 添加新增待办按钮 + const addTodoButton = document.createElement('button'); + addTodoButton.className = 'add-todo-button'; + addTodoButton.textContent = '新增待办'; + addTodoButton.addEventListener('click', () => this.showNewTodoModal()); + treeContent.appendChild(addTodoButton); + Object.values(tree).forEach(project => { const projectNode = document.createElement('div'); projectNode.className = 'project-node'; @@ -179,9 +191,30 @@ class TodoComponent extends HTMLElement { projectNode.appendChild(projectHeader); projectNode.appendChild(subprojectsContainer); - treeContainer.appendChild(projectNode); + treeContent.appendChild(projectNode); }); + // 创建底部控制区域 + const bottomControls = document.createElement('div'); + bottomControls.className = 'bottom-controls'; + + // 添加显示已完成复选框 + const showCompletedContainer = document.createElement('div'); + showCompletedContainer.className = 'show-completed-container'; + showCompletedContainer.innerHTML = ` + + + `; + + // 添加复选框事件监听 + const checkbox = showCompletedContainer.querySelector('input'); + checkbox.addEventListener('change', (e) => { + this.showCompleted = e.target.checked; + this.render(); + }); + + bottomControls.appendChild(showCompletedContainer); + // 添加显示全部按钮 const showAllButton = document.createElement('button'); showAllButton.className = 'show-all-button'; @@ -191,7 +224,11 @@ class TodoComponent extends HTMLElement { this.selectedSubproject = null; this.render(); }); - treeContainer.appendChild(showAllButton); + bottomControls.appendChild(showAllButton); + + // 将树内容和底部控制区域添加到树容器 + treeContainer.appendChild(treeContent); + treeContainer.appendChild(bottomControls); return treeContainer; } @@ -215,6 +252,11 @@ class TodoComponent extends HTMLElement { }); } + // 根据复选框状态筛选 + if (!this.showCompleted) { + filteredTodos = filteredTodos.filter(todo => !todo.completed); + } + // 根据用户等级进行筛选 const userLevel = this.currentUser.level || 0; @@ -244,8 +286,283 @@ class TodoComponent extends HTMLElement { }); } + // 显示编辑计划时间对话框 + showEditScheduleModal(todo) { + this.editingTodo = todo; + const { modal, style } = this.createModal('schedule'); + + // 设置日期时间选择器的初始值 + const scheduleInput = modal.querySelector('#schedule'); + const scheduleDate = new Date(todo.sche_time); + scheduleInput.value = scheduleDate.toISOString().slice(0, 16); + + // 添加保存按钮事件 + const saveButton = modal.querySelector('.save-button'); + saveButton.addEventListener('click', async () => { + const scheduleTime = scheduleInput.value; + if (scheduleTime && this.editingTodo) { + try { + const response = await fetch(`/api/todos/${this.editingTodo.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + ...this.editingTodo, + sche_time: scheduleTime + }) + }); + + if (!response.ok) { + throw new Error('更新计划时间失败'); + } + + // 更新本地数据 + this.editingTodo.sche_time = scheduleTime; + this.render(); + modal.remove(); + style.remove(); + } catch (error) { + console.error('更新计划时间时发生错误:', error); + this.showError('更新计划时间失败，请稍后重试'); + } + } + }); + + document.body.appendChild(modal); + } + + // 显示编辑执行人对话框 + showEditExecutorModal(todo) { + this.editingTodo = todo; + const { modal, style } = this.createModal('executor'); + + // 获取当前用户等级 + const currentUserLevel = this.currentUser.access_level || 0; + + // 填充用户下拉列表 + const executorSelect = modal.querySelector('#executor'); + + // 筛选符合条件的用户 + const availableUsers = this.users.filter(user => + user && + user.access_level > 0 && + user.access_level <= currentUserLevel + ); + + // 添加用户选项 + availableUsers.forEach(user => { + const option = document.createElement('option'); + option.value = user.username; + option.textContent = `${user.username} (${user.full_name})`; + if (user.username === todo.exeuser) { + option.selected = true; + } + executorSelect.appendChild(option); + }); + + // 添加保存按钮事件 + const saveButton = modal.querySelector('.save-button'); + saveButton.addEventListener('click', async () => { + const executor = executorSelect.value; + if (executor && this.editingTodo) { + try { + const response = await fetch(`/api/todos/${this.editingTodo.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + ...this.editingTodo, + exeuser: executor + }) + }); + + if (!response.ok) { + throw new Error('更新执行人失败'); + } + + // 更新本地数据 + this.editingTodo.exeuser = executor; + this.render(); + modal.remove(); + style.remove(); + } catch (error) { + console.error('更新执行人时发生错误:', error); + this.showError('更新执行人失败，请稍后重试'); + } + } + }); + + document.body.appendChild(modal); + } + + // 显示新增待办对话框 + showNewTodoModal() { + const { modal, style } = this.createModal('new-todo'); + + // 设置计划时间的默认值为当前时间 + const scheduleInput = modal.querySelector('#schedule'); + const now = new Date(); + scheduleInput.value = now.toISOString().slice(0, 16); + + // 获取当前用户等级 + const currentUserLevel = this.currentUser.access_level || 0; + + // 填充用户下拉列表 + const executorSelect = modal.querySelector('#executor'); + + // 筛选符合条件的用户 + const availableUsers = this.users.filter(user => + user && + user.access_level > 0 && + user.access_level <= currentUserLevel + ); + + // 添加用户选项 + availableUsers.forEach(user => { + const option = document.createElement('option'); + option.value = user.username; + option.textContent = `${user.username} (${user.full_name})`; + executorSelect.appendChild(option); + }); + + // 获取所有项目和子项目 + const projectTree = this.buildProjectTree(); + const projectInput = modal.querySelector('#project'); + const subprojectInput = modal.querySelector('#subproject'); + const projectOptions = modal.querySelector('#project-options'); + const subprojectOptions = modal.querySelector('#subproject-options'); + + // 填充项目选项 + Object.keys(projectTree).forEach(project => { + const option = document.createElement('div'); + option.className = 'select-option'; + option.textContent = project; + option.addEventListener('click', () => { + projectInput.value = project; + projectOptions.style.display = 'none'; + // 更新子项目选项 + updateSubprojectOptions(project); + }); + projectOptions.appendChild(option); + }); + + // 更新子项目选项的函数 + const updateSubprojectOptions = (selectedProject) => { + subprojectOptions.innerHTML = ''; + const subprojects = projectTree[selectedProject]?.subprojects || {}; + Object.keys(subprojects).forEach(subproject => { + const option = document.createElement('div'); + option.className = 'select-option'; + option.textContent = subproject; + option.addEventListener('click', () => { + subprojectInput.value = subproject; + subprojectOptions.style.display = 'none'; + }); + subprojectOptions.appendChild(option); + }); + }; + + // 项目输入框事件处理 + projectInput.addEventListener('focus', () => { + projectOptions.style.display = 'block'; + subprojectOptions.style.display = 'none'; + }); + + projectInput.addEventListener('input', () => { + const value = projectInput.value.toLowerCase(); + const options = projectOptions.querySelectorAll('.select-option'); + options.forEach(option => { + const text = option.textContent.toLowerCase(); + option.style.display = text.includes(value) ? 'block' : 'none'; + }); + projectOptions.style.display = 'block'; + }); + + // 子项目输入框事件处理 + subprojectInput.addEventListener('focus', () => { + if (projectInput.value) { + subprojectOptions.style.display = 'block'; + projectOptions.style.display = 'none'; + } + }); + + subprojectInput.addEventListener('input', () => { + if (projectInput.value) { + const value = subprojectInput.value.toLowerCase(); + const options = subprojectOptions.querySelectorAll('.select-option'); + options.forEach(option => { + const text = option.textContent.toLowerCase(); + option.style.display = text.includes(value) ? 'block' : 'none'; + }); + subprojectOptions.style.display = 'block'; + } + }); + + // 点击外部关闭下拉列表 + document.addEventListener('click', (e) => { + if (!e.target.closest('.custom-select')) { + projectOptions.style.display = 'none'; + subprojectOptions.style.display = 'none'; + } + }); + + // 添加保存按钮事件 + const saveButton = modal.querySelector('.save-button'); + saveButton.addEventListener('click', async () => { + const project = projectInput.value; + const subproject = subprojectInput.value; + const title = modal.querySelector('#title').value; + const text = modal.querySelector('#text').value; + const scheduleTime = modal.querySelector('#schedule').value; + const executor = modal.querySelector('#executor').value; + + if (!project || !subproject || !scheduleTime || !executor || !title) { + this.showError('请填写必填项'); + return; + } + + try { + const response = await fetch('/api/todos', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + project, + subproject, + title, + text, + sche_time: scheduleTime, + exeuser: executor, + adduser: this.currentUser.username, + completed: false, + status: 'pending' // 添加初始状态 + }) + }); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.message || '创建待办失败'); + } + + // 重新加载待办列表并渲染 + await this.fetchTodos(); + this.render(); + modal.remove(); + style.remove(); + } catch (error) { + console.error('创建待办时发生错误:', error); + this.showError(error.message || '创建待办失败，请稍后重试'); + } + }); + + document.body.appendChild(modal); + } + // 创建模态对话框 - createModal() { + createModal(type) { // 创建样式 const style = document.createElement('style'); style.textContent = ` @@ -308,12 +625,93 @@ class TodoComponent extends HTMLElement { margin-bottom: 5px; color: #495057; } - .form-control { + .form-group input[type="text"], + .form-group select { width: 100%; - padding: 8px; - border: 1px solid #ced4da; + padding: 8px 10px; + border: 1px solid #ddd; border-radius: 4px; font-size: 14px; + margin-bottom: 5px; + background-color: white; + } + .form-group input[type="text"]:focus, + .form-group select:focus { + border-color: #7986E7; + outline: none; + box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2); + } + .form-group select:disabled { + background-color: #f8f9fa; + cursor: not-allowed; + } + .form-group select[contenteditable="true"] { + cursor: text; + } + /* 添加 datalist 相关样式 */ + .form-group input[list] { + width: 100%; + padding: 8px 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + margin-bottom: 5px; + background-color: white; + } + .form-group input[list]:focus { + border-color: #7986E7; + outline: none; + box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2); + } + .form-group datalist { + width: 100%; + padding: 8px 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + background-color: white; + } + /* 自定义 datalist 下拉列表样式 */ + .form-group input[list]::-webkit-calendar-picker-indicator { + display: none; + } + .form-group input[list]::-webkit-list-button { + display: none; + } + .form-group input[list]::-webkit-datetime-edit { + padding: 0; + } + .form-group input[list]::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + .form-group input[list]::-webkit-datetime-edit-text { + padding: 0 2px; + } + .form-group input[list]::-webkit-datetime-edit-hour-field, + .form-group input[list]::-webkit-datetime-edit-minute-field, + .form-group input[list]::-webkit-datetime-edit-second-field, + .form-group input[list]::-webkit-datetime-edit-ampm-field { + padding: 0 2px; + } + /* 自定义下拉列表样式 */ + .form-group input[list] + datalist { + position: absolute; + background: white; + border: 1px solid #ddd; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + max-height: 200px; + overflow-y: auto; + z-index: 1000; + } + .form-group input[list] + datalist option { + padding: 8px 10px; + cursor: pointer; + font-size: 14px; + color: #333; + } + .form-group input[list] + datalist option:hover { + background-color: #f5f5f5; } .save-button, .cancel-button { padding: 8px 16px; @@ -323,11 +721,11 @@ class TodoComponent extends HTMLElement { font-size: 14px; } .save-button { - background-color: #007bff; + background-color: #7986E7; color: white; } .save-button:hover { - background-color: #0056b3; + background-color: #6875D6; } .cancel-button { background-color: #6c757d; @@ -336,112 +734,272 @@ class TodoComponent extends HTMLElement { .cancel-button:hover { background-color: #5a6268; } + /* 日期时间选择器特定样式 */ + input[type="datetime-local"] { + font-family: inherit; + color: #333; + } + input[type="datetime-local"]::-webkit-calendar-picker-indicator { + cursor: pointer; + padding: 4px; + margin-right: 4px; + opacity: 0.6; + } + input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { + opacity: 1; + } + input[type="datetime-local"]::-webkit-datetime-edit { + padding: 0; + } + input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + input[type="datetime-local"]::-webkit-datetime-edit-text { + padding: 0 2px; + } + input[type="datetime-local"]::-webkit-datetime-edit-hour-field, + input[type="datetime-local"]::-webkit-datetime-edit-minute-field, + input[type="datetime-local"]::-webkit-datetime-edit-second-field, + input[type="datetime-local"]::-webkit-datetime-edit-ampm-field { + padding: 0 2px; + } + .form-group textarea { + width: 100%; + min-height: 100px; + padding: 8px 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + resize: vertical; + } + .form-group textarea:focus { + border-color: #7986E7; + outline: none; + box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2); + } + /* 自定义下拉列表样式 */ + .custom-select { + position: relative; + width: 100%; + } + .select-options { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: white; + border: 1px solid #7986E7; + border-radius: 4px; + box-shadow: 0 4px 8px rgba(121, 134, 231, 0.2); + max-height: 200px; + overflow-y: auto; + z-index: 1000; + margin-top: 2px; + } + .select-option { + padding: 8px 10px; + cursor: pointer; + font-size: 14px; + color: #333; + transition: all 0.2s ease; + } + .select-option:hover { + background-color: #7986E7; + color: white; + } + .select-option:active { + background-color: #6875D6; + } + /* 添加滚动条样式 */ + .select-options::-webkit-scrollbar { + width: 6px; + } + .select-options::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; + } + .select-options::-webkit-scrollbar-thumb { + background: #7986E7; + border-radius: 3px; + } + .select-options::-webkit-scrollbar-thumb:hover { + background: #6875D6; + } + .show-completed-container { + margin: 10px 0; + padding: 8px; + display: flex; + align-items: center; + gap: 8px; + background: #f8f9fa; + border-radius: 4px; + } + .show-completed-container input[type="checkbox"] { + cursor: pointer; + width: 16px; + height: 16px; + } + .show-completed-container label { + cursor: pointer; + user-select: none; + color: #495057; + font-size: 14px; + } + .show-completed-container:hover { + background: #e9ecef; + } `; - document.head.appendChild(style); - + const modal = document.createElement('div'); modal.className = 'modal'; - modal.innerHTML = ` -
-
-

编辑执行人

- -
-
-
- - + + // 根据类型创建不同的模态框内容 + if (type === 'executor') { + modal.innerHTML = ` +
+
+

编辑执行人

+ +
+
+
+ + +
+
+
+ +
-
- - + `; + } else if (type === 'schedule') { + modal.innerHTML = ` +
+
+

编辑计划时间

+ +
+
+
+ + +
+
+
+ + +
-
- `; + `; + } else if (type === 'new-todo') { + modal.innerHTML = ` +
+
+

新增待办

+ +
+
+
+ + +
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ `; + } else if (type === 'edit-title') { + modal.innerHTML = ` +
+
+

编辑标题

+ +
+
+
+ + +
+
+
+ + +
+
+ `; + } else if (type === 'edit-description') { + modal.innerHTML = ` +
+
+

编辑详细描述

+ +
+
+
+ + +
+
+
+ + +
+
+ `; + } // 添加关闭按钮事件 const closeButton = modal.querySelector('.close-button'); closeButton.addEventListener('click', () => { modal.remove(); - style.remove(); // 移除样式 + style.remove(); }); // 添加取消按钮事件 const cancelButton = modal.querySelector('.cancel-button'); cancelButton.addEventListener('click', () => { modal.remove(); - style.remove(); // 移除样式 + style.remove(); }); - // 添加保存按钮事件 - const saveButton = modal.querySelector('.save-button'); - saveButton.addEventListener('click', async () => { - const executor = modal.querySelector('#executor').value; - if (executor && this.editingTodo) { - try { - const response = await fetch(`/api/todos/${this.editingTodo.id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - ...this.editingTodo, - exeuser: executor - }) - }); + // 将样式添加到文档头部 + document.head.appendChild(style); - if (!response.ok) { - throw new Error('更新执行人失败'); - } - - // 更新本地数据 - this.editingTodo.exeuser = executor; - this.render(); - modal.remove(); - style.remove(); // 移除样式 - } catch (error) { - console.error('更新执行人时发生错误:', error); - this.showError('更新执行人失败，请稍后重试'); - } - } - }); - - return modal; - } - - // 显示编辑执行人对话框 - showEditExecutorModal(todo) { - this.editingTodo = todo; - const modal = this.createModal(); - - // 获取当前用户等级 - const currentUserLevel = this.currentUser.access_level || 0; - - // 填充用户下拉列表 - const executorSelect = modal.querySelector('#executor'); - - // 筛选符合条件的用户 - const availableUsers = this.users.filter(user => - user && - user.access_level > 0 && - user.access_level <= currentUserLevel - ); - - // 添加用户选项 - availableUsers.forEach(user => { - const option = document.createElement('option'); - option.value = user.username; - option.textContent = `${user.username} (${user.full_name})`; - if (user.username === todo.exeuser) { - option.selected = true; - } - executorSelect.appendChild(option); - }); - - document.body.appendChild(modal); + return { modal, style }; } render() { @@ -457,20 +1015,90 @@ class TodoComponent extends HTMLElement { style.textContent = ` .container { display: flex; - height: 100%; + height: calc(100vh - 120px); /* 增加边距，减小高度 */ font-family: Arial, sans-serif; + margin: 10px; + overflow: hidden; /* 防止出现双滚动条 */ } .project-tree { width: 250px; background: #f8f9fa; border-right: 1px solid #e9ecef; padding: 15px; - overflow-y: auto; display: flex; flex-direction: column; + position: relative; + height: 100%; + box-sizing: border-box; /* 确保padding不会增加总高度 */ + } + .tree-content { + flex: 1; + overflow-y: auto; + margin-bottom: 100px; /* 为底部固定区域留出空间 */ + padding-right: 5px; /* 为滚动条留出空间 */ + } + .todo-container { + flex: 1; + padding: 20px; + overflow-y: auto; + height: 100%; + box-sizing: border-box; + } + .bottom-controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 15px; + background: #f8f9fa; + border-top: 1px solid #e9ecef; + box-sizing: border-box; + } + /* 自定义滚动条样式 */ + .tree-content::-webkit-scrollbar, + .todo-container::-webkit-scrollbar { + width: 6px; + } + .tree-content::-webkit-scrollbar-track, + .todo-container::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; + } + .tree-content::-webkit-scrollbar-thumb, + .todo-container::-webkit-scrollbar-thumb { + background: #888; + border-radius: 3px; + } + .tree-content::-webkit-scrollbar-thumb:hover, + .todo-container::-webkit-scrollbar-thumb:hover { + background: #555; + } + .show-completed-container { + margin-bottom: 10px; + padding: 8px; + display: flex; + align-items: center; + gap: 8px; + background: #fff; + border-radius: 4px; + border: 1px solid #e9ecef; + } + .show-completed-container input[type="checkbox"] { + cursor: pointer; + width: 16px; + height: 16px; + } + .show-completed-container label { + cursor: pointer; + user-select: none; + color: #495057; + font-size: 14px; + } + .show-completed-container:hover { + background: #e9ecef; } .show-all-button { - margin-top: 15px; + width: 100%; padding: 8px 16px; background-color: #007bff; color: white; @@ -486,11 +1114,6 @@ class TodoComponent extends HTMLElement { .show-all-button:active { background-color: #004085; } - .todo-container { - flex: 1; - padding: 20px; - overflow-y: auto; - } .project-node { margin-bottom: 10px; } @@ -580,6 +1203,73 @@ class TodoComponent extends HTMLElement { color: #495057; font-size: 0.95em; } + .description-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + } + .description-actions { + display: flex; + gap: 4px; + } + .description-content { + white-space: pre-wrap; + line-height: 1.5; + max-height: 100px; + overflow: hidden; + transition: max-height 0.3s ease-out; + position: relative; + text-indent: 0; /* 移除缩进 */ + } + .description-content.expanded { + max-height: 2000px; + } + .description-content:not(.expanded) { + max-height: 1.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-indent: 0; /* 移除缩进 */ + } + .description-content::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 40px; + background: linear-gradient(transparent, white); + pointer-events: none; + opacity: 1; + transition: opacity 0.3s ease-out; + } + .description-content.expanded::after { + opacity: 0; + } + .toggle-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + border-radius: 4px; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + } + .toggle-button:hover { + background-color: rgba(121, 134, 231, 0.1); + } + .toggle-icon { + transition: transform 0.3s ease; + width: 16px; + height: 16px; + display: inline-block; + } + .toggle-button.expanded .toggle-icon { + transform: rotate(180deg); + } .status { display: inline-block; padding: 4px 8px; @@ -612,6 +1302,62 @@ class TodoComponent extends HTMLElement { .executor-link:hover { text-decoration: underline; } + .schedule-link { + color: #007bff; + text-decoration: none; + cursor: pointer; + } + .schedule-link:hover { + text-decoration: underline; + } + .add-todo-button { + margin-bottom: 15px; + padding: 8px 16px; + background-color: #7986E7; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s; + width: 100%; + } + .add-todo-button:hover { + background-color: #6875D6; + } + .add-todo-button:active { + background-color: #5A67D8; + } + .todo-actions { + display: flex; + align-items: center; + gap: 8px; + } + .edit-button, .delete-button, .complete-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + border-radius: 4px; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + } + .action-icon { + width: 16px; + height: 16px; + object-fit: contain; + } + .edit-button:hover { + background-color: rgba(121, 134, 231, 0.1); + } + .delete-button:hover { + background-color: rgba(220, 53, 69, 0.1); + } + .complete-button:hover { + background-color: rgba(40, 167, 69, 0.1); + } `; this.shadowRoot.appendChild(style); @@ -622,7 +1368,6 @@ class TodoComponent extends HTMLElement { // 构建并渲染项目树 const tree = this.buildProjectTree(); const treeContainer = this.renderProjectTree(tree); - container.appendChild(treeContainer); // 创建待办事项列表容器 const todosContainer = document.createElement('div'); @@ -642,10 +1387,21 @@ class TodoComponent extends HTMLElement { todoElement.innerHTML = `
-

${todo.project}-${todo.subproject}

- - ${todo.completed ? '已完成' : '进行中'} - +

${todo.project} - ${todo.subproject} - ${todo.title}

+
+ + + + + ${todo.completed ? '已完成' : '进行中'} + +
@@ -657,7 +1413,7 @@ class TodoComponent extends HTMLElement {
计划时间： - ${scheDate} + ${scheDate} 创建时间： ${createdDate}
@@ -668,7 +1424,18 @@ class TodoComponent extends HTMLElement {
` : ''}
- ${todo.text || '无详细描述'} +
+ 详细描述： +
+ + +
+
+
${todo.text || '无详细描述'}
`; @@ -680,9 +1447,179 @@ class TodoComponent extends HTMLElement { this.showEditExecutorModal(todo); }); + // 添加计划时间链接点击事件 + const scheduleLink = todoElement.querySelector('.schedule-link'); + scheduleLink.addEventListener('click', (e) => { + e.preventDefault(); + this.showEditScheduleModal(todo); + }); + + // 添加编辑按钮事件 + const editButton = todoElement.querySelector('.edit-button'); + editButton.addEventListener('click', () => { + const { modal, style } = this.createModal('edit-title'); + const titleInput = modal.querySelector('#title'); + titleInput.value = todo.title; + + const saveButton = modal.querySelector('.save-button'); + saveButton.addEventListener('click', async () => { + const newTitle = titleInput.value; + if (!newTitle) { + this.showError('标题不能为空'); + return; + } + + try { + const response = await fetch(`/api/todos/${todo.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + ...todo, + title: newTitle + }) + }); + + if (!response.ok) { + throw new Error('更新标题失败'); + } + + await this.fetchTodos(); + this.render(); + modal.remove(); + style.remove(); + } catch (error) { + console.error('更新标题时发生错误:', error); + this.showError('更新标题失败，请稍后重试'); + } + }); + + document.body.appendChild(modal); + }); + + // 添加描述编辑按钮事件 + const descriptionEditButton = todoElement.querySelector('.todo-description .edit-button'); + descriptionEditButton.addEventListener('click', () => { + const { modal, style } = this.createModal('edit-description'); + const textInput = modal.querySelector('#text'); + textInput.value = todo.text || ''; + + const saveButton = modal.querySelector('.save-button'); + saveButton.addEventListener('click', async () => { + const newText = textInput.value; + + try { + const response = await fetch(`/api/todos/${todo.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + ...todo, + text: newText + }) + }); + + if (!response.ok) { + throw new Error('更新描述失败'); + } + + await this.fetchTodos(); + this.render(); + modal.remove(); + style.remove(); + } catch (error) { + console.error('更新描述时发生错误:', error); + this.showError('更新描述失败，请稍后重试'); + } + }); + + document.body.appendChild(modal); + }); + + // 添加删除按钮事件 + const deleteButton = todoElement.querySelector('.delete-button'); + deleteButton.addEventListener('click', async () => { + if (confirm('确定要删除这条待办事项吗？')) { + try { + const response = await fetch(`/api/todos/${todo.id}`, { + method: 'DELETE' + }); + + if (!response.ok) { + throw new Error('删除待办事项失败'); + } + + await this.fetchTodos(); + this.render(); + } catch (error) { + console.error('删除待办事项时发生错误:', error); + this.showError('删除待办事项失败，请稍后重试'); + } + } + }); + + // 添加完成/取消完成按钮事件 + const completeButton = todoElement.querySelector('.complete-button'); + completeButton.addEventListener('click', async () => { + const action = todo.completed ? '取消完成' : '标记完成'; + if (confirm(`确定要${action}这条待办事项吗？`)) { + try { + const response = await fetch(`/api/todos/${todo.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + ...todo, + completed: !todo.completed, + complete_time: !todo.completed ? new Date().toISOString() : null + }) + }); + + if (!response.ok) { + throw new Error(`${action}待办事项失败`); + } + + await this.fetchTodos(); + this.render(); + } catch (error) { + console.error(`${action}待办事项时发生错误:`, error); + this.showError(`${action}待办事项失败，请稍后重试`); + } + } + }); + + // 添加展开/收起按钮事件 + const toggleButton = todoElement.querySelector('.toggle-button'); + const descriptionContent = todoElement.querySelector('.description-content'); + const toggleIcon = toggleButton.querySelector('.toggle-icon'); + + // 移除可能存在的旧事件监听器 + const newToggleButton = toggleButton.cloneNode(true); + toggleButton.parentNode.replaceChild(newToggleButton, toggleButton); + + // 添加新的事件监听器 + newToggleButton.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + + const isExpanded = descriptionContent.classList.contains('expanded'); + + if (isExpanded) { + descriptionContent.classList.remove('expanded'); + newToggleButton.classList.remove('expanded'); + } else { + descriptionContent.classList.add('expanded'); + newToggleButton.classList.add('expanded'); + } + }); + todosContainer.appendChild(todoElement); }); + container.appendChild(treeContainer); container.appendChild(todosContainer); this.shadowRoot.appendChild(container); } diff --git a/XNSimHtml/utils/db-utils.js b/XNSimHtml/utils/db-utils.js index 397d2b1..620d64c 100644 --- a/XNSimHtml/utils/db-utils.js +++ b/XNSimHtml/utils/db-utils.js @@ -1247,18 +1247,30 @@ function addTodo(todoData) { // 打开数据库连接 const db = new Database(dbPath); + // 获取当前本地时间 + const now = new Date(); + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + const localDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; + const result = db.prepare(` INSERT INTO todos ( project, subproject, title, text, adduser, - completed, created_at, sche_time - ) VALUES (?, ?, ?, ?, ?, 0, CURRENT_TIMESTAMP, ?) + exeuser, completed, created_at, sche_time + ) VALUES (?, ?, ?, ?, ?, ?, 0, ?, ?) `).run( todoData.project || '其它', todoData.subproject || '其它', todoData.title, todoData.text || '', todoData.adduser || '系统', - todoData.sche_time || new Date().toISOString() + todoData.exeuser || null, + localDateTime, + todoData.sche_time || localDateTime ); db.close(); @@ -1294,6 +1306,16 @@ function updateTodoStatus(id, completed, exeuser, title, text, sche_time) { // 打开数据库连接 const db = new Database(dbPath); + // 获取当前本地时间 + const now = new Date(); + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + const localDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; + const result = db.prepare(` UPDATE todos SET completed = ?, @@ -1301,7 +1323,7 @@ function updateTodoStatus(id, completed, exeuser, title, text, sche_time) { title = ?, text = ?, sche_time = ?, - complete_time = CASE WHEN ? = 1 THEN CURRENT_TIMESTAMP ELSE complete_time END + complete_time = CASE WHEN ? = 1 THEN ? ELSE complete_time END WHERE id = ? `).run( completed ? 1 : 0, @@ -1310,6 +1332,7 @@ function updateTodoStatus(id, completed, exeuser, title, text, sche_time) { text || '', sche_time || null, completed ? 1 : 0, + completed ? localDateTime : null, id );