From f01fb13af52b6e742a19732cd793565b470e86c8 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Mon, 15 Sep 2025 19:40:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/components/common-select/index.vue        |   4 +-
 .../components/TaskDetail.vue                 | 105 --
 .../components/colorTip.vue                   |   5 +-
 .../components/date-selector.vue              | 259 +++++
 .../components/filter-popup.vue               | 218 ++--
 .../assignment-management/index.vue           | 999 ++++++------------
 7 files changed, 753 insertions(+), 838 deletions(-)
 delete mode 100644 src/views/property-marketing/assignment-management/components/TaskDetail.vue
 create mode 100644 src/views/property-marketing/assignment-management/components/date-selector.vue

diff --git a/package.json b/package.json
index cadf53e..651b256 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@arco-design/web-vue": "^2.42.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@types/nprogress": "^0.2.0",
     "@vueuse/core": "^9.12.0",
diff --git a/src/components/common-select/index.vue b/src/components/common-select/index.vue
index 3dcbc99..7ad2445 100644
--- a/src/components/common-select/index.vue
+++ b/src/components/common-select/index.vue
@@ -11,7 +11,7 @@
     :allowClear="allClear"
     :showSearch="allowSearch"
     showArrow
-    :maxTagCount="maxTagCount"
+    :maxTagCount="maxTagCount !== undefined ? maxTagCount : (multiple ? 3 : undefined)"
     @change="handleChange"
     :filterOption="allowSearch ? filterOption : undefined"
   >
