diff --git a/src/api/all/assignment-management.ts b/src/api/all/assignment-management.ts
index 2d7834f..f9aa270 100644
--- a/src/api/all/assignment-management.ts
+++ b/src/api/all/assignment-management.ts
@@ -14,7 +14,7 @@ export const delTaskSchedules = (id: string) => {
 // 任务管理-修改
 export const editTaskSchedules = (id: string, params = {}) => {
   console.log('id', id);
-  return Http.put(`/v1/task-schedules/${id}`,params);
+  return Http.put(`/v1/task-schedules/${id}`, params);
 };
 
 // 任务管理-详情
@@ -22,3 +22,18 @@ export const getTaskSchedulesDetail = (id: string) => {
   console.log('id', id);
   return Http.get(`/v1/task-schedules/${id}`);
 };
+//任务管理-手动添加
+export const createTask = (params = {}) => {
+  return Http.post(`/v1/task-schedules/manual`, params);
+};
+
+//任务管理-手动添加
+export const generateContent = (id: string) => {
+  return Http.post(`/v1/task-schedules/${id}/generate-content`);
+};
+
+// 任务管理-修改
+export const editTaskSchedulesTime = (id: string, params = {}) => {
+  console.log('id', id);
+  return Http.patch(`/v1/task-schedules/${id}/execution-time`, params);
+};
diff --git a/src/assets/img/media-account/icon-AI.png b/src/assets/img/media-account/icon-AI.png
new file mode 100644
index 0000000..795b3bb
Binary files /dev/null and b/src/assets/img/media-account/icon-AI.png differ
diff --git a/src/components/common-select/index.vue b/src/components/common-select/index.vue
index 74663c0..2ca73d2 100644
--- a/src/components/common-select/index.vue
+++ b/src/components/common-select/index.vue
@@ -11,23 +11,35 @@
     :allowClear="allClear"
     :showSearch="allowSearch"
     showArrow
-    :maxTagCount="maxTagCount"
+    :maxTagCount="maxTagCount !== undefined ? maxTagCount : multiple ? 3 : undefined"
     @change="handleChange"
     @dropdownVisibleChange="onDropdownVisibleChange"
+    :filterOption="allowSearch ? filterOption : undefined"
   >
-    <Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+    <Option v-for="(item, index) in validOptions" :key="index" :value="item.value" :label="item.label">
       <div class="flex items-center">
-        <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-8px rounded-4px" />
-        {{ item.name }}
+        <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-4px rounded-4px" />
+        <span>{{ item.label }}</span>
       </div>
     </Option>
+    <template #tag="{ label, icon }">
+      <div class="flex items-center">
+        <img v-if="icon" :src="icon" class="w-16px h-16px mr-4px rounded-4px" />
+        <span>{{ label }}</span>
+      </div>
+    </template>
+    <template v-if="!allowSearch" #empty>
+      <div v-if="validOptions.length === 0" class="empty-placeholder">
+        {{ placeholder || '暂无数据' }}
+      </div>
+    </template>
   </Select>
 </template>
 
 <script setup>
 import { Select } from 'ant-design-vue';
 const { Option } = Select;
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -48,7 +60,7 @@ const props = defineProps({
   },
   maxTagCount: {
     type: Number,
-    default: 3,
+    default: undefined,
   },
   allClear: {
     type: Boolean,
@@ -64,6 +76,26 @@ const emits = defineEmits(['update:modelValue', 'change', 'dropdownVisibleChange
 
 const selectedValues = ref(props.multiple ? [] : '');
 
+// 计算有效选项，兼容不同的数据格式
+const validOptions = computed(() => {
+  if (!props.options || !Array.isArray(props.options)) {
+    return [];
+  }
+
+  return props.options
+    .filter(
+      (item) =>
+        item &&
+        (item.id !== undefined || item.value !== undefined) &&
+        (item.name !== undefined || item.label !== undefined),
+    )
+    .map((item) => ({
+      ...item,
+      value: item.id !== undefined ? item.id : item.value,
+      label: item.name !== undefined ? item.name : item.label,
+    }));
+});
+
 watch(
   () => props.modelValue,
   (newVal) => {
@@ -84,3 +116,11 @@ const onDropdownVisibleChange = (visible) => {
   emits('dropdownVisibleChange', visible);
 };
 </script>
+
+<style scoped>
+.empty-placeholder {
+  padding: 8px 12px;
+  color: #8f959e;
+  text-align: center;
+}
+</style>
diff --git a/src/components/filter-popup/index.vue b/src/components/filter-popup/index.vue
new file mode 100644
index 0000000..435a0f9
--- /dev/null
+++ b/src/components/filter-popup/index.vue
@@ -0,0 +1,115 @@
+<!-- // 新增内容： -->
+<template>
+  <a-popover trigger="click" :overlayStyle="{ width: '300px' }" overlayClassName="filter-popup-popover">
+    <template #content>
+      <div>
+        <!-- 运营人员 -->
+        <div class="flex items-center mb-6">
+          <div class="w-70px">运营人员</div>
+          <a-space class="w-200px">
+            <CommonSelect
+              placeholder="请选择运营人员"
+              :options="operators"
+              v-model="localQuery.operator"
+              @change="(val) => handleChange('operator_id', val)"
+              class="!w-200px"
+              :allowSearch="true"
+            />
+          </a-space>
+        </div>
+        <!-- 发布平台 -->
+        <div class="flex items-center mb-6">
+          <div class="w-70px">发布平台</div>
+          <a-space class="w-200px">
+            <CommonSelect
+              :options="platformOptions"
+              v-model="localQuery.platform"
+              @change="(val) => handleChange('platform', val)"
+              class="!w-200px"
+              placeholder="请选择发布平台"
+              :allowSearch="true"
+            />
+          </a-space>
+        </div>
+        <!-- 账号名称 -->
+        <div class="flex items-center">
+          <div class="w-70px">账号名称</div>
+          <a-space class="w-200px">
+            <CommonSelect
+              v-model="localQuery.accounts"
+              :options="accountList"
+              :multiple="true"
+              @change="(val) => handleChange('account_id', val)"
+              class="!w-200px"
+              placeholder="请选择账号名称"
+              :allowSearch="true"
+            />
+          </a-space>
+        </div>
+      </div>
+    </template>
+    <a-button size="small">
+      <template #icon>
+        <FilterOutlined class="color-#55585F" />
+      </template>
+      <template #default>筛选</template>
+    </a-button>
+  </a-popover>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { FilterOutlined } from '@ant-design/icons-vue';
+
+const props = defineProps({
+  operators: Array,
+  platformOptions: Array,
+  accountList: Array,
+  query: Object,
+  triggerStyle: Object,
+});
+
+const emit = defineEmits(['filter-change']);
+
+// 初始化本地查询对象，只设置非空值
+const localQuery = ref({});
+
+// 监听外部 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 };
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+// 处理筛选变化
+const handleChange = (field, value) => {
+  localQuery.value[field] = value;
+  console.log(localQuery.value);
+  emit('filter-change', { ...localQuery.value });
+};
+</script>
+
+<style scoped>
+.filter-popup-popover :deep(.ant-popover-inner-content) {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/src/hooks/useTableSelectionWithPagination.ts b/src/hooks/useTableSelectionWithPagination.ts
index ebc6b22..563f9b7 100644
--- a/src/hooks/useTableSelectionWithPagination.ts
+++ b/src/hooks/useTableSelectionWithPagination.ts
@@ -1,7 +1,10 @@
 import { ref, computed } from 'vue';
+import { merge } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 interface UseTableSelectionWithPaginationOptions {
   rowKey?: string; // 主键字段名，默认 'id'
+  type?: 'checkbox' | 'radio'; // 选择类型，默认 'checkbox'
   pageInfo?: {
     page?: number;
     page_size?: number;
@@ -20,6 +23,7 @@ const DEFAULT_PAGE_INFO = {
 
 export function useTableSelectionWithPagination(options: UseTableSelectionWithPaginationOptions = {}) {
   const rowKey = options.rowKey || 'id';
+  const type = options.type || 'checkbox'; // 默认为复选框
 
   const selectedRowKeys = ref<Array<string | number>>([]);
   const selectedRows = ref<Array<any>>([]);
@@ -31,12 +35,24 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
   // 单行选择
   const handleSelect = (record: any, select: boolean) => {
     const _targetKey = record[rowKey];
-    if (select) {
-      selectedRows.value.push(record);
-      selectedRowKeys.value.push(_targetKey);
+    if (type === 'radio') {
+      // 单选模式
+      if (select) {
+        selectedRows.value = [record];
+        selectedRowKeys.value = [_targetKey];
+      } else {
+        selectedRows.value = [];
+        selectedRowKeys.value = [];
+      }
     } else {
-      selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== _targetKey);
-      selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== _targetKey);
+      // 多选模式（默认）
+      if (select) {
+        selectedRows.value.push(record);
+        selectedRowKeys.value.push(_targetKey);
+      } else {
+        selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== _targetKey);
+        selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== _targetKey);
+      }
     }
 
     options.onSelectChange?.();
@@ -44,6 +60,9 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
 
   // 全选/取消全选
   const handleSelectAll = (checked: boolean) => {
+    // 单选模式下不支持全选
+    if (type === 'radio') return;
+    
     const currentPageRows = dataSource.value;
     const currentPageKeys = currentPageRows.map((v) => v[rowKey]);
 
@@ -60,26 +79,44 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     options.onSelectChange?.();
   };
 
+  // 选择变更处理
+  const handleSelectChange = (keys: Array<string | number>, rows: Array<any>) => {
+    if (type === 'radio') {
+      // 单选模式下只保留最后一个选择
+      selectedRowKeys.value = keys.length > 0 ? [keys[keys.length - 1]] : [];
+      selectedRows.value = rows.length > 0 ? [rows[rows.length - 1]] : [];
+    } else {
+      // 多选模式
+      selectedRowKeys.value = keys;
+      selectedRows.value = rows;
+    }
+    options.onSelectChange?.();
+  };
+
   const onPageChange = (page: number, pageSize: number) => {
     // console.log('onPageChange', page, pageSize);
     pageInfo.value.page = page;
     pageInfo.value.page_size = pageSize;
     options.onPageChange?.(page);
   };
+  
   const onPageSizeChange = (current: number, size: number) => {
     // console.log('onPageSizeChange', current, size);
     // pageInfo.value.page_size = size;
     // pageInfo.value.page = 1;
     // options.onPageSizeChange?.(size);
   };
+  
   const resetPageInfo = () => {
     pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
   };
 
   const rowSelection = computed(() => ({
-    type: 'checkbox',
-    showCheckedAll: true,
+    type: type,
+    showCheckedAll: type === 'checkbox', // 只有复选框模式才显示全选
     width: 48,
+    selectedRowKeys: selectedRowKeys.value,
+    onChange: handleSelectChange
   }));
 
   return {
@@ -92,7 +129,8 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     rowSelection,
     handleSelect,
     handleSelectAll,
+    handleSelectChange,
     resetPageInfo,
     DEFAULT_PAGE_INFO,
   };
-}
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index bf34b07..150a597 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,7 +13,7 @@ import SvgIcon from '@/components/svg-icon/index.vue';
 
 import '@/api/index';
 import './core';
-import '@arco-design/web-vue/dist/arco.css'; // 已移除 Arco 样式
+// import '@arco-design/web-vue/dist/arco.css'; // 已移除 Arco 样式
 
 import 'normalize.css';
 import 'uno.css';
diff --git a/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
index a285027..8045360 100644
--- a/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
+++ b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
@@ -43,14 +43,6 @@ export const TABLE_COLUMNS = [
     dataIndex: 'origin',
     width: 120,
   },
-  {
-    title: '上传时间',
-    dataIndex: 'created_at',
-    width: 180,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
   {
     title: '上传人员',
     dataIndex: 'uploader',
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
new file mode 100644
index 0000000..9bb4524
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/colorTip.vue
@@ -0,0 +1,48 @@
+<template>
+  <a-popover trigger="click" overlayClassName="color-tip-popover">
+    <template #content>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>待生成</div>
+      </div>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #6d4cfe; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>待发布</div>
+      </div>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #939499; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>已发布</div>
+      </div>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #f64b31; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>发布失败</div>
+      </div>
+    </template>
+    <Button class="w-112px mr-8px" size="middle">
+      <template #icon>
+        <InfoCircleOutlined class="color-#55585F" />
+      </template>
+      <template #default>颜色示意</template>
+    </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>
+.color-tip-popover :deep(.ant-popover-inner-content) {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: #00000010 0px 2px 8px;
+  padding: 8px;
+  margin-top: 8px;
+}
+
+.color-tip-popover :deep(.ant-popover-arrow) {
+  display: none;
+}
+</style>
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..9ad0dbb
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/date-selector.vue
@@ -0,0 +1,280 @@
+<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"
+      value-format="YYYY-MM-DD"
+    />
+    <!-- 周选择器 -->
+    <a-week-picker
+      class="w-188px size-14px"
+      v-else-if="choseType === '周'"
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月DD日"
+      value-format="YYYY-MM-DD"
+    />
+    <!-- 月选择器 -->
+    <a-month-picker
+      class="w-188px size-14px"
+      v-else
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月"
+      value-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;
+
+  let selectedDate: Date;
+  if (val instanceof Date) {
+    selectedDate = val;
+  } else {
+    // 处理字符串格式的日期
+    if (choseType.value === '月') {
+      // 月份选择器返回 YYYY-MM 格式
+      const [year, month] = val.split('-').map(Number);
+      selectedDate = new Date(year, month - 1, 1);
+    } else {
+      // 日和周选择器返回 YYYY-MM-DD 格式
+      selectedDate = 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(), // 父组件直接可用的日期范围
+  };
+
+  // 只有在初始化完成后才触发 update:modelValue 和 date-change 事件
+  if (!isInitializing) {
+    emit('update:modelValue', result);
+    console.log('emitChange', result);
+    emit('date-change', result); // 父组件监听此事件做后续处理
+  }
+};
+
+// 11. 监听父组件Props变化（同步外部修改）
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal && !isInitializing) {
+      // 只有在初始化完成后才响应外部props变化
+      choseType.value = newVal.choseType;
+      dayModel.value = newVal.dayModel || new Date();
+      weekModel.value = newVal.weekModel || new Date();
+      monthModel.value = newVal.monthModel || new Date();
+      emitChange();
+    }
+  },
+  { deep: true },
+);
+
+// 初始化完成，设置标志位，并在之后触发一次事件
+setTimeout(() => {
+  isInitializing = false;
+  emitChange();
+}, 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: 78px !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>
diff --git a/src/views/property-marketing/assignment-management/components/draw-popup.vue b/src/views/property-marketing/assignment-management/components/draw-popup.vue
new file mode 100644
index 0000000..5ac260f
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@@ -0,0 +1,625 @@
+<template>
+  <a-drawer
+    title="创建任务"
+    cancel-text="取消"
+    ok-text="创建任务"
+    placement="right"
+    v-model:visible="showDriwer"
+    @after-visible-change="showDriwerChange"
+    @ok="handleCreateTask"
+    width="480px"
+    class="task-drawer"
+    style="z-index: 999"
+  >
+    <div class="drawer-content" :style="isActive == 'ai' ? 'height: 376px;' : 'height:216px;'">
+      <div class="flex flex-col justify-center">
+        <CommonSelect
+          v-model="localQuery.accounts"
+          :options="accountList || []"
+          :multiple="false"
+          @change="(val) => handleChange('accounts', val)"
+          class="!w-432px select-with-tags"
+          placeholder="请选择账号名称"
+          :allowSearch="true"
+          :maxTagCount="999"
+          popup-container=".filter-popup-content"
+        />
+
+        <div class="ai-content-generator">
+          <div class="flex mt-16px">
+            <Button
+              class="w-194px h-38px mr-8px"
+              :class="isActive == 'ai' ? 'active-chose' : ''"
+              @click="handleSelect('ai')"
+            >
+              <template #icon>
+                <img :src="aiIcon" class="w-16 h-16 mr-8px" />
+              </template>
+              AI生成
+            </Button>
+
+            <Button
+              class="w-194px h-38px"
+              :class="isActive == 'chose' ? 'active-chose' : ''"
+              @click="handleSelect('chose')"
+            >
+              从成品库选择</Button
+            >
+          </div>
+          <div v-show="isActive == 'ai'">
+            <!-- 任务描述区域 -->
+            <div class="form-section">
+              <div class="flex items-center w-400px mt-16px mb-8px">
+                <div class="section-title">任务描述</div>
+                <div class="font-size-12px text-[#999999]">（非必填）</div>
+              </div>
+              <div class="w-400px h-126px border-rounded-8px mb-8px" style="background: #fff">
+                <a-textarea
+                  placeholder="描述你想让AI帮你生成的内容。未填写时，AI 会参考账号历史内容的题材与行业方向，结合当下话题，自动生成文案和图片后发布"
+                  class="task-description font-size-12px"
+                  :rows="5"
+                  v-model="taskDescription"
+                />
+              </div>
+            </div>
+            <!-- 素材添加区域 -->
+            <div class="form-section material-section">
+              <div class="flex items-center"></div>
+
+              <Button class="add-material-btn" @click="handleAddMaterial">
+                <template #icon>
+                  <icon-plus size="16" class="mr-8px" />
+                </template>
+                从原料库添加
+              </Button>
+              <div v-if="hasChoseMaterial" class="flex flex-col items-center w-full">
+                <div
+                  v-for="item in selectedMaterials.texts"
+                  :key="item.id"
+                  class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
+                >
+                  {{ item }}
+                </div>
+                <div class="flex items-center w-full">
+                  <img
+                    v-for="item in selectedMaterials.images"
+                    :key="item.id"
+                    :src="item.cover"
+                    class="w-88 h-88 mr-8px border-rounded-8px"
+                  />
+                </div>
+              </div>
+              <div v-else class="flex flex-col items-center">
+                <p class="material-hint">AI会参考添加的文本、图片、视频等素材，完成符合需求的创作</p>
+              </div>
+            </div>
+          </div>
+          <div v-show="isActive == 'chose'">
+            <!-- 任务描述区域 -->
+            <div class="form-section">
+              <div class="flex items-center w-400px mt-16px mb-8px">
+                <div class="section-title">发布内容</div>
+                <div class="font-size-12px text-[#999999]">（必填）</div>
+              </div>
+              <div class="form-section material-section" v-if="hasChoseFinishedProducts == false">
+                <Button @click="handleAddContent" class="add-material-btn">
+                  <template #icon>
+                    <icon-plus size="16" class="mr-8px" />
+                  </template>
+                  添加内容
+                </Button>
+
+                <p class="material-hint">前往成品库，选择要发布的内容</p>
+              </div>
+              <div v-else class="flex flex-col items-start w-full content-center">
+                <div class="opt-btn">
+                  <SwapOutlined class="bg-#00000060 p-4px rounded-4px cursor-pointer" @click="handleAddContent" />
+                  <DeleteOutlined
+                    style="margin-left: 16px"
+                    class="bg-#00000060 p-4px rounded-4px cursor-pointer"
+                    @click="handleDelte"
+                  />
+                </div>
+                <div class="mb-12px">{{ selectedProducts.data[0].title }}</div>
+                <div v-for="item in selectedProducts.images" :key="item.id">
+                  <img v-if="item.cover" :src="item.cover" class="w-88 h-88 mr-8px border-rounded-8px mb-12px" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 发布计划区域 -->
+      <div class="publish-section">
+        <div class="flex items-center justify-between w-384px">
+          <div class="section-title">发布计划</div>
+          <CommonSelect
+            v-model="publishType"
+            :options="publishOptions"
+            @change="handlePublishTypeChange"
+            class="w-180px background-#fff publish-type-select"
+            :allowSearch="false"
+            :multiple="false"
+            popup-container=".filter-popup-content"
+          />
+        </div>
+
+        <div v-if="publishType === 'timing'">
+          <div class="line"></div>
+          <div class="flex items-center justify-between mt-16px w-384px">
+            <div class="section-title">日期</div>
+            <a-date-picker
+              class="w-180px h-40px background-#fff"
+              @change="handleDateChange"
+              v-model="currentDate"
+              format="YYYY年MM月DD日周dd"
+              value-format="YYYY-MM-DD"
+            />
+          </div>
+          <div class="line"></div>
+          <div class="flex items-center justify-between mt-16px w-384px">
+            <div class="section-title">时间</div>
+            <a-time-picker v-model="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
+    <RawMaterialDrawer
+      :visible="showDrawer2"
+      :query="materialQuery"
+      @after-visible-change="handleMaterialDrawerVisibleChange"
+      @confirm="handleMaterialConfirm"
+      @cancel="handleMaterialCancel"
+    />
+
+    <!-- 成品库子组件：使用:visible和@update:visible替代v-model -->
+    <FinishedProductDrawer
+      :visible="showDrawer3"
+      @update:visible="(val) => (showDrawer3 = val)"
+      :query="productQuery"
+      @after-visible-change="handleProductDrawerVisibleChange"
+      @confirm="handleProductConfirm"
+      @cancel="handleProductCancel"
+    />
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { getWorksPage } from '@/api/all/generationWorkshop.ts';
+import { ref, reactive, watch, nextTick } from 'vue';
+import aiIcon from '@/assets/img/media-account/icon-AI.png';
+import { SwapOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+import { Button, DatePicker, TimePicker } from 'ant-design-vue';
+import { TABS_LIST, ORIGIN_LIST, RawMaterialType } from '@/views/material-center/components/raw-material/constants';
+import dayjs from 'dayjs';
+import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
+import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
+import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
+import icon4 from '@/assets/img/error-img.png';
+// 引入子组件
+import RawMaterialDrawer from './raw-material-drawer.vue';
+import FinishedProductDrawer from './finished-product-drawer.vue';
+import { message } from 'ant-design-vue';
+import { getMediaAccountList } from '@/api/all/propertyMarketing';
+// 平台图标
+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';
+
+// 状态管理
+const choseText = ref('');
+const taskDescription = ref('');
+const hasChoseMaterial = ref(false);
+const hasChoseFinishedProducts = ref(false);
+const isActive = ref('ai');
+const showDriwer = ref(false);
+const showDrawer2 = ref(false);
+const showDrawer3 = ref(false);
+const accountList = ref([]);
+onMounted(() => {
+  getData();
+});
+
+// 平台配置
+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 getPlatformIcon = (platform: number) => platformConfig.icons[platform] || iconWarn;
+const getPlatformName = (platform: number) => platformConfig.names[platform] || '未知平台';
+const getData = async () => {
+  try {
+    const { code, data: accountData } = await getMediaAccountList();
+    if (code === 200) {
+      accountList.value = accountData.map((account: any) => ({
+        value: account.id,
+        name: `${account.name}(${getPlatformName(account.platform)})`,
+        platform: account.platform,
+        icon: getPlatformIcon(account.platform),
+      }));
+    }
+  } catch (error) {
+    console.error('获取账号列表失败:', error);
+  }
+};
+// 发布类型选项
+const publishOptions = ref([
+  { value: 'immediate', label: '立即发布' },
+  { value: 'timing', label: '定时发布' },
+]);
+
+// 发布类型，默认为立即发布
+const publishType = ref('immediate');
+
+// 时间选择相关
+const currentDate = ref(new Date());
+const strValue = ref();
+
+// 定义props和emit
+const props = defineProps({
+  operators: Array,
+  platformOptions: Array,
+  accountList: Array,
+  query: Object,
+});
+
+// 本地筛选状态（保持上次选择）
+const localQuery = ref({
+  accounts: props.query?.name || [],
+  ids: props.query?.ids || [],
+});
+
+// 原料库查询参数
+const materialQuery = reactive({
+  page: 1,
+  page_size: 10,
+  platforms: undefined,
+  operator_ids: undefined,
+  ids: [],
+  top_execution_time: undefined,
+});
+
+// 成品库查询参数
+const productQuery = reactive({
+  page: 1,
+  page_size: 10,
+  platforms: undefined,
+  operator_ids: undefined,
+  ids: [],
+});
+
+// 选中的素材数据
+const selectedMaterials = ref({
+  keys: [],
+  data: [],
+  text: '',
+  images: [],
+  texts: [],
+});
+
+const selectedProducts = ref({
+  keys: [],
+  data: [],
+  text: '',
+  images: [],
+});
+
+// 处理AI/成品库选择切换
+const handleSelect = (value) => {
+  isActive.value = value;
+  if (value === 'ai') {
+    showDrawer3.value = false;
+  } else {
+    showDrawer2.value = false;
+  }
+};
+
+// 打开原料库抽屉
+const handleAddMaterial = () => {
+  materialQuery.page = 1;
+  materialQuery.page_size = 10;
+  showDrawer2.value = true;
+};
+
+// 打开成品库抽屉
+const handleAddContent = () => {
+  productQuery.page = 1;
+  productQuery.page_size = 10;
+  showDrawer3.value = true;
+};
+const handleDelte = () => {
+  hasChoseFinishedProducts.value = false;
+  selectedProducts.value = {
+    keys: [],
+    data: [],
+    text: '',
+    images: [],
+  };
+};
+// 处理原料库选择确认
+const handleMaterialConfirm = (result) => {
+  console.log('handleMaterialConfirm', result);
+  selectedMaterials.value = {
+    keys: result.selectedKeys,
+    data: result.selectedData,
+    text: result.choseText,
+    images: result.choseImgArray,
+    texts: result.selectedTexts || [],
+  };
+  hasChoseMaterial.value = result.selectedKeys.length > 0;
+};
+
+// 处理原料库取消
+const handleMaterialCancel = () => {
+  // 取消逻辑
+  showDrawer2.value = false;
+};
+
+// 处理成品库选择确认
+const handleProductConfirm = (result) => {
+  selectedProducts.value = {
+    keys: result.selectedKeys,
+    data: result.selectedData,
+    text: result.choseText,
+    images: result.choseImgArray,
+  };
+
+  // 如果是单选模式，确保只选择一个项目
+  if (result.selectedRows && result.selectedRows.length > 0) {
+    hasChoseFinishedProducts.value = true;
+    // 取第一个选中的项目
+    const selectedProduct = result.selectedRows[0];
+    selectedProducts.value = {
+      keys: [selectedProduct.id],
+      data: [selectedProduct],
+      text: '1个稿件',
+      images: [selectedProduct],
+    };
+  }
+};
+
+// 处理成品库取消
+const handleProductCancel = () => {
+  // 取消逻辑
+  showDrawer3.value = false;
+};
+
+// 处理发布类型变化
+const handlePublishTypeChange = (value) => {
+  publishType.value = value;
+};
+
+// 处理日期变化
+const handleDateChange = (date) => {
+  // 日期处理逻辑
+};
+
+// 抽屉显示状态变化
+const showDriwerChange = (visible: boolean) => {
+  console.log('Main Drawer visible: ', visible);
+};
+
+// 原料库抽屉显示状态变化
+const handleMaterialDrawerVisibleChange = (visible: boolean) => {
+  console.log('Raw Material Drawer visible: ', visible);
+};
+
+// 成品库抽屉显示状态变化
+const handleProductDrawerVisibleChange = (visible: boolean) => {
+  console.log('Finished Product Drawer visible: ', visible);
+};
+
+// 处理筛选条件变化
+const handleChange = (field, value) => {
+  localQuery.value[field] = value;
+  localQuery.value.ids = [value];
+  emit('filter-change', {
+    accounts: localQuery.value.accounts,
+  });
+};
+
+// 点击创建任务按钮时触发
+const handleCreateTask = () => {
+  // 验证表单
+  if (localQuery.value.ids.length == 0) {
+    // 可以添加错误提示：请选择发布内容
+    message.error('请选择发布账号');
+    return;
+  }
+  if (isActive.value === 'chose' && selectedProducts.value.keys.length === 0) {
+    // 可以添加错误提示：请选择发布内容
+    message.error('请选择发布内容');
+    return;
+  }
+  if (isActive.value === 'ai' && selectedMaterials.value.keys.length === 0) {
+    // 可以添加错误提示：请选择发布内容
+    message.error('请选择发布内容');
+    return;
+  }
+  console.log('有问题已返回');
+  // 准备提交的数据
+  const taskData = {
+    media_account_id: localQuery.value.ids[0],
+    is_ai_generate: isActive.value == 'chose' ? 0 : 1,
+    ai_prompt: taskDescription.value,
+    raw_material_ids: selectedMaterials.value.keys,
+    products: selectedProducts.value.keys,
+    publish_type: publishType.value == 'immediate' ? 0 : 1,
+    execution_time:
+      publishType.value === 'timing' ? `${dayjs(currentDate.value).format('YYYY-MM-DD')} ${strValue.value}` : undefined,
+    work_id: selectedProducts.value.keys[0],
+  };
+  // 发射创建任务事件
+  emit('create-task', taskData);
+
+  // 关闭抽屉
+  showDriwer.value = false;
+};
+
+// 暴露方法给父组件
+const showDrawer = (accountInfo = null, selectedDate = null) => {
+  showDriwer.value = true;
+  if (accountInfo && accountInfo.id) {
+    nextTick(() => {
+      localQuery.value.accounts = [accountInfo.name];
+      localQuery.value.ids = [accountInfo.id];
+    });
+  }
+  // 如果传入了日期，则设置为默认日期
+  if (selectedDate) {
+    currentDate.value = selectedDate;
+    console.log('currentDate', currentDate.value);
+    publishType.value = 'timing';
+  }
+};
+
+// 定义事件发射器
+const emit = defineEmits(['filter-change', 'create-task']);
+
+// 暴露方法
+defineExpose({
+  showDrawer,
+});
+</script>
+
+<style scoped>
+.drawer-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.arco-drawer {
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
+}
+
+.ai-content-generator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  margin-top: 24px;
+  width: 432px;
+  background: linear-gradient(to right, #f0f5ff, #fff6f5) !important;
+  border-radius: 8px;
+}
+.active-chose {
+  border: #722ed1 1px solid !important;
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.publish-section {
+  width: 432px;
+  padding: 16px 24px;
+  background-color: #f7f8fa;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  align-items: start;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+
+.section-title {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.task-description {
+  width: 100%;
+  font-size: 14px;
+  height: 126px;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.task-description::placeholder {
+  color: #999;
+}
+
+.material-section {
+  border-radius: 8px;
+  text-align: center;
+  background-color: #fff;
+  margin-bottom: 8px;
+  padding: 16px;
+}
+
+.add-material-btn {
+  width: 240px;
+  height: 38px;
+  border-radius: 8px;
+  font-size: 14px;
+  border: 1px dashed #e0e0e0 !important;
+  margin-bottom: 8px;
+}
+
+.material-hint {
+  color: #939499;
+  font-size: 14px;
+  margin: 0 40px;
+}
+.content-center {
+  position: relative;
+}
+
+.opt-btn {
+  display: flex;
+  position: absolute; /* 设置为绝对定位 */
+  top: 0; /* 紧贴顶部 */
+  right: 0; /* 紧贴右侧 */
+}
+
+.publish-type-select :deep(.ant-select-selection-item) {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.select-with-tags :deep(.ant-select-selection-item) {
+  text-align: start;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.line {
+  background-color: #e6e6e8;
+  width: 382px;
+  height: 1px;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/property-marketing/assignment-management/components/filter-popup.vue b/src/views/property-marketing/assignment-management/components/filter-popup.vue
new file mode 100644
index 0000000..9398eac
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/filter-popup.vue
@@ -0,0 +1,181 @@
+<template>
+  <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-center 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-center 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-center 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>
+      </template>
+
+      <!-- 触发按钮：添加点击事件控制弹窗显示 -->
+      <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, 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,
+  accountList: Array,
+  query: Object,
+});
+
+const emit = defineEmits(['filter-change']);
+
+// 弹窗显示状态（关键：控制弹窗显示的核心变量）
+const visible = ref(false);
+
+// 本地筛选状态（保持上次选择）
+const localQuery = ref({
+  operator: props.query?.operator_ids,
+  platform: props.query?.platforms,
+  accounts: props.query?.ids || [],
+});
+
+// 监听父组件query变化，同步到本地
+watch(
+  () => props.query,
+  (newQuery) => {
+    if (newQuery) {
+      localQuery.value = {
+        operator: newQuery.operator_ids,
+        platform: newQuery.platforms,
+        accounts: newQuery.ids || [],
+      };
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
+const handleChange = (field, value) => {
+  localQuery.value[field] = 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>
+
+<style scoped>
+.filter-popup-popover :deep(.ant-popover-inner-content) {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 24px;
+  margin-top: 8px;
+  margin-right: 50px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.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>
diff --git a/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue b/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
new file mode 100644
index 0000000..835d499
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
@@ -0,0 +1,270 @@
+<template>
+  <a-drawer
+    title="成品库"
+    cancel-text="取消"
+    ok-text="确定"
+    placement="right"
+    :visible="visible"
+    @after-visible-change="onAfterVisibleChange"
+    @cancel="handleCancel"
+    width="904px"
+    class="task-drawer"
+    style="right: 481px"
+  >
+    <!-- 成品库表格 -->
+    <Table
+      :data-source="materialData"
+      bordered
+      :columns="columns"
+      :pagination="false"
+      row-key="id"
+      :row-selection="rowSelection"
+    >
+      <template #cover="{ record }">
+        <div class="flex items-center">
+          <img
+            :src="record.cover ? record.cover : icon4"
+            alt="内容预览"
+            class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
+          />
+        </div>
+      </template>
+      <template #name="{ record }">
+        <div class="flex items-center">{{ record.title }}</div>
+      </template>
+      <template #type="{ record }">
+        <div class="flex items-center">
+          <img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
+          <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
+            record.type === EnumManuscriptType.Image ? '图文' : '视频'
+          }}</span>
+        </div>
+      </template>
+      <template #uploader="{ record }">
+        <div class="flex items-center">{{ record.last_modifier?.mobile || '-' }}</div>
+      </template>
+      <template #audit_status="{ record }">
+        <div
+          class="flex items-center justify-center font-size-14px p-4px border-rounded-4px"
+          :style="getAuditStatusStyle(record.audit_status)"
+        >
+          {{ getStatus(record.audit_status) }}
+        </div>
+      </template>
+      <template #last_modified_at="{ record }">
+        <div class="flex items-center">
+          {{ record.last_modified_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+        </div>
+      </template>
+    </Table>
+
+    <!-- 分页控件 -->
+    <div class="pagination-box">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.page_size"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+
+    <!-- 底部操作栏 -->
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <div class="color-#737478 font-size-14px">已选择：</div>
+          <div class="color-#737478 font-size-14px">{{ choseText }}</div>
+        </div>
+        <div class="flex justify-end">
+          <Button @click="handleCancel">取消</Button>
+          <Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
+        </div>
+      </div>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
+import { Table, Button, Pagination } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
+import { getWorksPage } from '@/api/all/generationWorkshop.ts';
+// 引入图片资源
+import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
+import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
+import icon4 from '@/assets/img/error-img.png';
+
+// 定义Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  query: {
+    type: Object,
+    required: true,
+    default: () => ({
+      page: 1,
+      page_size: 10,
+      platforms: undefined,
+      operator_ids: undefined,
+      ids: [],
+      keyword: '',
+      audit_status: undefined,
+      type: undefined,
+    }),
+  },
+});
+
+// 定义Emits
+const emit = defineEmits(['update:visible', 'after-visible-change', 'confirm', 'cancel']);
+
+// 内部状态管理
+const materialData = ref([]);
+const choseText = ref('');
+const choseImgArray = ref([]);
+
+// 表格列配置
+const columns = ref([
+  { title: '图片/视频', dataIndex: 'cover', width: 200, slots: { customRender: 'cover' } },
+  { title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
+  { title: '稿件类型', dataIndex: 'type', width: 100, slots: { customRender: 'type' } },
+  { title: '审核状态', dataIndex: 'audit_status', width: 100, slots: { customRender: 'audit_status' } },
+  { title: '最后修改时间', dataIndex: 'last_modified_at', width: 200, slots: { customRender: 'last_modified_at' } },
+  { title: '上传人员', dataIndex: 'uploader', width: 200, slots: { customRender: 'uploader' } },
+]);
+
+// 1. 先定义数据获取函数，确保使用最新的query参数
+const fetchProductData = async () => {
+  try {
+    // 使用主组件传递的最新查询参数
+    const params = { ...props.query };
+    console.log('成品库请求参数:', params); // 调试用
+
+    const res = await getWorksPage(params);
+    materialData.value = [];
+    pageInfo.value.total = res.data.total;
+    if (pageInfo.value.page === 1) {
+      materialData.value = res.data.data;
+    } else {
+      materialData.value = [...materialData.value, ...res.data.data];
+    }
+  } catch (error) {
+    console.error('获取成品库数据失败:', error);
+  }
+};
+
+// 2. 初始化表格选择逻辑
+const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys, selectedRows } =
+  useTableSelectionWithPagination({
+    rowKey: 'id',
+    type: 'radio', // 改为单选模式
+    onPageChange: fetchProductData,
+    onPageSizeChange: fetchProductData,
+  });
+
+// 监听query参数变化，当主组件传递的参数变化时重新请求数据
+watchEffect(() => {
+  if (props.visible) {
+    console.log('成品库查询参数变化，重新加载数据');
+    fetchProductData();
+  }
+});
+
+// 监听选中项变化
+watch(selectedRows, (newRows) => {
+  if (rowSelection.value.type === 'radio') {
+    // 单选模式
+    choseText.value = newRows.length > 0 ? '1个稿件' : '0个稿件';
+    // 如果类型是文本，则choseImgArray为空数组
+    if (newRows.length > 0 && newRows[0].type !== 'text') {
+      choseImgArray.value = [newRows[0]];
+    } else {
+      choseImgArray.value = [];
+    }
+  } else {
+    // 多选模式
+    choseText.value = newRows.length + '个稿件';
+    // 过滤掉文本类型，只保留非文本类型的项目
+    choseImgArray.value = newRows.filter((item) => item.type !== 'text');
+  }
+});
+
+// 格式化审核状态显示
+const getStatus = (status: number) => {
+  switch (status) {
+    case 1:
+      return '待审核';
+    case 2:
+      return '审核中';
+    case 3:
+      return '已通过';
+    default:
+      return '未知';
+  }
+};
+
+const getAuditStatusStyle = (status: number) => {
+  switch (status) {
+    case 1:
+      return { backgroundColor: '#f0f0f0', color: '#666' };
+    case 2:
+      return { backgroundColor: '#fff7ed', color: '#ff9c00' };
+    case 3:
+      return { backgroundColor: '#e6ffe6', color: '#008000' };
+    default:
+      return { backgroundColor: '#f0f0f0', color: '#666' };
+  }
+};
+
+// 抽屉显示状态变化处理
+const onAfterVisibleChange = (visible: boolean) => {
+  emit('after-visible-change', visible);
+
+  if (visible) {
+    // 当抽屉显示时，使用最新参数请求数据
+    fetchProductData();
+  } else {
+    // 关闭时清空数据
+    materialData.value = [];
+    selectedRowKeys.value = [];
+    choseText.value = '';
+    choseImgArray.value = [];
+  }
+};
+
+// 取消按钮处理
+const handleCancel = () => {
+  emit('cancel');
+};
+
+// 确定按钮处理
+const handleOk = () => {
+  emit('confirm', {
+    selectedKeys: selectedRowKeys.value,
+    selectedData: selectedRows.value,
+    selectedRows: selectedRows.value,
+    choseText: choseText.value,
+    choseImgArray: choseImgArray.value,
+  });
+  emit('update:visible', false);
+};
+</script>
+
+<style scoped>
+.pagination-box {
+  display: flex;
+  width: 100%;
+  padding: 16px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>
diff --git a/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue b/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
new file mode 100644
index 0000000..df5253f
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
@@ -0,0 +1,295 @@
+<template>
+  <a-drawer
+    title="原料库"
+    cancel-text="取消"
+    ok-text="确定"
+    placement="right"
+    :visible="visible"
+    @after-visible-change="onAfterVisibleChange"
+    @cancel="handleCancel"
+    width="904px"
+    class="task-drawer"
+    style="right: 481px"
+  >
+    <!-- 成品库表格 -->
+    <Table
+      :data-source="materialData"
+      bordered
+      :columns="columns"
+      :pagination="false"
+      row-key="id"
+      :row-selection="rowSelection"
+    >
+      <template #name="{ record }">
+        <div class="name-cell flex items-center">
+          <img
+            :src="record.type == 2 ? icon5 : record.cover"
+            alt="类型图标"
+            class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
+          />
+          <div class="flex flex-col ml-8px">
+            <span class="material-name">{{ record.name }}</span>
+            <span class="material-type">{{ record.uid }}</span>
+          </div>
+        </div>
+      </template>
+      <template #type="{ record }">
+        <div class="flex items-center">
+          <span>{{ getType(record.type) }}</span>
+        </div>
+      </template>
+      <template #origin="{ record }">
+        <span>{{ getOrigin(record.origin) }}</span>
+      </template>
+      <template #created_at="{ record }">
+        <div class="flex items-center">
+          {{ record.created_at ? dayjs(record.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+        </div>
+      </template>
+    </Table>
+
+    <!-- 分页控件 -->
+    <div class="pagination-box">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.page_size"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+
+    <!-- 底部操作栏 -->
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <div class="color-#737478 font-size-14px">已选择：</div>
+          <div class="color-#737478 font-size-14px">{{ choseText }}</div>
+          <div v-for="item in choseImgArray" :key="item.id" class="ml-16px">
+            <img
+              :src="item.cover ? item.cover : icon4"
+              alt="选中的内容"
+              class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
+            />
+          </div>
+          <div
+            v-for="item in choseTextArray"
+            :key="item.id"
+            class="ml-16px bg-#F7F8FA h-44px overflow-hidden w-75px border-rounded-8px flex items-center"
+          >
+            <div class="whitespace-nowrap overflow-hidden text-ellipsis w-full px-2" :title="item.name">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end">
+          <Button @click="handleCancel">取消</Button>
+          <Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
+        </div>
+      </div>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
+import { Table, Button, Pagination } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
+import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
+// 引入图片资源
+import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
+import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
+import icon4 from '@/assets/img/error-img.png';
+import { RawMaterialType } from '@/views/material-center/components/raw-material/constants';
+import icon5 from '../../../../views/material-center/components/raw-material/img/icon-no-text.png';
+// 定义Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  query: {
+    type: Object,
+    required: true,
+    default: () => ({
+      page: 1,
+      page_size: 10,
+      platforms: undefined,
+      operator_ids: undefined,
+      ids: [],
+      keyword: '',
+      audit_status: undefined,
+      type: undefined,
+    }),
+  },
+});
+// 辅助函数
+const getType = (type: number): string => {
+  const typeMap = {
+    [RawMaterialType.Image]: '图片',
+    [RawMaterialType.Video]: '视频',
+    [RawMaterialType.Text]: '文本',
+  };
+  return typeMap[type] || '未知';
+};
+
+const getOrigin = (origin: number): string => {
+  const fromMap = {
+    0: '本地上传',
+    1: 'AI生成',
+  };
+  return fromMap[origin] || '未知';
+};
+// 定义Emits类型
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (
+    e: 'confirm',
+    data: {
+      selectedKeys: string[];
+      selectedData: any[];
+      choseText: string;
+      choseImgArray: any[];
+      selectedTexts: string[];
+    },
+  ): void;
+  (e: 'cancel'): void;
+}>();
+// 内部状态管理
+const materialData = ref([]);
+const choseText = ref('');
+const choseImgArray = ref([]);
+const choseTextArray = ref([]);
+// 表格列配置
+const columns = ref([
+  { title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
+  { title: '类型', dataIndex: 'type', width: 100, slots: { customRender: 'type' } },
+  { title: '来源', dataIndex: 'origin', width: 100, slots: { customRender: 'origin' } },
+  { title: '上传时间', dataIndex: 'created_at', width: 200, slots: { customRender: 'created_at' } },
+]);
+
+// 1. 先定义数据获取函数，确保使用最新的query参数
+const fetchProductData = async () => {
+  try {
+    // 使用主组件传递的最新查询参数
+    const params = { ...props.query };
+    console.log('成品库请求参数:', params); // 调试用
+
+    const res = await getRawMaterialsPage(params);
+    materialData.value = [];
+    pageInfo.value.total = res.data.total;
+    if (pageInfo.value.page === 1) {
+      materialData.value = res.data.data;
+    } else {
+      materialData.value = [...materialData.value, ...res.data.data];
+    }
+  } catch (error) {
+    console.error('获取成品库数据失败:', error);
+  }
+};
+
+// 2. 初始化表格选择逻辑
+const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
+  rowKey: 'id',
+  onPageChange: fetchProductData,
+  onPageSizeChange: fetchProductData,
+});
+
+// 监听query参数变化，当主组件传递的参数变化时重新请求数据
+watchEffect(() => {
+  if (props.visible) {
+    console.log('成品库查询参数变化，重新加载数据');
+    fetchProductData();
+  }
+});
+
+// 监听选中项变化
+watch(selectedRowKeys, (newKeys) => {
+  const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
+
+  const typeCount: Record<string, number> = {};
+  filteredData.forEach((item) => {
+    typeCount[item.type] = (typeCount[item.type] || 0) + 1;
+  });
+
+  choseText.value = Object.entries(typeCount)
+    .map(([type, count]) => {
+      const typeName = getType(Number(type));
+      return `${typeName}: ${count}个`;
+    })
+    .join(' ');
+
+  choseImgArray.value = filteredData.filter((item) => [0, 1].includes(item.type));
+  choseTextArray.value = filteredData.filter((item) => [2].includes(item.type));
+});
+
+// 格式化审核状态显示
+const getStatus = (status: number) => {
+  switch (status) {
+    case 0:
+      return '待审核';
+    case 1:
+      return '审核中';
+    case 2:
+      return '已通过';
+    case 3:
+      return '已拒绝';
+    default:
+      return '未知';
+  }
+};
+
+// 抽屉显示状态变化处理
+const onAfterVisibleChange = (visible: boolean) => {
+  emit('after-visible-change', visible);
+  if (visible) {
+    // 当抽屉显示时，使用最新参数请求数据
+    fetchProductData();
+  } else {
+    // 关闭时清空数据
+    materialData.value = [];
+    selectedRowKeys.value = [];
+    choseText.value = '';
+    choseImgArray.value = [];
+  }
+};
+
+// 取消按钮处理
+const handleCancel = () => {
+  console.log('取消');
+  emit('cancel');
+};
+
+// 确定按钮处理
+const handleOk = () => {
+  const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
+  const selectedTexts = selectedData
+    .filter((item) => item.type === RawMaterialType.Text)
+    .map((item) => item.content || item.name);
+  emit('confirm', {
+    selectedKeys: selectedRowKeys.value,
+    selectedData,
+    choseText: choseText.value,
+    choseImgArray: choseImgArray.value,
+    selectedTexts: selectedTexts,
+  });
+  emit('update:visible', false);
+};
+</script>
+
+<style scoped>
+.pagination-box {
+  display: flex;
+  width: 100%;
+  padding: 16px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>
diff --git a/src/views/property-marketing/assignment-management/components/task-item.vue b/src/views/property-marketing/assignment-management/components/task-item.vue
new file mode 100644
index 0000000..c0a7768
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/task-item.vue
@@ -0,0 +1,372 @@
+<template>
+  <a-trigger trigger="click" position="br" @click.stop @popup-visible-change="onPopupVisibleChange">
+    <div class="task-item">
+      <div class="color-indicator" :style="{ background: getTaskColor() }"></div>
+      <div>{{ timestampToTime(task.execution_time) }}</div>
+      <div class="task-name" :title="task?.name || '-'">{{ task?.name || 'AI生成内容' }}</div>
+    </div>
+    <template #content>
+      <div class="flex flex-col items-start popup-content" @click="gotoDetail">
+        <div class="flex flex-col items-start p-16px w-full" @click="gotoDetail">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex items-center title-container">
+              <img
+                :src="getPlatformIcon(record.platform)"
+                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
+              />
+              <div class="task-title" :title="record.name || 'AI生成内容'">{{ record.name || 'AI生成内容' }}</div>
+            </div>
+            <div
+              class="status-tag"
+              :style="{
+                color: getTaskColor(),
+                backgroundColor: getTaskColor() + '50',
+              }"
+            >
+              {{ getTaskStatusText(task.status) }}
+            </div>
+          </div>
+
+          <div class="text-12px color-#939499 mt-4px h-22px" @click="gotoDetail">
+            {{ timestampToTime1(task.execution_time) }}
+          </div>
+        </div>
+
+        <div class="font-size-14px color-#211F24 color-#211F24 task-description" :title="task.name || 'AI生成内容'">
+          {{ task.name || 'AI生成内容' }}
+        </div>
+        <div v-if="task.ai_generate_status == 0" class="AILoding">
+          <ASpin />
+          <div style="color: #9a56ba">内容生成中...</div>
+          <div style="color: #9a56ba">完成后将自动展示，您可先返回其他操作</div>
+        </div>
+
+        <div v-else-if="task.ai_generate_status == 1 && taskDetail" class="w-full pl-16px">
+          <div
+            v-for="item in choseTextArray"
+            :key="item.id"
+            class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
+          >
+            {{ item }}
+          </div>
+          <div class="flex items-center w-full">
+            <img
+              v-for="item in choseImgArray"
+              :key="item.id"
+              :src="item.cover || item.url"
+              class="w-88 h-88 mr-8px border-rounded-8px"
+            />
+          </div>
+          <div class="flex items-center w-full">
+            <video
+              v-for="item in choseVideoArray"
+              :key="item.id"
+              :src="item.cover || item.url"
+              class="w-44 h-44 mr-8px border-rounded-8px object-fit-contain"
+            />
+          </div>
+        </div>
+        <div class="flex items-center mt-12px w-full h-1px bg-#E6E6E8"></div>
+        <div class="flex items-center mt-12px mb-16px action-buttons w-full px-16px">
+          <div class="flex items-center mr-12px" @click.stop="handleDelete" v-if="task.status != 1">
+            <icon-delete style="font-size: 20px; margin-left: 0" />
+          </div>
+          <div class="flex w-full" :class="{ 'justify-between': task.ai_generate_status == 0 }">
+            <a-date-picker
+              v-model="datePickerValue"
+              placeholder="修改发布时间"
+              :show-time="{ format: 'HH:mm' }"
+              format="YYYY-MM-DD HH:mm"
+              value-format="YYYY-MM-DD HH:mm"
+              @change="onChange"
+              @ok="onOk"
+              @click.stop
+              @mousedown.stop
+              @focus.stop
+            />
+            <button v-if="task.ai_generate_status == 0" class="opt-btn ml-12px opt-right" @click.stop="handleAICreate">
+              AI立即生成
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </a-trigger>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { Spin as ASpin } from 'ant-design-vue';
+import dayjs from 'dayjs';
+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 { getTaskSchedulesDetail } from '@/api/all/assignment-management';
+import { DatePicker } from '@arco-design/web-vue';
+// 定义props和emit
+const props = defineProps({
+  task: Object,
+  record: Object,
+});
+
+const taskDetail = ref(null);
+const choseImgArray = ref([]);
+const choseTextArray = ref([]);
+const choseVideoArray = ref([]);
+const getTaskDetail = async () => {
+  if (!props.task || !props.task.id) return;
+
+  try {
+    const res = await getTaskSchedulesDetail(props.task.id);
+
+    if (res && res.data) {
+      datePickerValue.value = dayjs(res.data.execution_time * 1000);
+      console.log('任务详情:', datePickerValue.value);
+      if ('work' in res.data && res.data.work) {
+        taskDetail.value = res.data.work;
+        choseImgArray.value = res.data.work.files.filter((item) => [0].includes(item.type));
+        choseTextArray.value = res.data.work.files.filter((item) => [2].includes(item.type));
+        choseVideoArray.value = res.data.work.files.filter((item) => [1].includes(item.type));
+      } else {
+        taskDetail.value = res.data.raw_materials;
+        choseImgArray.value = taskDetail.value.filter((item) => [0].includes(item.type));
+        choseTextArray.value = taskDetail.value.filter((item) => [2].includes(item.type));
+        choseVideoArray.value = taskDetail.value.filter((item) => [1].includes(item.type));
+      }
+    }
+  } catch (error) {
+    console.error('获取任务详情失败:', error);
+  }
+};
+
+const onChange = (date, dateString) => {
+  console.log('Selected Date: ', date, dateString);
+  if (date) {
+    emit('handle-task', 'edit-time', props.task, dateString);
+  }
+};
+
+const onOk = (value) => {
+  console.log('DatePicker OK: ', value);
+  if (value) {
+    emit('handle-task', 'edit-time', props.task, value);
+  }
+};
+
+const onPopupVisibleChange = (visible) => {
+  if (visible) {
+    getTaskDetail();
+  }
+};
+
+const handleDelete = () => {
+  emit('handle-task', 'delete', props.task, props.record);
+};
+const gotoDetail = () => {
+  console.log('跳转详情');
+  emit('handle-task', 'goto-detail', props.task, props.record);
+};
+const handleTimeChange = (time: string) => {
+  // if (time) {
+  //   emit('handle-task', 'edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
+  // }
+};
+const handleAICreate = () => {
+  emit('handle-task', 'ai-create', props.task, props.record);
+};
+const timestampToTime = (timestamp: number): string => {
+  // 如果没有传入时间戳，则返回空字符串
+  if (!timestamp) return '';
+
+  // 将时间戳转换为毫秒（如果时间戳是秒单位的话）
+  const date = new Date(timestamp * 1000);
+
+  // 格式化为 HH:mm 格式
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${hours}:${minutes}`;
+};
+const timestampToTime1 = (timestamp: number): string => {
+  // 如果没有传入时间戳，则使用当前时间
+  if (!timestamp) {
+    timestamp = Date.now() / 1000; // 使用秒级时间戳保持一致性
+  }
+
+  const date = new Date(timestamp * 1000);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
+  const day = String(date.getDate()).padStart(2, '0'); // 补零
+
+  return `${month}月${day}日`;
+};
+
+const emit = defineEmits(['filter-change', 'handle-task']);
+
+// 日期选择器的值
+const datePickerValue = ref(null);
+
+// 平台配置
+const platformConfig = {
+  icons: {
+    0: iconDy,
+    1: iconXhs,
+    2: iconBilibili,
+    3: iconKs,
+    4: iconSph,
+    5: iconWb,
+    6: iconGzh,
+  },
+};
+
+// 获取平台图标
+const getPlatformIcon = (platform: number) => platformConfig.icons[platform] || iconWarn;
+
+// 根据任务类型获取颜色
+const getTaskColor = () => {
+  if (!props.task) return '#000';
+
+  // 根据colorTip.vue中的颜色定义设置不同状态的颜色
+  switch (props.task.status) {
+    case 0: // 待生成
+      return '#ffae00';
+    case 1: // 待发布
+      return '#6d4cfe';
+    case 2: // 已发布
+      return '#939499';
+    case 3: // 发布失败
+      return '#f64b31';
+    default:
+      return props.task.color || '#939499';
+  }
+};
+
+const getTaskStatusText = (status) => {
+  console.log('任务状态:', status);
+  switch (status) {
+    case 0:
+      return '待生成';
+    case 1:
+      return '待发布';
+    case 2:
+      return '已发布';
+    case 3:
+      return '发布失败';
+    default:
+      return '未知状态';
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.task-item {
+  width: 100%;
+  font-size: 12px;
+  height: 19px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.color-indicator {
+  width: 4px;
+  height: 18px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.task-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  width: 0;
+}
+
+.popup-content {
+  width: 388px;
+  background-color: #fff;
+  box-shadow: #e6e6e8 0px 2px 8px;
+  border-radius: 4px;
+}
+
+.title-container {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-title {
+  font-size: 16px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.task-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+  flex: 1;
+  min-width: 0;
+  width: 365px;
+  margin-top: -10px;
+  margin-bottom: 12px;
+  padding: 0 16px;
+}
+
+.status-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.opt-btn {
+  width: 154px;
+  height: 32px;
+  font-size: 14px;
+  background: #f2f3f5;
+  border: none;
+  border-radius: 4px;
+}
+
+.opt-right {
+  background: linear-gradient(90deg, #fbf9ff 0%, #f3fafe 100%);
+  color: #9a56ba;
+}
+
+.AILoding {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 356px;
+  height: 108px;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #fbf9ff 0%, #f3fafe 100%);
+  color: linear-gradient(90deg, #9a56ba 0%, #576fd1 100%);
+  margin-left: 16px;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 12px;
+  leading-trim: NONE;
+  line-height: 20px;
+  letter-spacing: 0%;
+  text-align: center;
+}
+</style>
diff --git a/src/views/property-marketing/assignment-management/index.vue b/src/views/property-marketing/assignment-management/index.vue
index 5746a4b..7238362 100644
--- a/src/views/property-marketing/assignment-management/index.vue
+++ b/src/views/property-marketing/assignment-management/index.vue
@@ -1,308 +1,97 @@
 <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">
-        <a-trigger
-          trigger="click"
-          style="
-            background-color: #ffffff;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            box-shadow: #00000010 0px 2px 8px;
-            width: 120px;
-            height: 64px;
-            padding: 8px;
-            margin-top: 8px;
-          "
-        >
-          <a-button size="small" class="mr-12px color-scheme-btn" :bordered="false">
-            <template #icon>
-              <icon-info-circle-fill size="16" class="color-#55585F" />
-            </template>
-            <template #default>颜色示意</template>
-          </a-button>
-          <template #content>
-            <div class="flex items-center mb-8px">
-              <div
-                style="background-color: #6d4cfe; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"
-              ></div>
-              <div>选题</div>
-            </div>
-            <div class="flex items-center">
-              <div
-                style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"
-              ></div>
-              <div>内容稿件</div>
-            </div>
-          </template>
-        </a-trigger>
-
-        <a-trigger
-          trigger="click"
-          style="
-            background-color: #ffffff;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            box-shadow: #00000010 0px 2px 8px;
-            width: 308px;
-            max-height: 400px;
-            overflow-y: auto;
-            padding: 24px;
-            margin-top: 8px;
-          "
-        >
-          <a-button size="small">
-            <template #icon>
-              <icon-filter size="16" class="color-#55585F" />
-            </template>
-            <template #default>筛选</template>
-          </a-button>
-          <template #content>
-            <div>
-              <div class="flex items-center mb-24px">
-                <div class="w-70px">运营人员</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    placeholder="请选择运营人员"
-                    :options="operators"
-                    v-model="query.operator"
-                    @change="
-                      (val) => {
-                        handleFilterChange('operator_id', val, operators);
-                      }
-                    "
-                    class="!w-200px"
-                  />
-                </a-space>
-              </div>
-              <div class="flex items-center mb-24px">
-                <div class="w-70px">发布平台</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    :options="platformOptions"
-                    v-model="query.platform"
-                    @change="
-                      (val) => {
-                        handleFilterChange('platform', val, platformOptions);
-                      }
-                    "
-                    class="!w-200px"
-                    placeholder="请选择发布平台"
-                  />
-                </a-space>
-              </div>
-              <div class="flex items-center">
-                <div class="w-80px">账号名称</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    v-model="query.accounts"
-                    :options="accountList"
-                    :multiple="true"
-                    @change="
-                      (val) => {
-                        handleFilterChange('account_id', val, accountList);
-                      }
-                    "
-                    class="!w-200px"
-                    placeholder="请选择账号名称"
-                  />
-                </a-space>
-              </div>
-            </div>
-          </template>
-        </a-trigger>
+        <colorTip />
+        <FilterPopup
+          :operators="operators"
+          :platformOptions="platformOptions"
+          :accountList="accountList"
+          :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"
+          @cell-click="handleCellClick"
         >
-          <!-- 表头插槽：用于自定义日期列的表头样式 -->
+          <!-- 空数据显示 -->
           <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">
+                  <div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
                     还有{{ 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 w-160px p-12px rounded-4px flex flex-col more-content">
+                      <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"
@@ -319,259 +108,117 @@
       </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>
+  <DrowPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
-import type { TableColumnData } from '@arco-design/web-vue';
-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 { ref, reactive, onMounted, computed, inject } from 'vue';
+import type { ColumnProps } from 'ant-design-vue/es/table';
 import router from '@/router';
-
-const {
-  dataSource,
-  pageInfo,
-  rowSelection,
-  onPageChange,
-  onPageSizeChange,
-  resetPageInfo,
-  selectedRowKeys,
-  selectedRows,
-  handleSelectAll,
-  DEFAULT_PAGE_INFO,
-} = useTableSelectionWithPagination({
-  onPageChange: () => {
-    query.page = pageInfo.page;
-    query.page_size = pageInfo.page_size;
-    handleSearch();
-  },
-  onPageSizeChange: () => {
-    query.page = pageInfo.page;
-    query.page_size = pageInfo.page_size;
-    handleSearch();
-  },
+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';
+import DrowPopup from './components/draw-popup.vue';
+import TaskItem from './components/task-item.vue';
+// API引入
+import {
+  getTaskSchedules,
+  delTaskSchedules,
+  editTaskSchedulesTime,
+  createTask,
+  generateContent,
+} 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';
+import { message } 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<TableColumnData[]>([]);
+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';
-};
-
-// 格式化任务名称
-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');
-
-  return `${hours}:${minutes}`;
-};
-
-// 处理表格数据，使其与动态表头匹配
+// 处理表格数据
 const processTableData = (apiData: any[]) => {
   const processedData: any[] = [];
-  // 处理每条账号数据
+  const dateHeaders = currentDateHeaders.value;
+
   apiData.forEach((account) => {
     const rowData: any = {
       id: account.id,
@@ -579,23 +226,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)) {
-          rowData[taskDay].push({
-            id: task.id,
-            name: task.name,
-            type: task.type,
-            execution_time: task.execution_time,
-          });
+        if (dateHeaders.includes(taskDay)) {
+          rowData[taskDay].push(task);
         }
       });
     }
@@ -606,32 +246,25 @@ 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];
+// 创建任务
+const handleAddTask = () => {
+  console.log('handleAddTask');
+  drawerPopupRef.value?.showDrawer();
+};
+
+const handleCreateTask = async (value) => {
+  const res = await createTask(value);
+  if (res && res.code === 200) {
+    message.success('创建成功');
+    handleSearch();
   }
 };
 
-// 设置table的头部
-const setTableSpecific = () => {
+// 添加对DrowPopup组件的引用
+const drawerPopupRef = ref();
+
+// 设置表格列
+const setTableColumns = () => {
   columns.value = [
     {
       title: '账号与发布平台',
@@ -639,251 +272,259 @@ 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: string, value: any, options?: any[]) => {
-  console.log(`筛选项 ${field} 发生变化:`, value);
-  // 根据不同的筛选字段执行不同的操作
-  switch (field) {
-    case 'operator_id':
-      console.log('运营人员选择:', value, typeof value, Array.isArray(value), options);
-      // 查找选中的运营人员完整信息
-      if (options && value) {
-        if (Array.isArray(value)) {
-          // 多选情况
-          const selectedOperators = options.filter((op) => value.includes(op.name)).map((op) => op.value);
-          query.operator_ids = selectedOperators;
-        }
-      } else {
-        query.operator_ids = [];
-      }
-      console.log('选中的运营人员完整信息(多选):', query.operator_ids);
-      handleSearch();
-      break;
-    case 'account_id':
-      // 查找选中的账号完整信息
-      if (options && value !== undefined && value !== '') {
-        if (Array.isArray(value)) {
-          console.log(options, value);
-          // 多选情况
-          const selectedAccounts = options.filter((op: any) => value.includes(op.name));
-          query.ids = selectedAccounts.map((account: any) => account.value);
-        }
-      } else {
-        query.ids = [];
-      }
-      console.log('选中的账号完整信息(单选):', query.ids);
-      handleSearch();
-      break;
-    case 'platform':
-      // 查找选中的平台完整信息
-      if (options && value !== undefined && value !== '') {
-        console.log(options, value);
-        if (Array.isArray(value)) {
-          // 多选情况
-          const selectedPlatforms = options.filter((op: any) => value.includes(op.id));
-          query.platforms = selectedPlatforms.map((account: any) => account.id);
-        }
-      } else {
-        query.platforms = [];
-      }
-      console.log('发布平台选择:', query.platforms);
-      handleSearch();
-      break;
-    default:
-      console.log('未知筛选字段:', field, value);
-  }
-};
-
-// 获取数据
+// 数据获取
 const handleSearch = () => {
-  console.log('handleSearch查询参数:', query);
-  query.page = pageInfo.page;
-  query.page_size = pageInfo.page_size;
+  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);
+        if (apiData) {
+          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 handleCellClick = (record: any, rowIndex: any, column: any) => {
+  const accountInfo = {
+    id: record.id,
+    name: record.name,
+    platform: record.platform,
+  };
+  const selectedDate = rowIndex.date;
+
+  // 检查选中的日期是否小于今天，如果是则不处理
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const selectedDateTime = new Date(selectedDate);
+  selectedDateTime.setHours(0, 0, 0, 0);
+
+  if (selectedDateTime < today) {
+    console.log('选择的日期已过去，不打开抽屉');
+    return;
+  }
+
+  console.log('selectedDate', selectedDate);
+  drawerPopupRef.value.showDrawer(accountInfo, selectedDate);
+};
+
+// 任务操作处理
+const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
+  console.log('handleTaskAction', action, task, args);
+  switch (action) {
+    case 'delete':
+      currentTask.value = task;
+      deleteTitle.value = task.type === 1 ? '删除内容稿件排期' : '删除选题排期';
+      deleteContent.value = `确认删除“${task.name || 'AI生成内容'}”吗？`;
+      showModal.value = true;
+      break;
+    case 'edit-time':
+      console.log('handleTaskAction edit-time', task, args);
+      editTaskSchedulesTime(task.id, { execution_time: args[0] }).then((res) => {
+        if (res.code === 200) {
+          message.success(res.message);
+          handleSearch();
+        }
+      });
+      break;
+    case 'goto-detail':
+      router.push(`/media-account/management-detail/${task.id}`);
+      break;
+    case 'ai-create':
+      const res = await generateContent(task.id);
+      if (res.code === 200) {
+        message.success(res.message);
+      }
+      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();
@@ -894,56 +535,31 @@ const getOperators = async () => {
       }));
     }
   } 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),
       }));
     }
-  } 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();
@@ -951,17 +567,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;
@@ -990,37 +595,54 @@ onMounted(() => {
   justify-content: center;
 }
 
-/* 周末列背景色 */
+/* 周末列样式 */
 :deep(.weekend-column) {
   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;
 }
 
-.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(th.today-column) .arco-table-th-item-title {
+  color: #6d4cfe !important;
+}
+
+/* 只对 td 单元格应用样式，避免影响表头 */
+:deep(td .arco-table-cell) {
+  padding: 0px !important;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  height: 42px;
+}
+
+:deep(td.today-column) .arco-table-cell-wrap {
+  color: white !important;
+}
+
+/* 抽屉左侧圆角样式 */
+:deep(.rounded-left .ant-drawer-content) {
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
+}
+
+/* 任务弹出框样式 */
+:deep(.task-popup-content) {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* 分页样式 */
 .pagination-box {
   display: flex;
   width: 100%;
@@ -1028,4 +650,18 @@ onMounted(() => {
   justify-content: flex-end;
   align-items: center;
 }
+
+/* 下拉框样式优化 */
+:deep(.arco-dropdown-open .arco-icon-down) {
+  transform: rotate(180deg);
+  transition: transform 0.2s ease;
+}
+
+.more-content {
+  border-radius: 8px;
+  background: #fff;
+
+  /* Shadow 2 */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index 1f3617c..aec5f68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8936,6 +8936,11 @@ vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1, vue-eslint-parser@^9.1.0, vu
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-lazyload@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-3.0.0.tgz"
+  integrity sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==
+
 vue-router@^4.4.0:
   version "4.5.1"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz"