每周总结

🌿 慢思考

在快节奏的开发中，偶尔停下来问一句：“这真的必要吗？”往往能省下大量时间。

<script>
  new Vue({
    el: '#app',
    data: {
      weeks: [
        {
          id: 1,
          title: '第24周总结',
          dates: '2023年6月12日 - 6月18日',
          progress: 70,
          tasks: [
            { id: 1, text: '项目需求分析', status: 'completed' },
            { id: 2, text: '技术方案设计', status: 'completed' },
            { id: 3, text: '团队周会', status: 'completed' },
            { id: 4, text: '代码框架搭建', status: 'in-progress' },
            { id: 5, text: '技术文档编写', status: 'pending' }
          ],
          reflection: '本周在项目规划方面做得不错，但在时间管理上仍有提升空间。团队协作效率较高，但个人学习时间安排不够合理。'
        },
        {
          id: 2,
          title: '第25周总结',
          dates: '2023年6月19日 - 6月25日',
          progress: 85,
          tasks: [
            { id: 1, text: '项目模块开发', status: 'completed' },
            { id: 2, text: '代码评审', status: 'completed' },
            { id: 3, text: '技术分享会', status: 'completed' },
            { id: 4, text: '单元测试编写', status: 'completed' },
            { id: 5, text: '性能优化', status: 'in-progress' }
          ],
          reflection: '本周在项目时间预估上存在偏差，导致部分任务延期。需要提高任务拆解能力和时间预估准确性。另外，团队沟通效率有显著提升，跨部门协作更加顺畅。'
        },
        {
          id: 3,
          title: '第26周总结',
          dates: '2023年6月26日 - 7月2日',
          progress: 95,
          tasks: [
            { id: 1, text: '项目第二阶段开发', status: 'completed' },
            { id: 2, text: '技术文档完善', status: 'completed' },
            { id: 3, text: '性能优化', status: 'completed' },
            { id: 4, text: '团队建设活动', status: 'completed' },
            { id: 5, text: '项目部署', status: 'in-progress' }
          ],
          reflection: '本周项目进展顺利，提前完成了大部分任务。在团队协作方面表现良好，有效解决了多个技术难题。但需要注意项目文档的完善度，为后续维护做好准备。'
        }
      ]
    },
    methods: {
      getStatusText(status) {
        const statusMap = {
          'completed': '已完成',
          'in-progress': '进行中',
          'pending': '待开始'
        };
        return statusMap[status] || '';
      }
    }
  });
</script>

<!-- run -->
<style>
  :root {
    --primary: #5b7cfd;
    --primary-light: #eef2ff;
    --secondary: #33cabb;
    --secondary-light: #e6f7f6;
    --accent: #ff6b8b;
    --accent-light: #ffeef2;
    --light: #f8f9fa;
    --dark: #343a40;
    --gray: #6c757d;
    --light-gray: #e9ecef;
    --border-radius: 12px;
    --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
  }

  #app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: var(--dark);
    line-height: 1.6;
  }

  .header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
  }

  .header h1 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 700;
  }

  .header p {
    color: var(--gray);
    font-size: 1rem;
  }

  .weeks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }

  .week-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 22px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }

  .week-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
  }

  .week-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
  }

  .week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
  }

  .week-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
  }

  .week-dates {
    color: var(--gray);
    font-size: 0.88rem;
  }

  .progress-section {
    margin: 18px 0;
  }

  .progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.95rem;
  }

  .progress-bar {
    height: 7px;
    background: var(--light-gray);
    border-radius: 10px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 1s ease-in-out;
  }

  .task-list {
    list-style: none;
    margin-bottom: 18px;
  }

  .task-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--light-gray);
  }

  .task-item:last-child {
    border-bottom: none;
  }

  .task-checkbox {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 10px;
  }

  .task-checkbox.checked {
    background: var(--secondary);
    border-color: var(--secondary);
    color: white;
  }

  .task-text {
    flex: 1;
    font-size: 0.92rem;
  }

  .task-status {
    font-size: 0.78rem;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 500;
  }

  .status-completed {
    background: rgba(51, 202, 187, 0.15);
    color: var(--secondary);
  }

  .status-in-progress {
    background: rgba(91, 124, 253, 0.15);
    color: var(--primary);
  }

  .status-pending {
    background: rgba(255, 107, 139, 0.15);
    color: var(--accent);
  }

  .reflection-section {
    margin-top: 16px;
  }

  .reflection-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark);
    display: flex;
    align-items: center;
  }

  .reflection-title i {
    margin-right: 8px;
    color: var(--primary);
  }

  .reflection-content {
    color: var(--gray);
    line-height: 1.65;
    font-size: 0.9rem;
  }

  .footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    color: var(--gray);
    font-size: 0.9rem;
  }

  @media (max-width: 768px) {
    .weeks-container {
      grid-template-columns: 1fr;
    }
    .header h1 {
      font-size: 1.8rem;
    }
    .week-card {
      padding: 18px;
    }
  }
</style>

<div id="app">


  <div class="weeks-container">
    <div class="week-card" v-for="week in weeks" :key="week.id">
      <div class="week-header">
        <div class="week-title">{{ week.title }}</div>
        <div class="week-dates">{{ week.dates }}</div>
      </div>

      <div class="progress-section">
        <div class="progress-info">
          <span>本周进度</span>
          <span>{{ week.progress }}%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: week.progress + '%' }"></div>
        </div>
      </div>

      <ul class="task-list">
        <li class="task-item" v-for="task in week.tasks" :key="task.id">
          <div class="task-checkbox" :class="{ checked: task.status === 'completed' }">
            {{ task.status === 'completed' ? '✓' : '○' }}
          </div>
          <div class="task-text">{{ task.text }}</div>
          <div class="task-status" :class="'status-' + task.status">
            {{ getStatusText(task.status) }}
          </div>
        </li>
      </ul>

      <div class="reflection-section">
        <div class="reflection-title">
          <i class="fas fa-lightbulb"></i> 本周反思
        </div>
        <div class="reflection-content">{{ week.reflection }}</div>
      </div>
    </div>
  </div>

  <div class="footer">
    <p>每周工作总结 • 持续成长 • 追求卓越</p>
  </div>
</div>