@@ -59,7 +59,7 @@ const props = defineProps({
   },
   maxTagCount: {
     type: Number,
-    default: 3,
+    default: undefined,
   },
   allClear: {
     type: Boolean,
diff --git a/src/views/property-marketing/assignment-management/components/TaskDetail.vue b/src/views/property-marketing/assignment-management/components/TaskDetail.vue
deleted file mode 100644
index 0d3499c..0000000
--- a/src/views/property-marketing/assignment-management/components/TaskDetail.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div class="flex flex-col items-start cell-detail">
-    <div class="flex items-center" @click="gotoDetail">
-      <img
-        :src="getPlatformIcon(record.platform)"
-        style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
-      />
-      {{ record.name || '-' }}
-    </div>
-    <div class="size-12px color-#939499 mt-2px" @click="gotoDetail">
-      {{ timestampToTime1(task.execution_time) }}
-    </div>
-    <div class="size-14px color-#211F24 mt-12px color-#6D4CFE" @click="gotoDetail">{{ task.name || '未命名' }}</div>
-    <div class="flex items-center mt-12px">
-      <div class="custom-time-picker">
-        <a-time-picker
-          format="HH:mm"
-          size="small"
-          :visible="isPanelVisible"
-          @visible-change="handleVisibleChange"
-          @change="handleTimeChange"
-          placeholder="修改发布时间"
-          class="hide-input-container opt-btn mr-12px"
-        />
-      </div>
-      <div class="opt-btn" @click.stop="handleDelete" style="margin-right: 0px">删除</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, defineEmits } from 'vue';
-import { ref, computed } from 'vue';
-
-const props = defineProps({
-  task: {
-    type: Object,
-    required: true,
-  },
-  record: {
-    type: Object,
-    required: true,
-  },
-  getPlatformIcon: {
-    type: Function,
-    required: true,
-  },
-});
-const isPanelVisible = ref(false);
-const toggleTimePanel = () => {
-  isPanelVisible.value = !isPanelVisible.value;
-};
-const handleVisibleChange = (visible: boolean) => {
-  isPanelVisible.value = visible;
-};
-const handleTimeChange = (time: string) => {
-  if (time) {
-    emit('edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
-  }
-};
-
-const timestampToTime1 = (): string => {
-  const timestamp = Date.now();
-  const date = new Date(timestamp);
-
-  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 emit = defineEmits(['edit-time', 'delete', 'gotoDetail']);
-
-const handleDelete = () => {
-  emit('delete', props.task);
-};
-
-const gotoDetail = () => {
-  console.log('跳转详情');
-  emit('gotoDetail', props.task);
-};
-</script>
-
-<style scoped>
-.cell-detail {
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  box-shadow: #00000010 0px 2px 8px;
-  padding: 8px 16px;
-  margin-top: 8px;
-}
-
-.opt-btn {
-  font-size: 12px;
-  width: 138px;
-  height: 28px;
-  background-color: #f2f3f5;
-  text-align: center;
-  line-height: 28px;
-  border-radius: 4px;
-  margin-right: 12px;
-}
-</style>
diff --git a/src/views/property-marketing/assignment-management/components/colorTip.vue b/src/views/property-marketing/assignment-management/components/colorTip.vue
index 2dcd28b..9bb4524 100644
--- a/src/views/property-marketing/assignment-management/components/colorTip.vue
+++ b/src/views/property-marketing/assignment-management/components/colorTip.vue
@@ -18,17 +18,18 @@
         <div>发布失败</div>
       </div>
     </template>
-    <a-button size="small" class="mr-3 color-scheme-btn">
+    <Button class="w-112px mr-8px" size="middle">
       <template #icon>
         <InfoCircleOutlined class="color-#55585F" />
       </template>
       <template #default>颜色示意</template>
-    </a-button>
+    </Button>
   </a-popover>
 </template>
 
 <script setup>
 import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
 </script>
 
 <style scoped>
diff --git a/src/views/property-marketing/assignment-management/components/date-selector.vue b/src/views/property-marketing/assignment-management/components/date-selector.vue
new file mode 100644
index 0000000..7cb81f8
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/date-selector.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="flex items-center">
+    <!-- 日选择器 -->
+    <a-date-picker
+      class="w-188px size-14px"
+      v-if="choseType === '日'"
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月DD日周dd"
+    />
+    <!-- 周选择器 -->
+    <a-week-picker
+      class="w-188px size-14px"
+      v-else-if="choseType === '周'"
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月DD日"
+    />
+    <!-- 月选择器 -->
+    <a-month-picker
+      class="w-188px size-14px"
+      v-else
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月"
+    />
+
+    <!-- 日期导航按钮 -->
+    <div class="flex items-center ml-12px">
+      <a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
+        <template #icon><icon-left /></template>
+      </a-button>
+      <a-button
+        @click="navigateToToday"
+        type="text"
+        style="background-color: #f7f8fa !important; color: #211f24 !important; height: 28px"
+        >今天</a-button
+      >
+      <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
+        <template #icon><icon-right /></template>
+      </a-button>
+    </div>
+
+    <!-- 维度切换下拉框 -->
+    <div class="flex items-center">
+      <a-dropdown position="bottom" @select="handleTypeChange" class="w-80px" :popupVisible="dropdownVisible" @popupVisibleChange="handleDropdownVisibleChange">
+        <a-button type="text" class="prv-today"> {{ choseType }}<icon-down class="ml-4px" /> </a-button>
+        <template #content>
+          <a-doption value="日" class="doption">日</a-doption>
+          <a-doption value="周" class="doption">周</a-doption>
+          <a-doption value="月" class="doption">月</a-doption>
+        </template>
+      </a-dropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits, withDefaults, computed } from 'vue';
+import DateUtils from '@/utils/DateUtils';
+
+// 1. 定义Props：接收父组件初始日期配置
+interface Props {
+  modelValue?: {
+    choseType: '日' | '周' | '月';
+    dayModel?: Date;
+    weekModel?: Date;
+    monthModel?: Date;
+  };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
+});
+
+// 2. 定义Emits：向父组件传递事件
+const emit = defineEmits([
+  'update:modelValue', // v-model双向绑定
+  'date-change', // 日期/维度切换统一事件（父组件只需要监听这个）
+]);
+
+// 3. 内部状态管理：根据当前维度同步日期
+const choseType = ref<Props['modelValue']['choseType']>(props.modelValue.choseType);
+const dayModel = ref(props.modelValue.dayModel || new Date());
+const weekModel = ref(props.modelValue.weekModel || new Date());
+const monthModel = ref(props.modelValue.monthModel || new Date());
+
+// 下拉菜单显示状态
+const dropdownVisible = ref(false);
+
+// 添加一个标志位，用于避免初始化时触发事件
+let isInitializing = true;
+
+// 计算属性：根据当前维度返回对应日期（简化选择器v-model绑定）
+const currentDate = computed({
+  get() {
+    switch (choseType.value) {
+      case '日':
+        return dayModel.value;
+      case '周':
+        return weekModel.value;
+      case '月':
+        return monthModel.value;
+    }
+  },
+  set(val: Date) {
+    switch (choseType.value) {
+      case '日':
+        dayModel.value = val;
+        break;
+      case '周':
+        weekModel.value = val;
+        break;
+      case '月':
+        monthModel.value = val;
+        break;
+    }
+  },
+});
+
+// 4. 核心工具函数：获取当前维度的日期范围（给父组件用）
+const getDateRange = (): { start: string; end: string } => {
+  if (choseType.value === '周') {
+    const range = DateUtils.getWeekRangeByDate(weekModel.value);
+    return { start: range.startFormatted, end: range.endFormatted };
+  }
+  if (choseType.value === '月') {
+    const date = monthModel.value;
+    const range = DateUtils.getMonthRangeByYearMonth(date.getFullYear(), date.getMonth() + 1);
+    return { start: range.startFormatted, end: range.endFormatted };
+  }
+  // 日维度
+  const dateStr = DateUtils.formatDate(dayModel.value);
+  return { start: dateStr, end: dateStr };
+};
+
+// 5. 维度切换处理（日/周/月）
+const handleTypeChange = (val: '日' | '周' | '月') => {
+  choseType.value = val;
+  // 切换维度时默认选中当天对应的维度日期
+  const today = new Date();
+  currentDate.value = today;
+  emitChange();
+  
+  // 选择后隐藏下拉菜单
+  setTimeout(() => {
+    dropdownVisible.value = false;
+  }, 100);
+};
+
+// 6. 日期选择器变更处理
+const handleDateChange = (val: Date | string | undefined) => {
+  if (!val) return;
+  const selectedDate = val instanceof Date ? val : new Date(val);
+  currentDate.value = selectedDate;
+  emitChange();
+};
+
+// 7. 日期导航（上一个/下一个维度）
+const navigate = (step: 1 | -1) => {
+  const current = currentDate.value;
+  const newDate = new Date(current);
+
+  switch (choseType.value) {
+    case '日':
+      newDate.setDate(current.getDate() + step);
+      break;
+    case '周':
+      newDate.setDate(current.getDate() + step * 7);
+      break;
+    case '月':
+      newDate.setMonth(current.getMonth() + step);
+      break;
+  }
+
+  currentDate.value = newDate;
+  emitChange();
+};
+
+// 8. 跳转今天
+const navigateToToday = () => {
+  currentDate.value = new Date();
+  emitChange();
+};
+
+// 9. 下拉菜单显示状态变化处理
+const handleDropdownVisibleChange = (visible: boolean) => {
+  dropdownVisible.value = visible;
+};
+
+// 10. 统一事件发射：向父组件传递完整信息
+const emitChange = () => {
+  const result = {
+    choseType: choseType.value,
+    dayModel: dayModel.value,
+    weekModel: weekModel.value,
+    monthModel: monthModel.value,
+    dateRange: getDateRange(), // 父组件直接可用的日期范围
+  };
+  emit('update:modelValue', result);
+  // 只有在初始化完成后才触发 date-change 事件
+  if (!isInitializing) {
+    console.log('emitChange', result);
+    emit('date-change', result); // 父组件监听此事件做后续处理
+  }
+};
+
+// 11. 监听父组件Props变化（同步外部修改）
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      choseType.value = newVal.choseType;
+      dayModel.value = newVal.dayModel || new Date();
+      weekModel.value = newVal.weekModel || new Date();
+      monthModel.value = newVal.monthModel || new Date();
+      // 只有在初始化完成后才触发 emitChange
+      if (!isInitializing) {
+        emitChange();
+      }
+    }
+  },
+  { deep: true },
+);
+
+// 初始化时触发一次事件
+emitChange();
+
+// 初始化完成，设置标志位
+setTimeout(() => {
+  isInitializing = false;
+}, 0);
+</script>
+
+<style scoped>
+.arco-dropdown-open .arco-icon-down {
+  transform: rotate(180deg);
+  transition: transform 0.2s ease;
+}
+.prv-btn {
+  background-color: #f7f8fa !important; /* 使用正确的6位十六进制颜色值 */
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  color: #211f24 !important;
+}
+.doption {
+  width: 80px !important;
+}
+.prv-today {
+  color: #211f24 !important;
+  width: 80px !important;
+  background-color: #f7f8fa !important;
+  height: 28px;
+  margin-left: 4px;
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/property-marketing/assignment-management/components/filter-popup.vue b/src/views/property-marketing/assignment-management/components/filter-popup.vue
index fab82f6..60164f8 100644
--- a/src/views/property-marketing/assignment-management/components/filter-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/filter-popup.vue
@@ -1,69 +1,84 @@
-<!-- // 新增内容： -->
 <template>
-  <a-popover trigger="click" :overlayStyle="{ width: '360px' }" overlayClassName="filter-popup-popover">
-    <template #content>
-      <div class="filter-popup-content">
-        <!-- 运营人员 -->
-        <div class="flex items-center mb-6">
-          <div class="w-70px">运营人员</div>
-          <a-space class="w-240px">
-            <CommonSelect
-              placeholder="请选择运营人员"
-              :options="operators || []"
-              v-model="localQuery.operator"
-              @change="(val) => handleChange('operator_id', val)"
-              class="!w-240px"
-              :allowSearch="true"
-              popup-container=".filter-popup-content"
-            />
-          </a-space>
+  <div class="filter-popup-wrapper">
+    <!-- 关键修复：添加手动控制弹窗显示/隐藏的逻辑 -->
+    <a-popover
+      trigger="click"
+      :visible="visible"
+      :overlayStyle="{ width: '360px' }"
+      overlayClassName="filter-popup-popover"
+      @clickoutside="handleClickOutside"
+    >
+      <template #content>
+        <div class="filter-popup-content">
+          <!-- 运营人员 -->
+          <div class="flex items-start mb-3 select-container">
+            <div class="w-70px pt-6px">运营人员</div>
+            <a-space class="flex-1">
+              <CommonSelect
+                placeholder="请选择运营人员"
+                :options="operators || []"
+                v-model="localQuery.operator"
+                @change="(val) => handleChange('operator', val)"
+                class="!w-240px select-with-tags"
+                :allowSearch="true"
+                :maxTagCount="999"
+                popup-container=".filter-popup-content"
+              />
+            </a-space>
+          </div>
+          <!-- 发布平台 -->
+          <div class="flex items-start mb-3 select-container">
+            <div class="w-70px pt-6px">发布平台</div>
+            <a-space class="flex-1">
+              <CommonSelect
+                :options="platformOptions || []"
+                v-model="localQuery.platform"
+                @change="(val) => handleChange('platform', val)"
+                class="!w-240px select-with-tags"
+                placeholder="请选择发布平台"
+                :allowSearch="true"
+                :maxTagCount="999"
+                popup-container=".filter-popup-content"
+              />
+            </a-space>
+          </div>
+          <!-- 账号名称 -->
+          <div class="flex items-start mb-3 select-container">
+            <div class="w-70px pt-6px">账号名称</div>
+            <a-space class="flex-1">
+              <CommonSelect
+                v-model="localQuery.accounts"
+                :options="accountList || []"
+                :multiple="true"
+                @change="(val) => handleChange('accounts', val)"
+                class="!w-240px select-with-tags"
+                placeholder="请选择账号名称"
+                :allowSearch="true"
+                :maxTagCount="999"
+                popup-container=".filter-popup-content"
+              />
+            </a-space>
+          </div>
         </div>
-        <!-- 发布平台 -->
-        <div class="flex items-center mb-6">
-          <div class="w-70px">发布平台</div>
-          <a-space class="w-240px">
-            <CommonSelect
-              :options="platformOptions || []"
-              v-model="localQuery.platform"
-              @change="(val) => handleChange('platform', val)"
-              class="!w-240px"
-              placeholder="请选择发布平台"
-              :allowSearch="true"
-              popup-container=".filter-popup-content"
-            />
-          </a-space>
-        </div>
-        <!-- 账号名称 -->
-        <div class="flex items-center">
-          <div class="w-70px">账号名称</div>
-          <a-space class="w-240px">
-            <CommonSelect
-              v-model="localQuery.accounts"
-              :options="accountList || []"
-              :multiple="true"
-              @change="(val) => handleChange('account_id', val)"
-              class="!w-240px"
-              placeholder="请选择账号名称"
-              :allowSearch="true"
-              popup-container=".filter-popup-content"
-            />
-          </a-space>
-        </div>
-      </div>
-    </template>
-    <a-button size="small">
-      <template #icon>
-        <FilterOutlined class="color-#55585F" />
       </template>
-      <template #default>筛选</template>
-    </a-button>
-  </a-popover>
+
+      <!-- 触发按钮：添加点击事件控制弹窗显示 -->
+      <Button class="w-112px mr-8px" size="middle" @click="visible = !visible">
+        <template #icon>
+          <FilterOutlined class="color-#55585F" />
+        </template>
+        <template #default>筛选</template>
+      </Button>
+    </a-popover>
+  </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, defineProps, defineEmits } from 'vue';
 import { FilterOutlined } from '@ant-design/icons-vue';
