schoolNews/schoolNewsWeb/src/views/study-plan/StudyTasksView.vue

<template>
  <div class="study-tasks">
    <!-- 任务统计 -->
    <div class="task-statistics">
      <div class="stat-card" v-for="stat in statistics" :key="stat.label">
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-label">{{ stat.label }}</div>
      </div>
    </div>

    <!-- 任务列表 -->
    <div class="task-section">
      <div class="section-header">
        <h2>任务列表</h2>
        <div class="filter-tabs">
          <div 
            class="filter-tab" 
            v-for="filter in filters" 
            :key="filter.key"
            :class="{ active: activeFilter === filter.key }"
            @click="activeFilter = filter.key"
          >
            {{ filter.label }}
          </div>
        </div>
      </div>

      <div class="task-list">
        <div class="task-item" v-for="task in filteredTasks" :key="task.id">
          <div class="task-icon" :class="`status-${task.status}`">
            <i :class="getTaskIcon(task.status)"></i>
          </div>
          <div class="task-content">
            <h3>{{ task.title }}</h3>
            <p class="task-description">{{ task.description }}</p>
            <div class="task-meta">
              <span class="task-type">{{ task.type }}</span>
              <span class="task-deadline">截止时间：{{ task.deadline }}</span>
            </div>
          </div>
          <div class="task-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: task.progress + '%' }"></div>
            </div>
            <span class="progress-text">{{ task.progress }}%</span>
          </div>
          <div class="task-actions">
            <el-button 
              type="primary" 
              size="small" 
              @click="goToTask(task)"
              v-if="task.status !== 'completed'"
            >
              {{ task.status === 'not-started' ? '开始学习' : '继续学习' }}
            </el-button>
            <el-button 
              size="small" 
              @click="viewTaskDetail(task)"
            >
              查看详情
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElButton } from 'element-plus';

const router = useRouter();
const activeFilter = ref('all');
const tasks = ref<any[]>([]);

const statistics = ref([
  { label: '总任务数', value: 0 },
  { label: '进行中', value: 0 },
  { label: '已完成', value: 0 },
  { label: '完成率', value: '0%' }
]);

const filters = [
  { key: 'all', label: '全部任务' },
  { key: 'not-started', label: '未开始' },
  { key: 'in-progress', label: '进行中' },
  { key: 'completed', label: '已完成' }
];

const filteredTasks = computed(() => {
  if (activeFilter.value === 'all') return tasks.value;
  return tasks.value.filter(task => task.status === activeFilter.value);
});

onMounted(() => {
  // TODO: 加载学习任务数据
});

function getTaskIcon(status: string) {
  const iconMap: Record<string, string> = {
    'not-started': '⭕',
    'in-progress': '⏳',
    'completed': '✅'
  };
  return iconMap[status] || '⭕';
}

function goToTask(task: any) {
  router.push(`/study/task/${task.id}`);
}

function viewTaskDetail(task: any) {
  router.push(`/study/task/${task.id}/detail`);
}
</script>

<style lang="scss" scoped>
.study-tasks {
  padding: 40px;
}

.task-statistics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  padding: 24px;
  background: linear-gradient(135deg, #C62828, #E53935);
  border-radius: 8px;
  color: white;
  text-align: center;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

.task-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #141F38;
    }
  }
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.filter-tab {
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: #ffe6e6;
    color: #C62828;
  }
  
  &.active {
    background: #C62828;
    color: white;
  }
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    border-color: #C62828;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.task-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  
  &.status-not-started {
    background: #f5f5f5;
  }
  
  &.status-in-progress {
    background: #fff3e0;
  }
  
  &.status-completed {
    background: #e8f5e9;
  }
}

.task-content {
  flex: 1;
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 8px;
  }
}

.task-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.task-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
}

.task-type {
  color: #C62828;
  font-weight: 500;
}

.task-deadline {
  color: #999;
}

.task-progress {
  width: 150px;
  flex-shrink: 0;
  
  .progress-bar {
    width: 100%;
    height: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #C62828, #E53935);
    transition: width 0.3s;
  }
  
  .progress-text {
    font-size: 12px;
    color: #666;
  }
}

.task-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
</style>