init
This commit is contained in:
eddy
@@ -0,0 +1,9 @@
|
|||||||
|
root = true
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
+199
@@ -0,0 +1,199 @@
|
|||||||
|
# Byte-compiled / optimized / DLL files
|
||||||
|
__pycache__/
|
||||||
|
*.py[cod]
|
||||||
|
*$py.class
|
||||||
|
|
||||||
|
# C extensions
|
||||||
|
*.so
|
||||||
|
|
||||||
|
# Distribution / packaging
|
||||||
|
.Python
|
||||||
|
build/
|
||||||
|
develop-eggs/
|
||||||
|
dist/
|
||||||
|
downloads/
|
||||||
|
eggs/
|
||||||
|
.eggs/
|
||||||
|
lib/
|
||||||
|
lib64/
|
||||||
|
parts/
|
||||||
|
sdist/
|
||||||
|
var/
|
||||||
|
wheels/
|
||||||
|
share/python-wheels/
|
||||||
|
*.egg-info/
|
||||||
|
.installed.cfg
|
||||||
|
*.egg
|
||||||
|
MANIFEST
|
||||||
|
|
||||||
|
# PyInstaller
|
||||||
|
# Usually these files are written by a python script from a template
|
||||||
|
# before PyInstaller builds the exe, so as to inject date/other infos into it.
|
||||||
|
*.manifest
|
||||||
|
*.spec
|
||||||
|
|
||||||
|
# Installer logs
|
||||||
|
pip-log.txt
|
||||||
|
pip-delete-this-directory.txt
|
||||||
|
|
||||||
|
# Unit test / coverage reports
|
||||||
|
htmlcov/
|
||||||
|
.tox/
|
||||||
|
.nox/
|
||||||
|
.coverage
|
||||||
|
.coverage.*
|
||||||
|
.cache
|
||||||
|
nosetests.xml
|
||||||
|
coverage.xml
|
||||||
|
*.cover
|
||||||
|
*.py,cover
|
||||||
|
.hypothesis/
|
||||||
|
.pytest_cache/
|
||||||
|
cover/
|
||||||
|
|
||||||
|
# Translations
|
||||||
|
*.mo
|
||||||
|
*.pot
|
||||||
|
|
||||||
|
# Django stuff:
|
||||||
|
*.log
|
||||||
|
local_settings.py
|
||||||
|
db.sqlite3
|
||||||
|
db.sqlite3-journal
|
||||||
|
|
||||||
|
# Flask stuff:
|
||||||
|
instance/
|
||||||
|
.webassets-cache
|
||||||
|
|
||||||
|
# Scrapy stuff:
|
||||||
|
.scrapy
|
||||||
|
|
||||||
|
# Sphinx documentation
|
||||||
|
docs/_build/
|
||||||
|
|
||||||
|
# PyBuilder
|
||||||
|
.pybuilder/
|
||||||
|
target/
|
||||||
|
|
||||||
|
# Jupyter Notebook
|
||||||
|
.ipynb_checkpoints
|
||||||
|
|
||||||
|
# IPython
|
||||||
|
profile_default/
|
||||||
|
ipython_config.py
|
||||||
|
|
||||||
|
# pyenv
|
||||||
|
# For a library or package, you might want to ignore these files since the code is
|
||||||
|
# intended to run in multiple environments; otherwise, check them in:
|
||||||
|
# .python-version
|
||||||
|
|
||||||
|
# pipenv
|
||||||
|
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
|
||||||
|
# However, in case of collaboration, if having platform-specific dependencies or dependencies
|
||||||
|
# having no cross-platform support, pipenv may install dependencies that don't work, or not
|
||||||
|
# install all needed dependencies.
|
||||||
|
#Pipfile.lock
|
||||||
|
|
||||||
|
# UV
|
||||||
|
# Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
|
||||||
|
# This is especially recommended for binary packages to ensure reproducibility, and is more
|
||||||
|
# commonly ignored for libraries.
|
||||||
|
#uv.lock
|
||||||
|
|
||||||
|
# poetry
|
||||||
|
# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
|
||||||
|
# This is especially recommended for binary packages to ensure reproducibility, and is more
|
||||||
|
# commonly ignored for libraries.
|
||||||
|
# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
|
||||||
|
#poetry.lock
|
||||||
|
|
||||||
|
# pdm
|
||||||
|
# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
|
||||||
|
#pdm.lock
|
||||||
|
# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
|
||||||
|
# in version control.
|
||||||
|
# https://pdm.fming.dev/latest/usage/project/#working-with-version-control
|
||||||
|
.pdm.toml
|
||||||
|
.pdm-python
|
||||||
|
.pdm-build/
|
||||||
|
|
||||||
|
# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
|
||||||
|
__pypackages__/
|
||||||
|
|
||||||
|
# Celery stuff
|
||||||
|
celerybeat-schedule
|
||||||
|
celerybeat.pid
|
||||||
|
|
||||||
|
# SageMath parsed files
|
||||||
|
*.sage.py
|
||||||
|
|
||||||
|
# Environments
|
||||||
|
.env
|
||||||
|
.venv
|
||||||
|
env/
|
||||||
|
venv/
|
||||||
|
ENV/
|
||||||
|
env.bak/
|
||||||
|
venv.bak/
|
||||||
|
|
||||||
|
# Spyder project settings
|
||||||
|
.spyderproject
|
||||||
|
.spyproject
|
||||||
|
|
||||||
|
# Rope project settings
|
||||||
|
.ropeproject
|
||||||
|
|
||||||
|
# mkdocs documentation
|
||||||
|
/site
|
||||||
|
|
||||||
|
# mypy
|
||||||
|
.mypy_cache/
|
||||||
|
.dmypy.json
|
||||||
|
dmypy.json
|
||||||
|
|
||||||
|
# Pyre type checker
|
||||||
|
.pyre/
|
||||||
|
|
||||||
|
# pytype static type analyzer
|
||||||
|
.pytype/
|
||||||
|
|
||||||
|
# Cython debug symbols
|
||||||
|
cython_debug/
|
||||||
|
|
||||||
|
# PyCharm
|
||||||
|
# JetBrains specific template is maintained in a separate JetBrains.gitignore that can
|
||||||
|
# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
|
||||||
|
# and can be added to the global gitignore or merged into this file. For a more nuclear
|
||||||
|
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
|
||||||
|
#.idea/
|
||||||
|
|
||||||
|
# Abstra
|
||||||
|
# Abstra is an AI-powered process automation framework.
|
||||||
|
# Ignore directories containing user credentials, local state, and settings.
|
||||||
|
# Learn more at https://abstra.io/docs
|
||||||
|
.abstra/
|
||||||
|
|
||||||
|
# Visual Studio Code
|
||||||
|
# Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore
|
||||||
|
# that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
|
||||||
|
# and can be added to the global gitignore or merged into this file. However, if you prefer,
|
||||||
|
# you could uncomment the following to ignore the enitre vscode folder
|
||||||
|
# .vscode/
|
||||||
|
|
||||||
|
# Ruff stuff:
|
||||||
|
.ruff_cache/
|
||||||
|
|
||||||
|
# PyPI configuration file
|
||||||
|
.pypirc
|
||||||
|
|
||||||
|
# Cursor
|
||||||
|
# Cursor is an AI-powered code editor. `.cursorignore` specifies files/directories to
|
||||||
|
# exclude from AI features like autocomplete and code analysis. Recommended for sensitive data
|
||||||
|
# refer to https://docs.cursor.com/context/ignore-files
|
||||||
|
.cursorignore
|
||||||
|
.cursorindexingignore
|
||||||
|
|
||||||
|
# Node.js tooling
|
||||||
|
node_modules/
|
||||||
|
.vite/
|
||||||
|
coverage/
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
{ "singleQuote": true, "trailingComma": "all", "printWidth": 100 }
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
## 1.0.0 - 2026-07-19
|
||||||
|
|
||||||
|
- Refactored the single-file application into native ES Modules.
|
||||||
|
- Preserved existing storage keys, seed tasks, and version 1.0 backup format.
|
||||||
|
- Replaced inline handlers with static listeners and delegated actions.
|
||||||
|
- Added resilient normalization, scoped rendering, i18n interpolation, and automated tests.
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2025 ghuang.top
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@@ -1,2 +1,214 @@
|
|||||||
# Tasks
|
# 任务管理系统
|
||||||
|
|
||||||
|
一个基于浏览器运行的现代化任务管理系统，支持任务生命周期管理、团队协作、进度跟踪、数据备份和中英文界面。项目已从单体脚本重构为原生 ES Modules，并兼容已有任务数据、偏好设置和 1.0 版 JSON 备份。
|
||||||
|
|
||||||
|
## 核心特性
|
||||||
|
|
||||||
|
### 任务管理
|
||||||
|
|
||||||
|
- **三状态管理**：待办事项、进行中、已完成
|
||||||
|
- **双重描述系统**：任务描述（目标要求）和任务进展（实时状态）
|
||||||
|
- **可视化进度**：使用 0–100% 进度条跟踪任务
|
||||||
|
- **优先级管理**：高、中、低三级优先级及颜色标识
|
||||||
|
- **截止日期**：支持到期提醒和过期任务标识
|
||||||
|
- **任务置顶**：重要任务在所有排序方式中优先显示
|
||||||
|
|
||||||
|
### 协作与记录
|
||||||
|
|
||||||
|
- **人员管理**：支持负责人和协作者
|
||||||
|
- **时间轴记录**：
|
||||||
|
- 自动记录状态、进度、负责人、截止日期、优先级和进展内容变更
|
||||||
|
- 支持手动添加、编辑和删除记录
|
||||||
|
- 使用不同类型区分系统记录和手动记录；编辑系统记录会将其转为手动记录，并记在当前负责人名下
|
||||||
|
- 编辑已有的手动记录只更新内容，原记录人保持不变
|
||||||
|
- 记录按时间倒序展示，同一天内新增的记录也排在前面
|
||||||
|
|
||||||
|
### 搜索、排序与显示
|
||||||
|
|
||||||
|
- **13 种排序模式**：支持标题、数字、日期、优先级、进度和创建时间排序
|
||||||
|
- **实时搜索**：搜索标题、描述、进展、负责人、协作者、到期日期、优先级和时间轴内容，界面固定文字不参与匹配；无匹配结果时栏内给出提示
|
||||||
|
- **任务隐藏**：待办和已完成任务可单独隐藏，并可批量显示或隐藏
|
||||||
|
- **国际化**：支持中英文界面切换
|
||||||
|
|
||||||
|
### 数据与兼容性
|
||||||
|
|
||||||
|
- **本地存储**：基于 `localStorage`，无需后端服务
|
||||||
|
- **实时保存**：每次操作后自动持久化
|
||||||
|
- **导入导出**：支持 JSON 覆盖导入和合并导入
|
||||||
|
- **向后兼容**：保留原有存储键和 1.0 版备份格式
|
||||||
|
- **容错处理**：损坏的任务原始数据会备份；存储不可用时当前页面会继续以内存模式运行
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
### 安装与运行
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
打开 `serve` 输出的地址即可使用。由于应用采用原生 ES Modules，必须通过 HTTP 服务器访问，不支持使用 `file://` 直接打开 `src/index.html`。
|
||||||
|
|
||||||
|
也可以使用其他静态服务器：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python -m http.server 8000 --directory src
|
||||||
|
# 或
|
||||||
|
npx http-server src
|
||||||
|
```
|
||||||
|
|
||||||
|
### 质量检查
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run lint
|
||||||
|
npm run format:check
|
||||||
|
npm test
|
||||||
|
```
|
||||||
|
|
||||||
|
如需自动格式化：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run format
|
||||||
|
```
|
||||||
|
|
||||||
|
### 系统要求
|
||||||
|
|
||||||
|
- 支持原生 ES Modules 的现代浏览器
|
||||||
|
- 支持 `localStorage`（通常约 5–10 MB）
|
||||||
|
- 可访问 Bootstrap 和 Font Awesome 的 CDN 资源
|
||||||
|
|
||||||
|
## 使用指南
|
||||||
|
|
||||||
|
### 基本操作
|
||||||
|
|
||||||
|
1. **添加任务**：填写标题、描述、进展、优先级等信息。
|
||||||
|
2. **编辑任务**：点击任务卡片上的编辑按钮。
|
||||||
|
3. **状态管理**：编辑任务并更改状态。
|
||||||
|
4. **进度跟踪**：更新任务进度和进展内容，系统会自动生成时间轴记录。
|
||||||
|
5. **任务置顶**：点击图钉按钮，使重要任务优先显示。
|
||||||
|
|
||||||
|
### 任务隐藏
|
||||||
|
|
||||||
|
- **适用范围**：隐藏仅对待办和已完成任务生效；进行中任务即使被标记隐藏也会正常显示、正常排序。
|
||||||
|
- **单个隐藏**：编辑任务并勾选“隐藏此任务”，或点击卡片上的隐藏按钮。
|
||||||
|
- **批量查看**：待办栏和已完成栏的眼睛按钮可显示或隐藏被隐藏的任务。
|
||||||
|
- **排序规则**：被隐藏的待办和已完成任务在排序结果中自动排到非隐藏任务之后。
|
||||||
|
- **视觉区分**：显示隐藏任务时，卡片以半透明样式呈现。
|
||||||
|
- **数量统计**：栏目标题的计数与当前实际显示的卡片一致，会随搜索结果变化。
|
||||||
|
|
||||||
|
### 数据备份
|
||||||
|
|
||||||
|
- 导出的文件名格式为 `backup-tasks-yyyy-mm-dd.json`。
|
||||||
|
- 覆盖导入会替换任务及兼容的排序偏好。
|
||||||
|
- 合并导入会保留现有任务，并按 `title|status|createdDate` 跳过重复项；新导入任务会分配唯一 ID。
|
||||||
|
|
||||||
|
## 技术架构
|
||||||
|
|
||||||
|
### 技术栈
|
||||||
|
|
||||||
|
- **前端**：HTML5、CSS3、JavaScript（ES Modules）
|
||||||
|
- **UI 框架**：Bootstrap 5.3.3
|
||||||
|
- **图标**：Font Awesome 6.7.2
|
||||||
|
- **存储**：`localStorage`
|
||||||
|
- **测试**：Vitest + jsdom
|
||||||
|
- **代码质量**：ESLint + Prettier
|
||||||
|
- **部署方式**：纯静态部署
|
||||||
|
|
||||||
|
### 项目结构
|
||||||
|
|
||||||
|
- `src/index.html`：应用页面和模态框结构
|
||||||
|
- `src/css/styles.css`：应用样式和响应式布局
|
||||||
|
- `src/js/main.js`：初始化和委托事件处理
|
||||||
|
- `src/js/config.js`：状态、排序选项、存储键和共享常量
|
||||||
|
- `src/js/utils.js`：ID、日期、到期状态和 HTML 转义工具
|
||||||
|
- `src/js/task-model.js`：任务和偏好数据标准化
|
||||||
|
- `src/js/store.js`：应用状态及持久化变更
|
||||||
|
- `src/js/storage.js`：唯一直接访问 `localStorage` 的应用模块
|
||||||
|
- `src/js/sort.js`：任务比较器和 13 种排序模式
|
||||||
|
- `src/js/render.js`：任务、时间轴、计数和排序选项渲染
|
||||||
|
- `src/js/modal.js`：任务表单填充和保存
|
||||||
|
- `src/js/timeline.js`：手动及系统时间轴记录
|
||||||
|
- `src/js/import-export.js`：1.0 版备份验证、导入和导出
|
||||||
|
- `src/js/notify.js`：通知和截止日期提醒
|
||||||
|
- `src/js/seed-data.js`：首次运行时的示例任务
|
||||||
|
- `src/js/i18n/`：中英文词典及插值逻辑
|
||||||
|
- `test/`：单元测试和旧版数据兼容性测试
|
||||||
|
|
||||||
|
## 本地存储
|
||||||
|
|
||||||
|
应用保留以下六个原有存储键：
|
||||||
|
|
||||||
|
- `tasks`
|
||||||
|
- `taskSortOrders`
|
||||||
|
- `showHiddenCompletedTasks`
|
||||||
|
- `showHiddenTodoTasks`
|
||||||
|
- `tasksInitialized`
|
||||||
|
- `tasksCorruptedBackup`
|
||||||
|
|
||||||
|
任务、排序和显示偏好使用 JSON 编码。若任务列表格式损坏，原始文本会保存到 `tasksCorruptedBackup`。当浏览器存储不可用或空间不足时，应用会在当前页面会话中继续运行，但刷新后内存中的改动会丢失。
|
||||||
|
|
||||||
|
## 备份格式
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"version": "1.0",
|
||||||
|
"exportDate": "2026-07-20T00:00:00.000Z",
|
||||||
|
"localDate": "2026-07-20",
|
||||||
|
"taskCount": 1,
|
||||||
|
"data": {
|
||||||
|
"tasks": [],
|
||||||
|
"sortOrders": {
|
||||||
|
"todo": "default",
|
||||||
|
"inProgress": "default",
|
||||||
|
"completed": "default"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 任务数据结构
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
id: Number, // 唯一标识
|
||||||
|
title: String, // 任务标题
|
||||||
|
description: String, // 任务描述
|
||||||
|
progressNotes: String, // 任务进展
|
||||||
|
status: String, // todo | inProgress | completed
|
||||||
|
progress: Number, // 0–100
|
||||||
|
assignee: String, // 负责人
|
||||||
|
collaborators: Array, // 协作者
|
||||||
|
dueDate: String, // 截止日期
|
||||||
|
priority: String, // low | medium | high
|
||||||
|
language: String, // zh | en
|
||||||
|
isPinned: Boolean, // 是否置顶
|
||||||
|
isHidden: Boolean, // 是否隐藏
|
||||||
|
createdDate: String, // 创建时间
|
||||||
|
timeline: Array // 时间轴记录
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 故障排除
|
||||||
|
|
||||||
|
- **页面无法直接打开**：请使用 HTTP 服务器运行，原生 ES Modules 不支持 `file://` 加载。
|
||||||
|
- **数据丢失**：检查浏览器是否允许 `localStorage`，并定期导出备份。
|
||||||
|
- **导入失败**：确认文件为 1.0 版 JSON 备份，并检查任务字段和日期格式。
|
||||||
|
- **界面异常**：检查 Bootstrap 和 Font Awesome CDN 是否可访问，并尝试清空缓存。
|
||||||
|
- **性能问题**：任务数量较多时，建议归档已完成任务并清理不必要的时间轴记录。
|
||||||
|
|
||||||
|
## 贡献指南
|
||||||
|
|
||||||
|
欢迎提交 Issue 和 Pull Request。
|
||||||
|
|
||||||
|
- **问题反馈**：请详细描述问题场景和复现步骤。
|
||||||
|
- **功能建议**：请说明需求和使用场景。
|
||||||
|
- **代码贡献**：遵循现有代码风格，并运行 lint、格式检查和测试。
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
- **版本**：v1.0.0
|
||||||
|
- **重构日期**：2026 年 7 月
|
||||||
|
|||||||
@@ -0,0 +1,173 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
|
||||||
|
set -Eeuo pipefail
|
||||||
|
|
||||||
|
REPO_URL="https://github.com/ghuang-top/Tasks"
|
||||||
|
REPO_ARCHIVE_URL="${REPO_URL}/archive/refs/heads/main.tar.gz"
|
||||||
|
TARGET_DIR="/root/data/docker_data/Nginx/html/tasks"
|
||||||
|
|
||||||
|
RED='\033[0;31m'
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
YELLOW='\033[0;33m'
|
||||||
|
BLUE='\033[0;34m'
|
||||||
|
CYAN='\033[0;36m'
|
||||||
|
NC='\033[0m'
|
||||||
|
|
||||||
|
print_info() {
|
||||||
|
echo -e "${BLUE}[INFO]${NC} $1"
|
||||||
|
}
|
||||||
|
|
||||||
|
print_success() {
|
||||||
|
echo -e "${GREEN}[SUCCESS]${NC} $1"
|
||||||
|
}
|
||||||
|
|
||||||
|
print_warning() {
|
||||||
|
echo -e "${YELLOW}[WARNING]${NC} $1"
|
||||||
|
}
|
||||||
|
|
||||||
|
print_error() {
|
||||||
|
echo -e "${RED}[ERROR]${NC} $1" >&2
|
||||||
|
}
|
||||||
|
|
||||||
|
check_root() {
|
||||||
|
if [[ ${EUID} -ne 0 ]]; then
|
||||||
|
print_error "此脚本需要 root 权限运行"
|
||||||
|
print_info "请切换到 root 用户，或使用 sudo bash 执行脚本"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
check_dependencies() {
|
||||||
|
local command_name
|
||||||
|
for command_name in curl tar find; do
|
||||||
|
if ! command -v "$command_name" >/dev/null 2>&1; then
|
||||||
|
print_error "缺少必要命令: $command_name"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
}
|
||||||
|
|
||||||
|
prepare_target() {
|
||||||
|
if [[ -e "$TARGET_DIR" && ! -d "$TARGET_DIR" ]]; then
|
||||||
|
print_error "目标路径存在，但不是文件夹: $TARGET_DIR"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
mkdir -p "$TARGET_DIR"
|
||||||
|
}
|
||||||
|
|
||||||
|
clear_target() {
|
||||||
|
prepare_target
|
||||||
|
print_info "正在清空目标目录 $TARGET_DIR ..."
|
||||||
|
|
||||||
|
find "$TARGET_DIR" -mindepth 1 -maxdepth 1 -exec rm -rf -- {} +
|
||||||
|
|
||||||
|
print_success "目标目录已清空"
|
||||||
|
}
|
||||||
|
|
||||||
|
deploy() (
|
||||||
|
local temp_dir archive_file source_dir
|
||||||
|
temp_dir=$(mktemp -d)
|
||||||
|
archive_file="$temp_dir/repository.tar.gz"
|
||||||
|
trap 'rm -rf -- "$temp_dir"' EXIT
|
||||||
|
|
||||||
|
print_info "正在从 GitHub 下载最新版本..."
|
||||||
|
print_info "仓库地址: $REPO_URL"
|
||||||
|
if ! curl -fL --retry 3 --connect-timeout 15 "$REPO_ARCHIVE_URL" -o "$archive_file"; then
|
||||||
|
print_error "仓库下载失败，请检查网络连接及 main 分支是否存在"
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
print_info "正在解压并验证部署文件..."
|
||||||
|
if ! tar -xzf "$archive_file" -C "$temp_dir"; then
|
||||||
|
print_error "仓库压缩包解压失败"
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
source_dir=$(find "$temp_dir" -mindepth 2 -maxdepth 2 -type d -name src -print -quit)
|
||||||
|
if [[ -z "$source_dir" || ! -f "$source_dir/index.html" || ! -d "$source_dir/js" || ! -d "$source_dir/css" ]]; then
|
||||||
|
print_error "仓库中缺少 src/index.html、src/js 或 src/css，已取消部署"
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
clear_target
|
||||||
|
|
||||||
|
print_info "正在拷贝网站文件到 $TARGET_DIR ..."
|
||||||
|
cp -a "$source_dir/." "$TARGET_DIR/"
|
||||||
|
|
||||||
|
print_success "Tasks 部署完成"
|
||||||
|
print_info "部署目录: $TARGET_DIR"
|
||||||
|
)
|
||||||
|
|
||||||
|
confirm_clear() {
|
||||||
|
local answer
|
||||||
|
print_warning "将清空 $TARGET_DIR 中的所有内容，此操作不可恢复"
|
||||||
|
read -r -p "确认继续？[y/N]: " answer
|
||||||
|
if [[ "$answer" =~ ^[Yy]$ ]]; then
|
||||||
|
clear_target
|
||||||
|
else
|
||||||
|
print_info "已取消清空"
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
show_menu() {
|
||||||
|
clear 2>/dev/null || true
|
||||||
|
echo -e "${CYAN}============================================${NC}"
|
||||||
|
echo " Tasks 一键安装脚本"
|
||||||
|
echo -e "${CYAN}============================================${NC}"
|
||||||
|
echo -e "${GREEN}1.${NC} 下载并安装最新版本"
|
||||||
|
echo -e "${GREEN}2.${NC} 清空网站文件"
|
||||||
|
echo -e "${GREEN}0.${NC} 退出"
|
||||||
|
echo ""
|
||||||
|
}
|
||||||
|
|
||||||
|
run_menu() {
|
||||||
|
local choice
|
||||||
|
while true; do
|
||||||
|
show_menu
|
||||||
|
read -r -p "请选择操作 [0-2]: " choice
|
||||||
|
case "$choice" in
|
||||||
|
1)
|
||||||
|
# 部署失败时回到菜单，而不是因 set -e 直接退出脚本
|
||||||
|
deploy || print_warning "部署失败，可稍后重试"
|
||||||
|
read -r -p "按 Enter 键继续..."
|
||||||
|
;;
|
||||||
|
2)
|
||||||
|
confirm_clear
|
||||||
|
read -r -p "按 Enter 键继续..."
|
||||||
|
;;
|
||||||
|
0)
|
||||||
|
print_info "退出脚本"
|
||||||
|
return 0
|
||||||
|
;;
|
||||||
|
*)
|
||||||
|
print_error "无效选择，请重新输入"
|
||||||
|
sleep 1
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
done
|
||||||
|
}
|
||||||
|
|
||||||
|
main() {
|
||||||
|
check_root
|
||||||
|
check_dependencies
|
||||||
|
|
||||||
|
case "${1:-menu}" in
|
||||||
|
deploy)
|
||||||
|
deploy
|
||||||
|
;;
|
||||||
|
clear)
|
||||||
|
confirm_clear
|
||||||
|
;;
|
||||||
|
menu)
|
||||||
|
run_menu
|
||||||
|
;;
|
||||||
|
*)
|
||||||
|
print_error "未知参数: $1"
|
||||||
|
echo "用法: $0 [deploy|clear|menu]" >&2
|
||||||
|
exit 1
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
}
|
||||||
|
|
||||||
|
main "$@"
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
export default [
|
||||||
|
{ ignores: ['node_modules/**'] },
|
||||||
|
js.configs.recommended,
|
||||||
|
{
|
||||||
|
files: ['src/**/*.js'],
|
||||||
|
languageOptions: { globals: { ...globals.browser, bootstrap: 'readonly' } },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['test/**/*.js'],
|
||||||
|
languageOptions: { globals: { ...globals.node, ...globals.browser } },
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
## 中文
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
## 新完成
|
||||||
|
|
||||||
|
## 进行中
|
||||||
|
- 1. 所有设备相机参数标准化
|
||||||
|
进展：仅剩DieBond贴片相机待确认。
|
||||||
|
|
||||||
|
- 2. DieBond设备照明优化
|
||||||
|
- I. 定制组合光源：同轴光+环形光
|
||||||
|
- II. 采购更窄、更亮的侧面光源，以解决支架白边问题
|
||||||
|
进展：配置已与供应商确认，预计2025年7月4日发货。
|
||||||
|
|
||||||
|
- 3. DieBond和ClipBond软件界面中英文翻译更新（SG-TATA）
|
||||||
|
进展：SG-TATA GUI 的中英文翻译已完成。未来更新杨杰的代码后，需要重新进行翻译（任务量很少）。
|
||||||
|
|
||||||
|
## 下一步计划
|
||||||
|
- 1. 所有设备相机手册（校准、位置引导、检测）
|
||||||
|
- 2. 开发 TaTa SECS/GEM & Map 软件。
|
||||||
|
- 3. 跟进 TaTa 软件授权：
|
||||||
|
- I. Halcon
|
||||||
|
- II. CIMConnect RT
|
||||||
|
- III. CIMConnect CIM142
|
||||||
|
- IV. Visual Studio 2019
|
||||||
|
- V. Microsoft .NET Runtime（免费）
|
||||||
|
- 4. 完成 TaTa SECS/GEM 通讯手册，用于支持客户集成机器的 SECS/GEM 功能。
|
||||||
|
|
||||||
|
- 5. 扫码枪是否需要添加: 用于获取 Wafer 和 Strip 的序列号（涉及 SECS/GEM 相关内容）。
|
||||||
|
- 6. 日志文件优化：: 为 LogFile 添加翻译（当前日志文件为中文），格式如下：日期：中文＋英文
|
||||||
|
- 7. 光源优化（ClipBond 点胶相机）: 添加侧灯，以进一步优化芯片上胶点的检测图像效果。
|
||||||
|
- 8. 光源优化（ClipBond 向下看相机）: 添加侧灯。
|
||||||
|
- 9. 光源优化（DieBond Pick Camera）: 添加侧灯。当前使用的光源为手工焊接的环光。需要找灵猴定制标准化侧灯（非紧急事项）。
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## 英文
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
## Newly Completed
|
||||||
|
|
||||||
|
## Work In Progress
|
||||||
|
- 1. All Machines Camera parameter standardization
|
||||||
|
Progress: Only DieBond Place camera remains to be confirmed.
|
||||||
|
|
||||||
|
- 2. DieBond machine lighting optimization (DieBond Place Camera)
|
||||||
|
- I. Custom combination light source: coaxial light + ring light
|
||||||
|
- II. Purchase narrower and brighter side lighting to solve the white edge problem of the frame
|
||||||
|
Progress: Configuration has been confirmed with the supplier, expected delivery on July 7, 2025.
|
||||||
|
|
||||||
|
- 3. DieBond and ClipBond Software GUI Chinese-English translation update (SG-TATA)
|
||||||
|
Progress: The Chinese and English translations for the SG-TATA GUI have been completed. After updating to Yang Jie's code in the future, the translations will need to be redone (little workload).
|
||||||
|
|
||||||
|
## Next To Do
|
||||||
|
- 1. All Machines Camera Manual (Calibration, Position Guidance, Inspection)
|
||||||
|
- 2. Develop TaTa SECS/GEM & Map software.
|
||||||
|
- 3. Follow up on TaTa software licensing:
|
||||||
|
- I. Halcon
|
||||||
|
- II. CIMConnect RT
|
||||||
|
- III. CIMConnect CIM142
|
||||||
|
- IV. Visual Studio 2019
|
||||||
|
- V. Microsoft .NET Runtime (free)
|
||||||
|
- 4. Complete TaTa SECS/GEM communication manual to support customers in integrating machine SECS/GEM functionality.
|
||||||
|
|
||||||
|
- 5. Whether to add barcode scanner: for obtaining Wafer and Strip serial numbers (related to SECS/GEM content).
|
||||||
|
- 6. Log file optimization: Add translation for LogFile (current log files are in Chinese), format as follows: Date: Chinese + English
|
||||||
|
- 7. Lighting optimization (ClipBond dispensing camera): Add side lighting to further optimize chip adhesive point detection image quality.
|
||||||
|
- 8. Lighting optimization (ClipBond downward-looking camera): Add side lighting.
|
||||||
|
- 9. Lighting optimization (DieBond Pick Camera): Add side lighting. Currently using manually welded ring light. Need to find Linghou to customize standardized side lighting (non-urgent task).
|
||||||
|
|
||||||
|
```
|
||||||
Generated
+3655
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "task-manager",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"start": "serve src",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"format": "prettier --write .",
|
||||||
|
"format:check": "prettier --check .",
|
||||||
|
"test": "vitest run --environment jsdom"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "latest",
|
||||||
|
"eslint": "latest",
|
||||||
|
"globals": "latest",
|
||||||
|
"jsdom": "latest",
|
||||||
|
"prettier": "latest",
|
||||||
|
"serve": "latest",
|
||||||
|
"vitest": "latest"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
/* Base */
|
||||||
|
:root {
|
||||||
|
--primary: #0d6efd;
|
||||||
|
--todo: #6c757d;
|
||||||
|
--progress: #ffc107;
|
||||||
|
--complete: #198754;
|
||||||
|
--priority-low: #198754;
|
||||||
|
--priority-medium: #fd7e14;
|
||||||
|
--priority-high: #dc3545;
|
||||||
|
--danger: #dc3545;
|
||||||
|
--warning: #fd7e14;
|
||||||
|
--surface: #fff;
|
||||||
|
--surface-raised: #fffffff0;
|
||||||
|
--background: #f4f6fa;
|
||||||
|
--overdue-background: #fff5f5;
|
||||||
|
--due-soon-background: #fff8f0;
|
||||||
|
--muted: #6c757d;
|
||||||
|
--timeline: #dee2e6;
|
||||||
|
--header-start: #667eea;
|
||||||
|
--header-end: #764ba2;
|
||||||
|
--shadow-subtle: #00000012;
|
||||||
|
--shadow-hover: #0002;
|
||||||
|
--shadow-pinned: #ffc10744;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: var(--background);
|
||||||
|
font-family: 'Microsoft YaHei', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
.task-header {
|
||||||
|
background: linear-gradient(135deg, var(--header-start), var(--header-end));
|
||||||
|
color: var(--surface);
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.task-header h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.status-column {
|
||||||
|
background: var(--surface);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 2px 12px var(--shadow-subtle);
|
||||||
|
min-height: 12rem;
|
||||||
|
}
|
||||||
|
.status-column-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.status-column-header h4 {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.sort-selector {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border: 1px solid var(--timeline);
|
||||||
|
border-radius: 0.35rem;
|
||||||
|
max-width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Task cards */
|
||||||
|
.task-card {
|
||||||
|
position: relative;
|
||||||
|
border-left: 4px solid var(--primary);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.task-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 14px var(--shadow-hover);
|
||||||
|
}
|
||||||
|
.task-card.todo {
|
||||||
|
border-left-color: var(--todo);
|
||||||
|
}
|
||||||
|
.task-card.inProgress {
|
||||||
|
border-left-color: var(--progress);
|
||||||
|
}
|
||||||
|
.task-card.completed {
|
||||||
|
border-left-color: var(--complete);
|
||||||
|
}
|
||||||
|
.task-card.overdue {
|
||||||
|
border-left-color: var(--danger) !important;
|
||||||
|
background: var(--overdue-background);
|
||||||
|
}
|
||||||
|
.task-card.due-soon {
|
||||||
|
border-left-color: var(--warning) !important;
|
||||||
|
background: var(--due-soon-background);
|
||||||
|
}
|
||||||
|
.task-card.hidden-task {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.task-card.pinned {
|
||||||
|
border-top: 3px solid var(--progress);
|
||||||
|
box-shadow: 0 4px 12px var(--shadow-pinned);
|
||||||
|
}
|
||||||
|
.task-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.35rem;
|
||||||
|
top: 0.35rem;
|
||||||
|
z-index: 2;
|
||||||
|
background: var(--surface-raised);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.task-card:hover .task-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.task-actions .btn {
|
||||||
|
padding: 0.25rem 0.4rem;
|
||||||
|
}
|
||||||
|
.priority-badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
color: var(--surface);
|
||||||
|
}
|
||||||
|
.priority-low-badge {
|
||||||
|
background: var(--priority-low);
|
||||||
|
}
|
||||||
|
.priority-medium-badge {
|
||||||
|
background: var(--priority-medium);
|
||||||
|
}
|
||||||
|
.priority-high-badge {
|
||||||
|
background: var(--priority-high);
|
||||||
|
}
|
||||||
|
.progress-custom {
|
||||||
|
height: 0.45rem;
|
||||||
|
}
|
||||||
|
.person-badge {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin: 0.1rem;
|
||||||
|
}
|
||||||
|
.task-description-display {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline */
|
||||||
|
.timeline-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
.timeline:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0.5rem;
|
||||||
|
inset-block: 0;
|
||||||
|
width: 2px;
|
||||||
|
background: var(--timeline);
|
||||||
|
}
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.timeline-item:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -0.72rem;
|
||||||
|
top: 0.35rem;
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
.timeline-content,
|
||||||
|
.timeline-form,
|
||||||
|
.timeline-edit-form {
|
||||||
|
background: var(--background);
|
||||||
|
padding: 0.65rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.timeline-date {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.timeline-item-actions {
|
||||||
|
float: right;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.timeline-item:hover .timeline-item-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overlays and controls */
|
||||||
|
.notification {
|
||||||
|
position: fixed;
|
||||||
|
right: 1rem;
|
||||||
|
top: 1rem;
|
||||||
|
z-index: 2000;
|
||||||
|
max-width: min(28rem, 90vw);
|
||||||
|
}
|
||||||
|
.visibility-toggle {
|
||||||
|
padding: 0.1rem;
|
||||||
|
}
|
||||||
|
.empty-state {
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.task-actions,
|
||||||
|
.timeline-item-actions {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.toolbar .btn {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.status-column {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.task-header h1 {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
.status-column-header {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.sort-selector {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
.task-actions .btn {
|
||||||
|
min-width: 2.25rem;
|
||||||
|
min-height: 2.25rem;
|
||||||
|
}
|
||||||
|
.toolbar .btn span:not(#langBtn) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
+261
@@ -0,0 +1,261 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>任务管理系统</title>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/svg+xml"
|
||||||
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM7 17l-2-2 1.4-1.4.6.6 3.6-3.6L12 12l-5 5zm12-8h-8V7h8v2z'/%3E%3C/svg%3E"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link href="css/styles.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container-fluid py-3">
|
||||||
|
<header class="task-header text-center">
|
||||||
|
<h1><i class="fas fa-tasks"></i> <span data-key="appTitle">任务管理系统</span></h1>
|
||||||
|
</header>
|
||||||
|
<section class="toolbar row g-2 mb-4">
|
||||||
|
<div class="col-lg-7 d-flex flex-wrap gap-2">
|
||||||
|
<button id="addTaskBtn" class="btn btn-primary">
|
||||||
|
<i class="fas fa-plus"></i> <span data-key="addTask"></span></button
|
||||||
|
><button id="exportBtn" class="btn btn-success">
|
||||||
|
<i class="fas fa-download"></i> <span data-key="exportData"></span></button
|
||||||
|
><button id="importBtn" class="btn btn-warning">
|
||||||
|
<i class="fas fa-upload"></i> <span data-key="importData"></span></button
|
||||||
|
><button id="languageBtn" class="btn btn-secondary">
|
||||||
|
<i class="fas fa-language"></i> <span id="langBtn">EN</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="searchInput" class="form-control" data-key-placeholder="searchPlaceholder" />
|
||||||
|
<button
|
||||||
|
id="searchBtn"
|
||||||
|
class="btn btn-outline-secondary"
|
||||||
|
type="button"
|
||||||
|
aria-label="Search"
|
||||||
|
>
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<input type="file" id="fileInput" hidden accept=".json" />
|
||||||
|
<section class="row g-3" id="taskBoard">
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="status-column">
|
||||||
|
<div class="status-column-header">
|
||||||
|
<h4>
|
||||||
|
<i class="fas fa-list"></i> <span data-key="todo"></span> (<span id="todoCount"
|
||||||
|
>0</span
|
||||||
|
>)
|
||||||
|
<button
|
||||||
|
class="visibility-toggle btn btn-sm btn-link"
|
||||||
|
data-action="toggle-show-hidden"
|
||||||
|
data-status="todo"
|
||||||
|
>
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</h4>
|
||||||
|
<select class="sort-selector" id="todoSort" data-status="todo"></select>
|
||||||
|
</div>
|
||||||
|
<div id="todoTasks" class="task-list" data-status="todo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="status-column">
|
||||||
|
<div class="status-column-header">
|
||||||
|
<h4 class="text-warning">
|
||||||
|
<i class="fas fa-clock"></i> <span data-key="inProgress"></span> (<span
|
||||||
|
id="inProgressCount"
|
||||||
|
>0</span
|
||||||
|
>)
|
||||||
|
</h4>
|
||||||
|
<select class="sort-selector" id="inProgressSort" data-status="inProgress"></select>
|
||||||
|
</div>
|
||||||
|
<div id="inProgressTasks" class="task-list" data-status="inProgress"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="status-column">
|
||||||
|
<div class="status-column-header">
|
||||||
|
<h4 class="text-success">
|
||||||
|
<i class="fas fa-check-circle"></i> <span data-key="completed"></span> (<span
|
||||||
|
id="completedCount"
|
||||||
|
>0</span
|
||||||
|
>)
|
||||||
|
<button
|
||||||
|
class="visibility-toggle btn btn-sm btn-link"
|
||||||
|
data-action="toggle-show-hidden"
|
||||||
|
data-status="completed"
|
||||||
|
>
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</h4>
|
||||||
|
<select class="sort-selector" id="completedSort" data-status="completed"></select>
|
||||||
|
</div>
|
||||||
|
<div id="completedTasks" class="task-list" data-status="completed"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<div class="modal fade" id="taskModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 id="modalTitle" class="modal-title" data-key="addTask"></h5>
|
||||||
|
<button class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="taskForm">
|
||||||
|
<input type="hidden" id="taskId" />
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-md-8">
|
||||||
|
<label data-key="taskTitleLabel"></label
|
||||||
|
><input id="taskTitle" class="form-control" required />
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label data-key="statusLabel"></label
|
||||||
|
><select id="taskStatus" class="form-select">
|
||||||
|
<option value="todo" data-key="todo"></option>
|
||||||
|
<option value="inProgress" data-key="inProgress"></option>
|
||||||
|
<option value="completed" data-key="completed"></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label data-key="progressNotesLabel"></label
|
||||||
|
><textarea
|
||||||
|
id="taskProgressNotes"
|
||||||
|
class="form-control"
|
||||||
|
rows="3"
|
||||||
|
data-key-placeholder="progressNotesPlaceholder"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label data-key="descriptionLabel"></label
|
||||||
|
><textarea
|
||||||
|
id="taskDescription"
|
||||||
|
class="form-control"
|
||||||
|
rows="4"
|
||||||
|
data-key-placeholder="descriptionPlaceholder"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label data-key="priorityLabel"></label
|
||||||
|
><select id="taskPriority" class="form-select">
|
||||||
|
<option value="low" data-key="lowPriority"></option>
|
||||||
|
<option value="medium" data-key="mediumPriority"></option>
|
||||||
|
<option value="high" data-key="highPriority"></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label data-key="languageLabel"></label
|
||||||
|
><select id="taskLanguage" class="form-select">
|
||||||
|
<option value="zh">中文</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label data-key="assigneeLabel"></label
|
||||||
|
><input
|
||||||
|
id="taskAssignee"
|
||||||
|
class="form-control"
|
||||||
|
data-key-placeholder="assigneePlaceholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label data-key="dueDateLabel"></label
|
||||||
|
><input id="taskDueDate" type="date" class="form-control" />
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label data-key="collaboratorsLabel"></label
|
||||||
|
><input
|
||||||
|
id="taskCollaborators"
|
||||||
|
class="form-control"
|
||||||
|
data-key-placeholder="collaboratorsPlaceholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label data-key="progressLabel"></label
|
||||||
|
><input
|
||||||
|
id="taskProgress"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
value="0"
|
||||||
|
class="form-range"
|
||||||
|
/>
|
||||||
|
<div id="progressDisplay" class="text-center">0%</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 form-check ms-2">
|
||||||
|
<input id="taskHidden" type="checkbox" class="form-check-input" /><label
|
||||||
|
for="taskHidden"
|
||||||
|
data-key="hiddenTaskLabel"
|
||||||
|
></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal" data-key="cancel"></button
|
||||||
|
><button id="saveTaskBtn" class="btn btn-primary" data-key="saveTask"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal fade" id="importModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 data-key="confirmImport"></h5>
|
||||||
|
<button class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div id="importInfo"></div>
|
||||||
|
<label data-key="importMode"></label>
|
||||||
|
<div class="form-check">
|
||||||
|
<input
|
||||||
|
id="importModeReplace"
|
||||||
|
name="importMode"
|
||||||
|
type="radio"
|
||||||
|
value="replace"
|
||||||
|
checked
|
||||||
|
class="form-check-input"
|
||||||
|
/><label for="importModeReplace" data-key="replaceMode"></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input
|
||||||
|
id="importModeMerge"
|
||||||
|
name="importMode"
|
||||||
|
type="radio"
|
||||||
|
value="merge"
|
||||||
|
class="form-check-input"
|
||||||
|
/><label for="importModeMerge" data-key="mergeMode"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal" data-key="cancel"></button
|
||||||
|
><button
|
||||||
|
id="confirmImportBtn"
|
||||||
|
class="btn btn-warning"
|
||||||
|
data-key="confirmImportBtn"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="notifications" class="notification"></div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script type="module" src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
export const STATUSES = ['todo', 'inProgress', 'completed'];
|
||||||
|
export const HIDEABLE_STATUSES = ['todo', 'completed'];
|
||||||
|
export const PRIORITIES = ['low', 'medium', 'high'];
|
||||||
|
export const PRIORITY_ORDER = { low: 1, medium: 2, high: 3 };
|
||||||
|
export const LANGUAGES = ['zh', 'en'];
|
||||||
|
export const SORT_OPTIONS = [
|
||||||
|
['default', 'defaultSort'],
|
||||||
|
['title-asc', 'titleAsc'],
|
||||||
|
['title-desc', 'titleDesc'],
|
||||||
|
['number-asc', 'numberAsc'],
|
||||||
|
['number-desc', 'numberDesc'],
|
||||||
|
['dueDate-asc', 'dueDateAsc'],
|
||||||
|
['dueDate-desc', 'dueDateDesc'],
|
||||||
|
['priority-asc', 'priorityAsc'],
|
||||||
|
['priority-desc', 'priorityDesc'],
|
||||||
|
['progress-asc', 'progressAsc'],
|
||||||
|
['progress-desc', 'progressDesc'],
|
||||||
|
['created-desc', 'createdDesc'],
|
||||||
|
['created-asc', 'createdAsc'],
|
||||||
|
];
|
||||||
|
export const SORT_VALUES = new Set(SORT_OPTIONS.map(([value]) => value));
|
||||||
|
export const DEFAULT_SORT_ORDERS = { todo: 'default', inProgress: 'default', completed: 'default' };
|
||||||
|
export const STORAGE_KEYS = {
|
||||||
|
tasks: 'tasks',
|
||||||
|
sortOrders: 'taskSortOrders',
|
||||||
|
initialized: 'tasksInitialized',
|
||||||
|
corruptedBackup: 'tasksCorruptedBackup',
|
||||||
|
showHidden: { completed: 'showHiddenCompletedTasks', todo: 'showHiddenTodoTasks' },
|
||||||
|
};
|
||||||
|
export const EXPORT_VERSION = '1.0';
|
||||||
|
export const DUE_SOON_DAYS = 3;
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
export default {
|
||||||
|
appTitle: 'Task Management System',
|
||||||
|
todo: 'To Do',
|
||||||
|
inProgress: 'In Progress',
|
||||||
|
completed: 'Completed',
|
||||||
|
addTask: 'Add Task',
|
||||||
|
editTask: 'Edit Task',
|
||||||
|
exportData: 'Export Data',
|
||||||
|
importData: 'Import Data',
|
||||||
|
searchPlaceholder: 'Search tasks...',
|
||||||
|
taskTitleLabel: 'Task Title *',
|
||||||
|
statusLabel: 'Status',
|
||||||
|
progressNotesLabel: 'Progress Notes',
|
||||||
|
descriptionLabel: 'Task Description',
|
||||||
|
priorityLabel: 'Priority',
|
||||||
|
languageLabel: 'Language',
|
||||||
|
assigneeLabel: 'Assignee',
|
||||||
|
dueDateLabel: 'Due Date',
|
||||||
|
collaboratorsLabel: 'Collaborators',
|
||||||
|
progressLabel: 'Progress (%)',
|
||||||
|
hiddenTaskLabel: 'Hide this task (applies to completed and to-do tasks)',
|
||||||
|
saveTask: 'Save Task',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
progressNotesPlaceholder: 'Record the latest progress and status...',
|
||||||
|
descriptionPlaceholder: 'Describe the task goals and requirements...',
|
||||||
|
assigneePlaceholder: 'Enter assignee name',
|
||||||
|
collaboratorsPlaceholder: 'Separate multiple people with commas',
|
||||||
|
defaultSort: 'Default Sort',
|
||||||
|
titleAsc: 'Title A-Z',
|
||||||
|
titleDesc: 'Title Z-A',
|
||||||
|
numberAsc: 'Number ↑',
|
||||||
|
numberDesc: 'Number ↓',
|
||||||
|
dueDateAsc: 'Due Date ↑',
|
||||||
|
dueDateDesc: 'Due Date ↓',
|
||||||
|
priorityAsc: 'Priority ↑ (Low→High)',
|
||||||
|
priorityDesc: 'Priority ↓ (High→Low)',
|
||||||
|
progressAsc: 'Progress ↑ (Low→High)',
|
||||||
|
progressDesc: 'Progress ↓ (High→Low)',
|
||||||
|
createdDesc: 'Newest First',
|
||||||
|
createdAsc: 'Oldest First',
|
||||||
|
lowPriority: 'Low Priority',
|
||||||
|
mediumPriority: 'Medium Priority',
|
||||||
|
highPriority: 'High Priority',
|
||||||
|
low: 'Low',
|
||||||
|
medium: 'Medium',
|
||||||
|
high: 'High',
|
||||||
|
assignee: 'Assignee: ',
|
||||||
|
collaborators: 'Collaborators: ',
|
||||||
|
dueDate: 'Due: ',
|
||||||
|
progress: 'Progress: ',
|
||||||
|
overdue: 'Overdue',
|
||||||
|
dueSoon: 'Due Soon',
|
||||||
|
noTasks: 'No tasks',
|
||||||
|
noSearchResults: 'No matching tasks',
|
||||||
|
timeline: 'Timeline',
|
||||||
|
noTimelineEntries: 'No timeline entries',
|
||||||
|
addTimelinePlaceholder: 'Add timeline entry...',
|
||||||
|
add: 'Add',
|
||||||
|
addEntry: 'Add Entry',
|
||||||
|
edit: 'Edit',
|
||||||
|
delete: 'Delete',
|
||||||
|
save: 'Save',
|
||||||
|
editContentPlaceholder: 'Edit content...',
|
||||||
|
keyboardHint: 'Ctrl+Enter to save | Esc to cancel',
|
||||||
|
systemUser: 'System',
|
||||||
|
defaultUser: 'User',
|
||||||
|
taskAdded: 'Task added',
|
||||||
|
taskUpdated: 'Task updated',
|
||||||
|
taskDeleted: 'Task deleted',
|
||||||
|
taskPinned: 'Task pinned',
|
||||||
|
taskUnpinned: 'Task unpinned',
|
||||||
|
taskHidden: 'Task hidden',
|
||||||
|
taskShown: 'Task shown',
|
||||||
|
pinTask: 'Pin task',
|
||||||
|
unpinTask: 'Unpin task',
|
||||||
|
showTask: 'Show task',
|
||||||
|
hideTask: 'Hide task',
|
||||||
|
taskTitleRequired: 'Task title cannot be empty',
|
||||||
|
taskNotFound: 'The task no longer exists',
|
||||||
|
confirmDelete: 'Are you sure you want to delete this task?',
|
||||||
|
confirmDeleteTimeline: 'Delete this timeline entry?',
|
||||||
|
contentRequired: 'Content cannot be empty',
|
||||||
|
timelineEntryAdded: 'Timeline entry added',
|
||||||
|
timelineEntryUpdated: 'Timeline entry updated',
|
||||||
|
timelineEntryDeleted: 'Timeline entry deleted',
|
||||||
|
statusChanged: 'Status Changed',
|
||||||
|
progressUpdated: 'Progress Updated',
|
||||||
|
assigneeChanged: 'Assignee Changed',
|
||||||
|
dueDateChanged: 'Due Date Changed',
|
||||||
|
priorityChanged: 'Priority Changed',
|
||||||
|
progressNotesUpdated: 'Progress Notes Updated',
|
||||||
|
progressCleared: 'Progress notes cleared',
|
||||||
|
storageTasksReset: 'Local task data is corrupted; the original data was backed up',
|
||||||
|
storageWriteFailed:
|
||||||
|
'Could not save locally; this change is only in memory and will be lost on refresh',
|
||||||
|
overdueTasks: '{count} task(s) overdue!',
|
||||||
|
dueSoonTasks: '{count} task(s) due soon!',
|
||||||
|
allCompletedHidden: 'All completed tasks are hidden ({count})',
|
||||||
|
allTodoHidden: 'All to-do tasks are hidden ({count})',
|
||||||
|
showHiddenTasks: 'Show hidden tasks ({count})',
|
||||||
|
hideHiddenTasks: 'Hide hidden tasks',
|
||||||
|
showHiddenTitle: 'Show hidden tasks',
|
||||||
|
hideHiddenTitle: 'Hide hidden tasks',
|
||||||
|
exportSuccess: 'Data exported successfully',
|
||||||
|
exportError: 'Export failed',
|
||||||
|
importSuccess: 'Data imported successfully',
|
||||||
|
importError: 'Import failed',
|
||||||
|
invalidFileFormat: 'Invalid file format',
|
||||||
|
fileReadError: 'File read error',
|
||||||
|
confirmImport: 'Confirm Import Data',
|
||||||
|
importMode: 'Import Mode',
|
||||||
|
replaceMode: 'Replace Existing Data',
|
||||||
|
replaceModeDesc: 'Will delete all current tasks',
|
||||||
|
mergeMode: 'Merge Data',
|
||||||
|
mergeModeDesc: 'Keep existing tasks and add new tasks',
|
||||||
|
confirmImportBtn: 'Confirm Import',
|
||||||
|
importFileInfo: 'Import File Information',
|
||||||
|
fileVersion: 'File Version',
|
||||||
|
taskCount: 'Task Count',
|
||||||
|
exportDate: 'Export Date',
|
||||||
|
currentTaskCount: 'There are currently {count} tasks',
|
||||||
|
duplicateTasksSkipped: 'Skipped {count} duplicate tasks',
|
||||||
|
};
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import zh from './zh.js';
|
||||||
|
import en from './en.js';
|
||||||
|
const dictionaries = { zh, en };
|
||||||
|
let language = 'zh';
|
||||||
|
export const getLanguage = () => language;
|
||||||
|
export function t(key, params = {}) {
|
||||||
|
const template = dictionaries[language][key] ?? key;
|
||||||
|
return Object.entries(params).reduce(
|
||||||
|
(text, [name, value]) => text.replaceAll(`{${name}}`, String(value)),
|
||||||
|
template,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export function applyTranslations(root = document) {
|
||||||
|
document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en';
|
||||||
|
document.title = t('appTitle');
|
||||||
|
root.querySelectorAll('[data-key]').forEach((element) => {
|
||||||
|
element.textContent = t(element.dataset.key);
|
||||||
|
});
|
||||||
|
root.querySelectorAll('[data-key-placeholder]').forEach((element) => {
|
||||||
|
element.placeholder = t(element.dataset.keyPlaceholder);
|
||||||
|
});
|
||||||
|
const button = document.querySelector('#langBtn');
|
||||||
|
if (button) button.textContent = language === 'zh' ? 'EN' : '中文';
|
||||||
|
}
|
||||||
|
export function toggleLanguage() {
|
||||||
|
language = language === 'zh' ? 'en' : 'zh';
|
||||||
|
applyTranslations();
|
||||||
|
return language;
|
||||||
|
}
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
export default {
|
||||||
|
appTitle: '任务管理系统',
|
||||||
|
todo: '待办事项',
|
||||||
|
inProgress: '进行中',
|
||||||
|
completed: '已完成',
|
||||||
|
addTask: '添加任务',
|
||||||
|
editTask: '编辑任务',
|
||||||
|
exportData: '导出数据',
|
||||||
|
importData: '导入数据',
|
||||||
|
searchPlaceholder: '搜索任务...',
|
||||||
|
taskTitleLabel: '任务标题 *',
|
||||||
|
statusLabel: '状态',
|
||||||
|
progressNotesLabel: '任务进展',
|
||||||
|
descriptionLabel: '任务描述',
|
||||||
|
priorityLabel: '优先级',
|
||||||
|
languageLabel: '语言',
|
||||||
|
assigneeLabel: '负责人',
|
||||||
|
dueDateLabel: '到期日期',
|
||||||
|
collaboratorsLabel: '协助人员',
|
||||||
|
progressLabel: '进度 (%)',
|
||||||
|
hiddenTaskLabel: '隐藏此任务（对已完成和待办事项生效）',
|
||||||
|
saveTask: '保存任务',
|
||||||
|
cancel: '取消',
|
||||||
|
progressNotesPlaceholder: '记录任务的最新进展、当前状态等...',
|
||||||
|
descriptionPlaceholder: '描述任务的目标、要求和基本信息...',
|
||||||
|
assigneePlaceholder: '输入负责人姓名',
|
||||||
|
collaboratorsPlaceholder: '用逗号分隔多个人员',
|
||||||
|
defaultSort: '默认排序',
|
||||||
|
titleAsc: '标题 A-Z',
|
||||||
|
titleDesc: '标题 Z-A',
|
||||||
|
numberAsc: '数字排序 ↑',
|
||||||
|
numberDesc: '数字排序 ↓',
|
||||||
|
dueDateAsc: '到期日期 ↑',
|
||||||
|
dueDateDesc: '到期日期 ↓',
|
||||||
|
priorityAsc: '优先级 ↑ (低→高)',
|
||||||
|
priorityDesc: '优先级 ↓ (高→低)',
|
||||||
|
progressAsc: '进度 ↑ (低→高)',
|
||||||
|
progressDesc: '进度 ↓ (高→低)',
|
||||||
|
createdDesc: '最新创建',
|
||||||
|
createdAsc: '最早创建',
|
||||||
|
lowPriority: '低优先级',
|
||||||
|
mediumPriority: '中优先级',
|
||||||
|
highPriority: '高优先级',
|
||||||
|
low: '低',
|
||||||
|
medium: '中',
|
||||||
|
high: '高',
|
||||||
|
assignee: '负责人：',
|
||||||
|
collaborators: '协助：',
|
||||||
|
dueDate: '到期：',
|
||||||
|
progress: '进度：',
|
||||||
|
overdue: '已过期',
|
||||||
|
dueSoon: '即将到期',
|
||||||
|
noTasks: '暂无任务',
|
||||||
|
noSearchResults: '没有匹配的任务',
|
||||||
|
timeline: '时间轴',
|
||||||
|
noTimelineEntries: '暂无时间轴记录',
|
||||||
|
addTimelinePlaceholder: '添加时间轴条目...',
|
||||||
|
add: '添加',
|
||||||
|
addEntry: '添加条目',
|
||||||
|
edit: '编辑',
|
||||||
|
delete: '删除',
|
||||||
|
save: '保存',
|
||||||
|
editContentPlaceholder: '编辑内容...',
|
||||||
|
keyboardHint: 'Ctrl+Enter保存 | Esc取消',
|
||||||
|
systemUser: '系统',
|
||||||
|
defaultUser: '用户',
|
||||||
|
taskAdded: '任务已添加',
|
||||||
|
taskUpdated: '任务已更新',
|
||||||
|
taskDeleted: '任务已删除',
|
||||||
|
taskPinned: '任务置顶',
|
||||||
|
taskUnpinned: '取消置顶',
|
||||||
|
taskHidden: '任务已隐藏',
|
||||||
|
taskShown: '任务已显示',
|
||||||
|
pinTask: '置顶任务',
|
||||||
|
unpinTask: '取消置顶',
|
||||||
|
showTask: '显示任务',
|
||||||
|
hideTask: '隐藏任务',
|
||||||
|
taskTitleRequired: '任务标题不能为空',
|
||||||
|
taskNotFound: '任务不存在或已被删除',
|
||||||
|
confirmDelete: '确定要删除这个任务吗？',
|
||||||
|
confirmDeleteTimeline: '确定要删除这个时间轴条目吗？',
|
||||||
|
contentRequired: '内容不能为空',
|
||||||
|
timelineEntryAdded: '时间轴条目已添加',
|
||||||
|
timelineEntryUpdated: '时间轴条目已更新',
|
||||||
|
timelineEntryDeleted: '时间轴条目已删除',
|
||||||
|
statusChanged: '状态变更',
|
||||||
|
progressUpdated: '进度更新',
|
||||||
|
assigneeChanged: '负责人变更',
|
||||||
|
dueDateChanged: '到期日期变更',
|
||||||
|
priorityChanged: '优先级变更',
|
||||||
|
progressNotesUpdated: '任务进展更新',
|
||||||
|
progressCleared: '进展内容已清空',
|
||||||
|
storageTasksReset: '本地任务数据损坏，无法加载；原始数据已备份',
|
||||||
|
storageWriteFailed: '无法保存到本地存储；当前修改仅保留在内存中，刷新后会丢失',
|
||||||
|
overdueTasks: '{count} 个任务已过期！',
|
||||||
|
dueSoonTasks: '{count} 个任务即将到期！',
|
||||||
|
allCompletedHidden: '所有已完成任务都已隐藏 ({count} 个)',
|
||||||
|
allTodoHidden: '所有待办事项都已隐藏 ({count} 个)',
|
||||||
|
showHiddenTasks: '显示隐藏任务 ({count}个)',
|
||||||
|
hideHiddenTasks: '隐藏已被隐藏的任务',
|
||||||
|
showHiddenTitle: '显示被隐藏的任务',
|
||||||
|
hideHiddenTitle: '隐藏被隐藏的任务',
|
||||||
|
exportSuccess: '数据导出成功',
|
||||||
|
exportError: '导出失败',
|
||||||
|
importSuccess: '数据导入成功',
|
||||||
|
importError: '导入失败',
|
||||||
|
invalidFileFormat: '无效的文件格式',
|
||||||
|
fileReadError: '文件读取失败',
|
||||||
|
confirmImport: '确认导入数据',
|
||||||
|
importMode: '导入模式',
|
||||||
|
replaceMode: '覆盖现有数据',
|
||||||
|
replaceModeDesc: '将删除当前所有任务',
|
||||||
|
mergeMode: '合并数据',
|
||||||
|
mergeModeDesc: '保留现有任务，添加新任务',
|
||||||
|
confirmImportBtn: '确认导入',
|
||||||
|
importFileInfo: '导入文件信息',
|
||||||
|
fileVersion: '文件版本',
|
||||||
|
taskCount: '任务数量',
|
||||||
|
exportDate: '导出时间',
|
||||||
|
currentTaskCount: '当前系统中有 {count} 个任务',
|
||||||
|
duplicateTasksSkipped: '已跳过 {count} 个重复任务',
|
||||||
|
};
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
import { EXPORT_VERSION, STATUSES } from './config.js';
|
||||||
|
import { t } from './i18n/index.js';
|
||||||
|
import { normalizeSortOrders, normalizeTask, normalizeTasks, isValidId } from './task-model.js';
|
||||||
|
import { getSortOrders, getTasks, replaceSortOrders, replaceTasks } from './store.js';
|
||||||
|
import { escapeHtml, formatLocalDate, generateUniqueId, parseDueDateEnd } from './utils.js';
|
||||||
|
|
||||||
|
const REVOKE_DELAY_MS = 10000;
|
||||||
|
let pending = null;
|
||||||
|
export function validateImportData(data) {
|
||||||
|
if (
|
||||||
|
!data ||
|
||||||
|
typeof data !== 'object' ||
|
||||||
|
data.version !== EXPORT_VERSION ||
|
||||||
|
!data.data ||
|
||||||
|
!Array.isArray(data.data.tasks)
|
||||||
|
)
|
||||||
|
return false;
|
||||||
|
return data.data.tasks.every(
|
||||||
|
(task) =>
|
||||||
|
task &&
|
||||||
|
typeof task === 'object' &&
|
||||||
|
isValidId(task.id) &&
|
||||||
|
typeof task.title === 'string' &&
|
||||||
|
task.title.trim() &&
|
||||||
|
STATUSES.includes(task.status) &&
|
||||||
|
(task.dueDate == null || task.dueDate === '' || parseDueDateEnd(task.dueDate)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export function mergeTasks(existing, incoming) {
|
||||||
|
const keys = new Set(existing.map((task) => `${task.title}|${task.status}|${task.createdDate}`));
|
||||||
|
const ids = new Set(existing.map((task) => task.id));
|
||||||
|
const added = [];
|
||||||
|
let skipped = 0;
|
||||||
|
incoming.forEach((raw) => {
|
||||||
|
const created = typeof raw.createdDate === 'string' ? raw.createdDate : '';
|
||||||
|
const task = normalizeTask({ ...raw, id: generateUniqueId(ids) });
|
||||||
|
const key = created ? `${task.title}|${task.status}|${created}` : null;
|
||||||
|
if (key && keys.has(key)) {
|
||||||
|
skipped += 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (key) keys.add(key);
|
||||||
|
added.push(task);
|
||||||
|
});
|
||||||
|
return { tasks: [...existing, ...added], skipped };
|
||||||
|
}
|
||||||
|
export function createExportData(now = new Date()) {
|
||||||
|
return {
|
||||||
|
version: EXPORT_VERSION,
|
||||||
|
exportDate: now.toISOString(),
|
||||||
|
localDate: formatLocalDate(now),
|
||||||
|
taskCount: getTasks().length,
|
||||||
|
data: { tasks: getTasks(), sortOrders: getSortOrders() },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export function exportData() {
|
||||||
|
const data = createExportData();
|
||||||
|
const filename = `backup-tasks-${data.localDate}.json`;
|
||||||
|
const url = URL.createObjectURL(
|
||||||
|
new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }),
|
||||||
|
);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = filename;
|
||||||
|
// Firefox only downloads from an anchor in the document, and the blob must outlive the click
|
||||||
|
// because browsers start the transfer asynchronously.
|
||||||
|
document.body.append(link);
|
||||||
|
link.click();
|
||||||
|
link.remove();
|
||||||
|
setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
|
||||||
|
return filename;
|
||||||
|
}
|
||||||
|
export function readImportFile(file, onReady, onInvalid, onReadError) {
|
||||||
|
pending = null;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = () => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(reader.result);
|
||||||
|
if (!validateImportData(data)) {
|
||||||
|
onInvalid();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
pending = data;
|
||||||
|
onReady(data);
|
||||||
|
} catch {
|
||||||
|
onInvalid();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.onerror = onReadError;
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
export function showImportDialog(data) {
|
||||||
|
const date =
|
||||||
|
data.exportDate && !Number.isNaN(Date.parse(data.exportDate))
|
||||||
|
? new Date(data.exportDate).toLocaleString()
|
||||||
|
: '-';
|
||||||
|
document.querySelector('#importInfo').innerHTML =
|
||||||
|
`<div class="alert alert-info"><strong>${escapeHtml(t('importFileInfo'))}</strong><ul><li>${escapeHtml(t('fileVersion'))}: ${escapeHtml(data.version)}</li><li>${escapeHtml(t('taskCount'))}: ${data.data.tasks.length}</li><li>${escapeHtml(t('exportDate'))}: ${escapeHtml(date)}</li></ul></div><div class="alert alert-warning">${escapeHtml(t('currentTaskCount', { count: getTasks().length }))}</div>`;
|
||||||
|
bootstrap.Modal.getOrCreateInstance(document.querySelector('#importModal')).show();
|
||||||
|
}
|
||||||
|
export function executeImport(mode) {
|
||||||
|
if (!pending) throw new Error('No import pending');
|
||||||
|
if (!['replace', 'merge'].includes(mode)) throw new TypeError('Invalid import mode');
|
||||||
|
let skipped = 0;
|
||||||
|
if (mode === 'replace') replaceTasks(normalizeTasks(pending.data.tasks));
|
||||||
|
else {
|
||||||
|
const merged = mergeTasks(getTasks(), pending.data.tasks);
|
||||||
|
replaceTasks(merged.tasks);
|
||||||
|
skipped = merged.skipped;
|
||||||
|
}
|
||||||
|
replaceSortOrders(normalizeSortOrders(pending.data.sortOrders));
|
||||||
|
pending = null;
|
||||||
|
bootstrap.Modal.getOrCreateInstance(document.querySelector('#importModal')).hide();
|
||||||
|
return skipped;
|
||||||
|
}
|
||||||
+266
@@ -0,0 +1,266 @@
|
|||||||
|
import { SORT_VALUES, STATUSES } from './config.js';
|
||||||
|
import { applyTranslations, t, toggleLanguage } from './i18n/index.js';
|
||||||
|
import { executeImport, exportData, readImportFile, showImportDialog } from './import-export.js';
|
||||||
|
import { openTaskModal, saveTask, updateProgressDisplay } from './modal.js';
|
||||||
|
import { checkDueDates, showNotification } from './notify.js';
|
||||||
|
import {
|
||||||
|
applySearchFilter,
|
||||||
|
isTimelineExpanded,
|
||||||
|
pruneTaskCaches,
|
||||||
|
renderAllTasks,
|
||||||
|
renderColumn,
|
||||||
|
setTimelineExpanded,
|
||||||
|
updateTaskCounts,
|
||||||
|
} from './render.js';
|
||||||
|
import { createSeedTasks } from './seed-data.js';
|
||||||
|
import {
|
||||||
|
getShowHidden,
|
||||||
|
getTasks,
|
||||||
|
initializeStore,
|
||||||
|
removeTask,
|
||||||
|
setShowHidden,
|
||||||
|
setSortOrder,
|
||||||
|
toggleHidden,
|
||||||
|
togglePin,
|
||||||
|
wasCorrupted,
|
||||||
|
} from './store.js';
|
||||||
|
import { consumeStorageWriteFailure, isInitialized } from './storage.js';
|
||||||
|
import { addTimelineEntry, deleteTimelineEntry, updateTimelineEntry } from './timeline.js';
|
||||||
|
import { isHiddenTask } from './utils.js';
|
||||||
|
|
||||||
|
function renderAffected(...statuses) {
|
||||||
|
[...new Set(statuses.filter(Boolean))].forEach(renderColumn);
|
||||||
|
}
|
||||||
|
function notifyPersisted(message, type = 'info') {
|
||||||
|
if (consumeStorageWriteFailure()) {
|
||||||
|
showNotification(t('storageWriteFailed'), 'danger');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (message) showNotification(message, type);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
function taskAction(event) {
|
||||||
|
const action = event.target.closest('[data-action]');
|
||||||
|
if (!action) return;
|
||||||
|
const card = action.closest('[data-task-id]');
|
||||||
|
const id = Number(card?.dataset.taskId);
|
||||||
|
const status = card?.closest('.task-list')?.dataset.status;
|
||||||
|
if (action.dataset.action === 'toggle-show-hidden') {
|
||||||
|
const value = !getShowHidden(action.dataset.status);
|
||||||
|
setShowHidden(action.dataset.status, value);
|
||||||
|
renderColumn(action.dataset.status);
|
||||||
|
notifyPersisted(
|
||||||
|
t(value ? 'showHiddenTasks' : 'hideHiddenTasks', {
|
||||||
|
count: getTasks().filter(
|
||||||
|
(task) => task.status === action.dataset.status && isHiddenTask(task),
|
||||||
|
).length,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!card) return;
|
||||||
|
const timelineItem = action.closest('[data-timeline-id]');
|
||||||
|
const timelineId = Number(timelineItem?.dataset.timelineId);
|
||||||
|
switch (action.dataset.action) {
|
||||||
|
case 'pin': {
|
||||||
|
const task = togglePin(id);
|
||||||
|
if (!task) {
|
||||||
|
showNotification(t('taskNotFound'), 'warning');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t(task.isPinned ? 'taskPinned' : 'taskUnpinned'));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'hide': {
|
||||||
|
const task = toggleHidden(id);
|
||||||
|
if (!task) {
|
||||||
|
showNotification(t('taskNotFound'), 'warning');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t(task.isHidden ? 'taskHidden' : 'taskShown'));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'edit':
|
||||||
|
openTaskModal(id);
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
if (confirm(t('confirmDelete'))) {
|
||||||
|
if (!removeTask(id)) {
|
||||||
|
showNotification(t('taskNotFound'), 'warning');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
pruneTaskCaches();
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t('taskDeleted'), 'warning');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'toggle-timeline':
|
||||||
|
setTimelineExpanded(id, !isTimelineExpanded(id));
|
||||||
|
renderColumn(status);
|
||||||
|
break;
|
||||||
|
case 'show-add-timeline': {
|
||||||
|
const form = action.closest('.timeline').querySelector('.timeline-form');
|
||||||
|
form.classList.remove('d-none');
|
||||||
|
form.querySelector('input').focus();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'cancel-add-timeline':
|
||||||
|
action.closest('.timeline-form').classList.add('d-none');
|
||||||
|
break;
|
||||||
|
case 'add-timeline': {
|
||||||
|
const input = action.closest('.timeline-form').querySelector('input');
|
||||||
|
if (addTimelineEntry(id, input.value)) {
|
||||||
|
setTimelineExpanded(id, true);
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t('timelineEntryAdded'), 'success');
|
||||||
|
} else showNotification(t('contentRequired'), 'warning');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'edit-timeline':
|
||||||
|
timelineItem.querySelector('.timeline-content').classList.add('d-none');
|
||||||
|
timelineItem.querySelector('.timeline-edit-form').classList.remove('d-none');
|
||||||
|
timelineItem.querySelector('textarea').focus();
|
||||||
|
break;
|
||||||
|
case 'cancel-timeline':
|
||||||
|
timelineItem.querySelector('.timeline-content').classList.remove('d-none');
|
||||||
|
timelineItem.querySelector('.timeline-edit-form').classList.add('d-none');
|
||||||
|
break;
|
||||||
|
case 'save-timeline': {
|
||||||
|
const value = timelineItem.querySelector('textarea').value;
|
||||||
|
if (updateTimelineEntry(id, timelineId, value)) {
|
||||||
|
setTimelineExpanded(id, true);
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t('timelineEntryUpdated'), 'success');
|
||||||
|
} else showNotification(t('contentRequired'), 'warning');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'delete-timeline':
|
||||||
|
if (confirm(t('confirmDeleteTimeline')) && deleteTimelineEntry(id, timelineId)) {
|
||||||
|
setTimelineExpanded(id, true);
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t('timelineEntryDeleted'), 'warning');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function bind() {
|
||||||
|
document.querySelector('#addTaskBtn').addEventListener('click', () => openTaskModal());
|
||||||
|
document.querySelector('#saveTaskBtn').addEventListener('click', () => {
|
||||||
|
const result = saveTask();
|
||||||
|
if (result?.error) {
|
||||||
|
showNotification(t(result.error), 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (result) {
|
||||||
|
renderAffected(result.oldStatus, result.task.status);
|
||||||
|
notifyPersisted(t(result.oldStatus ? 'taskUpdated' : 'taskAdded'), 'success');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelector('#taskProgress').addEventListener('input', updateProgressDisplay);
|
||||||
|
const runSearch = () => {
|
||||||
|
applySearchFilter();
|
||||||
|
updateTaskCounts();
|
||||||
|
};
|
||||||
|
document.querySelector('#searchInput').addEventListener('input', runSearch);
|
||||||
|
document.querySelector('#searchBtn').addEventListener('click', runSearch);
|
||||||
|
document.querySelector('#languageBtn').addEventListener('click', () => {
|
||||||
|
toggleLanguage();
|
||||||
|
renderAllTasks();
|
||||||
|
});
|
||||||
|
document.querySelector('#exportBtn').addEventListener('click', () => {
|
||||||
|
try {
|
||||||
|
showNotification(`${t('exportSuccess')} (${exportData()})`, 'success');
|
||||||
|
} catch {
|
||||||
|
showNotification(t('exportError'), 'danger');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document
|
||||||
|
.querySelector('#importBtn')
|
||||||
|
.addEventListener('click', () => document.querySelector('#fileInput').click());
|
||||||
|
document.querySelector('#fileInput').addEventListener('change', (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file)
|
||||||
|
readImportFile(
|
||||||
|
file,
|
||||||
|
showImportDialog,
|
||||||
|
() => showNotification(t('invalidFileFormat'), 'danger'),
|
||||||
|
() => showNotification(t('fileReadError'), 'danger'),
|
||||||
|
);
|
||||||
|
event.target.value = '';
|
||||||
|
});
|
||||||
|
document.querySelector('#confirmImportBtn').addEventListener('click', () => {
|
||||||
|
try {
|
||||||
|
const mode = document.querySelector('[name="importMode"]:checked').value;
|
||||||
|
const skipped = executeImport(mode);
|
||||||
|
pruneTaskCaches();
|
||||||
|
renderAllTasks();
|
||||||
|
if (notifyPersisted(t('importSuccess'), 'success') && skipped)
|
||||||
|
showNotification(t('duplicateTasksSkipped', { count: skipped }));
|
||||||
|
} catch {
|
||||||
|
showNotification(t('importError'), 'danger');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelector('#taskBoard').addEventListener('click', taskAction);
|
||||||
|
document.querySelector('#taskBoard').addEventListener('change', (event) => {
|
||||||
|
if (
|
||||||
|
event.target.matches('.sort-selector') &&
|
||||||
|
STATUSES.includes(event.target.dataset.status) &&
|
||||||
|
SORT_VALUES.has(event.target.value)
|
||||||
|
) {
|
||||||
|
setSortOrder(event.target.dataset.status, event.target.value);
|
||||||
|
renderColumn(event.target.dataset.status);
|
||||||
|
notifyPersisted();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelector('#taskBoard').addEventListener('keydown', (event) => {
|
||||||
|
const card = event.target.closest('[data-task-id]');
|
||||||
|
if (!card) return;
|
||||||
|
const status = card.closest('.task-list').dataset.status;
|
||||||
|
if (event.key === 'Enter' && event.target.matches('[data-role="timeline-input"]')) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (addTimelineEntry(Number(card.dataset.taskId), event.target.value)) {
|
||||||
|
setTimelineExpanded(Number(card.dataset.taskId), true);
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t('timelineEntryAdded'), 'success');
|
||||||
|
} else showNotification(t('contentRequired'), 'warning');
|
||||||
|
}
|
||||||
|
if (event.target.matches('[data-role="timeline-edit"]') && event.key === 'Escape') {
|
||||||
|
event.preventDefault();
|
||||||
|
event.target.closest('.timeline-edit-form').classList.add('d-none');
|
||||||
|
event.target
|
||||||
|
.closest('.timeline-item')
|
||||||
|
.querySelector('.timeline-content')
|
||||||
|
.classList.remove('d-none');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
event.target.matches('[data-role="timeline-edit"]') &&
|
||||||
|
event.key === 'Enter' &&
|
||||||
|
event.ctrlKey
|
||||||
|
) {
|
||||||
|
event.preventDefault();
|
||||||
|
const item = event.target.closest('[data-timeline-id]');
|
||||||
|
if (
|
||||||
|
updateTimelineEntry(
|
||||||
|
Number(card.dataset.taskId),
|
||||||
|
Number(item.dataset.timelineId),
|
||||||
|
event.target.value,
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
setTimelineExpanded(Number(card.dataset.taskId), true);
|
||||||
|
renderColumn(status);
|
||||||
|
notifyPersisted(t('timelineEntryUpdated'), 'success');
|
||||||
|
} else showNotification(t('contentRequired'), 'warning');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initializeStore(createSeedTasks(), isInitialized());
|
||||||
|
applyTranslations();
|
||||||
|
renderAllTasks();
|
||||||
|
bind();
|
||||||
|
if (wasCorrupted()) showNotification(t('storageTasksReset'), 'danger');
|
||||||
|
notifyPersisted();
|
||||||
|
checkDueDates();
|
||||||
|
});
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import { t } from './i18n/index.js';
|
||||||
|
import { addTask, getTask, getTasks, updateTask } from './store.js';
|
||||||
|
import { addSystemEntries } from './timeline.js';
|
||||||
|
import { generateUniqueId } from './utils.js';
|
||||||
|
|
||||||
|
const byId = (id) => document.querySelector(`#${id}`);
|
||||||
|
export function updateProgressDisplay() {
|
||||||
|
byId('progressDisplay').textContent = `${byId('taskProgress').value}%`;
|
||||||
|
}
|
||||||
|
export function openTaskModal(taskId = null) {
|
||||||
|
const form = byId('taskForm');
|
||||||
|
form.reset();
|
||||||
|
byId('taskId').value = taskId ?? '';
|
||||||
|
const task = taskId ? getTask(taskId) : null;
|
||||||
|
byId('modalTitle').dataset.key = task ? 'editTask' : 'addTask';
|
||||||
|
byId('modalTitle').textContent = t(task ? 'editTask' : 'addTask');
|
||||||
|
if (task) {
|
||||||
|
byId('taskTitle').value = task.title;
|
||||||
|
byId('taskDescription').value = task.description;
|
||||||
|
byId('taskProgressNotes').value = task.progressNotes;
|
||||||
|
byId('taskStatus').value = task.status;
|
||||||
|
byId('taskProgress').value = task.progress;
|
||||||
|
byId('taskAssignee').value = task.assignee;
|
||||||
|
byId('taskDueDate').value = task.dueDate;
|
||||||
|
byId('taskCollaborators').value = task.collaborators.join(', ');
|
||||||
|
byId('taskLanguage').value = task.language;
|
||||||
|
byId('taskPriority').value = task.priority;
|
||||||
|
byId('taskHidden').checked = task.isHidden;
|
||||||
|
} else {
|
||||||
|
byId('taskPriority').value = 'low';
|
||||||
|
byId('taskLanguage').value = 'zh';
|
||||||
|
}
|
||||||
|
updateProgressDisplay();
|
||||||
|
bootstrap.Modal.getOrCreateInstance(byId('taskModal')).show();
|
||||||
|
}
|
||||||
|
function values() {
|
||||||
|
return {
|
||||||
|
title: byId('taskTitle').value.trim(),
|
||||||
|
description: byId('taskDescription').value,
|
||||||
|
progressNotes: byId('taskProgressNotes').value,
|
||||||
|
status: byId('taskStatus').value,
|
||||||
|
progress: Number(byId('taskProgress').value),
|
||||||
|
assignee: byId('taskAssignee').value,
|
||||||
|
dueDate: byId('taskDueDate').value,
|
||||||
|
collaborators: byId('taskCollaborators')
|
||||||
|
.value.split(',')
|
||||||
|
.map((v) => v.trim())
|
||||||
|
.filter(Boolean),
|
||||||
|
language: byId('taskLanguage').value,
|
||||||
|
priority: byId('taskPriority').value,
|
||||||
|
isHidden: byId('taskHidden').checked,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export function saveTask() {
|
||||||
|
const data = values();
|
||||||
|
const title = byId('taskTitle');
|
||||||
|
title.setCustomValidity(data.title ? '' : t('taskTitleRequired'));
|
||||||
|
if (!byId('taskForm').reportValidity()) return null;
|
||||||
|
const id = Number(byId('taskId').value);
|
||||||
|
let oldStatus = null;
|
||||||
|
let task;
|
||||||
|
if (id) {
|
||||||
|
const old = getTask(id);
|
||||||
|
if (!old) return { error: 'taskNotFound' };
|
||||||
|
oldStatus = old.status;
|
||||||
|
task = updateTask(id, { ...data, timeline: addSystemEntries(old, data) });
|
||||||
|
} else {
|
||||||
|
task = addTask({
|
||||||
|
id: generateUniqueId(new Set(getTasks().map((item) => item.id))),
|
||||||
|
...data,
|
||||||
|
isPinned: false,
|
||||||
|
createdDate: new Date().toISOString(),
|
||||||
|
timeline: [],
|
||||||
|
});
|
||||||
|
if (data.progressNotes)
|
||||||
|
task = updateTask(task.id, {
|
||||||
|
timeline: addSystemEntries({ ...task, progressNotes: '' }, data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
bootstrap.Modal.getOrCreateInstance(byId('taskModal')).hide();
|
||||||
|
return { task, oldStatus };
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { t } from './i18n/index.js';
|
||||||
|
import { getTasks } from './store.js';
|
||||||
|
import { getDueDateState } from './utils.js';
|
||||||
|
export function showNotification(message, type = 'info') {
|
||||||
|
const alert = document.createElement('div');
|
||||||
|
alert.className = `alert alert-${type} alert-dismissible fade show`;
|
||||||
|
const text = document.createElement('span');
|
||||||
|
text.textContent = String(message);
|
||||||
|
const close = document.createElement('button');
|
||||||
|
close.className = 'btn-close';
|
||||||
|
close.dataset.bsDismiss = 'alert';
|
||||||
|
alert.append(text, close);
|
||||||
|
document.querySelector('#notifications').append(alert);
|
||||||
|
setTimeout(() => alert.remove(), 5000);
|
||||||
|
}
|
||||||
|
export function checkDueDates(now = new Date()) {
|
||||||
|
let overdue = 0,
|
||||||
|
soon = 0;
|
||||||
|
getTasks().forEach((task) => {
|
||||||
|
if (!task.dueDate || task.status === 'completed') return;
|
||||||
|
const state = getDueDateState(task.dueDate, now);
|
||||||
|
if (state.isOverdue) overdue += 1;
|
||||||
|
else if (state.isDueSoon) soon += 1;
|
||||||
|
});
|
||||||
|
const parts = [];
|
||||||
|
if (overdue) parts.push(t('overdueTasks', { count: overdue }));
|
||||||
|
if (soon) parts.push(t('dueSoonTasks', { count: soon }));
|
||||||
|
if (parts.length) showNotification(parts.join(' '), overdue ? 'danger' : 'warning');
|
||||||
|
return { overdue, soon };
|
||||||
|
}
|
||||||
@@ -0,0 +1,192 @@
|
|||||||
|
import { HIDEABLE_STATUSES, SORT_OPTIONS, STATUSES } from './config.js';
|
||||||
|
import { t } from './i18n/index.js';
|
||||||
|
import { getShowHidden, getSortOrders, getTasks } from './store.js';
|
||||||
|
import { sortTasks } from './sort.js';
|
||||||
|
import { escapeHtml, getDueDateState, isHiddenTask } from './utils.js';
|
||||||
|
|
||||||
|
const expanded = new Set();
|
||||||
|
const searchIndexes = new Map();
|
||||||
|
export const setTimelineExpanded = (id, value) => (value ? expanded.add(id) : expanded.delete(id));
|
||||||
|
export const isTimelineExpanded = (id) => expanded.has(id);
|
||||||
|
export function pruneTaskCaches(taskIds = getTasks().map((task) => task.id)) {
|
||||||
|
const validIds = new Set(taskIds);
|
||||||
|
[expanded, searchIndexes].forEach((cache) => {
|
||||||
|
[...cache.keys()].forEach((id) => {
|
||||||
|
if (!validIds.has(id)) cache.delete(id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function renderSortOptions() {
|
||||||
|
const orders = getSortOrders();
|
||||||
|
document.querySelectorAll('.sort-selector').forEach((select) => {
|
||||||
|
select.innerHTML = SORT_OPTIONS.map(
|
||||||
|
([value, key]) => `<option value="${value}">${escapeHtml(t(key))}</option>`,
|
||||||
|
).join('');
|
||||||
|
select.value = orders[select.dataset.status];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function timelineContent(item) {
|
||||||
|
if (!item.event) return String(item.content ?? '');
|
||||||
|
const values = item.event.values ?? {};
|
||||||
|
const from = values.from || '-';
|
||||||
|
const to = values.to || '-';
|
||||||
|
if (item.event.key === 'progressNotesUpdated') {
|
||||||
|
const value = String(values.value ?? '').trim();
|
||||||
|
return value ? `${value.slice(0, 50)}${value.length > 50 ? '...' : ''}` : t('progressCleared');
|
||||||
|
}
|
||||||
|
if (item.event.key === 'progressUpdated')
|
||||||
|
return `${t('progressUpdated')}: ${values.from ?? '-'}% → ${values.to ?? '-'}%`;
|
||||||
|
if (['statusChanged', 'priorityChanged'].includes(item.event.key))
|
||||||
|
return `${t(item.event.key)}: ${t(from)} → ${t(to)}`;
|
||||||
|
return `${t(item.event.key)}: ${from} → ${to}`;
|
||||||
|
}
|
||||||
|
function entryTime(item) {
|
||||||
|
// Imported entries can carry an unparsable date; treat those as the oldest instead of comparing NaN.
|
||||||
|
const time = Date.parse(item.date);
|
||||||
|
return Number.isNaN(time) ? -Infinity : time;
|
||||||
|
}
|
||||||
|
function timelineOrder(a, b) {
|
||||||
|
// Entry dates have day granularity, so ids (allocated in increasing order) break same-day ties.
|
||||||
|
const left = entryTime(a);
|
||||||
|
const right = entryTime(b);
|
||||||
|
return left === right ? b.id - a.id : right - left;
|
||||||
|
}
|
||||||
|
function createTimeline(task) {
|
||||||
|
const items = [...task.timeline].sort(timelineOrder);
|
||||||
|
const rows = items.length
|
||||||
|
? items
|
||||||
|
.map(
|
||||||
|
(item) =>
|
||||||
|
`<div class="timeline-item ${escapeHtml(item.type)}" data-timeline-id="${item.id}"><div class="timeline-item-actions"><button class="btn btn-sm btn-outline-primary" data-action="edit-timeline" title="${t('edit')}"><i class="fas fa-edit"></i></button><button class="btn btn-sm btn-outline-danger" data-action="delete-timeline" title="${t('delete')}"><i class="fas fa-trash"></i></button></div><div class="timeline-content"><div class="timeline-date">${escapeHtml(item.date)} - ${escapeHtml(item.userType === 'system' ? t('systemUser') : item.user)}</div><div>${escapeHtml(timelineContent(item))}</div></div><div class="timeline-edit-form d-none"><textarea class="form-control form-control-sm" data-role="timeline-edit">${escapeHtml(timelineContent(item))}</textarea><button class="btn btn-sm btn-primary mt-1" data-action="save-timeline">${t('save')}</button><button class="btn btn-sm btn-secondary mt-1" data-action="cancel-timeline">${t('cancel')}</button><small class="ms-2 text-muted">${t('keyboardHint')}</small></div></div>`,
|
||||||
|
)
|
||||||
|
.join('')
|
||||||
|
: `<p class="text-muted small">${t('noTimelineEntries')}</p>`;
|
||||||
|
return `${rows}<div class="timeline-form d-none"><input class="form-control form-control-sm" data-role="timeline-input" placeholder="${t('addTimelinePlaceholder')}"><button class="btn btn-sm btn-primary mt-2" data-action="add-timeline">${t('add')}</button><button class="btn btn-sm btn-secondary mt-2" data-action="cancel-add-timeline">${t('cancel')}</button></div><button class="btn btn-sm btn-outline-primary mt-2" data-action="show-add-timeline"><i class="fas fa-plus"></i> ${t('addEntry')}</button>`;
|
||||||
|
}
|
||||||
|
function createTaskActions(task) {
|
||||||
|
const hiddenAction = HIDEABLE_STATUSES.includes(task.status)
|
||||||
|
? `<button class="btn btn-outline-secondary" data-action="hide" title="${t(task.isHidden ? 'showTask' : 'hideTask')}"><i class="fas ${task.isHidden ? 'fa-eye' : 'fa-eye-slash'}"></i></button>`
|
||||||
|
: '';
|
||||||
|
return `<div class="task-actions"><button class="btn btn-link" data-action="pin" title="${t(task.isPinned ? 'unpinTask' : 'pinTask')}"><i class="fas fa-thumbtack"></i></button>${hiddenAction}<button class="btn btn-outline-primary" data-action="edit" title="${t('edit')}"><i class="fas fa-edit"></i></button><button class="btn btn-outline-danger" data-action="delete" title="${t('delete')}"><i class="fas fa-trash"></i></button></div>`;
|
||||||
|
}
|
||||||
|
function createPriorityBadge(task) {
|
||||||
|
return `<span class="priority-badge priority-${task.priority}-badge">${t(task.priority)}</span>`;
|
||||||
|
}
|
||||||
|
function createPeople(task) {
|
||||||
|
const assignee = task.assignee
|
||||||
|
? `<div><small>${t('assignee')}</small><span class="badge bg-primary person-badge">${escapeHtml(task.assignee)}</span></div>`
|
||||||
|
: '';
|
||||||
|
const collaborators = task.collaborators
|
||||||
|
.map((name) => `<span class="badge bg-secondary person-badge">${escapeHtml(name)}</span>`)
|
||||||
|
.join('');
|
||||||
|
return `${assignee}${collaborators ? `<div><small>${t('collaborators')}</small>${collaborators}</div>` : ''}`;
|
||||||
|
}
|
||||||
|
function createProgress(task) {
|
||||||
|
const notes = task.progressNotes
|
||||||
|
? `<div class="small text-primary mb-2"><strong>${t('progressNotesLabel')}:</strong><div class="task-description-display">${escapeHtml(task.progressNotes)}</div></div>`
|
||||||
|
: '';
|
||||||
|
const bar =
|
||||||
|
task.progress > 0
|
||||||
|
? `<div class="progress progress-custom"><div class="progress-bar" style="width:${task.progress}%"></div></div><small>${t('progress')}${task.progress}%</small>`
|
||||||
|
: '';
|
||||||
|
return `${notes}${bar}`;
|
||||||
|
}
|
||||||
|
function createDueDateBlock(task, due) {
|
||||||
|
if (!task.dueDate) return '';
|
||||||
|
const dateClass = due.isOverdue ? 'text-danger' : due.isDueSoon ? 'text-warning' : '';
|
||||||
|
const badge = due.isOverdue
|
||||||
|
? `<span class="badge bg-danger">${t('overdue')}</span>`
|
||||||
|
: due.isDueSoon
|
||||||
|
? `<span class="badge bg-warning">${t('dueSoon')}</span>`
|
||||||
|
: '';
|
||||||
|
return `<div><small>${t('dueDate')}<span class="${dateClass}">${escapeHtml(task.dueDate)}</span></small> ${badge}</div>`;
|
||||||
|
}
|
||||||
|
function buildSearchIndex(task) {
|
||||||
|
return [
|
||||||
|
task.title,
|
||||||
|
task.description,
|
||||||
|
task.progressNotes,
|
||||||
|
task.assignee,
|
||||||
|
...task.collaborators,
|
||||||
|
task.dueDate,
|
||||||
|
t(task.priority),
|
||||||
|
...task.timeline.map(timelineContent),
|
||||||
|
]
|
||||||
|
.join(' ')
|
||||||
|
.toLowerCase();
|
||||||
|
}
|
||||||
|
function createCard(task) {
|
||||||
|
// Indexed here so that a rendered card always has a matching entry for applySearchFilter.
|
||||||
|
searchIndexes.set(task.id, buildSearchIndex(task));
|
||||||
|
const due = getDueDateState(task.dueDate);
|
||||||
|
const open = expanded.has(task.id);
|
||||||
|
const classes = [
|
||||||
|
'task-card',
|
||||||
|
'card',
|
||||||
|
task.status,
|
||||||
|
`priority-${task.priority}`,
|
||||||
|
task.isPinned ? 'pinned' : '',
|
||||||
|
isHiddenTask(task) ? 'hidden-task' : '',
|
||||||
|
due.isOverdue ? 'overdue' : due.isDueSoon ? 'due-soon' : '',
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ');
|
||||||
|
const description = task.description
|
||||||
|
? `<p class="small task-description-display">${escapeHtml(task.description)}</p>`
|
||||||
|
: '';
|
||||||
|
return `<article class="${classes}" data-task-id="${task.id}">${createTaskActions(task)}<div class="card-body"><div class="d-flex justify-content-between pe-5"><h6>${escapeHtml(task.title)}</h6>${createPriorityBadge(task)}</div>${description}${createProgress(task)}${createPeople(task)}${createDueDateBlock(task, due)}<div class="timeline-toggle mt-2 pt-2 border-top" data-action="toggle-timeline"><small><i class="fas fa-history"></i> ${t('timeline')} (${task.timeline.length}) <i class="fas fa-chevron-${open ? 'up' : 'down'}"></i></small></div><div class="timeline ${open ? '' : 'd-none'}">${createTimeline(task)}</div></div></article>`;
|
||||||
|
}
|
||||||
|
export function updateTaskCounts() {
|
||||||
|
const tasks = getTasks();
|
||||||
|
STATUSES.forEach((status) => {
|
||||||
|
const cards = [...document.querySelectorAll(`#${status}Tasks .task-card`)];
|
||||||
|
document.querySelector(`#${status}Count`).textContent = cards.filter(
|
||||||
|
(card) => !card.hidden,
|
||||||
|
).length;
|
||||||
|
});
|
||||||
|
HIDEABLE_STATUSES.forEach((status) => {
|
||||||
|
const button = document.querySelector(
|
||||||
|
`[data-action="toggle-show-hidden"][data-status="${status}"]`,
|
||||||
|
);
|
||||||
|
const count = tasks.filter((task) => task.status === status && isHiddenTask(task)).length;
|
||||||
|
button.hidden = count === 0;
|
||||||
|
button.title = t(getShowHidden(status) ? 'hideHiddenTitle' : 'showHiddenTitle');
|
||||||
|
button.querySelector('i').className = `fas fa-${getShowHidden(status) ? 'eye-slash' : 'eye'}`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function updateSearchEmptyState(list) {
|
||||||
|
const cards = [...list.querySelectorAll('.task-card')];
|
||||||
|
const notice = list.querySelector('.search-empty-state');
|
||||||
|
if (cards.length && cards.every((card) => card.hidden)) {
|
||||||
|
const node = notice ?? document.createElement('p');
|
||||||
|
node.className = 'empty-state search-empty-state';
|
||||||
|
node.textContent = t('noSearchResults');
|
||||||
|
if (!notice) list.append(node);
|
||||||
|
} else notice?.remove();
|
||||||
|
}
|
||||||
|
export function applySearchFilter(root = document) {
|
||||||
|
const term = document.querySelector('#searchInput').value.trim().toLowerCase();
|
||||||
|
root.querySelectorAll('.task-card').forEach((card) => {
|
||||||
|
const index = searchIndexes.get(Number(card.dataset.taskId)) ?? '';
|
||||||
|
card.hidden = Boolean(term && !index.includes(term));
|
||||||
|
});
|
||||||
|
const lists = root.matches?.('.task-list') ? [root] : [...root.querySelectorAll('.task-list')];
|
||||||
|
lists.forEach(updateSearchEmptyState);
|
||||||
|
}
|
||||||
|
export function renderColumn(status, updateCounts = true) {
|
||||||
|
const all = getTasks().filter((task) => task.status === status);
|
||||||
|
const hidden = all.filter(isHiddenTask).length;
|
||||||
|
const shown = getShowHidden(status) ? all : all.filter((task) => !isHiddenTask(task));
|
||||||
|
const ordered = sortTasks(shown, getSortOrders()[status]);
|
||||||
|
const key = status === 'completed' ? 'allCompletedHidden' : 'allTodoHidden';
|
||||||
|
document.querySelector(`#${status}Tasks`).innerHTML = ordered.length
|
||||||
|
? ordered.map(createCard).join('')
|
||||||
|
: `<p class="empty-state">${hidden ? t(key, { count: hidden }) : t('noTasks')}</p>`;
|
||||||
|
applySearchFilter(document.querySelector(`#${status}Tasks`));
|
||||||
|
if (updateCounts) updateTaskCounts();
|
||||||
|
}
|
||||||
|
export function renderAllTasks() {
|
||||||
|
STATUSES.forEach((status) => renderColumn(status, false));
|
||||||
|
updateTaskCounts();
|
||||||
|
renderSortOptions();
|
||||||
|
}
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
export function createSeedTasks(now = new Date()) {
|
||||||
|
const createdDate = now.toISOString();
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '所有设备相机参数标准化',
|
||||||
|
description: '完成所有生产设备的相机参数标准化工作，确保图像采集的一致性和可靠性。',
|
||||||
|
progressNotes: '目前已完成大部分设备的参数标准化工作，仅剩DieBond贴片相机待确认参数配置。',
|
||||||
|
status: 'inProgress',
|
||||||
|
progress: 90,
|
||||||
|
assignee: '技术团队',
|
||||||
|
collaborators: [],
|
||||||
|
dueDate: '2025-02-15',
|
||||||
|
createdDate,
|
||||||
|
language: 'zh',
|
||||||
|
priority: 'high',
|
||||||
|
isPinned: false,
|
||||||
|
timeline: [],
|
||||||
|
isHidden: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'DieBond设备照明优化',
|
||||||
|
description:
|
||||||
|
'定制组合光源：同轴光+环形光，采购更窄、更亮的侧面光源，以解决支架白边问题，提升图像质量。',
|
||||||
|
progressNotes:
|
||||||
|
'配置方案已与供应商确认，技术参数符合要求。供应商承诺2025年7月4日发货，目前正在生产中。',
|
||||||
|
status: 'inProgress',
|
||||||
|
progress: 60,
|
||||||
|
assignee: '硬件团队',
|
||||||
|
collaborators: ['供应商'],
|
||||||
|
dueDate: '2025-07-04',
|
||||||
|
createdDate,
|
||||||
|
language: 'zh',
|
||||||
|
priority: 'medium',
|
||||||
|
isPinned: true,
|
||||||
|
timeline: [],
|
||||||
|
isHidden: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'DieBond和ClipBond软件界面中英文翻译更新',
|
||||||
|
description: '完成DieBond和ClipBond设备软件界面的中英文翻译工作，支持多语言操作环境。',
|
||||||
|
progressNotes:
|
||||||
|
'SG-TATA GUI 的中英文翻译已完成。未来更新杨杰的代码后，需要重新进行翻译（任务量很少）。',
|
||||||
|
status: 'inProgress',
|
||||||
|
progress: 80,
|
||||||
|
assignee: '杨杰',
|
||||||
|
collaborators: ['翻译团队'],
|
||||||
|
dueDate: '2025-02-28',
|
||||||
|
createdDate,
|
||||||
|
language: 'zh',
|
||||||
|
priority: 'medium',
|
||||||
|
isPinned: false,
|
||||||
|
timeline: [],
|
||||||
|
isHidden: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '所有设备相机手册',
|
||||||
|
description: '编写所有设备相机的操作手册，包括校准流程、位置引导方法、检测标准等技术文档。',
|
||||||
|
progressNotes: '任务刚启动，正在收集各设备的相机技术规格和操作要求。',
|
||||||
|
status: 'todo',
|
||||||
|
progress: 0,
|
||||||
|
assignee: '技术文档组',
|
||||||
|
collaborators: [],
|
||||||
|
dueDate: '2025-03-31',
|
||||||
|
createdDate,
|
||||||
|
language: 'zh',
|
||||||
|
priority: 'low',
|
||||||
|
isPinned: false,
|
||||||
|
timeline: [],
|
||||||
|
isHidden: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: '开发 TaTa SECS/GEM & Map 软件',
|
||||||
|
description:
|
||||||
|
'开发符合SEMI标准的SECS/GEM通信协议软件，实现设备与MES系统的标准化通信，包括Map数据管理功能。',
|
||||||
|
progressNotes: '需求分析阶段，正在梳理SECS/GEM协议规范和技术架构设计。',
|
||||||
|
status: 'todo',
|
||||||
|
progress: 0,
|
||||||
|
assignee: '软件开发组',
|
||||||
|
collaborators: ['系统架构师'],
|
||||||
|
dueDate: '2025-06-30',
|
||||||
|
createdDate,
|
||||||
|
language: 'zh',
|
||||||
|
priority: 'high',
|
||||||
|
isPinned: false,
|
||||||
|
timeline: [],
|
||||||
|
isHidden: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { PRIORITY_ORDER, SORT_VALUES } from './config.js';
|
||||||
|
import { isHiddenTask } from './utils.js';
|
||||||
|
|
||||||
|
const number = (task) => Number.parseInt(task.title.match(/\d+/)?.[0], 10) || 0;
|
||||||
|
const date = (value) => new Date(value).getTime() || 0;
|
||||||
|
const title = (a, b) => a.title.localeCompare(b.title);
|
||||||
|
const due = (a, b) => {
|
||||||
|
if (!a.dueDate && !b.dueDate) return 0;
|
||||||
|
if (!a.dueDate) return 1;
|
||||||
|
if (!b.dueDate) return -1;
|
||||||
|
return date(a.dueDate) - date(b.dueDate);
|
||||||
|
};
|
||||||
|
const comparators = {
|
||||||
|
title,
|
||||||
|
number: (a, b) => number(a) - number(b) || title(a, b),
|
||||||
|
dueDate: due,
|
||||||
|
priority: (a, b) => PRIORITY_ORDER[a.priority] - PRIORITY_ORDER[b.priority],
|
||||||
|
progress: (a, b) => a.progress - b.progress,
|
||||||
|
created: (a, b) => date(a.createdDate) - date(b.createdDate),
|
||||||
|
};
|
||||||
|
export function sortTasks(taskList, sortOrder = 'default') {
|
||||||
|
const result = [...taskList];
|
||||||
|
const valid = SORT_VALUES.has(sortOrder) ? sortOrder : 'default';
|
||||||
|
return result.sort((a, b) => {
|
||||||
|
if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
|
||||||
|
if (isHiddenTask(a) !== isHiddenTask(b)) return isHiddenTask(a) ? 1 : -1;
|
||||||
|
if (valid === 'default')
|
||||||
|
return (
|
||||||
|
PRIORITY_ORDER[b.priority] - PRIORITY_ORDER[a.priority] ||
|
||||||
|
date(b.createdDate) - date(a.createdDate)
|
||||||
|
);
|
||||||
|
const [key, direction] = valid.split('-');
|
||||||
|
if (key === 'dueDate' && (!a.dueDate || !b.dueDate)) return due(a, b);
|
||||||
|
return comparators[key](a, b) * (direction === 'desc' ? -1 : 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { STORAGE_KEYS } from './config.js';
|
||||||
|
|
||||||
|
let writeFailed = false;
|
||||||
|
export function consumeStorageWriteFailure() {
|
||||||
|
const failed = writeFailed;
|
||||||
|
writeFailed = false;
|
||||||
|
return failed;
|
||||||
|
}
|
||||||
|
function readRaw(key) {
|
||||||
|
try {
|
||||||
|
return { value: localStorage.getItem(key), available: true };
|
||||||
|
} catch {
|
||||||
|
return { value: null, available: false };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function writeRaw(key, value) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key, value);
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
writeFailed = true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function readJson(key, fallback) {
|
||||||
|
const { value, available } = readRaw(key);
|
||||||
|
if (!available || value === null) return fallback;
|
||||||
|
try {
|
||||||
|
return JSON.parse(value);
|
||||||
|
} catch {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function writeJson(key, value) {
|
||||||
|
return writeRaw(key, JSON.stringify(value));
|
||||||
|
}
|
||||||
|
export function loadTasksData() {
|
||||||
|
const { value: raw, available } = readRaw(STORAGE_KEYS.tasks);
|
||||||
|
if (!available) return { tasks: [], corrupted: false, exists: false, available: false };
|
||||||
|
if (raw === null) return { tasks: [], corrupted: false, exists: false, available: true };
|
||||||
|
writeRaw(STORAGE_KEYS.initialized, 'true');
|
||||||
|
try {
|
||||||
|
const tasks = JSON.parse(raw);
|
||||||
|
if (!Array.isArray(tasks)) throw new TypeError('Tasks must be an array');
|
||||||
|
return { tasks, corrupted: false, exists: true, available: true };
|
||||||
|
} catch {
|
||||||
|
writeRaw(STORAGE_KEYS.corruptedBackup, raw);
|
||||||
|
return { tasks: [], corrupted: true, exists: true, available: true };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export const saveTasksData = (tasks) => writeJson(STORAGE_KEYS.tasks, tasks);
|
||||||
|
export const loadSortOrdersData = () => readJson(STORAGE_KEYS.sortOrders, {});
|
||||||
|
export const saveSortOrdersData = (orders) => writeJson(STORAGE_KEYS.sortOrders, orders);
|
||||||
|
export const loadShowHiddenData = (status) => {
|
||||||
|
const key = STORAGE_KEYS.showHidden[status];
|
||||||
|
return key ? readJson(key, false) === true : false;
|
||||||
|
};
|
||||||
|
export const saveShowHiddenData = (status, value) => {
|
||||||
|
const key = STORAGE_KEYS.showHidden[status];
|
||||||
|
return key ? writeJson(key, value) : false;
|
||||||
|
};
|
||||||
|
export const isInitialized = () => readRaw(STORAGE_KEYS.initialized).value !== null;
|
||||||
|
export const markInitialized = () => writeRaw(STORAGE_KEYS.initialized, 'true');
|
||||||
+107
@@ -0,0 +1,107 @@
|
|||||||
|
import { DEFAULT_SORT_ORDERS, HIDEABLE_STATUSES, SORT_VALUES, STATUSES } from './config.js';
|
||||||
|
import { normalizeSortOrders, normalizeTask, normalizeTasks } from './task-model.js';
|
||||||
|
import { generateUniqueId } from './utils.js';
|
||||||
|
import {
|
||||||
|
loadShowHiddenData,
|
||||||
|
loadSortOrdersData,
|
||||||
|
loadTasksData,
|
||||||
|
markInitialized,
|
||||||
|
saveShowHiddenData,
|
||||||
|
saveSortOrdersData,
|
||||||
|
saveTasksData,
|
||||||
|
} from './storage.js';
|
||||||
|
|
||||||
|
let tasks = [];
|
||||||
|
let sortOrders = { ...DEFAULT_SORT_ORDERS };
|
||||||
|
let showHidden = Object.fromEntries(HIDEABLE_STATUSES.map((status) => [status, false]));
|
||||||
|
let corrupted = false;
|
||||||
|
const persistTasks = () => saveTasksData(tasks);
|
||||||
|
export function initializeStore(seedTasks, initialized) {
|
||||||
|
const loaded = loadTasksData();
|
||||||
|
corrupted = loaded.corrupted;
|
||||||
|
tasks = normalizeTasks(loaded.tasks);
|
||||||
|
if (loaded.exists && !loaded.corrupted) persistTasks();
|
||||||
|
if (!initialized && !loaded.exists) {
|
||||||
|
tasks = normalizeTasks(seedTasks);
|
||||||
|
persistTasks();
|
||||||
|
markInitialized();
|
||||||
|
}
|
||||||
|
sortOrders = { ...DEFAULT_SORT_ORDERS, ...normalizeSortOrders(loadSortOrdersData()) };
|
||||||
|
showHidden = Object.fromEntries(
|
||||||
|
HIDEABLE_STATUSES.map((status) => [status, loadShowHiddenData(status)]),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export const wasCorrupted = () => corrupted;
|
||||||
|
export const getTasks = () => tasks.map((task) => structuredClone(task));
|
||||||
|
export const getTask = (id) => {
|
||||||
|
const task = tasks.find((item) => item.id === id);
|
||||||
|
return task ? structuredClone(task) : null;
|
||||||
|
};
|
||||||
|
export const getSortOrders = () => ({ ...sortOrders });
|
||||||
|
export const getShowHidden = (status) => showHidden[status] === true;
|
||||||
|
export function addTask(task) {
|
||||||
|
const normalized = normalizeTask(task);
|
||||||
|
const ids = new Set(tasks.map((item) => item.id));
|
||||||
|
if (ids.has(normalized.id)) normalized.id = generateUniqueId(ids);
|
||||||
|
tasks.push(normalized);
|
||||||
|
persistTasks();
|
||||||
|
return structuredClone(normalized);
|
||||||
|
}
|
||||||
|
export function updateTask(id, changes) {
|
||||||
|
const index = tasks.findIndex((task) => task.id === id);
|
||||||
|
if (index < 0) return null;
|
||||||
|
tasks[index] = normalizeTask({ ...tasks[index], ...changes, id });
|
||||||
|
persistTasks();
|
||||||
|
return structuredClone(tasks[index]);
|
||||||
|
}
|
||||||
|
export function removeTask(id) {
|
||||||
|
const before = tasks.length;
|
||||||
|
tasks = tasks.filter((task) => task.id !== id);
|
||||||
|
if (tasks.length !== before) persistTasks();
|
||||||
|
return tasks.length !== before;
|
||||||
|
}
|
||||||
|
export function togglePin(id) {
|
||||||
|
const task = tasks.find((item) => item.id === id);
|
||||||
|
if (!task) return null;
|
||||||
|
task.isPinned = !task.isPinned;
|
||||||
|
persistTasks();
|
||||||
|
return structuredClone(task);
|
||||||
|
}
|
||||||
|
export function toggleHidden(id) {
|
||||||
|
const task = tasks.find((item) => item.id === id);
|
||||||
|
if (!task) return null;
|
||||||
|
task.isHidden = !task.isHidden;
|
||||||
|
persistTasks();
|
||||||
|
return structuredClone(task);
|
||||||
|
}
|
||||||
|
export function setSortOrder(status, value) {
|
||||||
|
if (!STATUSES.includes(status) || !SORT_VALUES.has(value)) return false;
|
||||||
|
sortOrders[status] = value;
|
||||||
|
saveSortOrdersData(sortOrders);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
export function setShowHidden(status, value) {
|
||||||
|
if (!HIDEABLE_STATUSES.includes(status) || typeof value !== 'boolean') return false;
|
||||||
|
showHidden[status] = value;
|
||||||
|
saveShowHiddenData(status, value);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
export function replaceTasks(value) {
|
||||||
|
tasks = normalizeTasks(value);
|
||||||
|
persistTasks();
|
||||||
|
}
|
||||||
|
export function appendTasks(value) {
|
||||||
|
const ids = new Set(tasks.map((task) => task.id));
|
||||||
|
const additions = normalizeTasks(value).map((task) => {
|
||||||
|
if (ids.has(task.id)) task.id = generateUniqueId(ids);
|
||||||
|
else ids.add(task.id);
|
||||||
|
return task;
|
||||||
|
});
|
||||||
|
tasks = [...tasks, ...additions];
|
||||||
|
persistTasks();
|
||||||
|
return additions.map((task) => structuredClone(task));
|
||||||
|
}
|
||||||
|
export function replaceSortOrders(value) {
|
||||||
|
sortOrders = { ...sortOrders, ...normalizeSortOrders(value) };
|
||||||
|
saveSortOrdersData(sortOrders);
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { LANGUAGES, PRIORITIES, SORT_VALUES, STATUSES } from './config.js';
|
||||||
|
import { generateId, generateUniqueId, isValidId } from './utils.js';
|
||||||
|
|
||||||
|
const TIMELINE_TYPES = ['manual-entry', 'status-change', 'progress-update', 'progressNotesUpdated'];
|
||||||
|
export function normalizeTask(input) {
|
||||||
|
const task = input && typeof input === 'object' ? { ...input } : {};
|
||||||
|
task.title = String(task.title ?? '').trim();
|
||||||
|
task.description = String(task.description ?? '');
|
||||||
|
task.progressNotes = String(task.progressNotes ?? '');
|
||||||
|
task.assignee = String(task.assignee ?? '');
|
||||||
|
task.dueDate = typeof task.dueDate === 'string' ? task.dueDate : '';
|
||||||
|
task.createdDate =
|
||||||
|
task.createdDate && !Number.isNaN(Date.parse(task.createdDate))
|
||||||
|
? task.createdDate
|
||||||
|
: new Date().toISOString();
|
||||||
|
task.status = STATUSES.includes(task.status) ? task.status : 'todo';
|
||||||
|
task.priority = PRIORITIES.includes(task.priority) ? task.priority : 'medium';
|
||||||
|
task.language = LANGUAGES.includes(task.language) ? task.language : 'zh';
|
||||||
|
task.progress = Math.min(100, Math.max(0, Number.parseInt(task.progress, 10) || 0));
|
||||||
|
task.collaborators = Array.isArray(task.collaborators) ? task.collaborators.map(String) : [];
|
||||||
|
task.isPinned = task.isPinned === true;
|
||||||
|
task.isHidden = task.isHidden === true;
|
||||||
|
task.id = isValidId(task.id) ? task.id : generateId();
|
||||||
|
const timelineIds = new Set();
|
||||||
|
task.timeline = (Array.isArray(task.timeline) ? task.timeline : [])
|
||||||
|
.filter((item) => item && typeof item === 'object' && !Array.isArray(item))
|
||||||
|
.map((item) => {
|
||||||
|
let id = isValidId(item.id) ? item.id : generateId();
|
||||||
|
while (timelineIds.has(id)) id = generateId();
|
||||||
|
timelineIds.add(id);
|
||||||
|
return { ...item, id, type: TIMELINE_TYPES.includes(item.type) ? item.type : 'manual-entry' };
|
||||||
|
});
|
||||||
|
return task;
|
||||||
|
}
|
||||||
|
export function normalizeTasks(items) {
|
||||||
|
if (!Array.isArray(items)) return [];
|
||||||
|
const ids = new Set();
|
||||||
|
return items
|
||||||
|
.filter((item) => item && typeof item === 'object')
|
||||||
|
.map((item) => {
|
||||||
|
const task = normalizeTask(item);
|
||||||
|
if (ids.has(task.id)) task.id = generateUniqueId(ids);
|
||||||
|
else ids.add(task.id);
|
||||||
|
return task;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function normalizeSortOrders(value) {
|
||||||
|
if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
|
||||||
|
return Object.fromEntries(
|
||||||
|
STATUSES.filter((status) => SORT_VALUES.has(value[status])).map((status) => [
|
||||||
|
status,
|
||||||
|
value[status],
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export { isValidId } from './utils.js';
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { t } from './i18n/index.js';
|
||||||
|
import { getTask, updateTask } from './store.js';
|
||||||
|
import { formatLocalDate, generateUniqueId } from './utils.js';
|
||||||
|
|
||||||
|
export function addSystemEntries(task, changes) {
|
||||||
|
const timeline = [...task.timeline];
|
||||||
|
const fields = [
|
||||||
|
['progressNotes', 'progressNotesUpdated', 'progressNotesUpdated', (a, b) => ({ value: b })],
|
||||||
|
['status', 'status-change', 'statusChanged', (a, b) => ({ from: a, to: b })],
|
||||||
|
['progress', 'progress-update', 'progressUpdated', (a, b) => ({ from: a, to: b })],
|
||||||
|
['assignee', 'status-change', 'assigneeChanged', (a, b) => ({ from: a, to: b })],
|
||||||
|
['dueDate', 'status-change', 'dueDateChanged', (a, b) => ({ from: a, to: b })],
|
||||||
|
['priority', 'status-change', 'priorityChanged', (a, b) => ({ from: a, to: b })],
|
||||||
|
];
|
||||||
|
const used = new Set(timeline.map((item) => item.id));
|
||||||
|
fields.forEach(([field, type, key, values]) => {
|
||||||
|
if (Object.hasOwn(changes, field) && task[field] !== changes[field])
|
||||||
|
timeline.push({
|
||||||
|
id: generateUniqueId(used),
|
||||||
|
date: formatLocalDate(),
|
||||||
|
type,
|
||||||
|
content: '',
|
||||||
|
event: { key, values: values(task[field], changes[field]) },
|
||||||
|
userType: 'system',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return timeline;
|
||||||
|
}
|
||||||
|
export function addTimelineEntry(taskId, content) {
|
||||||
|
const task = getTask(taskId);
|
||||||
|
if (!task || !content.trim()) return false;
|
||||||
|
const id = generateUniqueId(new Set(task.timeline.map((item) => item.id)));
|
||||||
|
task.timeline.push({
|
||||||
|
id,
|
||||||
|
date: formatLocalDate(),
|
||||||
|
type: 'manual-entry',
|
||||||
|
content: content.trim(),
|
||||||
|
user: task.assignee || t('defaultUser'),
|
||||||
|
});
|
||||||
|
updateTask(taskId, { timeline: task.timeline });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
export function updateTimelineEntry(taskId, timelineId, content) {
|
||||||
|
const task = getTask(taskId);
|
||||||
|
const item = task?.timeline.find((entry) => entry.id === timelineId);
|
||||||
|
if (!item || !content.trim()) return false;
|
||||||
|
const wasSystem = item.userType === 'system';
|
||||||
|
item.content = content.trim();
|
||||||
|
item.type = 'manual-entry';
|
||||||
|
if (wasSystem || !item.user) item.user = task.assignee || t('defaultUser');
|
||||||
|
delete item.event;
|
||||||
|
delete item.userType;
|
||||||
|
updateTask(taskId, { timeline: task.timeline });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
export function deleteTimelineEntry(taskId, timelineId) {
|
||||||
|
const task = getTask(taskId);
|
||||||
|
if (!task) return false;
|
||||||
|
const timeline = task.timeline.filter((item) => item.id !== timelineId);
|
||||||
|
if (timeline.length === task.timeline.length) return false;
|
||||||
|
updateTask(taskId, { timeline });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import { DUE_SOON_DAYS, HIDEABLE_STATUSES } from './config.js';
|
||||||
|
|
||||||
|
// Only todo and completed tasks can be hidden, so the flag is inert in any other column.
|
||||||
|
export const isHiddenTask = (task) =>
|
||||||
|
task.isHidden === true && HIDEABLE_STATUSES.includes(task.status);
|
||||||
|
|
||||||
|
let idCounter = 0;
|
||||||
|
export const generateId = () => Date.now() * 1000 + (idCounter++ % 1000);
|
||||||
|
export function generateUniqueId(usedIds) {
|
||||||
|
let id = generateId();
|
||||||
|
while (usedIds.has(id)) id = generateId();
|
||||||
|
usedIds.add(id);
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
export const isValidId = (value) => Number.isSafeInteger(value) && value > 0;
|
||||||
|
export function escapeHtml(value) {
|
||||||
|
return String(value ?? '')
|
||||||
|
.replaceAll('&', '&')
|
||||||
|
.replaceAll('<', '<')
|
||||||
|
.replaceAll('>', '>')
|
||||||
|
.replaceAll('"', '"')
|
||||||
|
.replaceAll("'", ''');
|
||||||
|
}
|
||||||
|
export function formatLocalDate(date = new Date()) {
|
||||||
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
export function parseDueDateEnd(value) {
|
||||||
|
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value ?? '');
|
||||||
|
if (!match) return null;
|
||||||
|
const [, y, m, d] = match.map(Number);
|
||||||
|
const date = new Date(y, m - 1, d, 23, 59, 59, 999);
|
||||||
|
return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
|
||||||
|
? date
|
||||||
|
: null;
|
||||||
|
}
|
||||||
|
export function getDueDateState(value, now = new Date()) {
|
||||||
|
const dueEnd = parseDueDateEnd(value);
|
||||||
|
if (!dueEnd) return { isOverdue: false, isDueSoon: false };
|
||||||
|
const soonEnd = new Date(now);
|
||||||
|
soonEnd.setDate(soonEnd.getDate() + DUE_SOON_DAYS);
|
||||||
|
soonEnd.setHours(23, 59, 59, 999);
|
||||||
|
return { isOverdue: dueEnd < now, isDueSoon: dueEnd >= now && dueEnd <= soonEnd };
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
|
||||||
|
### 待办
|
||||||
|
- 1、打印任务功能
|
||||||
|
- 2、任务中英文切换
|
||||||
|
- 3、记录创建日期，用于 Completed 分类中的排序
|
||||||
|
|
||||||
|
|
||||||
|
### 进行中
|
||||||
|
|
||||||
|
- V1.0 #1、拆分成 html、cs、js
|
||||||
|
- V1.0 #2、将Json文件 改名为backup-tasks-yyyy-mm-dd.json
|
||||||
|
|
||||||
|
|
||||||
|
### 已完成
|
||||||
|
|
||||||
|
### V1.0
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### V0.3
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- 1、【待办事项】添加隐藏任务功能
|
||||||
|
```
|
||||||
|
|
||||||
|
### V0.2
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- 1、数据保存到本地。Json 文件格式
|
||||||
|
- 2、去除按钮 【检测到期按钮提醒】，保留刷新时自动检测
|
||||||
|
- 3、已完成栏，可以隐藏任务功能
|
||||||
|
```
|
||||||
|
|
||||||
|
### V0.1
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- 1、时间轴的内容可以编辑，修改，添加
|
||||||
|
- 2、添加软件图标
|
||||||
|
```
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"version": "1.0",
|
||||||
|
"exportDate": "2025-01-10T08:00:00.000Z",
|
||||||
|
"localDate": "2025-01-10",
|
||||||
|
"taskCount": 2,
|
||||||
|
"data": {
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"id": 101,
|
||||||
|
"title": "Legacy todo",
|
||||||
|
"description": "Created by the pre-refactor app",
|
||||||
|
"progressNotes": "Existing progress",
|
||||||
|
"status": "todo",
|
||||||
|
"progress": 25,
|
||||||
|
"assignee": "Alice",
|
||||||
|
"collaborators": ["Bob"],
|
||||||
|
"dueDate": "2025-02-01",
|
||||||
|
"createdDate": "2025-01-01T08:00:00.000Z",
|
||||||
|
"language": "en",
|
||||||
|
"priority": "high",
|
||||||
|
"isPinned": true,
|
||||||
|
"isHidden": false,
|
||||||
|
"timeline": [
|
||||||
|
{
|
||||||
|
"id": 1001,
|
||||||
|
"date": "2025-01-01",
|
||||||
|
"type": "manual-entry",
|
||||||
|
"content": "Legacy timeline entry",
|
||||||
|
"user": "Alice"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 102,
|
||||||
|
"title": "Legacy completed",
|
||||||
|
"description": "",
|
||||||
|
"progressNotes": "",
|
||||||
|
"status": "completed",
|
||||||
|
"progress": 100,
|
||||||
|
"assignee": "",
|
||||||
|
"collaborators": [],
|
||||||
|
"dueDate": "",
|
||||||
|
"createdDate": "2025-01-02T08:00:00.000Z",
|
||||||
|
"language": "zh",
|
||||||
|
"priority": "low",
|
||||||
|
"isPinned": false,
|
||||||
|
"isHidden": true,
|
||||||
|
"timeline": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"sortOrders": {
|
||||||
|
"todo": "priority-desc",
|
||||||
|
"inProgress": "created-asc",
|
||||||
|
"completed": "title-asc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,505 @@
|
|||||||
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
import legacyBackup from './backup-tasks-v1.json' with { type: 'json' };
|
||||||
|
import { HIDEABLE_STATUSES, STATUSES } from '../src/js/config.js';
|
||||||
|
import { t } from '../src/js/i18n/index.js';
|
||||||
|
import { normalizeTask, normalizeTasks } from '../src/js/task-model.js';
|
||||||
|
import { sortTasks } from '../src/js/sort.js';
|
||||||
|
import { getDueDateState } from '../src/js/utils.js';
|
||||||
|
import { applySearchFilter, renderColumn, updateTaskCounts } from '../src/js/render.js';
|
||||||
|
import { addSystemEntries, addTimelineEntry, updateTimelineEntry } from '../src/js/timeline.js';
|
||||||
|
import {
|
||||||
|
executeImport,
|
||||||
|
exportData,
|
||||||
|
mergeTasks,
|
||||||
|
readImportFile,
|
||||||
|
validateImportData,
|
||||||
|
} from '../src/js/import-export.js';
|
||||||
|
import {
|
||||||
|
consumeStorageWriteFailure,
|
||||||
|
isInitialized,
|
||||||
|
loadShowHiddenData,
|
||||||
|
loadSortOrdersData,
|
||||||
|
loadTasksData,
|
||||||
|
} from '../src/js/storage.js';
|
||||||
|
import {
|
||||||
|
addTask,
|
||||||
|
appendTasks,
|
||||||
|
getShowHidden,
|
||||||
|
getSortOrders,
|
||||||
|
getTasks,
|
||||||
|
initializeStore,
|
||||||
|
setShowHidden,
|
||||||
|
setSortOrder,
|
||||||
|
updateTask,
|
||||||
|
} from '../src/js/store.js';
|
||||||
|
import { createSeedTasks } from '../src/js/seed-data.js';
|
||||||
|
|
||||||
|
const base = (id, title, extra = {}) => ({
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
status: 'todo',
|
||||||
|
priority: 'medium',
|
||||||
|
progress: 20,
|
||||||
|
createdDate: `2025-01-${String(id).padStart(2, '0')}T00:00:00Z`,
|
||||||
|
dueDate: `2025-01-${String(id).padStart(2, '0')}`,
|
||||||
|
timeline: [],
|
||||||
|
...extra,
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => localStorage.clear());
|
||||||
|
afterEach(() => vi.restoreAllMocks());
|
||||||
|
|
||||||
|
describe('task model', () => {
|
||||||
|
it('normalizes fields and language whitelist', () => {
|
||||||
|
const task = normalizeTask({
|
||||||
|
id: 1,
|
||||||
|
title: ' x ',
|
||||||
|
language: 'fr',
|
||||||
|
progress: 999,
|
||||||
|
status: 'bad',
|
||||||
|
});
|
||||||
|
expect(task).toMatchObject({ title: 'x', language: 'zh', progress: 100, status: 'todo' });
|
||||||
|
expect(normalizeTask({ id: 2, title: 'English', language: 'en' }).language).toBe('en');
|
||||||
|
});
|
||||||
|
it('deduplicates task and timeline ids', () => {
|
||||||
|
const tasks = normalizeTasks([
|
||||||
|
base(1, 'a', { timeline: [{ id: 5 }, { id: 5 }] }),
|
||||||
|
base(1, 'b'),
|
||||||
|
]);
|
||||||
|
expect(new Set(tasks.map((task) => task.id)).size).toBe(2);
|
||||||
|
expect(new Set(tasks[0].timeline.map((item) => item.id)).size).toBe(2);
|
||||||
|
});
|
||||||
|
it('drops non-object timeline entries from legacy data', () => {
|
||||||
|
const task = normalizeTask({
|
||||||
|
...base(1, 'dirty timeline'),
|
||||||
|
timeline: ['oops', 42, true, null, [], { id: 7, content: 'valid' }],
|
||||||
|
});
|
||||||
|
expect(task.timeline).toEqual([{ id: 7, content: 'valid', type: 'manual-entry' }]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('all 13 sorts', () => {
|
||||||
|
const tasks = [
|
||||||
|
base(1, 'Beta 10', {
|
||||||
|
priority: 'medium',
|
||||||
|
progress: 50,
|
||||||
|
dueDate: '2025-03-02',
|
||||||
|
createdDate: '2025-01-02T00:00:00Z',
|
||||||
|
}),
|
||||||
|
base(2, 'Alpha 2', {
|
||||||
|
priority: 'high',
|
||||||
|
progress: 90,
|
||||||
|
dueDate: '2025-03-03',
|
||||||
|
createdDate: '2025-01-03T00:00:00Z',
|
||||||
|
}),
|
||||||
|
base(3, 'Gamma 1', {
|
||||||
|
priority: 'low',
|
||||||
|
progress: 10,
|
||||||
|
dueDate: '2025-03-01',
|
||||||
|
createdDate: '2025-01-01T00:00:00Z',
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
const expected = {
|
||||||
|
default: [2, 1, 3],
|
||||||
|
'title-asc': [2, 1, 3],
|
||||||
|
'title-desc': [3, 1, 2],
|
||||||
|
'number-asc': [3, 2, 1],
|
||||||
|
'number-desc': [1, 2, 3],
|
||||||
|
'dueDate-asc': [3, 1, 2],
|
||||||
|
'dueDate-desc': [2, 1, 3],
|
||||||
|
'priority-asc': [3, 1, 2],
|
||||||
|
'priority-desc': [2, 1, 3],
|
||||||
|
'progress-asc': [3, 1, 2],
|
||||||
|
'progress-desc': [2, 1, 3],
|
||||||
|
'created-asc': [3, 1, 2],
|
||||||
|
'created-desc': [2, 1, 3],
|
||||||
|
};
|
||||||
|
it.each(Object.entries(expected))('sorts %s in the expected order', (order, ids) => {
|
||||||
|
const copy = structuredClone(tasks);
|
||||||
|
expect(sortTasks(tasks, order).map((task) => task.id)).toEqual(ids);
|
||||||
|
expect(tasks).toEqual(copy);
|
||||||
|
});
|
||||||
|
it('keeps pinned first for every sort', () => {
|
||||||
|
const pinned = { ...tasks[2], isPinned: true };
|
||||||
|
Object.keys(expected).forEach((order) =>
|
||||||
|
expect(sortTasks([tasks[0], tasks[1], pinned], order)[0].id).toBe(3),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('keeps hidden todo tasks last but leaves hidden in-progress tasks in place', () => {
|
||||||
|
const hiddenTodo = { ...tasks[1], isHidden: true };
|
||||||
|
expect(sortTasks([hiddenTodo, tasks[0]], 'title-asc').map((task) => task.id)).toEqual([1, 2]);
|
||||||
|
const hiddenWork = { ...tasks[1], status: 'inProgress', isHidden: true };
|
||||||
|
expect(sortTasks([hiddenWork, tasks[0]], 'title-asc').map((task) => task.id)).toEqual([2, 1]);
|
||||||
|
});
|
||||||
|
it('keeps tasks without due dates last in both directions', () => {
|
||||||
|
const dated = base(1, 'Dated');
|
||||||
|
const undated = { ...base(2, 'Undated'), dueDate: '' };
|
||||||
|
expect(sortTasks([undated, dated], 'dueDate-asc').map((task) => task.id)).toEqual([1, 2]);
|
||||||
|
expect(sortTasks([undated, dated], 'dueDate-desc').map((task) => task.id)).toEqual([1, 2]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('due dates', () => {
|
||||||
|
const now = new Date(2025, 0, 10, 12);
|
||||||
|
it('detects overdue and due-soon boundaries', () => {
|
||||||
|
expect(getDueDateState('2025-01-09', now)).toEqual({ isOverdue: true, isDueSoon: false });
|
||||||
|
expect(getDueDateState('2025-01-10', now)).toEqual({ isOverdue: false, isDueSoon: true });
|
||||||
|
expect(getDueDateState('2025-01-13', now).isDueSoon).toBe(true);
|
||||||
|
expect(getDueDateState('2025-01-14', now).isDueSoon).toBe(false);
|
||||||
|
});
|
||||||
|
it('ignores empty and invalid dates', () => {
|
||||||
|
expect(getDueDateState('', now)).toEqual({ isOverdue: false, isDueSoon: false });
|
||||||
|
expect(getDueDateState('2025-02-30', now)).toEqual({ isOverdue: false, isDueSoon: false });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('seed data', () => {
|
||||||
|
it('creates five unique tasks at the initialization time', () => {
|
||||||
|
const now = new Date('2026-07-19T02:54:00.000Z');
|
||||||
|
const tasks = createSeedTasks(now);
|
||||||
|
expect(tasks).toHaveLength(5);
|
||||||
|
expect(new Set(tasks.map((task) => task.id)).size).toBe(5);
|
||||||
|
expect(tasks.every((task) => task.createdDate === now.toISOString())).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('storage and store compatibility', () => {
|
||||||
|
it('distinguishes a missing task key from an intentionally empty task list', () => {
|
||||||
|
expect(loadTasksData()).toMatchObject({ tasks: [], corrupted: false, exists: false });
|
||||||
|
localStorage.setItem('tasks', '[]');
|
||||||
|
expect(loadTasksData()).toMatchObject({ tasks: [], corrupted: false, exists: true });
|
||||||
|
});
|
||||||
|
it('preserves corrupted raw data without replacing it with seed tasks', () => {
|
||||||
|
localStorage.setItem('tasks', '{broken');
|
||||||
|
initializeStore([base(1, 'Seed')], false);
|
||||||
|
expect(getTasks()).toEqual([]);
|
||||||
|
expect(localStorage.getItem('tasks')).toBe('{broken');
|
||||||
|
expect(localStorage.getItem('tasksCorruptedBackup')).toBe('{broken');
|
||||||
|
});
|
||||||
|
it('restores all legacy preferences and task fields', () => {
|
||||||
|
localStorage.setItem('tasks', JSON.stringify(legacyBackup.data.tasks));
|
||||||
|
localStorage.setItem('taskSortOrders', JSON.stringify(legacyBackup.data.sortOrders));
|
||||||
|
localStorage.setItem('showHiddenCompletedTasks', 'true');
|
||||||
|
localStorage.setItem('showHiddenTodoTasks', 'false');
|
||||||
|
localStorage.setItem('tasksInitialized', 'true');
|
||||||
|
localStorage.setItem('tasksCorruptedBackup', '{historical backup');
|
||||||
|
initializeStore([], isInitialized());
|
||||||
|
expect(getTasks()).toMatchObject(legacyBackup.data.tasks);
|
||||||
|
expect(getSortOrders()).toEqual(legacyBackup.data.sortOrders);
|
||||||
|
expect(getShowHidden('completed')).toBe(true);
|
||||||
|
expect(getShowHidden('todo')).toBe(false);
|
||||||
|
expect(loadSortOrdersData()).toEqual(legacyBackup.data.sortOrders);
|
||||||
|
expect(loadShowHiddenData('completed')).toBe(true);
|
||||||
|
expect(localStorage.getItem('tasksCorruptedBackup')).toBe('{historical backup');
|
||||||
|
});
|
||||||
|
it('maintains store ids and rejects invalid preference mutations', () => {
|
||||||
|
initializeStore([], true);
|
||||||
|
const first = addTask(base(1, 'First'));
|
||||||
|
const duplicate = addTask(base(1, 'Second'));
|
||||||
|
const [appended] = appendTasks([base(first.id, 'Third')]);
|
||||||
|
expect(new Set([first.id, duplicate.id, appended.id]).size).toBe(3);
|
||||||
|
expect(setSortOrder('invalid', 'title-asc')).toBe(false);
|
||||||
|
expect(setSortOrder('todo', 'invalid')).toBe(false);
|
||||||
|
expect(setShowHidden('inProgress', true)).toBe(false);
|
||||||
|
expect(localStorage.getItem('undefined')).toBeNull();
|
||||||
|
});
|
||||||
|
it('degrades safely when storage access throws', () => {
|
||||||
|
const getItem = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
|
||||||
|
throw new DOMException('blocked', 'SecurityError');
|
||||||
|
});
|
||||||
|
expect(loadTasksData()).toMatchObject({ tasks: [], exists: false, available: false });
|
||||||
|
expect(isInitialized()).toBe(false);
|
||||||
|
getItem.mockRestore();
|
||||||
|
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
|
||||||
|
throw new DOMException('full', 'QuotaExceededError');
|
||||||
|
});
|
||||||
|
expect(() => initializeStore([base(1, 'Seed')], false)).not.toThrow();
|
||||||
|
expect(consumeStorageWriteFailure()).toBe(true);
|
||||||
|
expect(consumeStorageWriteFailure()).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('imports', () => {
|
||||||
|
function loadPending(data) {
|
||||||
|
const original = globalThis.FileReader;
|
||||||
|
class FakeReader {
|
||||||
|
readAsText() {
|
||||||
|
this.result = JSON.stringify(data);
|
||||||
|
this.onload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
globalThis.FileReader = FakeReader;
|
||||||
|
readImportFile({}, vi.fn(), vi.fn(), vi.fn());
|
||||||
|
globalThis.FileReader = original;
|
||||||
|
}
|
||||||
|
beforeEach(() => {
|
||||||
|
globalThis.bootstrap = {
|
||||||
|
Modal: { getOrCreateInstance: () => ({ hide: vi.fn(), show: vi.fn() }) },
|
||||||
|
};
|
||||||
|
document.body.innerHTML = '<div id="importModal"></div>';
|
||||||
|
initializeStore([], true);
|
||||||
|
});
|
||||||
|
it('validates the legacy export fixture', () => {
|
||||||
|
expect(validateImportData(legacyBackup)).toBe(true);
|
||||||
|
expect(validateImportData({ version: '1.0', data: { tasks: [] } })).toBe(true);
|
||||||
|
});
|
||||||
|
it('rejects unsupported versions, invalid task shapes, and dates', () => {
|
||||||
|
expect(validateImportData(null)).toBe(false);
|
||||||
|
expect(validateImportData({ version: '2.0', data: { tasks: [] } })).toBe(false);
|
||||||
|
expect(validateImportData({ version: '1.0', data: { tasks: 'bad' } })).toBe(false);
|
||||||
|
expect(
|
||||||
|
validateImportData({
|
||||||
|
version: '1.0',
|
||||||
|
data: { tasks: [{ id: 1, title: '', status: 'todo' }] },
|
||||||
|
}),
|
||||||
|
).toBe(false);
|
||||||
|
expect(
|
||||||
|
validateImportData({
|
||||||
|
version: '1.0',
|
||||||
|
data: { tasks: [{ ...base(1, 'Bad date'), dueDate: '2025-02-30' }] },
|
||||||
|
}),
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
|
it('deduplicates merge key and preserves missing dates', () => {
|
||||||
|
const existing = [base(1, 'Same')];
|
||||||
|
const result = mergeTasks(existing, [
|
||||||
|
base(2, 'Same', { createdDate: existing[0].createdDate }),
|
||||||
|
{ ...base(3, 'Same'), createdDate: undefined },
|
||||||
|
]);
|
||||||
|
expect(result.skipped).toBe(1);
|
||||||
|
expect(result.tasks).toHaveLength(2);
|
||||||
|
expect(new Set(result.tasks.map((task) => task.id)).size).toBe(2);
|
||||||
|
});
|
||||||
|
it('executes replacement import with legacy tasks and sort orders', () => {
|
||||||
|
addTask(base(1, 'Existing'));
|
||||||
|
loadPending(legacyBackup);
|
||||||
|
expect(executeImport('replace')).toBe(0);
|
||||||
|
expect(getTasks()).toMatchObject(legacyBackup.data.tasks);
|
||||||
|
expect(getSortOrders()).toEqual(legacyBackup.data.sortOrders);
|
||||||
|
});
|
||||||
|
it('executes merge import and reports duplicates', () => {
|
||||||
|
const existing = legacyBackup.data.tasks[0];
|
||||||
|
addTask(existing);
|
||||||
|
loadPending(legacyBackup);
|
||||||
|
expect(executeImport('merge')).toBe(1);
|
||||||
|
expect(getTasks()).toHaveLength(2);
|
||||||
|
});
|
||||||
|
it('rejects an invalid import mode', () => {
|
||||||
|
loadPending(legacyBackup);
|
||||||
|
expect(() => executeImport('unexpected')).toThrow(TypeError);
|
||||||
|
});
|
||||||
|
it('clears a previous pending import when a newly selected file is invalid', () => {
|
||||||
|
loadPending(legacyBackup);
|
||||||
|
loadPending({ version: '1.0', data: { tasks: 'invalid' } });
|
||||||
|
expect(() => executeImport('replace')).toThrow('No import pending');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('timeline entries', () => {
|
||||||
|
beforeEach(() => initializeStore([], true));
|
||||||
|
|
||||||
|
it('ignores fields that the change set omits', () => {
|
||||||
|
const task = addTask(base(1, 'Untouched', { assignee: 'Ada', dueDate: '2025-01-01' }));
|
||||||
|
expect(addSystemEntries(task, { progress: task.progress })).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('records only the fields that actually changed', () => {
|
||||||
|
const task = addTask(base(1, 'Changed'));
|
||||||
|
const timeline = addSystemEntries(task, { progress: 80, status: task.status });
|
||||||
|
expect(timeline).toHaveLength(1);
|
||||||
|
expect(timeline[0].event).toEqual({ key: 'progressUpdated', values: { from: 20, to: 80 } });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('turns an edited system entry into a manual entry owned by the assignee', () => {
|
||||||
|
const task = addTask(base(1, 'Edited', { assignee: 'Ada' }));
|
||||||
|
const timeline = addSystemEntries(task, { progress: 80 });
|
||||||
|
updateTask(task.id, { timeline });
|
||||||
|
expect(updateTimelineEntry(task.id, timeline[0].id, ' my own words ')).toBe(true);
|
||||||
|
const [stored] = getTasks();
|
||||||
|
expect(stored.timeline[0]).toMatchObject({
|
||||||
|
type: 'manual-entry',
|
||||||
|
content: 'my own words',
|
||||||
|
user: 'Ada',
|
||||||
|
});
|
||||||
|
expect(stored.timeline[0].userType).toBeUndefined();
|
||||||
|
expect(stored.timeline[0].event).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps the original author when an existing manual entry is edited', () => {
|
||||||
|
const task = addTask(base(1, 'Reassigned', { assignee: 'Ada' }));
|
||||||
|
updateTask(task.id, {
|
||||||
|
timeline: [
|
||||||
|
{ id: 11, date: '2025-01-01', content: 'by bob', type: 'manual-entry', user: 'Bob' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
expect(updateTimelineEntry(task.id, 11, ' typo fixed ')).toBe(true);
|
||||||
|
expect(getTasks()[0].timeline[0]).toMatchObject({ user: 'Bob', content: 'typo fixed' });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('board rendering', () => {
|
||||||
|
const fixture = () =>
|
||||||
|
'<input id="searchInput" value="" /><div id="taskBoard">' +
|
||||||
|
STATUSES.map(
|
||||||
|
(status) =>
|
||||||
|
`<span id="${status}Count"></span>` +
|
||||||
|
`<select class="sort-selector" data-status="${status}"></select>` +
|
||||||
|
`<div id="${status}Tasks" class="task-list" data-status="${status}"></div>`,
|
||||||
|
).join('') +
|
||||||
|
HIDEABLE_STATUSES.map(
|
||||||
|
(status) =>
|
||||||
|
`<button data-action="toggle-show-hidden" data-status="${status}"><i></i></button>`,
|
||||||
|
).join('') +
|
||||||
|
'</div>';
|
||||||
|
const visibleTitles = (status) =>
|
||||||
|
[...document.querySelectorAll(`#${status}Tasks .task-card`)]
|
||||||
|
.filter((card) => !card.hidden)
|
||||||
|
.map((card) => card.querySelector('h6').textContent);
|
||||||
|
const entryTexts = (status) =>
|
||||||
|
[...document.querySelectorAll(`#${status}Tasks .timeline-content`)].map((node) =>
|
||||||
|
node.lastElementChild.textContent.trim(),
|
||||||
|
);
|
||||||
|
const search = (term) => {
|
||||||
|
document.querySelector('#searchInput').value = term;
|
||||||
|
applySearchFilter();
|
||||||
|
updateTaskCounts();
|
||||||
|
};
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
document.body.innerHTML = fixture();
|
||||||
|
initializeStore([], true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lists timeline entries newest first within a single day', () => {
|
||||||
|
const task = addTask(base(1, 'Ordered'));
|
||||||
|
['first', 'second', 'third'].forEach((text) => addTimelineEntry(task.id, text));
|
||||||
|
renderColumn('todo');
|
||||||
|
expect(entryTexts('todo')).toEqual(['third', 'second', 'first']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lists timeline entries newest first across days', () => {
|
||||||
|
const task = addTask(base(1, 'Ordered'));
|
||||||
|
updateTask(task.id, {
|
||||||
|
timeline: [
|
||||||
|
{ id: 11, date: '2025-01-01', content: 'older', type: 'manual-entry', user: 'Ada' },
|
||||||
|
{ id: 12, date: '2025-06-01', content: 'newer', type: 'manual-entry', user: 'Ada' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
renderColumn('todo');
|
||||||
|
expect(entryTexts('todo')).toEqual(['newer', 'older']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lists entries carrying an unusable date last', () => {
|
||||||
|
const task = addTask(base(1, 'Ordered'));
|
||||||
|
updateTask(task.id, {
|
||||||
|
timeline: [
|
||||||
|
{ id: 11, date: 'sometime', content: 'undated', type: 'manual-entry', user: 'Ada' },
|
||||||
|
{ id: 12, date: '2025-01-01', content: 'dated', type: 'manual-entry', user: 'Ada' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
renderColumn('todo');
|
||||||
|
expect(entryTexts('todo')).toEqual(['dated', 'undated']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('searches task content without matching card boilerplate', () => {
|
||||||
|
addTask(base(1, 'Apple', { description: 'crisp fruit', assignee: 'Ada' }));
|
||||||
|
addTask(base(2, 'Banana', { progressNotes: 'still ripening' }));
|
||||||
|
renderColumn('todo');
|
||||||
|
|
||||||
|
search('apple');
|
||||||
|
expect(visibleTitles('todo')).toEqual(['Apple']);
|
||||||
|
search('crisp');
|
||||||
|
expect(visibleTitles('todo')).toEqual(['Apple']);
|
||||||
|
search('ripening');
|
||||||
|
expect(visibleTitles('todo')).toEqual(['Banana']);
|
||||||
|
search('ada');
|
||||||
|
expect(visibleTitles('todo')).toEqual(['Apple']);
|
||||||
|
|
||||||
|
[t('timeline'), t('addEntry'), t('edit'), t('progress')].forEach((label) => {
|
||||||
|
search(label);
|
||||||
|
expect(visibleTitles('todo')).toEqual([]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps the header count in step with the active search', () => {
|
||||||
|
addTask(base(1, 'Apple'));
|
||||||
|
addTask(base(2, 'Banana'));
|
||||||
|
renderColumn('todo');
|
||||||
|
expect(document.querySelector('#todoCount').textContent).toBe('2');
|
||||||
|
search('apple');
|
||||||
|
expect(document.querySelector('#todoCount').textContent).toBe('1');
|
||||||
|
search('');
|
||||||
|
expect(document.querySelector('#todoCount').textContent).toBe('2');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('leaves hidden tasks out of the header count while they stay collapsed', () => {
|
||||||
|
addTask(base(1, 'Visible'));
|
||||||
|
addTask(base(2, 'Quiet', { isHidden: true }));
|
||||||
|
renderColumn('todo');
|
||||||
|
expect(document.querySelector('#todoCount').textContent).toBe('1');
|
||||||
|
setShowHidden('todo', true);
|
||||||
|
renderColumn('todo');
|
||||||
|
expect(document.querySelector('#todoCount').textContent).toBe('2');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('explains a column emptied by the search instead of leaving it blank', () => {
|
||||||
|
addTask(base(1, 'Apple'));
|
||||||
|
renderColumn('todo');
|
||||||
|
search('kiwi');
|
||||||
|
expect(document.querySelector('#todoTasks .search-empty-state').textContent).toBe(
|
||||||
|
t('noSearchResults'),
|
||||||
|
);
|
||||||
|
search('apple');
|
||||||
|
expect(document.querySelector('#todoTasks .search-empty-state')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('dims hidden todo tasks but leaves in-progress tasks alone', () => {
|
||||||
|
addTask(base(1, 'Hidden todo', { isHidden: true }));
|
||||||
|
addTask(base(2, 'Hidden work', { status: 'inProgress', isHidden: true }));
|
||||||
|
setShowHidden('todo', true);
|
||||||
|
renderColumn('todo');
|
||||||
|
renderColumn('inProgress');
|
||||||
|
expect(document.querySelector('#todoTasks .task-card').className).toContain('hidden-task');
|
||||||
|
expect(document.querySelector('#inProgressTasks .task-card').className).not.toContain(
|
||||||
|
'hidden-task',
|
||||||
|
);
|
||||||
|
expect(document.querySelector('#inProgressCount').textContent).toBe('1');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('export', () => {
|
||||||
|
const original = {};
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
original.createObjectURL = URL.createObjectURL;
|
||||||
|
original.revokeObjectURL = URL.revokeObjectURL;
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
initializeStore([], true);
|
||||||
|
});
|
||||||
|
afterEach(() => {
|
||||||
|
URL.createObjectURL = original.createObjectURL;
|
||||||
|
URL.revokeObjectURL = original.revokeObjectURL;
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('clicks an attached anchor and revokes the blob url only afterwards', () => {
|
||||||
|
vi.useFakeTimers();
|
||||||
|
addTask(base(1, 'Exported'));
|
||||||
|
URL.createObjectURL = vi.fn(() => 'blob:fake');
|
||||||
|
URL.revokeObjectURL = vi.fn();
|
||||||
|
let connectedAtClick = null;
|
||||||
|
const createElement = document.createElement.bind(document);
|
||||||
|
vi.spyOn(document, 'createElement').mockImplementation((tag) => {
|
||||||
|
const element = createElement(tag);
|
||||||
|
if (tag === 'a') element.click = () => (connectedAtClick = element.isConnected);
|
||||||
|
return element;
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(exportData()).toMatch(/^backup-tasks-\d{4}-\d{2}-\d{2}\.json$/);
|
||||||
|
expect(connectedAtClick).toBe(true);
|
||||||
|
expect(document.querySelector('a')).toBeNull();
|
||||||
|
expect(URL.revokeObjectURL).not.toHaveBeenCalled();
|
||||||
|
vi.runAllTimers();
|
||||||
|
expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:fake');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
# 任务管理系统重构 TODO
|
||||||
|
|
||||||
|
> 分支：`dev-refactor` 目标：在**不改变任何现有功能与数据格式**的前提下，把单文件架构重构为模块化、可维护的结构。
|
||||||
|
> 原则：小步提交，每个阶段完成后跑一遍「回归测试清单」再进入下一阶段。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 一、现状分析
|
||||||
|
|
||||||
|
| 文件 | 行数 | 问题概述 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `src/index.html` | 311 | 内联 onclick、3 份重复的排序下拉、favicon 重复 4 次 |
|
||||||
|
| `src/script.js` | 1788 | 单文件巨石：状态、i18n、渲染、存储、导入导出全部混在一起，约 30 个全局函数 |
|
||||||
|
| `src/styles.css` | 432 | 颜色硬编码、选择器重复定义、存在疑似死代码 |
|
||||||
|
|
||||||
|
### 主要问题清单
|
||||||
|
|
||||||
|
1. **全局可变状态散落**：`tasks`、`currentLang`、`sortOrders`、`showHiddenCompletedTasks`、`showHiddenTodoTasks`、`currentEditingTaskId`、`pendingImportData`、`idCounter` 共 8 个全局变量，任何函数都能直接改。
|
||||||
|
2. **内联事件处理**：HTML 和 JS 模板字符串里大量 `onclick="xxx()"`，迫使所有函数必须挂在全局作用域。
|
||||||
|
3. **成对重复代码**（completed / todo 两套几乎相同的逻辑）：
|
||||||
|
- `toggleShowHiddenCompletedTasks` / `toggleShowHiddenTodoTasks`（script.js:1665 / 1728）
|
||||||
|
- `updateShowHiddenCompletedTasksUI` / `updateShowHiddenTodoTasksUI`（script.js:1682 / 1745）
|
||||||
|
- `save/loadShowHiddenCompletedTasks` / `save/loadShowHiddenTodoTasks`（script.js:1708 / 1771）
|
||||||
|
- `renderTasks` 内部对 completed 和 todo 的隐藏任务处理两段几乎一样（script.js:630-667）
|
||||||
|
4. **HTML 重复**：三列的排序 `<select>` 各 13 个 option 完全相同（index.html:72-86 / 99-113 / 132-146）；favicon 的 data-URI 重复 4 次（index.html:9-12）。
|
||||||
|
5. **i18n 内嵌**：约 240 行翻译对象直接写在 script.js:162-403，`{count}` 占位符靠手工 `.replace()`。
|
||||||
|
6. **渲染方式**：整列 `innerHTML` 全量重绘，每次保存/通知都调 `renderAllTasks()`，导致时间轴展开状态丢失。
|
||||||
|
7. **职责重叠**：`renderTasks` 和 `updateTaskCounts` 都在写计数 DOM（script.js:640-666 与 831-859），结果一致但逻辑双份。
|
||||||
|
8. **业务种子数据硬编码**：`loadInitialTasks()`（script.js:417-513）内嵌 5 条真实业务任务。
|
||||||
|
9. **排序逻辑重复**：`priorityOrder` 映射定义了 3 次（script.js:562 / 605 / 608），number-asc/desc、priority-asc/desc 成对复制。
|
||||||
|
10. **无工程化设施**：无 ESLint / Prettier / 测试 / 构建脚本。
|
||||||
|
|
||||||
|
### 顺带发现的小 bug / 待改进点（重构中一并处理）
|
||||||
|
|
||||||
|
- [x] `exportData()` 失败时错用 `importError` 文案（script.js:1491）→ 应新增 `exportError` 翻译键
|
||||||
|
- [x] `exportData()` 中残留调试 `console.log`（script.js:1453-1457）→ 删除
|
||||||
|
- [x] 时间轴区块只在 `timeline.length > 0` 时渲染（script.js:793），**没有任何时间轴条目的任务无法手动添加第一条**→ 补充入口
|
||||||
|
- [x] `sortTasks(tasks, ...)` 参数名遮蔽全局 `tasks`（script.js:549）→ 重命名参数
|
||||||
|
- [x] `normalizeTask` 未校验 `language` 字段 → 补充白名单 `['zh','en']`
|
||||||
|
- [x] 每次重渲染后时间轴折叠状态丢失 → 渲染前记录展开的 taskId，渲染后恢复
|
||||||
|
- [x] CSS：`.timeline-item` 重复定义（styles.css:87 与 276）→ 合并；确认 `.status-title`（styles.css:270）、`.tasks-hidden-notice`（styles.css:346）是否未使用，未使用则删除
|
||||||
|
- [x] `saveTask` 附近缩进混乱（script.js:907-1010 有多余空格）→ 统一格式化
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、目标目录结构
|
||||||
|
|
||||||
|
采用**原生 ES Modules，无构建工具**。
|
||||||
|
⚠️ 注意：ES Modules 无法通过 `file://` 直接打开，开发和使用需本地静态服务器（VSCode Live Server 或 `npx serve src`）。如果必须保留「双击 html 直接用」的能力，改用方案 B：保持多个普通 `<script>` 标签按依赖顺序加载（模块拆分方式不变，只是不用 import/export）。**开工前先确认选哪个方案。**
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── index.html
|
||||||
|
├── css/
|
||||||
|
│ └── styles.css # 后续可再拆 base / components / responsive
|
||||||
|
└── js/
|
||||||
|
├── main.js # 入口：DOMContentLoaded 初始化、顶层事件绑定
|
||||||
|
├── config.js # 常量：状态列表、排序方式、优先级映射、localStorage 键名、导出版本号
|
||||||
|
├── utils.js # escapeHtml、formatLocalDate、ID 生成、日期解析
|
||||||
|
├── i18n/
|
||||||
|
│ ├── zh.js
|
||||||
|
│ ├── en.js
|
||||||
|
│ └── index.js # t(key, params) 翻译函数、applyTranslations()、toggleLanguage()
|
||||||
|
├── storage.js # localStorage 统一读写 + 容错（唯一接触 localStorage 的模块）
|
||||||
|
├── store.js # 应用状态（tasks、sortOrders、showHidden…）+ 受控的变更接口
|
||||||
|
├── task-model.js # normalizeTask / normalizeTasks / isValidId / 校验
|
||||||
|
├── sort.js # sortTasks 与各比较器
|
||||||
|
├── render.js # renderAllTasks / renderTasks / createTaskCard / createTimeline / 计数
|
||||||
|
├── modal.js # 任务编辑模态框：打开、填充、保存
|
||||||
|
├── timeline.js # 时间轴 CRUD + 系统条目
|
||||||
|
├── import-export.js # 导出、导入、validateImportData、合并去重
|
||||||
|
└── notify.js # showNotification / checkDueDates
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、重构步骤
|
||||||
|
|
||||||
|
### 阶段 0：准备（半天）
|
||||||
|
|
||||||
|
- [x] 确认模块方案：**A. ES Modules + 本地服务器**（推荐）或 B. 普通脚本多文件
|
||||||
|
- [x] 手工做一次完整功能走查，按「回归测试清单」录一遍基准行为（必要时截图）
|
||||||
|
- [ ] 导出一份当前 localStorage 数据（用现有导出功能生成 backup-tasks-*.json）作为兼容性测试样本
|
||||||
|
- [x] 添加 `.editorconfig`、ESLint（flat config）+ Prettier；先只做检查不大规模改格式
|
||||||
|
- [ ] git tag 一个重构前基线（如 `pre-refactor`）
|
||||||
|
|
||||||
|
### 阶段 1：文件拆分（先搬家，不改逻辑）
|
||||||
|
|
||||||
|
> 本阶段只移动代码 + 加 import/export，函数体一行不改。每搬完一个模块提交一次。
|
||||||
|
|
||||||
|
- [x] 建立 `src/js/`、`src/css/` 目录，index.html 引用路径同步更新
|
||||||
|
- [x] `utils.js` ← script.js:8-69（generateId、escapeHtml、parseDueDateEnd、getDueDateState、isValidId、generateUniqueId）
|
||||||
|
- [x] `task-model.js` ← script.js:71-152（normalizeTask、normalizeTasks、normalizeSortOrders、validStatuses、validSortOrders）
|
||||||
|
- [x] `i18n/zh.js`、`i18n/en.js` ← script.js:162-403 的翻译对象
|
||||||
|
- [x] `storage.js` ← saveTasks/loadTasks（516-538）、saveSortOrders/loadSortOrders（1421-1441）、show-hidden 的 4 个 save/load（1708-1725、1771-1788）
|
||||||
|
- [x] `sort.js` ← sortTasks（549-622）
|
||||||
|
- [x] `render.js` ← renderAllTasks、renderTasks、applySearchFilter、createTaskCard、createTimeline、updateTaskCounts（541-859、1106-1194）
|
||||||
|
- [x] `modal.js` ← openTaskModal、populateForm、updateProgressDisplay、saveTask、editTask、deleteTask（862-1027）
|
||||||
|
- [x] `timeline.js` ← toggleTimeline 至 addSystemTimelineEntry（1197-1381）
|
||||||
|
- [x] `import-export.js` ← exportData 至 executeImport（1444-1662）
|
||||||
|
- [x] `notify.js` ← showNotification（1085-1103）、checkDueDates（1030-1053）
|
||||||
|
- [x] `main.js` ← DOMContentLoaded 初始化（406-414）+ loadInitialTasks（417-513，暂时原样保留）
|
||||||
|
- [x] 过渡措施：内联 onclick 仍需全局函数，在 main.js 里临时 `window.xxx = xxx` 挂出所有被 HTML 引用的函数（阶段 2 已移除，无全局挂载残留）
|
||||||
|
- [x] 删除旧 `src/script.js`，全功能回归一遍（旧脚本已删除，完整人工回归已通过）
|
||||||
|
|
||||||
|
### 阶段 2：去内联事件，改事件委托
|
||||||
|
|
||||||
|
- [x] index.html 中静态元素的 `onclick` / `onchange` / `onkeyup` 全部移除，改在 main.js 里 `addEventListener` 绑定（添加任务、导出、导入、语言切换、搜索、排序下拉、眼睛按钮、保存任务、确认导入、进度滑块、文件 input）
|
||||||
|
- [x] 任务卡片内动态按钮改为 `data-action="pin|hide|edit|delete|toggle-timeline|…"` + `data-task-id` 属性，在三个列容器上做**事件委托**（click 一个监听器搞定）
|
||||||
|
- [x] 时间轴的添加/编辑/删除/键盘事件同样走委托（`data-action` + `data-timeline-id`）
|
||||||
|
- [x] 移除阶段 1 的所有 `window.xxx` 临时挂载
|
||||||
|
- [x] 回归：重点测所有按钮、Enter 添加时间轴、Ctrl+Enter 保存、Esc 取消
|
||||||
|
|
||||||
|
### 阶段 3：消除重复
|
||||||
|
|
||||||
|
- [x] **HTML**：排序 `<select>` 的 13 个 option 改为 JS 根据 `config.js` 中的排序定义生成，三列共用；favicon 只保留一个 `<link>`
|
||||||
|
- [x] **show-hidden 逻辑合并**：completed/todo 两套 toggle/updateUI/save/load 合并为按 status 参数化的一套（状态改为 `showHidden = { completed: false, todo: false }`，localStorage 仍写原有两个键保持兼容）
|
||||||
|
- [x] **renderTasks** 中 completed/todo 的隐藏处理合并为一段参数化逻辑；**计数只由 `updateTaskCounts` 负责**，renderTasks 不再写计数 DOM
|
||||||
|
- [x] **sort.js**：`PRIORITY_ORDER` 常量只定义一次；number/priority/dueDate 的 asc/desc 用「比较器 + 方向系数」实现，消除成对复制
|
||||||
|
- [x] `config.js` 收敛所有魔法值：状态数组、优先级数组、localStorage 键名（`tasks`、`taskSortOrders`、`showHiddenCompletedTasks`、`showHiddenTodoTasks`、`tasksInitialized`、`tasksCorruptedBackup`）、导出版本号 `"1.0"`、到期预警天数 3
|
||||||
|
|
||||||
|
### 阶段 4：状态与存储收敛
|
||||||
|
|
||||||
|
- [x] `store.js`：所有状态私有化，暴露读取接口和语义化变更方法（addTask、updateTask、removeTask、togglePin、toggleHidden、setSortOrder…），变更方法内部统一调用 storage 持久化
|
||||||
|
- [x] `storage.js`：统一 try/catch 容错模式（现在 loadTasks/loadSortOrders/loadShowHidden* 三种写法各不相同），保留「损坏数据备份到 tasksCorruptedBackup」行为
|
||||||
|
- [x] 各模块不再直接改 `tasks` 数组，全部经 store 接口
|
||||||
|
|
||||||
|
### 阶段 5：i18n 完善
|
||||||
|
|
||||||
|
- [x] `t(key, params)` 支持 `{count}` 等占位符插值，替换所有手工 `.replace('{count}', …)`
|
||||||
|
- [x] `applyTranslations()` 抽出（现在的 toggleLanguage 内 data-key 扫描逻辑），初始化时也调用一次（为后续记住语言偏好做准备）
|
||||||
|
- [x] 新增 `exportError` 键，修复导出失败文案 bug
|
||||||
|
- [ ] 可选：语言偏好持久化到 localStorage（新键，注意不影响旧数据）
|
||||||
|
|
||||||
|
### 阶段 6：渲染层改进
|
||||||
|
|
||||||
|
- [x] 渲染前记录已展开时间轴的 taskId 集合，渲染后恢复展开状态（修复现状缺陷）
|
||||||
|
- [x] 无时间轴条目的卡片也渲染「添加条目」入口（修复现状缺陷）
|
||||||
|
- [x] 精细化重渲染：单任务变更（置顶/隐藏/时间轴操作）只重渲染受影响列，而非三列全刷
|
||||||
|
- [x] createTaskCard 保持模板字符串方案即可，但拆出 createPriorityBadge、createDueDateBlock 等小函数，保证每段可读
|
||||||
|
|
||||||
|
### 阶段 7：数据清理
|
||||||
|
|
||||||
|
- [x] `loadInitialTasks` 的 5 条业务种子任务移到 `js/seed-data.js`（保留首次初始化种子行为）
|
||||||
|
- [x] 删除 exportData 中的调试 console.log
|
||||||
|
- [x] `normalizeTask` 补充 language 字段白名单校验
|
||||||
|
|
||||||
|
### 阶段 8：CSS 整理
|
||||||
|
|
||||||
|
- [x] 顶部定义 CSS 自定义属性：主色、三列状态色、优先级色、到期警示色（当前 #007bff / #28a745 / #ffc107 / #dc3545 / #fd7e14 等散落各处）
|
||||||
|
- [x] 合并重复的 `.timeline-item` 定义；grep 验证并删除未使用的 `.status-title`、`.tasks-hidden-notice`、`.show-tasks-btn`
|
||||||
|
- [x] 按「基础 / 任务卡片 / 时间轴 / 模态框 / 响应式」重排分区注释（是否拆成多文件视方案 A/B 决定）
|
||||||
|
|
||||||
|
### 阶段 9：质量保障
|
||||||
|
|
||||||
|
- [x] ESLint + Prettier 全量通过，修掉参数遮蔽（sortTasks）等告警
|
||||||
|
- [x] 纯函数单元测试（Vitest + jsdom，可选但推荐）：`normalizeTask`、`normalizeTasks`（ID 去重）、`sortTasks` 全部 13 种排序、`getDueDateState`（过期/临期/边界日）、`validateImportData`、合并导入去重逻辑
|
||||||
|
- [x] 使用版本 1.0 旧格式 fixture 做**导入兼容性测试**（覆盖模式 + 合并模式）
|
||||||
|
- [x] 使用重构前格式的完整 localStorage 快照测试 6 个旧键与任务字段无损恢复
|
||||||
|
|
||||||
|
### 阶段 10：文档收尾
|
||||||
|
|
||||||
|
- [x] 更新 / 新建 README：项目结构说明、本地运行方式（如需服务器要写清楚）、数据存储说明（localStorage 键 + 导出格式）
|
||||||
|
- [x] CHANGELOG 记录重构版本
|
||||||
|
- [x] 合并 `dev-refactor` → `main` 前完整跑一遍下方回归清单
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、回归测试清单（每阶段结束必跑）
|
||||||
|
|
||||||
|
- [x] 添加任务：标题必填校验、进度滑块联动、隐藏勾选生效
|
||||||
|
- [x] 编辑任务：进展/状态/进度/负责人/到期日/优先级变更均自动生成时间轴系统条目
|
||||||
|
- [x] 删除任务：confirm 确认后删除
|
||||||
|
- [x] 三列各 13 种排序均正确，刷新后排序偏好保留；置顶任务在任何排序下都靠前
|
||||||
|
- [x] 搜索：实时过滤三列卡片
|
||||||
|
- [x] 隐藏/显示：卡片眼睛按钮、列头眼睛按钮、计数随显示模式变化、「全部已隐藏」提示文案
|
||||||
|
- [x] 时间轴：展开/收起、添加（按钮 + Enter）、编辑（Ctrl+Enter 保存、Esc 取消）、删除
|
||||||
|
- [x] 导出：文件名 `backup-tasks-yyyy-mm-dd.json`、内容含 version/exportDate/taskCount/tasks/sortOrders
|
||||||
|
- [x] 导入：非法文件报错；信息弹窗显示版本/数量/时间；覆盖模式全替换；合并模式按 标题|状态|创建时间 去重并提示跳过数
|
||||||
|
- [x] 中英切换：所有 data-key 文本、placeholder、页面标题、html lang、卡片内动态文本
|
||||||
|
- [x] 到期提醒：加载时对过期 / 3 天内到期的未完成任务弹通知
|
||||||
|
- [x] 容错：手工向 localStorage 写坏数据 → 提示 + 原始数据备份到 `tasksCorruptedBackup`
|
||||||
|
- [x] 首次访问（清空 localStorage）：种子任务加载一次，`tasksInitialized` 置位
|
||||||
|
- [x] 移动端（<768px / <576px）：按钮缩放、文字隐藏、操作按钮可点
|
||||||
|
|
||||||
|
## 五、风险与约束
|
||||||
|
|
||||||
|
1. **localStorage 兼容是红线**：6 个键名与数据结构不得变更，老用户数据必须无缝迁移。
|
||||||
|
2. **方案 A（ES Modules）改变使用方式**：`file://` 直接打开会失效，需和使用场景确认后再定。
|
||||||
|
3. **内联事件改造面广**：HTML 静态元素 + JS 动态模板两处都有，漏改一处即功能失效，必须逐区域回归。
|
||||||
|
4. **无自动化测试兜底**（阶段 9 之前）：靠回归清单人工保障，所以每阶段步子要小、提交要勤。
|
||||||
Reference in New Issue
Block a user