+import { Button } from 'ant-design-vue';
 
+// 定义props和emit
 const props = defineProps({
   operators: Array,
   platformOptions: Array,
@@ -71,39 +86,52 @@ const props = defineProps({
   query: Object,
 });
 
-onMounted(() => {});
 const emit = defineEmits(['filter-change']);
 
-// 初始化本地查询对象，只设置非空值
-const localQuery = ref({});
+// 弹窗显示状态（关键：控制弹窗显示的核心变量）
+const visible = ref(false);
 
-// 监听外部 query 变化并同步到本地状态
+// 本地筛选状态（保持上次选择）
+const localQuery = ref({
+  operator: props.query?.operator_ids,
+  platform: props.query?.platforms,
+  accounts: props.query?.ids || [],
+});
+
+// 监听父组件query变化，同步到本地
 watch(
   () => props.query,
   (newQuery) => {
     if (newQuery) {
-      // 只有当值不为空时才设置到localQuery中
-      const filteredQuery = {};
-      if (newQuery.operator) {
-        filteredQuery.operator = newQuery.operator;
-      }
-      if (newQuery.platform) {
-        filteredQuery.platform = newQuery.platform;
-      }
-      if (newQuery.accounts && newQuery.accounts.length > 0) {
-        filteredQuery.accounts = newQuery.accounts;
-      }
-      localQuery.value = { ...filteredQuery };
+      localQuery.value = {
+        operator: newQuery.operator_ids,
+        platform: newQuery.platforms,
+        accounts: newQuery.ids || [],
+      };
     }
   },
   { deep: true, immediate: true },
 );
 
-// 处理筛选变化
+// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
 const handleChange = (field, value) => {
   localQuery.value[field] = value;
-  console.log(localQuery.value);
-  emit('filter-change', { ...localQuery.value });
+  // 直接触发筛选变更，不需要确认按钮
+  emit('filter-change', {
+    operator: localQuery.value.operator,
+    platform: localQuery.value.platform,
+    accounts: localQuery.value.accounts,
+  });
+  
+  // 选择后自动隐藏下拉菜单
+  setTimeout(() => {
+    visible.value = false;
+  }, 100);
+};
+
+// 点击外部关闭弹窗
+const handleClickOutside = () => {
+  visible.value = false;
 };
 </script>
 
@@ -113,9 +141,41 @@ const handleChange = (field, value) => {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
   padding: 24px;
   margin-top: 8px;
   margin-right: 50px;
+  max-height: 400px;
+  overflow-y: auto;
 }
-</style>
+
+.select-container {
+  align-items: flex-start;
+}
+
+.select-with-tags :deep(.ant-select-selector) {
+  height: auto !important;
+  min-height: 32px !important;
+  align-items: flex-start !important;
+}
+
+.select-with-tags :deep(.ant-select-selection-item) {
+  max-width: none !important;
+  overflow: visible !important;
+  text-overflow: unset !important;
+  line-height: 1.5;
+}
+
+/* 确保选择器容器能够适应内容高度 */
+.select-with-tags :deep(.ant-select) {
+  height: auto !important;
+}
+
+.select-with-tags :deep(.ant-select-multiple .ant-select-selection-item) {
+  height: auto !important;
+  align-items: flex-start !important;
+}
+
+.select-with-tags :deep(.ant-select-selection-overflow) {
+  flex-wrap: wrap !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/property-marketing/assignment-management/index.vue b/src/views/property-marketing/assignment-management/index.vue
index 5e5de87..0e3c90a 100644
--- a/src/views/property-marketing/assignment-management/index.vue
+++ b/src/views/property-marketing/assignment-management/index.vue
@@ -1,57 +1,8 @@
 <template>
-  <div class="flex-column justify-between">
-    <div class="flex justify-between items-start" style="width: 100%">
-      <div class="flex justify-between items-center" style="width: 100%">
-        <div class="flex items-center">
-          <a-date-picker
-            class="w-188px size-14px"
-            v-if="choseType === '日'"
-            @change="onChangeDate"
-            v-model="dayModel"
-            format="YYYY年MM月DD日周dd"
-          />
-          <a-week-picker
-            class="w-188px size-14px"
-            v-else-if="choseType === '周'"
-            @change="onChangeWeek"
-            v-model="weekModel"
-            format="YYYY年MM月DD日"
-          />
-          <a-month-picker
-            class="w-188px size-14px"
-            v-else
-            @change="onChangeMonth"
-            v-model="monthModel"
-            format="YYYY年MM月"
-          />
-          <div class="flex items-center ml-12px">
-            <a-button class="mr-4px" @click="handlePrev">
-              <template #icon>
-                <icon-left />
-              </template>
-            </a-button>
-
-            <a-button @click="handleToday">今天</a-button>
-            <a-button class="ml-4px" @click="handleNext">
-              <template #icon>
-                <icon-right />
-              </template>
-            </a-button>
-          </div>
-          <div class="flex items-center ml-12px">
-            <a-space class="flex justify-between">
-              <a-dropdown position="bottom" @select="handleSelect">
-                <a-button class="w-80px flex justify-between">{{ choseType }}<icon-down /></a-button>
-                <template #content>
-                  <a-doption value="日" class="w-80px">日</a-doption>
-                  <a-doption value="周" class="w-80px">周</a-doption>
-                  <a-doption value="月" class="w-80px">月</a-doption>
-                </template>
-              </a-dropdown>
-            </a-space>
-          </div>
-        </div>
-      </div>
+  <div class="flex-column justify-between bg-#fff rounded-8px p-24px">
+    <!-- 日期选择器和筛选区域 -->
+    <div class="flex justify-between items-start w-full">
+      <DateSelector v-model="dateSelectorModel" @date-change="handleDateSelectorChange" />
       <div class="flex items-start">
         <colorTip />
         <FilterPopup
@@ -61,147 +12,83 @@
           :query="query"
           @filter-change="handleFilterChange"
         />
+        <Button type="primary" class="w-112px" size="middle" @click="handleAddTask">
+          <template #default>创建任务</template>
+        </Button>
       </div>
     </div>
-    <div class="flex justify-between items-start mt-16px" style="width: 100%">
-      <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
+
+    <!-- 表格内容区域 -->
+    <div class="flex justify-between items-start w-full">
+      <div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto;">
         <a-table
           :columns="columns"
           :data="data"
           :bordered="{ cell: true }"
+          :scroll="{ x: 'max-content', y: 600 }"
           style="width: 100%"
           :pagination="false"
           @change="handleTableChange"
         >
-          <!-- 表头插槽：用于自定义日期列的表头样式 -->
+          <!-- 空数据显示 -->
           <template #empty>
             <div class="flex flex-col items-center justify-center">
-              <img :src="emptyIcon" class="img mt-20px" alt="" width="106" height="72" />
+              <img :src="emptyIcon" class="img mt-20px" alt="暂无数据" width="106" height="72" />
               <div class="text mt-36px">暂无数据</div>
               <div class="mt-12px mb-12px">可通过账号管理添加账号，进行任务排期管理</div>
               <a-button type="primary" @click="handleAddAccount">去添加</a-button>
             </div>
           </template>
+
+          <!-- 账号与平台列 -->
           <template #name="{ record }">
             <div class="flex items-center">
               <img
                 :src="getPlatformIcon(record.platform)"
                 style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px"
+                :alt="getPlatformName(record.platform)"
               />
               {{ record.name || '-' }}
             </div>
           </template>
 
-          <!-- 动态日期列渲染 -->
+          <!-- 动态日期单元格 -->
           <template #dateCell="{ record, column }">
-            <div v-if="record[column.dataIndex] && record[column.dataIndex].length > 0" class="task-container">
+            <div v-if="record[column.dataIndex]?.length" class="task-container">
+              <!-- 任务数量≥3时显示更多 -->
               <div v-if="record[column.dataIndex].length >= 3" class="task-more">
-                <div
-                  :key="record[column.dataIndex][0].id"
-                  class="task-item size-12px"
-                  :title="record[column.dataIndex][0].name || '-'"
-                >
-                  <a-trigger trigger="click" position="br">
-                    <div class="task-item size-12px">
-                      <div class="size-12px color-#211F24 mr-4px">
-                        {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
-                      </div>
-                      <div
-                        class="size-12px"
-                        :style="{
-                          color: getTaskColor(
-                            record[column.dataIndex][0].type,
-                            record[column.dataIndex][0].execution_time,
-                          ),
-                        }"
-                        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-                      >
-                        {{ formatTaskName(record[column.dataIndex][0].name) }}
-                      </div>
-                    </div>
-                    <template #content>
-                      <TaskDetail
-                        :task="record[column.dataIndex][0]"
-                        :record="record"
-                        :get-platform-icon="getPlatformIcon"
-                        @edit-time="handleModifyTime"
-                        @delete="handleDelete"
-                        @delete-task="handleDelete"
-                        @gotoDetail="handleGoToDetail"
-                      />
-                    </template>
-                  </a-trigger>
-                </div>
+                <TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
                 <a-trigger trigger="click" position="br">
-                  <div class="size-12px color-#8f959f" style="padding: 0px 8px">
-                    还有{{ record[column.dataIndex].length - 1 }}项
-                  </div>
+                  <div class="size-12px color-#8f959f px-8px">还有{{ record[column.dataIndex].length - 1 }}项</div>
                   <template #content>
-                    <div
-                      class="flex flex-col items-start"
-                      style="
-                        background-color: #fff;
-                        padding: 12px;
-                        box-shadow: #00000010 0px 2px 8px;
-                        border-radius: 4px;
-                      "
-                    >
-                      <div v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
-                        <a-trigger trigger="click" align-point>
-                          <div class="flex items-start mb-8px">
-                            <div class="size-12px color-#211F24 mr-4px">
-                              {{ timestampToTime(task.execution_time) }}
-                            </div>
-                            <div class="size-12px" :style="{ color: getTaskColor(task.type, task.execution_time) }">
-                              {{ task.name || '未命名' }}
-                            </div>
-                          </div>
-                          <template #content>
-                            <TaskDetail
-                              :task="task"
-                              :record="record"
-                              :get-platform-icon="getPlatformIcon"
-                              @edit-time="handleModifyTime"
-                              @delete="handleDelete"
-                              @delete-task="handleDelete"
-                              @gotoDetail="handleGoToDetail"
-                            />
-                          </template>
-                        </a-trigger>
-                      </div>
+                    <div class="bg-#fff p-12px shadow-sm rounded-4px">
+                      <TaskItem
+                        v-for="task in record[column.dataIndex]"
+                        :key="task.id"
+                        :task="task"
+                        :record="record"
+                        @handle-task="handleTaskAction"
+                      />
                     </div>
                   </template>
                 </a-trigger>
               </div>
-              <div v-else v-for="task in record[column.dataIndex]" :key="task.id" :title="task.name || '-'">
-                <a-trigger trigger="click" align-point>
-                  <div class="task-item">
-                    <div class="size-12px color-#211F24 mr-4px">
-                      {{ timestampToTime(task.execution_time) }}
-                    </div>
-                    <div
-                      :style="{ color: getTaskColor(task.type, task.execution_time) }"
-                      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-                    >
-                      {{ formatTaskName(task.name) }}
-                    </div>
-                  </div>
-                  <template #content>
-                    <TaskDetail
-                      :task="task"
-                      :record="record"
-                      :get-platform-icon="getPlatformIcon"
-                      @edit-time="handleModifyTime"
-                      @delete="handleDelete"
-                      @gotoDetail="handleGoToDetail"
-                    />
-                  </template>
-                </a-trigger>
+              <!-- 任务数量<3时直接显示 -->
+              <div v-else>
+                <TaskItem
+                  v-for="task in record[column.dataIndex]"
+                  :key="task.id"
+                  :task="task"
+                  :record="record"
+                  @handle-task="handleTaskAction"
+                />
               </div>
             </div>
             <div v-else class="no-task"></div>
           </template>
         </a-table>
+
+        <!-- 分页控件 -->
         <div v-if="pageInfo.total > 0" class="pagination-box">
           <a-pagination
             :total="pageInfo.total"
@@ -218,261 +105,122 @@
       </div>
     </div>
   </div>
-  <a-modal v-model:visible="showModal" @ok="handleOk" @cancel="handleCancel" ok-text="确认删除">
-    <template #title> {{ deleteTitle }} </template>
-    <div>
-      {{ deleteContent }}
-    </div>
+  <!-- 删除确认弹窗 -->
+  <a-modal v-model:visible="showModal" @ok="handleDeleteConfirm" @cancel="showModal = false" ok-text="确认删除">
+    <template #title>{{ deleteTitle }}</template>
+    <div>{{ deleteContent }}</div>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import type { ColumnProps } from 'ant-design-vue/es/table';
-import { getTaskSchedules, delTaskSchedules, editTaskSchedules } from '@/api/all/assignment-management';
-import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
-import icon1 from '@/assets/img/platform/icon-dy.png';
-import icon2 from '@/assets/img/platform/icon-xhs.png';
-import icon3 from '@/assets/img/media-account/icon-warn.png';
-import icon4 from '@/assets/img/platform/icon-sph.png';
-import icon5 from '@/assets/img/platform/icon-wb.png';
-import icon6 from '@/assets/img/platform/icon-gzh.png';
-import icon7 from '@/assets/img/platform/icon-ks.png';
-import icon8 from '@/assets/img/platform/icon-bilibili.png';
-import DateUtils from '@/utils/DateUtils';
-import TaskDetail from './components/TaskDetail.vue';
-import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
-import emptyIcon from '@/assets/img/media-account/icon-empty.png';
 import router from '@/router';
+import DateUtils from '@/utils/DateUtils';
+// 组件引入
+import DateSelector from './components/date-selector.vue';
 import colorTip from './components/colorTip.vue';
 import FilterPopup from './components/filter-popup.vue';
-
-const {
-  dataSource,
-  pageInfo,
-  rowSelection,
-  onPageChange,
-  onPageSizeChange,
-  resetPageInfo,
-  selectedRowKeys,
-  selectedRows,
-  handleSelectAll,
-  DEFAULT_PAGE_INFO,
-} = useTableSelectionWithPagination({
-  onPageChange: () => {
-    query.page = pageInfo.value.page;
-    query.page_size = pageInfo.value.page_size;
-    handleSearch();
-  },
-  onPageSizeChange: () => {
-    query.page = pageInfo.value.page;
-    query.page_size = pageInfo.value.page_size;
-    handleSearch();
-  },
+// API引入
+import { getTaskSchedules, delTaskSchedules, editTaskSchedules } from '@/api/all/assignment-management';
+import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
+// 工具引入
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+// 静态资源
+import emptyIcon from '@/assets/img/media-account/icon-empty.png';
+// 平台图标
+import iconDy from '@/assets/img/platform/icon-dy.png';
+import iconXhs from '@/assets/img/platform/icon-xhs.png';
+import iconBilibili from '@/assets/img/platform/icon-bilibili.png';
+import iconKs from '@/assets/img/platform/icon-ks.png';
+import iconSph from '@/assets/img/platform/icon-sph.png';
+import iconWb from '@/assets/img/platform/icon-wb.png';
+import iconGzh from '@/assets/img/platform/icon-gzh.png';
+import iconWarn from '@/assets/img/media-account/icon-warn.png';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+// 表格分页逻辑
+const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
+  onPageChange: () => handleSearch(),
+  onPageSizeChange: () => handleSearch(),
 });
 
-const handleTableChange = (pagination: any, sorter: any, extra: any) => {
-  // 获取当前排序的列信息
-  if (sorter && sorter.sorter.direction == 'ascend' && sorter.sorter.field !== undefined) {
-    // 在columns中查找对应的列
-    // 注意：dataIndex是数字类型，而sorter.field可能是字符串类型
-    const column = columns.value.find((col: any) => {
-      // 确保比较时类型一致
-      return col.dataIndex == sorter.sorter.field || col.dataIndex == parseInt(sorter.sorter.field);
-    });
-
-    if (column) {
-      if (column.date) {
-        // 获取格式化的日期字符串
-        const formattedDate = DateUtils.formatDate(column.date);
-        query.top_execution_time = formattedDate;
-        handleSearch();
-      }
-    } else {
-      console.log('未找到匹配的列，尝试查找dataIndex为', sorter.field, '的列');
-    }
-  } else {
-    query.top_execution_time = undefined;
-    handleSearch();
-  }
-
-  // 获取触发变更的列信息
-  if (extra && extra.column) {
-    console.log('触发变更的列:', extra.column);
-  }
-};
-const isChartEmpty = ref(true);
-const currentTask = ref();
-const visible = ref(false);
-const deleteTitle = ref('');
-const deleteContent = ref('');
-const showModal = ref(false);
-const modalVisible = ref(false);
-const selectedTask = ref<any>(null);
-const timePickerVisible = ref(false);
-const choseType = ref('周');
-const dayModel = ref(new Date());
-const weekModel = ref(new Date());
-const monthModel = ref(new Date());
-const currentDateRange = reactive({
-  start: '',
-  end: '',
+// 状态管理
+const dateSelectorModel = ref({
+  choseType: '周' as '日' | '周' | '月',
+  dayModel: new Date(),
+  weekModel: new Date(),
+  monthModel: new Date(),
 });
 const columns = ref<ColumnProps[]>([]);
 const data = ref<any[]>([]);
 const operators = ref([]);
 const accountList = ref([]);
-const platformOptions = ref([
-  { id: 0, name: '抖音', icon: icon1 },
-  { id: 1, name: '小红书', icon: icon2 },
-  { id: 2, name: 'B站', icon: icon8 },
-  { id: 3, name: '快手', icon: icon7 },
-  { id: 4, name: '视频号', icon: icon4 },
-  { id: 5, name: '微博', icon: icon5 },
-  { id: 6, name: '公众号', icon: icon6 },
-]);
+const showModal = ref(false);
+const currentTask = ref<any>(null);
+const deleteTitle = ref('');
+const deleteContent = ref('');
 
+// 获取当前周的日期范围
+const getCurrentWeekRange = () => {
+  const weekRange = DateUtils.getWeekRangeByDate(new Date());
+  return [weekRange.startFormatted, weekRange.endFormatted];
+};
+
+// 查询参数
 const query = reactive({
-  page: 1,
-  page_size: 20,
+  page: pageInfo.value.page,
+  page_size: pageInfo.value.page_size,
   platforms: undefined,
   operator_ids: undefined,
-  name: '',
-  top_execution_time: '' as string | undefined,
-  execution_time: undefined,
-  operator: '',
-  platform: '',
-  accounts: '',
   ids: [],
+  execution_time: getCurrentWeekRange(), // 设置默认值为当前周
+  top_execution_time: undefined,
 });
 
-// 处理删除操作
-const handleDelete = (task: any) => {
-  currentTask.value = task;
-  if (task.type == 1) {
-    deleteTitle.value = '删除内容稿件排期';
-  } else {
-    deleteTitle.value = '删除选题排期';
-  }
-  deleteContent.value = '确认删除“' + task.name + '”吗？';
-  showModal.value = true;
-};
-const handleGoToDetail = (task: any) => {
-  router.push(`/media-account/management-detail/${task.id}`);
-};
-const handleOk = () => {
-  showModal.value = false;
-  delTaskSchedules(currentTask.value.id).then(() => {
-    handleSearch();
-  });
+// 平台配置
+const platformConfig = {
+  icons: { 0: iconDy, 1: iconXhs, 2: iconBilibili, 3: iconKs, 4: iconSph, 5: iconWb, 6: iconGzh },
+  names: { 0: '抖音', 1: '小红书', 2: 'B站', 3: '快手', 4: '视频号', 5: '微博', 6: '公众号' },
+  options: [
+    { id: 0, name: '抖音', icon: iconDy },
+    { id: 1, name: '小红书', icon: iconXhs },
+    { id: 2, name: 'B站', icon: iconBilibili },
+    { id: 3, name: '快手', icon: iconKs },
+    { id: 4, name: '视频号', icon: iconSph },
+    { id: 5, name: '微博', icon: iconWb },
+    { id: 6, name: '公众号', icon: iconGzh },
+  ],
 };
+const platformOptions = ref(platformConfig.options);
 
-const handleCancel = () => {
-  showModal.value = false;
-};
+// 工具函数
+const getPlatformIcon = (platform: number) => platformConfig.icons[platform] || iconWarn;
+const getPlatformName = (platform: number) => platformConfig.names[platform] || '未知平台';
 
-const handleAddAccount = () => {};
-const handleModifyTime = (task: any, time: any) => {
-  editTaskSchedules(task.id, { execution_time: time }).then(() => {
-    handleSearch();
-    timePickerVisible.value = true;
-  });
-};
-
-const onTimeConfirm = () => {
-  if (selectedTask.value && selectedTask.value.execution_time) {
-    // 更新任务的执行时间
-    selectedTask.value.execution_time = new Date().getTime() / 1000; // 假设时间戳是秒级
-    // 重新获取数据
-    handleSearch();
-  }
-  timePickerVisible.value = false;
-};
-
-// 计算当前日期范围内的所有日期，统一返回 number 数组
-const currentDateHeaders = computed(() => {
-  if (choseType.value === '周') {
-    const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
-    return specificWeek.map((item) => parseInt(item.day.toString(), 10)); // 转换为数字数组
-  } else if (choseType.value === '月') {
-    const date = new Date(monthModel.value);
-    const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
-    return tabTitle.map((item) => parseInt(item.day.toString(), 10)); // 转换为数字数组
-  } else {
-    // 日维度，返回当天的日期数字
-    const day = new Date(dayModel.value).getDate();
-    return [day];
-  }
-});
-
-// 获取平台图标
-const getPlatformIcon = (platform: number) => {
-  const platformIcons: Record<number, any> = {
-    0: icon1, // 抖音
-    1: icon2, // 小红书
-    2: icon8, // B站
-    3: icon7, // 快手
-    4: icon4, // 视频号
-    5: icon5, // 微博
-    6: icon6, // 公众号
-  };
-
-  return platformIcons[platform] || icon3; // 默认图标
-};
-
-// 根据平台ID获取平台名称
-const getPlatformName = (platform: number) => {
-  const platformNames: { [key: number]: string } = {
-    0: '抖音',
-    1: '小红书',
-    2: 'B站',
-    3: '快手',
-    4: '视频号',
-    5: '微博',
-    6: '公众号',
-  };
-
-  return platformNames[platform] || '未知平台';
-};
-
-// 获取任务颜色
 const getTaskColor = (taskType: number, executionTime: number) => {
-  // 判断任务是否已过期
   const isExpired = executionTime * 1000 < Date.now();
-  // 如果已过期，根据任务类型返回对应颜色
-  if (isExpired) {
-    return taskType === 0 ? '#A794FE' : '#FFCF66';
-  }
-  // 未过期，根据API文档，type: 0=选题，1=内容稿件
-  return taskType === 0 ? '#6d4cfe' : '#ffae00';
+  return isExpired ? (taskType === 0 ? '#A794FE' : '#FFCF66') : taskType === 0 ? '#6d4cfe' : '#ffae00';
 };
 
-// 格式化任务名称
-const formatTaskName = (name: string) => {
-  if (!name) return '未命名';
-  return name.length > 8 ? name.substring(0, 8) + '...' : name;
-};
+// const formatTaskName = (name: string) => {
+//   if (!name) return '未命名';
+//   return name.length > 8 ? name.substring(0, 8) + '...' : name;
+// };
 
-// 时间戳转日期格式，并提取日期数字
 const timestampToDayNumber = (timestamp: number) => {
-  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
-  return date.getDate(); // 返回数字类型的日期
+  return new Date(timestamp * 1000).getDate();
 };
 
-// 时间戳转时间格式 (HH:MM)
-const timestampToTime = (timestamp: number): string => {
-  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
-  // 获取小时和分钟
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
+// const timestampToTime = (timestamp: number): string => {
+//   const date = new Date(timestamp * 1000);
+//   return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+// };
 
-  return `${hours}:${minutes}`;
-};
-
-// 处理表格数据，使其与动态表头匹配
+// 处理表格数据
 const processTableData = (apiData: any[]) => {
   const processedData: any[] = [];
-  // 处理每条账号数据
+  const dateHeaders = currentDateHeaders.value;
+
   apiData.forEach((account) => {
     const rowData: any = {
       id: account.id,
@@ -480,17 +228,16 @@ const processTableData = (apiData: any[]) => {
       platform: account.platform,
     };
 
-    // 初始化所有日期列为空数组
-    currentDateHeaders.value.forEach((day) => {
+    // 初始化日期列
+    dateHeaders.forEach((day) => {
       rowData[day] = [];
     });
 
-    // 将任务按日期分组
-    if (account.task_schedules && account.task_schedules.length > 0) {
+    // 分配任务到对应日期列
+    if (account.task_schedules?.length) {
       account.task_schedules.forEach((task: any) => {
         const taskDay = timestampToDayNumber(task.execution_time);
-        // 如果这个日期在当前表头中，则添加到对应列
-        if (currentDateHeaders.value.includes(taskDay)) {
+        if (dateHeaders.includes(taskDay)) {
           rowData[taskDay].push({
             id: task.id,
             name: task.name,
@@ -507,32 +254,10 @@ const processTableData = (apiData: any[]) => {
   return processedData;
 };
 
-// 设置日期范围
-const setDateRange = () => {
-  if (choseType.value === '周') {
-    const weekRange = DateUtils.getWeekRangeByDate(new Date(weekModel.value));
-    currentDateRange.start = weekRange.startFormatted;
-    currentDateRange.end = weekRange.endFormatted;
-    query.execution_time = [currentDateRange.start, currentDateRange.end];
-  } else if (choseType.value === '月') {
-    const monthRange = DateUtils.getMonthRangeByYearMonth(
-      new Date(monthModel.value).getFullYear(),
-      new Date(monthModel.value).getMonth() + 1,
-    );
-    currentDateRange.start = monthRange.startFormatted;
-    currentDateRange.end = monthRange.endFormatted;
-    query.execution_time = [currentDateRange.start, currentDateRange.end];
-  } else {
-    // 日维度
-    const date = new Date(dayModel.value);
-    currentDateRange.start = DateUtils.formatDate(date);
-    currentDateRange.end = DateUtils.formatDate(date);
-    query.execution_time = [currentDateRange.start, currentDateRange.end];
-  }
-};
-
-// 设置table的头部
-const setTableSpecific = () => {
+// 创建任务
+const handleAddTask = () => {};
+// 设置表格列
+const setTableColumns = () => {
   columns.value = [
     {
       title: '账号与发布平台',
@@ -540,223 +265,222 @@ const setTableSpecific = () => {
       width: 150,
       ellipsis: true,
       tooltip: true,
+      fixed: 'left', // 固定列
     },
   ];
-
   let dateHeaders: any[] = [];
-  if (choseType.value === '周') {
-    const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
-    dateHeaders = specificWeek;
-  } else if (choseType.value === '月') {
-    const date = new Date(monthModel.value);
-    const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
-    // 为月视图添加日期对象，以便后续判断是否为周末
-    dateHeaders = tabTitle.map((item) => {
-      const dayDate = new Date(date.getFullYear(), date.getMonth(), item.day);
-      return {
-        ...item,
-        date: dayDate,
-      };
-    });
+  const { choseType } = dateSelectorModel.value;
+
+  if (choseType === '周') {
+    dateHeaders = DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0);
+  } else if (choseType === '月') {
+    const date = dateSelectorModel.value.monthModel;
+    dateHeaders = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
   } else {
-    // 日维度
-    const date = new Date(dayModel.value);
-    const day = date.getDate();
-    const weekday = DateUtils.formatDateToWeekdayDay(date);
-    dateHeaders = [{ day: day, weekday, date: date }];
+    const date = dateSelectorModel.value.dayModel;
+    dateHeaders = [
+      {
+        day: date.getDate(),
+        weekday: DateUtils.formatDateToWeekdayDay(date),
+        date,
+      },
+    ];
   }
+
   // 判断是否为今天
   const isToday = (date: Date) => {
+    if (!date) return false;
     const today = new Date();
-    return (
-      date.getDate() === today.getDate() &&
-      date.getMonth() === today.getMonth() &&
-      date.getFullYear() === today.getFullYear()
-    );
+    today.setHours(0, 0, 0, 0);
+    const targetDate = new Date(date);
+    targetDate.setHours(0, 0, 0, 0);
+    return targetDate.getTime() === today.getTime();
   };
+
   // 添加日期列
   dateHeaders.forEach((item) => {
-    // 检查是否为周末（周日为0，周六为6）
-    const isWeekend = item.date ? item.date.getDay() === 0 || item.date.getDay() === 6 : false;
+    const isWeekend = item.date?.getDay() === 0 || item.date?.getDay() === 6;
+    // 确保item.date存在再进行判断
     const todayFlag = item.date ? isToday(item.date) : false;
-    columns.value.push({
+    
+    // 调试信息
+    if (todayFlag) {
+      console.log('Today column detected:', item);
+      console.log('Today flag value:', todayFlag);
+    }
+
+    const columnConfig = {
       title: `${item.weekday}`,
-      dataIndex: item.day, // 使用日期数字作为dataIndex
+      dataIndex: item.day,
       slotName: 'dateCell',
       date: item.date,
       width: 135,
       sortable: {
         sortDirections: ['ascend', 'descend'],
-        sorter: true, // 禁用默认排序
+        sorter: true,
       },
-      // 存储额外信息用于表头渲染
       weekday: item.weekday,
-      todayFlag: todayFlag,
-      // 如果是周末，添加自定义样式
+      todayFlag,
+      // 为周末设置特定的背景色
       cellClass: isWeekend ? 'weekend-column' : '',
-    });
+      // 为今日添加特殊类名
+      class: todayFlag ? 'today-column' : '',
+    };
+    
+    // 更多调试信息
+    if (todayFlag) {
+      console.log('Column config for today:', columnConfig);
+    }
+    
+    columns.value.push(columnConfig);
   });
 };
 
-// 日期变化处理（日维度）
-const onChangeDate = (val: any) => {
-  if (val) {
-    // 确保val是Date对象
-    const selectedDate = val instanceof Date ? val : new Date(val);
-    dayModel.value = selectedDate;
+// 当前日期头部计算
+const currentDateHeaders = computed(() => {
+  const { choseType } = dateSelectorModel.value;
 
-    // 更新日期范围和其他相关状态
-    setDateRange();
-    setTableSpecific();
-
-    // 在下一个tick中执行搜索，确保DOM更新完成
-    nextTick(() => {
-      handleSearch();
-    });
-  }
-};
-
-// 日期变化处理（周维度）
-const onChangeWeek = (val: any) => {
-  if (val) {
-    // 确保val是Date对象
-    const selectedDate = val instanceof Date ? val : new Date(val);
-    weekModel.value = selectedDate;
-
-    // 更新日期范围和其他相关状态
-    setDateRange();
-    setTableSpecific();
-
-    // 在下一个tick中执行搜索，确保DOM更新完成
-    nextTick(() => {
-      handleSearch();
-    });
-  }
-};
-
-const onChangeMonth = (val: any) => {
-  if (typeof val === 'string') {
-    val = DateUtils.MonthStrToDate(val);
-  }
-  if (val) {
-    // 确保val是Date对象
-    const selectedDate = val instanceof Date ? val : new Date(val);
-    monthModel.value = selectedDate;
-
-    // 更新日期范围和其他相关状态
-    setDateRange();
-    setTableSpecific();
-
-    // 在下一个tick中执行搜索，确保DOM更新完成
-    nextTick(() => {
-      handleSearch();
-    });
-  }
-};
-
-// 设置维度
-const handleSelect = (val: string) => {
-  choseType.value = val;
-  setDateRange();
-  setTableSpecific();
-  nextTick(() => {
-    handleSearch();
-  });
-};
-
-// 日期导航
-const handlePrev = () => {
-  // 根据当前维度向前导航
-  if (choseType.value === '周') {
-    const prevWeek = new Date(weekModel.value);
-    prevWeek.setDate(prevWeek.getDate() - 7);
-    onChangeWeek(prevWeek);
-  } else if (choseType.value === '月') {
-    const prevMonth = new Date(monthModel.value);
-    prevMonth.setMonth(prevMonth.getMonth() - 1);
-    onChangeMonth(prevMonth);
+  if (choseType === '周') {
+    return DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0).map((item) =>
+      parseInt(item.day.toString(), 10),
+    );
+  } else if (choseType === '月') {
+    const date = dateSelectorModel.value.monthModel;
+    return DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth()).map((item) =>
+      parseInt(item.day.toString(), 10),
+    );
   } else {
-    const prevDay = new Date(dayModel.value);
-    prevDay.setDate(prevDay.getDate() - 1);
-    onChangeDate(prevDay);
+    return [dateSelectorModel.value.dayModel.getDate()];
   }
-};
+});
 
-const handleNext = () => {
-  // 根据当前维度向后导航
-  if (choseType.value === '周') {
-    const nextWeek = new Date(weekModel.value);
-    nextWeek.setDate(nextWeek.getDate() + 7);
-    onChangeWeek(nextWeek);
-  } else if (choseType.value === '月') {
-    const nextMonth = new Date(monthModel.value);
-    nextMonth.setMonth(nextMonth.getMonth() + 1);
-    onChangeMonth(nextMonth);
-  } else {
-    const nextDay = new Date(dayModel.value);
-    nextDay.setDate(nextDay.getDate() + 1);
-    onChangeDate(nextDay);
-  }
-};
-
-const handleToday = () => {
-  // 回到今天
-  const today = new Date();
-  if (choseType.value === '周') {
-    onChangeWeek(today);
-  } else if (choseType.value === '月') {
-    onChangeMonth(today);
-  } else {
-    onChangeDate(today);
-  }
-};
-// 处理筛选项选择事件
-const handleFilterChange = (field: object) => {
-  console.log(`筛选项发生变化:`, field);
-  // // 根据不同的筛选字段执行不同的操作
-  if (typeof field === 'object' && field !== null) {
-    // 处理传入整个对象的情况
-    Object.keys(field).forEach((key) => {
-      const value = field[key];
-      switch (key) {
-        case 'operator':
-          query.operator_ids = value;
-          break;
-        case 'platform':
-          query.platforms = value;
-          break;
-        case 'accounts':
-          query.ids = value;
-          break;
-        default:
-          // 其他字段直接赋值
-          query[key] = value;
-      }
-    });
-    handleSearch();
-  }
-};
-
-// 获取数据
+// 数据获取
 const handleSearch = () => {
-  console.log('handleSearch查询参数:', query);
   query.page = pageInfo.value.page;
   query.page_size = pageInfo.value.page_size;
   getTaskSchedules(query)
     .then((response) => {
       if (response.data) {
-        // 根据API响应结构调整
         const apiData = response.data.data || response.data;
         data.value = processTableData(apiData);
         pageInfo.value.total = response.data.total || apiData.length;
       }
     })
-    .catch((error) => {
+    .catch(() => {
       data.value = [];
     });
 };
 
-// 获取运营人员
+// 添加一个标志位来避免死循环
+let isDateSelectorUpdating = false;
+
+// 日期选择器变化处理
+const handleDateSelectorChange = (value: any) => {
+  // 如果正在更新中，则跳过
+  if (isDateSelectorUpdating) {
+    return;
+  }
+
+  const newStartDate = value.dateRange.start;
+  const newEndDate = value.dateRange.end;
+
+  // 添加空值检查以避免数组越界错误
+  const currentStart =
+    Array.isArray(query.execution_time) && query.execution_time.length > 0 ? query.execution_time[0] : null;
+  const currentEnd =
+    Array.isArray(query.execution_time) && query.execution_time.length > 1 ? query.execution_time[1] : null;
+
+  // 如果日期范围没有变化，则不执行后续操作
+  if (currentStart === newStartDate && currentEnd === newEndDate) {
+    return;
+  }
+
+  // 设置标志位
+  isDateSelectorUpdating = true;
+
+  query.execution_time = [newStartDate, newEndDate];
+  setTableColumns();
+  handleSearch();
+
+  // 在下一个事件循环重置标志位
+  setTimeout(() => {
+    isDateSelectorUpdating = false;
+  }, 0);
+};
+
+// 筛选条件变化处理
+
+const handleFilterChange = (filters: any) => {
+  console.log(filters);
+  if (typeof filters === 'object' && filters !== null) {
+    Object.keys(filters).forEach((key) => {
+      switch (key) {
+        case 'operator':
+          query.operator_ids = filters[key];
+          break;
+        case 'platform':
+          query.platforms = filters[key];
+          break;
+        case 'accounts':
+          query.ids = filters[key];
+          break;
+        default:
+          query[key] = filters[key];
+      }
+    });
+    console.log(query);
+    handleSearch();
+  }
+};
+
+// 表格排序变化
+const handleTableChange = (pagination: any, sorter: any) => {
+  if (sorter && sorter.sorter?.direction === 'ascend' && sorter.sorter?.field) {
+    const column = columns.value.find((col) => col.dataIndex == sorter.sorter.field);
+    if (column?.date) {
+      query.top_execution_time = DateUtils.formatDate(column.date);
+    }
+  } else {
+    query.top_execution_time = undefined;
+  }
+  handleSearch();
+};
+
+// 任务操作处理
+const handleTaskAction = (action: string, task: any, ...args: any[]) => {
+  switch (action) {
+    case 'delete':
+      currentTask.value = task;
+      deleteTitle.value = task.type === 1 ? '删除内容稿件排期' : '删除选题排期';
+      deleteContent.value = `确认删除“${task.name}”吗？`;
+      showModal.value = true;
+      break;
+    case 'edit-time':
+      editTaskSchedules(task.id, { execution_time: args[0] }).then(() => handleSearch());
+      break;
+    case 'goto-detail':
+      router.push(`/media-account/management-detail/${task.id}`);
+      break;
+  }
+};
+
+// 确认删除
+const handleDeleteConfirm = () => {
+  if (currentTask.value) {
+    delTaskSchedules(currentTask.value.id).then(() => {
+      showModal.value = false;
+      handleSearch();
+    });
+  }
+};
+
+// 添加账号
+const handleAddAccount = () => {
+  // 跳转到添加账号页面的逻辑
+  router.push('/media-account/add');
+};
+
+// 获取运营人员列表
 const getOperators = async () => {
   try {
     const { code, data: operatorsData } = await fetchAccountOperators();
@@ -765,60 +489,33 @@ const getOperators = async () => {
         value: op.id,
         name: op.name,
       }));
-      console.log('获取运营人员数据成功:', operatorsData, operators.value);
     }
   } catch (error) {
-    console.error('获取运营人员数据失败:', error);
+    console.error('获取运营人员失败:', error);
   }
 };
 
+// 获取账号列表
 const getAccountList = async () => {
   try {
     const { code, data: accountData } = await getMediaAccountList();
     if (code === 200) {
-      // 创建平台映射，用于获取平台名称
-      const platformMap = {
-        0: '抖音',
-        1: '小红书',
-        2: 'B站',
-        3: '快手',
-        4: '视频号',
-        5: '微博',
-        6: '公众号',
-      };
-
       accountList.value = accountData.map((account: any) => ({
         value: account.id,
-        name: `${account.name}(${platformMap[account.platform] || '未知平台'})`,
+        name: `${account.name}(${getPlatformName(account.platform)})`,
         platform: account.platform,
         icon: getPlatformIcon(account.platform),
       }));
-      console.log('获取账号数据成功:', accountData, accountList.value);
     }
-  } catch (error) {}
+  } catch (error) {
+    console.error('获取账号列表失败:', error);
+  }
 };
 
-// 监听日期维度变化
-watch(choseType, (newVal) => {
-  // 重置对应模型的值为当前日期
-  const now = new Date();
-  if (newVal === '日') {
-    dayModel.value = now;
-  } else if (newVal === '周') {
-    weekModel.value = now;
-  } else if (newVal === '月') {
-    monthModel.value = now;
-  }
-  nextTick(() => {
-    setDateRange();
-    setTableSpecific();
-    handleSearch();
-  });
-});
-
+// 初始化
 onMounted(() => {
-  setDateRange();
-  setTableSpecific();
+  // 确保在初始化时设置表格列和执行搜索
+  setTableColumns();
   handleSearch();
   getOperators();
   getAccountList();
@@ -826,17 +523,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.content {
-  background: white;
-  width: 100%;
-  height: 600px;
-  padding: 12px;
-}
-
-.arco-dropdown-open .arco-icon-down {
-  transform: rotate(180deg);
-}
-
 .task-container {
   display: flex;
   flex-direction: column;
@@ -865,37 +551,44 @@ onMounted(() => {
   justify-content: center;
 }
 
-/* 周末列背景色 */
+/* 周末列样式 */
 :deep(.weekend-column) {
-  background-color: #fbfaff !important;
+  background-color: #FBFAFF !important;
 }
 
-/* 颜色示意按钮样式 */
-:deep(.color-scheme-btn) {
-  border: none !important;
-  background: none !important;
-  box-shadow: none !important;
+/* 今日列样式 */
+:deep(th.today-column),
+:deep(td.today-column) {
+  background-color: #6D4CFE !important;
+  color: white !important;
 }
 
-.cell-detail {
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  box-shadow: #00000010 0px 2px 8px;
-  padding: 8px 16px;
-  margin-top: 8px;
-}
-.opt-btn {
-  font-size: 12px;
-  width: 138px;
-  height: 28px;
-  background-color: #f2f3f5;
-  text-align: center;
-  line-height: 28px;
-  border-radius: 4px;
-  margin-right: 12px;
+:deep(th.today-column) .arco-table-th-item,
+:deep(th.today-column) .arco-table-th-item-title {
+  color: #6D4CFE !important;
+  background-color: white !important;
+  font-weight: bold;
 }
 
+:deep(td.today-column) .arco-table-cell-wrap {
+  color: white !important;
+}
+
+/* 表头今日样式增强 */
+:deep(th.today-column) {
+  background-color: #6D4CFE !important;
+}
+
+:deep(th.today-column .arco-table-th-item) {
+  background-color: white !important;
+  color: #6D4CFE !important;
+}
+
+:deep(td.today-column) {
+  background-color: #6D4CFE !important;
+}
+
+/* 分页样式 */
 .pagination-box {
   display: flex;
   width: 100%;
@@ -903,4 +596,10 @@ onMounted(() => {
   justify-content: flex-end;
   align-items: center;
 }
+
+/* 下拉框样式优化 */
+:deep(.arco-dropdown-open .arco-icon-down) {
+  transform: rotate(180deg);
+  transition: transform 0.2s ease;
+}
 </style>