Merge pull request 'test_任务管理v2' (#57) from test_任务管理v2 into main

Reviewed-on: ai-team/lingji-work-fe#57

src/styles/components/ant-button.scss

@@ -32,6 +32,10 @@
       border-color: #e6e6e8 !important;
       color: #737478 !important;
     }
+    &:active {
+      border-color: #D7D7D9 !important;
+      color: #211F24 !important;
+    }
   }
   &.ant-btn-dangerous {
     border-color: $color-error !important;

src/styles/components/ant-dropdown.scss

@@ -0,0 +1,28 @@
+.ant-dropdown {
+  .ant-dropdown-menu {
+    padding: 4px 0;
+    border-radius: 4px;
+    border: 1px solid var(--Border-1, #d7d7d9);
+    background: var(--BG-White, #fff);
+
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+  .ant-dropdown-menu-item {
+    height: 36px;
+    padding: 0 12px !important;
+    .ant-dropdown-menu-title-content {
+      color: var(--Text-1, #211f24);
+
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.active {
+      .ant-dropdown-menu-title-content {
+        color: $color-primary;
+      }
+    }
+  }
+}

src/styles/components/index.scss

@@ -17,3 +17,4 @@
 @import "./ant-spin.scss";
 @import "./ant-drawer.scss";
 @import "./ant-pagination.scss";
+@import "./ant-dropdown.scss";

src/views/property-marketing/assignment-management/components/date-selector.vue

@@ -30,34 +30,43 @@
 
     <!-- 日期导航按钮 -->
     <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 class="mr-4px prv-btn" @click="navigate(-1)" type="text" size="small">
+        <template #icon>
+          <SvgIcon name="xt-left" size="20" class="color-#737478" />
+        </template>
       </a-button>
       <a-button
         @click="navigateToToday"
         type="text"
-        style="background-color: #f7f8fa !important; color: #211f24 !important; height: 28px"
+        style="color: #211f24 !important"
+        size="small"
+        class="!bg-#f7f8fa !hover:bg-#E6E6E8"
         >今天</a-button
       >
-      <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
-        <template #icon><icon-right /></template>
+      <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text" size="small">
+        <template #icon>
+          <SvgIcon name="xt-right" size="20" class="color-#737478" />
+        </template>
       </a-button>
     </div>
 
     <!-- 维度切换下拉框 -->
-    <div class="flex items-center">
+    <div class="flex items-center ml-12px">
       <a-dropdown
         position="bottom"
         @select="handleTypeChange"
         class="w-80px"
-        :popupVisible="dropdownVisible"
-        @popupVisibleChange="handleDropdownVisibleChange"
+        :open="dropdownVisible"
+        @openChange="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>
+        <a-button type="text" class="prv-today !bg-#f7f8fa !hover:bg-#E6E6E8 !px-12px">
+          <span>{{ choseType }} </span>
+          <SvgIcon name="xt-down" size="14" class="color-#737478" />
+        </a-button>
+        <template #overlay>
+          <a-menu @click="handleTypeChange">
+            <a-menu-item  v-for="item in DAYS" :key="item" :class="choseType === item ? 'active' : ''"> {{ item }} </a-menu-item>
+          </a-menu>
         </template>
       </a-dropdown>
     </div>
@@ -67,6 +76,7 @@
 <script lang="ts" setup>
 import { ref, watch, defineProps, defineEmits, withDefaults, computed } from 'vue';
 import DateUtils from '@/utils/DateUtils';
+import { DownOutlined } from '@ant-design/icons-vue';
 
 // 1. 定义Props：接收父组件初始日期配置
 interface Props {
@@ -78,6 +88,8 @@ interface Props {
   };
 }
 
+const DAYS = ['日','周','月'];
+
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
 });
@@ -144,8 +156,10 @@ const getDateRange = (): { start: string; end: string } => {
 };
 
 // 5. 维度切换处理（日/周/月）
-const handleTypeChange = (val: '日' | '周' | '月') => {
-  choseType.value = val;
+const handleTypeChange = (val) => {
+  const { key } = val;
+
+  choseType.value = key;
   // 切换维度时默认选中当天对应的维度日期
   const today = new Date();
   currentDate.value = today;
@@ -252,17 +266,16 @@ setTimeout(() => {
 }, 0);
 </script>
 
-<style scoped>
-.arco-dropdown-open .arco-icon-down {
-  transform: rotate(180deg);
-  transition: transform 0.2s ease;
-}
+<style scoped lang="scss">
 .prv-btn {
   background-color: #f7f8fa !important; /* 使用正确的6位十六进制颜色值 */
   width: 28px;
   height: 28px;
   border-radius: 4px;
   color: #211f24 !important;
+  &:hover {
+    background-color: var(--BG-300, #e6e6e8) !important;
+  }
 }
 .doption {
   width: 78px !important;
@@ -270,10 +283,23 @@ setTimeout(() => {
 .prv-today {
   color: #211f24 !important;
   width: 80px !important;
-  background-color: #f7f8fa !important;
+  // background-color: #f7f8fa !important;
   height: 28px;
-  margin-left: 4px;
   display: flex;
   justify-content: space-between;
+  border-color: $color-primary !important;
+  &:hover {
+    border-color: $color-primary !important;
+    color: #211f24 !important;
+  }
+}
+
+.ant-dropdown-trigger {
+  &.ant-dropdown-open {
+    .svg-icon {
+      transform: rotate(180deg);
+      transition: transform 0.2s ease;
+    }
+  }
 }
 </style>

src/views/property-marketing/assignment-management/components/draw-popup.vue

@@ -73,18 +73,39 @@
                 <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"
+                  class="relative flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
+                  @mouseenter="item.showDelete = true"
+                  @mouseleave="item.showDelete = false"
                 >
-                  {{ 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"
+                  {{ item.name || item.title || item }}
+                  <SvgIcon
+                    name="xt-close"
+                    size="14"
+                    @click="handleDeleteText(item)"
+                    v-show="item.showDelete"
+                    class="absolute top-8px right-8px w-20px h-20px cursor-pointer bg-#737478 rounded-4px p-2px color-#FFFFFF"
                   />
                 </div>
+                <div class="w-full">
+                  <div class="grid grid-cols-4 gap-8px w-full">
+                    <div
+                      v-for="(item, index) in selectedMaterials.images"
+                      :key="item.id"
+                      class="relative w-88px h-88px"
+                      @mouseenter="item.showDelete = true"
+                      @mouseleave="item.showDelete = false"
+                    >
+                      <img :src="item.cover" class="w-full h-full rounded-8px" />
+                      <SvgIcon
+                        name="xt-close"
+                        size="14"
+                        @click="handleDeleteImage(item.id)"
+                        v-show="item.showDelete"
+                        class="absolute top--8px right--8px w-16px h-16px cursor-pointer bg-#737478 rounded-50% p-2px color-#FFFFFF"
+                      />
+                    </div>
+                  </div>
+                </div>
               </div>
               <div v-else class="flex flex-col items-center">
                 <p class="material-hint">AI会参考添加的文本、图片、视频等素材，完成符合需求的创作</p>
@@ -118,7 +139,7 @@
                   />
                 </div>
                 <div class="mb-12px" v-if="selectedProducts.data.length > 0">{{ selectedProducts.data[0].title }}</div>
-                <div class="mb-12px color-#939499" v-if="selectedProducts.data.length > 0">
+                <div class="mb-12px color-#939499 line-clamp-2" v-if="selectedProducts.data.length > 0">
                   {{ selectedProducts.data[0].content }}
                 </div>
                 <div v-for="item in selectedProducts.images" :key="item.id">
@@ -200,7 +221,7 @@
 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 { SwapOutlined, DeleteOutlined, CloseOutlined } 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';
@@ -369,6 +390,30 @@ const handleDelte = () => {
     images: [],
   };
 };
+
+// 删除文本项
+const handleDeleteText = (id) => {
+  selectedMaterials.value.texts = selectedMaterials.value.texts.filter((item) => item !== id);
+  selectedMaterials.value.keys = selectedMaterials.value.keys.filter((key) => key !== id);
+
+  // 更新hasChoseMaterial状态
+  updateHasChoseMaterial();
+};
+
+// 删除图片项
+const handleDeleteImage = (id) => {
+  selectedMaterials.value.images = selectedMaterials.value.images.filter((item) => item.id !== id);
+  selectedMaterials.value.keys = selectedMaterials.value.keys.filter((key) => key !== id);
+
+  // 更新hasChoseMaterial状态
+  updateHasChoseMaterial();
+};
+
+// 更新hasChoseMaterial状态
+const updateHasChoseMaterial = () => {
+  hasChoseMaterial.value = selectedMaterials.value.texts.length > 0 || selectedMaterials.value.images.length > 0;
+};
+
 // 处理原料库选择确认
 const handleMaterialConfirm = (result) => {
   console.log('handleMaterialConfirm', result);
@@ -379,6 +424,28 @@ const handleMaterialConfirm = (result) => {
     images: result.choseImgArray,
     texts: result.selectedTexts || [],
   };
+
+  // 为每个文本项添加showDelete属性（如果它们是对象）
+  if (selectedMaterials.value.texts.length > 0 && typeof selectedMaterials.value.texts[0] === 'object') {
+    selectedMaterials.value.texts = selectedMaterials.value.texts.map((text) => ({
+      ...text,
+      showDelete: false,
+    }));
+  } else {
+    // 如果是字符串，则包装成对象
+    selectedMaterials.value.texts = selectedMaterials.value.texts.map((text, index) => ({
+      id: `text_${index}`,
+      name: text,
+      showDelete: false,
+    }));
+  }
+
+  // 为每个图片项添加showDelete属性
+  selectedMaterials.value.images = selectedMaterials.value.images.map((image) => ({
+    ...image,
+    showDelete: false,
+  }));
+
   hasChoseMaterial.value = result.selectedKeys.length > 0;
 };
 
@@ -401,7 +468,7 @@ const handleProductConfirm = async (result) => {
     hasChoseFinishedProducts.value = true;
     // 取第一个选中的项目
     const selectedProduct = result.selectedRows[0];
-    
+
     // 获取成品详情
     try {
       const res = await getWorkDetail(selectedProduct.id);
@@ -411,7 +478,7 @@ const handleProductConfirm = async (result) => {
           keys: [workDetail.id],
           data: [workDetail],
           text: workDetail.title || '1个稿件',
-          images: workDetail.files ? workDetail.files.filter(f => f.type === 0) : [], // 图片文件
+          images: workDetail.files ? workDetail.files.filter((f) => f.type === 0) : [], // 图片文件
         };
       }
     } catch (error) {
@@ -493,7 +560,7 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
   if (accountInfo && accountInfo.id) {
     nextTick(() => {
       // 查找账号列表中匹配的账号，包含平台信息和图标
-      const matchedAccount = accountList.value.find(account => account.value === accountInfo.id);
+      const matchedAccount = accountList.value.find((account) => account.value === accountInfo.id);
       if (matchedAccount) {
         localQuery.value.accounts = [matchedAccount.name];
         localQuery.value.ids = [accountInfo.id];
@@ -505,20 +572,24 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
           localQuery.value.ids = [accountInfo.id];
         } else {
           // 账号列表尚未加载，等待加载完成后再设置
-          const unwatch = watch(accountList, (newAccountList) => {
-            if (newAccountList.length > 0) {
-              const matched = newAccountList.find(account => account.value === accountInfo.id);
-              if (matched) {
-                localQuery.value.accounts = [matched.name];
-                localQuery.value.ids = [accountInfo.id];
-              } else {
-                localQuery.value.accounts = [`${accountInfo.name}(${getPlatformName(accountInfo.platform)})`];
-                localQuery.value.ids = [accountInfo.id];
+          const unwatch = watch(
+            accountList,
+            (newAccountList) => {
+              if (newAccountList.length > 0) {
+                const matched = newAccountList.find((account) => account.value === accountInfo.id);
+                if (matched) {
+                  localQuery.value.accounts = [matched.name];
+                  localQuery.value.ids = [accountInfo.id];
+                } else {
+                  localQuery.value.accounts = [`${accountInfo.name}(${getPlatformName(accountInfo.platform)})`];
+                  localQuery.value.ids = [accountInfo.id];
+                }
+                // 取消监听
+                unwatch();
               }
-              // 取消监听
-              unwatch();
-            }
-          }, { immediate: true });
+            },
+            { immediate: true },
+          );
         }
       }
     });
@@ -535,7 +606,7 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
 const fillTaskData = async (taskData) => {
   // 如果传入的数据包含完整信息，则直接使用，否则获取详情
   let fullTaskData = taskData;
-  
+
   // 如果没有work或raw_materials等详细信息，则需要获取完整详情
   if ((!taskData.work && !taskData.raw_materials) || taskData.id) {
     try {
@@ -547,7 +618,7 @@ const fillTaskData = async (taskData) => {
       console.error('获取任务详情失败:', error);
     }
   }
-  
+
   // 设置账号信息
   if (fullTaskData.media_account) {
     nextTick(() => {
@@ -555,15 +626,15 @@ const fillTaskData = async (taskData) => {
       localQuery.value.ids = [fullTaskData.media_account.id];
     });
   }
-  
+
   // 设置AI生成或成品库选择
   isActive.value = fullTaskData.is_ai_generate ? 'ai' : 'chose';
-  
+
   // 设置任务描述（AI生成时）
   if (fullTaskData.is_ai_generate && fullTaskData.ai_prompt) {
     taskDescription.value = fullTaskData.ai_prompt;
   }
-  
+
   // 设置发布时间
   if (fullTaskData.publish_type === 1 && fullTaskData.execution_time) {
     // 定时发布
@@ -575,20 +646,20 @@ const fillTaskData = async (taskData) => {
     // 立即发布
     publishType.value = 'immediate';
   }
-  
+
   // 设置选中的素材（AI生成时）
   if (fullTaskData.is_ai_generate && fullTaskData.raw_materials && fullTaskData.raw_materials.length > 0) {
     const materials = fullTaskData.raw_materials;
     selectedMaterials.value = {
-      keys: materials.map(m => m.id),
+      keys: materials.map((m) => m.id),
       data: materials,
       text: '',
-      images: materials.filter(m => m.type === 0), // 图片
-      texts: materials.filter(m => m.type === 2),  // 文本
+      images: materials.filter((m) => m.type === 0), // 图片
+      texts: materials.filter((m) => m.type === 2), // 文本
     };
     hasChoseMaterial.value = materials.length > 0;
   }
-  
+
   // 设置选中的成品（成品库选择时）
   if (!fullTaskData.is_ai_generate && fullTaskData.work) {
     const work = fullTaskData.work;
@@ -596,7 +667,7 @@ const fillTaskData = async (taskData) => {
       keys: [work.id],
       data: [work],
       text: work.title || '1个稿件',
-      images: work.files ? work.files.filter(f => f.type === 0) : [], // 图片文件
+      images: work.files ? work.files.filter((f) => f.type === 0) : [], // 图片文件
     };
     hasChoseFinishedProducts.value = true;
   }

src/views/property-marketing/assignment-management/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex-column justify-between bg-#fff rounded-8px p-24px">
+  <div class="flex flex-col justify-between bg-white rounded-8px p-24px">
     <!-- 日期选择器和筛选区域 -->
-    <div class="flex justify-between items-start w-full">
+    <div class="flex justify-between items-start w-full mb-24px">
       <DateSelector v-model="dateSelectorModel" @date-change="handleDateSelectorChange" />
-      <div class="flex items-start">
-        <colorTip />
+      <div class="flex items-start gap-12px">
+        <ColorTip />
         <FilterPopup
           :operators="operators"
           :platformOptions="platformOptions"
@@ -12,82 +12,76 @@
           :query="query"
           @filter-change="handleFilterChange"
         />
-        <Button type="primary" class="w-112px" size="middle" @click="handleAddTask">
-          <template #default>创建任务</template>
-        </Button>
+        <a-button type="primary" class="w-112px" size="middle" @click="handleAddTask"> 创建任务 </a-button>
       </div>
     </div>
 
     <!-- 表格内容区域 -->
-    <div class="flex justify-between items-start w-full">
-      <div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
+    <div class="flex-1 w-full">
+      <div class="flex flex-col" style="width: 100%; overflow-x: auto">
         <a-table
           :columns="columns"
-          :data="data"
-          :bordered="{ cell: true }"
+          :data-source="data"
+          :bordered="true"
           :scroll="{ x: 'max-content' }"
-          style="width: 100%"
           :pagination="false"
+          :locale="{ emptyText: emptyText }"
           @change="handleTableChange"
-          @cell-click="handleCellClick"
         >
-          <!-- 空数据显示 -->
-          <template #empty>
-            <div class="flex flex-col items-center justify-center" style="min-height: 400px">
-              <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 justify-start">
-              <img
-                :src="getPlatformIcon(record.platform)"
-                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
-                :alt="getPlatformName(record.platform)"
-              />
-              {{ record.name || '-' }}
-            </div>
-          </template>
-
-          <!-- 动态日期单元格 -->
-          <template #dateCell="{ record, column }">
-            <div v-if="record[column.dataIndex]?.length" class="task-container">
-              <!-- 任务数量≥3时显示更多 -->
-              <div v-if="record[column.dataIndex].length >= 3" class="task-more">
-                <TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
-                <a-trigger trigger="click" position="br">
-                  <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="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>
-              <!-- 任务数量<3时直接显示 -->
-              <div v-else>
-                <TaskItem
-                  v-for="task in record[column.dataIndex]"
-                  :key="task.id"
-                  :task="task"
-                  :record="record"
-                  @handle-task="handleTaskAction"
+          <template #bodyCell="{ column, record, index }">
+            <!-- 账号名称列 -->
+            <template v-if="column.dataIndex === 'name'">
+              <div class="flex items-center justify-start color-#211F24">
+                <img
+                  :src="getPlatformIcon(record.platform)"
+                  class="w-16px h-16px mr-8px rounded-4px"
+                  :alt="getPlatformName(record.platform)"
                 />
+                {{ record.name || '-' }}
               </div>
-            </div>
-            <div v-else class="no-task"></div>
+            </template>
+
+            <!-- 动态日期单元格 -->
+            <template v-else-if="column.dataIndex === 'dateCell'">
+              <div
+                v-if="record[column.dataIndex]?.length"
+                class="task-container"
+                @click="handleCellClick(record, column)"
+              >
+                <!-- 任务数量≥3时显示更多 -->
+                <div v-if="record[column.dataIndex].length >= 3" class="task-more">
+                  <TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
+                  <a-popover trigger="click" placement="bottomRight">
+                    <template #content>
+                      <div class="bg-white w-160px p-12px rounded-4px flex flex-col more-content">
+                        <TaskItem
+                          v-for="task in record[column.dataIndex].slice(1)"
+                          :key="task.id"
+                          :task="task"
+                          :record="record"
+                          @handle-task="handleTaskAction"
+                        />
+                      </div>
+                    </template>
+                    <div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
+                      还有{{ record[column.dataIndex].length - 1 }}项
+                    </div>
+                  </a-popover>
+                </div>
+                <!-- 任务数量<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" @click="handleCellClick(record, column)"></div>
+            </template>
           </template>
         </a-table>
 
@@ -95,38 +89,48 @@
         <div v-if="pageInfo.total > 0" class="pagination-box">
           <a-pagination
             :total="pageInfo.total"
-            size="mini"
+            size="small"
             show-total
             show-jumper
-            show-page-size
+            show-size-changer
             :current="pageInfo.page"
             :page-size="pageInfo.page_size"
-            @change="onPageChange"
-            @page-size-change="onPageSizeChange"
+            @change="handlePageChange"
+            @showSizeChange="handlePageSizeChange"
           />
         </div>
       </div>
     </div>
   </div>
+
   <!-- 删除确认弹窗 -->
-  <a-modal v-model:visible="showModal" @ok="handleDeleteConfirm" @cancel="showModal = false" ok-text="确认删除">
-    <template #title>{{ deleteTitle }}</template>
+  <a-modal
+    v-model:open="showModal"
+    @ok="handleDeleteConfirm"
+    @cancel="showModal = false"
+    ok-text="确认删除"
+    :title="deleteTitle"
+  >
     <div>{{ deleteContent }}</div>
   </a-modal>
-  <DrowPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
+
+  <DrawPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed, inject } from 'vue';
-import type { ColumnProps } from 'ant-design-vue/es/table';
+import { ref, reactive, onMounted, computed, nextTick, h } from 'vue';
+import { Table, Button, Popover, Pagination, Modal, notification, message } from 'ant-design-vue';
+import type { TableProps } from 'ant-design-vue';
 import router from '@/router';
 import DateUtils from '@/utils/DateUtils';
+
 // 组件引入
 import DateSelector from './components/date-selector.vue';
-import colorTip from './components/colorTip.vue';
+import ColorTip from './components/colorTip.vue';
 import FilterPopup from './components/filter-popup.vue';
-import DrowPopup from './components/draw-popup.vue';
+import DrawPopup from './components/draw-popup.vue';
 import TaskItem from './components/task-item.vue';
+
 // API引入
 import {
   getTaskSchedules,
@@ -136,8 +140,10 @@ import {
   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';
 // 平台图标
@@ -149,8 +155,7 @@ 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(),
@@ -164,7 +169,8 @@ const dateSelectorModel = ref({
   weekModel: new Date(),
   monthModel: new Date(),
 });
-const columns = ref<ColumnProps[]>([]);
+
+const columns = ref<TableProps['columns']>([]);
 const data = ref<any[]>([]);
 const operators = ref([]);
 const accountList = ref([]);
@@ -172,6 +178,17 @@ const showModal = ref(false);
 const currentTask = ref<any>(null);
 const deleteTitle = ref('');
 const deleteContent = ref('');
+const drawerPopupRef = ref();
+
+// 空状态显示
+const emptyText = () => {
+  return h('div', { class: 'flex flex-col items-center justify-center', style: { minHeight: '600px' } }, [
+    h('img', { src: emptyIcon, class: 'img mt-20px', alt: '暂无数据', width: 106, height: 72 }),
+    h('div', { class: 'text mt-36px' }, '暂无数据'),
+    h('div', { class: 'mt-12px mb-12px' }, '可通过账号管理添加账号，进行任务排期管理'),
+    h(Button, { type: 'primary', onClick: handleAddAccount }, '去添加'),
+  ]);
+};
 
 // 获取当前周的日期范围
 const getCurrentWeekRange = () => {
@@ -186,7 +203,7 @@ const query = reactive({
   platforms: undefined,
   operator_ids: undefined,
   ids: [],
-  execution_time: getCurrentWeekRange(), // 设置默认值为当前周
+  execution_time: getCurrentWeekRange(),
   top_execution_time: undefined,
 });
 
@@ -204,6 +221,7 @@ const platformConfig = {
     { id: 6, name: '公众号', icon: iconGzh },
   ],
 };
+
 const platformOptions = ref(platformConfig.options);
 
 // 工具函数
@@ -230,6 +248,7 @@ const processTableData = (apiData: any[]) => {
     dateHeaders.forEach((day) => {
       rowData[day] = [];
     });
+
     // 分配任务到对应日期列
     if (account.task_schedules?.length) {
       account.task_schedules.forEach((task: any) => {
@@ -246,34 +265,19 @@ const processTableData = (apiData: any[]) => {
   return processedData;
 };
 
-// 创建任务
-const handleAddTask = () => {
-  drawerPopupRef.value?.showDrawer();
-};
-
-const handleCreateTask = async (value) => {
-  const res = await createTask(value);
-  if (res && res.code === 200) {
-    message.success('创建成功');
-    handleSearch();
-  }
-};
-
-// 添加对DrowPopup组件的引用
-const drawerPopupRef = ref();
-
 // 设置表格列
 const setTableColumns = () => {
-  columns.value = [
+  const baseColumns: TableProps['columns'] = [
     {
       title: '账号与发布平台',
-      slotName: 'name',
+      dataIndex: 'name',
+      key: 'name',
       width: 150,
       ellipsis: true,
-      tooltip: true,
-      fixed: 'left', // 固定列
+      fixed: 'left',
     },
   ];
+
   let dateHeaders: any[] = [];
   const { choseType } = dateSelectorModel.value;
 
@@ -306,46 +310,95 @@ const setTableColumns = () => {
   // 添加日期列
   dateHeaders.forEach((item) => {
     const isWeekend = item.date?.getDay() === 0 || item.date?.getDay() === 6;
-    // 确保item.date存在再进行判断
     const todayFlag = item.date ? isToday(item.date) : false;
 
-    // 调试信息
-    if (todayFlag) {
-      console.log('Today column detected:', item);
-      console.log('Today flag value:', todayFlag);
-    }
-
-    const columnConfig = {
-      title: `${item.weekday}`,
-      dataIndex: item.day,
-      slotName: 'dateCell',
-      date: item.date,
+    const columnConfig: any = {
+      title: item.weekday,
+      dataIndex: item.day.toString(),
+      key: item.day.toString(),
       width: 135,
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-        sorter: true,
+      sorter: true,
+      customRender: ({ text, record, index }) => {
+        if (!text || !text.length) {
+          return h('div', { class: 'no-task' });
+        }
+
+        if (text.length >= 3) {
+          return h('div', { class: 'task-more' }, [
+            h(TaskItem, {
+              task: text[0],
+              record: record,
+              onHandleTask: handleTaskAction,
+            }),
+            h(
+              Popover,
+              {
+                trigger: 'click',
+                placement: 'bottomRight',
+              },
+              {
+                content: () =>
+                  h(
+                    'div',
+                    { class: 'more-content' },
+                    text.slice(1).map((task) =>
+                      h(TaskItem, {
+                        task: task,
+                        record: record,
+                        onHandleTask: handleTaskAction,
+                      }),
+                    ),
+                  ),
+                default: () =>
+                  h(
+                    'div',
+                    {
+                      class: 'task-more-indicator',
+                      onClick: (e: Event) => e.stopPropagation(),
+                    },
+                    `还有${text.length - 1}项`,
+                  ),
+              },
+            ),
+          ]);
+        }
+
+        return h(
+          'div',
+          {},
+          text.map((task) =>
+            h(TaskItem, {
+              task: task,
+              record: record,
+              onHandleTask: handleTaskAction,
+            }),
+          ),
+        );
       },
-      weekday: item.weekday,
-      todayFlag,
-      // 为周末设置特定的背景色
-      cellClass: isWeekend ? 'weekend-column' : '',
-      // 为今日添加特殊类名
-      class: todayFlag ? 'today-column' : '',
+      onCell: (record, index) => ({
+        style: {
+          backgroundColor: isWeekend ? '#fbfaff' : todayFlag ? '#6d4cfe' : 'transparent',
+        },
+        class: todayFlag ? 'today-column' : isWeekend ? 'weekend-column' : '',
+      }),
+      onHeaderCell: () => ({
+        style: {
+          backgroundColor: todayFlag ? '#6d4cfe' : 'transparent',
+          color: todayFlag ? 'white' : 'inherit',
+        },
+        class: todayFlag ? 'today-column' : '',
+      }),
     };
 
-    // 更多调试信息
-    if (todayFlag) {
-      console.log('Column config for today:', columnConfig);
-    }
-
-    columns.value.push(columnConfig);
+    baseColumns.push(columnConfig);
   });
+
+  columns.value = baseColumns;
 };
 
 // 当前日期头部计算
 const currentDateHeaders = computed(() => {
   const { choseType } = dateSelectorModel.value;
-
   if (choseType === '周') {
     return DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0).map((item) =>
       parseInt(item.day.toString(), 10),
@@ -364,6 +417,7 @@ const currentDateHeaders = computed(() => {
 const handleSearch = () => {
   query.page = pageInfo.value.page;
   query.page_size = pageInfo.value.page_size;
+
   getTaskSchedules(query)
     .then((response) => {
       if (response.data) {
@@ -379,46 +433,33 @@ const handleSearch = () => {
     });
 };
 
-// 添加一个标志位来避免死循环
-let isDateSelectorUpdating = false;
 // 日期选择器变化处理
+let isDateSelectorUpdating = false;
 const handleDateSelectorChange = (value: any) => {
-  // 如果正在更新中，则跳过
-  if (isDateSelectorUpdating) {
-    return;
-  }
+  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;
-  }
+  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) {
@@ -435,59 +476,54 @@ const handleFilterChange = (filters: any) => {
           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);
-    }
+const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+  if (sorter && sorter.order === 'ascend' && sorter.column?.date) {
+    const column = sorter.column;
+    query.top_execution_time = DateUtils.formatDate(column.date);
   } else {
     query.top_execution_time = undefined;
   }
   handleSearch();
 };
 
-const handleCellClick = (record: any, rowIndex: any, column: any) => {
+// 单元格点击事件
+const handleCellClick = (record: any, column: any) => {
   const accountInfo = {
     id: record.id,
     name: record.name,
     platform: record.platform,
   };
-  const selectedDate = rowIndex.date;
 
-  // 检查选中的日期是否小于今天，如果是则不处理
+  const selectedDate = column.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('选择的日期已过去，不打开抽屉');
+    message.warning('选择的日期已过去，无法创建任务');
     return;
   }
 
-  console.log('selectedDate', selectedDate, accountInfo);
-  drawerPopupRef.value.showDrawer(accountInfo, 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生成内容'}”吗？`;
+      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);
@@ -495,17 +531,19 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
         }
       });
       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;
+
     case 'edit-task':
-      console.log('edit-task', args[0], typeof args[0]);
       const accountInfo = {
         id: args[0].id,
         name: args[0].name,
@@ -514,23 +552,33 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
       const selectedDate = task.execution_time;
       const date = new Date(selectedDate);
 
-      // 显示抽屉
-      drawerPopupRef.value.showDrawer(accountInfo, date);
-
-      // 等待抽屉打开后再填充数据
+      drawerPopupRef.value?.showDrawer(accountInfo, date);
       nextTick(() => {
-        // 将任务信息回填到draw-popup组件
-        drawerPopupRef.value.fillTaskData(task);
+        drawerPopupRef.value?.fillTaskData(task);
       });
       break;
   }
 };
 
+// 创建任务
+const handleAddTask = () => {
+  drawerPopupRef.value?.showDrawer();
+};
+
+const handleCreateTask = async (value: any) => {
+  const res = await createTask(value);
+  if (res && res.code === 200) {
+    message.success('创建成功');
+    handleSearch();
+  }
+};
+
 // 确认删除
 const handleDeleteConfirm = () => {
   if (currentTask.value) {
     delTaskSchedules(currentTask.value.id).then(() => {
       showModal.value = false;
+      message.success('删除成功');
       handleSearch();
     });
   }
@@ -538,7 +586,6 @@ const handleDeleteConfirm = () => {
 
 // 添加账号
 const handleAddAccount = () => {
-  // 跳转到添加账号页面的逻辑
   router.push('/media-account/add');
 };
 
@@ -574,9 +621,17 @@ const getAccountList = async () => {
   }
 };
 
+// 分页处理
+const handlePageChange = (page: number, pageSize: number) => {
+  onPageChange(page);
+};
+
+const handlePageSizeChange = (current: number, size: number) => {
+  onPageSizeChange(size);
+};
+
 // 初始化
 onMounted(() => {
-  // 确保在初始化时设置表格列和执行搜索
   setTableColumns();
   handleSearch();
   getOperators();
@@ -589,6 +644,8 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 42px;
+  cursor: pointer;
 }
 
 .task-item {
@@ -603,7 +660,15 @@ onMounted(() => {
 .task-more {
   display: flex;
   flex-direction: column;
+}
+
+.task-more-indicator {
+  color: #8f959f;
+  height: 19px;
+  margin-left: 4px;
+  border-radius: 2px;
   cursor: pointer;
+  font-size: 12px;
 }
 
 .no-task {
@@ -611,6 +676,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 /* 周末列样式 */
@@ -619,52 +685,59 @@ onMounted(() => {
 }
 
 /* 今日列样式 */
-:deep(th.today-column),
-:deep(td.today-column) {
+:deep(.today-column) {
   background-color: #6d4cfe !important;
 }
 
-: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;
-  min-height: 42px;
-}
-
-:deep(td .arco-table-cell:first-child) {
-  align-items: center;
-  justify-content: center;
-}
-
-:deep(td.today-column) .arco-table-cell-wrap {
+:deep(.today-column .ant-table-cell) {
   color: white !important;
 }
 
-/* 抽屉左侧圆角样式 */
-:deep(.rounded-left .ant-drawer-content) {
-  border-top-left-radius: 8px !important;
-  border-bottom-left-radius: 8px !important;
+:deep(.today-column .ant-table-cell .task-item) {
+  color: white !important;
 }
 
-/* 任务弹出框样式 */
-:deep(.task-popup-content) {
-  max-height: 300px;
-  overflow-y: auto;
+/* 添加表格分割线和固定行高 */
+:deep(.ant-table) {
+  border: 1px solid #f0f0f0;
+}
+:deep(.ant-table-container) {
+  border-left: 1px solid #f0f0f0;
+  border-right: 1px solid #f0f0f0;
+}
+:deep(.ant-table-thead > tr > th) {
+  border-right: 1px solid #f0f0f0 !important;
+  background-color: #fafafa;
+  font-weight: 600;
+  height: 42px;
+  padding: 8px 12px;
 }
 
+:deep(.ant-table-tbody > tr > td) {
+  border-right: 1px solid #f0f0f0 !important;
+  height: 42px;
+  padding: 8px 12px;
+  vertical-align: top;
+}
+
+/* 第一列垂直居中 */
+:deep(.ant-table-tbody > tr > td:first-child) {
+  vertical-align: middle !important;
+}
+
+/* 移除最后一列的右边框 */
+:deep(.ant-table-thead > tr > th:last-child),
+:deep(.ant-table-tbody > tr > td:last-child) {
+  border-right: none !important;
+}
+
+.task-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 42px;
+  cursor: pointer;
+}
 /* 分页样式 */
 .pagination-box {
   display: flex;
@@ -674,17 +747,11 @@ onMounted(() => {
   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);
+  max-height: 300px;
+  overflow-y: auto;
 }
 </style>