From 962b430a75053ac401c59253d98205216e95735a Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Mon, 25 Aug 2025 15:47:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(calendar):=20=E6=B7=BB=E5=8A=A0=E6=97=A5?=
 =?UTF-8?q?=E5=8E=86=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=BF=E6=8D=A2=E5=BE=85?=
 =?UTF-8?q?=E5=8A=9E=E4=BA=8B=E9=A1=B9=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构待办事项列表为日历视图，添加@fullcalendar/core依赖
支持营期设置、日期选择和事件展示功能
---
 my-vue-app/package.json                       |   1 +
 my-vue-app/pnpm-lock.yaml                     |  15 +
 .../secondTop/components/ActionItems.vue      | 693 +------------
 .../views/secondTop/components/Calendar.vue   | 967 ++++++++++++++++++
 my-vue-app/src/views/secondTop/secondTop.vue  |  17 -
 5 files changed, 1002 insertions(+), 691 deletions(-)
 create mode 100644 my-vue-app/src/views/secondTop/components/Calendar.vue

diff --git a/my-vue-app/package.json b/my-vue-app/package.json
index 6803d85..750dea8 100644
--- a/my-vue-app/package.json
+++ b/my-vue-app/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@fullcalendar/core": "^6.1.19",
     "axios": "^1.10.0",
     "chart.js": "^4.5.0",
     "dompurify": "^3.2.6",
diff --git a/my-vue-app/pnpm-lock.yaml b/my-vue-app/pnpm-lock.yaml
index a7fd223..e699d45 100644
--- a/my-vue-app/pnpm-lock.yaml
+++ b/my-vue-app/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.3.1
         version: 2.3.1(vue@3.5.17(typescript@5.8.3))
+      '@fullcalendar/core':
+        specifier: ^6.1.19
+        version: 6.1.19
       axios:
         specifier: ^1.10.0
         version: 1.10.0
