<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人任务管理系统</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lora:wght@400;500;600&display=swap" rel="stylesheet">
  <!-- 统一的 Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            dark: '#141413',
            light: '#faf9f5',
            midGray: '#b0aea5',
            lightGray: '#e8e6dc',
            orange: '#d97757',
            blue: '#6a9bcc',
            green: '#788c5d',
          },
          fontFamily: {
            poppins: ['Poppins', 'Arial', 'sans-serif'],
            lora: ['Lora', 'Georgia', 'serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .task-item {
        @apply flex items-center p-3 rounded-lg hover:bg-lightGray cursor-pointer transition-all duration-200;
      }
      .task-item.completed {
        @apply text-midGray line-through;
      }
      .sidebar-item {
        @apply flex items-center justify-between p-3 rounded-lg hover:bg-lightGray cursor-pointer transition-all duration-200;
      }
      .sidebar-item.active {
        @apply bg-blue/10 text-blue font-medium;
      }
      .priority-high {
        @apply bg-orange/20 text-orange px-2 py-0.5 rounded text-xs;
      }
      .priority-medium {
        @apply bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded text-xs;
      }
      .priority-low {
        @apply bg-blue/20 text-blue px-2 py-0.5 rounded text-xs;
      }
      .list-badge {
        @apply bg-lightGray text-dark px-2 py-0.5 rounded text-xs;
      }
      .card-shadow {
        @apply shadow-sm hover:shadow-md transition-shadow duration-200;
      }
      .btn-primary {
        @apply bg-blue text-light px-4 py-2 rounded-lg hover:bg-blue/90 transition-colors duration-200;
      }
      .btn-secondary {
        @apply bg-lightGray text-dark px-4 py-2 rounded-lg hover:bg-lightGray/80 transition-colors duration-200;
      }
      .input-field {
        @apply w-full px-4 py-2 border border-lightGray rounded-lg focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition-all duration-200;
      }
    }
  </style>
