master

分支 (1)

管理

管理

master

task-management-system
/
index2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F3F4F6'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md fixed w-full top-0 z-10 transition-custom">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-tasks text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">任务管理系统</h1>
            </div>
            <button id="mobileMenuBtn" class="md:hidden text-dark">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <nav class="hidden md:flex space-x-6">
                <a href="#categories" class="text-gray-600 hover:text-primary transition-custom">分类管理</a>
                <a href="#tasks" class="text-gray-600 hover:text-primary transition-custom">任务管理</a>
                <a href="#random-task" class="text-gray-600 hover:text-primary transition-custom">随机任务</a>
            </nav>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#categories" class="text-gray-600 hover:text-primary py-2 transition-custom">分类管理</a>
                <a href="#tasks" class="text-gray-600 hover:text-primary py-2 transition-custom">任务管理</a>
                <a href="#random-task" class="text-gray-600 hover:text-primary py-2 transition-custom">随机任务</a>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 欢迎信息 -->
        <section class="mb-10 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
                让任务管理变得简单高效
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                轻松创建任务分类，添加任务，随机抽取任务来完成，提高你的工作效率和执行力
            </p>
        </section>

        <!-- 分类管理区域 -->
        <section id="categories" class="mb-16">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold text-dark flex items-center">
                        <i class="fa fa-folder-open text-primary mr-2"></i>任务分类管理
                    </h3>
                    <button id="addCategoryBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom flex items-center">
                        <i class="fa fa-plus mr-2"></i>添加分类
                    </button>
                </div>

                <!-- 分类列表 -->
                <div id="categoryList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- 分类项将通过JavaScript动态生成 -->
                </div>
            </div>
        </section>

        <!-- 任务管理区域 -->
        <section id="tasks" class="mb-16">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                    <h3 class="text-xl font-bold text-dark flex items-center">
                        <i class="fa fa-list-alt text-secondary mr-2"></i>任务管理
                    </h3>
                    <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
                        <select id="taskCategorySelect" class="border border-gray-300 rounded-lg px-3 py-2 w-full sm:w-auto">
                            <option value="" selected>所有分类</option>
                            <!-- 分类选项将通过JavaScript动态生成 -->
                        </select>
                        <button id="addTaskBtn" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg transition-custom flex items-center justify-center">
                            <i class="fa fa-plus mr-2"></i>添加任务
                        </button>
                    </div>
                </div>

                <!-- 任务列表 -->
                <div id="taskList" class="space-y-4">
                    <!-- 任务项将通过JavaScript动态生成 -->
                </div>
            </div>
        </section>

        <!-- 随机任务区域 -->
        <section id="random-task" class="mb-16">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h3 class="text-xl font-bold text-dark flex items-center mb-6">
                    <i class="fa fa-random text-accent mr-2"></i>随机任务
                </h3>

                <div class="flex flex-col md:flex-row gap-6">
                    <div class="w-full md:w-1/3">
                        <select id="randomCategorySelect" class="border border-gray-300 rounded-lg px-3 py-2 w-full mb-4">
                            <option value="">选择分类</option>
                            <!-- 分类选项将通过JavaScript动态生成 -->
                        </select>
                        <button id="getRandomTaskBtn" class="bg-accent hover:bg-accent/90 text-white px-4 py-3 rounded-lg transition-custom flex items-center justify-center w-full">
                            <i class="fa fa-refresh mr-2"></i>随机抽取任务
                        </button>
                    </div>

                    <div class="w-full md:w-2/3">
                        <div id="randomTaskCard" class="border border-gray-200 rounded-xl p-6 min-h-[200px] flex items-center justify-center">
                            <div class="text-center text-gray-500">
                                <i class="fa fa-lightbulb-o text-4xl mb-4 text-gray-300"></i>
                                <p>选择一个分类并点击按钮，随机抽取一个任务</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p>© 2025 任务管理系统 - 让任务管理变得简单高效</p>
        </div>
    </footer>

    <!-- 添加分类模态框 -->
    <div id="categoryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-6 w-full max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-dark">添加任务分类</h3>
                <button id="closeCategoryModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <form id="categoryForm">
                <div class="mb-4">
                    <label for="categoryName" class="block text-gray-700 mb-2">分类名称</label>
                    <input type="text" id="categoryName" class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                </div>
                <div class="mb-6">
                    <label for="categoryDesc" class="block text-gray-700 mb-2">分类描述（可选）</label>
                    <textarea id="categoryDesc" class="w-full border border-gray-300 rounded-lg px-3 py-2" rows="3"></textarea>
                </div>
                <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom w-full">
                    保存分类
                </button>
            </form>
        </div>
    </div>

    <!-- 添加任务模态框 -->
    <div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-6 w-full max-w-lg">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-dark">添加任务</h3>
                <button id="closeTaskModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <form id="taskForm">
                <div class="mb-4">
                    <label for="taskCategory" class="block text-gray-700 mb-2">所属分类</label>
                    <select id="taskCategory" class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                        <option value="">选择分类</option>
                    </select>
                    <div id="categoryWarning" class="text-red-500 text-sm mt-1 hidden">
                        请先添加分类才能创建任务
                    </div>
                </div>
                <div class="mb-4">
                    <label for="taskTitle" class="block text-gray-700 mb-2">任务标题</label>
                    <input type="text" id="taskTitle" class="w-full border border-gray-300 rounded-lg px-3 py-2" required>
                </div>
                <div class="mb-6">
                    <label for="taskContent" class="block text-gray-700 mb-2">任务内容（可选）</label>
                    <textarea id="taskContent" class="w-full border border-gray-300 rounded-lg px-3 py-2" rows="4"></textarea>
                </div>
                <button type="submit" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg transition-custom w-full">
                    保存任务
                </button>
            </form>
        </div>
    </div>

    <script>
        // 后端API基础URL - 请根据实际部署情况修改
        const API_BASE_URL = 'http://localhost:8080/api';

        // DOM元素获取
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const addCategoryBtn = document.getElementById('addCategoryBtn');
        const categoryModal = document.getElementById('categoryModal');
        const closeCategoryModal = document.getElementById('closeCategoryModal');
        const categoryForm = document.getElementById('categoryForm');
        const addTaskBtn = document.getElementById('addTaskBtn');
        const taskModal = document.getElementById('taskModal');
        const closeTaskModal = document.getElementById('closeTaskModal');
        const taskForm = document.getElementById('taskForm');
        const taskCategorySelect = document.getElementById('taskCategorySelect');
        const randomCategorySelect = document.getElementById('randomCategorySelect');
        const getRandomTaskBtn = document.getElementById('getRandomTaskBtn');

        // 移动端菜单控制
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 模态框控制
        addCategoryBtn.addEventListener('click', () => {
            categoryModal.classList.remove('hidden');
        });

        closeCategoryModal.addEventListener('click', () => {
            categoryModal.classList.add('hidden');
            categoryForm.reset();
        });

        addTaskBtn.addEventListener('click', async () => {
            // 确保分类已加载
            const categories = await loadAllCategories();
            loadCategoriesIntoSelect('taskCategory');

            // 检查是否有分类
            if (categories.length === 0) {
                document.getElementById('categoryWarning').classList.remove('hidden');
            } else {
                document.getElementById('categoryWarning').classList.add('hidden');
            }

            taskModal.classList.remove('hidden');
        });

        closeTaskModal.addEventListener('click', () => {
            taskModal.classList.add('hidden');
            taskForm.reset();
        });

        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target === categoryModal) {
                categoryModal.classList.add('hidden');
                categoryForm.reset();
            }
            if (e.target === taskModal) {
                taskModal.classList.add('hidden');
                taskForm.reset();
            }
        });

        // 加载所有分类
        async function loadAllCategories() {
            try {
                showToast('正在加载分类...', 'info');
                const response = await fetch(`${API_BASE_URL}/categories`);
                const result = await response.json();

                if (result.code === 200) {
                    renderCategories(result.data);
                    loadCategoriesIntoSelect('taskCategorySelect');
                    loadCategoriesIntoSelect('randomCategorySelect');
                    localStorage.setItem('categories', JSON.stringify(result.data));
                    showToast('分类加载成功', 'success');
                    return result.data;
                } else {
                    showToast('加载分类失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('加载分类时发生错误: ' + error.message, 'error');
            }
            return [];
        }

        // 渲染分类列表
        function renderCategories(categories) {
            const categoryList = document.getElementById('categoryList');
            categoryList.innerHTML = '';

            if (categories.length === 0) {
                categoryList.innerHTML = `
                    <div class="col-span-full text-center py-10 text-gray-500">
                        <i class="fa fa-folder-open text-4xl mb-4 text-gray-300"></i>
                        <p>暂无分类，请添加任务分类</p>
                    </div>
                `;
                return;
            }

            categories.forEach(category => {
                const categoryCard = document.createElement('div');
                categoryCard.className = 'border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-custom';
                categoryCard.innerHTML = `
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-bold text-lg">${category.name}</h4>
                        <div class="flex space-x-2">
                            <button class="text-red-500 hover:text-red-700 transition-custom delete-category"
                                    data-id="${category.id}" data-name="${category.name}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <p class="text-gray-600 text-sm mb-3">${category.description || '无描述'}</p>
                    <button class="text-primary hover:text-primary/80 text-sm view-category-tasks"
                            data-id="${category.id}" data-name="${category.name}">
                        查看任务 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                    </button>
                `;
                categoryList.appendChild(categoryCard);
            });

            // 绑定分类事件
            bindCategoryEvents();
        }

        // 绑定分类相关事件
        function bindCategoryEvents() {
            // 删除分类事件
            document.querySelectorAll('.delete-category').forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    const categoryId = e.currentTarget.getAttribute('data-id');
                    const categoryName = e.currentTarget.getAttribute('data-name');
                    if (confirm(`确定要删除"${categoryName}"分类吗？该分类下的所有任务也会被删除！`)) {
                        await deleteCategory(categoryId);
                    }
                });
            });

            // 查看分类任务事件
            document.querySelectorAll('.view-category-tasks').forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    const categoryId = e.currentTarget.getAttribute('data-id');
                    const categoryName = e.currentTarget.getAttribute('data-name');
                    taskCategorySelect.value = categoryId;
                    await loadTasksByCategory(categoryId);
                    showToast(`已加载"${categoryName}"的任务`, 'info');

                    // 滚动到任务区域
                    document.getElementById('tasks').scrollIntoView({ behavior: 'smooth' });
                });
            });
        }

        // 将分类加载到下拉选择框
        function loadCategoriesIntoSelect(selectId) {
            const selectElement = document.getElementById(selectId);
            if (!selectElement) return;

            // 保存当前选中值，但对于任务分类选择框，保持"所有分类"为默认
            const currentValue = selectId === 'taskCategorySelect' ? '' : selectElement.value;

            const firstOption = document.createElement('option');
            if (selectId === 'taskCategory') {
                firstOption.value = '';
                firstOption.textContent = '选择分类';
            } else if (selectId === 'randomCategorySelect') {
                firstOption.value = '';
                firstOption.textContent = '选择分类';
            } else {
                firstOption.value = '';
                firstOption.textContent = '所有分类';
                firstOption.selected = true; // 确保默认选中"所有分类"
            }

            selectElement.innerHTML = '';
            selectElement.appendChild(firstOption);

            // 获取已加载的分类
            const categories = JSON.parse(localStorage.getItem('categories') || '[]');

            // 如果没有分类，显示提示
            if (categories.length === 0 && selectId === 'taskCategory') {
                const emptyOption = document.createElement('option');
                emptyOption.value = "";
                emptyOption.textContent = "暂无分类，请先添加分类";
                emptyOption.disabled = true;
                selectElement.appendChild(emptyOption);
            } else {
                categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    selectElement.appendChild(option);
                });
            }

            // 恢复选中值（除了任务分类选择框，始终保持默认）
            if (currentValue && selectId !== 'taskCategorySelect' &&
                [...selectElement.options].some(option => option.value === currentValue)) {
                selectElement.value = currentValue;
            }
        }

        // 加载任务 - 确保默认加载所有任务
        async function loadTasks(categoryId = '') {
            try {
                showToast(categoryId ? '正在加载分类任务...' : '正在加载所有任务...', 'info');
                let url = `${API_BASE_URL}/tasks`;
                if (categoryId) {
                    url = `${API_BASE_URL}/tasks/category/${categoryId}`;
                }

                const response = await fetch(url);
                const result = await response.json();

                if (result.code === 200) {
                    renderTasks(result.data, categoryId);
                    const message = categoryId
                        ? `共加载 ${result.data.length} 个分类任务`
                        : `共加载 ${result.data.length} 个任务`;
                    showToast(message, 'success');
                } else {
                    showToast('加载任务失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('加载任务时发生错误: ' + error.message, 'error');
            }
        }

        // 根据分类加载任务
        async function loadTasksByCategory(categoryId) {
            await loadTasks(categoryId);
        }

        // 渲染任务列表
        function renderTasks(tasks, categoryId) {
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';

            if (tasks.length === 0) {
                const message = categoryId ? '该分类下暂无任务，请添加任务' : '暂无任务，请添加任务';
                taskList.innerHTML = `
                    <div class="text-center py-10 text-gray-500">
                        <i class="fa fa-list-alt text-4xl mb-4 text-gray-300"></i>
                        <p>${message}</p>
                    </div>
                `;
                return;
            }

            // 按创建时间排序（最新的在前）
            const sortedTasks = [...tasks].sort((a, b) =>
                new Date(b.createTime) - new Date(a.createTime)
            );

            sortedTasks.forEach(task => {
                const taskItem = document.createElement('div');
                taskItem.className = 'border border-gray-200 rounded-lg p-4 hover:shadow-md transition-custom';
                taskItem.innerHTML = `
                    <div class="flex justify-between items-start">
                        <h4 class="font-bold">${task.title}</h4>
                        <button class="text-red-500 hover:text-red-700 transition-custom delete-task"
                                data-id="${task.id}" data-title="${task.title}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                    ${task.content ? `<p class="text-gray-600 mt-2">${task.content}</p>` : ''}
                    <div class="mt-3 flex flex-wrap justify-between items-center gap-2 text-sm text-gray-500">
                        <span>
                            <i class="fa fa-folder-o mr-1"></i>
                            <span class="task-category-name">${getCategoryNameById(task.categoryId)}</span>
                        </span>
                        <span>
                            <i class="fa fa-clock-o mr-1"></i>
                            ${formatDateTime(task.createTime)}
                        </span>
                    </div>
                `;
                taskList.appendChild(taskItem);
            });

            // 绑定任务事件
            bindTaskEvents(categoryId);
        }

        // 绑定任务相关事件
        function bindTaskEvents(categoryId) {
            // 删除任务事件
            document.querySelectorAll('.delete-task').forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    const taskId = e.currentTarget.getAttribute('data-id');
                    const taskTitle = e.currentTarget.getAttribute('data-title');
                    if (confirm(`确定要删除任务"${taskTitle}"吗？`)) {
                        // 删除任务后保持当前分类视图
                        await deleteTask(taskId, categoryId);
                    }
                });
            });
        }

        // 根据ID获取分类名称
        function getCategoryNameById(categoryId) {
            const categories = JSON.parse(localStorage.getItem('categories') || '[]');
            const category = categories.find(c => c.id == categoryId);
            return category ? category.name : '未知分类';
        }

        // 格式化日期时间
        function formatDateTime(dateTimeString) {
            const date = new Date(dateTimeString);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        // 获取随机任务
        async function getRandomTask(categoryId) {
            if (!categoryId) {
                showToast('请先选择一个分类', 'warning');
                return;
            }

            try {
                showToast('正在随机抽取任务...', 'info');
                const response = await fetch(`${API_BASE_URL}/tasks/random/${categoryId}`);
                const result = await response.json();

                if (result.code === 200) {
                    if (result.data) {
                        renderRandomTask(result.data);
                        showToast('随机任务抽取成功', 'success');
                    } else {
                        showToast('该分类下没有任务，请先添加任务', 'info');
                        document.getElementById('randomTaskCard').innerHTML = `
                            <div class="text-center text-gray-500">
                                <i class="fa fa-exclamation-circle text-4xl mb-4 text-yellow-300"></i>
                                <p>该分类下没有任务，请先添加任务</p>
                            </div>
                        `;
                    }
                } else {
                    showToast('获取随机任务失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('获取随机任务时发生错误: ' + error.message, 'error');
            }
        }

        // 渲染随机任务
        function renderRandomTask(task) {
            const randomTaskCard = document.getElementById('randomTaskCard');
            randomTaskCard.innerHTML = `
                <div class="w-full">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-accent/10 text-accent px-3 py-1 rounded-full text-sm font-medium">
                            ${getCategoryNameById(task.categoryId)}
                        </span>
                        <span class="text-gray-400 text-sm">
                            <i class="fa fa-calendar-o mr-1"></i>
                            ${formatDateTime(task.createTime)}
                        </span>
                    </div>
                    <h4 class="text-2xl font-bold mb-4">${task.title}</h4>
                    ${task.content ? `<p class="text-gray-600 mb-6">${task.content}</p>` : ''}
                    <div class="flex justify-end">
                        <button id="newRandomTaskBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-custom flex items-center">
                            <i class="fa fa-refresh mr-2"></i>再抽一个
                        </button>
                    </div>
                </div>
            `;

            // 再抽一个按钮事件
            document.getElementById('newRandomTaskBtn').addEventListener('click', () => {
                getRandomTask(document.getElementById('randomCategorySelect').value);
            });
        }

        // 添加分类
        async function addCategory(categoryData) {
            try {
                const response = await fetch(`${API_BASE_URL}/categories`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(categoryData)
                });

                const result = await response.json();

                if (result.code === 200) {
                    showToast('分类添加成功', 'success');
                    categoryModal.classList.add('hidden');
                    categoryForm.reset();
                    await loadAllCategories();
                    // 保持显示所有任务
                    taskCategorySelect.value = '';
                    await loadTasks();
                } else {
                    showToast('分类添加失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('添加分类时发生错误: ' + error.message, 'error');
            }
        }

        // 删除分类
        async function deleteCategory(categoryId) {
            try {
                const response = await fetch(`${API_BASE_URL}/categories/${categoryId}`, {
                    method: 'DELETE'
                });

                const result = await response.json();

                if (result.code === 200) {
                    showToast('分类删除成功', 'success');
                    await loadAllCategories();
                    // 保持显示所有任务
                    taskCategorySelect.value = '';
                    await loadTasks();
                } else {
                    showToast('分类删除失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('删除分类时发生错误: ' + error.message, 'error');
            }
        }

        // 添加任务 - 核心优化：添加后显示所有任务
        async function addTask(taskData) {
            // 表单验证
            if (!taskData.categoryId) {
                showToast('请选择任务分类', 'warning');
                return;
            }

            if (!taskData.title || taskData.title.trim() === '') {
                showToast('请输入任务标题', 'warning');
                return;
            }

            try {
                const response = await fetch(`${API_BASE_URL}/tasks`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(taskData)
                });

                const result = await response.json();

                if (result.code === 200) {
                    showToast('任务添加成功', 'success');
                    taskModal.classList.add('hidden');
                    taskForm.reset();

                    // 核心优化点：始终显示所有分类的任务
                    taskCategorySelect.value = ''; // 重置为"所有分类"
                    await loadTasks(); // 加载所有任务
                } else {
                    showToast('任务添加失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('添加任务时发生错误: ' + error.message, 'error');
            }
        }

        // 删除任务
        async function deleteTask(taskId, categoryId) {
            try {
                const response = await fetch(`${API_BASE_URL}/tasks/${taskId}`, {
                    method: 'DELETE'
                });

                const result = await response.json();

                if (result.code === 200) {
                    showToast('任务删除成功', 'success');
                    // 如果当前是查看特定分类，删除后仍显示该分类
                    // 如果是查看所有分类，删除后仍显示所有分类
                    await loadTasks(categoryId);
                } else {
                    showToast('任务删除失败: ' + result.msg, 'error');
                }
            } catch (error) {
                showToast('删除任务时发生错误: ' + error.message, 'error');
            }
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            // 创建toast元素
            const toast = document.createElement('div');

            // 设置样式和图标
            let bgColor, icon;
            switch (type) {
                case 'success':
                    bgColor = 'bg-green-500';
                    icon = 'fa-check-circle';
                    break;
                case 'error':
                    bgColor = 'bg-red-500';
                    icon = 'fa-exclamation-circle';
                    break;
                case 'warning':
                    bgColor = 'bg-yellow-500';
                    icon = 'fa-exclamation-triangle';
                    break;
                default:
                    bgColor = 'bg-blue-500';
                    icon = 'fa-info-circle';
            }

            toast.className = `fixed top-20 right-4 ${bgColor} text-white px-4 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full`;
            toast.innerHTML = `
                <div class="flex items-center">
                    <i class="fa ${icon} mr-2"></i>
                    <span>${message}</span>
                </div>
            `;

            // 添加到页面
            document.body.appendChild(toast);

            // 显示toast
            setTimeout(() => {
                toast.classList.remove('translate-x-full');
            }, 100);

            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.add('translate-x-full');
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        }

        // 表单提交事件
        categoryForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const categoryName = document.getElementById('categoryName').value.trim();

            if (!categoryName) {
                showToast('请输入分类名称', 'warning');
                return;
            }

            const categoryData = {
                name: categoryName,
                description: document.getElementById('categoryDesc').value.trim()
            };
            await addCategory(categoryData);
        });

        taskForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const taskData = {
                title: document.getElementById('taskTitle').value.trim(),
                content: document.getElementById('taskContent').value.trim(),
                categoryId: parseInt(document.getElementById('taskCategory').value)
            };
            await addTask(taskData);
        });

        // 任务分类选择变化事件
        taskCategorySelect.addEventListener('change', async (e) => {
            await loadTasksByCategory(e.target.value);
        });

        // 获取随机任务按钮事件
        getRandomTaskBtn.addEventListener('click', () => {
            const categoryId = randomCategorySelect.value;
            getRandomTask(categoryId);
        });

        // 页面初始化 - 默认显示所有任务
        async function init() {
            showToast('正在初始化...', 'info');
            const categories = await loadAllCategories();
            localStorage.setItem('categories', JSON.stringify(categories));
            taskCategorySelect.value = ''; // 确保默认选中"所有分类"
            await loadTasks(); // 初始加载所有任务
        }

        // 启动初始化
        init();
    </script>
</body>
</html>