@@ -456,6 +459,9 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@fullcalendar/core@6.1.19':
+    resolution: {integrity: sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1676,6 +1682,9 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  preact@10.12.1:
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -2356,6 +2365,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@fullcalendar/core@6.1.19':
+    dependencies:
+      preact: 10.12.1
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -3575,6 +3588,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  preact@10.12.1: {}
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
diff --git a/my-vue-app/src/views/secondTop/components/ActionItems.vue b/my-vue-app/src/views/secondTop/components/ActionItems.vue
index 7cd283d..dc88022 100644
--- a/my-vue-app/src/views/secondTop/components/ActionItems.vue
+++ b/my-vue-app/src/views/secondTop/components/ActionItems.vue
@@ -1,686 +1,31 @@
 <template>
-  <div class="action-items">
-    <div class="actions-header">
-      <h2>待处理事项</h2>
-      <div class="header-controls">
-        <select v-model="filterPriority" class="priority-filter">
-          <option value="all">全部状态</option>
-          <option value="待处理">待处理</option>
-          <option value="正在处理">正在处理</option>
-          <option value="已完成">已完成</option>
-        </select>
-      </div>
-    </div>
-    
-    <div class="actions-list">
-      <div v-if="filteredActions.length === 0" class="no-tasks">
-        <p>暂无任务</p>
-      </div>
-      <div v-else class="task-list">
-        <div 
-          v-for="task in filteredActions" 
-          :key="task.task_id" 
-          class="task-row"
-        >
-          <div class="task-info">
-            <div class="task-row-1">
-              <span class="task-title">{{ task.task_title }}</span>
-              <span class="task-content">{{ task.task_content }}</span>
-            </div>
-            <div class="task-row-2">
-              <span class="task-date">到期时间: {{ formatDueDate(task.expiration_date) }}</span>
-              <span class="task-created">创建时间: {{ task.created_at }}</span>
-            </div>
-          </div>
-          <div class="task-actions">
-            <span class="status-tag" :class="getTaskStatusClass(task.state)">
-              {{ task.state }}
-            </span>
-            <button 
-              class="status-btn" 
-              @click="changeTaskStatus(task)"
-            >
-              处理任务
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="action-items-container">
+    <Calendar />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import axios from 'axios'
-
-const props = defineProps({
-  selectedGroup: {
-    type: Object,
-    default: null
-  }
-})
-
-// 筛选优先级
-const filterPriority = ref('all')
-
-// 显示新增表单
-const showAddForm = ref(false)
-
-// 新增事项表单数据
-const newAction = ref({
-  title: '',
-  description: '',
-  priority: 'medium',
-  dueDate: '',
-  relatedGroup: ''
-})
-
-// 待处理事项数据
-const actions = ref([])
-
-// 筛选后的事项
-const filteredActions = computed(() => {
-  console.log('计算filteredActions - actions.value:', actions.value)
-  console.log('计算filteredActions - filterPriority.value:', filterPriority.value)
-  
-  let filtered = actions.value
-  
-  if (filterPriority.value !== 'all') {
-    filtered = filtered.filter(task => task.state === filterPriority.value)
-  }
-  
-  console.log('计算filteredActions - filtered结果:', filtered)
-  return filtered
-})
-
-// 获取任务状态样式类
-const getTaskStatusClass = (state) => {
-  switch (state) {
-    case '待处理':
-      return 'status-pending'
-    case '正在处理':
-      return 'status-processing'
-    case '已完成':
-      return 'status-completed'
-    default:
-      return 'status-default'
-  }
-}
-
-// 格式化到期日期
-const formatDueDate = (dateStr) => {
-  if (!dateStr) return '无'
-  // 如果是YYYYMMDD格式，转换为YYYY-MM-DD
-  if (dateStr.length === 8) {
-    const year = dateStr.substring(0, 4)
-    const month = dateStr.substring(4, 6)
-    const day = dateStr.substring(6, 8)
-    return `${year}-${month}-${day}`
-  }
-  return dateStr
-}
-// 获取任务列表
-const getTaskList = async () => {
-  try {
-    const res = await axios.post('http://192.168.15.60:8890/api/v1/level_five/overview/view_tasks', {}, {
-      headers: {
-        'Authorization': 'Bearer ' + localStorage.getItem('token')
-      }
-    })
-    console.log(888888,res)
-    if (res.data.code === 200) {
-      actions.value = res.data.data.tasks || res.data.data
-      console.log(777777,actions.value)
-    }
-  } catch (error) {
-    console.error('获取任务列表失败:', error)
-  }
-}
-// 修改任务状态按钮点击事件
-const changeTaskStatus = (task) => {
-  const statusOptions = ['待处理', '正在处理', '已完成']
-  const currentIndex = statusOptions.indexOf(task.state)
-  const nextIndex = (currentIndex + 1) % statusOptions.length
-  const newState = statusOptions[nextIndex]
-  
-  updateTaskState(task.task_id, newState)
-}
-
-// 修改任务状态  http://192.168.15.56:8890/api/v1/level_four/overview/update_task_state
-const updateTaskState = async (taskId, state) => {
-  try {
-    const res = await axios.put('http://192.168.15.60:8890/api/v1/level_four/overview/update_task_state', {
-      task_ids: [taskId],
-      new_state: state
-    }, {
-      headers: {
-        'Authorization': 'Bearer ' + localStorage.getItem('token')
-      }
-    })
-    if (res.data.code === 200) {
-      console.log('任务状态更新成功')
-      // 刷新任务列表
-      await getTaskList()
-    }
-  } catch (error) {
-    console.error('更新任务状态失败:', error)
-  }
-}
-
-// 编辑事项
-const editAction = (action) => {
-  // 这里可以实现编辑功能
-  console.log('编辑事项:', action)
-}
-
-// 删除事项
-const deleteAction = (id) => {
-  if (confirm('确定要删除这个事项吗？')) {
-    const index = actions.value.findIndex(a => a.id === id)
-    if (index > -1) {
-      actions.value.splice(index, 1)
-    }
-  }
-}
-
-// 添加新事项
-const addAction = () => {
-  const newId = Math.max(...actions.value.map(a => a.id)) + 1
-  actions.value.push({
-    id: newId,
-    ...newAction.value,
-    progress: 0,
-    tags: [],
-    completed: false,
-    createdAt: new Date().toISOString().split('T')[0]
-  })
-  
-  // 重置表单
-  newAction.value = {
-    title: '',
-    description: '',
-    priority: 'medium',
-    dueDate: '',
-    relatedGroup: ''
-  }
-  
-  showAddForm.value = false
-}
-onMounted(async () => {
- await getTaskList()
-})
+import Calendar from './Calendar.vue';
 </script>
 
-<style lang="scss" scoped>
-.action-items {
-  background: white;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+<style scoped>
+.action-items-container {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .actions-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-    
-    h2 {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: #1e293b;
-      margin: 0;
-    }
-    
-    .header-controls {
-      display: flex;
-      gap: 0.75rem;
-      align-items: center;
-      
-      .priority-filter {
-        padding: 0.5rem;
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-        font-size: 0.85rem;
-        background: white;
-        cursor: pointer;
-        
-        &:focus {
-          outline: none;
-          border-color: #3b82f6;
-        }
-      }
-      
-      .add-btn {
-        padding: 0.5rem 1rem;
-        background: #3b82f6;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        font-size: 0.85rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: background 0.2s ease;
-        
-        &:hover {
-          background: #2563eb;
-        }
-      }
-    }
-  }
-  
-  // 事项列表
-  .actions-list {
-    flex: 1;
-    overflow-y: auto;
-    
-    .no-tasks {
-      text-align: center;
-      padding: 40px 20px;
-      color: #999;
-      
-      p {
-        margin: 0;
-        font-size: 0.9rem;
-      }
-    }
-    
-    .action-item {
-      display: flex;
-      padding: 1rem;
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      margin-bottom: 1rem;
-      transition: all 0.2s ease;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      &:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        border-color: #d0d0d0;
-      }
-      
-      &.status-pending {
-        border-left: 4px solid #f59e0b;
-      }
-      
-      &.status-processing {
-        border-left: 4px solid #3b82f6;
-      }
-      
-      &.status-completed {
-        border-left: 4px solid #10b981;
-        opacity: 0.8;
-        background: #f9fafb;
-      }
-      
-      .action-content {
-        flex: 1;
-        
-        .action-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          margin-bottom: 0.5rem;
-          
-          .action-title {
-            font-size: 1rem;
-            font-weight: 600;
-            color: #1f2937;
-            margin: 0;
-            flex: 1;
-            margin-right: 12px;
-          }
-          
-          .action-meta {
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
-            flex-shrink: 0;
-            
-            .status-badge {
-              padding: 0.25rem 0.5rem;
-              border-radius: 12px;
-              font-size: 0.75rem;
-              font-weight: 500;
-              white-space: nowrap;
-              
-              &.status-pending {
-                background: #fff3cd;
-                color: #856404;
-                border: 1px solid #ffeaa7;
-              }
-              
-              &.status-processing {
-                background: #d1ecf1;
-                color: #0c5460;
-                border: 1px solid #bee5eb;
-              }
-              
-              &.status-completed {
-                background: #d4edda;
-                color: #155724;
-                border: 1px solid #c3e6cb;
-              }
-              
-              &.status-default {
-                background: #f8f9fa;
-                color: #6c757d;
-                border: 1px solid #dee2e6;
-              }
-            }
-            
-            .due-date {
-              font-size: 0.75rem;
-              color: #666;
-              background: #f8f9fa;
-              padding: 2px 6px;
-              border-radius: 4px;
-            }
-          }
-        }
-        
-        .action-description {
-          font-size: 0.9rem;
-          color: #6b7280;
-          margin: 0 0 1rem 0;
-          line-height: 1.5;
-        }
-        
-        .action-details {
-          margin-top: 12px;
-          padding-top: 12px;
-          border-top: 1px solid #f0f0f0;
-          
-          .detail-item {
-            display: flex;
-            gap: 8px;
-            font-size: 0.8rem;
-            color: #888;
-            
-            .detail-label {
-              font-weight: 500;
-              min-width: 60px;
-            }
-            
-            .detail-value {
-              color: #666;
-            }
-          }
-        }
-      }
-    }
-  }
-  
-
-  
-  // 空状态
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    text-align: center;
-    
-    .empty-icon {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-      opacity: 0.5;
-    }
-    
-    .empty-text {
-      h3 {
-        font-size: 1.1rem;
-        color: #374151;
-        margin: 0 0 0.5rem 0;
-      }
-      
-      p {
-        color: #6b7280;
-        margin: 0;
-      }
-    }
-  }
-  
-  // 模态框
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    
-    .modal-content {
-      background: white;
-      border-radius: 12px;
-      padding: 1.5rem;
-      width: 90%;
-      max-width: 500px;
-      max-height: 80vh;
-      overflow-y: auto;
-      
-      .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1.5rem;
-        
-        h3 {
-          margin: 0;
-          color: #1f2937;
-        }
-        
-        .close-btn {
-          background: none;
-          border: none;
-          font-size: 1.5rem;
-          cursor: pointer;
-          color: #6b7280;
-          
-          &:hover {
-            color: #374151;
-          }
-        }
-      }
-      
-      .add-form {
-        .form-group {
-          margin-bottom: 1rem;
-          
-          label {
-            display: block;
-            font-size: 0.9rem;
-            font-weight: 500;
-            color: #374151;
-            margin-bottom: 0.5rem;
-          }
-          
-          .form-input, .form-textarea, .form-select {
-            width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
-            font-size: 0.9rem;
-            
-            &:focus {
-              outline: none;
-              border-color: #3b82f6;
-            }
-          }
-          
-          .form-textarea {
-            height: 80px;
-            resize: vertical;
-          }
-        }
-        
-        .form-row {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 1rem;
-        }
-        
-        .form-actions {
-          display: flex;
-          gap: 1rem;
-          justify-content: flex-end;
-          margin-top: 1.5rem;
-          
-          .btn-cancel, .btn-submit {
-            padding: 0.75rem 1.5rem;
-            border: none;
-            border-radius: 6px;
-            font-size: 0.9rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-          }
-          
-          .btn-cancel {
-            background: #f3f4f6;
-            color: #374151;
-            
-            &:hover {
-              background: #e5e7eb;
-            }
-          }
-          
-          .btn-submit {
-            background: #3b82f6;
-            color: white;
-            
-            &:hover {
-              background: #2563eb;
-            }
-          }
-        }
-      }
-    }
-  }
+  max-height: 600px;
+  overflow: hidden;
+  padding: 5px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-// 任务列表样式
-.task-list {
-  .task-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 0;
-    border-bottom: 1px solid #e5e7eb;
-    
-    &:hover {
-      background-color: #f9fafb;
-    }
-    
-    .task-info {
-       display: flex;
-       flex-direction: column;
-       gap: 8px;
-       flex: 1;
-       margin-right: 16px;
-       
-       .task-row-1, .task-row-2 {
-         display: flex;
-         gap: 12px;
-         align-items: center;
-       }
-       
-       .task-row-1 {
-         .task-title {
-           font-weight: 600;
-           color: #111827;
-           font-size: 14px;
-           margin-right: 8px;
-         }
-         
-         .task-content {
-           color: #6b7280;
-           font-size: 13px;
-           flex: 1;
-         }
-       }
-       
-       .task-row-2 {
-         .task-date, .task-created {
-           color: #9ca3af;
-           font-size: 12px;
-         }
-       }
-     }
-    
-    .task-actions {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      
-      .status-tag {
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 500;
-        
-        &.pending {
-          background-color: #fef3c7;
-          color: #d97706;
-        }
-        
-        &.in-progress {
-          background-color: #dbeafe;
-          color: #2563eb;
-        }
-        
-        &.completed {
-          background-color: #d1fae5;
-          color: #059669;
-        }
-      }
-      
-      .status-btn {
-        padding: 6px 12px;
-        background-color: #3b82f6;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        font-size: 12px;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        
-        &:hover {
-          background-color: #2563eb;
-        }
-      }
-    }
-  }
-
-  .no-tasks {
-    text-align: center;
-    padding: 40px 20px;
-    color: #6b7280;
-  }
-
-  // 移动端适配
-  @media (max-width: 768px) {
-    .task-list {
-      .task-row {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 12px;
-        
-        .task-actions {
-          align-self: flex-end;
-        }
-      }
-    }
-  }
+.calendar-title {
+  margin: 0 0 20px 0;
+  color: #303133;
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #f0f2f5;
 }
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/secondTop/components/Calendar.vue b/my-vue-app/src/views/secondTop/components/Calendar.vue
new file mode 100644
index 0000000..e72d93d
--- /dev/null
+++ b/my-vue-app/src/views/secondTop/components/Calendar.vue
@@ -0,0 +1,967 @@
+<template>
+  <div class="calendar-container">
+    <!-- 头部导航 -->
+    <div class="calendar-header">
+      <button @click="previousMonth" class="nav-btn">
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+        </svg>
+      </button>
+      <h2 class="month-year">{{ currentYear }}年{{ currentMonth + 1 }}月</h2>
+      <div class="header-actions">
+        <button v-if="!shouldShowFinishCamp()" @click="showCampModal = true" class="camp-btn">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+          </svg>
+          设置营期
+        </button>
+        <button v-if="shouldShowFinishCamp()" @click="finishCamp" class="camp-btn finish-camp">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+          </svg>
+          结束营期
+        </button>
+        <button @click="nextMonth" class="nav-btn">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 星期标题 -->
+    <div class="weekdays">
+      <div v-for="day in weekdays" :key="day" class="weekday">
+        {{ day }}
+      </div>
+    </div>
+
+    <!-- 日期网格 -->
+    <div class="calendar-grid">
+      <div 
+        v-for="date in calendarDates" 
+        :key="date.key"
+        :class="[
+          'date-cell',
+          {
+            'other-month': !date.isCurrentMonth,
+            'today': date.isToday,
+            'selected': date.isSelected,
+            'has-event': date.hasEvent
+          }
+        ]"
+        @click="selectDate(date, $event)"
+      >
+        <span class="date-number">{{ date.day }}</span>
+        <div v-if="date.hasEvent && !isRestDay(date.dateStr)" class="event-dot" :class="getEventTypeClass(date.dateStr)"></div>
+        <span v-if="isRestDay(date.dateStr)" class="rest-text">休</span>
+      </div>
+    </div>
+
+    <!-- 悬浮日期信息 -->
+    <div 
+      v-if="showTooltip && selectedDate" 
+      class="date-tooltip"
+      :style="{ left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px' }"
+    >
+      <h3>{{ formatSelectedDate }}</h3>
+      <div v-if="selectedDateEvents.length > 0" class="events-list">
+        <div v-for="event in selectedDateEvents" :key="event.id" class="event-item">
+          <span class="event-title">{{ event.title }}</span>
+          <span class="event-desc">{{ event.description }}</span>
+        </div>
+      </div>
+      <div v-else class="no-events">
+        暂无日程安排
+      </div>
+    </div>
+
+    <!-- 设置营期弹窗 -->
+    <div v-if="showCampModal" class="modal-overlay" @click="showCampModal = false">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h3>设置营期</h3>
+          <button @click="showCampModal = false" class="close-btn">
+            <svg viewBox="0 0 24 24" width="20" height="20">
+              <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label for="campStartDate">营期开始时间：</label>
+            <input 
+              type="date" 
+              id="campStartDate" 
+              v-model="campStartDate" 
+              class="form-input"
+            />
+          </div>
+          <div class="form-group">
+            <label for="campDays">接数据天数：</label>
+            <input 
+              type="number" 
+              id="campDays" 
+              v-model="campDays" 
+              min="1" 
+              max="365" 
+              class="form-input"
+              placeholder="请输入天数"
+            />
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button @click="showCampModal = false" class="cancel-btn">取消</button>
+          <button @click="saveCampSettings" class="save-btn">保存</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user';
+import {getCampPeriodAdmin} from '@/api/secondTop.js'
+
+// 响应式数据
+const currentYear = ref(new Date().getFullYear());
+const currentMonth = ref(new Date().getMonth());
+const selectedDate = ref(null);
+const today = new Date();
+const showTooltip = ref(false);
+const tooltipPosition = ref({ x: 0, y: 0 });
+
+// 营期设置相关
+const showCampModal = ref(false);
+const campStartDate = ref('');
+const campDays = ref();
+const isCampFinished = ref(false);
+
+// 获取本地时区的今日日期字符串
+const getTodayString = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+const todayString = getTodayString();
+
+// 星期标题
+const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+
+// 示例事件数据
+const events = ref([]);
+
+// 计算属性：当前月份的日期数组
+const calendarDates = computed(() => {
+  const dates = [];
+  const firstDay = new Date(currentYear.value, currentMonth.value, 1);
+  const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0);
+  const startDate = new Date(firstDay);
+  
+  // 调整到周日开始
+  startDate.setDate(startDate.getDate() - startDate.getDay());
+  
+  // 生成6周的日期
+  for (let i = 0; i < 42; i++) {
+    const date = new Date(startDate);
+    date.setDate(startDate.getDate() + i);
+    
+    const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    const isCurrentMonth = date.getMonth() === currentMonth.value;
+    const isToday = dateStr === todayString;
+    const hasEvent = events.value.some(event => event.date === dateStr);
+    
+    dates.push({
+      key: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
+      date: date,
+      day: date.getDate(),
+      dateStr: dateStr,
+      isCurrentMonth: isCurrentMonth,
+      isToday: isToday,
+      isSelected: selectedDate.value && selectedDate.value.dateStr === dateStr,
+      hasEvent: hasEvent
+    });
+  }
+  
+  return dates;
+});
+
+// 计算属性：格式化选中日期
+const formatSelectedDate = computed(() => {
+  if (!selectedDate.value) return '';
+  const date = selectedDate.value.date;
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+});
+
+// 计算属性：选中日期的事件
+const selectedDateEvents = computed(() => {
+  if (!selectedDate.value) return [];
+  return events.value.filter(event => event.date === selectedDate.value.dateStr);
+});
+
+// 方法：上一月
+const previousMonth = () => {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11;
+    currentYear.value--;
+  } else {
+    currentMonth.value--;
+  }
+};
+
+// 方法：下一月
+const nextMonth = () => {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0;
+    currentYear.value++;
+  } else {
+    currentMonth.value++;
+  }
+};
+
+// 方法：选择日期
+const selectDate = (date, event) => {
+  selectedDate.value = date;
+  if (event) {
+    tooltipPosition.value = {
+      x: event.clientX + 10,
+      y: event.clientY - 10
+    };
+    showTooltip.value = true;
+    
+    // 3秒后自动隐藏
+    setTimeout(() => {
+      showTooltip.value = false;
+    }, 3000);
+  }
+};
+
+// 方法：隐藏悬浮框
+const hideTooltip = () => {
+  showTooltip.value = false;
+};
+
+// 方法：保存营期设置
+const saveCampSettings = async () => {
+  if (!campStartDate.value) {
+    alert('请选择营期开始时间');
+    return;
+  }
+  if (!campDays.value || campDays.value < 1) {
+    alert('请输入有效的天数');
+    return;
+  }
+  
+  try {
+    // 调用API设置营期参数并获取营期安排
+    const result = await CenterCampPeriodAdmin({
+      receipt_data_start_time: campStartDate.value,
+      receipt_data_time: campDays.value.toString()
+    });
+    
+    if (result && result.data) {
+      showCampModal.value = false;
+    } 
+  } catch (error) {
+    console.error('保存营期设置失败:', error);
+  }
+};
+
+// 方法：生成营期日程安排
+const generateCampSchedule = () => {
+  const startDate = new Date(campStartDate.value);
+  const dataDays = campDays.value || 2; // 接数据天数，默认2天
+  let currentDate = new Date(startDate);
+  let eventId = events.value.length + 1;
+  
+  // 清除之前的营期相关事件
+  events.value = events.value.filter(event => !event.isCampEvent);
+  
+  // 添加接数据日程
+  for (let i = 0; i < dataDays; i++) {
+    const dateStr = formatDateToString(currentDate);
+    events.value.push({
+      id: eventId++,
+      date: dateStr,
+      title: `接数据 第${i + 1}天`,
+      description: '营期数据接收阶段',
+      isCampEvent: true,
+      type: 'data'
+    });
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+  
+  // 添加课程日程
+  const courses = ['课1', '课2', '课3', '课4'];
+  courses.forEach((course, index) => {
+    const dateStr = formatDateToString(currentDate);
+    events.value.push({
+      id: eventId++,
+      date: dateStr,
+      title: course,
+      description: `${course}`,
+      isCampEvent: true,
+      type: 'course'
+    });
+    currentDate.setDate(currentDate.getDate() + 1);
+  });
+  
+  // 添加休息日程
+  const restDateStr = formatDateToString(currentDate);
+  events.value.push({
+    id: eventId++,
+    date: restDateStr,
+    title: '休息',
+    description: '营期休息日',
+    isCampEvent: true,
+    type: 'rest'
+  });
+};
+
+// 辅助方法：格式化日期为字符串
+const formatDateToString = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+// 方法：获取事件类型样式类
+const getEventTypeClass = (dateStr) => {
+  const dayEvents = events.value.filter(event => event.date === dateStr && event.isCampEvent);
+  if (dayEvents.length === 0) return '';
+  
+  const eventType = dayEvents[0].type;
+  switch (eventType) {
+    case 'data':
+      return 'event-data';
+    case 'course':
+      return 'event-course';
+    case 'rest':
+      return 'event-rest';
+    default:
+      return '';
+  }
+};
+
+// 方法：判断是否为休息日
+const isRestDay = (dateStr) => {
+  const dayEvents = events.value.filter(event => event.date === dateStr && event.isCampEvent && event.type === 'rest');
+  return dayEvents.length > 0;
+};
+
+// 方法：检查营期是否应该结束（休息日已过）
+const shouldShowFinishCamp = () => {
+  if (isCampFinished.value) return false;
+  
+  const today = formatDateToString(new Date());
+  const restDayEvents = events.value.filter(event => event.isCampEvent && event.type === 'rest');
+  
+  if (restDayEvents.length === 0) return false;
+  
+  // 检查是否有休息日已经过去
+  const todayDate = new Date(today);
+  for (const restEvent of restDayEvents) {
+    const restDate = new Date(restEvent.date);
+    if (todayDate > restDate) {
+      return true;
+    }
+  }
+  
+  return false;
+};
+
+// 方法：结束营期
+const finishCamp = async () => {
+  try {
+    isCampFinished.value = true;
+    await CenterCampPeriodAdmin({
+      is_camp_finish: true
+    });
+  } catch (error) {
+    console.error('结束营期失败:', error);
+    isCampFinished.value = false;
+  }
+};
+
+// 路由实例
+const router = useRouter();
+
+// 用户store实例
+const userStore = useUserStore();
+
+// 获取通用请求参数的函数
+const getRequestParams = () => {
+  const params = {}
+  // 只从路由参数获取
+  const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
+  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
+  // 如果路由有参数，使用路由参数
+  if (routeUserLevel) {
+    params.user_level = routeUserLevel.toString()
+  }
+  if (routeUserName) {
+    params.user_name = routeUserName
+  }
+
+  return params
+}
+
+// 判断是否为路由导航（有路由参数）
+const isRouteNavigation = computed(() => {
+  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
+  return !!routeUserName
+})
+// 获取和设置当前营期阶段 getCampPeriodAdmin
+async function CenterCampPeriodAdmin(data = {}) {
+  const params = getRequestParams()
+  const hasParams = params.user_name
+  
+  // 根据传入的参数决定传递哪些数据
+  let Finsh = {}
+  if (data.is_camp_finish !== undefined) {
+    // 结束营期时，只传递is_camp_finish参数
+    Finsh.is_camp_finish = data.is_camp_finish
+  } else if (data.receipt_data_start_time && data.receipt_data_time) {
+    // 设置营期时，传递开始时间和天数参数
+    Finsh.receipt_data_start_time = data.receipt_data_start_time
+    Finsh.receipt_data_time = data.receipt_data_time
+  } else {
+    // 兼容原有逻辑，使用全局变量
+    if (isCampFinished.value) {
+      Finsh.is_camp_finish = isCampFinished.value
+    } else if (campStartDate.value && campDays.value) {
+      // 只有在有营期设置数据时才传递参数
+      Finsh.receipt_data_start_time = campStartDate.value
+      Finsh.receipt_data_time = campDays.value.toString()
+    }
+    // 如果没有营期设置数据，Finsh 保持为空对象，用于获取现有数据
+  }
+  console.log('Finsh', Finsh)
+  console.log('params', params)
+  const res = await getCampPeriodAdmin(hasParams ? {...params, ...Finsh} : Finsh)
+  
+  // 如果获取到营期数据，映射到日历中
+  if (res && res.data && res.data.camp_period) {
+    mapCampPeriodToCalendar(res.data.camp_period);
+  }
+  
+  return res
+}
+
+// 方法：将营期时间安排映射到日历
+const mapCampPeriodToCalendar = (campPeriod) => {
+  // 清除之前的营期相关事件
+  events.value = events.value.filter(event => !event.isCampEvent);
+  
+  let eventId = events.value.length + 1;
+  
+  // 解析接数据时间
+  if (campPeriod.receipt_data_time) {
+    const dataPeriod = parseDateRange(campPeriod.receipt_data_time);
+    for (let date = new Date(dataPeriod.start); date <= dataPeriod.end; date.setDate(date.getDate() + 1)) {
+      const dateStr = formatDateToString(new Date(date));
+      events.value.push({
+        id: eventId++,
+        date: dateStr,
+        title: '接数据',
+        description: '营期数据接收阶段',
+        isCampEvent: true,
+        type: 'data'
+      });
+    }
+  }
+  
+  // 解析课程时间
+  const courses = [
+    { key: 'class_one', title: '课1' },
+    { key: 'class_two', title: '课2' },
+    { key: 'class_three', title: '课3' },
+    { key: 'class_four', title: '课4' }
+  ];
+  
+  let lastCourseEndDate = null;
+  
+  courses.forEach(course => {
+    if (campPeriod[course.key]) {
+      const coursePeriod = parseDateRange(campPeriod[course.key]);
+      const dateStr = formatDateToString(coursePeriod.start);
+      events.value.push({
+        id: eventId++,
+        date: dateStr,
+        title: course.title,
+        description: `营期${course.title}阶段`,
+        isCampEvent: true,
+        type: 'course'
+      });
+      
+      // 记录最后一个课程的结束日期
+      if (course.key === 'class_four') {
+        lastCourseEndDate = coursePeriod.end;
+      }
+    }
+  });
+  
+  // 在课4之后添加休息日
+  if (lastCourseEndDate) {
+    const restDate = new Date(lastCourseEndDate);
+    restDate.setDate(restDate.getDate() + 1);
+    const restDateStr = formatDateToString(restDate);
+    
+    events.value.push({
+      id: eventId++,
+      date: restDateStr,
+      title: '休息',
+      description: '营期休息日',
+      isCampEvent: true,
+      type: 'rest'
+    });
+  }
+};
+
+// 辅助方法：解析日期范围字符串
+const parseDateRange = (dateRangeStr) => {
+  // 解析格式: "2025-08-15 00:00:00 to 2025-08-16 23:59:59"
+  const [startStr, endStr] = dateRangeStr.split(' to ');
+  return {
+    start: new Date(startStr.split(' ')[0]),
+    end: new Date(endStr.split(' ')[0])
+  };
+};
+
+
+
+
+// 组件挂载时选中今天并获取营期数据
+onMounted(async () => {
+  const todayDate = calendarDates.value.find(date => date.isToday);
+  if (todayDate) {
+    selectedDate.value = todayDate;
+  }
+  
+  // 获取现有的营期数据
+  try {
+    await CenterCampPeriodAdmin();
+  } catch (error) {
+    console.error('获取营期数据失败:', error);
+  }
+});
+</script>
+
+<style scoped>
+.calendar-container {
+  max-width: 100%;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 24px;
+  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+  color: white;
+}
+
+.month-year {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.nav-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.05);
+}
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.weekday {
+  padding: 12px 8px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 14px;
+  color: #6c757d;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+  background: transparent;
+}
+
+.date-cell {
+  position: relative;
+  min-height: 44px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.date-cell:hover {
+  background: #f8f9fa;
+}
+
+.date-cell.other-month {
+  color: #adb5bd;
+  background: #f8f9fa;
+}
+
+.date-cell.today {
+  background: #e3f2fd;
+}
+
+.date-cell.today .date-number {
+  background: #2196f3;
+  color: white;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.date-cell.selected {
+  border-color: #667eea;
+  background: #f0f4ff;
+}
+
+.date-number {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.event-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ff6b6b;
+  position: absolute;
+  bottom: 8px;
+}
+
+.date-cell.has-event .event-dot {
+  background: #4ecdc4;
+}
+
+.date-tooltip {
+  position: fixed;
+  z-index: 1000;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  padding: 16px;
+  max-width: 280px;
+  min-width: 200px;
+  border: 1px solid #e9ecef;
+  pointer-events: none;
+}
+
+.date-tooltip h3 {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #495057;
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 8px;
+}
+
+.events-list {
+  space-y: 8px;
+}
+
+.event-item {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: white;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.event-title {
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 4px;
+}
+
+.event-desc {
+  font-size: 14px;
+  color: #6c757d;
+}
+
+.no-events {
+  color: #adb5bd;
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .calendar-header {
+    padding: 16px 20px;
+  }
+  
+  .month-year {
+    font-size: 16px;
+  }
+  
+  .nav-btn {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .date-cell {
+    min-height: 50px;
+  }
+  
+  .weekday {
+    padding: 10px 6px;
+    font-size: 12px;
+  }
+  
+  .date-tooltip {
+    max-width: 250px;
+    min-width: 180px;
+    padding: 12px;
+  }
+  
+  .date-tooltip h3 {
+    font-size: 13px;
+  }
+}
+
+/* 头部操作区域 */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 设置营期按钮 */
+.camp-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #28a745, #20c997);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.camp-btn:hover {
+  background: linear-gradient(135deg, #218838, #1ea085);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e9ecef;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #495057;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: #6c757d;
+  transition: all 0.2s ease;
+}
+
+.close-btn:hover {
+  background: #f8f9fa;
+  color: #495057;
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #495057;
+  font-size: 14px;
+}
+
+.form-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 24px;
+  border-top: 1px solid #e9ecef;
+  background: #f8f9fa;
+}
+
+.cancel-btn, .save-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel-btn {
+  background: #6c757d;
+  color: white;
+}
+
+.cancel-btn:hover {
+  background: #5a6268;
+}
+
+.save-btn {
+  background: linear-gradient(135deg, #4a90e2, #357abd);
+  color: white;
+}
+
+.save-btn:hover {
+  background: linear-gradient(135deg, #357abd, #2968a3);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
+}
+
+.finish-camp {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  color: white;
+}
+
+.finish-camp:hover {
+  background: linear-gradient(135deg, #c0392b, #a93226);
+  transform: translateY(-1px);
+}
+
+/* 营期事件类型样式 */
+.event-dot.event-data {
+  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
+  box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3);
+}
+
+.event-dot.event-course {
+  background: linear-gradient(135deg, #fd7e14, #e55a00);
+  box-shadow: 0 2px 4px rgba(253, 126, 20, 0.3);
+}
+
+.event-dot.event-rest {
+  background: linear-gradient(135deg, #28a745, #1e7e34);
+  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
+}
+
+/* 休息日文字样式 */
+.rest-text {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  font-size: 10px;
+  font-weight: bold;
+  color: #28a745;
+  background: rgba(40, 167, 69, 0.1);
+  border-radius: 2px;
+  padding: 1px 3px;
+  line-height: 1;
+}
+</style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/secondTop/secondTop.vue b/my-vue-app/src/views/secondTop/secondTop.vue
index e930ce9..1fb7c8f 100644
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -24,23 +24,6 @@
               <p>统筹多组运营，优化资源配置，驱动业绩增长，实现团队协同发展。</p>
             </div>
 
-            <!-- 营期阶段信息与调控 -->
-            <div class="stage-info" style="margin-left: 100px;">
-              <span class="stage-label">营期所属阶段：</span>
-              <span class="stage-value">{{ currentStage }}</span>
-
-              <!-- 仅在"接数据"阶段显示调控UI -->
-              <div v-if="isDataReceivingStage" class="stage-control">
-                <span class="control-label">调整"接数据"天数:</span>
-                <input type="number" v-model.number="dataReceivingStage.days" min="1" class="days-input" />
-                <button @click="saveCampSettings" class="save-button">保存</button>
-              </div>
-              
-              <!-- 非接数据阶段显示结束营期按钮 -->
-              <div v-if="!isDataReceivingStage" class="stage-control">
-                <button @click="finishCamp" class="finish-camp-button">结束营期</button>
-              </div>
-            </div>
           </template>
           
           <div v-if="!isRouteNavigation">