</head>
<body class="bg-light font-lora text-dark">
  <div class="task-manager flex h-screen overflow-hidden">
    <!-- 左侧：分类与筛选栏 -->
    <aside class="sidebar w-60 border-r border-lightGray bg-white p-4 overflow-y-auto">
      <!-- 时间筛选 -->
      <div class="sidebar__time-filter mb-6">
        <h3 class="text-xs font-semibold text-midGray uppercase mb-2 font-poppins">时间筛选</h3>
        <div class="space-y-1">
          <div class="sidebar-item active">
            <span class="flex items-center">
              <i class="fa fa-calendar-o mr-2 text-blue"></i>
              今天
            </span>
            <span class="bg-blue/20 text-blue text-xs px-2 py-0.5 rounded-full">2</span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-calendar mr-2 text-blue"></i>
              最近7天
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">3</span>
          </div>
        </div>
      </div>

      <!-- 清单列表 -->
      <div class="sidebar__lists mb-6">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-xs font-semibold text-midGray uppercase font-poppins">清单</h3>
          <button class="text-midGray hover:text-blue transition-colors duration-200" id="addListBtn">
            <i class="fa fa-plus"></i>
          </button>
        </div>
        <div class="space-y-1">
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-inbox mr-2 text-blue"></i>
              收集箱
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">2</span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-star mr-2 text-orange"></i>
              欢迎
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">9</span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-book mr-2 text-green"></i>
              学习安排
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">5</span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-briefcase mr-2 text-blue"></i>
              工作任务
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">3</span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-user mr-2 text-orange"></i>
              个人备忘
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">1</span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-line-chart mr-2 text-green"></i>
              锻炼计划
            </span>
            <span class="bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full">4</span>
          </div>
        </div>
      </div>

      <!-- 筛选器 -->
      <div class="sidebar__filters">
        <h3 class="text-xs font-semibold text-midGray uppercase mb-2 font-poppins">筛选器</h3>
        <div class="space-y-1">
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-tags mr-2 text-blue"></i>
              标签
            </span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-check-circle mr-2 text-green"></i>
              已完成
            </span>
          </div>
          <div class="sidebar-item">
            <span class="flex items-center">
              <i class="fa fa-trash mr-2 text-orange"></i>
              垃圾桶
            </span>
          </div>
        </div>
      </div>
    </aside>

    <!-- 中间：任务列表与新增栏 -->
    <main class="main-content flex-1 border-r border-lightGray bg-white p-6 overflow-y-auto">
      <!-- 顶部标题 -->
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-semibold font-poppins">今天</h2>
        <div class="flex items-center space-x-3">
          <button class="text-midGray hover:text-blue transition-colors duration-200">
            <i class="fa fa-moon-o"></i>
          </button>
          <button class="text-midGray hover:text-blue transition-colors duration-200">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
      </div>

      <!-- 新增任务 -->
      <div class="task-add mb-8">
        <div class="relative">
          <input type="text" placeholder="+ 添加任务至'收集箱'" class="input-field">
          <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center space-x-3">
            <button class="text-midGray hover:text-blue transition-colors duration-200" id="datePickerBtn">
              <i class="fa fa-calendar"></i>
            </button>
            <div class="relative" id="priorityDropdown">
              <button class="text-midGray hover:text-blue transition-colors duration-200">
                <i class="fa fa-flag-o"></i>
              </button>
              <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10 hidden" id="priorityOptions">
                <div class="py-2">
                  <a href="#" class="block px-4 py-2 text-sm text-dark hover:bg-lightGray" data-priority="none">无优先级</a>
                  <a href="#" class="block px-4 py-2 text-sm text-blue hover:bg-lightGray" data-priority="low">低优先级</a>
                  <a href="#" class="block px-4 py-2 text-sm text-yellow hover:bg-lightGray" data-priority="medium">中优先级</a>
                  <a href="#" class="block px-4 py-2 text-sm text-red hover:bg-lightGray" data-priority="high">高优先级</a>
                </div>
              </div>
            </div>
            <div class="relative" id="listDropdown">
              <button class="text-midGray hover:text-blue transition-colors duration-200">
                <i class="fa fa-folder-o"></i>
              </button>
              <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10 hidden" id="listOptions">
                <div class="py-2">
                  <!-- 清单选项将在JavaScript中动态生成 -->
                </div>
              </div>
            </div>
            <div class="relative" id="attachmentDropdown">
              <button class="text-midGray hover:text-blue transition-colors duration-200">
                <i class="fa fa-paperclip"></i>
              </button>
              <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10 hidden" id="attachmentOptions">
                <div class="py-2">
                  <a href="#" class="block px-4 py-2 text-sm text-dark hover:bg-lightGray" id="uploadFile">上传文件</a>
                  <a href="#" class="block px-4 py-2 text-sm text-dark hover:bg-lightGray" id="addLink">添加链接</a>
                </div>
              </div>
              <input type="file" class="hidden" id="fileInput">
            </div>
          </div>
        </div>
      </div>

      <!-- 任务列表 -->
      <div class="task-list">
        <div class="mb-6">
          <h3 class="text-sm font-medium text-midGray mb-3 font-poppins">今天周日</h3>
          <div class="space-y-3">
            <div class="task-item completed card-shadow">
              <input type="checkbox" checked class="mr-4 h-5 w-5 text-blue rounded focus:ring-blue border-lightGray">
              <div class="flex-1">
                <div class="flex items-center">
                  <span>怪诞行为学</span>
                  <span class="list-badge ml-3">学习安排</span>
                </div>
              </div>
              <button class="text-midGray hover:text-blue transition-colors duration-200">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="task-item card-shadow">
              <input type="checkbox" class="mr-4 h-5 w-5 text-blue rounded focus:ring-blue border-lightGray">
              <div class="flex-1">
                <div class="flex items-center">
                  <span>无标题</span>
                </div>
              </div>
              <button class="text-midGray hover:text-blue transition-colors duration-200">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 右侧：任务详情编辑栏 -->
    <aside class="detail-panel flex-1 bg-white p-6 overflow-y-auto">
      <!-- 详情头部 -->
      <div class="detail__header mb-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-2xl font-semibold font-poppins">怪诞行为学</h2>
          <div class="flex items-center space-x-3">
            <button class="text-midGray hover:text-blue transition-colors duration-200">
              <i class="fa fa-ellipsis-v"></i>
            </button>
          </div>
        </div>
        <div class="flex items-center space-x-3 mb-4">
          <span class="bg-blue/20 text-blue px-3 py-1 rounded text-sm">今天</span>
          <span class="list-badge">学习安排</span>
        </div>
      </div>

      <!-- 详情内容 -->
      <div class="detail__content mb-6">
        <h3 class="text-sm font-medium text-midGray mb-3 font-poppins">任务描述</h3>
        <div class="border border-lightGray rounded-lg p-4 min-h-[200px] bg-light/50">
          <p class="text-dark">《怪诞行为学》是行为经济学家·艾瑞里的经典系列案例，彻底打破了传统经济学人"绝对理性"的基础假设，看似混乱的非理性行为，其实时时刻刻影响着我们的选择，理解它们，才能做出更明智的决策。</p>
          <p class="text-dark mt-3">核心观点1：锚定效应</p>
          <p class="text-dark mt-2">就像刚破壳的幼鹅会把第一眼看到的生物认作母亲，我们对价值的认知也会被第一个接触到的信息"锚定"。当年无人问津的黑珍珠，商家将它与顶级珠宝放在一起展示，从此成为稀世珍品。星巴克也是同理，任意的定价让我们接受了远高于普通咖啡的价格。更可怕的是，任意锚定之后的所有决策都会围绕它，做出一系列看似合理的选择。</p>
          <p class="text-dark mt-3">核心观点2："免费"是最强的诱惑，让我们为不需要的东西买单</p>
          <p class="text-dark mt-2">"零"这个数字拥有特殊的魔力，我们对损失的恐惧在免费面前会消失。我们会为了凑满减、免运费，买一堆根本用不上的东西。我们会为了一张免费的10美元礼品券排几个小时队，却不愿意花10美元买一个自己真正需要的东西。免费会让我们失去了对成本的判断，变成了非理性的抢购。</p>
          <p class="text-dark mt-3">核心观点3：社会规范与市场规范，两种规则不能混为一谈</p>
          <p class="text-dark mt-2">我们的生活里有两套运行规则：一套是社会规范，好友帮忙搬家，我们会请他吃饭；另一套是市场规范，等价交换、一分钱一分货。</p>
        </div>
      </div>

      <!-- 详情操作 -->
      <div class="detail__actions">
        <h3 class="text-sm font-medium text-midGray mb-3 font-poppins">操作</h3>
        <div class="flex flex-wrap gap-3 mb-6">
          <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200">
            <i class="fa fa-list-ul mr-2"></i> 子任务
          </button>
          <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200">
            <i class="fa fa-link mr-2"></i> 关联任务
          </button>
          <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200">
            <i class="fa fa-star mr-2"></i> 置顶
          </button>
          <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200">
            <i class="fa fa-paperclip mr-2"></i> 附件
          </button>
          <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200">
            <i class="fa fa-tags mr-2"></i> 标签
          </button>
        </div>
        <div class="flex justify-end space-x-3">
          <button class="btn-secondary">
            取消
          </button>
          <button class="btn-primary">
            保存
          </button>
        </div>
      </div>
    </aside>
  </div>

  <!-- 日历模态框 -->
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="calendarModal">
    <div class="bg-white rounded-lg shadow-xl w-80 p-6 transform transition-all duration-300 scale-100">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-semibold font-poppins">选择日期</h3>
        <button class="text-midGray hover:text-blue transition-colors duration-200" id="closeCalendarModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="mb-6">
        <div class="flex items-center justify-between mb-4">
          <button class="text-midGray hover:text-blue transition-colors duration-200">
            <i class="fa fa-chevron-left"></i>
          </button>
          <h4 class="font-medium font-poppins">2026年4月</h4>
          <button class="text-midGray hover:text-blue transition-colors duration-200">
            <i class="fa fa-chevron-right"></i>
          </button>
        </div>
        <div class="grid grid-cols-7 gap-2 text-center">
          <div class="text-xs text-midGray font-poppins">日</div>
          <div class="text-xs text-midGray font-poppins">一</div>
          <div class="text-xs text-midGray font-poppins">二</div>
          <div class="text-xs text-midGray font-poppins">三</div>
          <div class="text-xs text-midGray font-poppins">四</div>
          <div class="text-xs text-midGray font-poppins">五</div>
          <div class="text-xs text-midGray font-poppins">六</div>
          <div class="text-xs text-midGray">30</div>
          <div class="text-xs text-midGray">31</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">1</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">2</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">3</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">4</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">5</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">6</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">7</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">8</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">9</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">10</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">11</div>
          <div class="text-xs bg-blue text-light rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">12</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">13</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">14</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">15</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">16</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">17</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">18</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">19</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">20</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">21</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">22</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">23</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">24</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">25</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">26</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">27</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">28</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">29</div>
          <div class="text-xs hover:bg-lightGray rounded-full w-8 h-8 flex items-center justify-center mx-auto cursor-pointer">30</div>
          <div class="text-xs text-midGray">1</div>
          <div class="text-xs text-midGray">2</div>
          <div class="text-xs text-midGray">3</div>
          <div class="text-xs text-midGray">4</div>
        </div>
      </div>
      <div class="flex justify-end">
        <button class="btn-primary">
          确定
        </button>
      </div>
    </div>
  </div>

  <script>
    // 数据模型
    class Task {
      constructor(id, name, listId, priority, date, timeRange = null, reminder = null, repeatRule = null, tags = [], attachments = [], description = '', subtasks = [], completed = false) {
        this.id = id;
        this.name = name;
        this.listId = listId;
        this.priority = priority;
        this.date = date;
        this.timeRange = timeRange;
        this.reminder = reminder;
        this.repeatRule = repeatRule;
        this.tags = tags;
        this.attachments = attachments;
        this.description = description;
        this.subtasks = subtasks;
        this.completed = completed;
        this.createdAt = new Date().toISOString();
        this.updatedAt = new Date().toISOString();
      }
    }

    class TaskList {
      constructor(id, name, icon, isDefault = false, color = null) {
        this.id = id;
        this.name = name;
        this.icon = icon;
        this.isDefault = isDefault;
        this.color = color;
      }
    }

    // 工具函数
    function generateId() {
      return Date.now().toString(36) + Math.random().toString(36).substr(2);
    }

    // 存储配置
    const STORAGE_TYPE = 'localStorage'; // 可选: 'localStorage', 'database'

    // 数据库配置
    const DB_CONFIG = {
      host: 'localhost',
      user: 'xx_189yn_cn',
      password: 'aa112233',
      database: 'xx_189yn_cn'
    };

    // 本地存储
    function saveToLocalStorage(key, data) {
      localStorage.setItem(key, JSON.stringify(data));
    }

    function getFromLocalStorage(key) {
      const data = localStorage.getItem(key);
      return data ? JSON.parse(data) : null;
    }

    // 数据库存储（预留接口）
    function saveToDatabase(key, data) {
      // 这里是数据库存储的预留接口
      // 实际项目中需要使用后端API或直接连接数据库
      console.log('Saving to database:', key, data);
      // 暂时回退到本地存储
      saveToLocalStorage(key, data);
    }

    function getFromDatabase(key) {
      // 这里是数据库读取的预留接口
      console.log('Getting from database:', key);
      // 暂时回退到本地存储
      return getFromLocalStorage(key);
    }

    // 通用存储函数
    function saveData(key, data) {
      if (STORAGE_TYPE === 'database') {
        return saveToDatabase(key, data);
      } else {
        return saveToLocalStorage(key, data);
      }
    }

    function getData(key) {
      if (STORAGE_TYPE === 'database') {
        return getFromDatabase(key);
      } else {
        return getFromLocalStorage(key);
      }
    }

    // 示例数据
    const sampleTasks = [
      {
        id: '1',
        name: '怪诞行为学',
        listId: 'learning',
        priority: 'medium',
        date: '2026-04-12',
        description: '《怪诞行为学》是行为经济学家·艾瑞里的经典系列案例，彻底打破了传统经济学人"绝对理性"的基础假设，看似混乱的非理性行为，其实时时刻刻影响着我们的选择，理解它们，才能做出更明智的决策。',
        completed: true,
        createdAt: '2026-04-11T10:00:00',
        updatedAt: '2026-04-12T09:00:00'
      },
      {
        id: '2',
        name: '无标题',
        listId: 'inbox',
        priority: 'none',
        date: '2026-04-12',
        completed: false,
        createdAt: '2026-04-12T08:00:00',
        updatedAt: '2026-04-12T08:00:00'
      }
    ];

    const sampleLists = [
      {
        id: 'inbox',
        name: '收集箱',
        icon: 'inbox',
        isDefault: true
      },
      {
        id: 'welcome',
        name: '欢迎',
        icon: 'star',
        isDefault: true
      },
      {
        id: 'learning',
        name: '学习安排',
        icon: 'book',
        isDefault: true
      },
      {
        id: 'work',
        name: '工作任务',
        icon: 'briefcase',
        isDefault: true
      },
      {
        id: 'personal',
        name: '个人备忘',
        icon: 'user',
        isDefault: true
      },
      {
        id: 'exercise',
        name: '锻炼计划',
        icon: 'line-chart',
        isDefault: false
      }
    ];

    // 初始化数据
    if (!getData('tasks')) {
      saveData('tasks', sampleTasks);
    }

    if (!getData('lists')) {
      saveData('lists', sampleLists);
    }

    // 应用状态
    let state = {
      tasks: getData('tasks') || [],
      lists: getData('lists') || [],
      selectedList: 'inbox',
      selectedTimeFilter: 'today',
      selectedTask: null
    };

    // 渲染函数
    function renderTasks() {
      const taskListContainer = document.querySelector('.task-list');
      if (!taskListContainer) return;

      // 过滤任务
      let filteredTasks = state.tasks.filter(task => {
        // 时间筛选
        if (state.selectedTimeFilter === 'today') {
          const today = new Date().toISOString().split('T')[0];
          if (task.date !== today) return false;
        } else if (state.selectedTimeFilter === '7days') {
          const sevenDaysAgo = new Date();
          sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
          const sevenDaysAgoStr = sevenDaysAgo.toISOString().split('T')[0];
          if (task.date < sevenDaysAgoStr) return false;
        }

        // 清单筛选
        if (state.selectedList !== 'all' && task.listId !== state.selectedList) return false;

        return true;
      });

      // 按日期分组
      const tasksByDate = filteredTasks.reduce((groups, task) => {
        const date = task.date;
        if (!groups[date]) {
          groups[date] = [];
        }
        groups[date].push(task);
        return groups;
      }, {});

      // 渲染任务
      taskListContainer.innerHTML = '';
      Object.entries(tasksByDate).forEach(([date, tasks]) => {
        const dateSection = document.createElement('div');
        dateSection.className = 'mb-6';
        
        const dateHeader = document.createElement('h3');
        dateHeader.className = 'text-sm font-medium text-midGray mb-3 font-poppins';
        
        // 格式化日期显示
        const dateObj = new Date(date);
        const today = new Date().toISOString().split('T')[0];
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        const tomorrowStr = tomorrow.toISOString().split('T')[0];
        
        let dateText;
        if (date === today) {
          dateText = '今天 ' + ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][dateObj.getDay()];
        } else if (date === tomorrowStr) {
          dateText = '明天 ' + ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][dateObj.getDay()];
        } else {
          dateText = dateObj.getMonth() + 1 + '月' + dateObj.getDate() + '日 ' + ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][dateObj.getDay()];
        }
        
        dateHeader.textContent = dateText;
        dateSection.appendChild(dateHeader);

        const tasksContainer = document.createElement('div');
        tasksContainer.className = 'space-y-3';

        tasks.forEach(task => {
          const taskItem = document.createElement('div');
          taskItem.className = `task-item ${task.completed ? 'completed' : ''} card-shadow`;
          taskItem.dataset.taskId = task.id;

          const checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.checked = task.completed;
          checkbox.className = 'mr-4 h-5 w-5 text-blue rounded focus:ring-blue border-lightGray';

          const taskContent = document.createElement('div');
          taskContent.className = 'flex-1';

          const taskNameContainer = document.createElement('div');
          taskNameContainer.className = 'flex items-center';

          const taskName = document.createElement('span');
          taskName.textContent = task.name;
          taskNameContainer.appendChild(taskName);

          // 添加清单标签
          const list = state.lists.find(l => l.id === task.listId);
          if (list) {
            const listBadge = document.createElement('span');
            listBadge.className = 'list-badge ml-3';
            listBadge.textContent = list.name;
            taskNameContainer.appendChild(listBadge);
          }

          // 添加优先级标签
          if (task.priority !== 'none') {
            const priorityBadge = document.createElement('span');
            priorityBadge.className = `priority-${task.priority} ml-2`;
            const priorityText = {
              high: '高',
              medium: '中',
              low: '低'
            }[task.priority];
            priorityBadge.textContent = priorityText;
            taskNameContainer.appendChild(priorityBadge);
          }

          taskContent.appendChild(taskNameContainer);

          const moreButton = document.createElement('button');
          moreButton.className = 'text-midGray hover:text-blue transition-colors duration-200';
          moreButton.innerHTML = '<i class="fa fa-ellipsis-v"></i>';

          taskItem.appendChild(checkbox);
          taskItem.appendChild(taskContent);
          taskItem.appendChild(moreButton);
          tasksContainer.appendChild(taskItem);

          // 绑定事件
          checkbox.addEventListener('change', function() {
            toggleTaskComplete(task.id);
          });

          taskItem.addEventListener('click', function(e) {
            if (e.target !== checkbox && e.target !== moreButton && !moreButton.contains(e.target)) {
              selectTask(task.id);
            }
          });
        });

        dateSection.appendChild(tasksContainer);
        taskListContainer.appendChild(dateSection);
      });
    }

    function renderLists() {
      const listsContainer = document.querySelector('.sidebar__lists .space-y-1');
      if (!listsContainer) return;

      listsContainer.innerHTML = '';
      state.lists.forEach(list => {
        const listItem = document.createElement('div');
        listItem.className = `sidebar-item ${state.selectedList === list.id ? 'active' : ''}`;
        listItem.dataset.listId = list.id;

        const listInfo = document.createElement('span');
        listInfo.className = 'flex items-center';
        
        const icon = document.createElement('i');
        icon.className = `fa fa-${list.icon} mr-2 ${getListColor(list.id)}`;
        listInfo.appendChild(icon);

        const listName = document.createElement('span');
        listName.textContent = list.name;
        listInfo.appendChild(listName);

        const taskCount = document.createElement('span');
        taskCount.className = 'bg-lightGray text-dark text-xs px-2 py-0.5 rounded-full';
        taskCount.textContent = state.tasks.filter(task => task.listId === list.id && !task.completed).length;

        listItem.appendChild(listInfo);
        listItem.appendChild(taskCount);
        listsContainer.appendChild(listItem);

        // 绑定事件
        listItem.addEventListener('click', function() {
          selectList(list.id);
        });
      });
    }

    function getListColor(listId) {
      const colorMap = {
        inbox: 'text-blue',
        welcome: 'text-orange',
        learning: 'text-green',
        work: 'text-blue',
        personal: 'text-orange',
        exercise: 'text-green'
      };
      return colorMap[listId] || 'text-gray-500';
    }

    function renderTaskDetails() {
      const detailPanel = document.querySelector('.detail-panel');
      if (!detailPanel) return;

      if (!state.selectedTask) {
        detailPanel.innerHTML = `
          <div class="flex flex-col items-center justify-center h-full text-center p-6">
            <i class="fa fa-check-square-o text-4xl text-midGray mb-4"></i>
            <h3 class="text-lg font-semibold font-poppins text-midGray mb-2">选择一个任务</h3>
            <p class="text-sm text-midGray">点击任务查看或编辑详情</p>
          </div>
        `;
        return;
      }

      const task = state.selectedTask;
      const list = state.lists.find(l => l.id === task.listId);

      detailPanel.innerHTML = `
        <!-- 详情头部 -->
        <div class="detail__header mb-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-2xl font-semibold font-poppins">${task.name}</h2>
            <div class="flex items-center space-x-3">
              <button class="text-midGray hover:text-blue transition-colors duration-200" id="deleteTask">
                <i class="fa fa-trash"></i>
              </button>
              <button class="text-midGray hover:text-blue transition-colors duration-200">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
          <div class="flex items-center space-x-3 mb-4">
            <span class="bg-blue/20 text-blue px-3 py-1 rounded text-sm">${formatDate(task.date)}</span>
            <span class="list-badge">${list ? list.name : '未知清单'}</span>
            ${task.priority !== 'none' ? `<span class="priority-${task.priority}">${getPriorityText(task.priority)}</span>` : ''}
          </div>
        </div>

        <!-- 详情内容 -->
        <div class="detail__content mb-6">
          <h3 class="text-sm font-medium text-midGray mb-3 font-poppins">任务描述</h3>
          <div class="border border-lightGray rounded-lg p-4 min-h-[200px] bg-light/50" id="taskDescription">
            ${task.description || '<p class="text-midGray italic">点击添加任务描述...</p>'}
          </div>
        </div>

        <!-- 子任务 -->
        <div class="detail__subtasks mb-6">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-medium text-midGray font-poppins">子任务</h3>
          </div>
          <div class="space-y-2" id="subtasksList">
            ${task.subtasks && task.subtasks.length > 0 ? task.subtasks.map(subtask => `
              <div class="flex items-center p-2 bg-light/50 rounded-lg">
                <input type="checkbox" ${subtask.completed ? 'checked' : ''} class="mr-3 h-4 w-4 text-blue rounded focus:ring-blue border-lightGray" disabled>
                <span class="flex-1 ${subtask.completed ? 'text-midGray line-through' : ''}">${subtask.name}</span>
              </div>
            `).join('') : '<p class="text-sm text-midGray italic">暂无子任务</p>'}
          </div>
        </div>

        <!-- 详情操作 -->
        <div class="detail__actions">
          <h3 class="text-sm font-medium text-midGray mb-3 font-poppins">操作</h3>
          <div class="flex flex-wrap gap-3 mb-6">
            <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200" id="linkTaskBtn">
              <i class="fa fa-link mr-2"></i> 关联任务
            </button>
            <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200" id="pinTaskBtn">
              <i class="fa fa-star mr-2"></i> 置顶
            </button>
            <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200" id="attachmentBtn">
              <i class="fa fa-paperclip mr-2"></i> 附件
            </button>
            <button class="flex items-center px-4 py-2 border border-lightGray rounded-lg text-sm text-dark hover:bg-lightGray transition-colors duration-200" id="tagTaskBtn">
              <i class="fa fa-tags mr-2"></i> 标签
            </button>
          </div>
          <div class="flex justify-end space-x-3">
            <button class="btn-secondary" id="cancelEdit">
              取消
            </button>
          </div>
        </div>
      `;

      // 绑定事件
      document.getElementById('deleteTask').addEventListener('click', function() {
        if (confirm('确定要删除这个任务吗？')) {
          deleteTask(task.id);
        }
      });

      document.getElementById('cancelEdit').addEventListener('click', function() {
        selectTask(null);
      });

      // 任务描述编辑
      const taskDescription = document.getElementById('taskDescription');
      taskDescription.addEventListener('click', function() {
        const currentDescription = task.description || '';
        this.innerHTML = `<textarea class="w-full h-40 border-none bg-transparent focus:outline-none resize-none">${currentDescription}</textarea>`;
        const textarea = this.querySelector('textarea');
        textarea.focus();
        textarea.addEventListener('blur', function() {
          updateTaskDescription(task.id, this.value);
        });
        textarea.addEventListener('keypress', function(e) {
          if (e.key === 'Enter' && e.ctrlKey) {
            updateTaskDescription(task.id, this.value);
          }
        });
      });

      // 操作按钮点击事件
      document.getElementById('linkTaskBtn').addEventListener('click', function() {
        alert('关联任务功能');
      });

      document.getElementById('pinTaskBtn').addEventListener('click', function() {
        alert('置顶任务功能');
      });

      document.getElementById('attachmentBtn').addEventListener('click', function() {
        alert('附件功能');
      });

      document.getElementById('tagTaskBtn').addEventListener('click', function() {
        alert('标签功能');
      });
    }

    // 状态更新函数
    function selectList(listId) {
      state.selectedList = listId;
      renderTasks();
      renderLists();
    }

    function selectTimeFilter(filter, event) {
      state.selectedTimeFilter = filter;
      renderTasks();
      // 更新侧边栏选中状态
      const timeFilters = document.querySelectorAll('.sidebar__time-filter .sidebar-item');
      timeFilters.forEach(item => {
        item.classList.remove('active');
      });
      if (event) {
        event.target.closest('.sidebar-item').classList.add('active');
      }
    }

    function selectTask(taskId) {
      if (taskId) {
        state.selectedTask = state.tasks.find(task => task.id === taskId);
      } else {
        state.selectedTask = null;
      }
      renderTaskDetails();
    }

    function toggleTaskComplete(taskId) {
      const task = state.tasks.find(task => task.id === taskId);
      if (task) {
        task.completed = !task.completed;
        task.updatedAt = new Date().toISOString();
        saveData('tasks', state.tasks);
        renderTasks();
        renderLists();
        if (state.selectedTask && state.selectedTask.id === taskId) {
          renderTaskDetails();
        }
      }
    }

    function addTask(name, listId = 'inbox', priority = 'none', date = new Date().toISOString().split('T')[0]) {
      const newTask = new Task(
        generateId(),
        name,
        listId,
        priority,
        date
      );
      state.tasks.push(newTask);
      saveData('tasks', state.tasks);
      renderTasks();
      renderLists();
    }

    function updateTaskName(taskId, name) {
      const task = state.tasks.find(task => task.id === taskId);
      if (task) {
        task.name = name;
        task.updatedAt = new Date().toISOString();
        saveData('tasks', state.tasks);
        renderTasks();
        renderTaskDetails();
      }
    }

    function updateTaskDescription(taskId, description) {
      const task = state.tasks.find(task => task.id === taskId);
      if (task) {
        task.description = description;
        task.updatedAt = new Date().toISOString();
        saveData('tasks', state.tasks);
        renderTaskDetails();
      }
    }

    function addSubtask(taskId, name) {
      const task = state.tasks.find(task => task.id === taskId);
      if (task) {
        if (!task.subtasks) {
          task.subtasks = [];
        }
        task.subtasks.push({
          id: generateId(),
          name: name,
          completed: false
        });
        task.updatedAt = new Date().toISOString();
        saveData('tasks', state.tasks);
        renderTaskDetails();
      }
    }

    function deleteTask(taskId) {
      state.tasks = state.tasks.filter(task => task.id !== taskId);
      saveData('tasks', state.tasks);
      renderTasks();
      renderLists();
      selectTask(null);
    }

    function saveTask(taskId) {
      // 保存任务更改
      saveData('tasks', state.tasks);
      renderTasks();
      renderLists();
      renderTaskDetails();
    }

    function addList(name) {
      const newList = new TaskList(
        generateId(),
        name,
        'folder-o',
        false
      );
      state.lists.push(newList);
      saveData('lists', state.lists);
      renderLists();
      // 更新清单选项
      generateListOptions();
    }

    // 辅助函数
    function formatDate(dateString) {
      const date = new Date(dateString);
      const today = new Date().toISOString().split('T')[0];
      if (dateString === today) {
        return '今天';
      }
      return date.getMonth() + 1 + '月' + date.getDate() + '日';
    }

    function getPriorityText(priority) {
      const priorityMap = {
        high: '高',
        medium: '中',
        low: '低'
      };
      return priorityMap[priority] || '';
    }

    // DOM 操作
    document.addEventListener('DOMContentLoaded', function() {
      // 渲染初始状态
      renderTasks();
      renderLists();
      renderTaskDetails();

      // 新增任务表单状态
      let newTaskForm = {
        name: '',
        priority: 'none',
        listId: 'inbox',
        date: new Date().toISOString().split('T')[0]
      };

      // 优先级下拉菜单
      const priorityDropdown = document.getElementById('priorityDropdown');
      const priorityOptions = document.getElementById('priorityOptions');

      priorityDropdown.addEventListener('click', function(e) {
        e.stopPropagation();
        priorityOptions.classList.toggle('hidden');
        document.getElementById('listOptions').classList.add('hidden');
        document.getElementById('attachmentOptions').classList.add('hidden');
      });

      // 清单下拉菜单
      const listDropdown = document.getElementById('listDropdown');
      const listOptions = document.getElementById('listOptions');

      // 动态生成清单选项
      function generateListOptions() {
        const listOptionsContent = listOptions.querySelector('.py-2');
        listOptionsContent.innerHTML = '';
        state.lists.forEach(list => {
          const link = document.createElement('a');
          link.href = '#';
          link.className = 'block px-4 py-2 text-sm text-dark hover:bg-lightGray';
          link.setAttribute('data-list-id', list.id);
          link.textContent = list.name;
          listOptionsContent.appendChild(link);
        });

        // 绑定清单选择事件
        const listLinks = listOptions.querySelectorAll('a');
        listLinks.forEach(link => {
          link.addEventListener('click', function(e) {
            e.preventDefault();
            const listId = this.getAttribute('data-list-id');
            newTaskForm.listId = listId;
            console.log('Selected list:', listId);
            // 更新按钮显示
            const listBtn = listDropdown.querySelector('button');
            const selectedList = state.lists.find(list => list.id === listId);
            if (selectedList) {
              listBtn.innerHTML = `<i class="fa fa-folder-o ${getListColor(listId)}"></i>`;
            }
            listOptions.classList.add('hidden');
          });
        });
      }

      // 生成清单选项
      generateListOptions();

      listDropdown.addEventListener('click', function(e) {
        e.stopPropagation();
        listOptions.classList.toggle('hidden');
        document.getElementById('priorityOptions').classList.add('hidden');
        document.getElementById('attachmentOptions').classList.add('hidden');
      });

      // 添加清单按钮点击事件
      const addListBtn = document.getElementById('addListBtn');
      if (addListBtn) {
        addListBtn.addEventListener('click', function() {
          const listName = prompt('请输入清单名称:');
          if (listName && listName.trim()) {
            addList(listName.trim());
          }
        });
      }

      // 附件下拉菜单
      const attachmentDropdown = document.getElementById('attachmentDropdown');
      const attachmentOptions = document.getElementById('attachmentOptions');
      const fileInput = document.getElementById('fileInput');

      attachmentDropdown.addEventListener('click', function(e) {
        e.stopPropagation();
        attachmentOptions.classList.toggle('hidden');
        document.getElementById('priorityOptions').classList.add('hidden');
        document.getElementById('listOptions').classList.add('hidden');
      });

      // 点击其他地方关闭下拉菜单
      document.addEventListener('click', function() {
        priorityOptions.classList.add('hidden');
        listOptions.classList.add('hidden');
        attachmentOptions.classList.add('hidden');
      });

      // 附件上传
      document.getElementById('uploadFile').addEventListener('click', function(e) {
        e.preventDefault();
        fileInput.click();
        attachmentOptions.classList.add('hidden');
      });

      fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
          console.log('Selected file:', file.name);
          // 这里可以添加文件上传逻辑
        }
      });

      // 添加链接
      document.getElementById('addLink').addEventListener('click', function(e) {
        e.preventDefault();
        const link = prompt('请输入链接地址:');
        if (link) {
          console.log('Added link:', link);
          // 这里可以添加链接处理逻辑
        }
        attachmentOptions.classList.add('hidden');
      });

      // 优先级选择
      const priorityLinks = document.querySelectorAll('#priorityOptions a');
      priorityLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const priority = this.getAttribute('data-priority');
          newTaskForm.priority = priority;
          console.log('Selected priority:', priority);
          // 更新按钮显示
          const priorityBtn = priorityDropdown.querySelector('button');
          priorityBtn.innerHTML = priority === 'none' ? '<i class="fa fa-flag-o"></i>' : 
                               priority === 'low' ? '<i class="fa fa-flag-o text-blue"></i>' :
                               priority === 'medium' ? '<i class="fa fa-flag-o text-yellow"></i>' :
                               '<i class="fa fa-flag-o text-red"></i>';
          priorityOptions.classList.add('hidden');
        });
      });

      // 日期选择
      const calendarModal = document.getElementById('calendarModal');
      const closeCalendarModal = document.getElementById('closeCalendarModal');
      const datePickerBtn = document.getElementById('datePickerBtn');
      const calendarDays = calendarModal.querySelectorAll('.grid-cols-7 div:not(:first-child)');

      datePickerBtn.addEventListener('click', function() {
        calendarModal.classList.remove('hidden');
      });

      closeCalendarModal.addEventListener('click', function() {
        calendarModal.classList.add('hidden');
      });

      // 点击模态框外部关闭
      calendarModal.addEventListener('click', function(e) {
        if (e.target === calendarModal) {
          calendarModal.classList.add('hidden');
        }
      });

      // 日期选择
      calendarDays.forEach(day => {
        if (!day.classList.contains('text-midGray')) {
          day.addEventListener('click', function() {
            const dayText = this.textContent.trim();
            const currentDate = new Date();
            const selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), parseInt(dayText));
            newTaskForm.date = selectedDate.toISOString().split('T')[0];
            console.log('Selected date:', newTaskForm.date);
            // 更新按钮显示
            const dateBtn = datePickerBtn;
            dateBtn.innerHTML = `<i class="fa fa-calendar text-blue"></i>`;
            calendarModal.classList.add('hidden');
          });
        }
      });

      // 新增任务
      const taskInput = document.querySelector('.task-add input');
      if (taskInput) {
        taskInput.addEventListener('keypress', function(e) {
          if (e.key === 'Enter' && this.value.trim()) {
            addTask(this.value.trim(), newTaskForm.listId, newTaskForm.priority, newTaskForm.date);
            this.value = '';
            // 重置表单状态
            newTaskForm = {
              name: '',
              priority: 'none',
              listId: 'inbox',
              date: new Date().toISOString().split('T')[0]
            };
            // 重置按钮显示
            const priorityBtn = priorityDropdown.querySelector('button');
            priorityBtn.innerHTML = '<i class="fa fa-flag-o"></i>';
            const listBtn = listDropdown.querySelector('button');
            listBtn.innerHTML = '<i class="fa fa-folder-o text-blue"></i>';
            const dateBtn = datePickerBtn;
            dateBtn.innerHTML = '<i class="fa fa-calendar"></i>';
          }
        });
      }

      // 时间筛选
      const timeFilters = document.querySelectorAll('.sidebar__time-filter .sidebar-item');
      timeFilters.forEach(item => {
        item.addEventListener('click', function(e) {
          const filter = this.querySelector('span').textContent.trim();
          selectTimeFilter(filter === '今天' ? 'today' : '7days', e);
        });
      });

      // 侧边栏项点击事件
      const sidebarItems = document.querySelectorAll('.sidebar-item');
      sidebarItems.forEach(item => {
        item.addEventListener('click', function() {
          // 移除所有 active 类
          sidebarItems.forEach(i => i.classList.remove('active'));
          // 添加 active 类到当前项
          this.classList.add('active');
        });
      });
    });
  </script>
</body>
</html>