From 9cd65a61d644a927fa96a4dafa9a2f9d710498a0 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 5 Nov 2025 10:16:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=86=85=E5=AE=B9=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ContentDashboard.vue | 356 ++++++++++++++++++++++++++++++++
 components/MessageContent.vue   | 180 ++++++++++++++++
 components/TodoList.vue         | 165 +++++++++++++++
 pages/index/index.vue           |  84 +++++---
 4 files changed, 754 insertions(+), 31 deletions(-)
 create mode 100644 components/ContentDashboard.vue
 create mode 100644 components/MessageContent.vue
 create mode 100644 components/TodoList.vue

diff --git a/components/ContentDashboard.vue b/components/ContentDashboard.vue
new file mode 100644
index 0000000..2c46989
--- /dev/null
+++ b/components/ContentDashboard.vue
@@ -0,0 +1,356 @@
+<template>
+  <scroll-view class="dashboard-scroll" scroll-y>
+    <!-- 任务概览 -->
+    <view class="task-overview">
+      <view class="task-card" v-for="item in taskStats" :key="item.label">
+        <text class="task-count">{{ item.count }}</text>
+        <text class="task-label">{{ item.label }}</text>
+      </view>
+    </view>
+
+    <!-- 逾期任务详情 -->
+    <view class="overdue-section" v-if="overdueTasks.length > 0">
+      <view class="overdue-card" v-for="task in overdueTasks" :key="task.id">
+        <view class="overdue-badge">逾期</view>
+        <view class="overdue-content">
+          <text class="overdue-date">{{ task.date }}</text>
+          <text class="overdue-project">所属项目: {{ task.project }}</text>
+          <text class="overdue-desc">{{ task.description }}</text>
+          <text class="overdue-owner">负责人: {{ task.owner }}</text>
+          <text class="overdue-time">发布时间: {{ task.releaseTime }}</text>
+        </view>
+        <view class="overdue-action">
+          <button class="handle-btn" @click="handleOverdueTask(task)">立即处理</button>
+        </view>
+      </view>
+      <view class="carousel-dots">
+        <view class="dot" :class="{ active: true }"></view>
+        <view class="dot"></view>
+        <view class="dot"></view>
+      </view>
+    </view>
+
+    <!-- 公告事项 -->
+    <view class="announcement-section">
+      <view class="section-header">
+        <text class="section-icon">📢</text>
+        <text class="section-title">公告事项</text>
+      </view>
+      <view class="announcement-item" v-for="announcement in announcements" :key="announcement.id" @click="viewAnnouncement(announcement)">
+        <view class="announcement-content">
+          <text class="announcement-title">{{ announcement.title }}</text>
+          <text class="announcement-desc">{{ announcement.description }}</text>
+          <text class="announcement-time">{{ announcement.time }}</text>
+        </view>
+        <text class="arrow">›</text>
+      </view>
+    </view>
+
+    <!-- 项目状态 -->
+    <view class="project-status-section">
+      <view class="section-header">
+        <text class="section-icon">💎</text>
+        <text class="section-title">项目状态</text>
+      </view>
+      <view class="status-grid">
+        <view class="status-card" v-for="status in projectStatus" :key="status.label">
+          <text class="status-count">{{ status.count }}</text>
+          <text class="status-label">{{ status.label }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 客户状态 -->
+    <view class="customer-status-section">
+      <view class="section-header">
+        <text class="section-icon">👤</text>
+        <text class="section-title">客户状态</text>
+      </view>
+      <view class="status-grid">
+        <view class="status-card" v-for="status in customerStatus" :key="status.label">
+          <text class="status-count">{{ status.count }}</text>
+          <text class="status-label">{{ status.label }}</text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 任务统计
+const taskStats = ref([
+  { label: '完成任务', count: 78 },
+  { label: '待完成任务', count: 28 },
+  { label: '即将预期', count: 8 },
+  { label: '逾期任务', count: 1 }
+]);
+
+// 逾期任务
+const overdueTasks = ref([
+  {
+    id: 1,
+    date: '2025-10-15',
+    project: '创特项目管理系统',
+    description: '项目内容项目内容项目内容项目内容项目内容项目...',
+    owner: '张珊珊、李志',
+    releaseTime: '2025-03-21'
+  }
+]);
+
+// 公告事项
+const announcements = ref([
+  {
+    id: 1,
+    title: '·国庆放假通知',
+    description: '国庆放假安排1号至6号,前后不调休...',
+    time: '2025-09-26 16:54:46'
+  }
+]);
+
+// 项目状态
+const projectStatus = ref([
+  { label: '运行中', count: 1 },
+  { label: '运维中', count: 1 },
+  { label: '即将到期', count: 1 },
+  { label: '开发超期', count: 1 }
+]);
+
+// 客户状态
+const customerStatus = ref([
+  { label: '今日新增', count: 1 },
+  { label: '今日已跟进', count: 1 },
+  { label: '今日待跟进', count: 1 },
+  { label: '即将跟进', count: 1 }
+]);
+
+// 处理逾期任务
+const handleOverdueTask = (task) => {
+  console.log('处理逾期任务:', task);
+  uni.showToast({
+    title: '跳转到任务处理',
+    icon: 'none'
+  });
+};
+
+// 查看公告
+const viewAnnouncement = (announcement) => {
+  console.log('查看公告:', announcement);
+  uni.showToast({
+    title: '查看公告详情',
+    icon: 'none'
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard-scroll {
+  height: calc(100vh - var(--status-bar-height, 0) - 100px);
+  padding: 16px;
+  padding-bottom: 100px;
+}
+
+.task-overview {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  gap: 12px;
+}
+
+.task-card {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.task-count {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.task-label {
+  font-size: 12px;
+  color: #666;
+}
+
+.overdue-section {
+  margin-bottom: 20px;
+}
+
+.overdue-card {
+  background: #ffe6e6;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+}
+
+.overdue-badge {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #ff4444;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px 0 0 0;
+}
+
+.overdue-content {
+  flex: 1;
+  margin-left: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.overdue-date {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.overdue-project,
+.overdue-desc,
+.overdue-owner,
+.overdue-time {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.overdue-action {
+  margin-left: 12px;
+}
+
+.handle-btn {
+  background: #ff4444;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 12px;
+}
+
+.carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ddd;
+}
+
+.dot.active {
+  background: #2885ff;
+}
+
+.announcement-section,
+.project-status-section,
+.customer-status-section {
+  margin-bottom: 24px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  gap: 8px;
+}
+
+.section-icon {
+  font-size: 18px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.announcement-item {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.announcement-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.announcement-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.announcement-desc {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.announcement-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.arrow {
+  font-size: 20px;
+  color: #999;
+  margin-left: 12px;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.status-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.status-count {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.status-label {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+}
+</style>
+
diff --git a/components/MessageContent.vue b/components/MessageContent.vue
new file mode 100644
index 0000000..6ce1526
--- /dev/null
+++ b/components/MessageContent.vue
@@ -0,0 +1,180 @@
+<template>
+  <scroll-view class="message-scroll" scroll-y>
+    <view class="message-container">
+      <view class="message-item" v-for="message in messages" :key="message.id" @click="handleMessageClick(message)">
+        <view class="message-avatar">
+          <image :src="message.avatar" mode="aspectFill" v-if="message.avatar" />
+          <text class="avatar-text" v-else>{{ message.name.charAt(0) }}</text>
+        </view>
+        <view class="message-content">
+          <view class="message-header">
+            <text class="message-name">{{ message.name }}</text>
+            <text class="message-time">{{ message.time }}</text>
+          </view>
+          <text class="message-text">{{ message.content }}</text>
+          <view class="message-tags" v-if="message.tags && message.tags.length > 0">
+            <text class="tag" v-for="tag in message.tags" :key="tag">{{ tag }}</text>
+          </view>
+        </view>
+        <view class="message-badge" v-if="!message.read">
+          <text class="badge-dot"></text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const messages = ref([
+  {
+    id: 1,
+    name: '系统通知',
+    content: '您有一条新的任务待处理',
+    time: '10分钟前',
+    read: false,
+    tags: ['任务', '待处理']
+  },
+  {
+    id: 2,
+    name: '张经理',
+    content: '请查看最新的项目进度报告',
+    time: '1小时前',
+    read: false,
+    tags: ['项目']
+  },
+  {
+    id: 3,
+    name: '李助理',
+    content: '明天的会议时间已更新，请查看',
+    time: '2小时前',
+    read: true,
+    tags: ['会议']
+  },
+  {
+    id: 4,
+    name: '系统通知',
+    content: '您的日程提醒：下午3点有重要会议',
+    time: '3小时前',
+    read: true,
+    tags: ['日程']
+  }
+]);
+
+const handleMessageClick = (message) => {
+  console.log('点击消息:', message);
+  message.read = true;
+  uni.showToast({
+    title: '查看消息详情',
+    icon: 'none'
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.message-scroll {
+  height: calc(100vh - var(--status-bar-height, 0) - 100px);
+  padding: 16px;
+  padding-bottom: 100px;
+}
+
+.message-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message-item {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  position: relative;
+}
+
+.message-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.message-avatar image {
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-text {
+  font-size: 18px;
+  color: #666;
+  font-weight: 500;
+}
+
+.message-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.message-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.message-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.message-text {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.message-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tag {
+  font-size: 12px;
+  color: #2885ff;
+  background: #e8f4ff;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.message-badge {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
+.badge-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ff4444;
+  display: block;
+}
+</style>
+
diff --git a/components/TodoList.vue b/components/TodoList.vue
new file mode 100644
index 0000000..47e9007
--- /dev/null
+++ b/components/TodoList.vue
@@ -0,0 +1,165 @@
+<template>
+  <scroll-view class="todo-scroll" scroll-y>
+    <view class="todo-container">
+      <view class="todo-item" v-for="todo in todoList" :key="todo.id" @click="handleTodoClick(todo)">
+        <view class="todo-checkbox" @click.stop="toggleTodo(todo)">
+          <text class="check-icon" v-if="todo.completed">✓</text>
+        </view>
+        <view class="todo-content" :class="{ completed: todo.completed }">
+          <text class="todo-title">{{ todo.title }}</text>
+          <text class="todo-desc" v-if="todo.description">{{ todo.description }}</text>
+          <text class="todo-time">{{ todo.time }}</text>
+        </view>
+        <view class="todo-priority" :class="`priority-${todo.priority}`">
+          {{ priorityText[todo.priority] }}
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const priorityText = {
+  high: '高',
+  medium: '中',
+  low: '低'
+};
+
+const todoList = ref([
+  {
+    id: 1,
+    title: '完成项目需求文档',
+    description: '需要整理所有功能点并编写详细文档',
+    time: '2025-10-15 14:00',
+    completed: false,
+    priority: 'high'
+  },
+  {
+    id: 2,
+    title: '参加团队会议',
+    description: '讨论本周工作进度和下周计划',
+    time: '2025-10-16 10:00',
+    completed: false,
+    priority: 'medium'
+  },
+  {
+    id: 3,
+    title: '代码审查',
+    description: '审查同事提交的代码',
+    time: '2025-10-17 16:00',
+    completed: true,
+    priority: 'low'
+  }
+]);
+
+const toggleTodo = (todo) => {
+  todo.completed = !todo.completed;
+};
+
+const handleTodoClick = (todo) => {
+  console.log('点击待办:', todo);
+  uni.showToast({
+    title: '查看待办详情',
+    icon: 'none'
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.todo-scroll {
+  height: calc(100vh - var(--status-bar-height, 0) - 100px);
+  padding: 16px;
+  padding-bottom: 100px;
+}
+
+.todo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.todo-item {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.todo-checkbox {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.todo-checkbox .check-icon {
+  color: #2885ff;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.todo-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.todo-content.completed {
+  opacity: 0.6;
+}
+
+.todo-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  text-decoration: none;
+}
+
+.todo-content.completed .todo-title {
+  text-decoration: line-through;
+}
+
+.todo-desc {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.todo-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.todo-priority {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.priority-high {
+  background: #ffebee;
+  color: #f44336;
+}
+
+.priority-medium {
+  background: #fff3e0;
+  color: #ff9800;
+}
+
+.priority-low {
+  background: #e8f5e9;
+  color: #4caf50;
+}
+</style>
+
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7305d7f..03aaef4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,45 +1,58 @@
 <template>
   <!-- 顶部Tabs栏 -->
   <view class="fixed-tabs">
-    <uv-tabs :list="topTabs" @click="clickTab"></uv-tabs>
+    <uv-tabs :list="topTabs" :current="topTabValue" @click="clickTab"></uv-tabs>
   </view>
+  
   <!-- 内容区域 -->
   <view class="content-wrapper">
-    <!-- 月份日历组件 -->
-    <MonthCalendar
-      :selected-date="selectedDate"
-      :events="allEvents"
-      @change="handleDateChange"
-    />
+    <!-- 日程编辑 -->
+    <view v-if="topTabValue === 0" class="schedule-content">
+      <!-- 月份日历组件 -->
+      <MonthCalendar
+        :selected-date="selectedDate"
+        :events="allEvents"
+        @change="handleDateChange"
+      />
 
-    <view
-      class="swipe-container"
-      @touchstart="handleTouchStart"
-      @touchmove="handleTouchMove"
-      @touchend="handleTouchEnd"
-    >
       <view
-        class="swipe-wrapper"
-        :style="{ transform: `translateX(${translateX}px)`, transition: isAnimating ? 'transform 0.3s ease-out' : 'none' }"
+        class="swipe-container"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
       >
-        <!-- 昨天的表格 -->
-        <view class="table-item">
-          <TimeTable :hours="hours" :events="prevDayEvents" />
-        </view>
-        <!-- 今天的表格 -->
-        <view class="table-item">
-          <TimeTable :hours="hours" :events="eventsInDay" />
-        </view>
-        <!-- 明天的表格 -->
-        <view class="table-item">
-          <TimeTable :hours="hours" :events="nextDayEvents" />
+        <view
+          class="swipe-wrapper"
+          :style="{ transform: `translateX(${translateX}px)`, transition: isAnimating ? 'transform 0.3s ease-out' : 'none' }"
+        >
+          <!-- 昨天的表格 -->
+          <view class="table-item">
+            <TimeTable :hours="hours" :events="prevDayEvents" />
+          </view>
+          <!-- 今天的表格 -->
+          <view class="table-item">
+            <TimeTable :hours="hours" :events="eventsInDay" />
+          </view>
+          <!-- 明天的表格 -->
+          <view class="table-item">
+            <TimeTable :hours="hours" :events="nextDayEvents" />
+          </view>
         </view>
       </view>
     </view>
+
+    <!-- 内容看板 -->
+    <ContentDashboard v-if="topTabValue === 1" />
+
+    <!-- 待办事项 -->
+    <TodoList v-if="topTabValue === 2" />
+
+    <!-- 消息内容 -->
+    <MessageContent v-if="topTabValue === 3" />
   </view>
 
-  <!-- 悬浮新建按钮 -->
-  <FabPlus @click="handleAddClick" />
+  <!-- 悬浮新建按钮（只在日程编辑页显示） -->
+  <FabPlus v-if="topTabValue === 0" @click="handleAddClick" />
 
   <!-- 新建日程弹窗（保留以备后用） -->
   <AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />
@@ -66,6 +79,9 @@ import TimeTable from '@/components/TimeTable.vue';
 import FabPlus from '@/components/FabPlus.vue';
 import AddEventModal from '@/components/AddEventModal.vue';
 import MonthCalendar from '@/components/MonthCalendar.vue';
+import ContentDashboard from '@/components/ContentDashboard.vue';
+import TodoList from '@/components/TodoList.vue';
+import MessageContent from '@/components/MessageContent.vue';
 
 // 顶部tabs选项
 const topTabs = [
@@ -74,7 +90,8 @@ const topTabs = [
   { name: '待办事项', value: 2 },
   { name: '消息内容', value: 3 }
 ];
-const topTabValue = ref(0);
+// 默认显示内容看板
+const topTabValue = ref(1);
 
 function clickTab(item) {
   topTabValue.value = item.value;
@@ -363,7 +380,7 @@ onShow(() => {
 
 .fixed-tabs {
   position: fixed;
-  top: 0;
+  top: var(--status-bar-height, 0);
   left: 0;
   right: 0;
   width: 100%;
@@ -376,7 +393,12 @@ onShow(() => {
   padding-top: 8rpx;
   min-height: 100vh;
   overflow: hidden;
-  margin-top: var(--status-bar-height, 0);
+  margin-top: calc(var(--status-bar-height, 0) + 44px);
+}
+
+.schedule-content {
+  width: 100%;
+  height: 100%;
 }
 
 :deep(.bottom-tabbar) { z-index: 1000 !important; }